ui-style-kit-css 2.1.0 → 2.2.0

package/manifest.json

@@ -1,7 +1,11 @@
 {
   "schemaVersion": 1,
+  "schemaPolicy": {
+    "compatibility": "additive-within-major",
+    "breakingChange": "increment-schemaVersion-before-removing-or-renaming-fields"
+  },
   "name": "ui-style-kit-css",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "cascadeLayers": [
     "ui-style-kit.theme_colors",
     "ui-style-kit.native_elements",
@@ -127,6 +131,324 @@
     "dark",
     "contrast"
   ],
+  "tokens": {
+    "sharedSemantic": [
+      {
+        "name": "--ui-color-bg",
+        "type": "<color>",
+        "namespacedSource": "rgb(var(--usk-bg-rgb))",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-color-surface",
+        "type": "<color>",
+        "namespacedSource": "var(--usk-native-surface-strong)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-color-text",
+        "type": "<color>",
+        "namespacedSource": "var(--usk-native-text)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-color-muted",
+        "type": "<color>",
+        "namespacedSource": "var(--usk-native-text-muted)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-color-primary",
+        "type": "<color>",
+        "namespacedSource": "var(--usk-native-primary)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-color-on-primary",
+        "type": "<color>",
+        "namespacedSource": "var(--usk-native-on-primary)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-color-border",
+        "type": "<color>",
+        "namespacedSource": "var(--usk-native-border)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-radius-control",
+        "type": "<length>",
+        "namespacedSource": "var(--usk-native-radius)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-shadow-control",
+        "type": "<shadow-list>",
+        "namespacedSource": "var(--usk-native-shadow)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-focus-color",
+        "type": "<color>",
+        "namespacedSource": "var(--usk-native-focus)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-motion-duration",
+        "type": "<time>",
+        "namespacedSource": "var(--usk-motion-duration)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-motion-easing",
+        "type": "<easing-function>",
+        "namespacedSource": "var(--usk-motion-easing)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      }
+    ]
+  },
+  "semanticComponentApi": {
+    "presetSwitchAttribute": "data-ui",
+    "selectorsByRole": {
+      "button": [
+        {
+          "selector": ".ui-button",
+          "sourceSuffix": "button"
+        },
+        {
+          "selector": ".ui-icon-button",
+          "sourceSuffix": "icon-button"
+        }
+      ],
+      "card": [
+        {
+          "selector": ".ui-card",
+          "sourceSuffix": "card"
+        }
+      ],
+      "form": [
+        {
+          "selector": ".ui-field",
+          "sourceSuffix": "field"
+        },
+        {
+          "selector": ".ui-label",
+          "sourceSuffix": "label"
+        },
+        {
+          "selector": ".ui-help-text",
+          "sourceSuffix": "help-text"
+        },
+        {
+          "selector": ".ui-input",
+          "sourceSuffix": "input"
+        },
+        {
+          "selector": ".ui-select",
+          "sourceSuffix": "select"
+        },
+        {
+          "selector": ".ui-textarea",
+          "sourceSuffix": "textarea"
+        },
+        {
+          "selector": ".ui-check",
+          "sourceSuffix": "check"
+        },
+        {
+          "selector": ".ui-check-control",
+          "sourceSuffix": "check-control"
+        },
+        {
+          "selector": ".ui-radio",
+          "sourceSuffix": "radio"
+        },
+        {
+          "selector": ".ui-radio-control",
+          "sourceSuffix": "radio-control"
+        },
+        {
+          "selector": ".ui-switch",
+          "sourceSuffix": "switch"
+        },
+        {
+          "selector": ".ui-switch-track",
+          "sourceSuffix": "switch-track"
+        },
+        {
+          "selector": ".ui-switch-thumb",
+          "sourceSuffix": "switch-thumb"
+        }
+      ],
+      "badge": [
+        {
+          "selector": ".ui-badge",
+          "sourceSuffix": "badge"
+        }
+      ],
+      "alert": [
+        {
+          "selector": ".ui-alert",
+          "sourceSuffix": "alert"
+        },
+        {
+          "selector": ".ui-alert-title",
+          "sourceSuffix": "alert-title"
+        },
+        {
+          "selector": ".ui-alert-body",
+          "sourceSuffix": "alert-body"
+        }
+      ],
+      "navigation": [
+        {
+          "selector": ".ui-nav",
+          "sourceSuffix": "nav"
+        },
+        {
+          "selector": ".ui-nav-link",
+          "sourceSuffix": "nav-link"
+        }
+      ],
+      "table": [
+        {
+          "selector": ".ui-table",
+          "sourceSuffix": "table"
+        },
+        {
+          "selector": ".ui-table-wrap",
+          "sourceSuffix": "table-wrap"
+        }
+      ],
+      "progress": [
+        {
+          "selector": ".ui-progress",
+          "sourceSuffix": "progress"
+        },
+        {
+          "selector": ".ui-progress-bar",
+          "sourceSuffix": "progress-bar"
+        }
+      ],
+      "toolbar": [
+        {
+          "selector": ".ui-toolbar",
+          "sourceSuffix": "toolbar"
+        }
+      ],
+      "loading": [
+        {
+          "selector": ".ui-spinner",
+          "sourceSuffix": "spinner"
+        }
+      ],
+      "tooltip": [
+        {
+          "selector": ".ui-tooltip",
+          "sourceSuffix": "tooltip"
+        }
+      ]
+    },
+    "variantAttribute": {
+      "name": "data-ui-variant",
+      "neutral": "omitted",
+      "valuesBySelector": {
+        ".ui-button": [
+          "primary",
+          "secondary",
+          "danger",
+          "ghost"
+        ],
+        ".ui-badge": [
+          "primary",
+          "secondary",
+          "success",
+          "warning",
+          "danger"
+        ],
+        ".ui-alert": [
+          "success",
+          "warning",
+          "danger"
+        ]
+      }
+    },
+    "nativeFallbacks": [
+      {
+        "roles": [
+          "modal",
+          "dialog"
+        ],
+        "element": "dialog",
+        "genericSelectors": []
+      }
+    ],
+    "presetPrefixedClasses": {
+      "status": "supported",
+      "uses": [
+        "compatibility",
+        "advanced"
+      ]
+    },
+    "implementationStatus": {
+      "retained": {
+        "status": "implemented",
+        "selectors": [
+          ".ui-spinner",
+          ".ui-tooltip"
+        ]
+      },
+      "implemented": {
+        "status": "implemented",
+        "selectors": [
+          ".ui-button",
+          ".ui-icon-button",
+          ".ui-card",
+          ".ui-field",
+          ".ui-label",
+          ".ui-help-text",
+          ".ui-input",
+          ".ui-select",
+          ".ui-textarea",
+          ".ui-check",
+          ".ui-check-control",
+          ".ui-radio",
+          ".ui-radio-control",
+          ".ui-switch",
+          ".ui-switch-track",
+          ".ui-switch-thumb",
+          ".ui-badge",
+          ".ui-alert",
+          ".ui-alert-title",
+          ".ui-alert-body",
+          ".ui-nav",
+          ".ui-nav-link",
+          ".ui-table",
+          ".ui-table-wrap",
+          ".ui-progress",
+          ".ui-progress-bar",
+          ".ui-toolbar"
+        ]
+      },
+      "pending": {
+        "status": "pending",
+        "targetTask": 11,
+        "selectors": []
+      }
+    }
+  },
   "nativeElements": {
     "fullyThemed": [
       "a",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-style-kit-css",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "CSS theme and UI style preset library for accessible websites, dashboards, admin interfaces, and client-facing pages.",
   "style": "dist/ui-style-kit.css",
   "main": "dist/ui-style-kit.css",
@@ -150,7 +150,7 @@
   "bugs": {
     "url": "https://github.com/Foscat/ui-style-kit-css/issues"
   },
-  "homepage": "https://github.com/Foscat/ui-style-kit-css#readme",
+  "homepage": "https://foscat.github.io/ui-style-kit-css/",
   "engines": {
     "node": ">=20"
   },
@@ -160,12 +160,21 @@
     "@playwright/test": "~1.61.1",
     "css-tree": "3.2.1",
     "lightningcss": "1.33.0",
+    "pixelmatch": "7.2.0",
+    "pngjs": "7.0.0",
     "stylelint": "~17.14.0"
   },
+  "overrides": {
+    "fast-uri": "3.1.5",
+    "js-yaml": "4.3.1",
+    "nanoid": "3.3.17",
+    "postcss": "8.5.23"
+  },
   "scripts": {
     "build": "node scripts/build.mjs",
     "lint": "stylelint \"styles/**/*.css\" \"demo/**/*.css\"",
     "check:contrast": "node scripts/check-contrast.mjs",
+    "check:ownership": "node scripts/check-css-ownership.mjs",
     "check:package": "node scripts/check-package.mjs",
     "test": "npm run test:unit",
     "test:unit": "node --test tests/*.test.js",
@@ -173,11 +182,15 @@
     "test:axe": "playwright test --config playwright.config.js tests/e2e/accessibility.spec.js",
     "test:matrix": "playwright test --config playwright.matrix.config.js",
     "test:e2e:install:ci": "playwright install --with-deps chromium firefox webkit",
-    "check:ecosystem:packs": "node scripts/check-ecosystem-packs.mjs",
-    "check": "npm run build && npm run lint && npm run test:unit && npm run check:contrast && npm run check:package",
+    "check:ecosystem:current": "node scripts/check-ecosystem-packs.mjs --matrix current",
+    "check:ecosystem:minimum": "node scripts/check-ecosystem-packs.mjs --matrix minimum --skip-docs",
+    "check:ecosystem:packs": "npm run check:ecosystem:current && npm run check:ecosystem:minimum",
+    "test:ecosystem:clean-install": "node --test tests/clean-install-ecosystem-contract.integration.mjs",
+    "release:preflight": "npm run build && node scripts/release-preflight.mjs --layout-repo ../Layout-Style-CSS --interactive-repo ../Interactive-Surface-CSS --layout-docs-repo ../Layout-Style-CSS --interactive-docs-repo ../Interactive-Surface-CSS",
+    "check": "npm run build && npm run lint && npm run test:unit && npm run check:contrast && npm run check:ownership && npm run check:package",
     "pack:dry-run": "npm pack --dry-run",
     "prepack": "npm run check",
-    "release:verify": "npm run check && npm run test:e2e && npm run test:axe && npm run test:visual && npm run test:matrix && npm run check:ecosystem:packs && npm audit --audit-level=moderate && npm run pack:dry-run",
+    "release:verify": "npm run check && npm run test:e2e && npm run test:axe && npm run test:visual && npm run test:matrix && npm run release:preflight -- --candidate-package ui-style-kit-css && npm audit --audit-level=moderate && npm run pack:dry-run",
     "prepublishOnly": "npm run release:verify",
     "release:patch": "npm version patch && npm publish",
     "release:minor": "npm version minor && npm publish",

package/styles/interactive-surface-bridge.css

@@ -11,10 +11,11 @@
 
 :where([data-ui][data-theme][data-mode]) .interactive-surface {
   --interactive-surface-border-width: 1px;
+  /* Preserve the adapter's opaque paint while semantic surfaces may retain preset alpha. */
   --interactive-surface-bg: rgb(var(--usk-surface-strong-rgb, var(--usk-surface-rgb, 255 255 255)));
-  --interactive-surface-fg: rgb(var(--usk-text-rgb));
+  --interactive-surface-fg: var(--ui-color-text, rgb(var(--usk-text-rgb)));
   --interactive-surface-border-color: rgb(var(--usk-border-rgb, 128 128 128) / .72);
-  --interactive-surface-focus-ring-color: rgb(var(--usk-focus-rgb, var(--usk-primary-rgb, 72 120 255)));
+  --interactive-surface-focus-ring-color: var(--ui-focus-color, rgb(var(--usk-focus-rgb, var(--usk-primary-rgb, 72 120 255))));
   --interactive-surface-radius: .85rem;
   --interactive-surface-state-layer-color: currentColor;
   --interactive-surface-state-layer-opacity: 0;
@@ -27,8 +28,8 @@
   --interactive-surface-light-icon-color-dark: var(--interactive-surface-light-icon-color);
   --interactive-surface-dark-icon-color-dark: var(--interactive-surface-dark-icon-color);
   --interactive-surface-accessibility-icon-color-dark: var(--interactive-surface-accessibility-icon-color);
-  --interactive-surface-variant-primary-bg: rgb(var(--usk-primary-rgb));
-  --interactive-surface-variant-primary-fg: rgb(var(--usk-primary-text-rgb, var(--usk-bg-rgb, 255 255 255)));
+  --interactive-surface-variant-primary-bg: var(--ui-color-primary, rgb(var(--usk-primary-rgb)));
+  --interactive-surface-variant-primary-fg: var(--ui-color-on-primary, rgb(var(--usk-primary-text-rgb, var(--usk-bg-rgb, 255 255 255))));
   --interactive-surface-variant-primary-border-color: rgb(var(--usk-primary-rgb, 72 120 255));
   --interactive-surface-variant-secondary-bg: rgb(var(--usk-secondary-rgb, var(--usk-surface-soft-rgb, 96 112 128)));
   --interactive-surface-variant-secondary-fg: rgb(var(--usk-secondary-text-rgb, var(--usk-text-rgb, 18 18 18)));
@@ -37,7 +38,7 @@
   --interactive-surface-variant-accent-fg: rgb(var(--usk-accent-text-rgb, var(--usk-bg-rgb, 255 255 255)));
   --interactive-surface-variant-accent-border-color: rgb(var(--usk-accent-rgb, var(--usk-primary-rgb, 72 120 255)));
   --interactive-surface-variant-subtle-bg: rgb(var(--usk-surface-soft-rgb, var(--usk-surface-rgb, 244 244 244)));
-  --interactive-surface-variant-subtle-fg: rgb(var(--usk-text-rgb, 18 18 18));
+  --interactive-surface-variant-subtle-fg: var(--ui-color-text, rgb(var(--usk-text-rgb, 18 18 18)));
   --interactive-surface-variant-subtle-border-color: rgb(var(--usk-border-rgb, 128 128 128) / .64);
   --interactive-surface-variant-warning-bg: rgb(var(--usk-warning-rgb, 255 190 72));
   --interactive-surface-variant-warning-fg: rgb(var(--usk-warning-text-rgb, var(--usk-bg-rgb, 18 18 18)));

package/styles/interactive-surface-theme.css

@@ -8,10 +8,11 @@
 
 :where([data-ui][data-theme][data-mode]) .interactive-surface {
   --interactive-surface-border-width: 1px;
+  /* Preserve the adapter's opaque paint while semantic surfaces may retain preset alpha. */
   --interactive-surface-bg: rgb(var(--usk-surface-strong-rgb, var(--usk-surface-rgb, 255 255 255)));
-  --interactive-surface-fg: rgb(var(--usk-text-rgb, 18 18 18));
+  --interactive-surface-fg: var(--ui-color-text, rgb(var(--usk-text-rgb, 18 18 18)));
   --interactive-surface-border-color: rgb(var(--usk-border-rgb, 128 128 128) / .72);
-  --interactive-surface-focus-ring-color: rgb(var(--usk-focus-rgb, var(--usk-primary-rgb, 72 120 255)));
+  --interactive-surface-focus-ring-color: var(--ui-focus-color, rgb(var(--usk-focus-rgb, var(--usk-primary-rgb, 72 120 255))));
   --interactive-surface-radius: .85rem;
   --interactive-surface-light-icon-color: rgb(var(--usk-warning-rgb, var(--usk-accent-rgb, 255 190 72)));
   --interactive-surface-dark-icon-color: rgb(var(--usk-text-rgb, 18 18 18));
@@ -19,8 +20,8 @@
   --interactive-surface-light-icon-color-dark: var(--interactive-surface-light-icon-color);
   --interactive-surface-dark-icon-color-dark: var(--interactive-surface-dark-icon-color);
   --interactive-surface-accessibility-icon-color-dark: var(--interactive-surface-accessibility-icon-color);
-  --interactive-surface-variant-primary-bg: rgb(var(--usk-primary-rgb, 72 120 255));
-  --interactive-surface-variant-primary-fg: rgb(var(--usk-primary-text-rgb, var(--usk-bg-rgb, 255 255 255)));
+  --interactive-surface-variant-primary-bg: var(--ui-color-primary, rgb(var(--usk-primary-rgb, 72 120 255)));
+  --interactive-surface-variant-primary-fg: var(--ui-color-on-primary, rgb(var(--usk-primary-text-rgb, var(--usk-bg-rgb, 255 255 255))));
   --interactive-surface-variant-primary-border-color: rgb(var(--usk-primary-rgb, 72 120 255));
   --interactive-surface-variant-secondary-bg: rgb(var(--usk-secondary-rgb, var(--usk-surface-soft-rgb, 96 112 128)));
   --interactive-surface-variant-secondary-fg: rgb(var(--usk-secondary-text-rgb, var(--usk-text-rgb, 18 18 18)));
@@ -29,7 +30,7 @@
   --interactive-surface-variant-accent-fg: rgb(var(--usk-accent-text-rgb, var(--usk-bg-rgb, 255 255 255)));
   --interactive-surface-variant-accent-border-color: rgb(var(--usk-accent-rgb, var(--usk-primary-rgb, 72 120 255)));
   --interactive-surface-variant-subtle-bg: rgb(var(--usk-surface-soft-rgb, var(--usk-surface-rgb, 244 244 244)));
-  --interactive-surface-variant-subtle-fg: rgb(var(--usk-text-rgb, 18 18 18));
+  --interactive-surface-variant-subtle-fg: var(--ui-color-text, rgb(var(--usk-text-rgb, 18 18 18)));
   --interactive-surface-variant-subtle-border-color: rgb(var(--usk-border-rgb, 128 128 128) / .64);
   --interactive-surface-variant-warning-bg: rgb(var(--usk-warning-rgb, 255 190 72));
   --interactive-surface-variant-warning-fg: rgb(var(--usk-warning-text-rgb, var(--usk-bg-rgb, 18 18 18)));

package/styles/native-elements.css

@@ -47,6 +47,22 @@
   --usk-native-shadow: none;
   --usk-native-shadow-md: var(--usk-native-shadow);
   --usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
+  --usk-motion-duration: 140ms;
+  --usk-motion-easing: cubic-bezier(0.2, 0, 0.2, 1);
+
+  /* Shared semantic values are fully typed so optional companion and third-party consumers can use them directly. */
+  --ui-color-bg: rgb(var(--usk-bg-rgb));
+  --ui-color-surface: var(--usk-native-surface-strong);
+  --ui-color-text: var(--usk-native-text);
+  --ui-color-muted: var(--usk-native-text-muted);
+  --ui-color-primary: var(--usk-native-primary);
+  --ui-color-on-primary: var(--usk-native-on-primary);
+  --ui-color-border: var(--usk-native-border);
+  --ui-radius-control: var(--usk-native-radius);
+  --ui-shadow-control: var(--usk-native-shadow);
+  --ui-focus-color: var(--usk-native-focus);
+  --ui-motion-duration: var(--usk-motion-duration);
+  --ui-motion-easing: var(--usk-motion-easing);
 }
 
 [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) {