@skra/tokens 0.2.0

package/manifests/typography.json

@@ -0,0 +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"]
+    }
+  ]
+}

package/overlays/brand-jade.scss

@@ -0,0 +1,9 @@
+/* dist/tokens/overlays/brand-jade.scss — auto-generated by build-tokens.mjs (ADR 029)
+ * Skin Overlay Preset. baseSkin: skra. Import AFTER the base skin's
+ * _theme.scss, then scope with <div data-skra-overlay="brand-jade">…</div>.
+ */
+
+[data-skra-overlay="brand-jade"] {
+  --skra-comp-button-background-primary-high: oklch(0.72 0.15 162);
+  --skra-comp-button-foreground-primary-high: oklch(0.16 0.03 162);
+}

package/overlays/round-corners.scss

@@ -0,0 +1,8 @@
+/* dist/tokens/overlays/round-corners.scss — auto-generated by build-tokens.mjs (ADR 029)
+ * Skin Overlay Preset. baseSkin: skra. Import AFTER the base skin's
+ * _theme.scss, then scope with <div data-skra-overlay="round-corners">…</div>.
+ */
+
+[data-skra-overlay="round-corners"] {
+  --skra-comp-button-radius: 1rem;
+}

package/overlays/square-corners.scss

@@ -0,0 +1,8 @@
+/* dist/tokens/overlays/square-corners.scss — auto-generated by build-tokens.mjs (ADR 029)
+ * Skin Overlay Preset. baseSkin: skra. Import AFTER the base skin's
+ * _theme.scss, then scope with <div data-skra-overlay="square-corners">…</div>.
+ */
+
+[data-skra-overlay="square-corners"] {
+  --skra-comp-button-radius: 0;
+}

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@skra/tokens",
+  "version": "0.2.0",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Skra Design System token artifacts — per-skin CSS value layers, structural slices, overlay presets, and skin-surface manifests. Framework-agnostic (plain CSS / JSON, ADR 000).",
+  "keywords": [
+    "skra",
+    "design-system",
+    "design-tokens",
+    "css-variables"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./*": "./*"
+  }
+}

package/skra/_baseline.scss

@@ -0,0 +1,22 @@
+/* dist/tokens/skra/_baseline.scss — auto-generated by build-tokens.mjs
+ * Opt-in: import this AFTER `@use '@skra-skin'`, then apply `data-skra-baseline` on the
+ * element that should own the baseline — `<html>` (Forge owns the page) or a wrapper `<div>`
+ * (Forge is a guest in a foreign shell). The slice is inert until the hook is present.
+ * Strict scope (ADR 036 §3.7): rules under [data-skra-baseline] only — typography + the
+ * surface/on-surface canvas pair + native code/pre/kbd/samp. NO other colour/layout/margin/box.
+ */
+
+@use './theme';
+
+[data-skra-baseline] {
+  font-family: var(--skra-sys-font-family-body);
+  font-size: 100%; /* rem-root on <html>; harmless no-op on a wrapper (WCAG 1.4.4) */
+  line-height: var(--skra-sys-typography-role-body-medium-line-height);
+  color: var(--skra-sys-color-on-surface);
+  background-color: var(--skra-sys-color-surface);
+}
+
+/* Native code-content elements default to mono font (consolidates browser defaults). */
+[data-skra-baseline] :is(code, pre, kbd, samp) {
+  font-family: var(--skra-sys-font-family-code);
+}