Tangible Pattern Library

Colors 

<div class="sg-colors">

    <div class="sg-colors__item">
        <div class="sg-colors__itemShape">
            <div class="sg-color__pattern" style="background-color: hsl(0, 0%, 100%)">
                <div class="color-info-box">
                    <p class="color-name">base-100</p>
                    <p class="color-hex">hsl(0, 0%, 100%)</p>
                    <p style="font-size: 24px; color: hsl(0, 0%, 100%)">Aa</p>
                </div>
            </div>
        </div>
        <div class="sg-colors__itemInfos">
            <div class="classes">
                <span class="class-desc">Text color:</span>
                <code class="class-name">u-color-base-100</code>
            </div>
            <div class="classes">
                <span class="class-desc">Background color:</span>
                <code class="class-name">u-bg-color-base-100</code>
            </div>
            <div class="classes">
                <span class="class-desc">Border color:</span>
                <code class="class-name">u-border-color-base-100</code>
            </div>
        </div>
    </div>

    <div class="sg-colors__item">
        <div class="sg-colors__itemShape">
            <div class="sg-color__pattern" style="background-color: hsl(245, 37%, 17%)">
                <div class="color-info-box">
                    <p class="color-name">primary-100</p>
                    <p class="color-hex">hsl(245, 37%, 17%)</p>
                    <p style="font-size: 24px; color: hsl(245, 37%, 17%)">Aa</p>
                </div>
            </div>
        </div>
        <div class="sg-colors__itemInfos">
            <div class="classes">
                <span class="class-desc">Text color:</span>
                <code class="class-name">u-color-primary-100</code>
            </div>
            <div class="classes">
                <span class="class-desc">Background color:</span>
                <code class="class-name">u-bg-color-primary-100</code>
            </div>
            <div class="classes">
                <span class="class-desc">Border color:</span>
                <code class="class-name">u-border-color-primary-100</code>
            </div>
        </div>
    </div>

    <div class="sg-colors__item">
        <div class="sg-colors__itemShape">
            <div class="sg-color__pattern" style="background-color: hsl(174, 100%, 44% )">
                <div class="color-info-box">
                    <p class="color-name">highlight-100</p>
                    <p class="color-hex">hsl(174, 100%, 44% )</p>
                    <p style="font-size: 24px; color: hsl(174, 100%, 44% )">Aa</p>
                </div>
            </div>
        </div>
        <div class="sg-colors__itemInfos">
            <div class="classes">
                <span class="class-desc">Text color:</span>
                <code class="class-name">u-color-highlight-100</code>
            </div>
            <div class="classes">
                <span class="class-desc">Background color:</span>
                <code class="class-name">u-bg-color-highlight-100</code>
            </div>
            <div class="classes">
                <span class="class-desc">Border color:</span>
                <code class="class-name">u-border-color-highlight-100</code>
            </div>
        </div>
    </div>

    <div class="sg-colors__item">
        <div class="sg-colors__itemShape">
            <div class="sg-color__pattern" style="background-color: hsl(347, 89%, 48%)">
                <div class="color-info-box">
                    <p class="color-name">accent-100</p>
                    <p class="color-hex">hsl(347, 89%, 48%)</p>
                    <p style="font-size: 24px; color: hsl(347, 89%, 48%)">Aa</p>
                </div>
            </div>
        </div>
        <div class="sg-colors__itemInfos">
            <div class="classes">
                <span class="class-desc">Text color:</span>
                <code class="class-name">u-color-accent-100</code>
            </div>
            <div class="classes">
                <span class="class-desc">Background color:</span>
                <code class="class-name">u-bg-color-accent-100</code>
            </div>
            <div class="classes">
                <span class="class-desc">Border color:</span>
                <code class="class-name">u-border-color-accent-100</code>
            </div>
        </div>
    </div>

    <div class="sg-colors__item">
        <div class="sg-colors__itemShape">
            <div class="sg-color__pattern" style="background-color: hsl(240, 2%, 92%)">
                <div class="color-info-box">
                    <p class="color-name">grey</p>
                    <p class="color-hex">hsl(240, 2%, 92%)</p>
                    <p style="font-size: 24px; color: hsl(240, 2%, 92%)">Aa</p>
                </div>
            </div>
        </div>
        <div class="sg-colors__itemInfos">
            <div class="classes">
                <span class="class-desc">Text color:</span>
                <code class="class-name">u-color-grey</code>
            </div>
            <div class="classes">
                <span class="class-desc">Background color:</span>
                <code class="class-name">u-bg-color-grey</code>
            </div>
            <div class="classes">
                <span class="class-desc">Border color:</span>
                <code class="class-name">u-border-color-grey</code>
            </div>
        </div>
    </div>

    <div class="sg-colors__item">
        <div class="sg-colors__itemShape">
            <div class="sg-color__pattern" style="background-color: hsl(210, 21%, 85%)">
                <div class="color-info-box">
                    <p class="color-name">geyser-blue</p>
                    <p class="color-hex">hsl(210, 21%, 85%)</p>
                    <p style="font-size: 24px; color: hsl(210, 21%, 85%)">Aa</p>
                </div>
            </div>
        </div>
        <div class="sg-colors__itemInfos">
            <div class="classes">
                <span class="class-desc">Text color:</span>
                <code class="class-name">u-color-geyser-blue</code>
            </div>
            <div class="classes">
                <span class="class-desc">Background color:</span>
                <code class="class-name">u-bg-color-geyser-blue</code>
            </div>
            <div class="classes">
                <span class="class-desc">Border color:</span>
                <code class="class-name">u-border-color-geyser-blue</code>
            </div>
        </div>
    </div>

    <div class="sg-colors__item">
        <div class="sg-colors__itemShape">
            <div class="sg-color__pattern" style="background-color: hsl(216, 20%, 95%)">
                <div class="color-info-box">
                    <p class="color-name">breeze-grey</p>
                    <p class="color-hex">hsl(216, 20%, 95%)</p>
                    <p style="font-size: 24px; color: hsl(216, 20%, 95%)">Aa</p>
                </div>
            </div>
        </div>
        <div class="sg-colors__itemInfos">
            <div class="classes">
                <span class="class-desc">Text color:</span>
                <code class="class-name">u-color-breeze-grey</code>
            </div>
            <div class="classes">
                <span class="class-desc">Background color:</span>
                <code class="class-name">u-bg-color-breeze-grey</code>
            </div>
            <div class="classes">
                <span class="class-desc">Border color:</span>
                <code class="class-name">u-border-color-breeze-grey</code>
            </div>
        </div>
    </div>

</div>
 
<div class="sg-colors">
	
	{# BASE #}
	{% for color in base %}
	<div class="sg-colors__item">
		<div class="sg-colors__itemShape">
			<div class="sg-color__pattern" style="background-color: {{ color.code }}">
				<div class="color-info-box">
					<p class="color-name">{{ color.value }}</p>
					<p class="color-hex">{{ color.code }}</p>
					<p style="font-size: 24px; color: {{ color.code }}">Aa</p>
				</div>
			</div>
		</div>
		<div class="sg-colors__itemInfos">
			{% for class in color.classes %}
			<div class="classes">
				<span class="class-desc">{{ class.desc }}:</span>
				<code class="class-name">{{ class.name }}</code>
			</div>
			{% endfor %}
		</div>
	</div>
	{% endfor %}

	{# PRIMARY #}
	{% for color in primary %}
	<div class="sg-colors__item">
		<div class="sg-colors__itemShape">
			<div class="sg-color__pattern" style="background-color: {{ color.code }}">
				<div class="color-info-box">
					<p class="color-name">{{ color.value }}</p>
					<p class="color-hex">{{ color.code }}</p>
					<p style="font-size: 24px; color: {{ color.code }}">Aa</p>
				</div>
			</div>
		</div>
		<div class="sg-colors__itemInfos">
			{% for class in color.classes %}
			<div class="classes">
				<span class="class-desc">{{ class.desc }}:</span>
				<code class="class-name">{{ class.name }}</code>
			</div>
			{% endfor %}
		</div>
	</div>
	{% endfor %}

	{# HIGHLIGHT #}
	{% for color in highlight %}
	<div class="sg-colors__item">
		<div class="sg-colors__itemShape">
			<div class="sg-color__pattern" style="background-color: {{ color.code }}">
				<div class="color-info-box">
					<p class="color-name">{{ color.value }}</p>
					<p class="color-hex">{{ color.code }}</p>
					<p style="font-size: 24px; color: {{ color.code }}">Aa</p>
				</div>
			</div>
		</div>
		<div class="sg-colors__itemInfos">
			{% for class in color.classes %}
			<div class="classes">
				<span class="class-desc">{{ class.desc }}:</span>
				<code class="class-name">{{ class.name }}</code>
			</div>
			{% endfor %}
		</div>
	</div>
	{% endfor %}

	{# ACCENT #}
	{% for color in accent %}
	<div class="sg-colors__item">
		<div class="sg-colors__itemShape">
			<div class="sg-color__pattern" style="background-color: {{ color.code }}">
				<div class="color-info-box">
					<p class="color-name">{{ color.value }}</p>
					<p class="color-hex">{{ color.code }}</p>
					<p style="font-size: 24px; color: {{ color.code }}">Aa</p>
				</div>
			</div>
		</div>
		<div class="sg-colors__itemInfos">
			{% for class in color.classes %}
			<div class="classes">
				<span class="class-desc">{{ class.desc }}:</span>
				<code class="class-name">{{ class.name }}</code>
			</div>
			{% endfor %}
		</div>
	</div>
	{% endfor %}

	{# GREY #}
	{% for color in grey %}
	<div class="sg-colors__item">
		<div class="sg-colors__itemShape">
			<div class="sg-color__pattern" style="background-color: {{ color.code }}">
				<div class="color-info-box">
					<p class="color-name">{{ color.value }}</p>
					<p class="color-hex">{{ color.code }}</p>
					<p style="font-size: 24px; color: {{ color.code }}">Aa</p>
				</div>
			</div>
		</div>
		<div class="sg-colors__itemInfos">
			{% for class in color.classes %}
			<div class="classes">
				<span class="class-desc">{{ class.desc }}:</span>
				<code class="class-name">{{ class.name }}</code>
			</div>
			{% endfor %}
		</div>
	</div>
	{% endfor %}

	{# GEYSER BLUE #}
	{% for color in geyser_blue %}
	<div class="sg-colors__item">
		<div class="sg-colors__itemShape">
			<div class="sg-color__pattern" style="background-color: {{ color.code }}">
				<div class="color-info-box">
					<p class="color-name">{{ color.value }}</p>
					<p class="color-hex">{{ color.code }}</p>
					<p style="font-size: 24px; color: {{ color.code }}">Aa</p>
				</div>
			</div>
		</div>
		<div class="sg-colors__itemInfos">
			{% for class in color.classes %}
			<div class="classes">
				<span class="class-desc">{{ class.desc }}:</span>
				<code class="class-name">{{ class.name }}</code>
			</div>
			{% endfor %}
		</div>
	</div>
	{% endfor %}

	{# BREEZE GREY #}
	{% for color in breeze_grey %}
	<div class="sg-colors__item">
		<div class="sg-colors__itemShape">
			<div class="sg-color__pattern" style="background-color: {{ color.code }}">
				<div class="color-info-box">
					<p class="color-name">{{ color.value }}</p>
					<p class="color-hex">{{ color.code }}</p>
					<p style="font-size: 24px; color: {{ color.code }}">Aa</p>
				</div>
			</div>
		</div>
		<div class="sg-colors__itemInfos">
			{% for class in color.classes %}
			<div class="classes">
				<span class="class-desc">{{ class.desc }}:</span>
				<code class="class-name">{{ class.name }}</code>
			</div>
			{% endfor %}
		</div>
	</div>
	{% endfor %}

</div>
 
{
  "base": [
    {
      "value": "base-100",
      "code": "hsl(0, 0%, 100%)",
      "classes": [
        {
          "desc": "Text color",
          "name": "u-color-base-100"
        },
        {
          "desc": "Background color",
          "name": "u-bg-color-base-100"
        },
        {
          "desc": "Border color",
          "name": "u-border-color-base-100"
        }
      ]
    }
  ],
  "primary": [
    {
      "value": "primary-100",
      "code": "hsl(245, 37%, 17%)",
      "classes": [
        {
          "desc": "Text color",
          "name": "u-color-primary-100"
        },
        {
          "desc": "Background color",
          "name": "u-bg-color-primary-100"
        },
        {
          "desc": "Border color",
          "name": "u-border-color-primary-100"
        }
      ]
    }
  ],
  "highlight": [
    {
      "value": "highlight-100",
      "code": "hsl(174, 100%, 44% )",
      "classes": [
        {
          "desc": "Text color",
          "name": "u-color-highlight-100"
        },
        {
          "desc": "Background color",
          "name": "u-bg-color-highlight-100"
        },
        {
          "desc": "Border color",
          "name": "u-border-color-highlight-100"
        }
      ]
    }
  ],
  "accent": [
    {
      "value": "accent-100",
      "code": "hsl(347, 89%, 48%)",
      "classes": [
        {
          "desc": "Text color",
          "name": "u-color-accent-100"
        },
        {
          "desc": "Background color",
          "name": "u-bg-color-accent-100"
        },
        {
          "desc": "Border color",
          "name": "u-border-color-accent-100"
        }
      ]
    }
  ],
  "grey": [
    {
      "value": "grey",
      "code": "hsl(240, 2%, 92%)",
      "classes": [
        {
          "desc": "Text color",
          "name": "u-color-grey"
        },
        {
          "desc": "Background color",
          "name": "u-bg-color-grey"
        },
        {
          "desc": "Border color",
          "name": "u-border-color-grey"
        }
      ]
    }
  ],
  "geyser_blue": [
    {
      "value": "geyser-blue",
      "code": "hsl(210, 21%, 85%)",
      "classes": [
        {
          "desc": "Text color",
          "name": "u-color-geyser-blue"
        },
        {
          "desc": "Background color",
          "name": "u-bg-color-geyser-blue"
        },
        {
          "desc": "Border color",
          "name": "u-border-color-geyser-blue"
        }
      ]
    }
  ],
  "breeze_grey": [
    {
      "value": "breeze-grey",
      "code": "hsl(216, 20%, 95%)",
      "classes": [
        {
          "desc": "Text color",
          "name": "u-color-breeze-grey"
        },
        {
          "desc": "Background color",
          "name": "u-bg-color-breeze-grey"
        },
        {
          "desc": "Border color",
          "name": "u-border-color-breeze-grey"
        }
      ]
    }
  ]
}

No notes defined.