@skra/tokens 0.2.0 → 0.3.0

package/skra/_theme.scss

@@ -111,15 +111,17 @@
   --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-color-shadow-ink-hover: oklch(7.0% 0 0);
+  --skra-sys-color-shadow-ink-active: oklch(10.5% 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-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-shadow-sm: 0 1px 2px color-mix(in oklab, var(--skra-sys-color-shadow-ink) 10%, transparent);
+  --skra-sys-shadow-md: 0 2px 8px color-mix(in oklab, var(--skra-sys-color-shadow-ink) 12%, transparent);
+  --skra-sys-shadow-lg: 0 4px 16px color-mix(in oklab, var(--skra-sys-color-shadow-ink) 15%, transparent);
+  --skra-sys-shadow-xl: 0 8px 32px color-mix(in oklab, var(--skra-sys-color-shadow-ink) 20%, transparent);
   --skra-sys-size-interactive-sm: 2rem;
   --skra-sys-size-interactive-md: 2.5rem;
   --skra-sys-size-interactive-lg: 3rem;
@@ -129,12 +131,12 @@
   --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-title-large-letter-spacing: 0em;
+  --skra-sys-typography-role-title-medium-letter-spacing: 0em;
+  --skra-sys-typography-role-title-small-letter-spacing: 0em;
+  --skra-sys-typography-role-body-large-letter-spacing: 0em;
+  --skra-sys-typography-role-body-medium-letter-spacing: 0em;
+  --skra-sys-typography-role-body-small-letter-spacing: 0em;
   --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;
@@ -220,6 +222,54 @@
   --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-color-magenta-50: oklch(95% 0.035 348);
+  --skra-ref-color-magenta-300: oklch(78% 0.16 348);
+  --skra-ref-color-magenta-400: oklch(70% 0.2 348);
+  --skra-ref-color-magenta-500: oklch(62% 0.22 348);
+  --skra-ref-color-magenta-600: oklch(52% 0.2 348);
+  --skra-ref-color-magenta-700: oklch(43% 0.16 348);
+  --skra-ref-color-magenta-soft-dark: oklch(28% 0.08 348);
+  --skra-ref-color-magenta-bright: oklch(74% 0.19 348);
+  --skra-ref-color-stone-0: oklch(100% 0 0);
+  --skra-ref-color-stone-50: oklch(98% 0.006 85);
+  --skra-ref-color-stone-100: oklch(95.5% 0.008 85);
+  --skra-ref-color-stone-200: oklch(93.5% 0.01 85);
+  --skra-ref-color-stone-300: oklch(88% 0.01 85);
+  --skra-ref-color-stone-500: oklch(58% 0.012 85);
+  --skra-ref-color-stone-600: oklch(50% 0.012 85);
+  --skra-ref-color-stone-700: oklch(40% 0.014 85);
+  --skra-ref-color-stone-900: oklch(24% 0.012 85);
+  --skra-ref-color-sky-50: oklch(96% 0.025 235);
+  --skra-ref-color-sky-300: oklch(84% 0.075 235);
+  --skra-ref-color-sky-500: oklch(70% 0.1 235);
+  --skra-ref-color-sky-700: oklch(45% 0.11 235);
+  --skra-ref-color-sky-900: oklch(30% 0.08 235);
+  --skra-ref-color-lilac-50: oklch(96% 0.022 300);
+  --skra-ref-color-lilac-300: oklch(84% 0.07 300);
+  --skra-ref-color-lilac-500: oklch(70% 0.1 300);
+  --skra-ref-color-lilac-700: oklch(45% 0.12 300);
+  --skra-ref-color-lilac-900: oklch(30% 0.09 300);
+  --skra-ref-color-mist-50: oklch(96% 0.025 215);
+  --skra-ref-color-mist-300: oklch(85% 0.065 215);
+  --skra-ref-color-mist-500: oklch(72% 0.085 215);
+  --skra-ref-color-mist-700: oklch(45% 0.09 215);
+  --skra-ref-color-sage-50: oklch(96% 0.025 150);
+  --skra-ref-color-sage-300: oklch(85% 0.07 150);
+  --skra-ref-color-sage-500: oklch(72% 0.09 150);
+  --skra-ref-color-sage-700: oklch(45% 0.09 150);
+  --skra-ref-color-sage-900: oklch(30% 0.07 150);
+  --skra-ref-color-sand-50: oklch(96% 0.03 85);
+  --skra-ref-color-sand-300: oklch(88% 0.075 85);
+  --skra-ref-color-sand-500: oklch(80% 0.1 85);
+  --skra-ref-color-sand-700: oklch(45% 0.08 85);
+  --skra-ref-color-sand-900: oklch(30% 0.06 85);
+  --skra-ref-color-petal-50: oklch(96% 0.025 25);
+  --skra-ref-color-petal-300: oklch(85% 0.07 25);
+  --skra-ref-color-petal-500: oklch(72% 0.12 25);
+  --skra-ref-color-petal-700: oklch(45% 0.15 25);
+  --skra-ref-color-petal-900: oklch(30% 0.1 25);
+  --skra-ref-color-glow-cyan: oklch(80% 0.14 215 / 0.5);
+  --skra-ref-color-glow-cyan-strong: oklch(86% 0.13 212 / 0.75);
   --skra-ref-font-size-2xs: 0.6875rem;
   --skra-ref-font-size-xs: 0.75rem;
   --skra-ref-font-size-sm: 0.875rem;
@@ -340,6 +390,7 @@
   --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-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-200);
   --skra-sys-motion-duration-slow: var(--skra-ref-motion-duration-300);

package/skra/skin.config.json

@@ -1,37 +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
-}
+{
+  "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

@@ -1,38 +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;
-}
+// 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;
+}