diff --git a/packages/tokens/config/tokens.config.ts b/packages/tokens/config/tokens.config.ts index 18624c0..26a9f9e 100644 --- a/packages/tokens/config/tokens.config.ts +++ b/packages/tokens/config/tokens.config.ts @@ -80,6 +80,26 @@ export const config: TokensConfig = { removed_in: '0.3.0', reason: 'Accent ghost was never in Figma; SPEC §10.D1.', }, + '--fx-glow-success': { + replacement: '--fx-glow-brand', + removed_in: '0.3.0', + reason: 'FX.Glow.Success is not present in Figma Variables.', + }, + '--fx-glow-info': { + replacement: '--fx-glow-brand', + removed_in: '0.3.0', + reason: 'FX.Glow.Info is not present in Figma Variables.', + }, + '--fx-focus-ring': { + replacement: '--fx-focus-ring-brand', + removed_in: '0.3.0', + reason: 'FX.Focus-ring is split by Figma slot.', + }, + '--fx-skeleton': { + replacement: '--fx-skeleton-base', + removed_in: '0.3.0', + reason: 'FX.Skeleton is split into Base and Highlight.', + }, }, colors: { @@ -438,6 +458,7 @@ export const config: TokensConfig = { statics: { white: { L: 1.0, C: 0, H: 0 }, dark: { L: 0.08, C: 0, H: 0 }, // non-pure black for shadows + skeleton_mid: { L: 0.575, C: 0.012, H: 286 }, }, // ─── Opacity primitive (29 stops) ──────────────────────────────── @@ -600,40 +621,125 @@ export const config: TokensConfig = { fx: { glow: { + Neutral: { + kind: 'direct', + ref: { family: 'static', id: 'white', opacity_stop: 52 }, + }, + Inverted: { + kind: 'direct', + ref: { family: 'neutral', id: '4' }, + }, Brand: { kind: 'direct', - ref: { family: 'accent', id: 'brand', opacity_stop: 40 }, + ref: { family: 'accent', id: 'brand', opacity_stop: 52 }, }, Danger: { kind: 'direct', - ref: { family: 'accent', id: 'red', opacity_stop: 40 }, + ref: { family: 'accent', id: 'red', opacity_stop: 52 }, }, Warning: { kind: 'direct', - ref: { family: 'accent', id: 'orange', opacity_stop: 40 }, + ref: { family: 'accent', id: 'orange', opacity_stop: 52 }, }, + }, + legacy_glow: { Success: { kind: 'direct', - ref: { family: 'accent', id: 'green', opacity_stop: 40 }, + ref: { family: 'accent', id: 'green', opacity_stop: 52 }, }, Info: { kind: 'direct', - ref: { family: 'accent', id: 'blue', opacity_stop: 40 }, + ref: { family: 'accent', id: 'blue', opacity_stop: 52 }, }, }, focus_ring: { + Neutral: { + kind: 'mode-branch', + branches: { + 'light/normal': { family: 'static', id: 'dark' }, + 'light/ic': { family: 'static', id: 'dark' }, + 'dark/normal': { family: 'static', id: 'white' }, + 'dark/ic': { family: 'static', id: 'white' }, + }, + }, + Brand: { + kind: 'direct', + ref: { family: 'accent', id: 'brand' }, + }, + Danger: { + kind: 'direct', + ref: { family: 'accent', id: 'red' }, + }, + Warning: { + kind: 'direct', + ref: { family: 'accent', id: 'orange' }, + }, + }, + focus_ring_legacy: { kind: 'direct', - ref: { family: 'accent', id: 'brand', opacity_stop: 40 }, + ref: { family: 'accent', id: 'brand' }, }, skeleton: { - kind: 'direct', - ref: { family: 'neutral', id: '6', opacity_stop: 16 }, + base: { + kind: 'mode-branch', + branches: { + 'light/normal': { family: 'static', id: 'skeleton_mid', opacity_stop: 8 }, + 'light/ic': { family: 'static', id: 'skeleton_mid', opacity_stop: 12 }, + 'dark/normal': { family: 'static', id: 'skeleton_mid', opacity_stop: 12 }, + 'dark/ic': { family: 'static', id: 'skeleton_mid', opacity_stop: 16 }, + }, + }, + highlight: { + kind: 'direct', + ref: { family: 'static', id: 'skeleton_mid', opacity_stop: 4 }, + }, + legacy: { + kind: 'mode-branch', + branches: { + 'light/normal': { family: 'static', id: 'skeleton_mid', opacity_stop: 8 }, + 'light/ic': { family: 'static', id: 'skeleton_mid', opacity_stop: 12 }, + 'dark/normal': { family: 'static', id: 'skeleton_mid', opacity_stop: 12 }, + 'dark/ic': { family: 'static', id: 'skeleton_mid', opacity_stop: 16 }, + }, + }, }, shadow_tints: { - minor: { family: 'static', id: 'dark', opacity_stop: 1 }, - ambient: { family: 'static', id: 'dark', opacity_stop: 2 }, - penumbra: { family: 'static', id: 'dark', opacity_stop: 4 }, - major: { family: 'static', id: 'dark', opacity_stop: 12 }, + minor: { + kind: 'mode-branch', + branches: { + 'light/normal': { family: 'static', id: 'dark', opacity_stop: 1 }, + 'light/ic': { family: 'static', id: 'dark', opacity_stop: 1 }, + 'dark/normal': { family: 'static', id: 'dark', opacity_stop: 2 }, + 'dark/ic': { family: 'static', id: 'dark', opacity_stop: 2 }, + }, + }, + ambient: { + kind: 'mode-branch', + branches: { + 'light/normal': { family: 'static', id: 'dark', opacity_stop: 2 }, + 'light/ic': { family: 'static', id: 'dark', opacity_stop: 2 }, + 'dark/normal': { family: 'static', id: 'dark', opacity_stop: 4 }, + 'dark/ic': { family: 'static', id: 'dark', opacity_stop: 4 }, + }, + }, + penumbra: { + kind: 'mode-branch', + branches: { + 'light/normal': { family: 'static', id: 'dark', opacity_stop: 4 }, + 'light/ic': { family: 'static', id: 'dark', opacity_stop: 4 }, + 'dark/normal': { family: 'static', id: 'dark', opacity_stop: 12 }, + 'dark/ic': { family: 'static', id: 'dark', opacity_stop: 12 }, + }, + }, + major: { + kind: 'mode-branch', + branches: { + 'light/normal': { family: 'static', id: 'dark', opacity_stop: 12 }, + 'light/ic': { family: 'static', id: 'dark', opacity_stop: 12 }, + 'dark/normal': { family: 'static', id: 'dark', opacity_stop: 20 }, + 'dark/ic': { family: 'static', id: 'dark', opacity_stop: 20 }, + }, + }, }, shadow_presets: { xs: [{ y: 1, blur: 2, spread: 0, tint: 'minor' }], diff --git a/packages/tokens/docs/test-catalog.md b/packages/tokens/docs/test-catalog.md index 8f097b5..f1b47da 100644 --- a/packages/tokens/docs/test-catalog.md +++ b/packages/tokens/docs/test-catalog.md @@ -3,7 +3,7 @@ Auto-generated from `@layer` / `@governs` / `@invariant` headers in every `tests/**/*.test.ts` file. Run `bun run catalog` to regenerate. -**Total:** 42 test files +**Total:** 43 test files ## Calibration @@ -214,6 +214,13 @@ Auto-generated from `@layer` / `@governs` / `@invariant` headers in every - **Why:** Unified spine model — tiers are solid colors at distinct L targets, not opacity-washes of a single anchor. - **On fail:** inspect SemanticsConfig — labels must use kind=pipeline without opacity_stop. +### `tests/L4-semantic/fx-contract.test.ts` + +- **Governs:** plan-v2 §5.5 · FX +- **Invariant:** FX emits the Figma slot skeleton: Glow has Neutral/Inverted/Brand/Danger/Warning only as canonical slots, Focus-ring is split by neutral/brand/danger/warning, Skeleton is split into base/highlight, and Shadow tint alpha is sector-aware. +- **Why:** Button halo, focus, loading, and shadow recipes are consumed directly by components; collapsed or invented cells break the public contract. +- **On fail:** inspect config.semantics.fx and collectEntries() emission order. + ### `tests/references.test.ts` - **Governs:** plan-v2 §5 · Semantic tree diff --git a/packages/tokens/src/generators/primitive-colors.ts b/packages/tokens/src/generators/primitive-colors.ts index d65b47a..ca9d276 100644 --- a/packages/tokens/src/generators/primitive-colors.ts +++ b/packages/tokens/src/generators/primitive-colors.ts @@ -236,6 +236,7 @@ function generateStatics(colors: ColorsConfig): ResolvedPrimitive[] { 'alias' in darkDef ? { L: 0.08, C: 0, H: 0 } // TODO: resolve alias to neutral step : darkDef + const skeletonMid = colors.statics.skeleton_mid const fill = (v: OklchValue): Record => { const out: Partial> = {} @@ -250,6 +251,12 @@ function generateStatics(colors: ColorsConfig): ResolvedPrimitive[] { return [ { name: 'static-white', group: 'static', id: 'white', values: fill(white) }, { name: 'static-dark', group: 'static', id: 'dark', values: fill(dark) }, + { + name: 'static-skeleton-mid', + group: 'static', + id: 'skeleton_mid', + values: fill(skeletonMid), + }, ] } diff --git a/packages/tokens/src/generators/semantic-colors.ts b/packages/tokens/src/generators/semantic-colors.ts index 2a365cb..9b6f765 100644 --- a/packages/tokens/src/generators/semantic-colors.ts +++ b/packages/tokens/src/generators/semantic-colors.ts @@ -25,7 +25,6 @@ import type { ShadowPreset, ShadowLayerDef, ShadowPresetsConfig, - ShadowTintsConfig, TierName, } from '../types' import { BASE_MODES, CONTRASTS, outputKey } from '../types' @@ -114,10 +113,7 @@ export function generateSemanticColors( tokens.push(token) } - const shadow_presets = buildShadowPresets( - semantics.fx.shadow_presets, - semantics.fx.shadow_tints, - ) + const shadow_presets = buildShadowPresets(semantics.fx.shadow_presets) return { tokens, shadow_presets } } @@ -275,36 +271,71 @@ function collectEntries(semantics: SemanticsConfig): SemEntry[] { // FX const fx = semantics.fx - for (const [sent, def] of Object.entries(fx.glow)) { + for (const name of ['Neutral', 'Inverted', 'Brand', 'Danger', 'Warning'] as const) { + const def = fx.glow[name] out.push({ - name: `fx-glow-${sent.toLowerCase()}`, - path: `fx.glow.${sent}`, + name: `fx-glow-${name.toLowerCase()}`, + path: `fx.glow.${name}`, def, }) } - out.push({ name: 'fx-focus-ring', path: 'fx.focus_ring', def: fx.focus_ring }) - out.push({ name: 'fx-skeleton', path: 'fx.skeleton', def: fx.skeleton }) + for (const name of ['Success', 'Info'] as const) { + const def = fx.legacy_glow[name] + out.push({ + name: `fx-glow-${name.toLowerCase()}`, + path: `fx.legacy_glow.${name}`, + def, + }) + } + for (const name of ['Neutral', 'Brand', 'Danger', 'Warning'] as const) { + const def = fx.focus_ring[name] + out.push({ + name: `fx-focus-ring-${name.toLowerCase()}`, + path: `fx.focus_ring.${name}`, + def, + }) + } + out.push({ + name: 'fx-focus-ring', + path: 'fx.focus_ring_legacy', + def: fx.focus_ring_legacy, + }) + out.push({ + name: 'fx-skeleton-base', + path: 'fx.skeleton.base', + def: fx.skeleton.base, + }) + out.push({ + name: 'fx-skeleton-highlight', + path: 'fx.skeleton.highlight', + def: fx.skeleton.highlight, + }) + out.push({ + name: 'fx-skeleton', + path: 'fx.skeleton.legacy', + def: fx.skeleton.legacy, + }) - // Shadow tints (flat primitive refs — emit as semantics so consumers can use them) + // Shadow tints (colors used inside progressive shadow preset strings). out.push({ name: 'fx-shadow-minor', path: 'fx.shadow_tints.minor', - def: { kind: 'direct', ref: fx.shadow_tints.minor }, + def: fx.shadow_tints.minor, }) out.push({ name: 'fx-shadow-ambient', path: 'fx.shadow_tints.ambient', - def: { kind: 'direct', ref: fx.shadow_tints.ambient }, + def: fx.shadow_tints.ambient, }) out.push({ name: 'fx-shadow-penumbra', path: 'fx.shadow_tints.penumbra', - def: { kind: 'direct', ref: fx.shadow_tints.penumbra }, + def: fx.shadow_tints.penumbra, }) out.push({ name: 'fx-shadow-major', path: 'fx.shadow_tints.major', - def: { kind: 'direct', ref: fx.shadow_tints.major }, + def: fx.shadow_tints.major, }) // Misc @@ -389,10 +420,7 @@ const BORDER_TIERS_ACCENT = ['strong', 'base', 'soft', 'ghost'] as const // ─── Shadow presets ───────────────────────────────────────────────────── -function buildShadowPresets( - presets: ShadowPresetsConfig, - _tints: ShadowTintsConfig, -): ShadowPreset[] { +function buildShadowPresets(presets: ShadowPresetsConfig): ShadowPreset[] { const tintToVar: Record = { minor: '--fx-shadow-minor', ambient: '--fx-shadow-ambient', diff --git a/packages/tokens/src/types.ts b/packages/tokens/src/types.ts index e55e18f..7351f27 100644 --- a/packages/tokens/src/types.ts +++ b/packages/tokens/src/types.ts @@ -317,6 +317,11 @@ export interface StaticsConfig { * Otherwise an explicit OKLCH value. */ dark: OklchValue | { alias: string } + /** + * System mid-gray used by Skeleton and neutral translucent fills. + * Registered as a named primitive so the FX recipe stays auditable. + */ + skeleton_mid: OklchValue } // ─── Config: perceptual compensation ──────────────────────────────────── @@ -579,12 +584,9 @@ export interface ShadowLayerDef { tint: 'minor' | 'ambient' | 'penumbra' | 'major' } -export interface ShadowTintsConfig { - minor: PrimitiveRef - ambient: PrimitiveRef - penumbra: PrimitiveRef - major: PrimitiveRef -} +export type ShadowTintName = 'minor' | 'ambient' | 'penumbra' | 'major' + +export type ShadowTintsConfig = Record export interface ShadowPresetsConfig { xs: ShadowLayerDef[] @@ -594,10 +596,25 @@ export interface ShadowPresetsConfig { xl: ShadowLayerDef[] } +export type FxGlowName = 'Neutral' | 'Inverted' | 'Brand' | 'Danger' | 'Warning' +export type FxLegacyGlowName = 'Success' | 'Info' +export type FxFocusRingName = 'Neutral' | 'Brand' | 'Danger' | 'Warning' + +export interface FxSkeletonConfig { + base: SemanticDef + highlight: SemanticDef + /** Legacy alias retained through the 0.2.x deprecation window. */ + legacy: SemanticDef +} + export interface FxConfig { - glow: Record - focus_ring: SemanticDef - skeleton: SemanticDef + glow: Record + /** Deprecated 0.2.x aliases; not part of the canonical Figma FX.Glow contract. */ + legacy_glow: Record + focus_ring: Record + /** Legacy alias retained through the 0.2.x deprecation window. */ + focus_ring_legacy: SemanticDef + skeleton: FxSkeletonConfig shadow_tints: ShadowTintsConfig shadow_presets: ShadowPresetsConfig } diff --git a/packages/tokens/tests/L4-semantic/composition-derivable.test.ts b/packages/tokens/tests/L4-semantic/composition-derivable.test.ts index 8cd6aee..b405e36 100644 --- a/packages/tokens/tests/L4-semantic/composition-derivable.test.ts +++ b/packages/tokens/tests/L4-semantic/composition-derivable.test.ts @@ -48,7 +48,19 @@ describe('Composition derivability · fills use opacity', () => { } }) - test('fx-skeleton has alpha < 1', () => { + test('fx-skeleton-base and highlight have alpha < 1', () => { + const tokens = ['fx-skeleton-base', 'fx-skeleton-highlight'].map((name) => + semantic.tokens.find((t) => t.name === name), + ) + for (const token of tokens) { + expect(token).toBeDefined() + for (const output of OUTPUTS) { + expect(token!.values[output].alpha).toBeLessThan(1) + } + } + }) + + test('legacy fx-skeleton alias has alpha < 1', () => { const token = semantic.tokens.find((t) => t.name === 'fx-skeleton')! for (const output of OUTPUTS) { expect(token.values[output].alpha).toBeLessThan(1) diff --git a/packages/tokens/tests/L4-semantic/fx-contract.test.ts b/packages/tokens/tests/L4-semantic/fx-contract.test.ts new file mode 100644 index 0000000..dd16c76 --- /dev/null +++ b/packages/tokens/tests/L4-semantic/fx-contract.test.ts @@ -0,0 +1,150 @@ +/** + * FX semantic contract — Figma Variables slot shape. + * + * @layer L4 (semantic) + * @governs plan-v2 §5.5 · FX + * @invariant FX emits the Figma slot skeleton: Glow has + * Neutral/Inverted/Brand/Danger/Warning only as canonical slots, + * Focus-ring is split by neutral/brand/danger/warning, + * Skeleton is split into base/highlight, and Shadow tint alpha is + * sector-aware. + * @why Button halo, focus, loading, and shadow recipes are consumed directly + * by components; collapsed or invented cells break the public contract. + * @on-fail inspect config.semantics.fx and collectEntries() emission order. + */ + +import { describe, expect, test } from 'bun:test' +import { config, semantic, OUTPUTS } from '../_helpers/fixtures' + +const CANONICAL_GLOW = [ + 'fx-glow-neutral', + 'fx-glow-inverted', + 'fx-glow-brand', + 'fx-glow-danger', + 'fx-glow-warning', +] as const +const LEGACY_GLOW = ['fx-glow-success', 'fx-glow-info'] as const + +const FOCUS_RING = [ + 'fx-focus-ring-neutral', + 'fx-focus-ring-brand', + 'fx-focus-ring-danger', + 'fx-focus-ring-warning', +] as const + +function token(name: string) { + const found = semantic.tokens.find((t) => t.name === name) + expect(found).toBeDefined() + return found! +} + +describe('FX contract · slot shape', () => { + test('canonical glow set matches Figma and legacy sentiments are deprecated', () => { + for (const name of CANONICAL_GLOW) { + expect(token(name).path.startsWith('fx.glow.')).toBe(true) + } + for (const name of LEGACY_GLOW) { + expect(token(name).path.startsWith('fx.legacy_glow.')).toBe(true) + expect(config.deprecated[`--${name}`]).toBeDefined() + } + }) + + test('focus-ring is split by Figma slots and legacy alias remains deprecated', () => { + for (const name of FOCUS_RING) { + expect(token(name).path.startsWith('fx.focus_ring.')).toBe(true) + } + expect(token('fx-focus-ring').path).toBe('fx.focus_ring_legacy') + expect(config.deprecated['--fx-focus-ring']?.replacement).toBe( + '--fx-focus-ring-brand', + ) + }) + + test('skeleton is split and legacy alias remains deprecated', () => { + expect(token('fx-skeleton-base').path).toBe('fx.skeleton.base') + expect(token('fx-skeleton-highlight').path).toBe('fx.skeleton.highlight') + expect(token('fx-skeleton').path).toBe('fx.skeleton.legacy') + expect(config.deprecated['--fx-skeleton']?.replacement).toBe( + '--fx-skeleton-base', + ) + }) +}) + +describe('FX contract · values by semantic recipe', () => { + test('glow opacity and solidity match Figma recipes', () => { + expect(token('fx-glow-neutral').values['light/normal'].alpha).toBeCloseTo( + 0.52, + 6, + ) + expect(token('fx-glow-brand').values['light/normal'].alpha).toBeCloseTo( + 0.52, + 6, + ) + expect(token('fx-glow-danger').values['light/normal'].alpha).toBeCloseTo( + 0.52, + 6, + ) + expect(token('fx-glow-warning').values['light/normal'].alpha).toBeCloseTo( + 0.52, + 6, + ) + for (const output of OUTPUTS) { + expect(token('fx-glow-inverted').values[output].alpha).toBe(1) + } + }) + + test('neutral focus ring flips light/dark while sentiment rings stay solid', () => { + const neutral = token('fx-focus-ring-neutral') + expect(neutral.values['light/normal'].L).toBeCloseTo(0.08, 6) + expect(neutral.values['light/ic'].L).toBeCloseTo(0.08, 6) + expect(neutral.values['dark/normal'].L).toBeCloseTo(1, 6) + expect(neutral.values['dark/ic'].L).toBeCloseTo(1, 6) + + for (const name of FOCUS_RING) { + for (const output of OUTPUTS) { + expect(token(name).values[output].alpha).toBe(1) + } + } + }) + + test('skeleton alpha follows the current Figma Variables sectors', () => { + expect(token('fx-skeleton-base').values['light/normal'].alpha).toBeCloseTo( + 0.08, + 6, + ) + expect(token('fx-skeleton-base').values['dark/normal'].alpha).toBeCloseTo( + 0.12, + 6, + ) + expect(token('fx-skeleton-base').values['light/ic'].alpha).toBeCloseTo( + 0.12, + 6, + ) + expect(token('fx-skeleton-base').values['dark/ic'].alpha).toBeCloseTo( + 0.16, + 6, + ) + for (const output of OUTPUTS) { + expect(token('fx-skeleton-highlight').values[output].alpha).toBeCloseTo( + 0.04, + 6, + ) + } + }) + + test('shadow tint alpha follows the current Figma Variables sectors', () => { + const expected = { + 'fx-shadow-minor': [0.01, 0.01, 0.02, 0.02], + 'fx-shadow-ambient': [0.02, 0.02, 0.04, 0.04], + 'fx-shadow-penumbra': [0.04, 0.04, 0.12, 0.12], + 'fx-shadow-major': [0.12, 0.12, 0.2, 0.2], + } as const + + for (const [name, alphas] of Object.entries(expected)) { + const t = token(name) + expect(t.values['light/normal'].alpha).toBeCloseTo(alphas[0], 6) + expect(t.values['light/ic'].alpha).toBeCloseTo(alphas[1], 6) + expect(t.values['dark/normal'].alpha).toBeCloseTo(alphas[2], 6) + expect(t.values['dark/ic'].alpha).toBeCloseTo(alphas[3], 6) + } + }) +}) diff --git a/packages/tokens/tests/guards/__snapshots__/snapshot-css.test.ts.snap b/packages/tokens/tests/guards/__snapshots__/snapshot-css.test.ts.snap index 6296604..d3bac21 100644 --- a/packages/tokens/tests/guards/__snapshots__/snapshot-css.test.ts.snap +++ b/packages/tokens/tests/guards/__snapshots__/snapshot-css.test.ts.snap @@ -1,4 +1,4 @@ -// Bun Snapshot v1, https://bun.sh/docs/test/snapshots +// Bun Snapshot v1, https://goo.gl/fbAQLP exports[`G1 · dist/tokens.css byte-stable matches committed snapshot 1`] = ` ":root { @@ -227,6 +227,10 @@ exports[`G1 · dist/tokens.css byte-stable matches committed snapshot 1`] = ` /* DEPRECATED: --border-warning-ghost → --border-neutral-ghost (removed in 0.3.0): Accent ghost was never in Figma; SPEC §10.D1. */ /* DEPRECATED: --border-success-ghost → --border-neutral-ghost (removed in 0.3.0): Accent ghost was never in Figma; SPEC §10.D1. */ /* DEPRECATED: --border-info-ghost → --border-neutral-ghost (removed in 0.3.0): Accent ghost was never in Figma; SPEC §10.D1. */ +/* DEPRECATED: --fx-glow-success → --fx-glow-brand (removed in 0.3.0): FX.Glow.Success is not present in Figma Variables. */ +/* DEPRECATED: --fx-glow-info → --fx-glow-brand (removed in 0.3.0): FX.Glow.Info is not present in Figma Variables. */ +/* DEPRECATED: --fx-focus-ring → --fx-focus-ring-brand (removed in 0.3.0): FX.Focus-ring is split by Figma slot. */ +/* DEPRECATED: --fx-skeleton → --fx-skeleton-base (removed in 0.3.0): FX.Skeleton is split into Base and Highlight. */ :root { --opacity-0: 0.00; @@ -321,6 +325,36 @@ exports[`G1 · dist/tokens.css byte-stable matches committed snapshot 1`] = ` --static-dark-a96: oklch(0.08 0 0 / 0.96); --static-dark-a98: oklch(0.08 0 0 / 0.98); --static-dark-a99: oklch(0.08 0 0 / 0.99); + --static-skeleton-mid: oklch(0.575 0.012 286); + --static-skeleton-mid-a0: oklch(0.575 0.012 286 / 0); + --static-skeleton-mid-a1: oklch(0.575 0.012 286 / 0.01); + --static-skeleton-mid-a2: oklch(0.575 0.012 286 / 0.02); + --static-skeleton-mid-a4: oklch(0.575 0.012 286 / 0.04); + --static-skeleton-mid-a8: oklch(0.575 0.012 286 / 0.08); + --static-skeleton-mid-a12: oklch(0.575 0.012 286 / 0.12); + --static-skeleton-mid-a16: oklch(0.575 0.012 286 / 0.16); + --static-skeleton-mid-a20: oklch(0.575 0.012 286 / 0.2); + --static-skeleton-mid-a24: oklch(0.575 0.012 286 / 0.24); + --static-skeleton-mid-a28: oklch(0.575 0.012 286 / 0.28); + --static-skeleton-mid-a32: oklch(0.575 0.012 286 / 0.32); + --static-skeleton-mid-a36: oklch(0.575 0.012 286 / 0.36); + --static-skeleton-mid-a40: oklch(0.575 0.012 286 / 0.4); + --static-skeleton-mid-a44: oklch(0.575 0.012 286 / 0.44); + --static-skeleton-mid-a48: oklch(0.575 0.012 286 / 0.48); + --static-skeleton-mid-a52: oklch(0.575 0.012 286 / 0.52); + --static-skeleton-mid-a56: oklch(0.575 0.012 286 / 0.56); + --static-skeleton-mid-a60: oklch(0.575 0.012 286 / 0.6); + --static-skeleton-mid-a64: oklch(0.575 0.012 286 / 0.64); + --static-skeleton-mid-a68: oklch(0.575 0.012 286 / 0.68); + --static-skeleton-mid-a72: oklch(0.575 0.012 286 / 0.72); + --static-skeleton-mid-a76: oklch(0.575 0.012 286 / 0.76); + --static-skeleton-mid-a80: oklch(0.575 0.012 286 / 0.8); + --static-skeleton-mid-a84: oklch(0.575 0.012 286 / 0.84); + --static-skeleton-mid-a88: oklch(0.575 0.012 286 / 0.88); + --static-skeleton-mid-a92: oklch(0.575 0.012 286 / 0.92); + --static-skeleton-mid-a96: oklch(0.575 0.012 286 / 0.96); + --static-skeleton-mid-a98: oklch(0.575 0.012 286 / 0.98); + --static-skeleton-mid-a99: oklch(0.575 0.012 286 / 0.99); } :root { @@ -1139,13 +1173,21 @@ exports[`G1 · dist/tokens.css byte-stable matches committed snapshot 1`] = ` --border-info-ghost: oklch(0.64 0.193 259.9 / 0); --border-static-light: oklch(1 0 0 / 0.4); --border-static-dark: oklch(0.08 0 0 / 0.4); - --fx-glow-brand: oklch(0.603 0.218 257.4 / 0.4); - --fx-glow-danger: oklch(0.654 0.232 28.7 / 0.4); - --fx-glow-warning: oklch(0.786 0.172 68.6 / 0.4); - --fx-glow-success: oklch(0.73 0.194 147.4 / 0.4); - --fx-glow-info: oklch(0.64 0.193 259.9 / 0.4); - --fx-focus-ring: oklch(0.603 0.218 257.4 / 0.4); - --fx-skeleton: oklch(0.575 0.012 286 / 0.16); + --fx-glow-neutral: oklch(1 0 0 / 0.52); + --fx-glow-inverted: oklch(0.76 0.013 286.1); + --fx-glow-brand: oklch(0.603 0.218 257.4 / 0.52); + --fx-glow-danger: oklch(0.654 0.232 28.7 / 0.52); + --fx-glow-warning: oklch(0.786 0.172 68.6 / 0.52); + --fx-glow-success: oklch(0.73 0.194 147.4 / 0.52); + --fx-glow-info: oklch(0.64 0.193 259.9 / 0.52); + --fx-focus-ring-neutral: oklch(0.08 0 0); + --fx-focus-ring-brand: oklch(0.603 0.218 257.4); + --fx-focus-ring-danger: oklch(0.654 0.232 28.7); + --fx-focus-ring-warning: oklch(0.786 0.172 68.6); + --fx-focus-ring: oklch(0.603 0.218 257.4); + --fx-skeleton-base: oklch(0.575 0.012 286 / 0.08); + --fx-skeleton-highlight: oklch(0.575 0.012 286 / 0.04); + --fx-skeleton: oklch(0.575 0.012 286 / 0.08); --fx-shadow-minor: oklch(0.08 0 0 / 0.01); --fx-shadow-ambient: oklch(0.08 0 0 / 0.02); --fx-shadow-penumbra: oklch(0.08 0 0 / 0.04); @@ -1976,13 +2018,21 @@ exports[`G1 · dist/tokens.css byte-stable matches committed snapshot 1`] = ` --border-info-ghost: oklch(0.479 0.207 261 / 0); --border-static-light: oklch(1 0 0 / 0.4); --border-static-dark: oklch(0.08 0 0 / 0.4); - --fx-glow-brand: oklch(0.464 0.242 263.3 / 0.4); - --fx-glow-danger: oklch(0.553 0.225 27.3 / 0.4); - --fx-glow-warning: oklch(0.552 0.192 35.3 / 0.4); - --fx-glow-success: oklch(0.558 0.146 147.5 / 0.4); - --fx-glow-info: oklch(0.479 0.207 261 / 0.4); - --fx-focus-ring: oklch(0.464 0.242 263.3 / 0.4); - --fx-skeleton: oklch(0.555 0.012 286 / 0.16); + --fx-glow-neutral: oklch(1 0 0 / 0.52); + --fx-glow-inverted: oklch(0.825 0.011 280.4); + --fx-glow-brand: oklch(0.464 0.242 263.3 / 0.52); + --fx-glow-danger: oklch(0.553 0.225 27.3 / 0.52); + --fx-glow-warning: oklch(0.552 0.192 35.3 / 0.52); + --fx-glow-success: oklch(0.558 0.146 147.5 / 0.52); + --fx-glow-info: oklch(0.479 0.207 261 / 0.52); + --fx-focus-ring-neutral: oklch(0.08 0 0); + --fx-focus-ring-brand: oklch(0.464 0.242 263.3); + --fx-focus-ring-danger: oklch(0.553 0.225 27.3); + --fx-focus-ring-warning: oklch(0.552 0.192 35.3); + --fx-focus-ring: oklch(0.464 0.242 263.3); + --fx-skeleton-base: oklch(0.575 0.012 286 / 0.12); + --fx-skeleton-highlight: oklch(0.575 0.012 286 / 0.04); + --fx-skeleton: oklch(0.575 0.012 286 / 0.12); --fx-shadow-minor: oklch(0.08 0 0 / 0.01); --fx-shadow-ambient: oklch(0.08 0 0 / 0.02); --fx-shadow-penumbra: oklch(0.08 0 0 / 0.04); @@ -2813,17 +2863,25 @@ exports[`G1 · dist/tokens.css byte-stable matches committed snapshot 1`] = ` --border-info-ghost: oklch(0.681 0.169 259.8 / 0); --border-static-light: oklch(1 0 0 / 0.4); --border-static-dark: oklch(0.08 0 0 / 0.4); - --fx-glow-brand: oklch(0.661 0.181 259.6 / 0.4); - --fx-glow-danger: oklch(0.654 0.232 26.5 / 0.4); - --fx-glow-warning: oklch(0.757 0.176 59.8 / 0.4); - --fx-glow-success: oklch(0.756 0.208 147 / 0.4); - --fx-glow-info: oklch(0.681 0.169 259.8 / 0.4); - --fx-focus-ring: oklch(0.661 0.181 259.6 / 0.4); - --fx-skeleton: oklch(0.575 0.012 286 / 0.16); - --fx-shadow-minor: oklch(0.08 0 0 / 0.01); - --fx-shadow-ambient: oklch(0.08 0 0 / 0.02); - --fx-shadow-penumbra: oklch(0.08 0 0 / 0.04); - --fx-shadow-major: oklch(0.08 0 0 / 0.12); + --fx-glow-neutral: oklch(1 0 0 / 0.52); + --fx-glow-inverted: oklch(0.359 0.012 285.8); + --fx-glow-brand: oklch(0.661 0.181 259.6 / 0.52); + --fx-glow-danger: oklch(0.654 0.232 26.5 / 0.52); + --fx-glow-warning: oklch(0.757 0.176 59.8 / 0.52); + --fx-glow-success: oklch(0.756 0.208 147 / 0.52); + --fx-glow-info: oklch(0.681 0.169 259.8 / 0.52); + --fx-focus-ring-neutral: oklch(1 0 0); + --fx-focus-ring-brand: oklch(0.661 0.181 259.6); + --fx-focus-ring-danger: oklch(0.654 0.232 26.5); + --fx-focus-ring-warning: oklch(0.757 0.176 59.8); + --fx-focus-ring: oklch(0.661 0.181 259.6); + --fx-skeleton-base: oklch(0.575 0.012 286 / 0.12); + --fx-skeleton-highlight: oklch(0.575 0.012 286 / 0.04); + --fx-skeleton: oklch(0.575 0.012 286 / 0.12); + --fx-shadow-minor: oklch(0.08 0 0 / 0.02); + --fx-shadow-ambient: oklch(0.08 0 0 / 0.04); + --fx-shadow-penumbra: oklch(0.08 0 0 / 0.12); + --fx-shadow-major: oklch(0.08 0 0 / 0.2); --badge-label-contrast: oklch(1 0 0); --badge-label-default: oklch(0.08 0 0); --control-bg: oklch(0.575 0.012 286 / 0.36); @@ -3650,17 +3708,25 @@ exports[`G1 · dist/tokens.css byte-stable matches committed snapshot 1`] = ` --border-info-ghost: oklch(0.801 0.101 257.8 / 0); --border-static-light: oklch(1 0 0 / 0.4); --border-static-dark: oklch(0.08 0 0 / 0.4); - --fx-glow-brand: oklch(0.685 0.17 253 / 0.4); - --fx-glow-danger: oklch(0.698 0.193 23.5 / 0.4); - --fx-glow-warning: oklch(0.802 0.153 67.2 / 0.4); - --fx-glow-success: oklch(0.782 0.218 146.9 / 0.4); - --fx-glow-info: oklch(0.801 0.101 257.8 / 0.4); - --fx-focus-ring: oklch(0.685 0.17 253 / 0.4); - --fx-skeleton: oklch(0.555 0.012 286 / 0.16); - --fx-shadow-minor: oklch(0.08 0 0 / 0.01); - --fx-shadow-ambient: oklch(0.08 0 0 / 0.02); - --fx-shadow-penumbra: oklch(0.08 0 0 / 0.04); - --fx-shadow-major: oklch(0.08 0 0 / 0.12); + --fx-glow-neutral: oklch(1 0 0 / 0.52); + --fx-glow-inverted: oklch(0.332 0.012 285.7); + --fx-glow-brand: oklch(0.685 0.17 253 / 0.52); + --fx-glow-danger: oklch(0.698 0.193 23.5 / 0.52); + --fx-glow-warning: oklch(0.802 0.153 67.2 / 0.52); + --fx-glow-success: oklch(0.782 0.218 146.9 / 0.52); + --fx-glow-info: oklch(0.801 0.101 257.8 / 0.52); + --fx-focus-ring-neutral: oklch(1 0 0); + --fx-focus-ring-brand: oklch(0.685 0.17 253); + --fx-focus-ring-danger: oklch(0.698 0.193 23.5); + --fx-focus-ring-warning: oklch(0.802 0.153 67.2); + --fx-focus-ring: oklch(0.685 0.17 253); + --fx-skeleton-base: oklch(0.575 0.012 286 / 0.16); + --fx-skeleton-highlight: oklch(0.575 0.012 286 / 0.04); + --fx-skeleton: oklch(0.575 0.012 286 / 0.16); + --fx-shadow-minor: oklch(0.08 0 0 / 0.02); + --fx-shadow-ambient: oklch(0.08 0 0 / 0.04); + --fx-shadow-penumbra: oklch(0.08 0 0 / 0.12); + --fx-shadow-major: oklch(0.08 0 0 / 0.2); --badge-label-contrast: oklch(1 0 0); --badge-label-default: oklch(0.08 0 0); --control-bg: oklch(0.555 0.012 286 / 0.44); @@ -4488,17 +4554,25 @@ exports[`G1 · dist/tokens.css byte-stable matches committed snapshot 1`] = ` --border-info-ghost: oklch(0.681 0.169 259.8 / 0); --border-static-light: oklch(1 0 0 / 0.4); --border-static-dark: oklch(0.08 0 0 / 0.4); - --fx-glow-brand: oklch(0.661 0.181 259.6 / 0.4); - --fx-glow-danger: oklch(0.654 0.232 26.5 / 0.4); - --fx-glow-warning: oklch(0.757 0.176 59.8 / 0.4); - --fx-glow-success: oklch(0.756 0.208 147 / 0.4); - --fx-glow-info: oklch(0.681 0.169 259.8 / 0.4); - --fx-focus-ring: oklch(0.661 0.181 259.6 / 0.4); - --fx-skeleton: oklch(0.575 0.012 286 / 0.16); - --fx-shadow-minor: oklch(0.08 0 0 / 0.01); - --fx-shadow-ambient: oklch(0.08 0 0 / 0.02); - --fx-shadow-penumbra: oklch(0.08 0 0 / 0.04); - --fx-shadow-major: oklch(0.08 0 0 / 0.12); + --fx-glow-neutral: oklch(1 0 0 / 0.52); + --fx-glow-inverted: oklch(0.359 0.012 285.8); + --fx-glow-brand: oklch(0.661 0.181 259.6 / 0.52); + --fx-glow-danger: oklch(0.654 0.232 26.5 / 0.52); + --fx-glow-warning: oklch(0.757 0.176 59.8 / 0.52); + --fx-glow-success: oklch(0.756 0.208 147 / 0.52); + --fx-glow-info: oklch(0.681 0.169 259.8 / 0.52); + --fx-focus-ring-neutral: oklch(1 0 0); + --fx-focus-ring-brand: oklch(0.661 0.181 259.6); + --fx-focus-ring-danger: oklch(0.654 0.232 26.5); + --fx-focus-ring-warning: oklch(0.757 0.176 59.8); + --fx-focus-ring: oklch(0.661 0.181 259.6); + --fx-skeleton-base: oklch(0.575 0.012 286 / 0.12); + --fx-skeleton-highlight: oklch(0.575 0.012 286 / 0.04); + --fx-skeleton: oklch(0.575 0.012 286 / 0.12); + --fx-shadow-minor: oklch(0.08 0 0 / 0.02); + --fx-shadow-ambient: oklch(0.08 0 0 / 0.04); + --fx-shadow-penumbra: oklch(0.08 0 0 / 0.12); + --fx-shadow-major: oklch(0.08 0 0 / 0.2); --badge-label-contrast: oklch(1 0 0); --badge-label-default: oklch(0.08 0 0); --control-bg: oklch(0.575 0.012 286 / 0.36); diff --git a/packages/tokens/tests/guards/__snapshots__/snapshot-esm.test.ts.snap b/packages/tokens/tests/guards/__snapshots__/snapshot-esm.test.ts.snap index 16a09fb..aa78545 100644 --- a/packages/tokens/tests/guards/__snapshots__/snapshot-esm.test.ts.snap +++ b/packages/tokens/tests/guards/__snapshots__/snapshot-esm.test.ts.snap @@ -1,4 +1,4 @@ -// Bun Snapshot v1, https://bun.sh/docs/test/snapshots +// Bun Snapshot v1, https://goo.gl/fbAQLP exports[`G2 · dist ESM + DTS byte-stable dist/index.js matches committed snapshot 1`] = ` "// Lab UI — generated ESM token barrel. DO NOT EDIT. @@ -93,6 +93,36 @@ export const staticDarkA92 = 'var(--static-dark-a92)'; export const staticDarkA96 = 'var(--static-dark-a96)'; export const staticDarkA98 = 'var(--static-dark-a98)'; export const staticDarkA99 = 'var(--static-dark-a99)'; +export const staticSkeletonMid = 'var(--static-skeleton-mid)'; +export const staticSkeletonMidA0 = 'var(--static-skeleton-mid-a0)'; +export const staticSkeletonMidA1 = 'var(--static-skeleton-mid-a1)'; +export const staticSkeletonMidA2 = 'var(--static-skeleton-mid-a2)'; +export const staticSkeletonMidA4 = 'var(--static-skeleton-mid-a4)'; +export const staticSkeletonMidA8 = 'var(--static-skeleton-mid-a8)'; +export const staticSkeletonMidA12 = 'var(--static-skeleton-mid-a12)'; +export const staticSkeletonMidA16 = 'var(--static-skeleton-mid-a16)'; +export const staticSkeletonMidA20 = 'var(--static-skeleton-mid-a20)'; +export const staticSkeletonMidA24 = 'var(--static-skeleton-mid-a24)'; +export const staticSkeletonMidA28 = 'var(--static-skeleton-mid-a28)'; +export const staticSkeletonMidA32 = 'var(--static-skeleton-mid-a32)'; +export const staticSkeletonMidA36 = 'var(--static-skeleton-mid-a36)'; +export const staticSkeletonMidA40 = 'var(--static-skeleton-mid-a40)'; +export const staticSkeletonMidA44 = 'var(--static-skeleton-mid-a44)'; +export const staticSkeletonMidA48 = 'var(--static-skeleton-mid-a48)'; +export const staticSkeletonMidA52 = 'var(--static-skeleton-mid-a52)'; +export const staticSkeletonMidA56 = 'var(--static-skeleton-mid-a56)'; +export const staticSkeletonMidA60 = 'var(--static-skeleton-mid-a60)'; +export const staticSkeletonMidA64 = 'var(--static-skeleton-mid-a64)'; +export const staticSkeletonMidA68 = 'var(--static-skeleton-mid-a68)'; +export const staticSkeletonMidA72 = 'var(--static-skeleton-mid-a72)'; +export const staticSkeletonMidA76 = 'var(--static-skeleton-mid-a76)'; +export const staticSkeletonMidA80 = 'var(--static-skeleton-mid-a80)'; +export const staticSkeletonMidA84 = 'var(--static-skeleton-mid-a84)'; +export const staticSkeletonMidA88 = 'var(--static-skeleton-mid-a88)'; +export const staticSkeletonMidA92 = 'var(--static-skeleton-mid-a92)'; +export const staticSkeletonMidA96 = 'var(--static-skeleton-mid-a96)'; +export const staticSkeletonMidA98 = 'var(--static-skeleton-mid-a98)'; +export const staticSkeletonMidA99 = 'var(--static-skeleton-mid-a99)'; export const neutral0 = 'var(--neutral-0)'; export const neutral0A0 = 'var(--neutral-0-a0)'; export const neutral0A1 = 'var(--neutral-0-a1)'; @@ -909,12 +939,20 @@ export const borderInfoSoft = 'var(--border-info-soft)'; export const borderInfoGhost = 'var(--border-info-ghost)'; export const borderStaticLight = 'var(--border-static-light)'; export const borderStaticDark = 'var(--border-static-dark)'; +export const fxGlowNeutral = 'var(--fx-glow-neutral)'; +export const fxGlowInverted = 'var(--fx-glow-inverted)'; export const fxGlowBrand = 'var(--fx-glow-brand)'; export const fxGlowDanger = 'var(--fx-glow-danger)'; export const fxGlowWarning = 'var(--fx-glow-warning)'; export const fxGlowSuccess = 'var(--fx-glow-success)'; export const fxGlowInfo = 'var(--fx-glow-info)'; +export const fxFocusRingNeutral = 'var(--fx-focus-ring-neutral)'; +export const fxFocusRingBrand = 'var(--fx-focus-ring-brand)'; +export const fxFocusRingDanger = 'var(--fx-focus-ring-danger)'; +export const fxFocusRingWarning = 'var(--fx-focus-ring-warning)'; export const fxFocusRing = 'var(--fx-focus-ring)'; +export const fxSkeletonBase = 'var(--fx-skeleton-base)'; +export const fxSkeletonHighlight = 'var(--fx-skeleton-highlight)'; export const fxSkeleton = 'var(--fx-skeleton)'; export const fxShadowMinor = 'var(--fx-shadow-minor)'; export const fxShadowAmbient = 'var(--fx-shadow-ambient)'; @@ -1238,6 +1276,36 @@ export declare const staticDarkA92: string; export declare const staticDarkA96: string; export declare const staticDarkA98: string; export declare const staticDarkA99: string; +export declare const staticSkeletonMid: string; +export declare const staticSkeletonMidA0: string; +export declare const staticSkeletonMidA1: string; +export declare const staticSkeletonMidA2: string; +export declare const staticSkeletonMidA4: string; +export declare const staticSkeletonMidA8: string; +export declare const staticSkeletonMidA12: string; +export declare const staticSkeletonMidA16: string; +export declare const staticSkeletonMidA20: string; +export declare const staticSkeletonMidA24: string; +export declare const staticSkeletonMidA28: string; +export declare const staticSkeletonMidA32: string; +export declare const staticSkeletonMidA36: string; +export declare const staticSkeletonMidA40: string; +export declare const staticSkeletonMidA44: string; +export declare const staticSkeletonMidA48: string; +export declare const staticSkeletonMidA52: string; +export declare const staticSkeletonMidA56: string; +export declare const staticSkeletonMidA60: string; +export declare const staticSkeletonMidA64: string; +export declare const staticSkeletonMidA68: string; +export declare const staticSkeletonMidA72: string; +export declare const staticSkeletonMidA76: string; +export declare const staticSkeletonMidA80: string; +export declare const staticSkeletonMidA84: string; +export declare const staticSkeletonMidA88: string; +export declare const staticSkeletonMidA92: string; +export declare const staticSkeletonMidA96: string; +export declare const staticSkeletonMidA98: string; +export declare const staticSkeletonMidA99: string; export declare const neutral0: string; export declare const neutral0A0: string; export declare const neutral0A1: string; @@ -2054,12 +2122,20 @@ export declare const borderInfoSoft: string; export declare const borderInfoGhost: string; export declare const borderStaticLight: string; export declare const borderStaticDark: string; +export declare const fxGlowNeutral: string; +export declare const fxGlowInverted: string; export declare const fxGlowBrand: string; export declare const fxGlowDanger: string; export declare const fxGlowWarning: string; export declare const fxGlowSuccess: string; export declare const fxGlowInfo: string; +export declare const fxFocusRingNeutral: string; +export declare const fxFocusRingBrand: string; +export declare const fxFocusRingDanger: string; +export declare const fxFocusRingWarning: string; export declare const fxFocusRing: string; +export declare const fxSkeletonBase: string; +export declare const fxSkeletonHighlight: string; export declare const fxSkeleton: string; export declare const fxShadowMinor: string; export declare const fxShadowAmbient: string; diff --git a/packages/tokens/tests/guards/__snapshots__/snapshot-tailwind.test.ts.snap b/packages/tokens/tests/guards/__snapshots__/snapshot-tailwind.test.ts.snap index cd13fa7..69df41e 100644 --- a/packages/tokens/tests/guards/__snapshots__/snapshot-tailwind.test.ts.snap +++ b/packages/tokens/tests/guards/__snapshots__/snapshot-tailwind.test.ts.snap @@ -1,4 +1,4 @@ -// Bun Snapshot v1, https://bun.sh/docs/test/snapshots +// Bun Snapshot v1, https://goo.gl/fbAQLP exports[`Tailwind preset · dist/tailwind-preset.css byte-stable matches committed snapshot 1`] = ` "/* Lab UI — generated Tailwind v4 preset. DO NOT EDIT. */ @@ -65,6 +65,36 @@ exports[`Tailwind preset · dist/tailwind-preset.css byte-stable matches committ --color-static-dark-a96: var(--static-dark-a96); --color-static-dark-a98: var(--static-dark-a98); --color-static-dark-a99: var(--static-dark-a99); + --color-static-skeleton-mid: var(--static-skeleton-mid); + --color-static-skeleton-mid-a0: var(--static-skeleton-mid-a0); + --color-static-skeleton-mid-a1: var(--static-skeleton-mid-a1); + --color-static-skeleton-mid-a2: var(--static-skeleton-mid-a2); + --color-static-skeleton-mid-a4: var(--static-skeleton-mid-a4); + --color-static-skeleton-mid-a8: var(--static-skeleton-mid-a8); + --color-static-skeleton-mid-a12: var(--static-skeleton-mid-a12); + --color-static-skeleton-mid-a16: var(--static-skeleton-mid-a16); + --color-static-skeleton-mid-a20: var(--static-skeleton-mid-a20); + --color-static-skeleton-mid-a24: var(--static-skeleton-mid-a24); + --color-static-skeleton-mid-a28: var(--static-skeleton-mid-a28); + --color-static-skeleton-mid-a32: var(--static-skeleton-mid-a32); + --color-static-skeleton-mid-a36: var(--static-skeleton-mid-a36); + --color-static-skeleton-mid-a40: var(--static-skeleton-mid-a40); + --color-static-skeleton-mid-a44: var(--static-skeleton-mid-a44); + --color-static-skeleton-mid-a48: var(--static-skeleton-mid-a48); + --color-static-skeleton-mid-a52: var(--static-skeleton-mid-a52); + --color-static-skeleton-mid-a56: var(--static-skeleton-mid-a56); + --color-static-skeleton-mid-a60: var(--static-skeleton-mid-a60); + --color-static-skeleton-mid-a64: var(--static-skeleton-mid-a64); + --color-static-skeleton-mid-a68: var(--static-skeleton-mid-a68); + --color-static-skeleton-mid-a72: var(--static-skeleton-mid-a72); + --color-static-skeleton-mid-a76: var(--static-skeleton-mid-a76); + --color-static-skeleton-mid-a80: var(--static-skeleton-mid-a80); + --color-static-skeleton-mid-a84: var(--static-skeleton-mid-a84); + --color-static-skeleton-mid-a88: var(--static-skeleton-mid-a88); + --color-static-skeleton-mid-a92: var(--static-skeleton-mid-a92); + --color-static-skeleton-mid-a96: var(--static-skeleton-mid-a96); + --color-static-skeleton-mid-a98: var(--static-skeleton-mid-a98); + --color-static-skeleton-mid-a99: var(--static-skeleton-mid-a99); --color-neutral-0: var(--neutral-0); --color-neutral-0-a0: var(--neutral-0-a0); --color-neutral-0-a1: var(--neutral-0-a1); @@ -882,12 +912,20 @@ exports[`Tailwind preset · dist/tailwind-preset.css byte-stable matches committ --color-border-info-ghost: var(--border-info-ghost); --color-border-static-light: var(--border-static-light); --color-border-static-dark: var(--border-static-dark); + --color-fx-glow-neutral: var(--fx-glow-neutral); + --color-fx-glow-inverted: var(--fx-glow-inverted); --color-fx-glow-brand: var(--fx-glow-brand); --color-fx-glow-danger: var(--fx-glow-danger); --color-fx-glow-warning: var(--fx-glow-warning); --color-fx-glow-success: var(--fx-glow-success); --color-fx-glow-info: var(--fx-glow-info); + --color-fx-focus-ring-neutral: var(--fx-focus-ring-neutral); + --color-fx-focus-ring-brand: var(--fx-focus-ring-brand); + --color-fx-focus-ring-danger: var(--fx-focus-ring-danger); + --color-fx-focus-ring-warning: var(--fx-focus-ring-warning); --color-fx-focus-ring: var(--fx-focus-ring); + --color-fx-skeleton-base: var(--fx-skeleton-base); + --color-fx-skeleton-highlight: var(--fx-skeleton-highlight); --color-fx-skeleton: var(--fx-skeleton); --color-fx-shadow-minor: var(--fx-shadow-minor); --color-fx-shadow-ambient: var(--fx-shadow-ambient); diff --git a/packages/tokens/tests/guards/snapshot-lock.test.ts b/packages/tokens/tests/guards/snapshot-lock.test.ts index c0184a6..bd78d64 100644 --- a/packages/tokens/tests/guards/snapshot-lock.test.ts +++ b/packages/tokens/tests/guards/snapshot-lock.test.ts @@ -32,10 +32,10 @@ describe('Snapshot lock · anchors', () => { expect(apca).toBeLessThanOrEqual(68) }) - test('count: 13 neutrals + 11 accents + 2 statics + 29 opacity stops', () => { + test('count: 13 neutrals + 11 accents + 3 statics + 29 opacity stops', () => { expect(primitive.neutrals.length).toBe(13) expect(primitive.accents.length).toBe(11) - expect(primitive.statics.length).toBe(2) + expect(primitive.statics.length).toBe(3) expect(primitive.opacityStops.length).toBe(29) }) })