npm - @skra/tokens - Versions diffs - 0.2.0 - Mend

@skra/tokens 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/LICENSE +201 -0
package/NOTICE +7 -0
package/README.md +64 -0
package/brutal/_baseline.scss +22 -0
package/brutal/_comp.scss +985 -0
package/brutal/_density.comfortable.scoped.scss +166 -0
package/brutal/_density.comfortable.scss +166 -0
package/brutal/_density.compact.scoped.scss +166 -0
package/brutal/_density.compact.scss +166 -0
package/brutal/_theme.dark.scoped.scss +707 -0
package/brutal/_theme.dark.scss +708 -0
package/brutal/_theme.scoped.scss +1289 -0
package/brutal/_theme.scss +451 -0
package/brutal/skin.config.json +40 -0
package/manifests/accordion.json +52 -0
package/manifests/alert.json +107 -0
package/manifests/avatar.json +78 -0
package/manifests/badge.json +63 -0
package/manifests/box.json +34 -0
package/manifests/button.json +133 -0
package/manifests/chip.json +116 -0
package/manifests/combobox.json +141 -0
package/manifests/datepicker.json +159 -0
package/manifests/dialog.json +104 -0
package/manifests/field.json +267 -0
package/manifests/grid.json +61 -0
package/manifests/icon.json +43 -0
package/manifests/kbd.json +68 -0
package/manifests/link.json +107 -0
package/manifests/menu.json +122 -0
package/manifests/popover.json +104 -0
package/manifests/progress.json +69 -0
package/manifests/select.json +177 -0
package/manifests/skeleton.json +43 -0
package/manifests/stack.json +34 -0
package/manifests/star-rating.json +96 -0
package/manifests/status-dot.json +69 -0
package/manifests/tabs.json +52 -0
package/manifests/toast.json +133 -0
package/manifests/tooltip.json +113 -0
package/manifests/typography.json +169 -0
package/overlays/brand-jade.scss +9 -0
package/overlays/round-corners.scss +8 -0
package/overlays/square-corners.scss +8 -0
package/package.json +19 -0
package/skra/_baseline.scss +22 -0
package/skra/_comp.scss +981 -0
package/skra/_density.comfortable.scss +166 -0
package/skra/_density.compact.scss +166 -0
package/skra/_form-controls.scss +74 -0
package/skra/_overlay.scss +42 -0
package/skra/_theme.dark.scss +698 -0
package/skra/_theme.scss +448 -0
package/skra/skin.config.json +37 -0
package/skra/utilities.scss +38 -0

package/manifests/skeleton.json ADDED Viewed

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
+  "component": "skeleton",
+  "skraVersion": ">=1.0.0",
+  "axes": [
+    {
+      "token": "--skra-comp-skeleton-background",
+      "label": "Skeleton — placeholder fill colour (the animated bar)",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-skeleton-radius",
+      "label": "Skeleton — bar corner radius (text/block; circle is structurally round)",
+      "group": "Surface",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0, "max": 2 },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-skeleton-border-color",
+      "label": "Skeleton — bar border colour (used by stark skins)",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-skeleton-border-width",
+      "label": "Skeleton — bar border width",
+      "group": "Surface",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0, "max": 0.5 },
+      "overridable": ["overlay", "subtree"]
+    }
+  ]
+}

package/manifests/stack.json ADDED Viewed

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
+  "component": "stack",
+  "skraVersion": ">=1.0.0",
+  "axes": [
+    {
+      "token": "--skra-comp-stack-gap-sm",
+      "label": "Stack — small gap preset",
+      "group": "Spacing",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0, "max": 4 },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-stack-gap-md",
+      "label": "Stack — medium gap preset",
+      "group": "Spacing",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0, "max": 4 },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-stack-gap-lg",
+      "label": "Stack — large gap preset",
+      "group": "Spacing",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0, "max": 4 },
+      "overridable": ["overlay", "subtree", "instance"]
+    }
+  ]
+}

package/manifests/star-rating.json ADDED Viewed

@@ -0,0 +1,96 @@
+{
+  "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
+  "component": "star-rating",
+  "skraVersion": ">=1.0.0",
+  "axes": [
+    {
+      "token": "--skra-comp-star-rating-star-color-empty",
+      "label": "Star — unselected (empty) glyph colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-star-rating-star-color-filled",
+      "label": "Star — selected / hover-preview glyph colour (the rating accent)",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-star-rating-gap",
+      "label": "Star rating — gap between stars",
+      "group": "Spacing",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0, "max": 1 },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-star-rating-star-size-sm",
+      "label": "Star glyph size — size=sm",
+      "group": "Spacing",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0.5, "max": 3 },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-star-rating-star-size-md",
+      "label": "Star glyph size — size=md (default)",
+      "group": "Spacing",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0.5, "max": 3 },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-star-rating-star-size-lg",
+      "label": "Star glyph size — size=lg",
+      "group": "Spacing",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0.5, "max": 3 },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-star-rating-focus-ring-color",
+      "label": "Focused star — focus ring colour on :focus-visible",
+      "group": "State",
+      "type": "color",
+      "states": ["focus-visible"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-star-rating-focus-ring-width",
+      "label": "Focused star — 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-star-rating-motion-duration",
+      "label": "Star fill — colour transition duration",
+      "group": "Motion",
+      "type": "duration",
+      "states": ["default"],
+      "constraint": { "unit": "ms" },
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-star-rating-motion-easing",
+      "label": "Star fill — colour transition easing curve",
+      "group": "Motion",
+      "type": "cubic-bezier",
+      "states": ["default"],
+      "overridable": ["overlay"]
+    }
+  ]
+}

package/manifests/status-dot.json ADDED Viewed

@@ -0,0 +1,69 @@
+{
+  "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
+  "component": "status-dot",
+  "skraVersion": ">=1.0.0",
+  "axes": [
+    {
+      "token": "--skra-comp-status-dot-border-color",
+      "label": "Status dot — ring/halo colour (the avatar punch-out; surface by default, invisible inline)",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-status-dot-border-width",
+      "label": "Status dot — ring/halo thickness (0 for no ring)",
+      "group": "Surface",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0, "max": 1 },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-status-dot-radius",
+      "label": "Status dot — corner radius (circle by default; a skin may ship square)",
+      "group": "Surface",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0, "max": 2 },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-status-dot-shadow",
+      "label": "Status dot — resting shadow",
+      "group": "Surface",
+      "type": "shadow",
+      "states": ["default"],
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-status-dot-size-sm",
+      "label": "Status dot — diameter (sm)",
+      "group": "Sizing",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0.25, "max": 2 },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-status-dot-size-md",
+      "label": "Status dot — diameter (md)",
+      "group": "Sizing",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0.25, "max": 2 },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-status-dot-size-lg",
+      "label": "Status dot — diameter (lg)",
+      "group": "Sizing",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0.25, "max": 2 },
+      "overridable": ["overlay", "subtree", "instance"]
+    }
+  ]
+}

package/manifests/tabs.json ADDED Viewed

@@ -0,0 +1,52 @@
+{
+  "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
+  "component": "tabs",
+  "skraVersion": ">=1.0.0",
+  "axes": [
+    {
+      "token": "--skra-comp-tabs-indicator-color",
+      "label": "Tabs — active-tab selection indicator (underline)",
+      "group": "State",
+      "type": "color",
+      "states": ["selected"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-tabs-foreground-selected",
+      "label": "Tabs — selected-tab label colour",
+      "group": "State",
+      "type": "color",
+      "states": ["selected"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-tabs-foreground",
+      "label": "Tabs — resting (unselected) tab label colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-tabs-background-hover",
+      "label": "Tabs — tab hover background tint",
+      "group": "State",
+      "type": "color",
+      "states": ["hover"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-tabs-tablist-border-color",
+      "label": "Tabs — tablist rail (bottom border) colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree"]
+    }
+  ]
+}

package/manifests/toast.json ADDED Viewed

@@ -0,0 +1,133 @@
+{
+  "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
+  "component": "toast",
+  "skraVersion": ">=1.0.0",
+  "axes": [
+    {
+      "token": "--skra-comp-toast-background",
+      "label": "Toast — background colour (resting)",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "scopedBy": ["intent", "emphasis"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-toast-foreground",
+      "label": "Toast — text/icon colour (resting)",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "scopedBy": ["intent", "emphasis"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-toast-border-color",
+      "label": "Toast — border colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "scopedBy": ["intent", "emphasis"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-toast-radius",
+      "label": "Toast — corner radius",
+      "group": "Surface",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0, "max": 2 },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-toast-shadow",
+      "label": "Toast — elevation shadow (toasts float above the page)",
+      "group": "Surface",
+      "type": "shadow",
+      "states": ["default"],
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-toast-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-toast-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-toast-icon-gap",
+      "label": "Toast — 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-toast-motion-duration",
+      "label": "Toast — enter/transition duration",
+      "group": "Motion",
+      "type": "duration",
+      "states": ["default"],
+      "constraint": { "unit": "ms" },
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-toast-motion-easing",
+      "label": "Toast — enter/transition easing curve",
+      "group": "Motion",
+      "type": "cubic-bezier",
+      "states": ["default"],
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-toast-region-inset-block",
+      "label": "Toast region — distance from the top/bottom viewport edge",
+      "group": "Spacing",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0, "max": 8 },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-toast-region-inset-inline",
+      "label": "Toast region — distance from the left/right viewport edge",
+      "group": "Spacing",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0, "max": 8 },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-toast-region-gap",
+      "label": "Toast region — gap between stacked toasts",
+      "group": "Spacing",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0, "max": 4 },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-toast-region-max-inline-size",
+      "label": "Toast region — maximum toast/stack width",
+      "group": "Spacing",
+      "type": "dimension",
+      "states": ["default"],
+      "overridable": ["overlay", "subtree"]
+    }
+  ]
+}

package/manifests/tooltip.json ADDED Viewed

@@ -0,0 +1,113 @@
+{
+  "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
+  "component": "tooltip",
+  "skraVersion": ">=1.0.0",
+  "axes": [
+    {
+      "token": "--skra-comp-tooltip-background",
+      "label": "Tooltip — surface background (inverse by default)",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-tooltip-foreground",
+      "label": "Tooltip — text colour",
+      "group": "Surface",
+      "type": "color",
+      "states": ["default"],
+      "constraint": { "oklch": true },
+      "overridable": ["overlay", "subtree", "instance"]
+    },
+    {
+      "token": "--skra-comp-tooltip-radius",
+      "label": "Tooltip — corner radius",
+      "group": "Surface",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0, "max": 1 },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-tooltip-shadow",
+      "label": "Tooltip — elevation shadow",
+      "group": "Surface",
+      "type": "shadow",
+      "states": ["default"],
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-tooltip-padding-block",
+      "label": "Tooltip — inner block padding",
+      "group": "Spacing",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0, "max": 2 },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-tooltip-padding-inline",
+      "label": "Tooltip — inner inline padding",
+      "group": "Spacing",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0, "max": 2 },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-tooltip-max-inline-size",
+      "label": "Tooltip — maximum width before text wraps",
+      "group": "Spacing",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 8, "max": 32 },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-tooltip-offset",
+      "label": "Tooltip — gap between trigger and panel",
+      "group": "Spacing",
+      "type": "dimension",
+      "states": ["default"],
+      "constraint": { "unit": "rem", "min": 0, "max": 1 },
+      "overridable": ["overlay", "subtree"]
+    },
+    {
+      "token": "--skra-comp-tooltip-motion-duration",
+      "label": "Tooltip — enter/leave transition duration",
+      "group": "Motion",
+      "type": "duration",
+      "states": ["default"],
+      "constraint": { "unit": "ms" },
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-tooltip-motion-easing",
+      "label": "Tooltip — enter/leave transition easing curve",
+      "group": "Motion",
+      "type": "cubic-bezier",
+      "states": ["default"],
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-tooltip-show-delay",
+      "label": "Tooltip — hover open delay",
+      "group": "Motion",
+      "type": "duration",
+      "states": ["default"],
+      "constraint": { "unit": "ms" },
+      "overridable": ["overlay"]
+    },
+    {
+      "token": "--skra-comp-tooltip-hide-delay",
+      "label": "Tooltip — hover close grace delay (WCAG 1.4.13 hoverable)",
+      "group": "Motion",
+      "type": "duration",
+      "states": ["default"],
+      "constraint": { "unit": "ms" },
+      "overridable": ["overlay"]
+    }
+  ]
+}