@marwes-ui/core 1.0.4 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +21 -0
  2. package/dist/index.d.ts +47 -14
  3. package/dist/index.js +352 -271
  4. package/dist/index.js.map +1 -1
  5. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -18,155 +18,166 @@ function nextThemeMode(mode) {
18
18
  return mode === ThemeMode.dark ? ThemeMode.light : ThemeMode.dark;
19
19
  }
20
20
 
21
- // src/theme/theme-defaults.ts
22
- var lightThemeDefaults = {
23
- mode: ThemeMode.light,
24
- color: {
25
- // Primary (firstEdition brand blue)
26
- primary: "#2F31FC",
27
- // Background & Surface (from Figma: Neutrals)
28
- background: "#FFFFFF",
29
- surface: "#F9FAFB",
30
- surfaceSubtle: "#F3F4F6",
31
- surfaceElevated: "#FFFFFF",
32
- surfaceDisabled: "#F3F4F6",
33
- surfaceInverted: "#141414",
34
- // Text (from Figma: Colours/Text)
35
- text: "#141414",
36
- textMuted: "#9CA3AF",
37
- textSubtle: "#9CA3AF",
38
- textDisabled: "rgba(20,20,20,0.4)",
39
- textInverted: "#F9FAFB",
40
- // Borders (from Figma: Colours/Border and Neutrals)
41
- border: "rgba(0,0,0,0.4)",
42
- borderSubtle: "#00000033",
43
- borderStrong: "#141414",
44
- borderDisabled: "rgba(20,20,20,0.16)",
45
- // Focus color (from Figma: node 120:927 - Accessible blue)
46
- focus: "#2684FF",
47
- // Semantic colors
48
- danger: "#D90429",
49
- success: "#00875A",
50
- warning: "#FFB703"
51
- },
52
- font: {
53
- primary: "'Instrument Sans', Inter, system-ui, sans-serif",
54
- secondary: "Helvetica",
55
- mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
56
- },
57
- ui: {
58
- radius: 4,
59
- density: "comfortable"
60
- },
61
- typography: {
62
- h1: {
63
- fontSize: 32,
64
- lineHeight: 1.1875,
65
- fontWeight: 700,
66
- letterSpacing: -0.96
67
- },
68
- h2: {
69
- fontSize: 24,
70
- lineHeight: 1.25,
71
- fontWeight: 500,
72
- letterSpacing: -0.72
73
- },
74
- h3: {
75
- fontSize: 20,
76
- lineHeight: 1.3,
77
- fontWeight: 500,
78
- letterSpacing: -0.6
79
- },
80
- paragraph: {
81
- sm: {
82
- fontSize: 14,
83
- lineHeight: 1.5
84
- },
85
- md: {
86
- fontSize: 16,
87
- lineHeight: 1.6
88
- },
89
- lg: {
90
- fontSize: 18,
91
- lineHeight: 1.7
92
- }
93
- }
94
- }
95
- };
96
- var darkThemeDefaults = {
97
- mode: ThemeMode.dark,
98
- color: {
99
- // Primary — firstEdition brand blue in dark mode as well
100
- primary: "#2F31FC",
101
- // Background & Surface - Inverted
102
- background: "#141414",
103
- surface: "#141414",
104
- surfaceSubtle: "#111827",
105
- surfaceElevated: "#1F2937",
106
- surfaceDisabled: "#3E3E3E",
107
- surfaceInverted: "#F9FAFB",
108
- // Text - Inverted
109
- text: "#F9FAFB",
110
- textMuted: "#9CA3AF",
111
- textSubtle: "#6B7280",
112
- textDisabled: "rgba(249,250,251,0.4)",
113
- textInverted: "#141414",
114
- // Borders - Adjusted for dark mode
115
- border: "#d9d9d9",
116
- borderSubtle: "#d4d4d433",
117
- borderStrong: "#F9FAFB",
118
- borderDisabled: "rgba(255,255,255,0.16)",
119
- // Focus color - Same accessible blue works in both modes
120
- focus: "#2684FF",
121
- // Semantic colors
122
- danger: "#D90429",
123
- success: "#00875A",
124
- warning: "#FFB703"
125
- },
126
- font: {
127
- primary: "'Instrument Sans', Inter, system-ui, sans-serif",
128
- secondary: "Helvetica",
129
- mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
21
+ // src/theme/density.ts
22
+ var DENSITY_SCALES = {
23
+ compact: {
24
+ height: 34,
25
+ paddingX: 10,
26
+ paddingY: 6,
27
+ gap: 4,
28
+ fontSize: 13,
29
+ iconSize: 16,
30
+ checkboxSize: 16,
31
+ fieldGap: 2,
32
+ spacingMultiplier: 0.75,
33
+ fontSizeSm: 12
130
34
  },
131
- ui: {
132
- radius: 4,
133
- density: "comfortable"
35
+ comfortable: {
36
+ height: 40,
37
+ paddingX: 16,
38
+ paddingY: 12,
39
+ gap: 8,
40
+ fontSize: 14,
41
+ iconSize: 20,
42
+ checkboxSize: 18,
43
+ fieldGap: 4,
44
+ spacingMultiplier: 1,
45
+ fontSizeSm: 13
134
46
  },
135
- typography: {
136
- h1: {
137
- fontSize: 32,
138
- lineHeight: 1.1875,
139
- fontWeight: 700,
140
- letterSpacing: -0.96
141
- },
142
- h2: {
143
- fontSize: 24,
144
- lineHeight: 1.25,
145
- fontWeight: 500,
146
- letterSpacing: -0.72
147
- },
148
- h3: {
149
- fontSize: 20,
150
- lineHeight: 1.3,
151
- fontWeight: 500,
152
- letterSpacing: -0.6
153
- },
154
- paragraph: {
155
- sm: {
156
- fontSize: 14,
157
- lineHeight: 1.5
158
- },
159
- md: {
160
- fontSize: 16,
161
- lineHeight: 1.6
162
- },
163
- lg: {
164
- fontSize: 18,
165
- lineHeight: 1.7
166
- }
167
- }
47
+ spacious: {
48
+ height: 48,
49
+ paddingX: 20,
50
+ paddingY: 16,
51
+ gap: 12,
52
+ fontSize: 15,
53
+ iconSize: 24,
54
+ checkboxSize: 22,
55
+ fieldGap: 6,
56
+ spacingMultiplier: 1.25,
57
+ fontSizeSm: 14
168
58
  }
169
59
  };
60
+ function densityToCSSVars(density) {
61
+ const scale = DENSITY_SCALES[density];
62
+ return {
63
+ "--mw-density-height": `${scale.height}px`,
64
+ "--mw-density-padding-x": `${scale.paddingX}px`,
65
+ "--mw-density-padding-y": `${scale.paddingY}px`,
66
+ "--mw-density-gap": `${scale.gap}px`,
67
+ "--mw-density-font-size": `${scale.fontSize}px`,
68
+ "--mw-density-icon-size": `${scale.iconSize}px`,
69
+ "--mw-density-checkbox-size": `${scale.checkboxSize}px`,
70
+ "--mw-density-field-gap": `${scale.fieldGap}px`,
71
+ "--mw-density-spacing-multiplier": `${scale.spacingMultiplier}`,
72
+ "--mw-density-font-size-sm": `${scale.fontSizeSm}px`
73
+ };
74
+ }
75
+
76
+ // src/theme/theme-css.ts
77
+ function colorRoleVars(role, cr) {
78
+ return {
79
+ [`--mw-color-${role}-base`]: cr.base,
80
+ [`--mw-color-${role}-hover`]: cr.hover,
81
+ [`--mw-color-${role}-pressed`]: cr.pressed,
82
+ [`--mw-color-${role}-disabled`]: cr.disabled,
83
+ [`--mw-color-${role}-label`]: cr.label,
84
+ [`--mw-color-${role}-label-disabled`]: cr.labelDisabled
85
+ };
86
+ }
87
+ function themeToCSSVars(theme) {
88
+ const { color, font, ui, typography } = theme;
89
+ return {
90
+ // Color roles: primary, danger, success, warning, info (5 × 6 = 30)
91
+ ...colorRoleVars("primary", color.primary),
92
+ ...colorRoleVars("danger", color.danger),
93
+ ...colorRoleVars("success", color.success),
94
+ ...colorRoleVars("warning", color.warning),
95
+ ...colorRoleVars("info", color.info),
96
+ // Secondary: 6 standard fields + 2 border fields (= 8)
97
+ ...colorRoleVars("secondary", color.secondary),
98
+ "--mw-color-secondary-border": color.secondary.border,
99
+ "--mw-color-secondary-border-disabled": color.secondary.borderDisabled,
100
+ // Surface / semantic neutrals (16)
101
+ "--mw-color-background": color.background,
102
+ "--mw-color-surface": color.surface,
103
+ "--mw-color-surface-subtle": color.surfaceSubtle,
104
+ "--mw-color-surface-elevated": color.surfaceElevated,
105
+ "--mw-color-surface-disabled": color.surfaceDisabled,
106
+ "--mw-color-surface-inverted": color.surfaceInverted,
107
+ "--mw-color-text": color.text,
108
+ "--mw-color-text-muted": color.textMuted,
109
+ "--mw-color-text-subtle": color.textSubtle,
110
+ "--mw-color-text-disabled": color.textDisabled,
111
+ "--mw-color-text-inverted": color.textInverted,
112
+ "--mw-color-border": color.border,
113
+ "--mw-color-border-subtle": color.borderSubtle,
114
+ "--mw-color-border-strong": color.borderStrong,
115
+ "--mw-color-border-disabled": color.borderDisabled,
116
+ "--mw-color-focus": color.focus,
117
+ // Font (3)
118
+ "--mw-font-primary": font.primary,
119
+ "--mw-font-secondary": font.secondary,
120
+ "--mw-font-mono": font.mono,
121
+ // UI (1)
122
+ "--mw-ui-radius": `${ui.radius}px`,
123
+ // Density (10)
124
+ ...densityToCSSVars(ui.density),
125
+ // Typography — headings (3 × 4 = 12)
126
+ "--mw-typography-h1-font-size": `${typography.h1.fontSize}px`,
127
+ "--mw-typography-h1-line-height": `${typography.h1.lineHeight}`,
128
+ "--mw-typography-h1-font-weight": `${typography.h1.fontWeight}`,
129
+ "--mw-typography-h1-letter-spacing": `${typography.h1.letterSpacing}px`,
130
+ "--mw-typography-h2-font-size": `${typography.h2.fontSize}px`,
131
+ "--mw-typography-h2-line-height": `${typography.h2.lineHeight}`,
132
+ "--mw-typography-h2-font-weight": `${typography.h2.fontWeight}`,
133
+ "--mw-typography-h2-letter-spacing": `${typography.h2.letterSpacing}px`,
134
+ "--mw-typography-h3-font-size": `${typography.h3.fontSize}px`,
135
+ "--mw-typography-h3-line-height": `${typography.h3.lineHeight}`,
136
+ "--mw-typography-h3-font-weight": `${typography.h3.fontWeight}`,
137
+ "--mw-typography-h3-letter-spacing": `${typography.h3.letterSpacing}px`,
138
+ // Typography — paragraph (3 × 2 = 6)
139
+ "--mw-typography-paragraph-sm-font-size": `${typography.paragraph.sm.fontSize}px`,
140
+ "--mw-typography-paragraph-sm-line-height": `${typography.paragraph.sm.lineHeight}`,
141
+ "--mw-typography-paragraph-md-font-size": `${typography.paragraph.md.fontSize}px`,
142
+ "--mw-typography-paragraph-md-line-height": `${typography.paragraph.md.lineHeight}`,
143
+ "--mw-typography-paragraph-lg-font-size": `${typography.paragraph.lg.fontSize}px`,
144
+ "--mw-typography-paragraph-lg-line-height": `${typography.paragraph.lg.lineHeight}`
145
+ };
146
+ }
147
+ var defaultThemeSelector = "[data-marwes-theme]";
148
+ function themeToCSSRule(selector, theme) {
149
+ const declarations = Object.entries(themeToCSSVars(theme)).map(([property, value]) => ` ${property}: ${serializeCSSDeclarationValue(value)};`).join("\n");
150
+ return `${selector} {
151
+ ${declarations}
152
+ background-color: var(--mw-color-background);
153
+ color: var(--mw-color-text);
154
+ }`;
155
+ }
156
+ function themeModesToCSSRules({
157
+ light,
158
+ dark,
159
+ selector = defaultThemeSelector,
160
+ rootTarget,
161
+ rootAttribute = "class"
162
+ }) {
163
+ return [
164
+ themeToCSSRule(buildModeSelector(selector, ThemeMode.light, rootTarget, rootAttribute), light),
165
+ themeToCSSRule(buildModeSelector(selector, ThemeMode.dark, rootTarget, rootAttribute), dark)
166
+ ].join("\n\n");
167
+ }
168
+ function buildModeSelector(selector, mode, rootTarget, rootAttribute) {
169
+ const providerSelector = `${selector}[data-marwes-mode="${mode}"]`;
170
+ const rootSelector = rootTarget === void 0 ? void 0 : `${buildRootModeSelector(rootTarget, rootAttribute, mode)} ${selector}`;
171
+ return rootSelector === void 0 ? providerSelector : `${providerSelector},
172
+ ${rootSelector}`;
173
+ }
174
+ function buildRootModeSelector(target, attribute, mode) {
175
+ if (attribute === "class") return `${target}.${mode}`;
176
+ return `${target}[${attribute}="${mode}"]`;
177
+ }
178
+ function serializeCSSDeclarationValue(value) {
179
+ return value.replace(/[\n\r\t]+/g, " ").replace(/[;{}]/g, "");
180
+ }
170
181
 
171
182
  // src/theme/color-utils.ts
172
183
  var M_RGB_TO_XYZ = [
@@ -324,9 +335,159 @@ function normalizeColorInput(input) {
324
335
  if (typeof input === "string") {
325
336
  return resolveColorRole(input);
326
337
  }
327
- const { base, ...overrides } = input;
328
- return resolveColorRole(base, overrides);
329
- }
338
+ const { base, ...overrides } = input;
339
+ return resolveColorRole(base, overrides);
340
+ }
341
+
342
+ // src/theme/theme-defaults.ts
343
+ var lightThemeDefaults = {
344
+ mode: ThemeMode.light,
345
+ color: {
346
+ // Primary (firstEdition brand blue)
347
+ primary: "#2F31FC",
348
+ // Background & Surface (from Figma: Neutrals)
349
+ background: "#FFFFFF",
350
+ surface: "#F9FAFB",
351
+ surfaceSubtle: "#F3F4F6",
352
+ surfaceElevated: "#FFFFFF",
353
+ surfaceDisabled: "#F3F4F6",
354
+ surfaceInverted: "#141414",
355
+ // Text (from Figma: Colours/Text)
356
+ text: "#141414",
357
+ textMuted: "#9CA3AF",
358
+ textSubtle: "#9CA3AF",
359
+ textDisabled: "rgba(20,20,20,0.4)",
360
+ textInverted: "#F9FAFB",
361
+ // Borders (from Figma: Colours/Border and Neutrals)
362
+ border: "rgba(0,0,0,0.4)",
363
+ borderSubtle: "#00000033",
364
+ borderStrong: "#141414",
365
+ borderDisabled: "rgba(20,20,20,0.16)",
366
+ // Focus color (from Figma: node 120:927 - Accessible blue)
367
+ focus: "#2684FF",
368
+ // Semantic colors
369
+ danger: "#D90429",
370
+ success: "#00875A",
371
+ warning: "#FFB703"
372
+ },
373
+ font: {
374
+ primary: "'Instrument Sans', Inter, system-ui, sans-serif",
375
+ secondary: "Helvetica",
376
+ mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
377
+ },
378
+ ui: {
379
+ radius: 4,
380
+ density: "comfortable"
381
+ },
382
+ typography: {
383
+ h1: {
384
+ fontSize: 32,
385
+ lineHeight: 1.1875,
386
+ fontWeight: 700,
387
+ letterSpacing: -0.96
388
+ },
389
+ h2: {
390
+ fontSize: 24,
391
+ lineHeight: 1.25,
392
+ fontWeight: 500,
393
+ letterSpacing: -0.72
394
+ },
395
+ h3: {
396
+ fontSize: 20,
397
+ lineHeight: 1.3,
398
+ fontWeight: 500,
399
+ letterSpacing: -0.6
400
+ },
401
+ paragraph: {
402
+ sm: {
403
+ fontSize: 14,
404
+ lineHeight: 1.5
405
+ },
406
+ md: {
407
+ fontSize: 16,
408
+ lineHeight: 1.6
409
+ },
410
+ lg: {
411
+ fontSize: 18,
412
+ lineHeight: 1.7
413
+ }
414
+ }
415
+ }
416
+ };
417
+ var darkThemeDefaults = {
418
+ mode: ThemeMode.dark,
419
+ color: {
420
+ // Primary — firstEdition brand blue in dark mode as well
421
+ primary: "#2F31FC",
422
+ // Background & Surface - Inverted
423
+ background: "#141414",
424
+ surface: "#141414",
425
+ surfaceSubtle: "#111827",
426
+ surfaceElevated: "#1F2937",
427
+ surfaceDisabled: "#3E3E3E",
428
+ surfaceInverted: "#F9FAFB",
429
+ // Text - Inverted
430
+ text: "#F9FAFB",
431
+ textMuted: "#9CA3AF",
432
+ textSubtle: "#6B7280",
433
+ textDisabled: "rgba(249,250,251,0.4)",
434
+ textInverted: "#141414",
435
+ // Borders - Adjusted for dark mode
436
+ border: "#d9d9d9",
437
+ borderSubtle: "#d4d4d433",
438
+ borderStrong: "#F9FAFB",
439
+ borderDisabled: "rgba(255,255,255,0.16)",
440
+ // Focus color - Same accessible blue works in both modes
441
+ focus: "#2684FF",
442
+ // Semantic colors
443
+ danger: "#D90429",
444
+ success: "#00875A",
445
+ warning: "#FFB703"
446
+ },
447
+ font: {
448
+ primary: "'Instrument Sans', Inter, system-ui, sans-serif",
449
+ secondary: "Helvetica",
450
+ mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
451
+ },
452
+ ui: {
453
+ radius: 4,
454
+ density: "comfortable"
455
+ },
456
+ typography: {
457
+ h1: {
458
+ fontSize: 32,
459
+ lineHeight: 1.1875,
460
+ fontWeight: 700,
461
+ letterSpacing: -0.96
462
+ },
463
+ h2: {
464
+ fontSize: 24,
465
+ lineHeight: 1.25,
466
+ fontWeight: 500,
467
+ letterSpacing: -0.72
468
+ },
469
+ h3: {
470
+ fontSize: 20,
471
+ lineHeight: 1.3,
472
+ fontWeight: 500,
473
+ letterSpacing: -0.6
474
+ },
475
+ paragraph: {
476
+ sm: {
477
+ fontSize: 14,
478
+ lineHeight: 1.5
479
+ },
480
+ md: {
481
+ fontSize: 16,
482
+ lineHeight: 1.6
483
+ },
484
+ lg: {
485
+ fontSize: 18,
486
+ lineHeight: 1.7
487
+ }
488
+ }
489
+ }
490
+ };
330
491
 
331
492
  // src/theme/tone.ts
332
493
  var digitalTone = {
@@ -453,131 +614,51 @@ function resolveThemeInput(input) {
453
614
  };
454
615
  }
455
616
 
456
- // src/theme/density.ts
457
- var DENSITY_SCALES = {
458
- compact: {
459
- height: 34,
460
- paddingX: 10,
461
- paddingY: 6,
462
- gap: 4,
463
- fontSize: 13,
464
- iconSize: 16,
465
- checkboxSize: 16,
466
- fieldGap: 2,
467
- spacingMultiplier: 0.75,
468
- fontSizeSm: 12
469
- },
470
- comfortable: {
471
- height: 40,
472
- paddingX: 16,
473
- paddingY: 12,
474
- gap: 8,
475
- fontSize: 14,
476
- iconSize: 20,
477
- checkboxSize: 18,
478
- fieldGap: 4,
479
- spacingMultiplier: 1,
480
- fontSizeSm: 13
481
- },
482
- spacious: {
483
- height: 48,
484
- paddingX: 20,
485
- paddingY: 16,
486
- gap: 12,
487
- fontSize: 15,
488
- iconSize: 24,
489
- checkboxSize: 22,
490
- fieldGap: 6,
491
- spacingMultiplier: 1.25,
492
- fontSizeSm: 14
493
- }
494
- };
495
- function densityToCSSVars(density) {
496
- const scale = DENSITY_SCALES[density];
497
- return {
498
- "--mw-density-height": `${scale.height}px`,
499
- "--mw-density-padding-x": `${scale.paddingX}px`,
500
- "--mw-density-padding-y": `${scale.paddingY}px`,
501
- "--mw-density-gap": `${scale.gap}px`,
502
- "--mw-density-font-size": `${scale.fontSize}px`,
503
- "--mw-density-icon-size": `${scale.iconSize}px`,
504
- "--mw-density-checkbox-size": `${scale.checkboxSize}px`,
505
- "--mw-density-field-gap": `${scale.fieldGap}px`,
506
- "--mw-density-spacing-multiplier": `${scale.spacingMultiplier}`,
507
- "--mw-density-font-size-sm": `${scale.fontSizeSm}px`
617
+ // src/theme/theme-ssr.ts
618
+ var mediaQuery = "(prefers-color-scheme: dark)";
619
+ function createMarwesThemeScript({
620
+ storageKey = false,
621
+ defaultPreference = ThemeMode.light,
622
+ enableSystem = true,
623
+ target,
624
+ attribute = "class"
625
+ } = {}) {
626
+ const config = serializeScriptData({
627
+ storageKey,
628
+ defaultPreference,
629
+ enableSystem,
630
+ target,
631
+ attribute,
632
+ mediaQuery
633
+ });
634
+ return `(function(){try{var c=${config};var p=c.defaultPreference;if(c.storageKey){try{var s=window.localStorage.getItem(c.storageKey);if(s==="light"||s==="dark"||s==="system")p=s;}catch(_){}}var m="light";if(p==="light"||p==="dark"){m=p;}else if(c.enableSystem&&window.matchMedia&&window.matchMedia(c.mediaQuery).matches){m="dark";}function a(e){if(!e)return;if(c.attribute==="class"){e.classList.remove(m==="dark"?"light":"dark");e.classList.add(m);}else{e.setAttribute(c.attribute,m);}}if(c.target==="html")a(document.documentElement);else if(c.target==="body")a(document.body);var r=document.querySelectorAll("[data-marwes-theme]");for(var i=0;i<r.length;i++){var e=r[i];e.setAttribute("data-marwes-mode",m);e.classList.remove(m==="dark"?"mw-theme--light":"mw-theme--dark");e.classList.add("mw-theme--"+m);}}catch(_){}})();`;
635
+ }
636
+ function createMarwesThemeStyle({
637
+ lightTheme,
638
+ darkTheme,
639
+ selector,
640
+ target,
641
+ attribute
642
+ } = {}) {
643
+ const options = {
644
+ light: resolveThemeInput({ ...lightTheme ?? {}, mode: ThemeMode.light }),
645
+ dark: resolveThemeInput({ ...darkTheme ?? {}, mode: ThemeMode.dark })
508
646
  };
647
+ return themeModesToCSSRules({
648
+ ...options,
649
+ ...selector === void 0 ? {} : { selector },
650
+ ...target === void 0 ? {} : { rootTarget: target },
651
+ ...attribute === void 0 ? {} : { rootAttribute: attribute }
652
+ });
509
653
  }
510
-
511
- // src/theme/theme-css.ts
512
- function colorRoleVars(role, cr) {
513
- return {
514
- [`--mw-color-${role}-base`]: cr.base,
515
- [`--mw-color-${role}-hover`]: cr.hover,
516
- [`--mw-color-${role}-pressed`]: cr.pressed,
517
- [`--mw-color-${role}-disabled`]: cr.disabled,
518
- [`--mw-color-${role}-label`]: cr.label,
519
- [`--mw-color-${role}-label-disabled`]: cr.labelDisabled
520
- };
654
+ function resolveServerThemeMode({
655
+ preference = ThemeMode.light,
656
+ systemFallback = ThemeMode.light
657
+ } = {}) {
658
+ return preference === "system" ? systemFallback : preference;
521
659
  }
522
- function themeToCSSVars(theme) {
523
- const { color, font, ui, typography } = theme;
524
- return {
525
- // Color roles: primary, danger, success, warning, info (5 × 6 = 30)
526
- ...colorRoleVars("primary", color.primary),
527
- ...colorRoleVars("danger", color.danger),
528
- ...colorRoleVars("success", color.success),
529
- ...colorRoleVars("warning", color.warning),
530
- ...colorRoleVars("info", color.info),
531
- // Secondary: 6 standard fields + 2 border fields (= 8)
532
- ...colorRoleVars("secondary", color.secondary),
533
- "--mw-color-secondary-border": color.secondary.border,
534
- "--mw-color-secondary-border-disabled": color.secondary.borderDisabled,
535
- // Surface / semantic neutrals (16)
536
- "--mw-color-background": color.background,
537
- "--mw-color-surface": color.surface,
538
- "--mw-color-surface-subtle": color.surfaceSubtle,
539
- "--mw-color-surface-elevated": color.surfaceElevated,
540
- "--mw-color-surface-disabled": color.surfaceDisabled,
541
- "--mw-color-surface-inverted": color.surfaceInverted,
542
- "--mw-color-text": color.text,
543
- "--mw-color-text-muted": color.textMuted,
544
- "--mw-color-text-subtle": color.textSubtle,
545
- "--mw-color-text-disabled": color.textDisabled,
546
- "--mw-color-text-inverted": color.textInverted,
547
- "--mw-color-border": color.border,
548
- "--mw-color-border-subtle": color.borderSubtle,
549
- "--mw-color-border-strong": color.borderStrong,
550
- "--mw-color-border-disabled": color.borderDisabled,
551
- "--mw-color-focus": color.focus,
552
- // Font (3)
553
- "--mw-font-primary": font.primary,
554
- "--mw-font-secondary": font.secondary,
555
- "--mw-font-mono": font.mono,
556
- // UI (1)
557
- "--mw-ui-radius": `${ui.radius}px`,
558
- // Density (10)
559
- ...densityToCSSVars(ui.density),
560
- // Typography — headings (3 × 4 = 12)
561
- "--mw-typography-h1-font-size": `${typography.h1.fontSize}px`,
562
- "--mw-typography-h1-line-height": `${typography.h1.lineHeight}`,
563
- "--mw-typography-h1-font-weight": `${typography.h1.fontWeight}`,
564
- "--mw-typography-h1-letter-spacing": `${typography.h1.letterSpacing}px`,
565
- "--mw-typography-h2-font-size": `${typography.h2.fontSize}px`,
566
- "--mw-typography-h2-line-height": `${typography.h2.lineHeight}`,
567
- "--mw-typography-h2-font-weight": `${typography.h2.fontWeight}`,
568
- "--mw-typography-h2-letter-spacing": `${typography.h2.letterSpacing}px`,
569
- "--mw-typography-h3-font-size": `${typography.h3.fontSize}px`,
570
- "--mw-typography-h3-line-height": `${typography.h3.lineHeight}`,
571
- "--mw-typography-h3-font-weight": `${typography.h3.fontWeight}`,
572
- "--mw-typography-h3-letter-spacing": `${typography.h3.letterSpacing}px`,
573
- // Typography — paragraph (3 × 2 = 6)
574
- "--mw-typography-paragraph-sm-font-size": `${typography.paragraph.sm.fontSize}px`,
575
- "--mw-typography-paragraph-sm-line-height": `${typography.paragraph.sm.lineHeight}`,
576
- "--mw-typography-paragraph-md-font-size": `${typography.paragraph.md.fontSize}px`,
577
- "--mw-typography-paragraph-md-line-height": `${typography.paragraph.md.lineHeight}`,
578
- "--mw-typography-paragraph-lg-font-size": `${typography.paragraph.lg.fontSize}px`,
579
- "--mw-typography-paragraph-lg-line-height": `${typography.paragraph.lg.lineHeight}`
580
- };
660
+ function serializeScriptData(value) {
661
+ return JSON.stringify(value).replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
581
662
  }
582
663
 
583
664
  // src/theme/theme-vars.ts
@@ -10565,6 +10646,6 @@ var storybookDocsDescription = {
10565
10646
  colors: "Complete color palette from the design system. Semantic roles map to CSS variables, with label colors auto-derived by default and overrideable for brand-specific fills."
10566
10647
  };
10567
10648
 
10568
- export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, DENSITY_SCALES, IconName, Spacings, SpinnerVariant, SpinnerVariants, SwitchSize, ThemeMode, accordionPurposeComponentReference, accordionWhyPurposeComponents, avatarPurposeSemantics, avatarPurposes, badgePurposeComponentReference, badgePurposeSemantics, badgePurposes, badgeWhyPurposeComponents, buildAccordionFieldA11yIds, buildCheckboxA11y, buildCheckboxFieldA11yIds, buildCheckboxGroupFieldA11yIds, buildCurrencyHelperText, buildGoogleFontsUrl, buildHeadingA11y, buildInputFieldA11yIds, buildRadioA11y, buildRadioGroupFieldA11yIds, buildRichTextFieldA11yIds, buildSliderFieldA11yIds, buildSwitchFieldA11yIds, buildTabGroupA11yIds, buttonActionSemanticPurposes, buttonPurposeSemantics, buttonPurposes, buttonVariantVisualStyles, buttonWhySemanticComponents, canonicalSemanticAttributeNames, canonicalSemanticAttributeRegistry, canonicalSemanticAttributes, cardPurposeComponentReference, cardWhyPurposeComponents, checkboxRecipe, createAccordionRecipe, createAvatarRecipe, createBadgeRecipe, createButtonRecipe, createCardRecipe, createDialogRecipe, createDividerRecipe, createFamilySemanticAttributes, createFontStack, createIconRecipe, createInputOtpRecipe, createInputRecipe, createPurposeSemanticAttributes, createRichTextRecipe, createSelectRecipe, createSliderRecipe, createSpacingRecipe, createSpinnerRecipe, createSwitchRecipe, createTabRecipe, createTextareaRecipe, createToastRecipe, createTooltipRecipe, currencyCodes, darkThemeDefaults, densityToCSSVars, dialogPurposeComponentReference, dialogPurposeSemantics, dialogPurposes, dialogWhyPurposeComponents, emptySemanticAttributes, escapeRichTextHtml, extractFontFamilyName, extractUsedWeights, familySemanticsRegistry, fieldComparisonRows, fieldWhyPurposeComponents, filterUndefinedSemanticAttributes, getCurrencySymbol, headingRecipe, iconNames, iconNamesList, iconRegistry, iconSizeScale, iconStrokeWidthScale, isRichTextHtmlEmpty, isSystemFont, isThemeMode, isThemePreference, lightThemeDefaults, mergeIdRefs, mergeSemanticAttributes, moveTabSelection, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar, nextThemeMode, normalizeRichTextHtml, paragraphRecipe, purposeSemanticsRegistry, radioPurposeComponentReference, radioRecipe, radioWhyPurposeComponents, resolveAccordionA11y, resolveAvatarA11y, resolveBadgeA11y, resolveButtonLoading, resolveDialogA11y, resolveIconA11y, resolveIconSize, resolveIconStrokeWidth, resolveRichTextAllowedFormats, resolveSelectMode, resolveSliderA11y, resolveSpinnerA11y, resolveSpinnerSize, resolveSwitchA11y, resolveTabA11y, resolveTabValue, resolveThemeInput, resolveThemePreference, resolveToastA11y, resolveTone, resolveTooltipA11y, richTextCommandByFormat, richTextFormattingReference, richTextWhyUseIt, sanitizeCurrencyValue, sanitizeInputOtpValue, semanticFamilies, semanticFrameworkSupport, semanticIntents, semanticLayers, semanticOrientations, semanticOutcomes, semanticPurposes, shouldLoadGoogleFont, sliderPurposeComponentReference, sliderWhyPurposeComponents, spinnerSizeScale, spinnerSizes, spinnerVariants, storybookA11yPolicy, storybookButtonGeneralArgTypes, storybookButtonIconArgTypes, storybookButtonPurposeArgTypes, storybookCheckboxArgTypes, storybookDividerArgTypes, storybookDocsDescription, storybookIconGalleryArgTypes, storybookIconGalleryDefaults, storybookIconNames, storybookLayout, storybookOptionalIconNames, storybookRadioArgTypes, storybookSliderArgTypes, storybookSpacingArgTypes, storybookSpinnerArgTypes, switchPurposeComponentReference, switchWhyPurposeComponents, tabPurposeComponentReference, tabWhyPurposeComponents, themeToCSSVars, toastPurposeComponentReference, toastPurposeSemantics, toastPurposes, toastWhyPurposeComponents, validateSemanticRegistry };
10649
+ export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, DENSITY_SCALES, IconName, Spacings, SpinnerVariant, SpinnerVariants, SwitchSize, ThemeMode, accordionPurposeComponentReference, accordionWhyPurposeComponents, avatarPurposeSemantics, avatarPurposes, badgePurposeComponentReference, badgePurposeSemantics, badgePurposes, badgeWhyPurposeComponents, buildAccordionFieldA11yIds, buildCheckboxA11y, buildCheckboxFieldA11yIds, buildCheckboxGroupFieldA11yIds, buildCurrencyHelperText, buildGoogleFontsUrl, buildHeadingA11y, buildInputFieldA11yIds, buildRadioA11y, buildRadioGroupFieldA11yIds, buildRichTextFieldA11yIds, buildSliderFieldA11yIds, buildSwitchFieldA11yIds, buildTabGroupA11yIds, buttonActionSemanticPurposes, buttonPurposeSemantics, buttonPurposes, buttonVariantVisualStyles, buttonWhySemanticComponents, canonicalSemanticAttributeNames, canonicalSemanticAttributeRegistry, canonicalSemanticAttributes, cardPurposeComponentReference, cardWhyPurposeComponents, checkboxRecipe, createAccordionRecipe, createAvatarRecipe, createBadgeRecipe, createButtonRecipe, createCardRecipe, createDialogRecipe, createDividerRecipe, createFamilySemanticAttributes, createFontStack, createIconRecipe, createInputOtpRecipe, createInputRecipe, createMarwesThemeScript, createMarwesThemeStyle, createPurposeSemanticAttributes, createRichTextRecipe, createSelectRecipe, createSliderRecipe, createSpacingRecipe, createSpinnerRecipe, createSwitchRecipe, createTabRecipe, createTextareaRecipe, createToastRecipe, createTooltipRecipe, currencyCodes, darkThemeDefaults, densityToCSSVars, dialogPurposeComponentReference, dialogPurposeSemantics, dialogPurposes, dialogWhyPurposeComponents, emptySemanticAttributes, escapeRichTextHtml, extractFontFamilyName, extractUsedWeights, familySemanticsRegistry, fieldComparisonRows, fieldWhyPurposeComponents, filterUndefinedSemanticAttributes, getCurrencySymbol, headingRecipe, iconNames, iconNamesList, iconRegistry, iconSizeScale, iconStrokeWidthScale, isRichTextHtmlEmpty, isSystemFont, isThemeMode, isThemePreference, lightThemeDefaults, mergeIdRefs, mergeSemanticAttributes, moveTabSelection, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar, nextThemeMode, normalizeRichTextHtml, paragraphRecipe, purposeSemanticsRegistry, radioPurposeComponentReference, radioRecipe, radioWhyPurposeComponents, resolveAccordionA11y, resolveAvatarA11y, resolveBadgeA11y, resolveButtonLoading, resolveDialogA11y, resolveIconA11y, resolveIconSize, resolveIconStrokeWidth, resolveRichTextAllowedFormats, resolveSelectMode, resolveServerThemeMode, resolveSliderA11y, resolveSpinnerA11y, resolveSpinnerSize, resolveSwitchA11y, resolveTabA11y, resolveTabValue, resolveThemeInput, resolveThemePreference, resolveToastA11y, resolveTone, resolveTooltipA11y, richTextCommandByFormat, richTextFormattingReference, richTextWhyUseIt, sanitizeCurrencyValue, sanitizeInputOtpValue, semanticFamilies, semanticFrameworkSupport, semanticIntents, semanticLayers, semanticOrientations, semanticOutcomes, semanticPurposes, shouldLoadGoogleFont, sliderPurposeComponentReference, sliderWhyPurposeComponents, spinnerSizeScale, spinnerSizes, spinnerVariants, storybookA11yPolicy, storybookButtonGeneralArgTypes, storybookButtonIconArgTypes, storybookButtonPurposeArgTypes, storybookCheckboxArgTypes, storybookDividerArgTypes, storybookDocsDescription, storybookIconGalleryArgTypes, storybookIconGalleryDefaults, storybookIconNames, storybookLayout, storybookOptionalIconNames, storybookRadioArgTypes, storybookSliderArgTypes, storybookSpacingArgTypes, storybookSpinnerArgTypes, switchPurposeComponentReference, switchWhyPurposeComponents, tabPurposeComponentReference, tabWhyPurposeComponents, themeModesToCSSRules, themeToCSSRule, themeToCSSVars, toastPurposeComponentReference, toastPurposeSemantics, toastPurposes, toastWhyPurposeComponents, validateSemanticRegistry };
10569
10650
  //# sourceMappingURL=index.js.map
10570
10651
  //# sourceMappingURL=index.js.map