Semantic Color Utilities

Ready

HTML
View
Context
Info
Notes


        
        <div class="p-6 grid grid-cols-2 gap-10">

    <div>
        <h2 class="text-xl mb-6"><strong>Link</strong></h2>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-link-primary</strong></h3>

                </div>
                <div class=" pb-6 n7-link-primary flex-1">

                    <p class="n7-link-primary text-lg">text sample</p>

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-link-primary-hover</strong></h3>

                </div>
                <div class=" pb-6 n7-link-primary-hover flex-1">

                    <p class="n7-link-primary-hover text-lg">text sample</p>

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-link-inverse</strong></h3>

                </div>
                <div class=" pb-6 n7-link-inverse flex-1">

                    <p class="n7-link-inverse text-lg">text sample</p>

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-link-inverse-hover</strong></h3>

                </div>
                <div class=" pb-6 n7-link-inverse-hover flex-1">

                    <p class="n7-link-inverse-hover text-lg">text sample</p>

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-link-inverse-visited</strong></h3>

                </div>
                <div class=" pb-6 n7-link-inverse-visited flex-1">

                    <p class="n7-link-inverse-visited text-lg">text sample</p>

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-link-visited</strong></h3>

                </div>
                <div class=" pb-6 n7-link-visited flex-1">

                    <p class="n7-link-visited text-lg">text sample</p>

                </div>
            </div>
        </div>

    </div>

    <div>
        <h2 class="text-xl mb-6"><strong>Buttons</strong></h2>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-button-primary</strong></h3>

                </div>
                <div class=" h-14 n7-button-primary flex-1">

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-button-primary-hover</strong></h3>

                </div>
                <div class=" h-14 n7-button-primary-hover flex-1">

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-button-primary-active</strong></h3>

                </div>
                <div class=" h-14 n7-button-primary-active flex-1">

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-button-secondary</strong></h3>

                </div>
                <div class=" h-14 n7-button-secondary flex-1">

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-button-secondary-hover</strong></h3>

                </div>
                <div class=" h-14 n7-button-secondary-hover flex-1">

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-button-secondary-active</strong></h3>

                </div>
                <div class=" h-14 n7-button-secondary-active flex-1">

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-button-disabled</strong></h3>

                </div>
                <div class=" h-14 n7-button-disabled flex-1">

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-button-only-text</strong></h3>

                </div>
                <div class=" pb-6  flex-1">

                    <p class="n7-button-only-text text-lg">text sample</p>

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-button-only-text-hover</strong></h3>

                </div>
                <div class=" pb-6  flex-1">

                    <p class="n7-button-only-text-hover text-lg">text sample</p>

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-button-only-text-active</strong></h3>

                </div>
                <div class=" pb-6  flex-1">

                    <p class="n7-button-only-text-active text-lg">text sample</p>

                </div>
            </div>
        </div>

    </div>

    <div>
        <h2 class="text-xl mb-6"><strong>Content - text color</strong></h2>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-content-01</strong></h3>

                </div>
                <div class=" pb-6 n7-content-01 flex-1">

                    <p class="n7-content-01 text-lg">text sample</p>

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-content-02</strong></h3>

                </div>
                <div class=" pb-6 n7-content-02 flex-1">

                    <p class="n7-content-02 text-lg">text sample</p>

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-content-03</strong></h3>

                </div>
                <div class=" pb-6 n7-content-03 flex-1">

                    <p class="n7-content-03 text-lg">text sample</p>

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-content-placeholder</strong></h3>

                </div>
                <div class=" pb-6 n7-content-placeholder flex-1">

                    <p class="n7-content-placeholder text-lg">text sample</p>

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-content-inverse</strong></h3>

                </div>
                <div class=" pb-6 n7-content-inverse flex-1">

                    <p class="n7-content-inverse text-lg">text sample</p>

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-content-primary</strong></h3>

                </div>
                <div class=" pb-6 n7-content-primary flex-1">

                    <p class="n7-content-primary text-lg">text sample</p>

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-content-error</strong></h3>

                </div>
                <div class=" pb-6 n7-content-error flex-1">

                    <p class="n7-content-error text-lg">text sample</p>

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-content-success</strong></h3>

                </div>
                <div class=" pb-6 n7-content-success flex-1">

                    <p class="n7-content-success text-lg">text sample</p>

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-content-warn</strong></h3>

                </div>
                <div class=" pb-6 n7-content-warn flex-1">

                    <p class="n7-content-warn text-lg">text sample</p>

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-content-info</strong></h3>

                </div>
                <div class=" pb-6 n7-content-info flex-1">

                    <p class="n7-content-info text-lg">text sample</p>

                </div>
            </div>
        </div>

    </div>

    <div>
        <h2 class="text-xl mb-6"><strong>Background</strong></h2>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-background-gray-01</strong></h3>

                </div>
                <div class=" h-14 n7-background-gray-01 flex-1">

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-background-gray-02</strong></h3>

                </div>
                <div class=" h-14 n7-background-gray-02 flex-1">

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-background-gray-03</strong></h3>

                </div>
                <div class=" h-14 n7-background-gray-03 flex-1">

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-background-gray-04</strong></h3>

                </div>
                <div class=" h-14 n7-background-gray-04 flex-1">

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-background-gray-05</strong></h3>

                </div>
                <div class=" h-14 n7-background-gray-05 flex-1">

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-background-gray-06</strong></h3>

                </div>
                <div class=" h-14 n7-background-gray-06 flex-1">

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-background-gray-07</strong></h3>

                </div>
                <div class=" h-14 n7-background-gray-07 flex-1">

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-background-primary</strong></h3>

                </div>
                <div class=" h-14 n7-background-primary flex-1">

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-background-primary-light</strong></h3>

                </div>
                <div class=" h-14 n7-background-primary-light flex-1">

                </div>
            </div>
        </div>

    </div>

    <div>
        <h2 class="text-xl mb-6"><strong>Border</strong></h2>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-border-gray-01</strong></h3>

                </div>
                <div class=" mb-6 h-8 n7-border-gray-01 border-l-2 flex-1">

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-border-gray-02</strong></h3>

                </div>
                <div class=" mb-6 h-8 n7-border-gray-02 border-l-2 flex-1">

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-border-gray-03</strong></h3>

                </div>
                <div class=" mb-6 h-8 n7-border-gray-03 border-l-2 flex-1">

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-border-gray-04</strong></h3>

                </div>
                <div class=" mb-6 h-8 n7-border-gray-04 border-l-2 flex-1">

                </div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>n7-border-primary</strong></h3>

                </div>
                <div class=" mb-6 h-8 n7-border-primary border-l-2 flex-1">

                </div>
            </div>
        </div>

    </div>

</div>


        <div class="p-6 grid grid-cols-2 gap-10">
  {% for color in colors %}
  <div>
    <h2 class="text-xl mb-6"><strong>{{ color.name }}</strong></h2>
    {% for hue in color.hues %}
    <div class="grid gap-4">
      <div class="flex gap-4">
        <div class="w-1/3">
          <h3 class="text-md"><strong>{{ hue.name }}</strong></h3>
          {# <p><strong>{{ hue.hex }}</strong></p> #}
        </div>
        <div class=" {% if hue.textclass %}pb-6{% elseif hue.isBorder %}mb-6 h-8{% else %}h-14{% endif %} {{ hue.class }}{% if hue.isBorder %} border-l-2{% endif %} flex-1">
          {% if hue.textclass %}
            <p class="{{ hue.textclass }} text-lg">text sample</p>
            {% endif %}
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% endfor %}
</div>


        
            
            {
  "colors": [
    {
      "name": "Link",
      "hues": [
        {
          "name": "n7-link-primary",
          "class": "n7-link-primary",
          "textclass": "n7-link-primary"
        },
        {
          "name": "n7-link-primary-hover",
          "class": "n7-link-primary-hover",
          "textclass": "n7-link-primary-hover"
        },
        {
          "name": "n7-link-inverse",
          "class": "n7-link-inverse",
          "textclass": "n7-link-inverse"
        },
        {
          "name": "n7-link-inverse-hover",
          "class": "n7-link-inverse-hover",
          "textclass": "n7-link-inverse-hover"
        },
        {
          "name": "n7-link-inverse-visited",
          "class": "n7-link-inverse-visited",
          "textclass": "n7-link-inverse-visited"
        },
        {
          "name": "n7-link-visited",
          "class": "n7-link-visited",
          "textclass": "n7-link-visited"
        }
      ]
    },
    {
      "name": "Buttons",
      "hues": [
        {
          "name": "n7-button-primary",
          "class": "n7-button-primary"
        },
        {
          "name": "n7-button-primary-hover",
          "class": "n7-button-primary-hover"
        },
        {
          "name": "n7-button-primary-active",
          "class": "n7-button-primary-active"
        },
        {
          "name": "n7-button-secondary",
          "class": "n7-button-secondary"
        },
        {
          "name": "n7-button-secondary-hover",
          "class": "n7-button-secondary-hover"
        },
        {
          "name": "n7-button-secondary-active",
          "class": "n7-button-secondary-active"
        },
        {
          "name": "n7-button-disabled",
          "class": "n7-button-disabled"
        },
        {
          "name": "n7-button-only-text",
          "textclass": "n7-button-only-text"
        },
        {
          "name": "n7-button-only-text-hover",
          "textclass": "n7-button-only-text-hover"
        },
        {
          "name": "n7-button-only-text-active",
          "textclass": "n7-button-only-text-active"
        }
      ]
    },
    {
      "name": "Content - text color",
      "hues": [
        {
          "name": "n7-content-01",
          "class": "n7-content-01",
          "textclass": "n7-content-01"
        },
        {
          "name": "n7-content-02",
          "class": "n7-content-02",
          "textclass": "n7-content-02"
        },
        {
          "name": "n7-content-03",
          "class": "n7-content-03",
          "textclass": "n7-content-03"
        },
        {
          "name": "n7-content-placeholder",
          "class": "n7-content-placeholder",
          "textclass": "n7-content-placeholder"
        },
        {
          "name": "n7-content-inverse",
          "class": "n7-content-inverse",
          "textclass": "n7-content-inverse"
        },
        {
          "name": "n7-content-primary",
          "class": "n7-content-primary",
          "textclass": "n7-content-primary"
        },
        {
          "name": "n7-content-error",
          "class": "n7-content-error",
          "textclass": "n7-content-error"
        },
        {
          "name": "n7-content-success",
          "class": "n7-content-success",
          "textclass": "n7-content-success"
        },
        {
          "name": "n7-content-warn",
          "class": "n7-content-warn",
          "textclass": "n7-content-warn"
        },
        {
          "name": "n7-content-info",
          "class": "n7-content-info",
          "textclass": "n7-content-info"
        }
      ]
    },
    {
      "name": "Background",
      "hues": [
        {
          "name": "n7-background-gray-01",
          "class": "n7-background-gray-01"
        },
        {
          "name": "n7-background-gray-02",
          "class": "n7-background-gray-02"
        },
        {
          "name": "n7-background-gray-03",
          "class": "n7-background-gray-03"
        },
        {
          "name": "n7-background-gray-04",
          "class": "n7-background-gray-04"
        },
        {
          "name": "n7-background-gray-05",
          "class": "n7-background-gray-05"
        },
        {
          "name": "n7-background-gray-06",
          "class": "n7-background-gray-06"
        },
        {
          "name": "n7-background-gray-07",
          "class": "n7-background-gray-07"
        },
        {
          "name": "n7-background-primary",
          "class": "n7-background-primary"
        },
        {
          "name": "n7-background-primary-light",
          "class": "n7-background-primary-light"
        }
      ]
    },
    {
      "name": "Border",
      "hues": [
        {
          "name": "n7-border-gray-01",
          "class": "n7-border-gray-01",
          "isBorder": true
        },
        {
          "name": "n7-border-gray-02",
          "class": "n7-border-gray-02",
          "isBorder": true
        },
        {
          "name": "n7-border-gray-03",
          "class": "n7-border-gray-03",
          "isBorder": true
        },
        {
          "name": "n7-border-gray-04",
          "class": "n7-border-gray-04",
          "isBorder": true
        },
        {
          "name": "n7-border-primary",
          "class": "n7-border-primary",
          "isBorder": true
        }
      ]
    }
  ]
}

Handle: @semantic-color-utilities
Preview:
- With layout
- Component only
Filesystem Path: components/01-design-system/tokens/02-semantic-color-utilities/semantic-color-utilities.njk

Custom semantic color utilities for Design System. Set of custom classes with n7 prefix used for manage text, background, borders; each class has a Tailwind color class assigned as in Figma Design System. These can be used instead of Tailwind color classes.