TheaterMania Component Library

Colors 

<ul class="library-colors">
    <li class="library-color">
        <div class="library-color-swatch library-color--primary"></div>
        <div class="library-color-details">
            <h4 class="heading-small">Primary</h4>
            <code class="library-color-name">$color-primary</code>
        </div>
    </li>
    <li class="library-color">
        <div class="library-color-swatch library-color--primary-light"></div>
        <div class="library-color-details">
            <h4 class="heading-small">Primary Light</h4>
            <code class="library-color-name">$color-primary-light</code>
        </div>
    </li>
    <li class="library-color">
        <div class="library-color-swatch library-color--primary-dark"></div>
        <div class="library-color-details">
            <h4 class="heading-small">Primary Dark</h4>
            <code class="library-color-name">$color-primary-dark</code>
        </div>
    </li>
    <li class="library-color">
        <div class="library-color-swatch library-color--secondary"></div>
        <div class="library-color-details">
            <h4 class="heading-small">Secondary</h4>
            <code class="library-color-name">$color-secondary</code>
        </div>
    </li>
    <li class="library-color">
        <div class="library-color-swatch library-color--secondary-light"></div>
        <div class="library-color-details">
            <h4 class="heading-small">Secondary Light</h4>
            <code class="library-color-name">$color-secondary-light</code>
        </div>
    </li>
    <li class="library-color">
        <div class="library-color-swatch library-color--secondary-dark"></div>
        <div class="library-color-details">
            <h4 class="heading-small">Secondary Dark</h4>
            <code class="library-color-name">$color-secondary-dark</code>
        </div>
    </li>
    <li class="library-color">
        <div class="library-color-swatch library-color--accent-red"></div>
        <div class="library-color-details">
            <h4 class="heading-small">Red</h4>
            <code class="library-color-name">$color-accent-red</code>
            <div class="library-color-semantic">
                Semantic names:
                <code class="code-block">$color-error</code>
            </div>
        </div>
    </li>
    <li class="library-color">
        <div class="library-color-swatch library-color--accent-yellow"></div>
        <div class="library-color-details">
            <h4 class="heading-small">Yellow</h4>
            <code class="library-color-name">$color-accent-yellow</code>
        </div>
    </li>
    <li class="library-color">
        <div class="library-color-swatch library-color--accent-green"></div>
        <div class="library-color-details">
            <h4 class="heading-small">Green</h4>
            <code class="library-color-name">$color-accent-green</code>
            <div class="library-color-semantic">
                Semantic names:
                <code class="code-block">$color-success</code>
            </div>
        </div>
    </li>
    <li class="library-color">
        <div class="library-color-swatch library-color--black"></div>
        <div class="library-color-details">
            <h4 class="heading-small">Black</h4>
            <code class="library-color-name">$color-black</code>
        </div>
    </li>
    <li class="library-color">
        <div class="library-color-swatch library-color--gray"></div>
        <div class="library-color-details">
            <h4 class="heading-small">Gray</h4>
            <code class="library-color-name">$color-gray</code>
            <div class="library-color-semantic">
                Semantic names:
                <code class="code-block">$color-text</code>
            </div>
        </div>
    </li>
    <li class="library-color">
        <div class="library-color-swatch library-color--gray-dark"></div>
        <div class="library-color-details">
            <h4 class="heading-small">Dark Gray</h4>
            <code class="library-color-name">$color-gray-dark</code>
            <div class="library-color-semantic">
                Semantic names:
                <code class="code-block">$color-text-dark</code>
            </div>
        </div>
    </li>
    <li class="library-color">
        <div class="library-color-swatch library-color--gray-light"></div>
        <div class="library-color-details">
            <h4 class="heading-small">Light Gray</h4>
            <code class="library-color-name">$color-gray-light</code>
            <div class="library-color-semantic">
                Semantic names:
                <code class="code-block">$color-disabled</code>
                <code class="code-block">$color-border</code>
                <code class="code-block">$color-text-light</code>
            </div>
        </div>
    </li>
    <li class="library-color">
        <div class="library-color-swatch library-color--gray-lighter"></div>
        <div class="library-color-details">
            <h4 class="heading-small">Lighter Gray</h4>
            <code class="library-color-name">$color-gray-lighter</code>
        </div>
    </li>
    <li class="library-color">
        <div class="library-color-swatch library-color--gray-lightest"></div>
        <div class="library-color-details">
            <h4 class="heading-small">Lightest Gray</h4>
            <code class="library-color-name">$color-gray-lightest</code>
        </div>
    </li>
    <li class="library-color">
        <div class="library-color-swatch library-color--white"></div>
        <div class="library-color-details">
            <h4 class="heading-small">White</h4>
            <code class="library-color-name">$color-white</code>
            <div class="library-color-semantic">
                Semantic names:
                <code class="code-block">$color-background</code>
            </div>
        </div>
    </li>
</ul>
 
<ul class="library-colors">
  {{#each items}}
  <li class="library-color">
    <div class="library-color-swatch {{color-class}}"></div>
    <div class="library-color-details">
      <h4 class="heading-small">{{name}}</h4>
      <code class="library-color-name">{{var}}</code>
      {{#if items}}
      <div class="library-color-semantic">
        Semantic names:
        {{#each items}}
        <code class="code-block">{{semantic}}</code>
        {{/each}}
      </div>
      {{/if}}
    </div>
  </li>
  {{/each}}
</ul>
 
{
  "name": "Theatermania",
  "items": [
    {
      "color-class": "library-color--primary",
      "name": "Primary",
      "var": "$color-primary"
    },
    {
      "color-class": "library-color--primary-light",
      "name": "Primary Light",
      "var": "$color-primary-light"
    },
    {
      "color-class": "library-color--primary-dark",
      "name": "Primary Dark",
      "var": "$color-primary-dark"
    },
    {
      "color-class": "library-color--secondary",
      "name": "Secondary",
      "var": "$color-secondary"
    },
    {
      "color-class": "library-color--secondary-light",
      "name": "Secondary Light",
      "var": "$color-secondary-light"
    },
    {
      "color-class": "library-color--secondary-dark",
      "name": "Secondary Dark",
      "var": "$color-secondary-dark"
    },
    {
      "color-class": "library-color--accent-red",
      "name": "Red",
      "var": "$color-accent-red",
      "items": [
        {
          "semantic": "$color-error"
        }
      ]
    },
    {
      "color-class": "library-color--accent-yellow",
      "name": "Yellow",
      "var": "$color-accent-yellow"
    },
    {
      "color-class": "library-color--accent-green",
      "name": "Green",
      "var": "$color-accent-green",
      "items": [
        {
          "semantic": "$color-success"
        }
      ]
    },
    {
      "color-class": "library-color--black",
      "name": "Black",
      "var": "$color-black"
    },
    {
      "color-class": "library-color--gray",
      "name": "Gray",
      "var": "$color-gray",
      "items": [
        {
          "semantic": "$color-text"
        }
      ]
    },
    {
      "color-class": "library-color--gray-dark",
      "name": "Dark Gray",
      "var": "$color-gray-dark",
      "items": [
        {
          "semantic": "$color-text-dark"
        }
      ]
    },
    {
      "color-class": "library-color--gray-light",
      "name": "Light Gray",
      "var": "$color-gray-light",
      "items": [
        {
          "semantic": "$color-disabled"
        },
        {
          "semantic": "$color-border"
        },
        {
          "semantic": "$color-text-light"
        }
      ]
    },
    {
      "color-class": "library-color--gray-lighter",
      "name": "Lighter Gray",
      "var": "$color-gray-lighter"
    },
    {
      "color-class": "library-color--gray-lightest",
      "name": "Lightest Gray",
      "var": "$color-gray-lightest"
    },
    {
      "color-class": "library-color--white",
      "name": "White",
      "var": "$color-white",
      "items": [
        {
          "semantic": "$color-background"
        }
      ]
    }
  ]
}
  • Content: 
    .library-colors {
  display: flex;
  flex-wrap: wrap;
  max-width: $break-xlarge;
  margin-top: 0;
  padding-left: 0;
  list-style: none;
}

.library-color {
  margin: 0 3rem 4rem 0;
  width: 13.75rem;
}

.library-color-swatch {
  display: block;
  margin: 0 1rem 1rem 0;
  width: 100%;
  height: 5rem;
  border-radius: 0.33rem;

  &:last-child {
    margin-right: 0;
  }
}

.library-color-name {
  display: block;
  margin-top: 0.5rem;
  font-weight: 700;
}

.library-color-semantic {
  margin-top: 2rem;
}

// Primary
.library-color--primary {
  background: $color-primary;
}

.library-color--primary-light {
  background: $color-primary-light;
}

.library-color--primary-dark {
  background: $color-primary-dark;
}

// Secondary
.library-color--secondary {
  background: $color-secondary;
}

.library-color--secondary-light {
  background: $color-secondary-light;
}

.library-color--secondary-dark {
  background: $color-secondary-dark;
}

// Accents
.library-color--accent-red {
  background: $color-accent-red;
}

.library-color--accent-yellow {
  background: $color-accent-yellow;
}

.library-color--accent-green {
  background: $color-accent-green;
}

// Grays
.library-color--black {
  background: $color-black;
}

.library-color--gray {
  background: $color-gray;
}

.library-color--gray-dark {
  background: $color-gray-dark;
}

.library-color--gray-light {
  background: $color-gray-light;
}

.library-color--gray-lighter {
  background: $color-gray-lighter;
}

.library-color--gray-lightest {
  background: $color-gray-lightest;
}

.library-color--white {
  background: $color-white;
}

.library-color--black {
  background: $color-black;
}
  • URL: /components/raw/colors/Colors.scss
  • Filesystem Path: src/components/01-Units/Colors/Colors.scss
  • Size: 1.7 KB

Color variables should use semantic naming for styling if available.

For example, use $color-text instead of $color-gray. $color-gray should be used when no semantically appropriate variable is available for your use case.