@marwes-ui/presets 1.1.0 → 1.3.0

package/README.md

@@ -1,6 +1,8 @@
+Static preset CSS and theme exports for Marwes React, Vue, and custom adapter projects.
+
 <div align="center">
 
-<img alt="Marwes Design System" src="https://raw.githubusercontent.com/niklas-westman/marwes/main/.github/assets/banner.png" width="100%" style="border-radius: 40px;">
+<img alt="Marwes Design System" src="https://raw.githubusercontent.com/niklas-westman/marwes/main/.github/assets/cover-v3.png" width="100%" style="border-radius: 40px;">
 
 <br>
 <br>
@@ -11,7 +13,7 @@
 
 Static `.mw-*` CSS • CSS variables • Default Marwes visuals • No runtime CSS-in-JS
 
-[Documentation](https://github.com/niklas-westman/marwes/tree/main/docs) • [Storybook](https://d3hobet9plpuvm.cloudfront.net/storybook-react/latest/) • [GitHub](https://github.com/niklas-westman/marwes)
+[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)
 
 </div>
 

package/dist/chunk-62D3F6GN.js

@@ -0,0 +1,49 @@
+import '@fontsource/instrument-sans/400.css';
+import '@fontsource/instrument-sans/500.css';
+import '@fontsource/instrument-sans/600.css';
+
+// 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 { firstEditionTheme };
+//# sourceMappingURL=chunk-62D3F6GN.js.map
+//# sourceMappingURL=chunk-62D3F6GN.js.map

package/dist/chunk-62D3F6GN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/firstEdition/index.ts"],"names":[],"mappings":";;;;;AAOO,IAAM,iBAAA,GAAgC;AAAA,EAC3C,KAAA,EAAO;AAAA,IACL,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,SAAA;AAAA,MACN,KAAA,EAAO,SAAA;AAAA,MACP,OAAA,EAAS,SAAA;AAAA,MACT,QAAA,EAAU,SAAA;AAAA,MACV,KAAA,EAAO,SAAA;AAAA,MACP,aAAA,EAAe;AAAA,KACjB;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,IAAA,EAAM,SAAA;AAAA,MACN,KAAA,EAAO,SAAA;AAAA,MACP,OAAA,EAAS,SAAA;AAAA,MACT,QAAA,EAAU,SAAA;AAAA,MACV,KAAA,EAAO,SAAA;AAAA,MACP,aAAA,EAAe;AAAA,KACjB;AAAA,IACA,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS,SAAA;AAAA,IACT,UAAA,EAAY,SAAA;AAAA,IACZ,OAAA,EAAS,SAAA;AAAA,IACT,aAAA,EAAe,SAAA;AAAA,IACf,eAAA,EAAiB,SAAA;AAAA,IACjB,eAAA,EAAiB,SAAA;AAAA,IACjB,eAAA,EAAiB,SAAA;AAAA,IACjB,IAAA,EAAM,SAAA;AAAA,IACN,SAAA,EAAW,SAAA;AAAA,IACX,UAAA,EAAY,SAAA;AAAA,IACZ,YAAA,EAAc,SAAA;AAAA,IACd,YAAA,EAAc,SAAA;AAAA,IACd,MAAA,EAAQ,SAAA;AAAA,IACR,YAAA,EAAc,SAAA;AAAA,IACd,YAAA,EAAc,SAAA;AAAA,IACd,cAAA,EAAgB,SAAA;AAAA,IAChB,KAAA,EAAO;AAAA,GACT;AAAA,EACA,IAAA,EAAM,EAAE,OAAA,EAAS,iDAAA,EAAkD;AAAA,EACnE,EAAA,EAAI,EAAE,MAAA,EAAQ,CAAA,EAAG,SAAS,aAAA;AAC5B","file":"chunk-62D3F6GN.js","sourcesContent":["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\"\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.js

@@ -1,3 +1,3 @@
-export { firstEditionTheme } from '../chunk-2JNIKK66.js';
+export { firstEditionTheme } from '../chunk-62D3F6GN.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js

@@ -1,3 +1,3 @@
-export { firstEditionTheme } from './chunk-2JNIKK66.js';
+export { firstEditionTheme } from './chunk-62D3F6GN.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marwes-ui/presets",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -30,7 +30,7 @@
   ],
   "dependencies": {
     "@fontsource/instrument-sans": "5.2.8",
-    "@marwes-ui/core": "1.1.0"
+    "@marwes-ui/core": "1.3.0"
   },
   "devDependencies": {
     "rimraf": "6.1.2",

package/src/firstEdition/accordion.css

@@ -7,9 +7,9 @@
  *
  * Light state colors:
  *   default surface  #ffffff
- *   hover surface    #f3f4f6
- *   pressed surface  #e5e7eb
- *   border           #e5e7eb
+ *   hover surface    #f5f5f5
+ *   pressed surface  #d8d8d8
+ *   border           #d8d8d8
  *   focus border     #2f31fc
  *   title            #141414
  *   icon/content     #595959
@@ -129,7 +129,7 @@
   --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-surface: var(--mw-color-background, #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);

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,9 @@
 }
 
 .mw-avatar--icon {
-  --mw-avatar-surface: var(--mw-color-surface-elevated);
-  --mw-avatar-border-width: 1px;
-  --mw-avatar-border-color: var(--mw-color-border);
+  --mw-avatar-surface: var(--mw-color-surface, #f8f8f8);
+  --mw-avatar-border-width: 0px;
+  --mw-avatar-border-color: transparent;
   --mw-avatar-label: var(--mw-color-text-muted);
 }
 
@@ -105,8 +107,8 @@
 }
 
 .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, #1a1a1a);
+  --mw-avatar-border-color: transparent;
   --mw-avatar-label: var(--mw-color-text-muted);
 }
 
@@ -142,7 +144,7 @@
   height: var(--mw-avatar-badge-indicator-size);
   border: 2px solid var(--mw-color-surface, #f9fafb);
   border-radius: 9999px;
-  background: var(--mw-color-success-base, #16a34a);
+  background: var(--mw-color-success-base, #006633);
   box-sizing: border-box;
 }
 
@@ -152,10 +154,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;
@@ -187,18 +190,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

@@ -38,49 +38,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-subtle, #f5f5f5);
+  --mw-badge-border: var(--mw-color-border-subtle, #d8d8d8);
+  --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-strong, #5859fc);
+  --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-strong, #2e9970);
+  --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: var(--mw-color-warning-base);
+  --mw-badge-surface: var(--mw-color-status-warning-background, #fff8e6);
+  --mw-badge-border: var(--mw-color-status-warning-border-strong, #e46f00);
+  --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: var(--mw-color-danger-base);
+  --mw-badge-surface: var(--mw-color-status-error-background, #ffe8eb);
+  --mw-badge-border: var(--mw-color-status-error-border-strong, #ff2847);
+  --mw-badge-label: var(--mw-color-status-error-text, #a8031f);
 }
 
 /* ============================================
@@ -94,43 +78,27 @@
 }
 
 .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: var(--mw-color-info-base);
+  --mw-badge-surface: var(--mw-color-status-info-background, #040519);
+  --mw-badge-border: var(--mw-color-status-info-border-strong, #252599);
+  --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-strong, #006d48);
+  --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-strong, #b45308);
+  --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: var(--mw-color-danger-base);
+  --mw-badge-surface: var(--mw-color-status-error-background, #240006);
+  --mw-badge-border: var(--mw-color-status-error-border-strong, #ff2847);
+  --mw-badge-label: var(--mw-color-status-error-text, #ff5566);
 }
 
 .mw-badge-group__items {

package/src/firstEdition/button.css

@@ -6,7 +6,7 @@
    - States: default, hover, active, disabled, error
    - Variants: primary, secondary, text
    - Icon positions: left, right, none
-   - Focus: 2px #2684FF outline + 2px offset
+   - Focus: 2px #2f31fc outline + 2px offset
    - Disabled: opacity 20% (light), 40% (dark)
    
    Figma Variants:
@@ -58,16 +58,16 @@
 /* SECONDARY - Outlined button */
 .mw-btn--secondary {
   background: transparent;
-  color: var(--mw-color-primary-base);
-  border-color: var(--mw-color-primary-base);
+  color: var(--mw-color-secondary-label);
+  border-color: var(--mw-color-secondary-border);
 }
 
 .mw-btn--secondary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--mw-color-primary-base) 8%, transparent);
+  background: var(--mw-color-secondary-hover);
 }
 
 .mw-btn--secondary:active:not(:disabled) {
-  background: color-mix(in srgb, var(--mw-color-primary-base) 12%, transparent);
+  background: var(--mw-color-secondary-pressed);
 }
 
 /* NEUTRAL - Quiet outlined button for cancel/close/filter-style actions */

package/src/firstEdition/card.css

@@ -10,10 +10,10 @@
  * - body: 14/18, weight 400
  *
  * Light mode:
- * - default border: #e5e7eb
+ * - default border: #d8d8d8
  * - hover/pressed border: #a3a3a3
  * - focus border: #2f31fc
- * - disabled surface: #f3f4f6
+ * - disabled surface: #f5f5f5
  * - disabled text: #737373
  *
  * Dark mode:
@@ -26,7 +26,7 @@
 
 .mw-card {
   --mw-card-surface: var(--mw-color-surface-elevated, #ffffff);
-  --mw-card-border: var(--mw-color-border-subtle, #e5e7eb);
+  --mw-card-border: var(--mw-color-border-subtle, #d8d8d8);
   --mw-card-title: var(--mw-color-text, #141414);
   --mw-card-body: color-mix(
     in srgb,
@@ -90,8 +90,8 @@
 .mw-card--disabled,
 .mw-card[data-disabled="true"],
 .mw-card[aria-disabled="true"] {
-  --mw-card-surface: var(--mw-color-surface-disabled, #f3f4f6);
-  --mw-card-border: var(--mw-color-border-disabled, #e5e7eb);
+  --mw-card-surface: var(--mw-color-surface-disabled, #f5f5f5);
+  --mw-card-border: var(--mw-color-border-disabled, #d8d8d8);
   --mw-card-title: var(--mw-color-text-disabled, #737373);
   --mw-card-body: var(--mw-color-text-disabled, #737373);
 

package/src/firstEdition/date-picker.css

@@ -0,0 +1,228 @@
+.mw-date-picker {
+  --mw-date-picker-surface: var(--mw-color-surface, #f8f8f8);
+  --mw-date-picker-page-surface: var(--mw-color-page, #f5f5f5);
+  --mw-date-picker-text: var(--mw-color-text, #141414);
+  --mw-date-picker-muted: var(--mw-color-text-muted, #595959);
+  --mw-date-picker-placeholder: var(--mw-color-text-subtle, #595959);
+  --mw-date-picker-icon-muted: var(--mw-color-icon-muted, #a3a3a3);
+  --mw-date-picker-border: var(--mw-color-border-subtle, #d8d8d8);
+  --mw-date-picker-divider: var(--mw-color-border, #d8d8d8);
+  --mw-date-picker-hover: var(--mw-color-surface-muted, #f5f5f5);
+  --mw-date-picker-accent: var(--mw-color-primary-base, var(--mw-color-accent, #2f31fc));
+  --mw-date-picker-accent-text: var(--mw-color-on-primary, #ffffff);
+  --mw-date-picker-range: var(
+    --mw-color-primary-subtle,
+    color-mix(in srgb, var(--mw-date-picker-accent) 7%, #ffffff)
+  );
+  --mw-date-picker-radius: var(--mw-radius-lg, 0.875rem);
+  --mw-date-picker-day-radius: var(--mw-radius-sm, 0.375rem);
+
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  inline-size: 18.375rem;
+  overflow: hidden;
+  color: var(--mw-date-picker-text);
+  background: var(--mw-date-picker-surface);
+  border: 1px solid var(--mw-date-picker-border);
+  border-radius: var(--mw-date-picker-radius);
+  box-shadow: 0 1px 2px rgb(20 20 20 / 4%);
+  font-family: var(--mw-font-family-sans, "Instrument Sans", system-ui, sans-serif);
+}
+
+.mw-date-picker--mobile {
+  inline-size: min(23.4375rem, 100%);
+}
+
+.mw-date-picker__header {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  min-block-size: 2.5rem;
+  padding: 0.5rem 1rem;
+}
+
+.mw-date-picker__nav-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.mw-date-picker__nav-group:last-child {
+  justify-content: flex-end;
+}
+
+.mw-date-picker__month-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: -0.02625rem;
+  line-height: 1rem;
+}
+
+.mw-date-picker__nav-button,
+.mw-date-picker__footer-button,
+.mw-date-picker__day {
+  appearance: none;
+  border: 0;
+  font: inherit;
+}
+
+.mw-date-picker__nav-button {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 1rem;
+  block-size: 1rem;
+  color: var(--mw-date-picker-muted);
+  background: transparent;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.mw-date-picker__nav-button:hover {
+  background: var(--mw-date-picker-hover);
+}
+
+.mw-date-picker__grid {
+  display: grid;
+  gap: 0;
+  padding: 0 1rem 0.5rem;
+  border-collapse: collapse;
+}
+
+.mw-date-picker__grid thead,
+.mw-date-picker__grid tbody {
+  display: grid;
+}
+
+.mw-date-picker__week,
+.mw-date-picker__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 2.125rem);
+  gap: 0.25rem;
+}
+
+.mw-date-picker__cell {
+  padding: 0;
+}
+
+.mw-date-picker__weekday {
+  display: grid;
+  place-items: center;
+  inline-size: 2.125rem;
+  block-size: 2.125rem;
+  color: var(--mw-date-picker-text);
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: -0.02625rem;
+  line-height: 1rem;
+}
+
+.mw-date-picker__day {
+  position: relative;
+  display: grid;
+  place-items: center;
+  inline-size: 2.125rem;
+  block-size: 2.125rem;
+  margin: 0;
+  color: var(--mw-date-picker-text);
+  background: transparent;
+  border-radius: var(--mw-date-picker-day-radius);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: -0.02625rem;
+  line-height: 1rem;
+}
+
+.mw-date-picker__day--hover,
+.mw-date-picker__day:hover:not(:disabled) {
+  background: var(--mw-date-picker-hover);
+}
+
+.mw-date-picker__day--range,
+.mw-date-picker__day--range-hover {
+  background: var(--mw-date-picker-range);
+}
+
+.mw-date-picker__day--range-hover::after {
+  position: absolute;
+  inset: 0;
+  content: "";
+  background: color-mix(in srgb, var(--mw-date-picker-accent) 10%, transparent);
+  border-radius: inherit;
+}
+
+.mw-date-picker__day--selected {
+  color: var(--mw-date-picker-accent-text);
+  background: var(--mw-date-picker-accent);
+  box-shadow: none;
+}
+
+.mw-date-picker__day--disabled {
+  color: color-mix(in srgb, var(--mw-date-picker-text) 30%, transparent);
+  cursor: not-allowed;
+}
+
+.mw-date-picker__day--null {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.mw-date-picker__day--today::before {
+  position: absolute;
+  inset-block-end: 0.25rem;
+  inline-size: 0.1875rem;
+  block-size: 0.1875rem;
+  content: "";
+  background: currentcolor;
+  border-radius: 999px;
+}
+
+.mw-date-picker__footer {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 0.5rem;
+  min-block-size: 3.25rem;
+  padding: 0.75rem 1rem 1rem;
+  border-block-start: 1px solid var(--mw-date-picker-divider);
+}
+
+.mw-date-picker__footer-button {
+  min-inline-size: 3.625rem;
+  min-block-size: 1.75rem;
+  padding-inline: 0.75rem;
+  color: var(--mw-date-picker-accent);
+  background: transparent;
+  border: 1px solid var(--mw-date-picker-accent);
+  border-radius: var(--mw-radius-sm, 0.25rem);
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 0.75rem;
+}
+
+.mw-date-picker__footer-button:hover {
+  background: color-mix(in srgb, var(--mw-date-picker-accent) 6%, #ffffff);
+}
+
+.mw-date-picker__footer-button--primary {
+  color: var(--mw-date-picker-accent-text);
+  background: var(--mw-date-picker-accent);
+}
+
+.mw-date-picker-demo {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 2rem;
+  background: var(--mw-date-picker-page-surface);
+  font-family: var(--mw-font-family-sans, "Instrument Sans", system-ui, sans-serif);
+}
+
+.mw-date-picker-demo__fields {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+  inline-size: 22.875rem;
+}

package/src/firstEdition/dialog.css

@@ -1,6 +1,6 @@
 .mw-dialog {
   --mw-dialog-surface: var(--mw-color-surface-elevated, #ffffff);
-  --mw-dialog-border: var(--mw-color-border-subtle, #e5e7eb);
+  --mw-dialog-border: var(--mw-color-border-subtle, #d8d8d8);
   --mw-dialog-divider: var(--mw-color-border-subtle, #00000033);
   --mw-dialog-title: var(--mw-color-text, #141414);
   --mw-dialog-description: color-mix(

package/src/firstEdition/index.ts

@@ -9,10 +9,38 @@ export const firstEditionTheme: ThemeInput = {
   color: {
     primary: {
       base: "#2F31FC",
+      hover: "#2527CA",
+      pressed: "#1B1D97",
+      disabled: "#8182FC",
       label: "#FFFFFF",
       labelDisabled: "rgba(255,255,255,0.5)",
     },
-    success: "#00875A",
+    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" },