// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Colors.vue renders correctly 1`] = `
<div>
  <div
    class="card"
  >
    <header
      class="card-header"
    >
      <svg
        class="c-icon"
        role="img"
        viewBox="0 0 64 64"
        xmlns="http://www.w3.org/2000/svg"
      >
        undefined
      </svg>
       Theme colors
    
    </header>
     
    <div
      class="card-body"
    >
      <div
        class="row"
      >
        <div
          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
        >
          <div
            class="theme-color w-75 rounded mb-3 bg-primary"
            style="padding-top: 75%;"
          />
           
          <h6>
            Brand Primary Color
          </h6>
           
          <table
            class="w-100"
          >
            <tbody>
              <tr>
                <td
                  class="text-muted"
                >
                  HEX:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  #ffffff
                </td>
              </tr>
               
              <tr>
                <td
                  class="text-muted"
                >
                  RGB:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  rgb(255, 255, 255)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
         
        <div
          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
        >
          <div
            class="theme-color w-75 rounded mb-3 bg-secondary"
            style="padding-top: 75%;"
          />
           
          <h6>
            Brand Secondary Color
          </h6>
           
          <table
            class="w-100"
          >
            <tbody>
              <tr>
                <td
                  class="text-muted"
                >
                  HEX:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  #ffffff
                </td>
              </tr>
               
              <tr>
                <td
                  class="text-muted"
                >
                  RGB:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  rgb(255, 255, 255)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
         
        <div
          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
        >
          <div
            class="theme-color w-75 rounded mb-3 bg-success"
            style="padding-top: 75%;"
          />
           
          <h6>
            Brand Success Color
          </h6>
           
          <table
            class="w-100"
          >
            <tbody>
              <tr>
                <td
                  class="text-muted"
                >
                  HEX:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  #ffffff
                </td>
              </tr>
               
              <tr>
                <td
                  class="text-muted"
                >
                  RGB:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  rgb(255, 255, 255)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
         
        <div
          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
        >
          <div
            class="theme-color w-75 rounded mb-3 bg-danger"
            style="padding-top: 75%;"
          />
           
          <h6>
            Brand Danger Color
          </h6>
           
          <table
            class="w-100"
          >
            <tbody>
              <tr>
                <td
                  class="text-muted"
                >
                  HEX:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  #ffffff
                </td>
              </tr>
               
              <tr>
                <td
                  class="text-muted"
                >
                  RGB:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  rgb(255, 255, 255)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
         
        <div
          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
        >
          <div
            class="theme-color w-75 rounded mb-3 bg-warning"
            style="padding-top: 75%;"
          />
           
          <h6>
            Brand Warning Color
          </h6>
           
          <table
            class="w-100"
          >
            <tbody>
              <tr>
                <td
                  class="text-muted"
                >
                  HEX:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  #ffffff
                </td>
              </tr>
               
              <tr>
                <td
                  class="text-muted"
                >
                  RGB:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  rgb(255, 255, 255)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
         
        <div
          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
        >
          <div
            class="theme-color w-75 rounded mb-3 bg-info"
            style="padding-top: 75%;"
          />
           
          <h6>
            Brand Info Color
          </h6>
           
          <table
            class="w-100"
          >
            <tbody>
              <tr>
                <td
                  class="text-muted"
                >
                  HEX:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  #ffffff
                </td>
              </tr>
               
              <tr>
                <td
                  class="text-muted"
                >
                  RGB:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  rgb(255, 255, 255)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
         
        <div
          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
        >
          <div
            class="theme-color w-75 rounded mb-3 bg-light"
            style="padding-top: 75%;"
          />
           
          <h6>
            Brand Light Color
          </h6>
           
          <table
            class="w-100"
          >
            <tbody>
              <tr>
                <td
                  class="text-muted"
                >
                  HEX:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  #ffffff
                </td>
              </tr>
               
              <tr>
                <td
                  class="text-muted"
                >
                  RGB:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  rgb(255, 255, 255)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
         
        <div
          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
        >
          <div
            class="theme-color w-75 rounded mb-3 bg-dark"
            style="padding-top: 75%;"
          />
           
          <h6>
            Brand Dark Color
          </h6>
           
          <table
            class="w-100"
          >
            <tbody>
              <tr>
                <td
                  class="text-muted"
                >
                  HEX:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  #ffffff
                </td>
              </tr>
               
              <tr>
                <td
                  class="text-muted"
                >
                  RGB:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  rgb(255, 255, 255)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
   
  <div
    class="card"
  >
    <header
      class="card-header"
    >
      <svg
        class="c-icon"
        role="img"
        viewBox="0 0 64 64"
        xmlns="http://www.w3.org/2000/svg"
      >
        undefined
      </svg>
       Grays
    
    </header>
     
    <div
      class="card-body"
    >
      <div
        class="row"
      >
        <div
          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
        >
          <div
            class="theme-color w-75 rounded mb-3 bg-gray-100"
            style="padding-top: 75%;"
          />
           
          <h6>
            Brand 100 Color
          </h6>
           
          <table
            class="w-100"
          >
            <tbody>
              <tr>
                <td
                  class="text-muted"
                >
                  HEX:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  #ffffff
                </td>
              </tr>
               
              <tr>
                <td
                  class="text-muted"
                >
                  RGB:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  rgb(255, 255, 255)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
         
        <div
          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
        >
          <div
            class="theme-color w-75 rounded mb-3 bg-gray-200"
            style="padding-top: 75%;"
          />
           
          <h6>
            Brand 200 Color
          </h6>
           
          <table
            class="w-100"
          >
            <tbody>
              <tr>
                <td
                  class="text-muted"
                >
                  HEX:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  #ffffff
                </td>
              </tr>
               
              <tr>
                <td
                  class="text-muted"
                >
                  RGB:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  rgb(255, 255, 255)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
         
        <div
          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
        >
          <div
            class="theme-color w-75 rounded mb-3 bg-gray-300"
            style="padding-top: 75%;"
          />
           
          <h6>
            Brand 300 Color
          </h6>
           
          <table
            class="w-100"
          >
            <tbody>
              <tr>
                <td
                  class="text-muted"
                >
                  HEX:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  #ffffff
                </td>
              </tr>
               
              <tr>
                <td
                  class="text-muted"
                >
                  RGB:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  rgb(255, 255, 255)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
         
        <div
          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
        >
          <div
            class="theme-color w-75 rounded mb-3 bg-gray-400"
            style="padding-top: 75%;"
          />
           
          <h6>
            Brand 400 Color
          </h6>
           
          <table
            class="w-100"
          >
            <tbody>
              <tr>
                <td
                  class="text-muted"
                >
                  HEX:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  #ffffff
                </td>
              </tr>
               
              <tr>
                <td
                  class="text-muted"
                >
                  RGB:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  rgb(255, 255, 255)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
         
        <div
          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
        >
          <div
            class="theme-color w-75 rounded mb-3 bg-gray-500"
            style="padding-top: 75%;"
          />
           
          <h6>
            Brand 500 Color
          </h6>
           
          <table
            class="w-100"
          >
            <tbody>
              <tr>
                <td
                  class="text-muted"
                >
                  HEX:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  #ffffff
                </td>
              </tr>
               
              <tr>
                <td
                  class="text-muted"
                >
                  RGB:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  rgb(255, 255, 255)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
         
        <div
          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
        >
          <div
            class="theme-color w-75 rounded mb-3 bg-gray-600"
            style="padding-top: 75%;"
          />
           
          <h6>
            Brand 600 Color
          </h6>
           
          <table
            class="w-100"
          >
            <tbody>
              <tr>
                <td
                  class="text-muted"
                >
                  HEX:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  #ffffff
                </td>
              </tr>
               
              <tr>
                <td
                  class="text-muted"
                >
                  RGB:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  rgb(255, 255, 255)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
         
        <div
          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
        >
          <div
            class="theme-color w-75 rounded mb-3 bg-gray-700"
            style="padding-top: 75%;"
          />
           
          <h6>
            Brand 700 Color
          </h6>
           
          <table
            class="w-100"
          >
            <tbody>
              <tr>
                <td
                  class="text-muted"
                >
                  HEX:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  #ffffff
                </td>
              </tr>
               
              <tr>
                <td
                  class="text-muted"
                >
                  RGB:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  rgb(255, 255, 255)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
         
        <div
          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
        >
          <div
            class="theme-color w-75 rounded mb-3 bg-gray-800"
            style="padding-top: 75%;"
          />
           
          <h6>
            Brand 800 Color
          </h6>
           
          <table
            class="w-100"
          >
            <tbody>
              <tr>
                <td
                  class="text-muted"
                >
                  HEX:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  #ffffff
                </td>
              </tr>
               
              <tr>
                <td
                  class="text-muted"
                >
                  RGB:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  rgb(255, 255, 255)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
         
        <div
          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
        >
          <div
            class="theme-color w-75 rounded mb-3 bg-gray-900"
            style="padding-top: 75%;"
          />
           
          <h6>
            Brand 900 Color
          </h6>
           
          <table
            class="w-100"
          >
            <tbody>
              <tr>
                <td
                  class="text-muted"
                >
                  HEX:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  #ffffff
                </td>
              </tr>
               
              <tr>
                <td
                  class="text-muted"
                >
                  RGB:
                </td>
                 
                <td
                  class="font-weight-bold"
                >
                  rgb(255, 255, 255)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
`;
