Semantic Color Utilities

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="py-6 space-y-8">
    <div class="px-6">
        <h1 class="text-2xl font-bold">Semantic color</h1>
        <p>Project semantic color set.</p>
        <p>Actually used colors for project.</p>
    </div>
    <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 class="grid gap-4">
                <div class="flex gap-4">
                    <div class="w-1/3">
                        <h3 class="text-md"><strong>n7-input-placeholder</strong></h3>

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

                        <p class="n7-input-placeholder 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-01</strong></h3>

                    </div>
                    <div class=" h-14 n7-background-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-02</strong></h3>

                    </div>
                    <div class=" h-14 n7-background-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-03</strong></h3>

                    </div>
                    <div class=" h-14 n7-background-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-04</strong></h3>

                    </div>
                    <div class=" h-14 n7-background-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-05</strong></h3>

                    </div>
                    <div class=" h-14 n7-background-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-06</strong></h3>

                    </div>
                    <div class=" h-14 n7-background-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-07</strong></h3>

                    </div>
                    <div class=" h-14 n7-background-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 class="grid gap-4">
                <div class="flex gap-4">
                    <div class="w-1/3">
                        <h3 class="text-md"><strong>n7-border-error-dark</strong></h3>

                    </div>
                    <div class=" mb-6 h-8 n7-border-error-dark 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-input</strong></h3>

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

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

        </div>

    </div>
</div>


        <div class="py-6 space-y-8">
  <div class="px-6">
        <h1 class="text-2xl font-bold">Semantic color</h1>
        <p>Project semantic color set.</p>
        <p>Actually used colors for project.</p>
    </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>
</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": "n7-input-placeholder",
          "class": "n7-input-placeholder",
          "textclass": "n7-input-placeholder"
        }
      ]
    },
    {
      "name": "Background",
      "hues": [
        {
          "name": "n7-background-01",
          "class": "n7-background-01"
        },
        {
          "name": "n7-background-02",
          "class": "n7-background-02"
        },
        {
          "name": "n7-background-03",
          "class": "n7-background-03"
        },
        {
          "name": "n7-background-04",
          "class": "n7-background-04"
        },
        {
          "name": "n7-background-05",
          "class": "n7-background-05"
        },
        {
          "name": "n7-background-06",
          "class": "n7-background-06"
        },
        {
          "name": "n7-background-07",
          "class": "n7-background-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
        },
        {
          "name": "n7-border-error-dark",
          "class": "n7-border-error-dark",
          "isBorder": true
        },
        {
          "name": "n7-border-input",
          "class": "n7-border-input",
          "isBorder": true
        }
      ]
    }
  ]
}

File:

Content:


                                /**
 * SEMANTIC COLOR UTILITIES
 *
*/
@layer utilities {
    /* CONTENT TEXT COLOR UTILITIES */
    .n7-content-01 {
        @apply text-neutral-900;
    }

    .n7-content-02 {
        @apply text-neutral-800;
    }

    .n7-content-03 {
        @apply text-neutral-700;
    }

    .n7-content-placeholder {
        @apply text-neutral-600;
    }

    .n7-input-placeholder {
        @apply placeholder-neutral-600;
    }

    .n7-content-inverse {
        @apply text-neutral-50;
    }

    .n7-content-05 {
        @apply text-neutral-500;
    }

    .n7-content-disabled {
        @apply text-neutral-400;
    }

    .n7-content-primary {
        @apply text-primary-600;
    }

    .n7-content-error {
        @apply text-error-dark;
    }

    .n7-content-warn {
        @apply text-warn-dark;
    }

    .n7-content-info {
        @apply text-info-dark;
    }

    .n7-content-success {
        @apply text-success-dark;
    }

    /* BUTTON COLOR UTILITIES */
    .n7-button-primary {
        @apply bg-primary-600 border-primary-600;
    }

    .n7-button-primary-hover {
        @apply bg-primary-700 border-primary-700;
    }

    .n7-button-primary-active {
        @apply bg-primary-900 border-primary-900;
    }

    .n7-button-secondary {
        @apply bg-secondary-600 border-secondary-600;
    }

    .n7-button-secondary-hover {
        @apply bg-secondary-700 border-secondary-700;
    }

    .n7-button-secondary-active {
        @apply bg-secondary-900 border-secondary-900;
    }

    .n7-button-disabled {
        @apply bg-secondary-100 border-secondary-100;
    }

    .n7-button-outline {
        @apply text-primary-600 border-primary-600;
    }

    .n7-button-outline-hover {
        @apply text-primary-700 border-primary-700;
    }

    .n7-button-outline-active {
        @apply text-primary-900 border-primary-900;
    }

    .n7-button-only-text {
        @apply text-primary-600 border-transparent;
    }

    .n7-button-only-text-hover {
        @apply text-primary-700 border-transparent;
    }

    .n7-button-only-text-active {
        @apply text-primary-900 border-transparent;
    }

    .n7-button-inverted {
        @apply bg-neutral-50 border-neutral-50;
    }

    .n7-button-inverted-hover {
        @apply bg-neutral-50 border-neutral-50;
    }

    .n7-button-inverted-focus {
        @apply bg-neutral-50 border-neutral-50;
    }

    .n7-button-inverted-active {
        @apply bg-neutral-100 border-neutral-100;
    }

    .n7-button-inverted-text {
        @apply n7-content-primary;
    }

    .n7-button-inverted-text-hover {
        @apply n7-content-01;
    }

    .n7-button-inverted-text-focus {
        @apply n7-content-02;
    }

    .n7-button-inverted-text-active {
        @apply n7-content-02;
    }

    .n7-button-text-inverted {
        @apply bg-transparent border-transparent;
    }

    .n7-button-text-inverted-hover {
        @apply bg-black/50 border-black/50;
    }

    .n7-button-text-inverted-focus {
        @apply bg-transparent border-transparent;
    }

    .n7-button-text-inverted-active {
        @apply bg-transparent border-transparent;
    }

    .n7-button-text-inverted-text {
        @apply n7-content-inverse;
    }

    .n7-button-text-inverted-text-hover {
        @apply n7-content-inverse;
    }

    .n7-button-text-inverted-text-focus {
        @apply n7-content-inverse;
    }

    .n7-button-text-inverted-text-active {
        @apply n7-content-inverse;
    }

    /* LINK TEXT COLOR UTILITIES */
    .n7-link-primary {
        @apply text-primary-600;
    }

    .n7-link-visited {
        @apply text-primary-900;
    }

    .n7-link-inverse {
        @apply text-primary-300;
    }

    .n7-link-primary-hover {
        @apply text-primary-800;
    }

    .n7-link-inverse-hover {
        @apply text-primary-200;
    }

    .n7-link-inverse-visited {
        @apply text-primary-100;
    }

    /* BACKGROUND CUSTOM UTILITIES */
    .n7-background-01 {
        @apply bg-neutral-50;
    }

    .n7-background-02 {
        @apply bg-neutral-100;
    }

    .n7-background-03 {
        @apply bg-neutral-300;
    }

    .n7-background-04 {
        @apply bg-neutral-400;
    }

    .n7-background-05 {
        @apply bg-neutral-700;
    }

    .n7-background-06 {
        @apply bg-neutral-800;
    }

    .n7-background-07 {
        @apply bg-neutral-900;
    }

    .n7-background-inverse {
        @apply bg-neutral-50;
    }

    .n7-background-primary {
        @apply bg-primary-600;
    }

    .n7-background-primary-light {
        @apply bg-primary-200;
    }

    .n7-background-primary-dark {
        @apply bg-primary-900;
    }

    .n7-background-secondary {
        @apply bg-secondary-500;
    }

    .n7-background-secondary-light {
        @apply bg-secondary-200;
    }

    .n7-background-secondary-dark {
        @apply bg-secondary-900;
    }

    /* BORDER CUSTOM */
    .n7-border-gray-01 {
        @apply border-neutral-300;
    }

    .n7-border-gray-02 {
        @apply border-neutral-400;
    }

    .n7-border-gray-03 {
        @apply border-neutral-500;
    }

    .n7-border-gray-04 {
        @apply border-neutral-800;
    }

    .n7-border-primary {
        @apply border-primary-600;
    }

    .n7-border-inverse {
        @apply border-neutral-50;
    }

    .n7-border-input {
        @apply border-neutral-700;
    }

    .n7-border-error-dark {
        @apply border-error-dark;
    }
}

URL: /components/raw/semantic-color-utilities/semantic-color.css
Filesystem Path: components/01-design-system/tokens/02-semantic-color-utilities/semantic-color.css
Size: 5.4 KB

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.