@skra/tokens 0.2.0 → 0.3.0

package/manifests/typography.json

@@ -1,169 +1,169 @@
-{
-  "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
-  "component": "typography",
-  "skraVersion": ">=1.0.0",
-  "axes": [
-    {
-      "token": "--skra-comp-typography-display-large-foreground",
-      "label": "Display Large — text colour",
-      "group": "Surface",
-      "type": "color",
-      "states": ["default"],
-      "constraint": { "oklch": true },
-      "overridable": ["overlay"]
-    },
-    {
-      "token": "--skra-comp-typography-display-medium-foreground",
-      "label": "Display Medium — text colour",
-      "group": "Surface",
-      "type": "color",
-      "states": ["default"],
-      "constraint": { "oklch": true },
-      "overridable": ["overlay"]
-    },
-    {
-      "token": "--skra-comp-typography-display-small-foreground",
-      "label": "Display Small — text colour",
-      "group": "Surface",
-      "type": "color",
-      "states": ["default"],
-      "constraint": { "oklch": true },
-      "overridable": ["overlay"]
-    },
-    {
-      "token": "--skra-comp-typography-headline-large-foreground",
-      "label": "Headline Large — text colour",
-      "group": "Surface",
-      "type": "color",
-      "states": ["default"],
-      "constraint": { "oklch": true },
-      "overridable": ["overlay"]
-    },
-    {
-      "token": "--skra-comp-typography-headline-medium-foreground",
-      "label": "Headline Medium — text colour",
-      "group": "Surface",
-      "type": "color",
-      "states": ["default"],
-      "constraint": { "oklch": true },
-      "overridable": ["overlay"]
-    },
-    {
-      "token": "--skra-comp-typography-headline-small-foreground",
-      "label": "Headline Small — text colour",
-      "group": "Surface",
-      "type": "color",
-      "states": ["default"],
-      "constraint": { "oklch": true },
-      "overridable": ["overlay"]
-    },
-    {
-      "token": "--skra-comp-typography-title-large-foreground",
-      "label": "Title Large — text colour",
-      "group": "Surface",
-      "type": "color",
-      "states": ["default"],
-      "constraint": { "oklch": true },
-      "overridable": ["overlay"]
-    },
-    {
-      "token": "--skra-comp-typography-title-medium-foreground",
-      "label": "Title Medium — text colour",
-      "group": "Surface",
-      "type": "color",
-      "states": ["default"],
-      "constraint": { "oklch": true },
-      "overridable": ["overlay"]
-    },
-    {
-      "token": "--skra-comp-typography-title-small-foreground",
-      "label": "Title Small — text colour",
-      "group": "Surface",
-      "type": "color",
-      "states": ["default"],
-      "constraint": { "oklch": true },
-      "overridable": ["overlay"]
-    },
-    {
-      "token": "--skra-comp-typography-body-large-foreground",
-      "label": "Body Large — text colour",
-      "group": "Surface",
-      "type": "color",
-      "states": ["default"],
-      "constraint": { "oklch": true },
-      "overridable": ["overlay", "subtree", "instance"]
-    },
-    {
-      "token": "--skra-comp-typography-body-medium-foreground",
-      "label": "Body Medium — text colour",
-      "group": "Surface",
-      "type": "color",
-      "states": ["default"],
-      "constraint": { "oklch": true },
-      "overridable": ["overlay", "subtree", "instance"]
-    },
-    {
-      "token": "--skra-comp-typography-body-small-foreground",
-      "label": "Body Small — text colour",
-      "group": "Surface",
-      "type": "color",
-      "states": ["default"],
-      "constraint": { "oklch": true },
-      "overridable": ["overlay", "subtree", "instance"]
-    },
-    {
-      "token": "--skra-comp-typography-label-large-foreground",
-      "label": "Label Large — text colour",
-      "group": "Surface",
-      "type": "color",
-      "states": ["default"],
-      "constraint": { "oklch": true },
-      "overridable": ["overlay", "subtree", "instance"]
-    },
-    {
-      "token": "--skra-comp-typography-label-medium-foreground",
-      "label": "Label Medium — text colour",
-      "group": "Surface",
-      "type": "color",
-      "states": ["default"],
-      "constraint": { "oklch": true },
-      "overridable": ["overlay", "subtree", "instance"]
-    },
-    {
-      "token": "--skra-comp-typography-label-small-foreground",
-      "label": "Label Small — text colour",
-      "group": "Surface",
-      "type": "color",
-      "states": ["default"],
-      "constraint": { "oklch": true },
-      "overridable": ["overlay", "subtree", "instance"]
-    },
-    {
-      "token": "--skra-comp-typography-foreground-error",
-      "label": "Severity Error — text colour",
-      "group": "Surface",
-      "type": "color",
-      "states": ["default"],
-      "constraint": { "oklch": true },
-      "overridable": ["overlay"]
-    },
-    {
-      "token": "--skra-comp-typography-foreground-warning",
-      "label": "Severity Warning — text colour",
-      "group": "Surface",
-      "type": "color",
-      "states": ["default"],
-      "constraint": { "oklch": true },
-      "overridable": ["overlay"]
-    },
-    {
-      "token": "--skra-comp-typography-foreground-success",
-      "label": "Severity Success — text colour",
-      "group": "Surface",
-      "type": "color",
-      "states": ["default"],
-      "constraint": { "oklch": true },
-      "overridable": ["overlay"]
-    }
-  ]
-}
+{
+  "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
+  "component": "typography",
+  "skraVersion": ">=1.0.0",
+  "axes": [
+    {
+      "token": "--skra-comp-typography-display-large-foreground",
+      "label": "Display Large — text colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-typography-display-medium-foreground",
+      "label": "Display Medium — text colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-typography-display-small-foreground",
+      "label": "Display Small — text colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-typography-headline-large-foreground",
+      "label": "Headline Large — text colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-typography-headline-medium-foreground",
+      "label": "Headline Medium — text colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-typography-headline-small-foreground",
+      "label": "Headline Small — text colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-typography-title-large-foreground",
+      "label": "Title Large — text colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-typography-title-medium-foreground",
+      "label": "Title Medium — text colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-typography-title-small-foreground",
+      "label": "Title Small — text colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-typography-body-large-foreground",
+      "label": "Body Large — text colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-typography-body-medium-foreground",
+      "label": "Body Medium — text colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-typography-body-small-foreground",
+      "label": "Body Small — text colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-typography-label-large-foreground",
+      "label": "Label Large — text colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-typography-label-medium-foreground",
+      "label": "Label Medium — text colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-typography-label-small-foreground",
+      "label": "Label Small — text colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-typography-foreground-error",
+      "label": "Severity Error — text colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-typography-foreground-warning",
+      "label": "Severity Warning — text colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-typography-foreground-success",
+      "label": "Severity Success — text colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay"]
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skra/tokens",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"

package/skra/_form-controls.scss

@@ -1,74 +1,74 @@
-// Forge Design System — residual form-control slice (ADR 040, supersedes ADR 038)
-//
-// Per ADR 040, every form atom (input / textarea / select / checkbox / radio /
-// fieldset / legend / label) is now a Component-on-its-native-host carrying its
-// own host-scoped CSS via Angular Emulated encapsulation (see each atom's
-// `*.scss` in `libs/ui/forms/`). The bulk of the old ADR 038 slice moved there.
-//
-// This file retains ONLY the rules that genuinely cannot be encapsulated —
-// rules that style content PROJECTED INTO one component from outside its
-// stylesheet. Under Emulated encapsulation a component's selectors are rewritten
-// to require that component's own `_ngcontent` attribute, but projected children
-// carry the CONSUMER's attribute, so the selector silently misses (the same
-// mechanism that created the ADR 038 slice in the first place — see ADR 020 v2.0).
-//
-// Two cross-encapsulation cases remain:
-//   1. <select skraSelect> → its projected <option> / <optgroup> children.
-//   2. <skra-field> → its projected <label> / <skra-hint> / <skra-error>
-//      when a sibling selection control (checkbox/radio) drives the layout.
-//
-// All values remain `var(--skra-comp-field-*)` / `var(--skra-sys-*)` references
-// (ADR 025); zero hardcoded literals; zero `margin`/layout beyond the wrap rule
-// intrinsic to the cross-projection case; zero `!important` / `::ng-deep` (ADR 024).
-//
-// Opt-in: import AFTER `_theme.scss` (the referenced variables must be defined
-// first). Mirrors `_baseline.scss` (ADR 036).
-
-// ─── 1. Select <option> / <optgroup> (projected into <select skraSelect>) ───
-// `select.scss` cannot reach these: an `option { … }` rule there compiles to
-// `option[_ngcontent-select-xxx]`, but the projected <option> carries the
-// consumer's `_ngcontent`. Cross-browser <option> styling is platform-limited
-// (Firefox full; Chromium partial; Safari very limited) — we ship the tokens,
-// effectiveness varies by engine.
-select[skraSelect] > option {
-  color: var(--skra-comp-field-select-option-foreground);
-  background-color: var(--skra-comp-field-select-option-background);
-}
-
-select[skraSelect] > optgroup {
-  color: var(--skra-comp-field-select-optgroup-foreground);
-  font-family: var(--skra-sys-typography-role-label-medium-font-family);
-  font-size: var(--skra-sys-typography-role-label-medium-font-size);
-  font-weight: var(--skra-sys-typography-role-label-medium-font-weight);
-}
-
-// ─── 2a. Touch target — label adjacent to a checkbox/radio inside Field ──────
-// WCAG 2.5.8 minimum 24×24 CSS px. The native box itself is smaller; clicking
-// the label fires the input, so expanding the label's clickable surface meets
-// the criterion without enlarging the visible box. `inline-flex` (not `flex`)
-// so the label sizes to its content in Field's flex-row selection layout — a
-// block-level `flex` would consume remaining inline space and visually shift
-// the text. This rule reaches Field's projected <label>, so it must live here.
-skra-field:has(> input[type='checkbox'][skraCheckbox]) > label[skraLabelFor],
-skra-field:has(> input[type='checkbox'][skraSwitch]) > label[skraLabelFor],
-skra-field:has(> input[type='radio'][skraRadio]) > label[skraLabelFor] {
-  min-block-size: var(--skra-comp-field-checkbox-touch-target);
-  display: inline-flex;
-  align-items: center;
-}
-
-// ─── 2b. Hint / Error wrap in selection-control flex layout ──────────────────
-// Field turns `:host` into `display: flex` (row) when it contains a
-// checkbox/radio (see field.component.scss). The rule that wraps hint/error onto
-// their own full-width line targets Field's PROJECTED <skra-hint>/<skra-error>,
-// so it cannot live in field.component.scss (Emulated encapsulation misses
-// projected children). `flex: 0 0 100%` forces the wrap regardless of sibling
-// sizing.
-skra-field:has(> input[type='checkbox'][skraCheckbox]) > skra-hint,
-skra-field:has(> input[type='checkbox'][skraCheckbox]) > skra-error,
-skra-field:has(> input[type='checkbox'][skraSwitch]) > skra-hint,
-skra-field:has(> input[type='checkbox'][skraSwitch]) > skra-error,
-skra-field:has(> input[type='radio'][skraRadio]) > skra-hint,
-skra-field:has(> input[type='radio'][skraRadio]) > skra-error {
-  flex: 0 0 100%;
-}
+// Forge Design System — residual form-control slice (ADR 040, supersedes ADR 038)
+//
+// Per ADR 040, every form atom (input / textarea / select / checkbox / radio /
+// fieldset / legend / label) is now a Component-on-its-native-host carrying its
+// own host-scoped CSS via Angular Emulated encapsulation (see each atom's
+// `*.scss` in `libs/ui/forms/`). The bulk of the old ADR 038 slice moved there.
+//
+// This file retains ONLY the rules that genuinely cannot be encapsulated —
+// rules that style content PROJECTED INTO one component from outside its
+// stylesheet. Under Emulated encapsulation a component's selectors are rewritten
+// to require that component's own `_ngcontent` attribute, but projected children
+// carry the CONSUMER's attribute, so the selector silently misses (the same
+// mechanism that created the ADR 038 slice in the first place — see ADR 020 v2.0).
+//
+// Two cross-encapsulation cases remain:
+//   1. <select skraSelect> → its projected <option> / <optgroup> children.
+//   2. <skra-field> → its projected <label> / <skra-hint> / <skra-error>
+//      when a sibling selection control (checkbox/radio) drives the layout.
+//
+// All values remain `var(--skra-comp-field-*)` / `var(--skra-sys-*)` references
+// (ADR 025); zero hardcoded literals; zero `margin`/layout beyond the wrap rule
+// intrinsic to the cross-projection case; zero `!important` / `::ng-deep` (ADR 024).
+//
+// Opt-in: import AFTER `_theme.scss` (the referenced variables must be defined
+// first). Mirrors `_baseline.scss` (ADR 036).
+
+// ─── 1. Select <option> / <optgroup> (projected into <select skraSelect>) ───
+// `select.scss` cannot reach these: an `option { … }` rule there compiles to
+// `option[_ngcontent-select-xxx]`, but the projected <option> carries the
+// consumer's `_ngcontent`. Cross-browser <option> styling is platform-limited
+// (Firefox full; Chromium partial; Safari very limited) — we ship the tokens,
+// effectiveness varies by engine.
+select[skraSelect] > option {
+  color: var(--skra-comp-field-select-option-foreground);
+  background-color: var(--skra-comp-field-select-option-background);
+}
+
+select[skraSelect] > optgroup {
+  color: var(--skra-comp-field-select-optgroup-foreground);
+  font-family: var(--skra-sys-typography-role-label-medium-font-family);
+  font-size: var(--skra-sys-typography-role-label-medium-font-size);
+  font-weight: var(--skra-sys-typography-role-label-medium-font-weight);
+}
+
+// ─── 2a. Touch target — label adjacent to a checkbox/radio inside Field ──────
+// WCAG 2.5.8 minimum 24×24 CSS px. The native box itself is smaller; clicking
+// the label fires the input, so expanding the label's clickable surface meets
+// the criterion without enlarging the visible box. `inline-flex` (not `flex`)
+// so the label sizes to its content in Field's flex-row selection layout — a
+// block-level `flex` would consume remaining inline space and visually shift
+// the text. This rule reaches Field's projected <label>, so it must live here.
+skra-field:has(> input[type='checkbox'][skraCheckbox]) > label[skraLabelFor],
+skra-field:has(> input[type='checkbox'][skraSwitch]) > label[skraLabelFor],
+skra-field:has(> input[type='radio'][skraRadio]) > label[skraLabelFor] {
+  min-block-size: var(--skra-comp-field-checkbox-touch-target);
+  display: inline-flex;
+  align-items: center;
+}
+
+// ─── 2b. Hint / Error wrap in selection-control flex layout ──────────────────
+// Field turns `:host` into `display: flex` (row) when it contains a
+// checkbox/radio (see field.component.scss). The rule that wraps hint/error onto
+// their own full-width line targets Field's PROJECTED <skra-hint>/<skra-error>,
+// so it cannot live in field.component.scss (Emulated encapsulation misses
+// projected children). `flex: 0 0 100%` forces the wrap regardless of sibling
+// sizing.
+skra-field:has(> input[type='checkbox'][skraCheckbox]) > skra-hint,
+skra-field:has(> input[type='checkbox'][skraCheckbox]) > skra-error,
+skra-field:has(> input[type='checkbox'][skraSwitch]) > skra-hint,
+skra-field:has(> input[type='checkbox'][skraSwitch]) > skra-error,
+skra-field:has(> input[type='radio'][skraRadio]) > skra-hint,
+skra-field:has(> input[type='radio'][skraRadio]) > skra-error {
+  flex: 0 0 100%;
+}

package/skra/_overlay.scss

@@ -1,42 +1,42 @@
-/* tokens/skins/skra/_overlay.scss — Tier-2 overlay top-layer slice (ADR 0044).
- * --------------------------------------------------------------------------------
- * Top-layer concerns that sit OUTSIDE component Emulated encapsulation and therefore
- * cannot live in a component's own host-scoped CSS:
- *   - the native `<dialog>` `::backdrop` scrim (a pseudo-element of the dialog), and
- *   - the pure-CSS scroll-lock while a Forge modal dialog is open (`html:has(...)`).
- *
- * Opt-in: import AFTER `_theme.scss` + `_comp.scss`. Selectors are strictly Forge-attached
- * natives (`dialog[skraDialog]`); every value is a `var(--skra-comp-dialog-*)` reference;
- * zero z-index (top-layer stacking is invocation-order), zero `!important`, zero `::ng-deep`.
- */
-
-dialog[skraDialog]::backdrop {
-  background: var(--skra-comp-dialog-backdrop);
-
-  opacity: 1;
-  transition:
-    opacity var(--skra-comp-dialog-motion-duration)
-      var(--skra-comp-dialog-motion-easing),
-    display var(--skra-comp-dialog-motion-duration) allow-discrete,
-    overlay var(--skra-comp-dialog-motion-duration) allow-discrete;
-
-  @starting-style {
-    opacity: 0;
-  }
-}
-
-/* Scroll-lock: freeze the page behind an open modal dialog. Pure CSS, no JS.
- * NOTE: `overflow: hidden` removes the scrollbar, which shifts content by the scrollbar width
- * on pages that have one. For SHIFT-FREE modals the consumer reserves the gutter GLOBALLY
- * (`html { scrollbar-gutter: stable }`) — a page-level layout choice the consumer owns, which
- * this scoped slice deliberately does NOT impose (doing it only-while-modal would itself shift,
- * just on open instead of close). The sandbox opts in; see apps/sandbox/src/styles.scss. */
-html:has(dialog[skraDialog]:modal) {
-  overflow: hidden;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  dialog[skraDialog]::backdrop {
-    transition-duration: 0ms;
-  }
-}
+/* tokens/skins/skra/_overlay.scss — Tier-2 overlay top-layer slice (ADR 0044).
+ * --------------------------------------------------------------------------------
+ * Top-layer concerns that sit OUTSIDE component Emulated encapsulation and therefore
+ * cannot live in a component's own host-scoped CSS:
+ *   - the native `<dialog>` `::backdrop` scrim (a pseudo-element of the dialog), and
+ *   - the pure-CSS scroll-lock while a Forge modal dialog is open (`html:has(...)`).
+ *
+ * Opt-in: import AFTER `_theme.scss` + `_comp.scss`. Selectors are strictly Forge-attached
+ * natives (`dialog[skraDialog]`); every value is a `var(--skra-comp-dialog-*)` reference;
+ * zero z-index (top-layer stacking is invocation-order), zero `!important`, zero `::ng-deep`.
+ */
+
+dialog[skraDialog]::backdrop {
+  background: var(--skra-comp-dialog-backdrop);
+
+  opacity: 1;
+  transition:
+    opacity var(--skra-comp-dialog-motion-duration)
+      var(--skra-comp-dialog-motion-easing),
+    display var(--skra-comp-dialog-motion-duration) allow-discrete,
+    overlay var(--skra-comp-dialog-motion-duration) allow-discrete;
+
+  @starting-style {
+    opacity: 0;
+  }
+}
+
+/* Scroll-lock: freeze the page behind an open modal dialog. Pure CSS, no JS.
+ * NOTE: `overflow: hidden` removes the scrollbar, which shifts content by the scrollbar width
+ * on pages that have one. For SHIFT-FREE modals the consumer reserves the gutter GLOBALLY
+ * (`html { scrollbar-gutter: stable }`) — a page-level layout choice the consumer owns, which
+ * this scoped slice deliberately does NOT impose (doing it only-while-modal would itself shift,
+ * just on open instead of close). The sandbox opts in; see apps/sandbox/src/styles.scss. */
+html:has(dialog[skraDialog]:modal) {
+  overflow: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  dialog[skraDialog]::backdrop {
+    transition-duration: 0ms;
+  }
+}

package/skra/_theme.dark.scss

@@ -149,6 +149,7 @@
   --skra-sys-color-link: oklch(67.0% 0.135 250);
   --skra-sys-color-link-hover: oklch(58.0% 0.135 250);
   --skra-sys-color-link-visited: oklch(60.0% 0.162 295);
+  --skra-sys-color-shadow-ink: oklch(0% 0 0);
   --skra-sys-color-surface-active: oklch(25.5% 0 0);
   --skra-sys-color-surface-raised-hover: oklch(26.0% 0 0);
   --skra-sys-color-surface-raised-active: oklch(29.5% 0 0);
@@ -173,6 +174,8 @@
   --skra-sys-color-focus-ring-hover: oklch(68.0% 0.135 250);
   --skra-sys-color-focus-ring-active: oklch(64.5% 0.135 250);
   --skra-sys-color-link-active: oklch(56.5% 0.135 250);
+  --skra-sys-color-shadow-ink-hover: oklch(7.0% 0 0);
+  --skra-sys-color-shadow-ink-active: oklch(10.5% 0 0);
   --skra-comp-accordion-foreground-hover: oklch(85.0% 0 0);
   --skra-comp-accordion-foreground-active: oklch(81.5% 0 0);
   --skra-comp-accordion-focus-ring-color-hover: oklch(68.0% 0.135 250);