@skra/tokens 0.2.0 → 0.3.0

package/brutal/_theme.scoped.scss

@@ -129,18 +129,18 @@
   --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-display-large-letter-spacing: 0em;
+  --skra-sys-typography-role-display-medium-letter-spacing: 0em;
+  --skra-sys-typography-role-display-small-letter-spacing: 0em;
+  --skra-sys-typography-role-headline-large-letter-spacing: 0em;
+  --skra-sys-typography-role-headline-medium-letter-spacing: 0em;
+  --skra-sys-typography-role-headline-small-letter-spacing: 0em;
+  --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.05em;
   --skra-sys-typography-role-label-medium-letter-spacing: 0.05em;
   --skra-sys-typography-role-label-small-letter-spacing: 0.05em;
@@ -162,7 +162,7 @@
   --skra-comp-accordion-panel-foreground-active: oklch(53.0% 0 0);
   --skra-comp-accordion-background: rgba(0, 0, 0, 0);
   --skra-comp-accordion-border-color: rgba(0, 0, 0, 0);
-  --skra-comp-accordion-border-width: 0;
+  --skra-comp-accordion-border-width: 0rem;
   --skra-comp-accordion-border-style: solid;
   --skra-comp-accordion-shadow: none;
   --skra-comp-accordion-focus-ring-width: 0.1875rem;
@@ -459,8 +459,8 @@
   --skra-comp-progress-fill-color-active: oklch(67.0% 0.17 98);
   --skra-comp-progress-border-width: 0.1875rem;
   --skra-comp-progress-border-style: solid;
-  --skra-comp-progress-padding-block: 0;
-  --skra-comp-progress-padding-inline: 0;
+  --skra-comp-progress-padding-block: 0rem;
+  --skra-comp-progress-padding-inline: 0rem;
   --skra-comp-progress-focus-ring-width: 0.1875rem;
   --skra-comp-progress-block-size: 0.875rem;
   --skra-comp-select-background-hover: oklch(85.0% 0.015 95);
@@ -511,8 +511,8 @@
   --skra-comp-skeleton-focus-ring-color-active: oklch(63.0% 0.18 295);
   --skra-comp-skeleton-border-width: 0.1875rem;
   --skra-comp-skeleton-border-style: solid;
-  --skra-comp-skeleton-padding-block: 0;
-  --skra-comp-skeleton-padding-inline: 0;
+  --skra-comp-skeleton-padding-block: 0rem;
+  --skra-comp-skeleton-padding-inline: 0rem;
   --skra-comp-skeleton-focus-ring-width: 0.1875rem;
   --skra-comp-star-rating-star-color-empty-hover: oklch(12.0% 0 0);
   --skra-comp-star-rating-star-color-empty-active: oklch(18.0% 0 0);
@@ -549,7 +549,7 @@
   --skra-comp-tabs-tablist-border-color-active: oklch(18.0% 0 0);
   --skra-comp-tabs-background: rgba(0, 0, 0, 0);
   --skra-comp-tabs-border-color: rgba(0, 0, 0, 0);
-  --skra-comp-tabs-border-width: 0;
+  --skra-comp-tabs-border-width: 0rem;
   --skra-comp-tabs-border-style: solid;
   --skra-comp-tabs-shadow: none;
   --skra-comp-tabs-focus-ring-width: 0.125rem;

package/brutal/_theme.scss

@@ -129,18 +129,18 @@
   --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-display-large-letter-spacing: 0em;
+  --skra-sys-typography-role-display-medium-letter-spacing: 0em;
+  --skra-sys-typography-role-display-small-letter-spacing: 0em;
+  --skra-sys-typography-role-headline-large-letter-spacing: 0em;
+  --skra-sys-typography-role-headline-medium-letter-spacing: 0em;
+  --skra-sys-typography-role-headline-small-letter-spacing: 0em;
+  --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.05em;
   --skra-sys-typography-role-label-medium-letter-spacing: 0.05em;
   --skra-sys-typography-role-label-small-letter-spacing: 0.05em;
@@ -226,6 +226,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;

package/brutal/skin.config.json

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

@@ -1,52 +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"]
-    }
-  ]
-}
+{
+  "$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

@@ -1,107 +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"]
-    }
-  ]
-}
+{
+  "$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"]
+    }
+  ]
+}