@marwes-ui/presets 1.3.0 → 1.4.0

package/src/firstEdition/styles.css

@@ -5,15 +5,24 @@
  * Each component has its own CSS file for better organization.
  */
 
+@import "@fontsource/instrument-sans/400.css";
+@import "@fontsource/instrument-sans/500.css";
+@import "@fontsource/instrument-sans/600.css";
+@import "@fontsource/instrument-sans/700.css";
+
 @import "./tokens.css";
 
 @import "./accordion.css";
 @import "./avatar.css";
 @import "./card.css";
+@import "./context-menu.css";
+@import "./breadcrumb.css";
 @import "./dialog.css";
+@import "./drawer.css";
 @import "./toast.css";
 @import "./tooltip.css";
 @import "./badge.css";
+@import "./banner.css";
 @import "./button.css";
 @import "./input.css";
 @import "./input-otp.css";
@@ -25,6 +34,7 @@
 @import "./divider.css";
 @import "./spinner.css";
 @import "./skeleton.css";
+@import "./progress-bar.css";
 @import "./stat-tile.css";
 @import "./date-picker.css";
 @import "./spacing.css";
@@ -32,16 +42,26 @@
 @import "./switch.css";
 @import "./slider.css";
 @import "./tab.css";
+@import "./segmented-control.css";
+@import "./pagination.css";
+@import "./skip-link.css";
 @import "./typography.css";
 
 /* Molecules */
 @import "./molecules/accordion-field.css";
 @import "./molecules/checkbox-field.css";
 @import "./molecules/checkbox-group-field.css";
+@import "./molecules/date-picker-field.css";
 @import "./molecules/dialog-modal.css";
+@import "./molecules/pagination-field.css";
+@import "./molecules/segmented-control-field.css";
 @import "./molecules/input-field.css";
+@import "./molecules/input-otp-field.css";
 @import "./molecules/radio-group-field.css";
 @import "./molecules/slider-field.css";
 @import "./molecules/switch-field.css";
 @import "./molecules/tab-group.css";
 @import "./molecules/toast-container.css";
+
+/* Personality signatures — opt-in visual identity, no-op unless selected. */
+@import "./personality.css";

package/src/firstEdition/switch.css

@@ -12,16 +12,16 @@
  */
 
 .mw-switch {
-  --mw-switch-track-off: var(--mw-color-border-subtle);
-  --mw-switch-track-off-hover: color-mix(in srgb, var(--mw-color-border) 60%, var(--mw-color-text));
+  --mw-switch-track-off: var(--mw-color-border-low);
+  --mw-switch-track-off-hover: var(--mw-color-border-strong);
   --mw-switch-track-off-active: var(--mw-color-border);
   --mw-switch-track-off-disabled: var(--mw-color-border-disabled);
   --mw-switch-track-on: var(--mw-color-primary-base, #2f31fc);
   --mw-switch-track-on-hover: var(--mw-color-primary-hover, #2527ca);
   --mw-switch-track-on-active: var(--mw-color-primary-pressed, #1b1d97);
   --mw-switch-track-on-disabled: var(--mw-color-primary-disabled, #8182fc);
-  --mw-switch-thumb-off: var(--mw-color-surface);
-  --mw-switch-thumb-off-disabled: var(--mw-color-surface-disabled);
+  --mw-switch-thumb-off: var(--mw-color-surface-primary);
+  --mw-switch-thumb-off-disabled: var(--mw-color-surface-subtle);
   --mw-switch-thumb-on: var(--mw-color-primary-label);
   --mw-switch-thumb-on-disabled: var(--mw-color-primary-label-disabled);
   --mw-switch-label: var(--mw-color-text);

package/src/firstEdition/tab.css

@@ -7,14 +7,14 @@
  */
 
 .mw-tab {
-  --mw-tab-surface: transparent;
+  --mw-tab-surface: var(--mw-color-surface, transparent);
   --mw-tab-surface-hover: color-mix(in srgb, var(--mw-color-text, #000000) 5%, transparent);
   --mw-tab-surface-pressed: color-mix(in srgb, var(--mw-color-text, #000000) 10%, transparent);
-  --mw-tab-label: var(--mw-color-text, #141414);
+  --mw-tab-label: var(--mw-color-text-muted, #595959);
   --mw-tab-label-active: var(--mw-color-text, #141414);
   --mw-tab-label-disabled: var(--mw-color-text-disabled);
-  --mw-tab-indicator: var(--mw-color-primary-base, #2f31fc);
-  --mw-tab-indicator-disabled: var(--mw-color-border-disabled);
+  --mw-tab-indicator: var(--mw-color-border-brand, #2f31fc);
+  --mw-tab-indicator-disabled: var(--mw-color-border-low);
 
   appearance: none;
   position: relative;

package/src/firstEdition/textarea.css

@@ -4,17 +4,20 @@
  */
 
 .mw-textarea {
-  min-height: calc(var(--mw-density-height) * 3);
+  box-sizing: border-box;
+  min-height: 100px;
   padding: var(--mw-density-padding-y) var(--mw-density-padding-x);
   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);
   font-family: var(--mw-font-primary, inherit);
   font-size: var(--mw-density-font-size);
-  width: 260px;
-  line-height: 1.5;
-  resize: var(--mw-textarea-resize, vertical);
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  line-height: 16px;
+  resize: var(--mw-textarea-resize, none);
   transition: border-color 150ms ease, outline 150ms ease;
 }
 
@@ -59,5 +62,5 @@
 }
 
 .mw-theme--dark .mw-textarea {
-  background: var(--mw-color-surface);
+  background: var(--mw-color-surface-primary);
 }

package/src/firstEdition/toast.css

@@ -141,15 +141,15 @@
    -------------------------------------------- */
 
 .mw-toast--subtle {
-  --mw-toast-surface: var(--mw-color-surface-elevated);
-  --mw-toast-border: var(--mw-color-border);
+  --mw-toast-surface: var(--mw-color-surface-primary);
+  --mw-toast-border: var(--mw-color-border-low);
   --mw-toast-icon: var(--mw-color-text-muted, #595959);
   --mw-toast-text: var(--mw-color-text);
   --mw-toast-action: var(--mw-color-text);
 }
 
 .mw-toast--outline {
-  --mw-toast-surface: var(--mw-color-surface-elevated);
+  --mw-toast-surface: var(--mw-color-surface-primary);
   --mw-toast-border: var(--mw-color-border-brand, #2f31fc);
   --mw-toast-icon: var(--mw-color-text-brand, #2f31fc);
   --mw-toast-text: var(--mw-color-text-brand, #2f31fc);
@@ -164,35 +164,35 @@
 }
 
 .mw-toast--outline[data-intent="success"] {
-  --mw-toast-border: var(--mw-color-status-success-border-strong, #2e9970);
+  --mw-toast-border: var(--mw-color-status-success-border, #2e9970);
   --mw-toast-icon: var(--mw-color-status-success-icon, #006d48);
   --mw-toast-text: var(--mw-color-status-success-text, #006633);
   --mw-toast-action: var(--mw-color-status-success-text, #006633);
 }
 
 .mw-toast--outline[data-intent="warning"] {
-  --mw-toast-border: var(--mw-color-status-warning-border-strong, #e46f00);
+  --mw-toast-border: var(--mw-color-status-warning-border, #e46f00);
   --mw-toast-icon: var(--mw-color-status-warning-icon, #d97706);
   --mw-toast-text: var(--mw-color-status-warning-text, #b45309);
   --mw-toast-action: var(--mw-color-status-warning-text, #b45309);
 }
 
 .mw-toast--outline[data-intent="info"] {
-  --mw-toast-border: var(--mw-color-status-info-border-strong, #5859fc);
-  --mw-toast-icon: var(--mw-color-info-hover, #2527ca);
+  --mw-toast-border: var(--mw-color-status-info-border, #5859fc);
+  --mw-toast-icon: var(--mw-color-status-info-icon, #2527ca);
   --mw-toast-text: var(--mw-color-status-info-text, #1b1d97);
   --mw-toast-action: var(--mw-color-status-info-text, #1b1d97);
 }
 
 .mw-toast--outline[data-intent="brand"] {
-  --mw-toast-border: var(--mw-color-status-info-border-strong, #5859fc);
-  --mw-toast-icon: var(--mw-color-info-hover, #2527ca);
+  --mw-toast-border: var(--mw-color-status-info-border, #5859fc);
+  --mw-toast-icon: var(--mw-color-status-info-icon, #2527ca);
   --mw-toast-text: var(--mw-color-status-info-text, #1b1d97);
   --mw-toast-action: var(--mw-color-status-info-text, #1b1d97);
 }
 
 .mw-toast--outline[data-intent="error"] {
-  --mw-toast-border: var(--mw-color-status-error-border-strong, #ff2847);
+  --mw-toast-border: var(--mw-color-status-error-border, #ff2847);
   --mw-toast-icon: var(--mw-color-status-error-icon, #d90429);
   --mw-toast-text: var(--mw-color-status-error-text, #a8031f);
   --mw-toast-action: var(--mw-color-status-error-text, #a8031f);
@@ -216,7 +216,7 @@
 
 .mw-toast--rich[data-intent="success"] {
   --mw-toast-surface: var(--mw-color-status-success-background, #e6f4ed);
-  --mw-toast-border: var(--mw-color-status-success-border-strong, #2e9970);
+  --mw-toast-border: var(--mw-color-status-success-border, #2e9970);
   --mw-toast-icon: var(--mw-color-status-success-icon, #006d48);
   --mw-toast-text: var(--mw-color-status-success-text, #006633);
   --mw-toast-action: var(--mw-color-status-success-icon, #006d48);
@@ -224,7 +224,7 @@
 
 .mw-toast--rich[data-intent="warning"] {
   --mw-toast-surface: var(--mw-color-status-warning-background, #fff8e6);
-  --mw-toast-border: var(--mw-color-status-warning-border-strong, #e46f00);
+  --mw-toast-border: var(--mw-color-status-warning-border, #e46f00);
   --mw-toast-icon: var(--mw-color-status-warning-icon, #d97706);
   --mw-toast-text: var(--mw-color-status-warning-text, #b45309);
   --mw-toast-action: var(--mw-color-status-warning-text, #b45309);
@@ -232,23 +232,23 @@
 
 .mw-toast--rich[data-intent="info"] {
   --mw-toast-surface: var(--mw-color-status-info-background, #eeeeff);
-  --mw-toast-border: var(--mw-color-status-info-border-strong, #5859fc);
-  --mw-toast-icon: var(--mw-color-info-hover, #2527ca);
+  --mw-toast-border: var(--mw-color-status-info-border, #5859fc);
+  --mw-toast-icon: var(--mw-color-status-info-icon, #2527ca);
   --mw-toast-text: var(--mw-color-status-info-text, #1b1d97);
-  --mw-toast-action: var(--mw-color-info-hover, #2527ca);
+  --mw-toast-action: var(--mw-color-status-info-icon, #2527ca);
 }
 
 .mw-toast--rich[data-intent="brand"] {
   --mw-toast-surface: var(--mw-color-status-info-background, #eeeeff);
-  --mw-toast-border: var(--mw-color-status-info-border-strong, #5859fc);
-  --mw-toast-icon: var(--mw-color-info-hover, #2527ca);
+  --mw-toast-border: var(--mw-color-status-info-border, #5859fc);
+  --mw-toast-icon: var(--mw-color-status-info-icon, #2527ca);
   --mw-toast-text: var(--mw-color-status-info-text, #1b1d97);
-  --mw-toast-action: var(--mw-color-info-hover, #2527ca);
+  --mw-toast-action: var(--mw-color-status-info-icon, #2527ca);
 }
 
 .mw-toast--rich[data-intent="error"] {
   --mw-toast-surface: var(--mw-color-status-error-background, #ffe8eb);
-  --mw-toast-border: var(--mw-color-status-error-border-strong, #ff2847);
+  --mw-toast-border: var(--mw-color-status-error-border, #ff2847);
   --mw-toast-icon: var(--mw-color-status-error-icon, #d90429);
   --mw-toast-text: var(--mw-color-status-error-text, #a8031f);
   --mw-toast-action: var(--mw-color-status-error-text, #a8031f);
@@ -289,21 +289,21 @@
 }
 
 .mw-theme--dark .mw-toast--outline[data-intent="warning"] {
-  --mw-toast-border: var(--mw-color-toast-warning-border, #b45309);
+  --mw-toast-border: var(--mw-color-status-warning-border-strong, #b45309);
   --mw-toast-icon: var(--mw-color-status-warning-icon, #f9b21a);
   --mw-toast-text: var(--mw-color-status-warning-text, #fcc94a);
   --mw-toast-action: var(--mw-color-status-warning-text, #fcc94a);
 }
 
 .mw-theme--dark .mw-toast--outline[data-intent="info"] {
-  --mw-toast-border: var(--mw-color-toast-info-border, #2527ca);
+  --mw-toast-border: var(--mw-color-status-info-border-strong, #2527ca);
   --mw-toast-icon: var(--mw-color-border-brand, #5859fc);
   --mw-toast-text: var(--mw-color-text-brand, #8182fc);
   --mw-toast-action: var(--mw-color-text-brand, #8182fc);
 }
 
 .mw-theme--dark .mw-toast--outline[data-intent="brand"] {
-  --mw-toast-border: var(--mw-color-toast-info-border, #2527ca);
+  --mw-toast-border: var(--mw-color-status-info-border-strong, #2527ca);
   --mw-toast-icon: var(--mw-color-border-brand, #5859fc);
   --mw-toast-text: var(--mw-color-text-brand, #8182fc);
   --mw-toast-action: var(--mw-color-text-brand, #8182fc);
@@ -342,7 +342,7 @@
 
 .mw-theme--dark .mw-toast--rich[data-intent="warning"] {
   --mw-toast-surface: var(--mw-color-status-warning-background, #221004);
-  --mw-toast-border: var(--mw-color-toast-warning-border, #b45309);
+  --mw-toast-border: var(--mw-color-status-warning-border-strong, #b45309);
   --mw-toast-icon: var(--mw-color-status-warning-icon, #f9b21a);
   --mw-toast-text: var(--mw-color-status-warning-text, #fcc94a);
   --mw-toast-action: var(--mw-color-status-warning-icon, #f9b21a);
@@ -350,7 +350,7 @@
 
 .mw-theme--dark .mw-toast--rich[data-intent="info"] {
   --mw-toast-surface: var(--mw-color-status-info-background, #040519);
-  --mw-toast-border: var(--mw-color-toast-info-border, #2527ca);
+  --mw-toast-border: var(--mw-color-status-info-border-strong, #2527ca);
   --mw-toast-icon: var(--mw-color-border-brand, #5859fc);
   --mw-toast-text: var(--mw-color-text-brand, #8182fc);
   --mw-toast-action: var(--mw-color-text-brand, #8182fc);
@@ -358,7 +358,7 @@
 
 .mw-theme--dark .mw-toast--rich[data-intent="brand"] {
   --mw-toast-surface: var(--mw-color-status-info-background, #040519);
-  --mw-toast-border: var(--mw-color-toast-info-border, #2527ca);
+  --mw-toast-border: var(--mw-color-status-info-border-strong, #2527ca);
   --mw-toast-icon: var(--mw-color-border-brand, #5859fc);
   --mw-toast-text: var(--mw-color-text-brand, #8182fc);
   --mw-toast-action: var(--mw-color-text-brand, #8182fc);

package/src/firstEdition/tokens.css

@@ -8,16 +8,17 @@
 [data-marwes-theme] {
   /* ── Spacing scale ──────────────────────────────────────────────────────────
      Named after the actual pixel values to stay aligned with Figma.
-     sp-0 → 0px | sp-2 → 2px | sp-4 → 4px | sp-8 → 8px | sp-16 → 16px
-     sp-24 → 24px | sp-32 → 32px | sp-40 → 40px | sp-48 → 48px
-     sp-56 → 56px | sp-64 → 64px | sp-72 → 72px | sp-80 → 80px
-     sp-88 → 88px | sp-96 → 96px | sp-104 → 104px | sp-112 → 112px
-     sp-120 → 120px
+     sp-0 → 0px | sp-2 → 2px | sp-4 → 4px | sp-8 → 8px | sp-12 → 12px
+     sp-16 → 16px | sp-24 → 24px | sp-32 → 32px | sp-40 → 40px
+     sp-48 → 48px | sp-56 → 56px | sp-64 → 64px | sp-72 → 72px
+     sp-80 → 80px | sp-88 → 88px | sp-96 → 96px | sp-104 → 104px
+     sp-112 → 112px | sp-120 → 120px
   */
   --mw-spacing-sp-0: 0px;
   --mw-spacing-sp-2: 2px;
   --mw-spacing-sp-4: 4px;
   --mw-spacing-sp-8: 8px;
+  --mw-spacing-sp-12: 12px;
   --mw-spacing-sp-16: 16px;
   --mw-spacing-sp-24: 24px;
   --mw-spacing-sp-32: 32px;

package/src/firstEdition/tooltip.css

@@ -33,15 +33,15 @@
 
 .mw-tooltip-group {
   display: inline-flex;
-  flex-direction: column;
+  flex-direction: column-reverse;
   align-items: center;
   gap: var(--mw-spacing-sp-4);
 }
 
 .mw-tooltip-group__trigger {
   display: inline-flex;
-  width: 16px;
-  height: 16px;
+  width: 12px;
+  height: 12px;
   align-items: center;
   justify-content: center;
   padding: 0;
@@ -64,8 +64,8 @@
 }
 
 .mw-tooltip-group__trigger svg {
-  width: 16px;
-  height: 16px;
+  width: 12px;
+  height: 12px;
 }
 
 @keyframes mw-tooltip-enter {

package/src/firstEdition/typography.css

@@ -14,10 +14,31 @@
 }
 
 /* Heading sizes are controlled via CSS variables set by the recipe */
+/* .mw-heading--display uses 44/52, weight 700, letter-spacing -1.32px */
 /* .mw-heading--h1 uses 32/38, weight 700, letter-spacing -0.96px */
 /* .mw-heading--h2 uses 24/30, weight 500, letter-spacing -0.72px */
 /* .mw-heading--h3 uses 20/26, weight 500, letter-spacing -0.6px */
 
+/* BASE TEXT */
+.mw-text {
+  font-family: var(--mw-font-primary, inherit);
+  font-size: var(--mw-text-size);
+  line-height: var(--mw-text-line-height);
+  font-weight: var(--mw-text-weight);
+  letter-spacing: var(--mw-text-letter-spacing);
+  text-transform: var(--mw-text-transform, none);
+  color: var(--mw-color-text);
+  margin: 0;
+}
+
+/* Text variants are controlled via CSS variables set by the recipe */
+/* .mw-text--display uses 44/52, weight 700, letter-spacing -1.32px */
+/* .mw-text--label uses 14/16, weight 500, letter-spacing -0.42px */
+/* .mw-text--label-small uses 12/12, weight 500, letter-spacing -0.36px */
+/* .mw-text--caption uses 12/16, weight 500, letter-spacing 0 */
+/* .mw-text--overline uses 11/16, weight 500, letter-spacing 0.88px, uppercase */
+/* .mw-text--micro uses 11/14, weight 400, letter-spacing -0.33px */
+
 /* BASE PARAGRAPH */
 .mw-p {
   font-family: var(--mw-font-primary, inherit);

package/dist/chunk-62D3F6GN.js

@@ -1,49 +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",
-      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

@@ -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,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"]}