BUX Component Development Platform

Colors 

<div class="bux-colors">
    <h2 class="bux-colors__group-label">Primary Colors</h2>
    <ul class="bux-colors__group bux-colors__group--Primary Colors">
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #ba0c2f;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$scarlet</code>
                <code class="bux-colors__code">#ba0c2f</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #a7b1b7;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$gray</code>
                <code class="bux-colors__code">#a7b1b7</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #fff;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$white</code>
                <code class="bux-colors__code">#fff</code>
            </div>
        </li>
    </ul>
    <h2 class="bux-colors__group-label">Scarlet Shades</h2>
    <ul class="bux-colors__group bux-colors__group--Scarlet Shades">
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #70071c;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$scarlet-dark-40</code>
                <code class="bux-colors__code">#70071c</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #4a0513;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$scarlet-dark-60</code>
                <code class="bux-colors__code">#4a0513</code>
            </div>
        </li>
    </ul>
    <h2 class="bux-colors__group-label">Gray Tints</h2>
    <ul class="bux-colors__group bux-colors__group--Gray Tints">
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #bfc6cb;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$gray-light-20</code>
                <code class="bux-colors__code">#bfc6cb</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #cfd4d8;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$gray-light-40</code>
                <code class="bux-colors__code">#cfd4d8</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #dfe3e5;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$gray-light-60</code>
                <code class="bux-colors__code">#dfe3e5</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #eff1f2;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$gray-light-80</code>
                <code class="bux-colors__code">#eff1f2</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #f6f7f8;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$gray-light-90</code>
                <code class="bux-colors__code">#f6f7f8</code>
            </div>
        </li>
    </ul>
    <h2 class="bux-colors__group-label">Gray Shades</h2>
    <ul class="bux-colors__group bux-colors__group--Gray Shades">
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #868e92;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$gray-dark-20</code>
                <code class="bux-colors__code">#868e92</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #646a6e;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$gray-dark-40</code>
                <code class="bux-colors__code">#646a6e</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #3f4443;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$gray-dark-60</code>
                <code class="bux-colors__code">#3f4443</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #212325;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$gray-dark-80</code>
                <code class="bux-colors__code">#212325</code>
            </div>
        </li>
    </ul>
    <h2 class="bux-colors__group-label">Neutrals</h2>
    <ul class="bux-colors__group bux-colors__group--Neutrals">
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: rgba(0, 0, 0, 0);"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$clear</code>
                <code class="bux-colors__code">rgba(0, 0, 0, 0)</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #000;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$black</code>
                <code class="bux-colors__code">#000</code>
            </div>
        </li>
    </ul>
    <h2 class="bux-colors__group-label">Accent</h2>
    <ul class="bux-colors__group bux-colors__group--Accent">
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #41b6e6;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$blue</code>
                <code class="bux-colors__code">#41b6e6</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #ff6a39;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$orange</code>
                <code class="bux-colors__code">#ff6a39</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #8edd65;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$green</code>
                <code class="bux-colors__code">#8edd65</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #946037;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$brown</code>
                <code class="bux-colors__code">#946037</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #fb637e;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$pink</code>
                <code class="bux-colors__code">#fb637e</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #830065;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$violet</code>
                <code class="bux-colors__code">#830065</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #6bbbab;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$aqua</code>
                <code class="bux-colors__code">#6bbbab</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #26686d;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$teal</code>
                <code class="bux-colors__code">#26686d</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #ffb600;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$gold</code>
                <code class="bux-colors__code">#ffb600</code>
            </div>
        </li>
    </ul>
    <h2 class="bux-colors__group-label">Utility</h2>
    <ul class="bux-colors__group bux-colors__group--Utility">
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #c6e9f8;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$info-light</code>
                <code class="bux-colors__code">#c6e9f8</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #2E7FA1;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$info-dark</code>
                <code class="bux-colors__code">#2E7FA1</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #dcf5d0;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$success-light</code>
                <code class="bux-colors__code">#dcf5d0</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #55853D;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$success-dark</code>
                <code class="bux-colors__code">#55853D</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #fff0cc;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$warning-light</code>
                <code class="bux-colors__code">#fff0cc</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #E65F33;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$warning-dark</code>
                <code class="bux-colors__code">#E65F33</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #ba0c2f;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$error</code>
                <code class="bux-colors__code">#ba0c2f</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #3492b8;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$focus</code>
                <code class="bux-colors__code">#3492b8</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #74BAD8;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$focus-light</code>
                <code class="bux-colors__code">#74BAD8</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #660099;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$visited</code>
                <code class="bux-colors__code">#660099</code>
            </div>
        </li>
        <li class="bux-colors__item">
            <div class="bux-colors__swatch" style="background-color: #e7cdf4;"></div>
            <div class="bux-colors__label">
                <code class="bux-colors__code">$visited-light</code>
                <code class="bux-colors__code">#e7cdf4</code>
            </div>
        </li>
    </ul>
</div>
 
<div class="bux-colors">
	{% for group in groups %}
		<h2 class="bux-colors__group-label">{{ group.label }}</h2>
		<ul class="bux-colors__group bux-colors__group--{{ group.label }}">
			{% for color in group.colors %}
				<li class="bux-colors__item">
					<div class="bux-colors__swatch" style="background-color: {{ color.value }};"></div>
					<div class="bux-colors__label">
						<code class="bux-colors__code">{{ color.name }}</code>
						<code class="bux-colors__code">{{ color.value }}</code>
					</div>
				</li>
			{% endfor %}
		</ul>
	{% endfor %}
</div>
 
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
groups:
  - label: Primary Colors
    colors:
      - name: $scarlet
        value: '#ba0c2f'
      - name: $gray
        value: '#a7b1b7'
      - name: $white
        value: '#fff'
  - label: Scarlet Shades
    colors:
      - name: $scarlet-dark-40
        value: '#70071c'
      - name: $scarlet-dark-60
        value: '#4a0513'
  - label: Gray Tints
    colors:
      - name: $gray-light-20
        value: '#bfc6cb'
      - name: $gray-light-40
        value: '#cfd4d8'
      - name: $gray-light-60
        value: '#dfe3e5'
      - name: $gray-light-80
        value: '#eff1f2'
      - name: $gray-light-90
        value: '#f6f7f8'
  - label: Gray Shades
    colors:
      - name: $gray-dark-20
        value: '#868e92'
      - name: $gray-dark-40
        value: '#646a6e'
      - name: $gray-dark-60
        value: '#3f4443'
      - name: $gray-dark-80
        value: '#212325'
  - label: Neutrals
    colors:
      - name: $clear
        value: rgba(0, 0, 0, 0)
      - name: $black
        value: '#000'
  - label: Accent
    colors:
      - name: $blue
        value: '#41b6e6'
      - name: $orange
        value: '#ff6a39'
      - name: $green
        value: '#8edd65'
      - name: $brown
        value: '#946037'
      - name: $pink
        value: '#fb637e'
      - name: $violet
        value: '#830065'
      - name: $aqua
        value: '#6bbbab'
      - name: $teal
        value: '#26686d'
      - name: $gold
        value: '#ffb600'
  - label: Utility
    colors:
      - name: $info-light
        value: '#c6e9f8'
      - name: $info-dark
        value: '#2E7FA1'
      - name: $success-light
        value: '#dcf5d0'
      - name: $success-dark
        value: '#55853D'
      - name: $warning-light
        value: '#fff0cc'
      - name: $warning-dark
        value: '#E65F33'
      - name: $error
        value: '#ba0c2f'
      - name: $focus
        value: '#3492b8'
      - name: $focus-light
        value: '#74BAD8'
      - name: $visited
        value: '#660099'
      - name: $visited-light
        value: '#e7cdf4'
  • Content: 
    .bux-colors__group-label {
	font-size: $ts-22;
	font-weight: 600;
	margin: rem-calc(12 0 4);
}

.bux-colors__group {
	display: flex;
	flex-wrap: wrap;
}

.bux-colors__item {
	width: rem-calc(140);
	margin-right: $sp-16;
	margin-bottom: $sp-32;
	border: 1px solid $gray-light-60;
	&:last-child {
		margin-right: 0;
	}
}

.bux-colors__swatch {
	height: rem-calc(80);
}

.bux-colors__label {
	padding: $sp-4 $sp-8;
}

.bux-colors__code {
	display: block;
	font-size: $ts-xs;
	font-family: $code;
}
  • URL: /components/raw/colors/_colors.scss
  • Filesystem Path: src/components/colors/_colors.scss
  • Size: 495 Bytes

No notes defined.