@skra/tokens 0.2.0

package/brutal/_theme.scss

@@ -0,0 +1,451 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --skra-sys-color-neutral-base-hover: oklch(37.0% 0 0);
+  --skra-sys-color-neutral-base-active: oklch(43.0% 0 0);
+  --skra-sys-color-neutral-contrast-hover: oklch(88.0% 0 0);
+  --skra-sys-color-neutral-contrast-active: oklch(82.0% 0 0);
+  --skra-sys-color-neutral-border-hover: oklch(12.0% 0 0);
+  --skra-sys-color-neutral-border-active: oklch(18.0% 0 0);
+  --skra-sys-color-neutral-soft-hover: oklch(83.0% 0 0);
+  --skra-sys-color-neutral-soft-active: oklch(77.0% 0 0);
+  --skra-sys-color-neutral-strong-hover: oklch(12.0% 0 0);
+  --skra-sys-color-neutral-strong-active: oklch(18.0% 0 0);
+  --skra-sys-color-neutral-ink-hover: oklch(37.0% 0 0);
+  --skra-sys-color-neutral-ink-active: oklch(43.0% 0 0);
+  --skra-sys-color-primary-base-hover: oklch(73.0% 0.17 98);
+  --skra-sys-color-primary-base-active: oklch(67.0% 0.17 98);
+  --skra-sys-color-primary-contrast-hover: oklch(12.0% 0 0);
+  --skra-sys-color-primary-contrast-active: oklch(18.0% 0 0);
+  --skra-sys-color-primary-border-hover: oklch(12.0% 0 0);
+  --skra-sys-color-primary-border-active: oklch(18.0% 0 0);
+  --skra-sys-color-primary-soft-hover: oklch(84.0% 0.06 100);
+  --skra-sys-color-primary-soft-active: oklch(78.0% 0.06 100);
+  --skra-sys-color-primary-strong-hover: oklch(62.0% 0.11 98);
+  --skra-sys-color-primary-strong-active: oklch(68.0% 0.11 98);
+  --skra-sys-color-primary-ink-hover: oklch(62.0% 0.11 98);
+  --skra-sys-color-primary-ink-active: oklch(68.0% 0.11 98);
+  --skra-sys-color-secondary-base-hover: oklch(57.0% 0.04 250);
+  --skra-sys-color-secondary-base-active: oklch(63.0% 0.04 250);
+  --skra-sys-color-secondary-contrast-hover: oklch(88.0% 0 0);
+  --skra-sys-color-secondary-contrast-active: oklch(82.0% 0 0);
+  --skra-sys-color-secondary-border-hover: oklch(12.0% 0 0);
+  --skra-sys-color-secondary-border-active: oklch(18.0% 0 0);
+  --skra-sys-color-secondary-soft-hover: oklch(82.0% 0.02 250);
+  --skra-sys-color-secondary-soft-active: oklch(76.0% 0.02 250);
+  --skra-sys-color-secondary-strong-hover: oklch(42.0% 0.04 250);
+  --skra-sys-color-secondary-strong-active: oklch(48.0% 0.04 250);
+  --skra-sys-color-secondary-ink-hover: oklch(57.0% 0.04 250);
+  --skra-sys-color-secondary-ink-active: oklch(63.0% 0.04 250);
+  --skra-sys-color-info-base-hover: oklch(62.0% 0.12 220);
+  --skra-sys-color-info-base-active: oklch(68.0% 0.12 220);
+  --skra-sys-color-info-contrast-hover: oklch(88.0% 0 0);
+  --skra-sys-color-info-contrast-active: oklch(82.0% 0 0);
+  --skra-sys-color-info-border-hover: oklch(12.0% 0 0);
+  --skra-sys-color-info-border-active: oklch(18.0% 0 0);
+  --skra-sys-color-info-soft-hover: oklch(82.0% 0.04 220);
+  --skra-sys-color-info-soft-active: oklch(76.0% 0.04 220);
+  --skra-sys-color-info-strong-hover: oklch(47.0% 0.12 220);
+  --skra-sys-color-info-strong-active: oklch(53.0% 0.12 220);
+  --skra-sys-color-info-ink-hover: oklch(62.0% 0.12 220);
+  --skra-sys-color-info-ink-active: oklch(68.0% 0.12 220);
+  --skra-sys-color-success-base-hover: oklch(60.0% 0.15 145);
+  --skra-sys-color-success-base-active: oklch(66.0% 0.15 145);
+  --skra-sys-color-success-contrast-hover: oklch(88.0% 0 0);
+  --skra-sys-color-success-contrast-active: oklch(82.0% 0 0);
+  --skra-sys-color-success-border-hover: oklch(12.0% 0 0);
+  --skra-sys-color-success-border-active: oklch(18.0% 0 0);
+  --skra-sys-color-success-soft-hover: oklch(82.0% 0.05 145);
+  --skra-sys-color-success-soft-active: oklch(76.0% 0.05 145);
+  --skra-sys-color-success-strong-hover: oklch(44.0% 0.13 145);
+  --skra-sys-color-success-strong-active: oklch(50.0% 0.13 145);
+  --skra-sys-color-success-ink-hover: oklch(60.0% 0.15 145);
+  --skra-sys-color-success-ink-active: oklch(66.0% 0.15 145);
+  --skra-sys-color-warning-base-hover: oklch(58.0% 0.15 80);
+  --skra-sys-color-warning-base-active: oklch(52.0% 0.15 80);
+  --skra-sys-color-warning-contrast-hover: oklch(30.0% 0.05 80);
+  --skra-sys-color-warning-contrast-active: oklch(36.0% 0.05 80);
+  --skra-sys-color-warning-border-hover: oklch(12.0% 0 0);
+  --skra-sys-color-warning-border-active: oklch(18.0% 0 0);
+  --skra-sys-color-warning-soft-hover: oklch(83.0% 0.05 80);
+  --skra-sys-color-warning-soft-active: oklch(77.0% 0.05 80);
+  --skra-sys-color-warning-strong-hover: oklch(50.0% 0.12 80);
+  --skra-sys-color-warning-strong-active: oklch(56.0% 0.12 80);
+  --skra-sys-color-warning-ink-hover: oklch(50.0% 0.12 80);
+  --skra-sys-color-warning-ink-active: oklch(56.0% 0.12 80);
+  --skra-sys-color-danger-base-hover: oklch(60.0% 0.2 25);
+  --skra-sys-color-danger-base-active: oklch(66.0% 0.2 25);
+  --skra-sys-color-danger-contrast-hover: oklch(88.0% 0 0);
+  --skra-sys-color-danger-contrast-active: oklch(82.0% 0 0);
+  --skra-sys-color-danger-border-hover: oklch(12.0% 0 0);
+  --skra-sys-color-danger-border-active: oklch(18.0% 0 0);
+  --skra-sys-color-danger-soft-hover: oklch(82.0% 0.04 25);
+  --skra-sys-color-danger-soft-active: oklch(76.0% 0.04 25);
+  --skra-sys-color-danger-strong-hover: oklch(44.0% 0.16 25);
+  --skra-sys-color-danger-strong-active: oklch(50.0% 0.16 25);
+  --skra-sys-color-danger-ink-hover: oklch(60.0% 0.2 25);
+  --skra-sys-color-danger-ink-active: oklch(66.0% 0.2 25);
+  --skra-sys-color-surface-active: oklch(79.0% 0.015 95);
+  --skra-sys-color-surface-raised-hover: oklch(81.0% 0.025 95);
+  --skra-sys-color-surface-raised-active: oklch(75.0% 0.025 95);
+  --skra-sys-color-surface-muted-hover: oklch(74.0% 0 0);
+  --skra-sys-color-surface-muted-active: oklch(68.0% 0 0);
+  --skra-sys-color-on-surface-hover: oklch(12.0% 0 0);
+  --skra-sys-color-on-surface-active: oklch(18.0% 0 0);
+  --skra-sys-color-on-surface-strong-hover: oklch(12.0% 0 0);
+  --skra-sys-color-on-surface-strong-active: oklch(18.0% 0 0);
+  --skra-sys-color-on-surface-subtle-hover: oklch(47.0% 0 0);
+  --skra-sys-color-on-surface-subtle-active: oklch(53.0% 0 0);
+  --skra-sys-color-inverse-surface-hover: oklch(12.0% 0 0);
+  --skra-sys-color-inverse-surface-active: oklch(18.0% 0 0);
+  --skra-sys-color-on-inverse-surface-hover: oklch(88.0% 0 0);
+  --skra-sys-color-on-inverse-surface-active: oklch(82.0% 0 0);
+  --skra-sys-color-border-hover: oklch(12.0% 0 0);
+  --skra-sys-color-border-active: oklch(18.0% 0 0);
+  --skra-sys-color-border-subtle-hover: oklch(37.0% 0 0);
+  --skra-sys-color-border-subtle-active: oklch(43.0% 0 0);
+  --skra-sys-color-hint-hover: oklch(47.0% 0 0);
+  --skra-sys-color-hint-active: oklch(53.0% 0 0);
+  --skra-sys-color-focus-ring-hover: oklch(57.0% 0.18 295);
+  --skra-sys-color-focus-ring-active: oklch(63.0% 0.18 295);
+  --skra-sys-color-link-active: oklch(18.0% 0 0);
+  --skra-sys-color-shadow-ink-hover: oklch(12.0% 0 0);
+  --skra-sys-color-shadow-ink-active: oklch(18.0% 0 0);
+  --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-radius-sm: 0;
+  --skra-sys-radius-md: 0;
+  --skra-sys-radius-lg: 0;
+  --skra-sys-radius-full: 0;
+  --skra-sys-shadow-none: none;
+  --skra-sys-shadow-sm: 2px 2px 0 var(--skra-sys-color-shadow-ink);
+  --skra-sys-shadow-md: 4px 4px 0 var(--skra-sys-color-shadow-ink);
+  --skra-sys-shadow-lg: 6px 6px 0 var(--skra-sys-color-shadow-ink);
+  --skra-sys-shadow-xl: 10px 10px 0 var(--skra-sys-color-shadow-ink);
+  --skra-sys-size-interactive-sm: 1.75rem;
+  --skra-sys-size-interactive-md: 2.25rem;
+  --skra-sys-size-interactive-lg: 2.75rem;
+  --skra-sys-typography-role-display-large-letter-spacing: 0;
+  --skra-sys-typography-role-display-medium-letter-spacing: 0;
+  --skra-sys-typography-role-display-small-letter-spacing: 0;
+  --skra-sys-typography-role-headline-large-letter-spacing: 0;
+  --skra-sys-typography-role-headline-medium-letter-spacing: 0;
+  --skra-sys-typography-role-headline-small-letter-spacing: 0;
+  --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.05em;
+  --skra-sys-typography-role-label-medium-letter-spacing: 0.05em;
+  --skra-sys-typography-role-label-small-letter-spacing: 0.05em;
+  --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-800);
+  --skra-sys-color-neutral-contrast: var(--skra-ref-color-neutral-0);
+  --skra-sys-color-neutral-border: var(--skra-ref-color-neutral-1000);
+  --skra-sys-color-neutral-soft: var(--skra-ref-color-neutral-100);
+  --skra-sys-color-neutral-strong: var(--skra-ref-color-neutral-1000);
+  --skra-sys-color-neutral-ink: var(--skra-ref-color-neutral-800);
+  --skra-sys-color-primary-base: var(--skra-ref-color-acid-500);
+  --skra-sys-color-primary-contrast: var(--skra-ref-color-neutral-1000);
+  --skra-sys-color-primary-border: var(--skra-ref-color-neutral-1000);
+  --skra-sys-color-primary-soft: var(--skra-ref-color-acid-50);
+  --skra-sys-color-primary-strong: var(--skra-ref-color-acid-700);
+  --skra-sys-color-primary-ink: var(--skra-ref-color-acid-700);
+  --skra-sys-color-secondary-base: var(--skra-ref-color-secondary-600);
+  --skra-sys-color-secondary-contrast: var(--skra-ref-color-neutral-0);
+  --skra-sys-color-secondary-border: var(--skra-ref-color-neutral-1000);
+  --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-600);
+  --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-neutral-1000);
+  --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-600);
+  --skra-sys-color-success-contrast: var(--skra-ref-color-neutral-0);
+  --skra-sys-color-success-border: var(--skra-ref-color-neutral-1000);
+  --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-600);
+  --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-neutral-1000);
+  --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-600);
+  --skra-sys-color-danger-contrast: var(--skra-ref-color-neutral-0);
+  --skra-sys-color-danger-border: var(--skra-ref-color-neutral-1000);
+  --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-600);
+  --skra-sys-color-surface: var(--skra-ref-color-cream-50);
+  --skra-sys-color-surface-raised: var(--skra-ref-color-cream-100);
+  --skra-sys-color-surface-hover: var(--skra-ref-color-cream-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-1000);
+  --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-800);
+  --skra-sys-color-hint: var(--skra-ref-color-neutral-700);
+  --skra-sys-color-focus-ring: var(--skra-ref-color-violet-500);
+  --skra-sys-color-link: var(--skra-ref-color-neutral-1000);
+  --skra-sys-color-link-hover: var(--skra-ref-color-acid-700);
+  --skra-sys-color-link-visited: var(--skra-ref-color-violet-500);
+  --skra-sys-color-scrim: var(--skra-ref-color-scrim);
+  --skra-sys-color-shadow-ink: var(--skra-ref-color-neutral-1000);
+  --skra-sys-motion-duration-fast: var(--skra-ref-motion-duration-100);
+  --skra-sys-motion-duration-normal: var(--skra-ref-motion-duration-100);
+  --skra-sys-motion-duration-slow: var(--skra-ref-motion-duration-200);
+  --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-linear);
+  --skra-sys-motion-easing-emphasized: var(--skra-ref-motion-easing-linear);
+  --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-3);
+  --skra-sys-size-icon-md: var(--skra-ref-spacing-4);
+  --skra-sys-size-icon-lg: var(--skra-ref-spacing-6);
+  --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-grotesk);
+  --skra-sys-font-family-body: var(--skra-ref-font-family-grotesk);
+  --skra-sys-font-family-code: var(--skra-ref-font-family-mono);
+  --skra-sys-typography-role-display-large-font-family: var(--skra-ref-font-family-grotesk);
+  --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-grotesk);
+  --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-grotesk);
+  --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-grotesk);
+  --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-bold);
+  --skra-sys-typography-role-headline-large-line-height: var(--skra-ref-line-height-tight);
+  --skra-sys-typography-role-headline-medium-font-family: var(--skra-ref-font-family-grotesk);
+  --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-bold);
+  --skra-sys-typography-role-headline-medium-line-height: var(--skra-ref-line-height-tight);
+  --skra-sys-typography-role-headline-small-font-family: var(--skra-ref-font-family-grotesk);
+  --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-bold);
+  --skra-sys-typography-role-headline-small-line-height: var(--skra-ref-line-height-tight);
+  --skra-sys-typography-role-title-large-font-family: var(--skra-ref-font-family-grotesk);
+  --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-bold);
+  --skra-sys-typography-role-title-large-line-height: var(--skra-ref-line-height-snug);
+  --skra-sys-typography-role-title-medium-font-family: var(--skra-ref-font-family-grotesk);
+  --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-bold);
+  --skra-sys-typography-role-title-medium-line-height: var(--skra-ref-line-height-snug);
+  --skra-sys-typography-role-title-small-font-family: var(--skra-ref-font-family-grotesk);
+  --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-bold);
+  --skra-sys-typography-role-title-small-line-height: var(--skra-ref-line-height-snug);
+  --skra-sys-typography-role-body-large-font-family: var(--skra-ref-font-family-grotesk);
+  --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-normal);
+  --skra-sys-typography-role-body-medium-font-family: var(--skra-ref-font-family-grotesk);
+  --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-normal);
+  --skra-sys-typography-role-body-small-font-family: var(--skra-ref-font-family-grotesk);
+  --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-normal);
+  --skra-sys-typography-role-label-large-font-family: var(--skra-ref-font-family-grotesk);
+  --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-semibold);
+  --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-grotesk);
+  --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-semibold);
+  --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-grotesk);
+  --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-semibold);
+  --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-1);
+  --skra-sys-spacing-3: var(--skra-ref-spacing-2);
+  --skra-sys-spacing-4: var(--skra-ref-spacing-3);
+  --skra-sys-spacing-5: var(--skra-ref-spacing-4);
+  --skra-sys-spacing-6: var(--skra-ref-spacing-4);
+  --skra-sys-spacing-8: var(--skra-ref-spacing-6);
+  --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/brutal/skin.config.json

@@ -0,0 +1,40 @@
+{
+  "name": "brutal",
+  "displayName": "Skra Brutal",
+  "version": "0.1.0",
+  "publishable": true,
+  "defaultDensity": "compact",
+  "defaultColorScheme": "light",
+  "darkSchemeStrategy": "auto-oklch-with-overrides",
+  "runtimeScoped": true,
+  "visualProfile": {
+    "globalProfile": "intensive",
+    "interactionStrength": "intensive"
+  },
+  "fonts": [
+    {
+      "family": "body",
+      "name": "Space Grotesk",
+      "stack": "'Space Grotesk', system-ui, sans-serif",
+      "weights": [400, 500, 600, 700],
+      "requiresLoading": true,
+      "source": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400..700&display=swap"
+    },
+    {
+      "family": "display",
+      "name": "Space Grotesk",
+      "stack": "'Space Grotesk', system-ui, sans-serif",
+      "weights": [600, 700],
+      "requiresLoading": true,
+      "source": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400..700&display=swap"
+    },
+    {
+      "family": "code",
+      "name": "system",
+      "stack": "ui-monospace, 'Cascadia Code', 'Fira Code', monospace",
+      "weights": [400],
+      "requiresLoading": false
+    }
+  ],
+  "extends": null
+}

package/manifests/accordion.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
+  "component": "accordion",
+  "skraVersion": ">=1.0.0",
+  "axes": [
+    {
+      "token": "--skra-comp-accordion-indicator-color",
+      "label": "Accordion — header expand/collapse chevron colour",
+      "group": "State",
+      "type": "color",
+      "states": ["default", "expanded"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-accordion-header-foreground-expanded",
+      "label": "Accordion — expanded header label colour",
+      "group": "State",
+      "type": "color",
+      "states": ["expanded"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-accordion-header-background-hover",
+      "label": "Accordion — header hover background tint",
+      "group": "State",
+      "type": "color",
+      "states": ["hover"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-accordion-item-background-expanded",
+      "label": "Accordion — open item box background",
+      "group": "State",
+      "type": "color",
+      "states": ["expanded"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-accordion-root-border-color",
+      "label": "Accordion — group outer border colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree"]
+    }
+  ]
+}

package/manifests/alert.json

@@ -0,0 +1,107 @@
+{
+  "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
+  "component": "alert",
+  "skraVersion": ">=1.0.0",
+  "axes": [
+    {
+      "token": "--skra-comp-alert-background",
+      "label": "Alert — background colour (resting)",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "scopedBy": ["intent", "emphasis"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-alert-foreground",
+      "label": "Alert — text/icon colour (resting)",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "scopedBy": ["intent", "emphasis"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-alert-border-color",
+      "label": "Alert — border colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "scopedBy": ["intent", "emphasis"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-alert-radius",
+      "label": "Alert — corner radius",
+      "group": "Surface",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0, "max": 2 },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-alert-shadow",
+      "label": "Alert — resting shadow",
+      "group": "Surface",
+      "type": "shadow",
+      "states": ["default"],
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-alert-focus-ring-color",
+      "label": "Dismiss control — focus ring colour on :focus-visible",
+      "group": "State",
+      "type": "color",
+      "states": ["focus-visible"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-alert-focus-ring-width",
+      "label": "Dismiss control — focus ring thickness on :focus-visible",
+      "group": "State",
+      "type": "dimension",
+      "states": ["focus-visible"],
+      "constraint": { "unit": "rem", "min": 0.0625, "max": 0.25 },
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-alert-icon-gap",
+      "label": "Alert — gap between icon, message, and dismiss control",
+      "group": "Spacing",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0, "max": 2 },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-alert-title-gap",
+      "label": "Alert — gap between the title and the message",
+      "group": "Spacing",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0, "max": 2 },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-alert-motion-duration",
+      "label": "Dismiss control — transition duration",
+      "group": "Motion",
+      "type": "duration",
+      "states": ["default"],
+      "constraint": { "unit": "ms" },
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-alert-motion-easing",
+      "label": "Dismiss control — transition easing curve",
+      "group": "Motion",
+      "type": "cubic-bezier",
+      "states": ["default"],
+      "overridable": ["overlay"]
+    }
+  ]
+}