@happyvertical/smrt-ui 0.55.16 → 0.55.18

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 (166) hide show
  1. package/AGENTS.md +14 -0
  2. package/README.md +75 -0
  3. package/dist/components/calendar/Calendar.svelte +59 -56
  4. package/dist/components/calendar/CalendarView.svelte +80 -77
  5. package/dist/components/calendar/DayView.svelte +39 -36
  6. package/dist/components/chat/MessageBubble.svelte +26 -23
  7. package/dist/components/chat/ReactionPicker.svelte +12 -9
  8. package/dist/components/chat/TypingIndicator.svelte +12 -9
  9. package/dist/components/data/CollectionList.svelte +11 -8
  10. package/dist/components/data/CollectionToolbar.svelte +5 -2
  11. package/dist/components/data/DataTable.svelte +74 -59
  12. package/dist/components/data/ListSortSelect.svelte +8 -5
  13. package/dist/components/data/SortableHeader.svelte +10 -7
  14. package/dist/components/display/ConfidenceBadge.svelte +11 -8
  15. package/dist/components/display/CurrencyDisplay.svelte +7 -4
  16. package/dist/components/display/DateDisplay.svelte +6 -3
  17. package/dist/components/display/Icon.svelte +4 -1
  18. package/dist/components/display/StatusBadge.svelte +9 -6
  19. package/dist/components/feedback/Alert.svelte +12 -8
  20. package/dist/components/feedback/ConfirmDialog.svelte +13 -10
  21. package/dist/components/feedback/LoadingOverlay.svelte +37 -34
  22. package/dist/components/feedback/Meter.svelte +4 -1
  23. package/dist/components/feedback/Modal.svelte +26 -21
  24. package/dist/components/feedback/PhoneSheet.svelte +6 -3
  25. package/dist/components/feedback/Progress.svelte +8 -5
  26. package/dist/components/feedback/ProgressBar.svelte +13 -10
  27. package/dist/components/feedback/Spinner.svelte +4 -1
  28. package/dist/components/feedback/ToastViewport.svelte +18 -15
  29. package/dist/components/feedback/WorkingStrip.svelte +6 -3
  30. package/dist/components/forms/CameraCapture.svelte +8 -5
  31. package/dist/components/forms/Checkbox.svelte +11 -8
  32. package/dist/components/forms/Combobox.svelte +5 -2
  33. package/dist/components/forms/DatePicker.svelte +7 -2
  34. package/dist/components/forms/DictationButton.svelte +17 -14
  35. package/dist/components/forms/DictationStatus.svelte +12 -9
  36. package/dist/components/forms/ErrorSummary.svelte +4 -1
  37. package/dist/components/forms/FieldLabel.svelte +9 -6
  38. package/dist/components/forms/Fieldset.svelte +4 -1
  39. package/dist/components/forms/FilePicker.svelte +5 -2
  40. package/dist/components/forms/Form.svelte +1 -1
  41. package/dist/components/forms/FormActionBar.svelte +4 -1
  42. package/dist/components/forms/FormGroup.svelte +6 -3
  43. package/dist/components/forms/Input.svelte +22 -15
  44. package/dist/components/forms/InputGroup.svelte +6 -3
  45. package/dist/components/forms/Listbox.svelte +5 -2
  46. package/dist/components/forms/MultiSelect.svelte +4 -1
  47. package/dist/components/forms/Radio.svelte +9 -6
  48. package/dist/components/forms/RadioGroup.svelte +5 -2
  49. package/dist/components/forms/RangeSlider.svelte +5 -2
  50. package/dist/components/forms/RelationInput.svelte +7 -4
  51. package/dist/components/forms/SearchInput.svelte +7 -4
  52. package/dist/components/forms/SegmentedControl.svelte +6 -3
  53. package/dist/components/forms/Select.svelte +20 -13
  54. package/dist/components/forms/SignaturePad.svelte +8 -5
  55. package/dist/components/forms/Slider.svelte +5 -2
  56. package/dist/components/forms/StagedControlReview.svelte +15 -12
  57. package/dist/components/forms/Switch.svelte +8 -5
  58. package/dist/components/forms/TagsInput.svelte +5 -2
  59. package/dist/components/forms/Textarea.svelte +20 -13
  60. package/dist/components/forms/TimePicker.svelte +7 -2
  61. package/dist/components/forms/Toggle.svelte +14 -11
  62. package/dist/components/forms/ToggleButton.svelte +5 -2
  63. package/dist/components/layout/ActionGroup.svelte +4 -1
  64. package/dist/components/layout/Container.svelte +4 -1
  65. package/dist/components/layout/EmptyState.svelte +11 -8
  66. package/dist/components/layout/Footer.svelte +4 -1
  67. package/dist/components/layout/Grid.svelte +13 -10
  68. package/dist/components/layout/Header.svelte +4 -1
  69. package/dist/components/layout/Masthead.svelte +4 -1
  70. package/dist/components/layout/PageHeader.svelte +12 -9
  71. package/dist/components/layout/PageLayout.svelte +3 -0
  72. package/dist/components/layout/SummaryCard.svelte +9 -6
  73. package/dist/components/memberships/MembershipCard.svelte +5 -2
  74. package/dist/components/memberships/MembershipList.svelte +5 -2
  75. package/dist/components/nav/FilterChips.svelte +13 -10
  76. package/dist/components/nav/Tabs.svelte +75 -41
  77. package/dist/components/permissions/PermissionPicker.svelte +5 -2
  78. package/dist/components/roles/RoleBadge.svelte +8 -5
  79. package/dist/components/roles/RoleSelector.svelte +22 -19
  80. package/dist/components/theme/ThemeProvider.svelte +7 -4
  81. package/dist/components/ui/Accordion.svelte +4 -1
  82. package/dist/components/ui/AccordionItem.svelte +5 -2
  83. package/dist/components/ui/Avatar.svelte +10 -7
  84. package/dist/components/ui/Badge.svelte +6 -2
  85. package/dist/components/ui/Button.svelte +49 -37
  86. package/dist/components/ui/Card.svelte +18 -14
  87. package/dist/components/ui/Chip.svelte +41 -14
  88. package/dist/components/ui/Disclosure.svelte +5 -2
  89. package/dist/components/ui/Dropdown.svelte +33 -25
  90. package/dist/components/ui/IconToggle.svelte +12 -9
  91. package/dist/components/ui/IconToggle.svelte.d.ts +1 -1
  92. package/dist/components/ui/IconToggle.svelte.d.ts.map +1 -1
  93. package/dist/components/ui/IconToggleGroup.svelte +8 -5
  94. package/dist/components/ui/Pagination.svelte +11 -8
  95. package/dist/components/ui/Popover.svelte +9 -6
  96. package/dist/components/ui/Skeleton.svelte +10 -7
  97. package/dist/components/ui/Tooltip.svelte +13 -9
  98. package/dist/components/ui/Tree.svelte +12 -9
  99. package/dist/styles/layers.css +8 -0
  100. package/dist/styles/layers.d.ts +9 -0
  101. package/dist/styles/layers.d.ts.map +1 -0
  102. package/dist/styles/layers.js +8 -0
  103. package/dist/styles/tokens.css +27 -69
  104. package/dist/styles/unstyled.css +65 -0
  105. package/dist/svelte/playground/BaseControlsPreview.svelte +3 -0
  106. package/dist/svelte/playground/CalendarPreview.svelte +5 -2
  107. package/dist/svelte/playground/CapturePreview.svelte +3 -0
  108. package/dist/svelte/playground/CodeSelectorsPreview.svelte +3 -0
  109. package/dist/svelte/playground/CollectionsPreview.svelte +3 -0
  110. package/dist/svelte/playground/DataTablePreview.svelte +3 -0
  111. package/dist/svelte/playground/FeedbackPreview.svelte +3 -0
  112. package/dist/svelte/playground/InteractiveControlsPreview.svelte +3 -0
  113. package/dist/svelte/playground/StylelessPreview.svelte +110 -0
  114. package/dist/svelte/playground/StylelessPreview.svelte.d.ts +4 -0
  115. package/dist/svelte/playground/StylelessPreview.svelte.d.ts.map +1 -0
  116. package/dist/svelte/playground.d.ts.map +1 -1
  117. package/dist/svelte/playground.js +10 -0
  118. package/dist/test-support/setup.js +9 -0
  119. package/dist/theme/ThemeProvider.svelte +3 -0
  120. package/dist/themes/CUSTOM_THEME_GUIDE.md +40 -0
  121. package/dist/themes/README.md +151 -0
  122. package/dist/themes/ThemeProvider.svelte +181 -12
  123. package/dist/themes/ThemeProvider.svelte.d.ts +7 -2
  124. package/dist/themes/ThemeProvider.svelte.d.ts.map +1 -1
  125. package/dist/themes/components/ColorSchemeToggle.svelte +17 -14
  126. package/dist/themes/components/ThemeSwitcher.svelte +14 -11
  127. package/dist/themes/create-theme.d.ts +22 -1
  128. package/dist/themes/create-theme.d.ts.map +1 -1
  129. package/dist/themes/create-theme.js +100 -9
  130. package/dist/themes/css-generator.d.ts.map +1 -1
  131. package/dist/themes/css-generator.js +20 -20
  132. package/dist/themes/derive.d.ts +31 -0
  133. package/dist/themes/derive.d.ts.map +1 -0
  134. package/dist/themes/derive.js +183 -0
  135. package/dist/themes/glass/index.d.ts.map +1 -1
  136. package/dist/themes/glass/index.js +127 -14
  137. package/dist/themes/happyvertical/index.d.ts.map +1 -1
  138. package/dist/themes/happyvertical/index.js +101 -20
  139. package/dist/themes/index.d.ts +2 -2
  140. package/dist/themes/index.d.ts.map +1 -1
  141. package/dist/themes/index.js +1 -1
  142. package/dist/themes/material/index.d.ts.map +1 -1
  143. package/dist/themes/material/index.js +129 -28
  144. package/dist/themes/required-tokens.generated.json +201 -0
  145. package/dist/themes/shared.d.ts +35 -0
  146. package/dist/themes/shared.d.ts.map +1 -1
  147. package/dist/themes/shared.js +32 -0
  148. package/dist/themes/smrt/index.d.ts +3 -0
  149. package/dist/themes/smrt/index.d.ts.map +1 -1
  150. package/dist/themes/smrt/index.js +108 -26
  151. package/dist/themes/studio/index.d.ts.map +1 -1
  152. package/dist/themes/studio/index.js +116 -40
  153. package/dist/themes/styles/base.css +229 -1
  154. package/dist/themes/styles/glass.css +107 -20
  155. package/dist/themes/styles/happyvertical.css +111 -15
  156. package/dist/themes/styles/material.css +127 -35
  157. package/dist/themes/styles/smrt.css +126 -31
  158. package/dist/themes/styles/studio.css +132 -37
  159. package/dist/themes/theme-script.d.ts +3 -1
  160. package/dist/themes/theme-script.d.ts.map +1 -1
  161. package/dist/themes/theme-script.js +7 -2
  162. package/dist/themes/types.d.ts +118 -6
  163. package/dist/themes/types.d.ts.map +1 -1
  164. package/dist/utils/theme/typography.d.ts +21 -21
  165. package/dist/utils/theme/typography.js +21 -21
  166. package/package.json +8 -2
package/dist/themes/styles/material.css CHANGED
@@ -85,6 +85,10 @@
85
85
  --smrt-color-on-tertiary: #ffffff;
86
86
  --smrt-color-tertiary-container: #e8ddff;
87
87
  --smrt-color-on-tertiary-container: #1e005f;
88
+ --smrt-color-info: #7c4dff;
89
+ --smrt-color-on-info: #ffffff;
90
+ --smrt-color-info-container: #e8ddff;
91
+ --smrt-color-on-info-container: #1e005f;
88
92
  --smrt-color-error: #b3261e;
89
93
  --smrt-color-on-error: #ffffff;
90
94
  --smrt-color-error-container: #f9dedc;
@@ -108,7 +112,7 @@
108
112
  --smrt-color-surface-container-lowest: #ffffff;
109
113
  --smrt-color-surface-dim: #dadce0;
110
114
  --smrt-color-surface-bright: #f8f9fa;
111
- --smrt-color-background: #ffffff;
115
+ --smrt-color-background: #f6f8fc;
112
116
  --smrt-color-on-background: #1f1f1f;
113
117
  --smrt-color-outline: #747775;
114
118
  --smrt-color-outline-variant: #c4c7c5;
@@ -126,25 +130,25 @@
126
130
  --smrt-typography-display-medium-size: 2.75rem;
127
131
  --smrt-typography-display-medium-line-height: 1.15;
128
132
  --smrt-typography-display-medium-weight: 400;
129
- --smrt-typography-display-medium-tracking: -0.01em;
133
+ --smrt-typography-display-medium-tracking: -0.015em;
130
134
  --smrt-typography-display-medium-font-family: var(--smrt-font-family);
131
135
  --smrt-typography-display-medium-font: 400 2.75rem/1.15 var(--smrt-font-family);
132
136
  --smrt-typography-display-small-size: 2.25rem;
133
137
  --smrt-typography-display-small-line-height: 1.2;
134
138
  --smrt-typography-display-small-weight: 400;
135
- --smrt-typography-display-small-tracking: 0;
139
+ --smrt-typography-display-small-tracking: -0.01em;
136
140
  --smrt-typography-display-small-font-family: var(--smrt-font-family);
137
141
  --smrt-typography-display-small-font: 400 2.25rem/1.2 var(--smrt-font-family);
138
142
  --smrt-typography-headline-large-size: 2rem;
139
143
  --smrt-typography-headline-large-line-height: 1.25;
140
144
  --smrt-typography-headline-large-weight: 400;
141
- --smrt-typography-headline-large-tracking: 0;
145
+ --smrt-typography-headline-large-tracking: -0.01em;
142
146
  --smrt-typography-headline-large-font-family: var(--smrt-font-family);
143
147
  --smrt-typography-headline-large-font: 400 2rem/1.25 var(--smrt-font-family);
144
148
  --smrt-typography-headline-medium-size: 1.75rem;
145
149
  --smrt-typography-headline-medium-line-height: 1.3;
146
150
  --smrt-typography-headline-medium-weight: 400;
147
- --smrt-typography-headline-medium-tracking: 0;
151
+ --smrt-typography-headline-medium-tracking: -0.005em;
148
152
  --smrt-typography-headline-medium-font-family: var(--smrt-font-family);
149
153
  --smrt-typography-headline-medium-font: 400 1.75rem/1.3 var(--smrt-font-family);
150
154
  --smrt-typography-headline-small-size: 1.5rem;
@@ -198,13 +202,13 @@
198
202
  --smrt-typography-label-medium-size: 0.75rem;
199
203
  --smrt-typography-label-medium-line-height: 1.4;
200
204
  --smrt-typography-label-medium-weight: 500;
201
- --smrt-typography-label-medium-tracking: 0.05em;
205
+ --smrt-typography-label-medium-tracking: 0.02em;
202
206
  --smrt-typography-label-medium-font-family: var(--smrt-font-family);
203
207
  --smrt-typography-label-medium-font: 500 0.75rem/1.4 var(--smrt-font-family);
204
208
  --smrt-typography-label-small-size: 0.6875rem;
205
209
  --smrt-typography-label-small-line-height: 1.4;
206
210
  --smrt-typography-label-small-weight: 500;
207
- --smrt-typography-label-small-tracking: 0.05em;
211
+ --smrt-typography-label-small-tracking: 0.03em;
208
212
  --smrt-typography-label-small-font-family: var(--smrt-font-family);
209
213
  --smrt-typography-label-small-font: 500 0.6875rem/1.4 var(--smrt-font-family);
210
214
  --smrt-spacing-0: 0;
@@ -248,12 +252,12 @@
248
252
  --smrt-radius-medium: 0.5rem;
249
253
  --smrt-radius-large: 0.75rem;
250
254
  --smrt-radius-extra-large: 1rem;
251
- --smrt-elevation-0: none;
252
- --smrt-elevation-1: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 0 rgb(0 0 0 / 0.02);
253
- --smrt-elevation-2: 0 1px 2px 0 rgb(0 0 0 / 0.06), 0 2px 4px 0 rgb(0 0 0 / 0.04);
254
- --smrt-elevation-3: 0 2px 4px 0 rgb(0 0 0 / 0.06), 0 4px 8px 0 rgb(0 0 0 / 0.04);
255
- --smrt-elevation-4: 0 4px 8px 0 rgb(0 0 0 / 0.08), 0 8px 16px 0 rgb(0 0 0 / 0.04);
256
- --smrt-elevation-5: 0 8px 16px 0 rgb(0 0 0 / 0.1), 0 16px 32px 0 rgb(0 0 0 / 0.04);
255
+ --smrt-elevation-0: 0 0 0 0 transparent;
256
+ --smrt-elevation-1: 0 1px 2px 0 color-mix(in srgb, var(--smrt-shadow-color) 8%, transparent), 0 2px 4px -1px color-mix(in srgb, var(--smrt-shadow-color) 6%, transparent);
257
+ --smrt-elevation-2: 0 1px 2px 0 color-mix(in srgb, var(--smrt-shadow-color) 10%, transparent), 0 4px 8px -2px color-mix(in srgb, var(--smrt-shadow-color) 10%, transparent);
258
+ --smrt-elevation-3: 0 1px 3px 0 color-mix(in srgb, var(--smrt-shadow-color) 12%, transparent), 0 8px 16px -4px color-mix(in srgb, var(--smrt-shadow-color) 12%, transparent);
259
+ --smrt-elevation-4: 0 2px 4px 0 color-mix(in srgb, var(--smrt-shadow-color) 12%, transparent), 0 12px 24px -6px color-mix(in srgb, var(--smrt-shadow-color) 14%, transparent);
260
+ --smrt-elevation-5: 0 2px 6px 0 color-mix(in srgb, var(--smrt-shadow-color) 14%, transparent), 0 20px 40px -10px color-mix(in srgb, var(--smrt-shadow-color) 18%, transparent);
257
261
  --smrt-duration-instant: 0ms;
258
262
  --smrt-duration-fast: 100ms;
259
263
  --smrt-duration-normal: 200ms;
@@ -291,6 +295,48 @@
291
295
  --smrt-z-index-toast: 1500;
292
296
  --smrt-z-index-tooltip: 1600;
293
297
  --smrt-z-index-loading: 1700;
298
+ --smrt-surface-ground: #f6f8fc;
299
+ --smrt-surface-panel: #ffffff;
300
+ --smrt-surface-control: #e8eaed;
301
+ --smrt-surface-raised: #ffffff;
302
+ --smrt-surface-sunken: #eef1f6;
303
+ --smrt-surface-overlay: rgba(0, 0, 0, 0.5);
304
+ --smrt-hairline-color: color-mix(in srgb, var(--smrt-color-on-surface) 10%, transparent);
305
+ --smrt-hairline-strong-color: color-mix(in srgb, var(--smrt-color-on-surface) 30%, transparent);
306
+ --smrt-hairline: 1px solid var(--smrt-hairline-color);
307
+ --smrt-hairline-strong: 1px solid var(--smrt-hairline-strong-color);
308
+ --smrt-inset-highlight: inset 0 1px 0 transparent;
309
+ --smrt-state-hover: 0.08;
310
+ --smrt-state-pressed: 0.12;
311
+ --smrt-state-selected: 0.12;
312
+ --smrt-state-focus: 0.12;
313
+ --smrt-state-dragged: 0.16;
314
+ --smrt-state-disabled: 0.38;
315
+ --smrt-shadow-color: rgb(0 0 0);
316
+ --smrt-control-radius: var(--smrt-radius-md);
317
+ --smrt-control-radius-small: var(--smrt-radius-sm);
318
+ --smrt-control-height: 2.75rem;
319
+ --smrt-control-height-small: 2.25rem;
320
+ --smrt-control-weight: 500;
321
+ --smrt-control-border: 1px solid transparent;
322
+ --smrt-focus-ring-color: var(--smrt-color-primary);
323
+ --smrt-focus-ring-width: 2px;
324
+ --smrt-focus-ring-offset: 2px;
325
+ --smrt-accent-color: var(--smrt-color-primary);
326
+ --smrt-selection-background: var(--smrt-color-primary-container);
327
+ --smrt-selection-color: var(--smrt-color-on-primary-container);
328
+ --smrt-caret-color: var(--smrt-color-primary);
329
+ --smrt-scrollbar-thumb: var(--smrt-hairline-strong-color);
330
+ --smrt-scrollbar-track: transparent;
331
+ --smrt-glass-blur: 0px;
332
+ --smrt-glass-saturation: 100%;
333
+ --smrt-glass-surface: var(--smrt-surface-panel);
334
+ --smrt-glass-surface-strong: var(--smrt-surface-raised);
335
+ --smrt-glass-border: var(--smrt-hairline-color);
336
+ --smrt-glass-border-opacity: 1;
337
+ --smrt-glass-background-opacity: 1;
338
+ --smrt-duration-scheme: var(--smrt-duration-medium1);
339
+ --smrt-font-feature-settings: normal;
294
340
  }
295
341
 
296
342
  [data-theme="material"][data-color-scheme="dark"] {
@@ -312,6 +358,10 @@
312
358
  --smrt-color-on-tertiary: #3e1e96;
313
359
  --smrt-color-tertiary-container: #5e3fc0;
314
360
  --smrt-color-on-tertiary-container: #e8ddff;
361
+ --smrt-color-info: #cbb7ff;
362
+ --smrt-color-on-info: #3e1e96;
363
+ --smrt-color-info-container: #5e3fc0;
364
+ --smrt-color-on-info-container: #e8ddff;
315
365
  --smrt-color-error: #f2b8b5;
316
366
  --smrt-color-on-error: #601410;
317
367
  --smrt-color-error-container: #8c1d18;
@@ -324,18 +374,18 @@
324
374
  --smrt-color-on-success: #0d522d;
325
375
  --smrt-color-success-container: #1e4620;
326
376
  --smrt-color-on-success-container: #e6f4ea;
327
- --smrt-color-surface: #0e0e0e;
377
+ --smrt-color-surface: #1b1c20;
328
378
  --smrt-color-on-surface: #e3e3e3;
329
- --smrt-color-surface-variant: #1f1f1f;
379
+ --smrt-color-surface-variant: #26282c;
330
380
  --smrt-color-on-surface-variant: #c4c7c5;
331
- --smrt-color-surface-container: #1f1f1f;
332
- --smrt-color-surface-container-low: #141414;
333
- --smrt-color-surface-container-high: #2d2d2d;
334
- --smrt-color-surface-container-highest: #363636;
335
- --smrt-color-surface-container-lowest: #0a0a0a;
336
- --smrt-color-surface-dim: #141414;
337
- --smrt-color-surface-bright: #2d2d2d;
338
- --smrt-color-background: #0e0e0e;
381
+ --smrt-color-surface-container: #1f2024;
382
+ --smrt-color-surface-container-low: #17181c;
383
+ --smrt-color-surface-container-high: #26282c;
384
+ --smrt-color-surface-container-highest: #34363a;
385
+ --smrt-color-surface-container-lowest: #0d0e11;
386
+ --smrt-color-surface-dim: #121316;
387
+ --smrt-color-surface-bright: #393b3f;
388
+ --smrt-color-background: #121316;
339
389
  --smrt-color-on-background: #e3e3e3;
340
390
  --smrt-color-outline: #8e918f;
341
391
  --smrt-color-outline-variant: #444746;
@@ -353,25 +403,25 @@
353
403
  --smrt-typography-display-medium-size: 2.75rem;
354
404
  --smrt-typography-display-medium-line-height: 1.15;
355
405
  --smrt-typography-display-medium-weight: 400;
356
- --smrt-typography-display-medium-tracking: -0.01em;
406
+ --smrt-typography-display-medium-tracking: -0.015em;
357
407
  --smrt-typography-display-medium-font-family: var(--smrt-font-family);
358
408
  --smrt-typography-display-medium-font: 400 2.75rem/1.15 var(--smrt-font-family);
359
409
  --smrt-typography-display-small-size: 2.25rem;
360
410
  --smrt-typography-display-small-line-height: 1.2;
361
411
  --smrt-typography-display-small-weight: 400;
362
- --smrt-typography-display-small-tracking: 0;
412
+ --smrt-typography-display-small-tracking: -0.01em;
363
413
  --smrt-typography-display-small-font-family: var(--smrt-font-family);
364
414
  --smrt-typography-display-small-font: 400 2.25rem/1.2 var(--smrt-font-family);
365
415
  --smrt-typography-headline-large-size: 2rem;
366
416
  --smrt-typography-headline-large-line-height: 1.25;
367
417
  --smrt-typography-headline-large-weight: 400;
368
- --smrt-typography-headline-large-tracking: 0;
418
+ --smrt-typography-headline-large-tracking: -0.01em;
369
419
  --smrt-typography-headline-large-font-family: var(--smrt-font-family);
370
420
  --smrt-typography-headline-large-font: 400 2rem/1.25 var(--smrt-font-family);
371
421
  --smrt-typography-headline-medium-size: 1.75rem;
372
422
  --smrt-typography-headline-medium-line-height: 1.3;
373
423
  --smrt-typography-headline-medium-weight: 400;
374
- --smrt-typography-headline-medium-tracking: 0;
424
+ --smrt-typography-headline-medium-tracking: -0.005em;
375
425
  --smrt-typography-headline-medium-font-family: var(--smrt-font-family);
376
426
  --smrt-typography-headline-medium-font: 400 1.75rem/1.3 var(--smrt-font-family);
377
427
  --smrt-typography-headline-small-size: 1.5rem;
@@ -425,13 +475,13 @@
425
475
  --smrt-typography-label-medium-size: 0.75rem;
426
476
  --smrt-typography-label-medium-line-height: 1.4;
427
477
  --smrt-typography-label-medium-weight: 500;
428
- --smrt-typography-label-medium-tracking: 0.05em;
478
+ --smrt-typography-label-medium-tracking: 0.02em;
429
479
  --smrt-typography-label-medium-font-family: var(--smrt-font-family);
430
480
  --smrt-typography-label-medium-font: 500 0.75rem/1.4 var(--smrt-font-family);
431
481
  --smrt-typography-label-small-size: 0.6875rem;
432
482
  --smrt-typography-label-small-line-height: 1.4;
433
483
  --smrt-typography-label-small-weight: 500;
434
- --smrt-typography-label-small-tracking: 0.05em;
484
+ --smrt-typography-label-small-tracking: 0.03em;
435
485
  --smrt-typography-label-small-font-family: var(--smrt-font-family);
436
486
  --smrt-typography-label-small-font: 500 0.6875rem/1.4 var(--smrt-font-family);
437
487
  --smrt-spacing-0: 0;
@@ -475,12 +525,12 @@
475
525
  --smrt-radius-medium: 0.5rem;
476
526
  --smrt-radius-large: 0.75rem;
477
527
  --smrt-radius-extra-large: 1rem;
478
- --smrt-elevation-0: none;
479
- --smrt-elevation-1: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 0 rgb(0 0 0 / 0.02);
480
- --smrt-elevation-2: 0 1px 2px 0 rgb(0 0 0 / 0.06), 0 2px 4px 0 rgb(0 0 0 / 0.04);
481
- --smrt-elevation-3: 0 2px 4px 0 rgb(0 0 0 / 0.06), 0 4px 8px 0 rgb(0 0 0 / 0.04);
482
- --smrt-elevation-4: 0 4px 8px 0 rgb(0 0 0 / 0.08), 0 8px 16px 0 rgb(0 0 0 / 0.04);
483
- --smrt-elevation-5: 0 8px 16px 0 rgb(0 0 0 / 0.1), 0 16px 32px 0 rgb(0 0 0 / 0.04);
528
+ --smrt-elevation-0: 0 0 0 0 transparent;
529
+ --smrt-elevation-1: 0 1px 2px 0 color-mix(in srgb, var(--smrt-shadow-color) 24%, transparent), 0 1px 3px -1px color-mix(in srgb, var(--smrt-shadow-color) 16%, transparent);
530
+ --smrt-elevation-2: var(--smrt-inset-highlight), 0 1px 2px 0 color-mix(in srgb, var(--smrt-shadow-color) 28%, transparent), 0 3px 6px -2px color-mix(in srgb, var(--smrt-shadow-color) 20%, transparent);
531
+ --smrt-elevation-3: var(--smrt-inset-highlight), 0 1px 3px 0 color-mix(in srgb, var(--smrt-shadow-color) 30%, transparent), 0 6px 12px -3px color-mix(in srgb, var(--smrt-shadow-color) 24%, transparent);
532
+ --smrt-elevation-4: var(--smrt-inset-highlight), 0 2px 4px 0 color-mix(in srgb, var(--smrt-shadow-color) 32%, transparent), 0 10px 20px -5px color-mix(in srgb, var(--smrt-shadow-color) 28%, transparent);
533
+ --smrt-elevation-5: var(--smrt-inset-highlight), 0 2px 6px 0 color-mix(in srgb, var(--smrt-shadow-color) 34%, transparent), 0 16px 32px -8px color-mix(in srgb, var(--smrt-shadow-color) 32%, transparent);
484
534
  --smrt-duration-instant: 0ms;
485
535
  --smrt-duration-fast: 100ms;
486
536
  --smrt-duration-normal: 200ms;
@@ -518,6 +568,48 @@
518
568
  --smrt-z-index-toast: 1500;
519
569
  --smrt-z-index-tooltip: 1600;
520
570
  --smrt-z-index-loading: 1700;
571
+ --smrt-surface-ground: #121316;
572
+ --smrt-surface-panel: #1b1c20;
573
+ --smrt-surface-control: #26282c;
574
+ --smrt-surface-raised: #34363a;
575
+ --smrt-surface-sunken: #0d0e11;
576
+ --smrt-surface-overlay: rgba(0, 0, 0, 0.7);
577
+ --smrt-hairline-color: color-mix(in srgb, var(--smrt-color-on-surface) 10%, transparent);
578
+ --smrt-hairline-strong-color: color-mix(in srgb, var(--smrt-color-on-surface) 30%, transparent);
579
+ --smrt-hairline: 1px solid var(--smrt-hairline-color);
580
+ --smrt-hairline-strong: 1px solid var(--smrt-hairline-strong-color);
581
+ --smrt-inset-highlight: inset 0 1px 0 rgb(255 255 255 / 0.05);
582
+ --smrt-state-hover: 0.08;
583
+ --smrt-state-pressed: 0.12;
584
+ --smrt-state-selected: 0.12;
585
+ --smrt-state-focus: 0.12;
586
+ --smrt-state-dragged: 0.16;
587
+ --smrt-state-disabled: 0.38;
588
+ --smrt-shadow-color: rgb(0 0 0);
589
+ --smrt-control-radius: var(--smrt-radius-md);
590
+ --smrt-control-radius-small: var(--smrt-radius-sm);
591
+ --smrt-control-height: 2.75rem;
592
+ --smrt-control-height-small: 2.25rem;
593
+ --smrt-control-weight: 500;
594
+ --smrt-control-border: 1px solid transparent;
595
+ --smrt-focus-ring-color: var(--smrt-color-primary);
596
+ --smrt-focus-ring-width: 2px;
597
+ --smrt-focus-ring-offset: 2px;
598
+ --smrt-accent-color: var(--smrt-color-primary);
599
+ --smrt-selection-background: var(--smrt-color-primary-container);
600
+ --smrt-selection-color: var(--smrt-color-on-primary-container);
601
+ --smrt-caret-color: var(--smrt-color-primary);
602
+ --smrt-scrollbar-thumb: var(--smrt-hairline-strong-color);
603
+ --smrt-scrollbar-track: transparent;
604
+ --smrt-glass-blur: 0px;
605
+ --smrt-glass-saturation: 100%;
606
+ --smrt-glass-surface: var(--smrt-surface-panel);
607
+ --smrt-glass-surface-strong: var(--smrt-surface-raised);
608
+ --smrt-glass-border: var(--smrt-hairline-color);
609
+ --smrt-glass-border-opacity: 1;
610
+ --smrt-glass-background-opacity: 1;
611
+ --smrt-duration-scheme: var(--smrt-duration-medium1);
612
+ --smrt-font-feature-settings: normal;
521
613
  }
522
614
 
523
615
  /*
package/dist/themes/styles/smrt.css CHANGED
@@ -1,4 +1,5 @@
1
- /**
1
+
2
+ @layer smrt.reset, smrt.structure, smrt.theme;/**
2
3
  * SMRT Theme CSS
3
4
  *
4
5
  * Static CSS for the SMRT theme — a dark-first "engineering instrument panel"
@@ -35,6 +36,10 @@
35
36
  --smrt-color-on-tertiary: #ffffff;
36
37
  --smrt-color-tertiary-container: #e7e0ff;
37
38
  --smrt-color-on-tertiary-container: #3a2b8c;
39
+ --smrt-color-info: #2c6a96;
40
+ --smrt-color-on-info: #ffffff;
41
+ --smrt-color-info-container: #dcebf5;
42
+ --smrt-color-on-info-container: #0f3149;
38
43
  --smrt-color-error: #c0362c;
39
44
  --smrt-color-on-error: #ffffff;
40
45
  --smrt-color-error-container: #fbe0dd;
@@ -141,22 +146,22 @@
141
146
  --smrt-typography-body-small-font: 400 0.8125rem/1.55 var(--smrt-font-family);
142
147
  --smrt-typography-label-large-size: 0.8125rem;
143
148
  --smrt-typography-label-large-line-height: 1.4;
144
- --smrt-typography-label-large-weight: 600;
145
- --smrt-typography-label-large-tracking: 0.04em;
149
+ --smrt-typography-label-large-weight: 500;
150
+ --smrt-typography-label-large-tracking: 0.01em;
146
151
  --smrt-typography-label-large-font-family: var(--smrt-font-family);
147
- --smrt-typography-label-large-font: 600 0.8125rem/1.4 var(--smrt-font-family);
152
+ --smrt-typography-label-large-font: 500 0.8125rem/1.4 var(--smrt-font-family);
148
153
  --smrt-typography-label-medium-size: 0.6875rem;
149
154
  --smrt-typography-label-medium-line-height: 1.4;
150
- --smrt-typography-label-medium-weight: 600;
151
- --smrt-typography-label-medium-tracking: 0.08em;
155
+ --smrt-typography-label-medium-weight: 500;
156
+ --smrt-typography-label-medium-tracking: 0.03em;
152
157
  --smrt-typography-label-medium-font-family: var(--smrt-font-family);
153
- --smrt-typography-label-medium-font: 600 0.6875rem/1.4 var(--smrt-font-family);
158
+ --smrt-typography-label-medium-font: 500 0.6875rem/1.4 var(--smrt-font-family);
154
159
  --smrt-typography-label-small-size: 0.625rem;
155
160
  --smrt-typography-label-small-line-height: 1.4;
156
- --smrt-typography-label-small-weight: 600;
157
- --smrt-typography-label-small-tracking: 0.1em;
161
+ --smrt-typography-label-small-weight: 500;
162
+ --smrt-typography-label-small-tracking: 0.05em;
158
163
  --smrt-typography-label-small-font-family: var(--smrt-font-family);
159
- --smrt-typography-label-small-font: 600 0.625rem/1.4 var(--smrt-font-family);
164
+ --smrt-typography-label-small-font: 500 0.625rem/1.4 var(--smrt-font-family);
160
165
  --smrt-spacing-0: 0;
161
166
  --smrt-spacing-1: 0.25rem;
162
167
  --smrt-spacing-2: 0.5rem;
@@ -198,12 +203,12 @@
198
203
  --smrt-radius-medium: 0.5rem;
199
204
  --smrt-radius-large: 0.75rem;
200
205
  --smrt-radius-extra-large: 1rem;
201
- --smrt-elevation-0: none;
202
- --smrt-elevation-1: inset 0 0 0 1px rgba(20, 26, 36, 0.08);
203
- --smrt-elevation-2: 0 18px 44px -28px rgba(20, 26, 36, 0.18);
204
- --smrt-elevation-3: 0 24px 56px -34px rgba(20, 26, 36, 0.22);
205
- --smrt-elevation-4: 0 30px 70px -40px rgba(20, 26, 36, 0.28);
206
- --smrt-elevation-5: 0 40px 90px -50px rgba(20, 26, 36, 0.3);
206
+ --smrt-elevation-0: 0 0 0 0 transparent;
207
+ --smrt-elevation-1: inset 0 0 0 1px var(--smrt-hairline-color);
208
+ --smrt-elevation-2: 0 1px 2px 0 color-mix(in srgb, var(--smrt-shadow-color) 10%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--smrt-shadow-color) 10%, transparent);
209
+ --smrt-elevation-3: 0 1px 3px 0 color-mix(in srgb, var(--smrt-shadow-color) 12%, transparent), 0 8px 18px -6px color-mix(in srgb, var(--smrt-shadow-color) 14%, transparent);
210
+ --smrt-elevation-4: 0 2px 4px 0 color-mix(in srgb, var(--smrt-shadow-color) 14%, transparent), 0 14px 28px -8px color-mix(in srgb, var(--smrt-shadow-color) 16%, transparent);
211
+ --smrt-elevation-5: 0 2px 6px 0 color-mix(in srgb, var(--smrt-shadow-color) 16%, transparent), 0 24px 48px -12px color-mix(in srgb, var(--smrt-shadow-color) 20%, transparent);
207
212
  --smrt-duration-instant: 0ms;
208
213
  --smrt-duration-fast: 100ms;
209
214
  --smrt-duration-normal: 200ms;
@@ -241,6 +246,48 @@
241
246
  --smrt-z-index-toast: 1500;
242
247
  --smrt-z-index-tooltip: 1600;
243
248
  --smrt-z-index-loading: 1700;
249
+ --smrt-surface-ground: #edeff2;
250
+ --smrt-surface-panel: #ffffff;
251
+ --smrt-surface-control: #f5f6f8;
252
+ --smrt-surface-raised: #ffffff;
253
+ --smrt-surface-sunken: #e7eaee;
254
+ --smrt-surface-overlay: rgba(0, 0, 0, 0.5);
255
+ --smrt-hairline-color: color-mix(in srgb, var(--smrt-color-on-surface) 12%, transparent);
256
+ --smrt-hairline-strong-color: color-mix(in srgb, var(--smrt-color-on-surface) 30%, transparent);
257
+ --smrt-hairline: 1px solid var(--smrt-hairline-color);
258
+ --smrt-hairline-strong: 1px solid var(--smrt-hairline-strong-color);
259
+ --smrt-inset-highlight: inset 0 1px 0 transparent;
260
+ --smrt-state-hover: 0.10;
261
+ --smrt-state-pressed: 0.16;
262
+ --smrt-state-selected: 0.14;
263
+ --smrt-state-focus: 0.16;
264
+ --smrt-state-dragged: 0.20;
265
+ --smrt-state-disabled: 0.38;
266
+ --smrt-shadow-color: rgb(20 26 36);
267
+ --smrt-control-radius: var(--smrt-radius-sm);
268
+ --smrt-control-radius-small: var(--smrt-radius-sm);
269
+ --smrt-control-height: 2.5rem;
270
+ --smrt-control-height-small: 2rem;
271
+ --smrt-control-weight: 500;
272
+ --smrt-control-border: var(--smrt-hairline-strong);
273
+ --smrt-focus-ring-color: var(--smrt-color-primary);
274
+ --smrt-focus-ring-width: 2px;
275
+ --smrt-focus-ring-offset: 2px;
276
+ --smrt-accent-color: var(--smrt-color-primary);
277
+ --smrt-selection-background: var(--smrt-color-primary-container);
278
+ --smrt-selection-color: var(--smrt-color-on-primary-container);
279
+ --smrt-caret-color: var(--smrt-color-primary);
280
+ --smrt-scrollbar-thumb: var(--smrt-hairline-strong-color);
281
+ --smrt-scrollbar-track: transparent;
282
+ --smrt-glass-blur: 0px;
283
+ --smrt-glass-saturation: 100%;
284
+ --smrt-glass-surface: var(--smrt-surface-panel);
285
+ --smrt-glass-surface-strong: var(--smrt-surface-raised);
286
+ --smrt-glass-border: var(--smrt-hairline-color);
287
+ --smrt-glass-border-opacity: 1;
288
+ --smrt-glass-background-opacity: 1;
289
+ --smrt-duration-scheme: var(--smrt-duration-medium1);
290
+ --smrt-font-feature-settings: "tnum" 1, "cv11" 1;
244
291
  }
245
292
 
246
293
  [data-theme="smrt"][data-color-scheme="dark"] {
@@ -262,6 +309,10 @@
262
309
  --smrt-color-on-tertiary: #241a4d;
263
310
  --smrt-color-tertiary-container: #2a2350;
264
311
  --smrt-color-on-tertiary-container: #ddd4ff;
312
+ --smrt-color-info: #6fa8d6;
313
+ --smrt-color-on-info: #08202f;
314
+ --smrt-color-info-container: #162a39;
315
+ --smrt-color-on-info-container: #b5d6ee;
265
316
  --smrt-color-error: #ff6b6b;
266
317
  --smrt-color-on-error: #2a0a0a;
267
318
  --smrt-color-error-container: #3a1414;
@@ -368,22 +419,22 @@
368
419
  --smrt-typography-body-small-font: 400 0.8125rem/1.55 var(--smrt-font-family);
369
420
  --smrt-typography-label-large-size: 0.8125rem;
370
421
  --smrt-typography-label-large-line-height: 1.4;
371
- --smrt-typography-label-large-weight: 600;
372
- --smrt-typography-label-large-tracking: 0.04em;
422
+ --smrt-typography-label-large-weight: 500;
423
+ --smrt-typography-label-large-tracking: 0.01em;
373
424
  --smrt-typography-label-large-font-family: var(--smrt-font-family);
374
- --smrt-typography-label-large-font: 600 0.8125rem/1.4 var(--smrt-font-family);
425
+ --smrt-typography-label-large-font: 500 0.8125rem/1.4 var(--smrt-font-family);
375
426
  --smrt-typography-label-medium-size: 0.6875rem;
376
427
  --smrt-typography-label-medium-line-height: 1.4;
377
- --smrt-typography-label-medium-weight: 600;
378
- --smrt-typography-label-medium-tracking: 0.08em;
428
+ --smrt-typography-label-medium-weight: 500;
429
+ --smrt-typography-label-medium-tracking: 0.03em;
379
430
  --smrt-typography-label-medium-font-family: var(--smrt-font-family);
380
- --smrt-typography-label-medium-font: 600 0.6875rem/1.4 var(--smrt-font-family);
431
+ --smrt-typography-label-medium-font: 500 0.6875rem/1.4 var(--smrt-font-family);
381
432
  --smrt-typography-label-small-size: 0.625rem;
382
433
  --smrt-typography-label-small-line-height: 1.4;
383
- --smrt-typography-label-small-weight: 600;
384
- --smrt-typography-label-small-tracking: 0.1em;
434
+ --smrt-typography-label-small-weight: 500;
435
+ --smrt-typography-label-small-tracking: 0.05em;
385
436
  --smrt-typography-label-small-font-family: var(--smrt-font-family);
386
- --smrt-typography-label-small-font: 600 0.625rem/1.4 var(--smrt-font-family);
437
+ --smrt-typography-label-small-font: 500 0.625rem/1.4 var(--smrt-font-family);
387
438
  --smrt-spacing-0: 0;
388
439
  --smrt-spacing-1: 0.25rem;
389
440
  --smrt-spacing-2: 0.5rem;
@@ -425,12 +476,12 @@
425
476
  --smrt-radius-medium: 0.5rem;
426
477
  --smrt-radius-large: 0.75rem;
427
478
  --smrt-radius-extra-large: 1rem;
428
- --smrt-elevation-0: none;
429
- --smrt-elevation-1: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
430
- --smrt-elevation-2: 0 18px 44px -28px rgba(0, 0, 0, 0.6);
431
- --smrt-elevation-3: 0 24px 56px -34px rgba(0, 0, 0, 0.72);
432
- --smrt-elevation-4: 0 30px 66px -40px rgba(0, 0, 0, 0.82);
433
- --smrt-elevation-5: 0 40px 90px -50px rgba(0, 0, 0, 0.88);
479
+ --smrt-elevation-0: 0 0 0 0 transparent;
480
+ --smrt-elevation-1: inset 0 0 0 1px var(--smrt-hairline-color);
481
+ --smrt-elevation-2: var(--smrt-inset-highlight), 0 1px 2px 0 color-mix(in srgb, var(--smrt-shadow-color) 36%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--smrt-shadow-color) 28%, transparent);
482
+ --smrt-elevation-3: var(--smrt-inset-highlight), 0 1px 3px 0 color-mix(in srgb, var(--smrt-shadow-color) 40%, transparent), 0 8px 18px -6px color-mix(in srgb, var(--smrt-shadow-color) 36%, transparent);
483
+ --smrt-elevation-4: var(--smrt-inset-highlight), 0 2px 4px 0 color-mix(in srgb, var(--smrt-shadow-color) 44%, transparent), 0 14px 28px -8px color-mix(in srgb, var(--smrt-shadow-color) 42%, transparent);
484
+ --smrt-elevation-5: var(--smrt-inset-highlight), 0 2px 6px 0 color-mix(in srgb, var(--smrt-shadow-color) 48%, transparent), 0 24px 48px -12px color-mix(in srgb, var(--smrt-shadow-color) 50%, transparent);
434
485
  --smrt-duration-instant: 0ms;
435
486
  --smrt-duration-fast: 100ms;
436
487
  --smrt-duration-normal: 200ms;
@@ -468,6 +519,48 @@
468
519
  --smrt-z-index-toast: 1500;
469
520
  --smrt-z-index-tooltip: 1600;
470
521
  --smrt-z-index-loading: 1700;
522
+ --smrt-surface-ground: #0b0c0e;
523
+ --smrt-surface-panel: #121417;
524
+ --smrt-surface-control: #181b1f;
525
+ --smrt-surface-raised: #1d2126;
526
+ --smrt-surface-sunken: #08090b;
527
+ --smrt-surface-overlay: rgba(0, 0, 0, 0.7);
528
+ --smrt-hairline-color: color-mix(in srgb, var(--smrt-color-on-surface) 9%, transparent);
529
+ --smrt-hairline-strong-color: color-mix(in srgb, var(--smrt-color-on-surface) 24%, transparent);
530
+ --smrt-hairline: 1px solid var(--smrt-hairline-color);
531
+ --smrt-hairline-strong: 1px solid var(--smrt-hairline-strong-color);
532
+ --smrt-inset-highlight: inset 0 1px 0 rgb(255 255 255 / 0.05);
533
+ --smrt-state-hover: 0.10;
534
+ --smrt-state-pressed: 0.16;
535
+ --smrt-state-selected: 0.14;
536
+ --smrt-state-focus: 0.16;
537
+ --smrt-state-dragged: 0.20;
538
+ --smrt-state-disabled: 0.38;
539
+ --smrt-shadow-color: rgb(0 0 0);
540
+ --smrt-control-radius: var(--smrt-radius-sm);
541
+ --smrt-control-radius-small: var(--smrt-radius-sm);
542
+ --smrt-control-height: 2.5rem;
543
+ --smrt-control-height-small: 2rem;
544
+ --smrt-control-weight: 500;
545
+ --smrt-control-border: var(--smrt-hairline-strong);
546
+ --smrt-focus-ring-color: var(--smrt-color-primary);
547
+ --smrt-focus-ring-width: 2px;
548
+ --smrt-focus-ring-offset: 2px;
549
+ --smrt-accent-color: var(--smrt-color-primary);
550
+ --smrt-selection-background: var(--smrt-color-primary-container);
551
+ --smrt-selection-color: var(--smrt-color-on-primary-container);
552
+ --smrt-caret-color: var(--smrt-color-primary);
553
+ --smrt-scrollbar-thumb: var(--smrt-hairline-strong-color);
554
+ --smrt-scrollbar-track: transparent;
555
+ --smrt-glass-blur: 0px;
556
+ --smrt-glass-saturation: 100%;
557
+ --smrt-glass-surface: var(--smrt-surface-panel);
558
+ --smrt-glass-surface-strong: var(--smrt-surface-raised);
559
+ --smrt-glass-border: var(--smrt-hairline-color);
560
+ --smrt-glass-border-opacity: 1;
561
+ --smrt-glass-background-opacity: 1;
562
+ --smrt-duration-scheme: var(--smrt-duration-medium1);
563
+ --smrt-font-feature-settings: "tnum" 1, "cv11" 1;
471
564
  }
472
565
 
473
566
  /* ============================================================================
@@ -481,6 +574,7 @@
481
574
 
482
575
  /* Faint engineering-grid background with a radial fade.
483
576
  * Put on a full-bleed section or a fixed underlay element. */
577
+ @layer smrt.theme {
484
578
  .smrt-grid-bg {
485
579
  position: relative;
486
580
  }
@@ -648,3 +742,4 @@
648
742
  transition: none;
649
743
  }
650
744
  }
745
+ }