@skra/tokens 0.2.0

package/skra/_theme.scss

@@ -0,0 +1,448 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --skra-sys-color-neutral-base-hover: oklch(57.0% 0 0);
+  --skra-sys-color-neutral-base-active: oklch(60.5% 0 0);
+  --skra-sys-color-neutral-contrast-hover: oklch(91.0% 0 0);
+  --skra-sys-color-neutral-contrast-active: oklch(87.5% 0 0);
+  --skra-sys-color-neutral-border-hover: oklch(47.0% 0 0);
+  --skra-sys-color-neutral-border-active: oklch(50.5% 0 0);
+  --skra-sys-color-neutral-soft-hover: oklch(88.0% 0 0);
+  --skra-sys-color-neutral-soft-active: oklch(84.5% 0 0);
+  --skra-sys-color-neutral-strong-hover: oklch(32.0% 0 0);
+  --skra-sys-color-neutral-strong-active: oklch(35.5% 0 0);
+  --skra-sys-color-neutral-ink-hover: oklch(42.0% 0 0);
+  --skra-sys-color-neutral-ink-active: oklch(45.5% 0 0);
+  --skra-sys-color-primary-base-hover: oklch(45.0% 0.15 250);
+  --skra-sys-color-primary-base-active: oklch(41.5% 0.15 250);
+  --skra-sys-color-primary-contrast-hover: oklch(93.0% 0 0);
+  --skra-sys-color-primary-contrast-active: oklch(89.5% 0 0);
+  --skra-sys-color-primary-border-hover: oklch(45.0% 0.15 250);
+  --skra-sys-color-primary-border-active: oklch(41.5% 0.15 250);
+  --skra-sys-color-primary-soft-hover: oklch(88.0% 0.04 250);
+  --skra-sys-color-primary-soft-active: oklch(84.5% 0.04 250);
+  --skra-sys-color-primary-strong-hover: oklch(42.0% 0.15 250);
+  --skra-sys-color-primary-strong-active: oklch(45.5% 0.15 250);
+  --skra-sys-color-primary-ink-hover: oklch(45.0% 0.15 250);
+  --skra-sys-color-primary-ink-active: oklch(41.5% 0.15 250);
+  --skra-sys-color-secondary-base-hover: oklch(46.0% 0.04 250);
+  --skra-sys-color-secondary-base-active: oklch(42.5% 0.04 250);
+  --skra-sys-color-secondary-contrast-hover: oklch(93.0% 0 0);
+  --skra-sys-color-secondary-contrast-active: oklch(89.5% 0 0);
+  --skra-sys-color-secondary-border-hover: oklch(52.0% 0.04 250);
+  --skra-sys-color-secondary-border-active: oklch(55.5% 0.04 250);
+  --skra-sys-color-secondary-soft-hover: oklch(87.0% 0.02 250);
+  --skra-sys-color-secondary-soft-active: oklch(83.5% 0.02 250);
+  --skra-sys-color-secondary-strong-hover: oklch(37.0% 0.04 250);
+  --skra-sys-color-secondary-strong-active: oklch(40.5% 0.04 250);
+  --skra-sys-color-secondary-ink-hover: oklch(46.0% 0.04 250);
+  --skra-sys-color-secondary-ink-active: oklch(42.5% 0.04 250);
+  --skra-sys-color-info-base-hover: oklch(57.0% 0.12 220);
+  --skra-sys-color-info-base-active: oklch(60.5% 0.12 220);
+  --skra-sys-color-info-contrast-hover: oklch(93.0% 0 0);
+  --skra-sys-color-info-contrast-active: oklch(89.5% 0 0);
+  --skra-sys-color-info-border-hover: oklch(57.0% 0.12 220);
+  --skra-sys-color-info-border-active: oklch(60.5% 0.12 220);
+  --skra-sys-color-info-soft-hover: oklch(87.0% 0.04 220);
+  --skra-sys-color-info-soft-active: oklch(83.5% 0.04 220);
+  --skra-sys-color-info-strong-hover: oklch(42.0% 0.12 220);
+  --skra-sys-color-info-strong-active: oklch(45.5% 0.12 220);
+  --skra-sys-color-info-ink-hover: oklch(57.0% 0.12 220);
+  --skra-sys-color-info-ink-active: oklch(60.5% 0.12 220);
+  --skra-sys-color-success-base-hover: oklch(45.0% 0.15 145);
+  --skra-sys-color-success-base-active: oklch(41.5% 0.15 145);
+  --skra-sys-color-success-contrast-hover: oklch(93.0% 0 0);
+  --skra-sys-color-success-contrast-active: oklch(89.5% 0 0);
+  --skra-sys-color-success-border-hover: oklch(55.0% 0.15 145);
+  --skra-sys-color-success-border-active: oklch(58.5% 0.15 145);
+  --skra-sys-color-success-soft-hover: oklch(87.0% 0.05 145);
+  --skra-sys-color-success-soft-active: oklch(83.5% 0.05 145);
+  --skra-sys-color-success-strong-hover: oklch(39.0% 0.13 145);
+  --skra-sys-color-success-strong-active: oklch(42.5% 0.13 145);
+  --skra-sys-color-success-ink-hover: oklch(45.0% 0.15 145);
+  --skra-sys-color-success-ink-active: oklch(41.5% 0.15 145);
+  --skra-sys-color-warning-base-hover: oklch(63.0% 0.15 80);
+  --skra-sys-color-warning-base-active: oklch(59.5% 0.15 80);
+  --skra-sys-color-warning-contrast-hover: oklch(25.0% 0.05 80);
+  --skra-sys-color-warning-contrast-active: oklch(28.5% 0.05 80);
+  --skra-sys-color-warning-border-hover: oklch(53.0% 0.15 80);
+  --skra-sys-color-warning-border-active: oklch(49.5% 0.15 80);
+  --skra-sys-color-warning-soft-hover: oklch(88.0% 0.05 80);
+  --skra-sys-color-warning-soft-active: oklch(84.5% 0.05 80);
+  --skra-sys-color-warning-strong-hover: oklch(45.0% 0.12 80);
+  --skra-sys-color-warning-strong-active: oklch(48.5% 0.12 80);
+  --skra-sys-color-warning-ink-hover: oklch(45.0% 0.12 80);
+  --skra-sys-color-warning-ink-active: oklch(48.5% 0.12 80);
+  --skra-sys-color-danger-base-hover: oklch(48.0% 0.2 25);
+  --skra-sys-color-danger-base-active: oklch(44.5% 0.2 25);
+  --skra-sys-color-danger-contrast-hover: oklch(93.0% 0 0);
+  --skra-sys-color-danger-contrast-active: oklch(89.5% 0 0);
+  --skra-sys-color-danger-border-hover: oklch(55.0% 0.2 25);
+  --skra-sys-color-danger-border-active: oklch(58.5% 0.2 25);
+  --skra-sys-color-danger-soft-hover: oklch(87.0% 0.04 25);
+  --skra-sys-color-danger-soft-active: oklch(83.5% 0.04 25);
+  --skra-sys-color-danger-strong-hover: oklch(39.0% 0.16 25);
+  --skra-sys-color-danger-strong-active: oklch(42.5% 0.16 25);
+  --skra-sys-color-danger-ink-hover: oklch(48.0% 0.2 25);
+  --skra-sys-color-danger-ink-active: oklch(44.5% 0.2 25);
+  --skra-sys-color-surface-active: oklch(89.5% 0 0);
+  --skra-sys-color-surface-raised-hover: oklch(88.0% 0 0);
+  --skra-sys-color-surface-raised-active: oklch(84.5% 0 0);
+  --skra-sys-color-surface-muted-hover: oklch(79.0% 0 0);
+  --skra-sys-color-surface-muted-active: oklch(75.5% 0 0);
+  --skra-sys-color-on-surface-hover: oklch(7.0% 0 0);
+  --skra-sys-color-on-surface-active: oklch(10.5% 0 0);
+  --skra-sys-color-on-surface-strong-hover: oklch(7.0% 0 0);
+  --skra-sys-color-on-surface-strong-active: oklch(10.5% 0 0);
+  --skra-sys-color-on-surface-subtle-hover: oklch(42.0% 0 0);
+  --skra-sys-color-on-surface-subtle-active: oklch(45.5% 0 0);
+  --skra-sys-color-inverse-surface-hover: oklch(32.0% 0 0);
+  --skra-sys-color-inverse-surface-active: oklch(35.5% 0 0);
+  --skra-sys-color-on-inverse-surface-hover: oklch(93.0% 0 0);
+  --skra-sys-color-on-inverse-surface-active: oklch(89.5% 0 0);
+  --skra-sys-color-border-hover: oklch(7.0% 0 0);
+  --skra-sys-color-border-active: oklch(10.5% 0 0);
+  --skra-sys-color-border-subtle-hover: oklch(47.0% 0 0);
+  --skra-sys-color-border-subtle-active: oklch(50.5% 0 0);
+  --skra-sys-color-hint-hover: oklch(47.0% 0 0);
+  --skra-sys-color-hint-active: oklch(50.5% 0 0);
+  --skra-sys-color-focus-ring-hover: oklch(53.0% 0.15 250);
+  --skra-sys-color-focus-ring-active: oklch(49.5% 0.15 250);
+  --skra-sys-color-link-active: oklch(41.5% 0.15 250);
+  --skra-sys-icon-size-sm: 1em;
+  --skra-sys-icon-size-md: 1.25em;
+  --skra-sys-icon-size-lg: 1.5em;
+  --skra-sys-radius-none: 0;
+  --skra-sys-shadow-none: none;
+  --skra-sys-shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.10);
+  --skra-sys-shadow-md: 0 2px 8px oklch(0% 0 0 / 0.12);
+  --skra-sys-shadow-lg: 0 4px 16px oklch(0% 0 0 / 0.15);
+  --skra-sys-shadow-xl: 0 8px 32px oklch(0% 0 0 / 0.20);
+  --skra-sys-size-interactive-sm: 2rem;
+  --skra-sys-size-interactive-md: 2.5rem;
+  --skra-sys-size-interactive-lg: 3rem;
+  --skra-sys-typography-role-display-large-letter-spacing: -0.025em;
+  --skra-sys-typography-role-display-medium-letter-spacing: -0.025em;
+  --skra-sys-typography-role-display-small-letter-spacing: -0.025em;
+  --skra-sys-typography-role-headline-large-letter-spacing: -0.0125em;
+  --skra-sys-typography-role-headline-medium-letter-spacing: -0.0125em;
+  --skra-sys-typography-role-headline-small-letter-spacing: -0.0125em;
+  --skra-sys-typography-role-title-large-letter-spacing: 0;
+  --skra-sys-typography-role-title-medium-letter-spacing: 0;
+  --skra-sys-typography-role-title-small-letter-spacing: 0;
+  --skra-sys-typography-role-body-large-letter-spacing: 0;
+  --skra-sys-typography-role-body-medium-letter-spacing: 0;
+  --skra-sys-typography-role-body-small-letter-spacing: 0;
+  --skra-sys-typography-role-label-large-letter-spacing: 0.025em;
+  --skra-sys-typography-role-label-medium-letter-spacing: 0.025em;
+  --skra-sys-typography-role-label-small-letter-spacing: 0.025em;
+  --skra-ref-color-neutral-0: oklch(100% 0 0);
+  --skra-ref-color-neutral-50: oklch(98% 0 0);
+  --skra-ref-color-neutral-100: oklch(95% 0 0);
+  --skra-ref-color-neutral-200: oklch(90% 0 0);
+  --skra-ref-color-neutral-300: oklch(86% 0 0);
+  --skra-ref-color-neutral-400: oklch(65% 0 0);
+  --skra-ref-color-neutral-500: oklch(50% 0 0);
+  --skra-ref-color-neutral-600: oklch(40% 0 0);
+  --skra-ref-color-neutral-700: oklch(35% 0 0);
+  --skra-ref-color-neutral-800: oklch(25% 0 0);
+  --skra-ref-color-neutral-1000: oklch(0% 0 0);
+  --skra-ref-color-primary-50: oklch(95% 0.04 250);
+  --skra-ref-color-primary-400: oklch(65% 0.15 250);
+  --skra-ref-color-primary-500: oklch(60% 0.15 250);
+  --skra-ref-color-primary-600: oklch(52% 0.15 250);
+  --skra-ref-color-primary-700: oklch(35% 0.15 250);
+  --skra-ref-color-secondary-50: oklch(94% 0.02 250);
+  --skra-ref-color-secondary-400: oklch(60% 0.04 250);
+  --skra-ref-color-secondary-500: oklch(53% 0.04 250);
+  --skra-ref-color-secondary-600: oklch(45% 0.04 250);
+  --skra-ref-color-secondary-700: oklch(30% 0.04 250);
+  --skra-ref-color-info-50: oklch(94% 0.04 220);
+  --skra-ref-color-info-400: oklch(65% 0.12 220);
+  --skra-ref-color-info-500: oklch(60% 0.12 220);
+  --skra-ref-color-info-600: oklch(50% 0.12 220);
+  --skra-ref-color-info-700: oklch(35% 0.12 220);
+  --skra-ref-color-success-50: oklch(94% 0.05 145);
+  --skra-ref-color-success-400: oklch(60% 0.15 145);
+  --skra-ref-color-success-500: oklch(52% 0.15 145);
+  --skra-ref-color-success-600: oklch(48% 0.15 145);
+  --skra-ref-color-success-700: oklch(32% 0.13 145);
+  --skra-ref-color-warning-50: oklch(95% 0.05 80);
+  --skra-ref-color-warning-400: oklch(72% 0.15 80);
+  --skra-ref-color-warning-500: oklch(70% 0.15 80);
+  --skra-ref-color-warning-600: oklch(60% 0.15 80);
+  --skra-ref-color-warning-700: oklch(38% 0.12 80);
+  --skra-ref-color-warning-ink: oklch(18% 0.05 80);
+  --skra-ref-color-danger-50: oklch(94% 0.04 25);
+  --skra-ref-color-danger-400: oklch(60% 0.2 25);
+  --skra-ref-color-danger-500: oklch(55% 0.2 25);
+  --skra-ref-color-danger-600: oklch(48% 0.2 25);
+  --skra-ref-color-danger-700: oklch(32% 0.16 25);
+  --skra-ref-color-violet-500: oklch(45% 0.18 295);
+  --skra-ref-color-cobalt-50: oklch(95% 0.03 262);
+  --skra-ref-color-cobalt-500: oklch(56% 0.19 262);
+  --skra-ref-color-cobalt-600: oklch(50% 0.19 262);
+  --skra-ref-color-cobalt-700: oklch(42% 0.16 262);
+  --skra-ref-color-navy-800: oklch(30% 0.08 262);
+  --skra-ref-color-navy-900: oklch(22% 0.06 262);
+  --skra-ref-color-ice-100: oklch(96.5% 0.012 255);
+  --skra-ref-color-cream-50: oklch(97% 0.015 95);
+  --skra-ref-color-cream-100: oklch(93% 0.025 95);
+  --skra-ref-color-acid-50: oklch(96% 0.06 100);
+  --skra-ref-color-acid-400: oklch(88% 0.16 98);
+  --skra-ref-color-acid-500: oklch(85% 0.17 98);
+  --skra-ref-color-acid-600: oklch(75% 0.16 98);
+  --skra-ref-color-acid-700: oklch(50% 0.11 98);
+  --skra-ref-color-scrim: oklch(0% 0 0 / 0.5);
+  --skra-ref-color-slate-50: oklch(97.5% 0.005 260);
+  --skra-ref-color-slate-100: oklch(95.7% 0.006 256);
+  --skra-ref-color-slate-200: oklch(90% 0.008 260);
+  --skra-ref-color-slate-300: oklch(79.6% 0.017 259);
+  --skra-ref-color-slate-400: oklch(61.5% 0.023 262);
+  --skra-ref-color-slate-500: oklch(46.9% 0.021 261);
+  --skra-ref-color-slate-600: oklch(37.3% 0.021 259);
+  --skra-ref-color-slate-700: oklch(33.4% 0.022 256);
+  --skra-ref-color-slate-750: oklch(29.2% 0.02 261);
+  --skra-ref-color-slate-800: oklch(25.9% 0.017 260);
+  --skra-ref-color-slate-825: oklch(23.4% 0.013 258);
+  --skra-ref-color-slate-850: oklch(20.4% 0.011 261);
+  --skra-ref-color-slate-900: oklch(17.7% 0.009 264);
+  --skra-ref-color-slate-950: oklch(13.9% 0.005 263);
+  --skra-ref-color-cyan-50: oklch(96% 0.03 215);
+  --skra-ref-color-cyan-300: oklch(86.7% 0.113 212);
+  --skra-ref-color-cyan-400: oklch(76.4% 0.124 217);
+  --skra-ref-color-cyan-500: oklch(67.2% 0.118 220);
+  --skra-ref-color-cyan-700: oklch(50% 0.105 222);
+  --skra-ref-color-cyan-800: oklch(42% 0.09 224);
+  --skra-ref-color-cyan-soft-dark: oklch(26% 0.045 220);
+  --skra-ref-color-green-bright: oklch(80% 0.182 152);
+  --skra-ref-color-amber-bright: oklch(83.7% 0.164 84);
+  --skra-ref-color-red-bright: oklch(71.1% 0.166 22);
+  --skra-ref-font-size-2xs: 0.6875rem;
+  --skra-ref-font-size-xs: 0.75rem;
+  --skra-ref-font-size-sm: 0.875rem;
+  --skra-ref-font-size-md: 1rem;
+  --skra-ref-font-size-lg: 1.125rem;
+  --skra-ref-font-size-xl: 1.25rem;
+  --skra-ref-font-size-2xl: 1.5rem;
+  --skra-ref-font-size-3xl: 1.75rem;
+  --skra-ref-font-size-4xl: 2.25rem;
+  --skra-ref-font-size-5xl: 2.75rem;
+  --skra-ref-font-size-6xl: 3.5rem;
+  --skra-ref-motion-duration-100: 100ms;
+  --skra-ref-motion-duration-200: 200ms;
+  --skra-ref-motion-duration-300: 300ms;
+  --skra-ref-motion-delay-short: 150ms;
+  --skra-ref-motion-delay-long: 500ms;
+  --skra-ref-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
+  --skra-ref-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --skra-ref-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --skra-ref-opacity-disabled: 0.38;
+  --skra-ref-opacity-hover: 0.08;
+  --skra-ref-radius-1: 0.25rem;
+  --skra-ref-radius-2: 0.5rem;
+  --skra-ref-radius-4: 1rem;
+  --skra-ref-radius-8: 2rem;
+  --skra-ref-size-sm: 16rem;
+  --skra-ref-size-md: 20rem;
+  --skra-ref-size-lg: 24rem;
+  --skra-ref-size-container-sm: 20rem;
+  --skra-ref-size-container-md: 32rem;
+  --skra-ref-size-container-lg: 48rem;
+  --skra-ref-size-avatar-sm: 2rem;
+  --skra-ref-size-avatar-md: 2.5rem;
+  --skra-ref-size-avatar-lg: 3rem;
+  --skra-ref-size-status-dot-sm: 0.5rem;
+  --skra-ref-size-status-dot-md: 0.625rem;
+  --skra-ref-size-status-dot-lg: 0.75rem;
+  --skra-ref-spacing-1: 0.25rem;
+  --skra-ref-spacing-2: 0.5rem;
+  --skra-ref-spacing-3: 0.75rem;
+  --skra-ref-spacing-4: 1rem;
+  --skra-ref-spacing-5: 1.25rem;
+  --skra-ref-spacing-6: 1.5rem;
+  --skra-ref-spacing-8: 2rem;
+  --skra-ref-font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --skra-ref-font-family-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
+  --skra-ref-font-family-grotesk: 'Space Grotesk', system-ui, sans-serif;
+  --skra-ref-font-family-inter: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --skra-ref-font-family-inter-tight: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --skra-ref-font-family-plex-mono: 'IBM Plex Mono', ui-monospace, 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;
+  --skra-ref-font-weight-regular: 400;
+  --skra-ref-font-weight-medium: 500;
+  --skra-ref-font-weight-semibold: 600;
+  --skra-ref-font-weight-bold: 700;
+  --skra-ref-line-height-tight: 1.1;
+  --skra-ref-line-height-snug: 1.2;
+  --skra-ref-line-height-normal: 1.35;
+  --skra-ref-line-height-relaxed: 1.5;
+  --skra-ref-line-height-loose: 1.6;
+  --skra-sys-color-neutral-base: var(--skra-ref-color-neutral-500);
+  --skra-sys-color-neutral-contrast: var(--skra-ref-color-neutral-50);
+  --skra-sys-color-neutral-border: var(--skra-ref-color-neutral-600);
+  --skra-sys-color-neutral-soft: var(--skra-ref-color-neutral-100);
+  --skra-sys-color-neutral-strong: var(--skra-ref-color-neutral-800);
+  --skra-sys-color-neutral-ink: var(--skra-ref-color-neutral-700);
+  --skra-sys-color-primary-base: var(--skra-ref-color-primary-600);
+  --skra-sys-color-primary-contrast: var(--skra-ref-color-neutral-0);
+  --skra-sys-color-primary-border: var(--skra-ref-color-primary-600);
+  --skra-sys-color-primary-soft: var(--skra-ref-color-primary-50);
+  --skra-sys-color-primary-strong: var(--skra-ref-color-primary-700);
+  --skra-sys-color-primary-ink: var(--skra-ref-color-primary-600);
+  --skra-sys-color-secondary-base: var(--skra-ref-color-secondary-500);
+  --skra-sys-color-secondary-contrast: var(--skra-ref-color-neutral-0);
+  --skra-sys-color-secondary-border: var(--skra-ref-color-secondary-600);
+  --skra-sys-color-secondary-soft: var(--skra-ref-color-secondary-50);
+  --skra-sys-color-secondary-strong: var(--skra-ref-color-secondary-700);
+  --skra-sys-color-secondary-ink: var(--skra-ref-color-secondary-500);
+  --skra-sys-color-info-base: var(--skra-ref-color-info-600);
+  --skra-sys-color-info-contrast: var(--skra-ref-color-neutral-0);
+  --skra-sys-color-info-border: var(--skra-ref-color-info-600);
+  --skra-sys-color-info-soft: var(--skra-ref-color-info-50);
+  --skra-sys-color-info-strong: var(--skra-ref-color-info-700);
+  --skra-sys-color-info-ink: var(--skra-ref-color-info-600);
+  --skra-sys-color-success-base: var(--skra-ref-color-success-500);
+  --skra-sys-color-success-contrast: var(--skra-ref-color-neutral-0);
+  --skra-sys-color-success-border: var(--skra-ref-color-success-600);
+  --skra-sys-color-success-soft: var(--skra-ref-color-success-50);
+  --skra-sys-color-success-strong: var(--skra-ref-color-success-700);
+  --skra-sys-color-success-ink: var(--skra-ref-color-success-500);
+  --skra-sys-color-warning-base: var(--skra-ref-color-warning-500);
+  --skra-sys-color-warning-contrast: var(--skra-ref-color-warning-ink);
+  --skra-sys-color-warning-border: var(--skra-ref-color-warning-600);
+  --skra-sys-color-warning-soft: var(--skra-ref-color-warning-50);
+  --skra-sys-color-warning-strong: var(--skra-ref-color-warning-700);
+  --skra-sys-color-warning-ink: var(--skra-ref-color-warning-700);
+  --skra-sys-color-danger-base: var(--skra-ref-color-danger-500);
+  --skra-sys-color-danger-contrast: var(--skra-ref-color-neutral-0);
+  --skra-sys-color-danger-border: var(--skra-ref-color-danger-600);
+  --skra-sys-color-danger-soft: var(--skra-ref-color-danger-50);
+  --skra-sys-color-danger-strong: var(--skra-ref-color-danger-700);
+  --skra-sys-color-danger-ink: var(--skra-ref-color-danger-500);
+  --skra-sys-color-surface: var(--skra-ref-color-neutral-0);
+  --skra-sys-color-surface-raised: var(--skra-ref-color-neutral-100);
+  --skra-sys-color-surface-hover: var(--skra-ref-color-neutral-100);
+  --skra-sys-color-surface-disabled: var(--skra-ref-color-neutral-100);
+  --skra-sys-color-surface-muted: var(--skra-ref-color-neutral-300);
+  --skra-sys-color-on-surface: var(--skra-ref-color-neutral-1000);
+  --skra-sys-color-on-surface-strong: var(--skra-ref-color-neutral-1000);
+  --skra-sys-color-on-surface-subtle: var(--skra-ref-color-neutral-700);
+  --skra-sys-color-on-surface-disabled: var(--skra-ref-color-neutral-600);
+  --skra-sys-color-inverse-surface: var(--skra-ref-color-neutral-800);
+  --skra-sys-color-on-inverse-surface: var(--skra-ref-color-neutral-0);
+  --skra-sys-color-border: var(--skra-ref-color-neutral-1000);
+  --skra-sys-color-border-subtle: var(--skra-ref-color-neutral-600);
+  --skra-sys-color-hint: var(--skra-ref-color-neutral-600);
+  --skra-sys-color-focus-ring: var(--skra-ref-color-primary-500);
+  --skra-sys-color-link: var(--skra-ref-color-primary-600);
+  --skra-sys-color-link-hover: var(--skra-ref-color-primary-700);
+  --skra-sys-color-link-visited: var(--skra-ref-color-violet-500);
+  --skra-sys-color-scrim: var(--skra-ref-color-scrim);
+  --skra-sys-motion-duration-fast: var(--skra-ref-motion-duration-100);
+  --skra-sys-motion-duration-normal: var(--skra-ref-motion-duration-200);
+  --skra-sys-motion-duration-slow: var(--skra-ref-motion-duration-300);
+  --skra-sys-motion-delay-short: var(--skra-ref-motion-delay-short);
+  --skra-sys-motion-delay-long: var(--skra-ref-motion-delay-long);
+  --skra-sys-motion-easing-linear: var(--skra-ref-motion-easing-linear);
+  --skra-sys-motion-easing-standard: var(--skra-ref-motion-easing-standard);
+  --skra-sys-motion-easing-emphasized: var(--skra-ref-motion-easing-emphasized);
+  --skra-sys-radius-sm: var(--skra-ref-radius-1);
+  --skra-sys-radius-md: var(--skra-ref-radius-2);
+  --skra-sys-radius-lg: var(--skra-ref-radius-4);
+  --skra-sys-radius-full: var(--skra-ref-radius-8);
+  --skra-sys-size-container-sm: var(--skra-ref-size-container-sm);
+  --skra-sys-size-container-md: var(--skra-ref-size-container-md);
+  --skra-sys-size-container-lg: var(--skra-ref-size-container-lg);
+  --skra-sys-size-tooltip-max: var(--skra-ref-size-sm);
+  --skra-sys-size-avatar-sm: var(--skra-ref-size-avatar-sm);
+  --skra-sys-size-avatar-md: var(--skra-ref-size-avatar-md);
+  --skra-sys-size-avatar-lg: var(--skra-ref-size-avatar-lg);
+  --skra-sys-size-status-dot-sm: var(--skra-ref-size-status-dot-sm);
+  --skra-sys-size-status-dot-md: var(--skra-ref-size-status-dot-md);
+  --skra-sys-size-status-dot-lg: var(--skra-ref-size-status-dot-lg);
+  --skra-sys-size-icon-sm: var(--skra-ref-spacing-4);
+  --skra-sys-size-icon-md: var(--skra-ref-spacing-6);
+  --skra-sys-size-icon-lg: var(--skra-ref-spacing-8);
+  --skra-sys-size-grid-track-sm: var(--skra-ref-size-sm);
+  --skra-sys-size-grid-track-md: var(--skra-ref-size-md);
+  --skra-sys-size-grid-track-lg: var(--skra-ref-size-lg);
+  --skra-sys-font-family-display: var(--skra-ref-font-family-sans);
+  --skra-sys-font-family-body: var(--skra-ref-font-family-sans);
+  --skra-sys-font-family-code: var(--skra-ref-font-family-mono);
+  --skra-sys-typography-role-display-large-font-family: var(--skra-ref-font-family-sans);
+  --skra-sys-typography-role-display-large-font-size: var(--skra-ref-font-size-6xl);
+  --skra-sys-typography-role-display-large-font-weight: var(--skra-ref-font-weight-bold);
+  --skra-sys-typography-role-display-large-line-height: var(--skra-ref-line-height-tight);
+  --skra-sys-typography-role-display-medium-font-family: var(--skra-ref-font-family-sans);
+  --skra-sys-typography-role-display-medium-font-size: var(--skra-ref-font-size-5xl);
+  --skra-sys-typography-role-display-medium-font-weight: var(--skra-ref-font-weight-bold);
+  --skra-sys-typography-role-display-medium-line-height: var(--skra-ref-line-height-tight);
+  --skra-sys-typography-role-display-small-font-family: var(--skra-ref-font-family-sans);
+  --skra-sys-typography-role-display-small-font-size: var(--skra-ref-font-size-4xl);
+  --skra-sys-typography-role-display-small-font-weight: var(--skra-ref-font-weight-bold);
+  --skra-sys-typography-role-display-small-line-height: var(--skra-ref-line-height-tight);
+  --skra-sys-typography-role-headline-large-font-family: var(--skra-ref-font-family-sans);
+  --skra-sys-typography-role-headline-large-font-size: var(--skra-ref-font-size-3xl);
+  --skra-sys-typography-role-headline-large-font-weight: var(--skra-ref-font-weight-semibold);
+  --skra-sys-typography-role-headline-large-line-height: var(--skra-ref-line-height-snug);
+  --skra-sys-typography-role-headline-medium-font-family: var(--skra-ref-font-family-sans);
+  --skra-sys-typography-role-headline-medium-font-size: var(--skra-ref-font-size-2xl);
+  --skra-sys-typography-role-headline-medium-font-weight: var(--skra-ref-font-weight-semibold);
+  --skra-sys-typography-role-headline-medium-line-height: var(--skra-ref-line-height-snug);
+  --skra-sys-typography-role-headline-small-font-family: var(--skra-ref-font-family-sans);
+  --skra-sys-typography-role-headline-small-font-size: var(--skra-ref-font-size-xl);
+  --skra-sys-typography-role-headline-small-font-weight: var(--skra-ref-font-weight-semibold);
+  --skra-sys-typography-role-headline-small-line-height: var(--skra-ref-line-height-snug);
+  --skra-sys-typography-role-title-large-font-family: var(--skra-ref-font-family-sans);
+  --skra-sys-typography-role-title-large-font-size: var(--skra-ref-font-size-lg);
+  --skra-sys-typography-role-title-large-font-weight: var(--skra-ref-font-weight-semibold);
+  --skra-sys-typography-role-title-large-line-height: var(--skra-ref-line-height-normal);
+  --skra-sys-typography-role-title-medium-font-family: var(--skra-ref-font-family-sans);
+  --skra-sys-typography-role-title-medium-font-size: var(--skra-ref-font-size-md);
+  --skra-sys-typography-role-title-medium-font-weight: var(--skra-ref-font-weight-semibold);
+  --skra-sys-typography-role-title-medium-line-height: var(--skra-ref-line-height-normal);
+  --skra-sys-typography-role-title-small-font-family: var(--skra-ref-font-family-sans);
+  --skra-sys-typography-role-title-small-font-size: var(--skra-ref-font-size-sm);
+  --skra-sys-typography-role-title-small-font-weight: var(--skra-ref-font-weight-semibold);
+  --skra-sys-typography-role-title-small-line-height: var(--skra-ref-line-height-normal);
+  --skra-sys-typography-role-body-large-font-family: var(--skra-ref-font-family-sans);
+  --skra-sys-typography-role-body-large-font-size: var(--skra-ref-font-size-lg);
+  --skra-sys-typography-role-body-large-font-weight: var(--skra-ref-font-weight-regular);
+  --skra-sys-typography-role-body-large-line-height: var(--skra-ref-line-height-relaxed);
+  --skra-sys-typography-role-body-medium-font-family: var(--skra-ref-font-family-sans);
+  --skra-sys-typography-role-body-medium-font-size: var(--skra-ref-font-size-md);
+  --skra-sys-typography-role-body-medium-font-weight: var(--skra-ref-font-weight-regular);
+  --skra-sys-typography-role-body-medium-line-height: var(--skra-ref-line-height-relaxed);
+  --skra-sys-typography-role-body-small-font-family: var(--skra-ref-font-family-sans);
+  --skra-sys-typography-role-body-small-font-size: var(--skra-ref-font-size-sm);
+  --skra-sys-typography-role-body-small-font-weight: var(--skra-ref-font-weight-regular);
+  --skra-sys-typography-role-body-small-line-height: var(--skra-ref-line-height-relaxed);
+  --skra-sys-typography-role-label-large-font-family: var(--skra-ref-font-family-sans);
+  --skra-sys-typography-role-label-large-font-size: var(--skra-ref-font-size-md);
+  --skra-sys-typography-role-label-large-font-weight: var(--skra-ref-font-weight-medium);
+  --skra-sys-typography-role-label-large-line-height: var(--skra-ref-line-height-snug);
+  --skra-sys-typography-role-label-medium-font-family: var(--skra-ref-font-family-sans);
+  --skra-sys-typography-role-label-medium-font-size: var(--skra-ref-font-size-sm);
+  --skra-sys-typography-role-label-medium-font-weight: var(--skra-ref-font-weight-medium);
+  --skra-sys-typography-role-label-medium-line-height: var(--skra-ref-line-height-snug);
+  --skra-sys-typography-role-label-small-font-family: var(--skra-ref-font-family-sans);
+  --skra-sys-typography-role-label-small-font-size: var(--skra-ref-font-size-xs);
+  --skra-sys-typography-role-label-small-font-weight: var(--skra-ref-font-weight-medium);
+  --skra-sys-typography-role-label-small-line-height: var(--skra-ref-line-height-snug);
+  --skra-sys-spacing-1: var(--skra-ref-spacing-1);
+  --skra-sys-spacing-2: var(--skra-ref-spacing-2);
+  --skra-sys-spacing-3: var(--skra-ref-spacing-3);
+  --skra-sys-spacing-4: var(--skra-ref-spacing-4);
+  --skra-sys-spacing-5: var(--skra-ref-spacing-5);
+  --skra-sys-spacing-6: var(--skra-ref-spacing-6);
+  --skra-sys-spacing-8: var(--skra-ref-spacing-8);
+  --skra-sys-font-size-hint: var(--skra-ref-font-size-xs);
+  --skra-sys-font-size-small: var(--skra-ref-font-size-sm);
+  --skra-sys-font-size-body: var(--skra-ref-font-size-md);
+  --skra-sys-font-size-lg: var(--skra-ref-font-size-lg);
+  --skra-sys-font-size-label: var(--skra-ref-font-size-sm);
+  --skra-sys-opacity-disabled: var(--skra-ref-opacity-disabled);
+  --skra-sys-opacity-hover: var(--skra-ref-opacity-hover);
+}

package/skra/skin.config.json

@@ -0,0 +1,37 @@
+{
+  "name": "skra",
+  "displayName": "Skra Default",
+  "version": "1.0.0",
+  "publishable": true,
+  "defaultDensity": "normal",
+  "defaultColorScheme": "light",
+  "darkSchemeStrategy": "auto-oklch-with-overrides",
+  "visualProfile": {
+    "globalProfile": "normal",
+    "interactionStrength": "normal"
+  },
+  "fonts": [
+    {
+      "family": "body",
+      "name": "system",
+      "stack": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      "weights": [400, 500, 600, 700],
+      "requiresLoading": false
+    },
+    {
+      "family": "display",
+      "name": "system",
+      "stack": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      "weights": [600, 700],
+      "requiresLoading": false
+    },
+    {
+      "family": "code",
+      "name": "system",
+      "stack": "ui-monospace, 'Cascadia Code', 'Fira Code', monospace",
+      "weights": [400],
+      "requiresLoading": false
+    }
+  ],
+  "extends": null
+}

package/skra/utilities.scss

@@ -0,0 +1,38 @@
+// Forge Design System — global utilities layer (per ADR 033 §3.2)
+//
+// This file is the skin's static CSS surface — utilities that have no token
+// dependency and ship identically across skins. Style Dictionary does not
+// process it; `tools/build-tokens.mjs` copies it verbatim into the per-skin
+// `dist/tokens/[skin]/utilities.scss`.
+//
+// Add only utilities that:
+//   - are inherently static (no token references), AND
+//   - are mandated by a Forge ADR.
+
+// ─── Accessible Name Contract (ADR 033) ──────────────────────────────────────
+// Visually-hidden utility for Path 2 (visible text + hidden extension).
+// Canonical clip-path-based technique: kept in DOM, included in textContent,
+// reachable by screen readers, invisible to sighted users. Both forms are
+// equivalent — use whichever is ergonomic in the call site.
+.skra-sr-only,
+[skra-sr-only] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+// ─── Content-driven sizing for form controls (SkraAutoResizeDirective) ──────
+// Native CSS `field-sizing: content` lets <textarea> grow in block-size with
+// row count and <input> grow in inline-size with text width. The Angular
+// directive is a marker only — its compiled attribute selector is what these
+// rules hook into. Skin-agnostic, no token dependency.
+textarea[skraAutoResize],
+input[skraAutoResize] {
+  field-sizing: content;
+}