@marwes-ui/presets 1.1.0 → 1.2.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.2.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.2.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

package/src/firstEdition/avatar.css

@@ -142,7 +142,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;
 }
 

package/src/firstEdition/badge.css

@@ -70,7 +70,7 @@
     var(--mw-color-warning-base) 50%,
     var(--mw-color-border-subtle)
   );
-  --mw-badge-label: var(--mw-color-warning-base);
+  --mw-badge-label: color-mix(in srgb, var(--mw-color-warning-base) 80%, var(--mw-color-text));
 }
 
 .mw-badge--error {
@@ -80,7 +80,7 @@
     var(--mw-color-danger-base) 45%,
     var(--mw-color-border-subtle)
   );
-  --mw-badge-label: var(--mw-color-danger-base);
+  --mw-badge-label: color-mix(in srgb, var(--mw-color-danger-base) 80%, var(--mw-color-text));
 }
 
 /* ============================================
@@ -100,7 +100,7 @@
     var(--mw-color-info-base) 55%,
     var(--mw-color-border-subtle)
   );
-  --mw-badge-label: var(--mw-color-info-base);
+  --mw-badge-label: color-mix(in srgb, var(--mw-color-info-base) 80%, var(--mw-color-text));
 }
 
 .mw-theme--dark .mw-badge--success {
@@ -130,7 +130,7 @@
     var(--mw-color-danger-base) 55%,
     var(--mw-color-border-subtle)
   );
-  --mw-badge-label: var(--mw-color-danger-base);
+  --mw-badge-label: color-mix(in srgb, var(--mw-color-danger-base) 70%, var(--mw-color-text));
 }
 
 .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" },

package/src/firstEdition/molecules/accordion-field.css

@@ -24,23 +24,22 @@
 }
 
 .mw-accordion-field__description {
-  opacity: 0.6;
   font-size: 0.875em;
-  color: var(--mw-color-text-muted, #6b7280);
+  color: var(--mw-color-text-muted, #595959);
 }
 
 .mw-accordion-field__error {
   font-size: 0.875em;
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }
 
 /* State modifiers */
 .mw-accordion-field--disabled {
-  opacity: 0.7;
+  color: var(--mw-color-text-disabled, #595959);
   cursor: not-allowed;
 }
 
 .mw-accordion-field--invalid .mw-accordion-field__label .mw-p,
 .mw-accordion-field--invalid .mw-accordion-field__error .mw-p {
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }

package/src/firstEdition/molecules/checkbox-field.css

@@ -43,7 +43,7 @@
     var(--mw-density-gap) /* checkbox size + margin + spacing to textfield */
   );
   font-size: var(--mw-density-font-size-sm);
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }
 
 /* Optional state hooks */

package/src/firstEdition/molecules/checkbox-group-field.css

@@ -42,7 +42,7 @@
 
 .mw-checkbox-group-field__error {
   font-size: var(--mw-density-font-size-sm);
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }
 
 .mw-checkbox-group-field--disabled .mw-checkbox-group-field__option {
@@ -52,7 +52,7 @@
 
 .mw-checkbox-group-field--invalid .mw-checkbox-group-field__label .mw-p,
 .mw-checkbox-group-field--invalid .mw-checkbox-group-field__error .mw-p {
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }
 
 @supports selector(:has(*)) {

package/src/firstEdition/molecules/input-field.css

@@ -16,7 +16,6 @@
   border: none;
   cursor: pointer;
   user-select: none;
-  opacity: 0.6;
   transition: opacity 0.2s ease;
   text-align: left;
   font: inherit;
@@ -55,22 +54,22 @@
   background: transparent;
   border: none;
   cursor: pointer;
-  color: var(--mw-color-text-muted, #6b7280);
+  color: var(--mw-color-text-muted, #595959);
   transition: color 0.2s ease;
   border-radius: var(--mw-ui-radius, 4px);
 
   &:hover {
-    color: var(--mw-color-text, #111827);
-    background: var(--mw-color-surface, #f3f4f6);
+    color: var(--mw-color-text, #141414);
+    background: var(--mw-color-surface, #f5f5f5);
   }
 
   &:focus {
-    outline: 2px solid var(--mw-color-primary-base, #3b82f6);
+    outline: 2px solid var(--mw-color-primary-base, #2f31fc);
     outline-offset: 2px;
   }
 
   &:active {
-    background: var(--mw-color-border-subtle, #e5e7eb);
+    background: var(--mw-color-border-subtle, #d8d8d8);
   }
 }
 
@@ -81,7 +80,7 @@
   align-items: center;
   justify-content: center;
   padding: 6px; /* off-scale — no token */
-  color: var(--mw-color-text-muted, #6b7280);
+  color: var(--mw-color-text-muted, #595959);
   pointer-events: none;
 }
 
@@ -95,22 +94,22 @@
   background: transparent;
   border: none;
   cursor: pointer;
-  color: var(--mw-color-text-muted, #6b7280);
+  color: var(--mw-color-text-muted, #595959);
   transition: color 0.2s ease;
   border-radius: var(--mw-ui-radius, 4px);
 
   &:hover {
-    color: var(--mw-color-text, #111827);
-    background: var(--mw-color-surface, #f3f4f6);
+    color: var(--mw-color-text, #141414);
+    background: var(--mw-color-surface, #f5f5f5);
   }
 
   &:focus {
-    outline: 2px solid var(--mw-color-primary-base, #3b82f6);
+    outline: 2px solid var(--mw-color-primary-base, #2f31fc);
     outline-offset: 2px;
   }
 
   &:active {
-    background: var(--mw-color-border-subtle, #e5e7eb);
+    background: var(--mw-color-border-subtle, #d8d8d8);
   }
 }
 
@@ -120,7 +119,7 @@
   justify-content: center;
   padding-left: var(--mw-spacing-sp-16);
   white-space: nowrap;
-  color: var(--mw-color-text-muted, #6b7280);
+  color: var(--mw-color-text-muted, #595959);
   pointer-events: none;
   font-weight: 400;
   font-family: var(--mw-font-primary, inherit);
@@ -193,7 +192,6 @@
 
 /* Disabled — wrapper when symbol is present */
 .mw-input-field__input-wrapper:has(.mw-input-field__leading-symbol):has(:disabled) {
-  opacity: 0.2;
   cursor: not-allowed;
   pointer-events: none;
   border-color: var(--mw-color-border-disabled);
@@ -227,26 +225,25 @@
 }
 
 .mw-input-field__helper {
-  opacity: 0.6;
   font-size: 0.875em;
-  color: var(--mw-color-text-muted, #6b7280);
+  color: var(--mw-color-text-muted, #595959);
 }
 
 .mw-input-field__error {
   font-size: 0.875em;
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }
 
 /* State modifiers */
 .mw-input-field--disabled .mw-input-field__label {
   cursor: not-allowed;
-  opacity: 0.6;
+  color: var(--mw-color-text-disabled, #595959);
 }
 
 /* Disabled state overwrite hover/focus states */
 .mw-input-field--disabled:hover .mw-input-field__label,
 .mw-input-field--disabled:focus-within .mw-input-field__label {
-  opacity: 0.6;
+  color: var(--mw-color-text-disabled, #595959);
 }
 
 .mw-input-field--readonly .mw-input-field__label {
@@ -256,5 +253,5 @@
 .mw-input-field--invalid .mw-input-field__label .mw-p,
 .mw-input-field--invalid .mw-input-field__error .mw-p {
   /* Label styling when field has error - could add red accent if needed  */
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }

package/src/firstEdition/molecules/radio-group-field.css

@@ -44,7 +44,7 @@
 
 .mw-radio-group-field__error {
   font-size: var(--mw-density-font-size-sm);
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }
 
 /* State modifiers */
@@ -55,5 +55,5 @@
 
 .mw-radio-group-field--invalid .mw-radio-group-field__label .mw-p,
 .mw-radio-group-field--invalid .mw-radio-group-field__error .mw-p {
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }

package/src/firstEdition/molecules/slider-field.css

@@ -38,7 +38,7 @@
 }
 
 .mw-slider-field__description {
-  opacity: 0.75;
+  color: var(--mw-color-text-muted, #595959);
   font-size: var(--mw-density-font-size-sm);
 }
 
@@ -65,11 +65,11 @@
 
 .mw-slider-field__error {
   font-size: var(--mw-density-font-size-sm);
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }
 
 .mw-slider-field--disabled {
-  opacity: 0.7;
+  color: var(--mw-color-text-disabled, #595959);
 }
 
 .mw-slider-field--disabled .mw-slider-field__label,
@@ -79,5 +79,5 @@
 
 .mw-slider-field--invalid .mw-slider-field__label .mw-p,
 .mw-slider-field--invalid .mw-slider-field__error .mw-p {
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }

package/src/firstEdition/molecules/switch-field.css

@@ -23,7 +23,7 @@
 .mw-switch-field__error {
   margin-left: calc(var(--mw-spacing-sp-24) + var(--mw-density-gap));
   font-size: var(--mw-density-font-size-sm);
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }
 
 .mw-switch-field--disabled .mw-switch-field__label {
@@ -33,5 +33,5 @@
 
 .mw-switch-field--invalid .mw-switch-field__label .mw-p,
 .mw-switch-field--invalid .mw-switch-field__error .mw-p {
-  color: var(--mw-color-danger-base, #dc2626);
+  color: var(--mw-color-danger-base, #d90429);
 }

package/src/firstEdition/radio.css

@@ -4,8 +4,8 @@
  *
  * Tokens (from Figma nodes.json):
  *   radio/surface (light): #f9fafb    (dark): #141414
- *   radio/border  (light): #e5e7eb    (dark): #374151
- *   radio/dot     (light): #2f31fc    (dark): #2f31fc  (= primary-base)
+ *   radio/border  (light): #d8d8d8    (dark): #474747
+ *   radio/dot     (light): #2f31fc    (dark): #5859fc  (= primary-base)
  *   radio/label   (light): #141414    (dark): #f9fafb  (= text)
  *   Dimensions: 18×18px circle, 10px inner dot (from Figma)
  */

package/src/firstEdition/rich-text.css

@@ -72,7 +72,7 @@
 }
 
 .mw-rich-text__toolbar-button:hover:not(:disabled) {
-  background: var(--mw-color-surface-elevated, #f3f4f6);
+  background: var(--mw-color-surface-elevated, #f5f5f5);
   color: var(--mw-color-text);
 }
 

package/src/firstEdition/select.css

@@ -100,8 +100,8 @@
   --mw-dropdown-list-surface: var(--mw-color-surface-elevated);
   --mw-dropdown-list-border: var(--mw-color-border);
   --mw-dropdown-item-surface: var(--mw-color-surface-elevated);
-  --mw-dropdown-item-surface-hover: var(--mw-color-surface-subtle, #f3f4f6);
-  --mw-dropdown-item-surface-pressed: var(--mw-color-border-subtle, #e5e7eb);
+  --mw-dropdown-item-surface-hover: var(--mw-color-surface-subtle, #f5f5f5);
+  --mw-dropdown-item-surface-pressed: var(--mw-color-border-subtle, #d8d8d8);
   --mw-dropdown-item-label: var(--mw-color-text);
   --mw-dropdown-item-check: var(--mw-color-primary-base);
   position: relative;
@@ -335,3 +335,42 @@
 .mw-theme--dark .mw-select-field__list {
   box-shadow: 0 4px 12px rgb(0 0 0 / 0.4);
 }
+
+.mw-input-field--select-date {
+  gap: 4px; /* Figma date field frame spacing */
+}
+
+.mw-input-field--select-date .mw-input-field__label {
+  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-select-field__trigger {
+  min-height: 40px;
+  padding: 12px 16px;
+  border-color: var(--mw-color-border-subtle, #d8d8d8);
+  border-radius: var(--mw-ui-radius, 4px);
+  color: var(--mw-color-text-muted, #595959);
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: -0.42px;
+  line-height: 16px;
+}
+
+.mw-input-field--select-date .mw-select-field__trigger-icon {
+  inline-size: 16px;
+  block-size: 16px;
+  color: var(--mw-color-icon-muted, #a3a3a3);
+}

package/src/firstEdition/skeleton.css

@@ -0,0 +1,95 @@
+/*
+ * Skeleton styles
+ * Figma reference:
+ * - page frame: .figma/marwes/pages/skeleton/skeleton_1921-34816.json
+ * - text: 120×12, radius 4, black 4% opacity
+ * - dark mode: lifted neutral fill against dark surfaces
+ * - circular: 40×40, radius 100
+ * - rectangular: 120×120, radius 4
+ */
+
+.mw-skeleton {
+  --mw-skeleton-base-color: color-mix(in srgb, var(--mw-color-text, #141414) 4%, transparent);
+  --mw-skeleton-highlight-color: color-mix(
+    in srgb,
+    var(--mw-color-text-inverted, #ffffff) 24%,
+    var(--mw-skeleton-base-color)
+  );
+
+  display: inline-block;
+  inline-size: var(--mw-skeleton-width, 120px);
+  block-size: var(--mw-skeleton-height, 12px);
+  min-inline-size: 1px;
+  min-block-size: 1px;
+  border-radius: var(--mw-skeleton-radius, 4px);
+  background: var(--mw-skeleton-base-color);
+  overflow: hidden;
+  vertical-align: middle;
+  flex: none;
+}
+
+.mw-theme--dark .mw-skeleton {
+  --mw-skeleton-base-color: color-mix(
+    in srgb,
+    var(--mw-color-text, #f9fafb) 12%,
+    var(--mw-color-surface-elevated, #2b2b2b)
+  );
+  --mw-skeleton-highlight-color: color-mix(
+    in srgb,
+    var(--mw-color-text, #f9fafb) 24%,
+    var(--mw-skeleton-base-color)
+  );
+}
+
+.mw-skeleton--text {
+  transform-origin: 0 55%;
+}
+
+.mw-skeleton--circular {
+  border-radius: 9999px;
+}
+
+.mw-skeleton--pulse {
+  animation: mw-skeleton-pulse 1400ms ease-in-out 500ms infinite;
+}
+
+.mw-skeleton--wave {
+  position: relative;
+}
+
+.mw-skeleton--wave::after {
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, var(--mw-skeleton-highlight-color), transparent);
+  animation: mw-skeleton-wave 1600ms linear 500ms infinite;
+  content: "";
+}
+
+@keyframes mw-skeleton-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.48;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes mw-skeleton-wave {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mw-skeleton--pulse {
+    animation-duration: 2400ms;
+  }
+
+  .mw-skeleton--wave::after {
+    animation-duration: 2600ms;
+  }
+}

package/src/firstEdition/slider.css

@@ -153,7 +153,7 @@
 }
 
 .mw-slider--disabled {
-  --mw-slider-track-background: var(--mw-color-border-disabled, #d1d5db);
+  --mw-slider-track-background: var(--mw-color-border-disabled, #a3a3a3);
   --mw-slider-track-fill: var(--mw-color-primary-disabled, rgba(47, 49, 252, 0.5));
   --mw-slider-thumb-border: var(--mw-color-primary-disabled, rgba(47, 49, 252, 0.5));
 

package/src/firstEdition/stat-tile.css

@@ -0,0 +1,137 @@
+/*
+ * Stat Tile component styles
+ * Figma refs:
+ * - stat tile component: 1411:6857
+ * - color/tone instances: 2512:27384, 2512:27391, 2512:27405, 2512:27412
+ * - trend part: 2695:25437
+ */
+
+.mw-stat-tile {
+  --mw-stat-tile-surface: var(--mw-color-surface-elevated, #ffffff);
+  --mw-stat-tile-border: var(--mw-color-border-subtle, #d8d8d8);
+  --mw-stat-tile-text: var(--mw-color-text, #141414);
+  --mw-stat-tile-muted: var(--mw-color-text-muted, #595959);
+  --mw-stat-tile-trend: var(--mw-stat-tile-muted);
+  --mw-stat-tile-radius: 24px;
+
+  display: flex;
+  width: var(--mw-stat-tile-width, 280px);
+  min-width: 0;
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: var(--mw-spacing-sp-8, 8px);
+  padding: var(--mw-spacing-sp-24, 24px);
+  color: var(--mw-stat-tile-text);
+  background: var(--mw-stat-tile-surface);
+  border: 1px solid var(--mw-stat-tile-border);
+  border-radius: var(--mw-stat-tile-radius);
+  font-family: var(--mw-font-primary, inherit);
+}
+
+.mw-stat-tile--brand {
+  --mw-stat-tile-surface: var(--mw-stat-tile-tone-surface, #eeeeff);
+  --mw-stat-tile-border: var(--mw-stat-tile-tone-border, #ababfd);
+  --mw-stat-tile-text: var(--mw-stat-tile-tone-text, #1b1d97);
+  --mw-stat-tile-muted: var(--mw-stat-tile-tone-muted, #1b1d97);
+  --mw-stat-tile-trend: var(--mw-stat-tile-tone-trend, #2527ca);
+}
+
+.mw-stat-tile--success {
+  --mw-stat-tile-surface: var(--mw-stat-tile-tone-surface, #e6f4ed);
+  --mw-stat-tile-border: var(--mw-stat-tile-tone-border, #90caad);
+  --mw-stat-tile-text: var(--mw-stat-tile-tone-text, #006633);
+  --mw-stat-tile-muted: var(--mw-stat-tile-tone-muted, #006633);
+  --mw-stat-tile-trend: var(--mw-stat-tile-tone-trend, #006d48);
+}
+
+.mw-stat-tile--warning {
+  --mw-stat-tile-surface: var(--mw-stat-tile-tone-surface, #fff8e6);
+  --mw-stat-tile-border: var(--mw-stat-tile-tone-border, #fde08a);
+  --mw-stat-tile-text: var(--mw-stat-tile-tone-text, #b45309);
+  --mw-stat-tile-muted: var(--mw-stat-tile-tone-muted, #b45309);
+  --mw-stat-tile-trend: var(--mw-stat-tile-tone-trend, #b45309);
+}
+
+.mw-stat-tile--danger {
+  --mw-stat-tile-surface: var(--mw-stat-tile-tone-surface, #ffe8eb);
+  --mw-stat-tile-border: var(--mw-stat-tile-tone-border, #ff8a95);
+  --mw-stat-tile-text: var(--mw-stat-tile-tone-text, #a8031f);
+  --mw-stat-tile-muted: var(--mw-stat-tile-tone-muted, #a8031f);
+  --mw-stat-tile-trend: var(--mw-stat-tile-tone-trend, #a8031f);
+}
+
+.mw-stat-tile__header {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mw-spacing-sp-8, 8px);
+}
+
+.mw-stat-tile__label {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--mw-stat-tile-muted);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: -0.03em;
+  line-height: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mw-stat-tile__trend {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--mw-spacing-sp-4, 4px);
+  box-sizing: border-box;
+  color: var(--mw-stat-tile-trend);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.mw-stat-tile__trend-icon {
+  display: inline-flex;
+  width: 12px;
+  height: 12px;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  line-height: 12px;
+}
+
+.mw-stat-tile__value {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--mw-stat-tile-text);
+  font-size: 28px;
+  font-weight: 600;
+  letter-spacing: -0.03em;
+  line-height: 30px;
+}
+
+.mw-stat-tile__subtitle {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--mw-stat-tile-muted);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mw-theme--dark
+  .mw-stat-tile:not(
+    .mw-stat-tile--brand,
+    .mw-stat-tile--success,
+    .mw-stat-tile--warning,
+    .mw-stat-tile--danger
+  ) {
+  --mw-stat-tile-surface: var(--mw-color-surface-elevated, #2e2e2e);
+  --mw-stat-tile-border: var(--mw-color-border-subtle, #474747);
+  --mw-stat-tile-text: var(--mw-color-text, #f9fafb);
+  --mw-stat-tile-muted: var(--mw-color-text-muted, #a3a3a3);
+}

package/src/firstEdition/styles.css

@@ -24,6 +24,9 @@
 @import "./checkbox.css";
 @import "./divider.css";
 @import "./spinner.css";
+@import "./skeleton.css";
+@import "./stat-tile.css";
+@import "./date-picker.css";
 @import "./spacing.css";
 @import "./radio.css";
 @import "./switch.css";

package/src/firstEdition/switch.css

@@ -3,8 +3,8 @@
  * Figma: 1364:11442 (light) / 1369:4001 (dark)
  *
  * Tokens (from Figma nodes.json):
- *   switch/track-off  (light): #e5e7eb    (dark): #374151
- *   switch/track-on   (light): #2f31fc    (dark): #2f31fc  (= primary-base)
+ *   switch/track-off  (light): #d8d8d8    (dark): #474747
+ *   switch/track-on   (light): #2f31fc    (dark): #5859fc  (= primary-base)
  *   switch/thumb-off  (light): #f9fafb    (dark): #141414
  *   switch/thumb-on   (light): #ffffff    (dark): #ffffff
  *   switch/label      (light): #141414    (dark): #f9fafb

package/src/firstEdition/tab.css

@@ -65,7 +65,7 @@
 
 .mw-tab:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 0 2px var(--mw-color-focus, #2684ff);
+  box-shadow: inset 0 0 0 2px var(--mw-color-focus, #2f31fc);
   z-index: 1;
 }
 

package/src/firstEdition/toast.css

@@ -95,7 +95,7 @@
 
 .mw-toast__action-button:focus-visible,
 .mw-toast__action :where(a, button):focus-visible {
-  outline: 2px solid var(--mw-color-focus, #2684ff);
+  outline: 2px solid var(--mw-color-focus, #2f31fc);
   outline-offset: 2px;
   border-radius: 2px;
 }
@@ -217,16 +217,16 @@
   --mw-toast-surface: color-mix(in srgb, var(--mw-color-warning-base) 16%, var(--mw-color-surface));
   --mw-toast-border: var(--mw-color-warning-base);
   --mw-toast-icon: var(--mw-color-warning-base);
-  --mw-toast-text: var(--mw-color-warning-base);
-  --mw-toast-action: var(--mw-color-warning-base);
+  --mw-toast-text: color-mix(in srgb, var(--mw-color-warning-base) 80%, var(--mw-color-text));
+  --mw-toast-action: color-mix(in srgb, var(--mw-color-warning-base) 80%, var(--mw-color-text));
 }
 
 .mw-toast--rich[data-intent="error"] {
   --mw-toast-surface: color-mix(in srgb, var(--mw-color-danger-base) 12%, var(--mw-color-surface));
   --mw-toast-border: var(--mw-color-danger-base);
   --mw-toast-icon: var(--mw-color-danger-base);
-  --mw-toast-text: var(--mw-color-danger-base);
-  --mw-toast-action: var(--mw-color-danger-base);
+  --mw-toast-text: color-mix(in srgb, var(--mw-color-danger-base) 80%, var(--mw-color-text));
+  --mw-toast-action: color-mix(in srgb, var(--mw-color-danger-base) 80%, var(--mw-color-text));
 }
 
 /* --------------------------------------------

package/dist/chunk-2JNIKK66.js

@@ -1,21 +0,0 @@
-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",
-      label: "#FFFFFF",
-      labelDisabled: "rgba(255,255,255,0.5)"
-    },
-    success: "#00875A"
-  },
-  font: { primary: "'Instrument Sans', Inter, system-ui, sans-serif" },
-  ui: { radius: 4, density: "comfortable" }
-};
-
-export { firstEditionTheme };
-//# sourceMappingURL=chunk-2JNIKK66.js.map
-//# sourceMappingURL=chunk-2JNIKK66.js.map

package/dist/chunk-2JNIKK66.js.map

@@ -1 +0,0 @@
-{"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,aAAA,EAAe;AAAA,KACjB;AAAA,IACA,OAAA,EAAS;AAAA,GACX;AAAA,EACA,IAAA,EAAM,EAAE,OAAA,EAAS,iDAAA,EAAkD;AAAA,EACnE,EAAA,EAAI,EAAE,MAAA,EAAQ,CAAA,EAAG,SAAS,aAAA;AAC5B","file":"chunk-2JNIKK66.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      label: \"#FFFFFF\",\n      labelDisabled: \"rgba(255,255,255,0.5)\",\n    },\n    success: \"#00875A\",\n  },\n  font: { primary: \"'Instrument Sans', Inter, system-ui, sans-serif\" },\n  ui: { radius: 4, density: \"comfortable\" },\n}\n"]}