@marwes-ui/presets 1.2.0 → 1.4.0

package/README.md

@@ -1,4 +1,4 @@
-Static preset CSS and theme exports for Marwes React, Vue, and custom adapter projects.
+Static preset CSS and theme exports for Marwes React, Vue, Svelte, and custom adapter projects.
 
 <div align="center">
 
@@ -9,11 +9,12 @@ Static preset CSS and theme exports for Marwes React, Vue, and custom adapter pr
 
 # Marwes Design System - Presets
 
-**Static default CSS and preset theme exports for Marwes React and Vue apps.**
+**Static default CSS and preset theme exports for Marwes React, Vue, and Svelte apps.**
 
 Static `.mw-*` CSS • CSS variables • Default Marwes visuals • No runtime CSS-in-JS
 
-[Documentation](https://github.com/niklas-westman/marwes/tree/main/docs) • [React Storybook](https://storybook-react.marwes.io/latest/) • [Vue Storybook](https://storybook-vue.marwes.io/latest/) • [GitHub](https://github.com/niklas-westman/marwes)
+[**marwes.io**](https://marwes.io) — official site, theme builder, and install guides
+[React Storybook](https://storybook-react.marwes.io/latest/) • [Vue Storybook](https://storybook-vue.marwes.io/latest/) • [Svelte Storybook](https://storybook-svelte.marwes.io/latest/) • [Docs](https://github.com/niklas-westman/marwes/tree/main/docs) • [GitHub](https://github.com/niklas-westman/marwes)
 
 </div>
 
@@ -21,7 +22,7 @@ Static `.mw-*` CSS • CSS variables • Default Marwes visuals • No runtime C
 
 ## Why Use It
 
-Most apps install `@marwes-ui/react` or `@marwes-ui/vue`, and those adapters load the default preset automatically. Install presets directly when you need the standalone CSS path, the explicit `firstEditionTheme` object, or preset CSS in a custom adapter.
+Most apps install `@marwes-ui/react`, `@marwes-ui/vue`, or `@marwes-ui/svelte`, and those adapters load the default preset automatically. Install presets directly when you need the standalone CSS path, the explicit `firstEditionTheme` object, or preset CSS in a custom adapter.
 
 Presets gives Marwes its default visual layer:
 
@@ -39,6 +40,7 @@ Presets are the static visual layer, not the normal app entry point.
 | --- | --- |
 | `@marwes-ui/react` | You are building a React app. |
 | `@marwes-ui/vue` | You are building a Vue app. |
+| `@marwes-ui/svelte` | You are building a Svelte app. |
 | `@marwes-ui/core` | You need framework-agnostic recipes, theme utilities, accessibility contracts, or adapter/tooling APIs. |
 | `@marwes-ui/presets` | You need standalone preset CSS or preset theme exports. |
 
@@ -52,7 +54,7 @@ pnpm add @marwes-ui/presets
 
 ## Normal App Setup
 
-React and Vue apps normally import only the adapter:
+React, Vue, and Svelte apps normally import only the adapter:
 
 ```tsx
 import { Button, ButtonVariant, MarwesProvider } from "@marwes-ui/react"
@@ -81,18 +83,26 @@ The default preset styles these Marwes families today:
 - Accordion and accordion fields
 - Avatar and avatar groups
 - Badge and contextual badge variants
-- Button and purpose button variants
+- Banner and info/success/warning/error banner variants
+- Breadcrumb
+- Button (including `danger` variant), icon button, and purpose button variants
 - Card variants
 - Checkbox, checkbox fields, and checkbox groups
-- Dialog and dialog modal
+- Context menu
+- Dialog, dialog modal, and drawer
 - Divider
 - Icon
 - Input, textarea, select, rich text, OTP, and field variants
-- Paragraph and heading typography
+- Pagination field
+- Paragraph, heading, and text typography
+- Progress bar
 - Radio and radio groups
+- Segmented control field
+- Skeleton
 - Slider and slider fields
-- Spacing and spacer primitives
+- Spacing and spacer primitives (including the `sp-12` spacing token)
 - Spinner variants
+- Stat tile
 - Switch and switch fields
 - Tab groups and panels
 - Toast and toast container

package/dist/chunk-PWG4S55U.js

@@ -0,0 +1,131 @@
+import '@fontsource/instrument-sans/400.css';
+import '@fontsource/instrument-sans/500.css';
+import '@fontsource/instrument-sans/600.css';
+import '@fontsource/instrument-sans/700.css';
+
+// src/firstEdition/index.ts
+
+// src/firstEdition/presets.ts
+var marwesPreset = {
+  mode: "light",
+  personality: "flat",
+  color: {
+    primary: "#2F31FC"
+  },
+  ui: { radius: 4, density: "comfortable" }
+};
+var cyberPreset = {
+  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" }
+};
+var editorialPreset = {
+  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" }
+};
+var sunsetPreset = {
+  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" }
+};
+var nordicPreset = {
+  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" }
+};
+var themePresets = [
+  marwesPreset,
+  cyberPreset,
+  editorialPreset,
+  sunsetPreset,
+  nordicPreset
+];
+
+// src/firstEdition/index.ts
+var firstEditionTheme = {
+  color: {
+    primary: {
+      base: "#2F31FC",
+      hover: "#2527CA",
+      pressed: "#1B1D97",
+      disabled: "#8182FC",
+      label: "#FFFFFF",
+      labelDisabled: "rgba(255,255,255,0.5)"
+    },
+    danger: {
+      base: "#D90429",
+      hover: "#A8031F",
+      pressed: "#780215",
+      disabled: "#FF8A95",
+      label: "#FFFFFF",
+      labelDisabled: "rgba(255,255,255,0.5)"
+    },
+    success: "#006633",
+    warning: "#B45309",
+    background: "#FFFFFF",
+    surface: "#F8F8F8",
+    surfaceSubtle: "#F5F5F5",
+    surfaceElevated: "#FFFFFF",
+    surfaceDisabled: "#F5F5F5",
+    surfaceInverted: "#141414",
+    text: "#141414",
+    textMuted: "#595959",
+    textSubtle: "#737373",
+    textDisabled: "#737373",
+    textInverted: "#FFFFFF",
+    border: "#D8D8D8",
+    borderSubtle: "#D8D8D8",
+    borderStrong: "#A3A3A3",
+    borderDisabled: "#D8D8D8",
+    focus: "#2F31FC"
+  },
+  font: { primary: "'Instrument Sans', Inter, system-ui, sans-serif" },
+  ui: { radius: 4, density: "comfortable" }
+};
+
+export { cyberPreset, editorialPreset, firstEditionTheme, marwesPreset, nordicPreset, sunsetPreset, themePresets };
+//# sourceMappingURL=chunk-PWG4S55U.js.map
+//# sourceMappingURL=chunk-PWG4S55U.js.map

package/dist/chunk-PWG4S55U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/firstEdition/presets.ts","../src/firstEdition/index.ts"],"names":[],"mappings":"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","file":"chunk-PWG4S55U.js","sourcesContent":["import type { ThemeInput } from \"@marwes-ui/core\"\n\n/**\n * Curated preset themes shipped with the firstEdition CSS. Each preset is a\n * `ThemeInput` — pass it directly to `<MarwesProvider theme={cyberPreset}>`\n * or spread it into a larger theme. The `personality` field maps to the\n * matching CSS signature block in `personality.css`.\n *\n * Presets do not include font imports. The consumer app must load fonts\n * separately (e.g. via Fontsource) when a preset references a non-default\n * font family.\n */\n\nconst marwesPreset: ThemeInput = {\n  mode: \"light\",\n  personality: \"flat\",\n  color: {\n    primary: \"#2F31FC\",\n  },\n  ui: { radius: 4, density: \"comfortable\" },\n}\n\nconst cyberPreset: ThemeInput = {\n  mode: \"dark\",\n  tone: \"digital\",\n  personality: \"glow\",\n  color: {\n    primary: \"#FFE500\",\n    background: \"#0A0A0F\",\n    surface: \"#12121A\",\n    surfaceElevated: \"#1B1B26\",\n    text: \"#F4F4F5\",\n    textMuted: \"#A1A1AA\",\n    border: \"#27272A\",\n    borderStrong: \"#3F3F46\",\n  },\n  font: { primary: \"'Fira Code', ui-monospace, monospace\" },\n  ui: { radius: 0, density: \"compact\" },\n}\n\nconst editorialPreset: ThemeInput = {\n  mode: \"light\",\n  personality: \"outlined\",\n  color: {\n    primary: \"#8B1E3F\",\n    background: \"#FBF7F0\",\n    surface: \"#FFFFFF\",\n    text: \"#1B1B1F\",\n    textMuted: \"#5C5C63\",\n    border: \"#E5DFD2\",\n    borderStrong: \"#C6BFB0\",\n  },\n  font: { primary: \"'Playfair Display', Georgia, serif\" },\n  ui: { radius: 12, density: \"spacious\" },\n}\n\nconst sunsetPreset: ThemeInput = {\n  mode: \"light\",\n  personality: \"soft\",\n  color: {\n    primary: \"#F97316\",\n    background: \"#FFF8F2\",\n    surface: \"#FFFFFF\",\n    text: \"#2B1E17\",\n    textMuted: \"#8B6E5A\",\n    border: \"#F5DFC7\",\n    borderStrong: \"#E9C29A\",\n  },\n  font: { primary: \"'Nunito', system-ui, sans-serif\" },\n  ui: { radius: 16, density: \"comfortable\" },\n}\n\nconst nordicPreset: ThemeInput = {\n  mode: \"light\",\n  personality: \"outlined\",\n  color: {\n    primary: \"#475569\",\n    background: \"#F1F5F9\",\n    surface: \"#F8FAFC\",\n    text: \"#0F172A\",\n    textMuted: \"#64748B\",\n    border: \"#CBD5E1\",\n    borderStrong: \"#94A3B8\",\n  },\n  font: { primary: \"'Fira Code', ui-monospace, monospace\" },\n  ui: { radius: 2, density: \"compact\" },\n}\n\nconst themePresets: readonly ThemeInput[] = [\n  marwesPreset,\n  cyberPreset,\n  editorialPreset,\n  sunsetPreset,\n  nordicPreset,\n]\n\nexport { cyberPreset, editorialPreset, marwesPreset, nordicPreset, sunsetPreset, themePresets }\n","import type { ThemeInput } from \"@marwes-ui/core\"\nimport \"@fontsource/instrument-sans/400.css\"\nimport \"@fontsource/instrument-sans/500.css\"\nimport \"@fontsource/instrument-sans/600.css\"\nimport \"@fontsource/instrument-sans/700.css\"\n\nexport {\n  cyberPreset,\n  editorialPreset,\n  marwesPreset,\n  nordicPreset,\n  sunsetPreset,\n  themePresets,\n} from \"./presets\"\n\n// Explicit ThemeInput for consumers that still want to import the preset object.\n// MarwesProvider uses the same first edition baseline when no theme is provided.\nexport const firstEditionTheme: ThemeInput = {\n  color: {\n    primary: {\n      base: \"#2F31FC\",\n      hover: \"#2527CA\",\n      pressed: \"#1B1D97\",\n      disabled: \"#8182FC\",\n      label: \"#FFFFFF\",\n      labelDisabled: \"rgba(255,255,255,0.5)\",\n    },\n    danger: {\n      base: \"#D90429\",\n      hover: \"#A8031F\",\n      pressed: \"#780215\",\n      disabled: \"#FF8A95\",\n      label: \"#FFFFFF\",\n      labelDisabled: \"rgba(255,255,255,0.5)\",\n    },\n    success: \"#006633\",\n    warning: \"#B45309\",\n    background: \"#FFFFFF\",\n    surface: \"#F8F8F8\",\n    surfaceSubtle: \"#F5F5F5\",\n    surfaceElevated: \"#FFFFFF\",\n    surfaceDisabled: \"#F5F5F5\",\n    surfaceInverted: \"#141414\",\n    text: \"#141414\",\n    textMuted: \"#595959\",\n    textSubtle: \"#737373\",\n    textDisabled: \"#737373\",\n    textInverted: \"#FFFFFF\",\n    border: \"#D8D8D8\",\n    borderSubtle: \"#D8D8D8\",\n    borderStrong: \"#A3A3A3\",\n    borderDisabled: \"#D8D8D8\",\n    focus: \"#2F31FC\",\n  },\n  font: { primary: \"'Instrument Sans', Inter, system-ui, sans-serif\" },\n  ui: { radius: 4, density: \"comfortable\" },\n}\n"]}

package/dist/firstEdition/index.d.ts

@@ -1,5 +1,22 @@
 import { 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.
+ */
+declare const marwesPreset: ThemeInput;
+declare const cyberPreset: ThemeInput;
+declare const editorialPreset: ThemeInput;
+declare const sunsetPreset: ThemeInput;
+declare const nordicPreset: ThemeInput;
+declare const themePresets: readonly ThemeInput[];
+
 declare const firstEditionTheme: ThemeInput;
 
-export { firstEditionTheme };
+export { cyberPreset, editorialPreset, firstEditionTheme, marwesPreset, nordicPreset, sunsetPreset, themePresets };

package/dist/firstEdition/index.js

@@ -1,3 +1,3 @@
-export { firstEditionTheme } from '../chunk-62D3F6GN.js';
+export { cyberPreset, editorialPreset, firstEditionTheme, marwesPreset, nordicPreset, sunsetPreset, themePresets } from '../chunk-PWG4S55U.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { firstEditionTheme } from './firstEdition/index.js';
+export { cyberPreset, editorialPreset, firstEditionTheme, marwesPreset, nordicPreset, sunsetPreset, themePresets } from './firstEdition/index.js';
 export { ThemeInput } from '@marwes-ui/core';

package/dist/index.js

@@ -1,3 +1,3 @@
-export { firstEditionTheme } from './chunk-62D3F6GN.js';
+export { cyberPreset, editorialPreset, firstEditionTheme, marwesPreset, nordicPreset, sunsetPreset, themePresets } from './chunk-PWG4S55U.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marwes-ui/presets",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "publishConfig": {
     "access": "public"
   },
@@ -30,13 +30,13 @@
   ],
   "dependencies": {
     "@fontsource/instrument-sans": "5.2.8",
-    "@marwes-ui/core": "1.2.0"
+    "@marwes-ui/core": "1.4.0"
   },
   "devDependencies": {
     "rimraf": "6.1.2",
     "tsup": "8.5.1",
     "typescript": "5.9.3",
-    "vitest": "4.0.18"
+    "vitest": "4.1.8"
   },
   "scripts": {
     "dev": "tsup --watch",

package/src/firstEdition/accordion.css

@@ -12,7 +12,8 @@
  *   border           #d8d8d8
  *   focus border     #2f31fc
  *   title            #141414
- *   icon/content     #595959
+ *   icon             #141414
+ *   content          #00000099
  *   disabled text    #737373
  *
  * Dark state colors:
@@ -22,32 +23,36 @@
  *   border           #474747
  *   focus border     #5859fc
  *   title            #f9fafb
- *   icon/content     #a3a3a3
+ *   icon             #f9fafb
+ *   content          #ffffff99
  *   disabled text    #595959
  */
 
 .mw-accordion {
   --mw-accordion-title: var(--mw-color-text);
-  --mw-accordion-icon: var(--mw-color-text-muted);
-  --mw-accordion-content: var(--mw-color-text-muted);
-  --mw-accordion-surface: var(--mw-color-surface-elevated);
+  --mw-accordion-icon: var(--mw-accordion-title);
+  --mw-accordion-content: color-mix(in srgb, var(--mw-color-text) 60%, transparent);
+  --mw-accordion-surface: var(--mw-color-surface-primary);
   --mw-accordion-surface-hover: var(--mw-color-surface-subtle);
   --mw-accordion-surface-pressed: var(--mw-color-border-subtle);
-  --mw-accordion-border: var(--mw-color-border-subtle);
+  --mw-accordion-border: var(--mw-color-border-low);
   --mw-accordion-focus-border: var(--mw-color-focus, #2f31fc);
   --mw-accordion-title-disabled: var(--mw-color-text-disabled);
   --mw-accordion-icon-disabled: var(--mw-color-text-disabled);
   --mw-accordion-content-disabled: var(--mw-color-text-disabled);
 
+  box-sizing: border-box;
   width: 100%;
   background: var(--mw-accordion-surface);
   border: 1px solid var(--mw-accordion-border);
   border-radius: var(--mw-ui-radius, 6px);
+  -webkit-font-smoothing: antialiased;
   overflow: hidden;
   transition: background-color 150ms ease, border-color 150ms ease;
 }
 
 .mw-accordion__trigger {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -66,6 +71,7 @@
   font-size: var(--mw-density-font-size, 14px);
   font-weight: 500;
   line-height: 16px;
+  letter-spacing: var(--mw-typography-text-label-letter-spacing, -0.42px);
   color: var(--mw-accordion-title);
 }
 
@@ -87,7 +93,7 @@
 }
 
 .mw-accordion--open .mw-accordion__icon {
-  transform: rotate(180deg);
+  transform: none;
 }
 
 .mw-accordion:not(.mw-accordion--disabled):hover {
@@ -108,10 +114,13 @@
 }
 
 .mw-accordion__content {
+  box-sizing: border-box;
   padding: 0 16px 16px;
   font-family: var(--mw-font-primary, inherit);
   font-size: var(--mw-density-font-size, 14px);
-  line-height: 20px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: var(--mw-typography-text-label-letter-spacing, -0.42px);
   color: var(--mw-accordion-content);
 }
 
@@ -125,14 +134,18 @@
   cursor: not-allowed;
 }
 
+.mw-accordion--error .mw-accordion__title {
+  color: var(--mw-color-status-error-text);
+}
+
 .mw-theme--dark .mw-accordion {
   --mw-accordion-title: var(--mw-color-text);
-  --mw-accordion-icon: var(--mw-color-text-muted);
-  --mw-accordion-content: var(--mw-color-text-muted);
-  --mw-accordion-surface: var(--mw-color-surface-elevated);
+  --mw-accordion-icon: var(--mw-accordion-title);
+  --mw-accordion-content: color-mix(in srgb, var(--mw-color-text) 60%, transparent);
+  --mw-accordion-surface: var(--mw-color-surface-primary, #0f0f0f);
   --mw-accordion-surface-hover: var(--mw-color-surface-subtle);
   --mw-accordion-surface-pressed: var(--mw-color-border);
-  --mw-accordion-border: var(--mw-color-border-subtle);
+  --mw-accordion-border: var(--mw-color-border-low);
   --mw-accordion-focus-border: var(--mw-color-focus, #5859fc);
   --mw-accordion-title-disabled: var(--mw-color-text-disabled);
   --mw-accordion-icon-disabled: var(--mw-color-text-disabled);

package/src/firstEdition/avatar.css

@@ -2,6 +2,8 @@
  * Avatar component styles
  * Figma refs:
  * - .figma/marwes/components/avatar.json
+ * - .figma/marwes/components/avatar-badge.json
+ * - .figma/marwes/components/avatar-group.json
  * - .figma/marwes/pages/-avatar/-avatar_1574-27460.json
  * - .figma/marwes/pages/-avatar/-avatar-dark_1574-27570.json
  *
@@ -68,9 +70,13 @@
 }
 
 .mw-avatar--icon {
-  --mw-avatar-surface: var(--mw-color-surface-elevated);
+  --mw-avatar-surface: var(--mw-color-surface-primary, #ffffff);
   --mw-avatar-border-width: 1px;
-  --mw-avatar-border-color: var(--mw-color-border);
+  --mw-avatar-border-color: color-mix(
+    in srgb,
+    var(--mw-color-border-full, #000000) 20%,
+    transparent
+  );
   --mw-avatar-label: var(--mw-color-text-muted);
 }
 
@@ -105,15 +111,19 @@
 }
 
 .mw-theme--dark .mw-avatar--icon {
-  --mw-avatar-surface: var(--mw-color-surface-elevated);
-  --mw-avatar-border-color: var(--mw-color-border);
+  --mw-avatar-surface: var(--mw-color-surface-elevated, #2b2b2b);
+  --mw-avatar-border-color: color-mix(
+    in srgb,
+    var(--mw-color-border-full, #ffffff) 30%,
+    transparent
+  );
   --mw-avatar-label: var(--mw-color-text-muted);
 }
 
 .mw-theme--dark .mw-avatar--image {
   --mw-avatar-surface: var(--mw-color-surface-elevated);
   --mw-avatar-border-color: var(--mw-color-border-subtle);
-  --mw-avatar-image-fallback: var(--mw-color-primary-disabled);
+  --mw-avatar-image-fallback: var(--mw-color-primary-base, #5859fc);
 }
 
 .mw-avatar-badge {
@@ -152,10 +162,11 @@
 
 .mw-avatar-group {
   --mw-avatar-group-overlap: 12px;
-  --mw-avatar-group-stroke: var(--mw-color-surface, #f9fafb);
-  --mw-avatar-group-stroke-width: 2.5px;
-  --mw-avatar-group-counter-surface: var(--mw-color-surface, #f9fafb);
-  --mw-avatar-group-counter-label: var(--mw-color-text-muted);
+  --mw-avatar-group-stroke: var(--mw-color-surface-elevated, #ffffff);
+  --mw-avatar-group-stroke-width: 2px;
+  --mw-avatar-group-counter-surface: var(--mw-color-surface-inverted, #141414);
+  --mw-avatar-group-counter-stroke: var(--mw-avatar-group-stroke);
+  --mw-avatar-group-counter-label: var(--mw-color-text-inverted, #ffffff);
 
   min-inline-size: 0;
   display: inline-flex;
@@ -179,6 +190,12 @@
   box-shadow: 0 0 0 var(--mw-avatar-group-stroke-width) var(--mw-avatar-group-stroke);
 }
 
+.mw-avatar-group__item > .mw-avatar--icon {
+  --mw-avatar-surface: var(--mw-color-surface, #f8f8f8);
+  --mw-avatar-border-width: 0px;
+  --mw-avatar-border-color: transparent;
+}
+
 .mw-avatar-group__counter {
   display: inline-flex;
   align-items: center;
@@ -187,18 +204,19 @@
   height: 40px;
   border-radius: 9999px;
   background: var(--mw-avatar-group-counter-surface);
-  box-shadow: 0 0 0 var(--mw-avatar-group-stroke-width) var(--mw-avatar-group-counter-surface);
+  box-shadow: 0 0 0 var(--mw-avatar-group-stroke-width) var(--mw-avatar-group-counter-stroke);
   color: var(--mw-avatar-group-counter-label);
   font-family: var(--mw-font-primary, inherit);
   font-size: 12px;
   font-weight: 500;
-  line-height: 16px;
+  line-height: 12px;
   letter-spacing: -0.36px;
   box-sizing: border-box;
 }
 
 .mw-theme--dark .mw-avatar-group {
-  --mw-avatar-group-stroke: var(--mw-color-surface, #141414);
-  --mw-avatar-group-counter-surface: var(--mw-color-surface, #141414);
-  --mw-avatar-group-counter-label: var(--mw-color-text-muted);
+  --mw-avatar-group-stroke: var(--mw-avatar-group-dark-stroke, #000000);
+  --mw-avatar-group-counter-surface: var(--mw-color-surface-inverted, #ffffff);
+  --mw-avatar-group-counter-stroke: var(--mw-avatar-group-stroke);
+  --mw-avatar-group-counter-label: var(--mw-color-text-inverted, #141414);
 }

package/src/firstEdition/badge.css

@@ -1,13 +1,12 @@
 /*
  * Badge Component Styles
  * Validated against:
- * - .figma/marwes/components/checkboxbadge.json
+ * - .figma/marwes/components/badge.json
  * - .figma/marwes/pages/-badge/-badge_1364-11603.json
  * - .figma/marwes/pages/-badge/-badge-dark_2276-56582.json
  * - .figma/marwes/pages/-badge/component-container_1369-6125.json
  *
- * The live sync uses exact semantic badge tones rather than generic color-mix()
- * derivations, especially for the remaining semantic tones and dark-mode surfaces.
+ * The live sync follows status-display/* bindings in Figma.
  */
 
 .mw-badge {
@@ -38,49 +37,33 @@
    ============================================ */
 
 .mw-badge--neutral {
-  --mw-badge-surface: var(--mw-color-surface-subtle);
-  --mw-badge-border: var(--mw-color-border-subtle);
-  --mw-badge-label: var(--mw-color-text-muted);
+  --mw-badge-surface: var(--mw-color-surface-primary, #ffffff);
+  --mw-badge-border: var(--mw-color-border-low, #00000026);
+  --mw-badge-label: var(--mw-color-text-muted, #595959);
 }
 
 .mw-badge--info {
-  --mw-badge-surface: color-mix(in srgb, var(--mw-color-info-base) 12%, var(--mw-color-surface));
-  --mw-badge-border: color-mix(
-    in srgb,
-    var(--mw-color-info-base) 45%,
-    var(--mw-color-border-subtle)
-  );
-  --mw-badge-label: var(--mw-color-info-base);
+  --mw-badge-surface: var(--mw-color-status-info-background, #eeeeff);
+  --mw-badge-border: var(--mw-color-status-info-border, #ababfd);
+  --mw-badge-label: var(--mw-color-status-info-text, #1b1d97);
 }
 
 .mw-badge--success {
-  --mw-badge-surface: color-mix(in srgb, var(--mw-color-success-base) 12%, var(--mw-color-surface));
-  --mw-badge-border: color-mix(
-    in srgb,
-    var(--mw-color-success-base) 45%,
-    var(--mw-color-border-subtle)
-  );
-  --mw-badge-label: var(--mw-color-success-base);
+  --mw-badge-surface: var(--mw-color-status-success-background, #e6f4ed);
+  --mw-badge-border: var(--mw-color-status-success-border, #90caad);
+  --mw-badge-label: var(--mw-color-status-success-text, #006633);
 }
 
 .mw-badge--warning {
-  --mw-badge-surface: color-mix(in srgb, var(--mw-color-warning-base) 16%, var(--mw-color-surface));
-  --mw-badge-border: color-mix(
-    in srgb,
-    var(--mw-color-warning-base) 50%,
-    var(--mw-color-border-subtle)
-  );
-  --mw-badge-label: color-mix(in srgb, var(--mw-color-warning-base) 80%, var(--mw-color-text));
+  --mw-badge-surface: var(--mw-color-status-warning-background, #fff8e6);
+  --mw-badge-border: var(--mw-color-status-warning-border, #b45309);
+  --mw-badge-label: var(--mw-color-status-warning-text, #b45309);
 }
 
 .mw-badge--error {
-  --mw-badge-surface: color-mix(in srgb, var(--mw-color-danger-base) 12%, var(--mw-color-surface));
-  --mw-badge-border: color-mix(
-    in srgb,
-    var(--mw-color-danger-base) 45%,
-    var(--mw-color-border-subtle)
-  );
-  --mw-badge-label: color-mix(in srgb, var(--mw-color-danger-base) 80%, var(--mw-color-text));
+  --mw-badge-surface: var(--mw-color-status-error-background, #ffe8eb);
+  --mw-badge-border: var(--mw-color-status-error-border, #ff8a95);
+  --mw-badge-label: var(--mw-color-status-error-text, #a8031f);
 }
 
 /* ============================================
@@ -88,52 +71,40 @@
    ============================================ */
 
 .mw-theme--dark .mw-badge--neutral {
-  --mw-badge-surface: var(--mw-color-surface-subtle);
-  --mw-badge-border: var(--mw-color-border-subtle);
+  --mw-badge-surface: var(--mw-color-surface-primary);
+  --mw-badge-border: var(--mw-color-border-low, #ffffff26);
   --mw-badge-label: var(--mw-color-text-muted);
 }
 
 .mw-theme--dark .mw-badge--info {
-  --mw-badge-surface: color-mix(in srgb, var(--mw-color-info-base) 18%, var(--mw-color-surface));
-  --mw-badge-border: color-mix(
-    in srgb,
-    var(--mw-color-info-base) 55%,
-    var(--mw-color-border-subtle)
-  );
-  --mw-badge-label: color-mix(in srgb, var(--mw-color-info-base) 80%, var(--mw-color-text));
+  --mw-badge-surface: var(--mw-color-status-info-background, #040519);
+  --mw-badge-border: var(--mw-color-status-info-border, #8182fc);
+  --mw-badge-label: var(--mw-color-status-info-text, #ababfd);
 }
 
 .mw-theme--dark .mw-badge--success {
-  --mw-badge-surface: color-mix(in srgb, var(--mw-color-success-base) 18%, var(--mw-color-surface));
-  --mw-badge-border: color-mix(
-    in srgb,
-    var(--mw-color-success-base) 55%,
-    var(--mw-color-border-subtle)
-  );
-  --mw-badge-label: var(--mw-color-success-base);
+  --mw-badge-surface: var(--mw-color-status-success-background, #001a0c);
+  --mw-badge-border: var(--mw-color-status-success-border, #5db189);
+  --mw-badge-label: var(--mw-color-status-success-text, #90caad);
 }
 
 .mw-theme--dark .mw-badge--warning {
-  --mw-badge-surface: color-mix(in srgb, var(--mw-color-warning-base) 20%, var(--mw-color-surface));
-  --mw-badge-border: color-mix(
-    in srgb,
-    var(--mw-color-warning-base) 60%,
-    var(--mw-color-border-subtle)
-  );
-  --mw-badge-label: var(--mw-color-warning-base);
+  --mw-badge-surface: var(--mw-color-status-warning-background, #221004);
+  --mw-badge-border: var(--mw-color-status-warning-border, #b45309);
+  --mw-badge-label: var(--mw-color-status-warning-text, #fcc94a);
 }
 
 .mw-theme--dark .mw-badge--error {
-  --mw-badge-surface: color-mix(in srgb, var(--mw-color-danger-base) 18%, var(--mw-color-surface));
-  --mw-badge-border: color-mix(
-    in srgb,
-    var(--mw-color-danger-base) 55%,
-    var(--mw-color-border-subtle)
-  );
-  --mw-badge-label: color-mix(in srgb, var(--mw-color-danger-base) 70%, var(--mw-color-text));
+  --mw-badge-surface: var(--mw-color-status-error-background, #240006);
+  --mw-badge-border: var(--mw-color-status-error-border, #ff2847);
+  --mw-badge-label: var(--mw-color-status-error-text, #ff5566);
 }
 
 .mw-badge-group__items {
   display: inline-flex;
   gap: var(--mw-spacing-sp-4);
 }
+
+.mw-badge-group__label .mw-text {
+  color: inherit;
+}