@microbit/ui 0.1.0-alpha.19 → 0.1.0-alpha.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microbit/ui",
-  "version": "0.1.0-alpha.19",
+  "version": "0.1.0-alpha.20",
   "description": "micro:bit design-system primitives: react-aria-components + Panda CSS with a design language ported from Chakra UI v2. Ships as source; see README for the consumption setup.",
   "license": "MIT",
   "type": "module",

package/src/ProgressBar.tsx

@@ -49,7 +49,7 @@ export const ProgressBar = ({
         className={css(
           {
             height: "100%",
-            bg: "progressFilledTrack",
+            bg: "brand.500",
             transition: "width 0.2s",
           },
           barCss,

package/src/Slider.recipe.ts

@@ -65,7 +65,8 @@ export const slider = defineSlotRecipe({
       top: 0,
       left: 0,
       height: "100%",
-      bg: "sliderFilledTrack",
+      // Fill colour is set per call site via `filledTrackCss`.
+      bg: "brand.500",
     },
     thumb: {
       position: "absolute",

package/src/base-preset.ts

@@ -179,15 +179,13 @@ export const basePreset = definePreset({
     },
     semanticTokens: {
       colors: {
-        // Checked/focus states of form controls (Chakra's default blue
-        // colorScheme). Checkbox/Switch checked backgrounds, Input focus
-        // border, and the Slider/ProgressBar fills (the last two are
-        // near-dead defaults - current call sites override them).
-        controlCheckedBg: { value: "{colors.blue.500}" },
-        controlCheckedHoverBg: { value: "{colors.blue.600}" },
-        focusBorder: { value: "{colors.blue.500}" },
-        sliderFilledTrack: { value: "{colors.blue.500}" },
-        progressFilledTrack: { value: "{colors.blue.500}" },
+        // Checked/focus states of form controls: Checkbox/Switch/Radio
+        // checked backgrounds and the Input/Select focus border. Semantic
+        // so a brand can diverge them from its ramp — e.g. a light
+        // brand.500 needing a darker 3:1 focus border.
+        controlCheckedBg: { value: "{colors.brand.500}" },
+        controlCheckedHoverBg: { value: "{colors.brand.600}" },
+        focusBorder: { value: "{colors.brand.500}" },
         // Error/destructive ramp (Chakra red). Destructive button variants,
         // field error states and the error toast; the record* button
         // variants deliberately stay on red.* (recording vocabulary, not