@marwes-ui/presets 1.3.0 → 1.4.1

package/src/firstEdition/personality.css

@@ -0,0 +1,66 @@
+/**
+ * Personality signatures
+ *
+ * Opt-in visual identity effects layered on top of the token layer. Selected
+ * via `personality` on ThemeInput, which lands on the MarwesProvider wrapper
+ * as `data-marwes-personality="<value>"`. All rules reference design-system
+ * CSS variables so they follow the active palette automatically — no
+ * literal colors here.
+ *
+ * The default "flat" personality intentionally ships no rules; the wrapper
+ * still gets `data-marwes-personality="flat"` but there is nothing for the
+ * selector to match, so default themes stay byte-identical.
+ */
+
+/* ─── glow ────────────────────────────────────────────────────────────────
+ * Neon glow on primary interactives. Reads primary via `--mw-color-primary-base`
+ * (falls back to currentColor if a consumer bypasses the token layer).
+ */
+[data-marwes-personality="glow"] .mw-btn--primary,
+[data-marwes-personality="glow"] .mw-switch[data-checked="true"] .mw-switch__thumb,
+[data-marwes-personality="glow"] .mw-switch[aria-checked="true"] .mw-switch__thumb {
+  box-shadow: 0 0 12px
+    color-mix(in srgb, var(--mw-color-primary-base, currentColor) 55%, transparent);
+}
+
+/* ─── print ───────────────────────────────────────────────────────────────
+ * Hard-offset shadow evocative of print/editorial. Hover/active add a subtle
+ * translate to make the effect tactile. Motion is skipped for users who
+ * requested reduced motion.
+ */
+[data-marwes-personality="print"] .mw-btn--primary {
+  box-shadow: 3px 3px 0 var(--mw-color-text, currentColor);
+}
+
+@media (not (prefers-reduced-motion: reduce)) {
+  [data-marwes-personality="print"] .mw-btn--primary:hover:not(:disabled) {
+    transform: translate(-1px, -1px);
+    box-shadow: 4px 4px 0 var(--mw-color-text, currentColor);
+  }
+
+  [data-marwes-personality="print"] .mw-btn--primary:active:not(:disabled) {
+    transform: translate(1px, 1px);
+    box-shadow: 1px 1px 0 var(--mw-color-text, currentColor);
+  }
+}
+
+/* ─── soft ────────────────────────────────────────────────────────────────
+ * Blurred elevation under cards. Preserves the existing 1px inset border so
+ * the card outline stays intact, then layers the outer glow on top.
+ */
+[data-marwes-personality="soft"] .mw-card {
+  box-shadow: inset 0 0 0 1px var(--mw-card-border, transparent), 0 12px 32px -18px
+    color-mix(in srgb, var(--mw-color-primary-base, #000) 55%, transparent);
+}
+
+/* ─── outlined ────────────────────────────────────────────────────────────
+ * Crisp muted outline on primary actions — subtle presence without heavy
+ * shadow. Uses inset shadow so it respects the button's border-radius.
+ */
+[data-marwes-personality="outlined"] .mw-btn--primary {
+  box-shadow: inset 0 0 0 1px var(--mw-color-border-strong, currentColor);
+}
+
+/* ─── flat ────────────────────────────────────────────────────────────────
+ * No rules. The default personality intentionally ships no additional CSS.
+ */

package/src/firstEdition/presets.ts

@@ -0,0 +1,97 @@
+import type { ThemeInput } from "@marwes-ui/core"
+
+/**
+ * Curated preset themes shipped with the firstEdition CSS. Each preset is a
+ * `ThemeInput` — pass it directly to `<MarwesProvider theme={cyberPreset}>`
+ * or spread it into a larger theme. The `personality` field maps to the
+ * matching CSS signature block in `personality.css`.
+ *
+ * Presets do not include font imports. The consumer app must load fonts
+ * separately (e.g. via Fontsource) when a preset references a non-default
+ * font family.
+ */
+
+const marwesPreset: ThemeInput = {
+  mode: "light",
+  personality: "flat",
+  color: {
+    primary: "#2F31FC",
+  },
+  ui: { radius: 4, density: "comfortable" },
+}
+
+const cyberPreset: ThemeInput = {
+  mode: "dark",
+  tone: "digital",
+  personality: "glow",
+  color: {
+    primary: "#FFE500",
+    background: "#0A0A0F",
+    surface: "#12121A",
+    surfaceElevated: "#1B1B26",
+    text: "#F4F4F5",
+    textMuted: "#A1A1AA",
+    border: "#27272A",
+    borderStrong: "#3F3F46",
+  },
+  font: { primary: "'Fira Code', ui-monospace, monospace" },
+  ui: { radius: 0, density: "compact" },
+}
+
+const editorialPreset: ThemeInput = {
+  mode: "light",
+  personality: "outlined",
+  color: {
+    primary: "#8B1E3F",
+    background: "#FBF7F0",
+    surface: "#FFFFFF",
+    text: "#1B1B1F",
+    textMuted: "#5C5C63",
+    border: "#E5DFD2",
+    borderStrong: "#C6BFB0",
+  },
+  font: { primary: "'Playfair Display', Georgia, serif" },
+  ui: { radius: 12, density: "spacious" },
+}
+
+const sunsetPreset: ThemeInput = {
+  mode: "light",
+  personality: "soft",
+  color: {
+    primary: "#F97316",
+    background: "#FFF8F2",
+    surface: "#FFFFFF",
+    text: "#2B1E17",
+    textMuted: "#8B6E5A",
+    border: "#F5DFC7",
+    borderStrong: "#E9C29A",
+  },
+  font: { primary: "'Nunito', system-ui, sans-serif" },
+  ui: { radius: 16, density: "comfortable" },
+}
+
+const nordicPreset: ThemeInput = {
+  mode: "light",
+  personality: "outlined",
+  color: {
+    primary: "#475569",
+    background: "#F1F5F9",
+    surface: "#F8FAFC",
+    text: "#0F172A",
+    textMuted: "#64748B",
+    border: "#CBD5E1",
+    borderStrong: "#94A3B8",
+  },
+  font: { primary: "'Fira Code', ui-monospace, monospace" },
+  ui: { radius: 2, density: "compact" },
+}
+
+const themePresets: readonly ThemeInput[] = [
+  marwesPreset,
+  cyberPreset,
+  editorialPreset,
+  sunsetPreset,
+  nordicPreset,
+]
+
+export { cyberPreset, editorialPreset, marwesPreset, nordicPreset, sunsetPreset, themePresets }

package/src/firstEdition/progress-bar.css

@@ -0,0 +1,108 @@
+/*
+ * ProgressBar Component Styles
+ *
+ * Figma references:
+ * - .figma/marwes/components/progress-bar.json
+ * - .figma/marwes/pages/-progress-bar/-progress-bar_1727-3932.json
+ * - .figma/marwes/pages/-progress-bar/-progress-bar-dark_1727-4018.json
+ */
+
+.mw-progress-bar {
+  --mw-progress-bar-value-percentage: 0%;
+  --mw-progress-bar-width: 240px;
+  --mw-progress-bar-track-height: 8px;
+  --mw-progress-bar-gap: 8px;
+  --mw-progress-bar-track-color: color-mix(in srgb, var(--mw-color-text, #141414) 15%, transparent);
+  --mw-progress-bar-fill-color: var(--mw-color-primary-base, #2f31fc);
+  --mw-progress-bar-label-color: var(--mw-color-text, #141414);
+  --mw-progress-bar-percentage-color: var(--mw-color-text-muted, #595959);
+  --mw-progress-bar-focus-ring: var(--mw-color-focus, #2f31fc);
+
+  display: grid;
+  gap: var(--mw-progress-bar-gap);
+  width: var(--mw-progress-bar-width);
+  max-width: 100%;
+  color: var(--mw-progress-bar-label-color);
+  font-family: var(--mw-font-primary, inherit);
+}
+
+.mw-progress-bar--small {
+  --mw-progress-bar-track-height: 4px;
+}
+
+.mw-progress-bar__label-row {
+  display: flex;
+  align-items: start;
+  min-width: 0;
+  gap: 8px;
+}
+
+.mw-progress-bar__label,
+.mw-progress-bar__percentage {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0;
+}
+
+.mw-progress-bar__label {
+  min-width: 0;
+  flex: 1 1 auto;
+  color: var(--mw-progress-bar-label-color);
+}
+
+.mw-progress-bar__percentage {
+  flex: 0 0 auto;
+  color: var(--mw-progress-bar-percentage-color);
+  text-align: right;
+}
+
+.mw-progress-bar__track {
+  position: relative;
+  width: 100%;
+  height: var(--mw-progress-bar-track-height);
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--mw-progress-bar-track-color);
+}
+
+.mw-progress-bar__fill {
+  display: block;
+  width: var(--mw-progress-bar-value-percentage);
+  height: 100%;
+  border-radius: inherit;
+  background: var(--mw-progress-bar-fill-color);
+  transition: width 180ms ease, background-color 140ms ease;
+}
+
+.mw-progress-bar:hover,
+.mw-progress-bar--state-hover {
+  --mw-progress-bar-fill-color: var(--mw-color-primary-hover, #2527ca);
+}
+
+.mw-progress-bar:active,
+.mw-progress-bar--state-pressed {
+  --mw-progress-bar-fill-color: var(--mw-color-primary-pressed, #1b1d97);
+}
+
+.mw-progress-bar--state-focus .mw-progress-bar__track {
+  box-shadow: 0 0 0 2px var(--mw-color-surface, #ffffff), 0 0 0 4px
+    var(--mw-progress-bar-focus-ring);
+}
+
+.mw-progress-bar--disabled {
+  --mw-progress-bar-track-color: var(--mw-color-border-subtle, #f5f5f5);
+  --mw-progress-bar-fill-color: var(--mw-color-primary-disabled, #8182fc);
+  --mw-progress-bar-label-color: var(--mw-color-text-muted, #737373);
+  --mw-progress-bar-percentage-color: var(--mw-color-text-muted, #737373);
+
+  pointer-events: none;
+}
+
+.mw-theme--dark .mw-progress-bar {
+  --mw-progress-bar-track-color: color-mix(in srgb, var(--mw-color-text, #f5f5f5) 18%, transparent);
+}
+
+.mw-theme--dark .mw-progress-bar--disabled {
+  --mw-progress-bar-track-color: color-mix(in srgb, var(--mw-color-text, #f5f5f5) 10%, transparent);
+}

package/src/firstEdition/radio.css

@@ -11,8 +11,8 @@
  */
 
 .mw-radio {
-  --mw-radio-surface: var(--mw-color-surface);
-  --mw-radio-border: var(--mw-color-border-subtle);
+  --mw-radio-surface: var(--mw-color-surface-subtle);
+  --mw-radio-border: var(--mw-color-border-low);
   --mw-radio-dot: var(--mw-color-primary-base, #2f31fc);
 
   /* Reset native appearance */
@@ -27,7 +27,7 @@
   height: 18px;
   border-radius: 50%;
   margin: 0;
-  border: 1.5px solid var(--mw-radio-border);
+  border: 1px solid var(--mw-radio-border);
   background: var(--mw-radio-surface);
 
   cursor: pointer;
@@ -66,7 +66,11 @@
    ============================================ */
 
 .mw-radio:hover:not(:disabled) {
-  border-color: color-mix(in srgb, var(--mw-radio-border) 60%, var(--mw-radio-dot));
+  border-color: var(--mw-color-border-strong);
+}
+
+.mw-radio:active:not(:disabled) {
+  border-color: var(--mw-color-border-brand);
 }
 
 /* ============================================
@@ -86,6 +90,7 @@
 .mw-radio--disabled {
   cursor: not-allowed;
   opacity: 0.2;
+  color: var(--mw-color-text-disabled);
 }
 
 /* ============================================
@@ -107,7 +112,7 @@
    ============================================ */
 
 .mw-theme--dark .mw-radio {
-  --mw-radio-surface: var(--mw-color-surface);
+  --mw-radio-surface: var(--mw-color-surface-primary);
   --mw-radio-border: var(--mw-color-border-subtle);
 }
 

package/src/firstEdition/rich-text.css

@@ -4,10 +4,13 @@
  */
 
 .mw-rich-text {
-  width: 260px;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
   border-radius: var(--mw-ui-radius);
   border: 1px solid var(--mw-color-border);
-  background: var(--mw-color-surface);
+  background: var(--mw-color-surface-primary);
   color: var(--mw-color-text);
   transition: border-color 150ms ease, outline 150ms ease;
 }

package/src/firstEdition/segmented-control.css

@@ -0,0 +1,133 @@
+/*
+ * Segmented Control Styles
+ * Figma refs: 1571:19333 (component set)
+ *
+ * Variant=default: subtle track, elevated active pill
+ * Variant=inverse: surface track with strong border, inverted active pill
+ * Variant=pill: fully rounded track (used for compact icon toggles)
+ */
+
+.mw-segmented-control {
+  --mw-sc-track: var(--mw-color-surface-subtle, #f5f5f5);
+  --mw-sc-track-border: var(--mw-color-border, #d8d8d8);
+  --mw-sc-item-active-bg: var(--mw-color-surface-primary, #ffffff);
+  --mw-sc-item-active-text: var(--mw-color-text, #141414);
+  --mw-sc-item-inactive-text: var(--mw-color-text-muted, #595959);
+  --mw-sc-item-hover-text: var(--mw-color-text, #141414);
+  --mw-sc-item-disabled-text: var(--mw-color-text-disabled, #737373);
+  --mw-sc-radius: 8px;
+  --mw-sc-item-radius: 6px;
+  --mw-sc-height: 32px;
+  --mw-sc-padding: 4px;
+  --mw-sc-gap: 2px;
+  --mw-sc-font-size: var(--mw-density-font-size, 14px);
+
+  display: inline-flex;
+  box-sizing: border-box;
+  inline-size: fit-content;
+  block-size: calc(var(--mw-sc-height) + (var(--mw-sc-padding) * 2));
+  max-inline-size: 100%;
+  gap: var(--mw-sc-gap);
+  padding: var(--mw-sc-padding);
+  background: var(--mw-sc-track);
+  border: 0;
+  border-radius: var(--mw-sc-radius);
+  box-shadow: inset 0 0 0 1px var(--mw-sc-track-border);
+  align-items: center;
+}
+
+/* Size: sm */
+.mw-segmented-control--sm {
+  --mw-sc-height: 28px;
+  --mw-sc-padding: 3px;
+  --mw-sc-radius: 6px;
+  --mw-sc-font-size: 12px;
+}
+
+/* Variant: inverse */
+.mw-segmented-control--inverse {
+  --mw-sc-track: var(--mw-color-surface, #f8f8f8);
+  --mw-sc-track-border: var(--mw-color-border, #d8d8d8);
+  --mw-sc-item-active-bg: var(--mw-color-surface-inverted, #141414);
+  --mw-sc-item-active-text: var(--mw-color-text-inverted, #ffffff);
+  --mw-sc-item-inactive-text: var(--mw-color-text-muted, #595959);
+}
+
+/* Variant: pill */
+.mw-segmented-control--pill {
+  --mw-sc-radius: 18px;
+  --mw-sc-item-radius: 14px;
+}
+
+/* Disabled state */
+.mw-segmented-control--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Full-width modifier: stretches the track to fill its container */
+.mw-segmented-control--full-width {
+  display: flex;
+  inline-size: 100%;
+}
+
+/* ─── Item ─────────────────────────────────────────────────── */
+
+.mw-segmented-control__item {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  flex: 1;
+  height: var(--mw-sc-height);
+  padding: 0 16px;
+  background: transparent;
+  color: var(--mw-sc-item-inactive-text);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: var(--mw-sc-font-size);
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0;
+  white-space: nowrap;
+  border: none;
+  border-radius: var(--mw-sc-item-radius);
+  cursor: pointer;
+  transition: background 200ms ease, color 200ms ease;
+}
+
+.mw-segmented-control__item--icon-only {
+  flex: 0 0 var(--mw-sc-height);
+  width: var(--mw-sc-height);
+  padding: 0;
+}
+
+.mw-segmented-control__item--selected {
+  background: var(--mw-sc-item-active-bg);
+  color: var(--mw-sc-item-active-text);
+}
+
+.mw-segmented-control__item:hover:not(:disabled):not(.mw-segmented-control__item--disabled):not(
+    .mw-segmented-control__item--selected
+  ) {
+  background: color-mix(in srgb, var(--mw-color-text, #000000) 5%, transparent);
+  color: var(--mw-sc-item-hover-text);
+}
+
+.mw-segmented-control__item--disabled,
+.mw-segmented-control__item:disabled {
+  color: var(--mw-sc-item-disabled-text);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.mw-segmented-control__item:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--mw-color-focus, #2f31fc);
+  z-index: 1;
+}
+
+/* Item content should not capture pointer events; the button owns the full hit area. */
+.mw-segmented-control__item * {
+  pointer-events: none;
+}

package/src/firstEdition/select.css

@@ -21,7 +21,7 @@
   display: inline-flex;
   align-items: center;
   width: auto;
-  min-width: 96px;
+  min-width: 0;
   max-width: 100%;
   max-inline-size: 100%;
 }
@@ -33,17 +33,20 @@
   field-sizing: fixed;
   box-sizing: border-box;
   display: block;
-  min-height: 34px;
-  padding: 8px 32px 8px 12px; /* off-scale — no token */
+  height: 32px;
+  min-height: 32px;
+  padding: 0 calc(var(--mw-spacing-sp-12) + 16px + var(--mw-spacing-sp-4)) 0 var(--mw-spacing-sp-12);
   border-radius: var(--mw-ui-radius);
   border: 1px solid var(--mw-color-border);
-  background-color: var(--mw-color-surface);
+  background-color: var(--mw-color-surface-primary);
   color: var(--mw-color-text);
   font-family: var(--mw-font-primary, inherit);
   font-size: 14px;
   line-height: 16px;
-  width: auto;
-  min-width: 96px;
+  /* Fill wrapper so the absolutely-positioned chevron aligns with the
+     visible input edge when consumers size .mw-select__control. */
+  width: 100%;
+  min-width: 0;
   max-width: 100%;
   max-inline-size: 100%;
   white-space: nowrap;
@@ -55,8 +58,10 @@
 .mw-select__control-icon {
   position: absolute;
   top: 50%;
-  right: 12px;
+  right: var(--mw-spacing-sp-12);
   transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
   pointer-events: none;
   color: var(--mw-color-text-muted);
 }
@@ -66,10 +71,9 @@
 }
 
 .mw-select--native {
-  appearance: auto;
-  -webkit-appearance: menulist;
-  -moz-appearance: menulist;
-  padding-right: 12px;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
 }
 
 .mw-input-field__input-wrapper .mw-select__control {
@@ -88,12 +92,14 @@
   inline-size: 100%;
   min-inline-size: 0;
   max-inline-size: 100%;
-  min-height: 42px;
-  padding: 12px 40px 12px 16px; /* off-scale — no token */
+  height: var(--mw-density-height);
+  min-height: var(--mw-density-height);
+  padding: 0 calc(var(--mw-density-padding-x) + var(--mw-density-icon-size) + var(--mw-density-gap))
+    0 var(--mw-density-padding-x);
 }
 
-.mw-input-field__input-wrapper .mw-select--native {
-  padding: 12px; /* off-scale — native select keeps browser arrow padding */
+.mw-input-field__input-wrapper .mw-select__control-icon {
+  right: var(--mw-density-padding-x);
 }
 
 .mw-input-field__input-wrapper .mw-select-field__control {
@@ -129,7 +135,7 @@
   padding: 8px 12px; /* off-scale — no token */
   border-radius: var(--mw-ui-radius);
   border: 1px solid var(--mw-color-border);
-  background-color: var(--mw-color-surface);
+  background-color: var(--mw-color-surface-primary);
   color: var(--mw-color-text);
   font-family: var(--mw-font-primary, inherit);
   font-size: 14px;
@@ -302,10 +308,6 @@
   color: var(--mw-color-text-disabled);
 }
 
-.mw-theme--dark .mw-select {
-  background-color: var(--mw-color-surface-elevated);
-}
-
 .mw-select-field__trigger:disabled .mw-select-field__trigger-icon {
   color: var(--mw-color-text-disabled);
 }
@@ -344,17 +346,10 @@
   opacity: 1;
 }
 
-.mw-input-field--select-date .mw-input-field__label p {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 16px;
-}
-
-.mw-input-field--select-date .mw-input-field__helper p,
-.mw-input-field--select-date .mw-input-field__error p {
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 16px;
+.mw-input-field--select-date .mw-input-field__label .mw-text,
+.mw-input-field--select-date .mw-input-field__helper .mw-text,
+.mw-input-field--select-date .mw-input-field__error .mw-text {
+  color: inherit;
 }
 
 .mw-input-field--select-date .mw-select-field__trigger {

package/src/firstEdition/skip-link.css

@@ -0,0 +1,45 @@
+/*
+ * Skip Link Styles
+ *
+ * Visually hidden anchor that becomes visible on keyboard focus.
+ * Provides keyboard-only users a way to jump to a landmark
+ * (typically <main>) without tabbing through the header.
+ */
+
+.mw-skip-link {
+  position: absolute;
+  inset-inline-start: var(--mw-spacing-sp8, 8px);
+  inset-block-start: var(--mw-spacing-sp8, 8px);
+  z-index: 1000;
+
+  /* Visually hidden but focusable */
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+
+  background: var(--mw-color-surface-primary, #ffffff);
+  color: var(--mw-color-text, #141414);
+  border: 1px solid var(--mw-color-border, #d8d8d8);
+  border-radius: var(--mw-ui-radius, 6px);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.mw-skip-link:focus-visible,
+.mw-skip-link:focus {
+  /* Reveal on focus */
+  inline-size: auto;
+  block-size: auto;
+  padding: var(--mw-spacing-sp8, 8px) var(--mw-spacing-sp16, 16px);
+  overflow: visible;
+  clip: auto;
+  clip-path: none;
+  outline: 2px solid var(--mw-color-focus, #2f31fc);
+  outline-offset: 2px;
+}

package/src/firstEdition/slider.css

@@ -9,13 +9,16 @@
 
 .mw-slider {
   --mw-slider-fill-percentage: 50%;
-  --mw-slider-track-height: 5px;
+  --mw-slider-track-height: 6px;
   --mw-slider-thumb-size: 16px;
   --mw-slider-touch-area-size: 32px;
   --mw-slider-tooltip-gap: 2px;
-  --mw-slider-track-background: var(--mw-color-border-subtle, #c2c2c2);
+  --mw-slider-track-background: var(
+    --mw-color-border-subtle,
+    color-mix(in srgb, var(--mw-color-text, #141414) 20%, transparent)
+  );
   --mw-slider-track-fill: var(--mw-color-primary-base, #2f31fc);
-  --mw-slider-thumb-background: var(--mw-color-surface, #ffffff);
+  --mw-slider-thumb-background: var(--mw-color-surface-primary, #ffffff);
   --mw-slider-thumb-border: var(--mw-color-primary-base, #2f31fc);
   --mw-slider-touch-area-background: var(--mw-color-primary-base, #2f31fc);
   --mw-slider-tooltip-background: var(--mw-color-text, #141414);
@@ -220,7 +223,10 @@
 }
 
 .mw-theme--dark .mw-slider {
-  --mw-slider-track-background: var(--mw-color-border-subtle);
+  --mw-slider-track-background: var(
+    --mw-color-border-subtle,
+    color-mix(in srgb, var(--mw-color-text, #ffffff) 30%, transparent)
+  );
   --mw-slider-thumb-background: var(--mw-color-surface-inverted);
   --mw-slider-tooltip-background: var(--mw-color-surface-inverted);
   --mw-slider-tooltip-color: var(--mw-color-text-inverted);

package/src/firstEdition/spinner.css

@@ -14,7 +14,7 @@
 
 .mw-spinner {
   --mw-spinner-size: 24px;
-  --mw-spinner-track-color: var(--mw-color-text-muted, #a3a3a3);
+  --mw-spinner-track-color: #a3a3a3;
   --mw-spinner-indicator-color: var(--mw-color-primary-base, #2f31fc);
   --mw-spinner-rotation-duration: 800ms;