ColorLayerApplication [template] v1.0.0

Label

Color Architecture Layer 3 — Application Token Layer (Tailwind / CSS Custom Properties)

Meta

• License: Apache-2.0
• License Provenance: package-authorship-claim

Body

    /* Layer 3: Application Token Layer — design tokens consumed by components */
    /* Components reference tokens, never raw scale numbers or OKLCH values */

    /* Tailwind v4 @theme block */
    @theme {
      --color-surface: var(--gray-1);
      --color-surface-raised: var(--gray-2);
      --color-border-subtle: var(--gray-5);
      --color-border: var(--gray-6);
      --color-solid: var(--brand-9);
      --color-text-secondary: var(--gray-11);
      --color-text-primary: var(--gray-12);
    }

    /* Dark mode override — re-palette, not inversion */
    @media (prefers-color-scheme: dark) {
      @theme {
        --color-surface: var(--gray-dark-1);
        --color-surface-raised: var(--gray-dark-2);
        --color-border-subtle: var(--gray-dark-5);
        --color-border: var(--gray-dark-6);
        --color-solid: var(--brand-dark-9);
        --color-text-secondary: var(--gray-dark-11);
        --color-text-primary: var(--gray-dark-12);
      }
    }

    /* Component usage (Tailwind utility classes map to these tokens): */
    /* bg-surface        → background of page/layout containers */
    /* bg-surface-raised → cards, popovers, elevated surfaces  */
    /* border-border-subtle → subtle dividers */
    /* border-border        → standard borders */
    /* bg-solid          → buttons, badges, fills */
    /* text-text-secondary → labels, metadata, muted text */
    /* text-text-primary   → body copy, headings */
  

Usage

Populate the @theme block by mapping your Layer 2 semantic scale variables to semantic role tokens. Maintain a dark-mode @theme override block that re-maps every token to dark-mode scale values. Components should only reference these tokens — never the raw scale numbers.

ColorLayerApplication [template] v1.0.0

Label

Color Architecture Layer 3 — Application Token Layer (Tailwind / CSS Custom Properties)

Meta

• License: Apache-2.0
• License Provenance: package-authorship-claim

Body

    /* Layer 3: Application Token Layer — design tokens consumed by components */
    /* Components reference tokens, never raw scale numbers or OKLCH values */

    /* Tailwind v4 @theme block */
    @theme {
      --color-surface: var(--gray-1);
      --color-surface-raised: var(--gray-2);
      --color-border-subtle: var(--gray-5);
      --color-border: var(--gray-6);
      --color-solid: var(--brand-9);
      --color-text-secondary: var(--gray-11);
      --color-text-primary: var(--gray-12);
    }

    /* Dark mode override — re-palette, not inversion */
    @media (prefers-color-scheme: dark) {
      @theme {
        --color-surface: var(--gray-dark-1);
        --color-surface-raised: var(--gray-dark-2);
        --color-border-subtle: var(--gray-dark-5);
        --color-border: var(--gray-dark-6);
        --color-solid: var(--brand-dark-9);
        --color-text-secondary: var(--gray-dark-11);
        --color-text-primary: var(--gray-dark-12);
      }
    }

    /* Component usage (Tailwind utility classes map to these tokens): */
    /* bg-surface        → background of page/layout containers */
    /* bg-surface-raised → cards, popovers, elevated surfaces  */
    /* border-border-subtle → subtle dividers */
    /* border-border        → standard borders */
    /* bg-solid          → buttons, badges, fills */
    /* text-text-secondary → labels, metadata, muted text */
    /* text-text-primary   → body copy, headings */
  

Usage

Populate the @theme block by mapping your Layer 2 semantic scale variables to semantic role tokens. Maintain a dark-mode @theme override block that re-maps every token to dark-mode scale values. Components should only reference these tokens — never the raw scale numbers.

Relations

related: [@impeccable/template-oklch-palette, @community/check-color-oklch-required, @community/anti-pattern-generic-saas-blue, @community/check-focus-visible]