@happyvertical/smrt-ui 0.55.16 → 0.55.17

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 (138) hide show
  1. package/AGENTS.md +14 -0
  2. package/README.md +68 -0
  3. package/dist/components/calendar/Calendar.svelte +59 -56
  4. package/dist/components/calendar/CalendarView.svelte +79 -76
  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 +10 -7
  8. package/dist/components/chat/TypingIndicator.svelte +12 -9
  9. package/dist/components/data/CollectionList.svelte +10 -7
  10. package/dist/components/data/CollectionToolbar.svelte +5 -2
  11. package/dist/components/data/DataTable.svelte +51 -48
  12. package/dist/components/data/ListSortSelect.svelte +8 -5
  13. package/dist/components/data/SortableHeader.svelte +9 -6
  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 +9 -6
  20. package/dist/components/feedback/ConfirmDialog.svelte +13 -10
  21. package/dist/components/feedback/LoadingOverlay.svelte +35 -32
  22. package/dist/components/feedback/Meter.svelte +4 -1
  23. package/dist/components/feedback/Modal.svelte +20 -17
  24. package/dist/components/feedback/PhoneSheet.svelte +4 -1
  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 +17 -14
  29. package/dist/components/feedback/WorkingStrip.svelte +6 -3
  30. package/dist/components/forms/CameraCapture.svelte +6 -3
  31. package/dist/components/forms/Checkbox.svelte +10 -7
  32. package/dist/components/forms/Combobox.svelte +4 -1
  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 +4 -1
  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 +14 -11
  44. package/dist/components/forms/InputGroup.svelte +5 -2
  45. package/dist/components/forms/Listbox.svelte +4 -1
  46. package/dist/components/forms/MultiSelect.svelte +4 -1
  47. package/dist/components/forms/Radio.svelte +8 -5
  48. package/dist/components/forms/RadioGroup.svelte +5 -2
  49. package/dist/components/forms/RangeSlider.svelte +4 -1
  50. package/dist/components/forms/RelationInput.svelte +7 -4
  51. package/dist/components/forms/SearchInput.svelte +5 -2
  52. package/dist/components/forms/SegmentedControl.svelte +5 -2
  53. package/dist/components/forms/Select.svelte +12 -9
  54. package/dist/components/forms/SignaturePad.svelte +6 -3
  55. package/dist/components/forms/Slider.svelte +4 -1
  56. package/dist/components/forms/StagedControlReview.svelte +15 -12
  57. package/dist/components/forms/Switch.svelte +7 -4
  58. package/dist/components/forms/TagsInput.svelte +4 -1
  59. package/dist/components/forms/Textarea.svelte +13 -10
  60. package/dist/components/forms/TimePicker.svelte +7 -2
  61. package/dist/components/forms/Toggle.svelte +13 -10
  62. package/dist/components/forms/ToggleButton.svelte +4 -1
  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 +10 -7
  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 +28 -24
  77. package/dist/components/permissions/PermissionPicker.svelte +4 -1
  78. package/dist/components/roles/RoleBadge.svelte +8 -5
  79. package/dist/components/roles/RoleSelector.svelte +21 -18
  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 +4 -1
  83. package/dist/components/ui/Avatar.svelte +10 -7
  84. package/dist/components/ui/Badge.svelte +4 -1
  85. package/dist/components/ui/Button.svelte +11 -8
  86. package/dist/components/ui/Card.svelte +7 -4
  87. package/dist/components/ui/Chip.svelte +12 -9
  88. package/dist/components/ui/Disclosure.svelte +4 -1
  89. package/dist/components/ui/Dropdown.svelte +17 -14
  90. package/dist/components/ui/IconToggle.svelte +10 -7
  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 +5 -2
  96. package/dist/components/ui/Skeleton.svelte +10 -7
  97. package/dist/components/ui/Tooltip.svelte +12 -9
  98. package/dist/components/ui/Tree.svelte +10 -7
  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 +25 -0
  121. package/dist/themes/README.md +25 -0
  122. package/dist/themes/ThemeProvider.svelte +11 -2
  123. package/dist/themes/ThemeProvider.svelte.d.ts.map +1 -1
  124. package/dist/themes/components/ColorSchemeToggle.svelte +17 -14
  125. package/dist/themes/components/ThemeSwitcher.svelte +14 -11
  126. package/dist/themes/create-theme.d.ts.map +1 -1
  127. package/dist/themes/create-theme.js +8 -5
  128. package/dist/themes/css-generator.d.ts.map +1 -1
  129. package/dist/themes/css-generator.js +5 -4
  130. package/dist/themes/required-tokens.generated.json +172 -0
  131. package/dist/themes/styles/base.css +4 -1
  132. package/dist/themes/styles/glass.css +4 -1
  133. package/dist/themes/styles/happyvertical.css +7 -3
  134. package/dist/themes/styles/smrt.css +4 -1
  135. package/dist/themes/styles/studio.css +4 -1
  136. package/dist/utils/theme/typography.d.ts +21 -21
  137. package/dist/utils/theme/typography.js +21 -21
  138. package/package.json +8 -2
package/AGENTS.md CHANGED
@@ -65,6 +65,8 @@ components are exempt — they *are* the primitives.
65
65
  | `./themes/styles/happyvertical.css` | static HappyVertical "Day Shift" brand CSS (enamel/faceplate calm instrument panel) + amber focus rule + `.hv-*` utilities |
66
66
  | `./themes/styles/happyvertical-fonts.css` | optional self-hosted `@font-face` for the Day Shift type stack (Archivo / B612 / B612 Mono) |
67
67
  | `./styles/tokens.css` | base token stylesheet |
68
+ | `./styles/layers.css` | cascade-layer declaration (`smrt.reset < smrt.structure < smrt.theme`) |
69
+ | `./styles/unstyled.css` | styleless mode: reverts component look to `smrt.structure`, keeps layout (see [agents/styling.md](agents/styling.md)) |
68
70
 
69
71
  Also internal: `actions/` (`ripple`, `permission`), `display/`, `data/`,
70
72
  `nav/`, `permissions/`, `utils/`, `test-support/`.
@@ -100,6 +102,18 @@ other text pairing clears WCAG AA in both schemes.
100
102
 
101
103
  ## Rules
102
104
 
105
+ - **Styling hooks are public API.** Every exported component's root carries
106
+ `data-smrt-component="<Name>"` (enforced by `pnpm check:component-roots`, run
107
+ from `pnpm lint`). Internal elements use role-named `data-smrt-part` values;
108
+ never encode state in a part name. See [agents/styling.md](agents/styling.md).
109
+ - **Every consumed token is theme-required.** `pnpm lint` checks that
110
+ `src/themes/required-tokens.generated.json` is current (regenerate with
111
+ `node scripts/generate-smrt-required-tokens.mjs` after adding a token
112
+ consumer); `src/themes/__tests__/required-tokens.test.ts` requires every preset
113
+ and `createTheme()` output to define each one. Do not add `var(--smrt-*, <literal>)`
114
+ fallbacks for theme tokens. Component-private `--smrt-<component>-*` names are
115
+ excluded. Style literals (`#hex`, `px`) in `.svelte` style blocks are ratcheted by
116
+ `scripts/smrt-style-literal-allowlist.json` via `check-smrt-token-vocabulary.mjs`.
103
117
  - **No smrt domain imports.** A `@happyvertical/smrt-*` import other than
104
118
  `smrt-types` reintroduces the cycle. Components consume `var(--smrt-*)` CSS
105
119
  tokens directly and accept identity data via `smrt-types` contracts.
package/README.md CHANGED
@@ -1104,6 +1104,74 @@ classes. Unset, each keeps its stock look.
1104
1104
  `IconToggle` takes a `tone` prop (a CSS colour such as `var(--status-draft)`) for
1105
1105
  a toggle that is neutral until pressed and then wears its colour.
1106
1106
 
1107
+ ## Restyling smrt components
1108
+
1109
+ Components depend on three public things only: **token names** (`--smrt-*`),
1110
+ **cascade-layer names** (`smrt.reset`, `smrt.structure`, `smrt.theme`), and
1111
+ **`data-smrt-*` hooks**. Everything else inside a component's stylesheet can
1112
+ change without notice.
1113
+
1114
+ Every component `<style>` block is wrapped in `@layer smrt.theme { … }`. The
1115
+ global stylesheets follow the same rule: `themes/styles/base.css` sits in
1116
+ `smrt.reset`, and the rule-bearing parts of each preset sit in `smrt.theme`.
1117
+ Custom-property token blocks stay unlayered. The layer order is declared once in
1118
+ `@happyvertical/smrt-ui/styles/layers.css`.
1119
+ `ThemeProvider` injects the same declaration into `<head>`, so most apps need
1120
+ nothing extra. If an app does not use `ThemeProvider`, import the stylesheet
1121
+ before any other smrt stylesheet:
1122
+
1123
+ ```ts
1124
+ import '@happyvertical/smrt-ui/styles/layers.css';
1125
+ ```
1126
+
1127
+ Layers are ordered lowest to highest: `smrt.reset` < `smrt.structure` <
1128
+ `smrt.theme`. **Unlayered app CSS beats every smrt layer**, regardless of
1129
+ selector specificity. Restyle with plain selectors. Do not use `:global()` or
1130
+ `!important`.
1131
+
1132
+ ### Token override
1133
+
1134
+ Set tokens on a wrapper or `:root` in your own theme layer:
1135
+
1136
+ ```css
1137
+ :root {
1138
+ --smrt-color-surface-variant: #f4f1ea;
1139
+ }
1140
+ ```
1141
+
1142
+ ### Unlayered override
1143
+
1144
+ Target a component by the element or wrapper you control. Component class names
1145
+ are hashed by Svelte and are not a contract:
1146
+
1147
+ ```css
1148
+ .checkout-actions button {
1149
+ border-radius: 0;
1150
+ }
1151
+ ```
1152
+
1153
+ `data-smrt-component` roots and `data-smrt-part` hooks are the intended way to
1154
+ target internal parts. They are rolling out component by component (tracked
1155
+ in #3824). Until a component exposes them, target it through its rendered
1156
+ element or your own wrapper.
1157
+
1158
+ ### Consumer check when upgrading
1159
+
1160
+ Layered component CSS now loses to any unlayered app rule. An app rule that
1161
+ previously lost on specificity can now win. Before upgrading smrt-ui, search your
1162
+ app for `:global(` and for unlayered rules that target smrt components, then
1163
+ confirm each still renders as intended. Remove overrides that only existed to
1164
+ win a specificity fight.
1165
+
1166
+ ### Adding or changing a component stylesheet
1167
+
1168
+ Component `<style>` blocks must be inside `@layer smrt.*`. The lint gate
1169
+ `node scripts/check-smrt-cascade-layers.mjs` (part of `pnpm lint`) fails
1170
+ otherwise. To wrap an unlayered block, run `node scripts/codemod-smrt-layers.mjs`
1171
+ from the repository root. The codemod is idempotent and refuses blocks it cannot
1172
+ wrap safely (top-level `@import` or `@charset`, or a mix of layered and
1173
+ unlayered rules).
1174
+
1107
1175
  ## Development
1108
1176
 
1109
1177
  ```bash
package/dist/components/calendar/Calendar.svelte CHANGED
@@ -219,7 +219,7 @@ const yearOptions = $derived(() => {
219
219
  });
220
220
  </script>
221
221
 
222
- <div class="calendar">
222
+ <div class="calendar" data-smrt-component="Calendar">
223
223
  <header class="calendar-header">
224
224
  <div class="nav-buttons">
225
225
  <button class="nav-btn" onclick={prevMonth} aria-label={t(M['ui.calendar.previous_month'])}>
@@ -298,18 +298,20 @@ const yearOptions = $derived(() => {
298
298
  </div>
299
299
 
300
300
  <style>
301
+ @layer smrt.reset, smrt.structure, smrt.theme;
302
+ @layer smrt.theme {
301
303
  .calendar {
302
- --calendar-bg: var(--smrt-color-surface, #ffffff);
303
- --calendar-border: var(--smrt-color-outline-variant, #e5e7eb);
304
- --calendar-header-bg: var(--smrt-color-surface-container-low, #f5f5f5);
305
- --day-hover: var(--smrt-color-surface-container-low, #f5f5f5);
306
- --today-bg: var(--smrt-color-primary-container, #e3f2fd);
307
- --today-border: var(--smrt-color-primary, #005ac1);
308
- --other-month: var(--smrt-color-on-surface-variant, #9ca3af);
309
-
310
- background: var(--calendar-bg);
311
- border: 1px solid var(--calendar-border);
312
- border-radius: var(--smrt-radius-large, 12px);
304
+ --smrt-calendar-bg: var(--smrt-color-surface);
305
+ --smrt-calendar-border: var(--smrt-color-outline-variant);
306
+ --smrt-calendar-header-bg: var(--smrt-color-surface-container-low);
307
+ --smrt-calendar-day-hover: var(--smrt-color-surface-container-low);
308
+ --smrt-calendar-today-bg: var(--smrt-color-primary-container);
309
+ --smrt-calendar-today-border: var(--smrt-color-primary);
310
+ --smrt-calendar-other-month: var(--smrt-color-on-surface-variant);
311
+
312
+ background: var(--smrt-calendar-bg);
313
+ border: 1px solid var(--smrt-calendar-border);
314
+ border-radius: var(--smrt-radius-large);
313
315
  overflow: hidden;
314
316
  }
315
317
 
@@ -320,24 +322,24 @@ const yearOptions = $derived(() => {
320
322
  * fallbacks preserve the calendar's dark palette when no theme is applied.
321
323
  */
322
324
  :global([data-theme="dark"]) .calendar {
323
- --calendar-bg: var(--smrt-color-surface, #242424);
324
- --calendar-border: var(--smrt-color-outline-variant, #3a3a3a);
325
- --calendar-header-bg: var(--smrt-color-surface-container-low, #2e2e2e);
326
- --day-hover: var(--smrt-color-surface-container-high, #3a3a3a);
327
- --today-bg: var(--smrt-color-primary-container, #1e3a5f);
328
- --today-border: var(--smrt-color-primary, #64b5f6);
329
- --other-month: var(--smrt-color-on-surface-variant, #666666);
325
+ --smrt-calendar-bg: var(--smrt-color-surface);
326
+ --smrt-calendar-border: var(--smrt-color-outline-variant);
327
+ --smrt-calendar-header-bg: var(--smrt-color-surface-container-low);
328
+ --smrt-calendar-day-hover: var(--smrt-color-surface-container-high);
329
+ --smrt-calendar-today-bg: var(--smrt-color-primary-container);
330
+ --smrt-calendar-today-border: var(--smrt-color-primary);
331
+ --smrt-calendar-other-month: var(--smrt-color-on-surface-variant);
330
332
  }
331
333
 
332
334
  @media (prefers-color-scheme: dark) {
333
335
  :global(:root:not([data-theme="light"])) .calendar {
334
- --calendar-bg: var(--smrt-color-surface, #242424);
335
- --calendar-border: var(--smrt-color-outline-variant, #3a3a3a);
336
- --calendar-header-bg: var(--smrt-color-surface-container-low, #2e2e2e);
337
- --day-hover: var(--smrt-color-surface-container-high, #3a3a3a);
338
- --today-bg: var(--smrt-color-primary-container, #1e3a5f);
339
- --today-border: var(--smrt-color-primary, #64b5f6);
340
- --other-month: var(--smrt-color-on-surface-variant, #666666);
336
+ --smrt-calendar-bg: var(--smrt-color-surface);
337
+ --smrt-calendar-border: var(--smrt-color-outline-variant);
338
+ --smrt-calendar-header-bg: var(--smrt-color-surface-container-low);
339
+ --smrt-calendar-day-hover: var(--smrt-color-surface-container-high);
340
+ --smrt-calendar-today-bg: var(--smrt-color-primary-container);
341
+ --smrt-calendar-today-border: var(--smrt-color-primary);
342
+ --smrt-calendar-other-month: var(--smrt-color-on-surface-variant);
341
343
  }
342
344
  }
343
345
 
@@ -346,8 +348,8 @@ const yearOptions = $derived(() => {
346
348
  justify-content: space-between;
347
349
  align-items: center;
348
350
  padding: var(--smrt-spacing-4, 1rem) var(--smrt-spacing-6, 1.5rem);
349
- background: var(--calendar-header-bg);
350
- border-bottom: 1px solid var(--calendar-border);
351
+ background: var(--smrt-calendar-header-bg);
352
+ border-bottom: 1px solid var(--smrt-calendar-border);
351
353
  flex-wrap: wrap;
352
354
  gap: var(--smrt-spacing-2, 0.5rem);
353
355
  }
@@ -364,20 +366,20 @@ const yearOptions = $derived(() => {
364
366
  justify-content: center;
365
367
  width: 32px;
366
368
  height: 32px;
367
- border-radius: var(--smrt-radius-medium, 8px);
368
- color: var(--smrt-color-on-surface-variant, #43474e);
369
+ border-radius: var(--smrt-radius-medium);
370
+ color: var(--smrt-color-on-surface-variant);
369
371
  transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
370
372
  }
371
373
 
372
374
  .nav-btn:hover {
373
- background: var(--day-hover);
374
- color: var(--smrt-color-on-surface, #1b1b1f);
375
+ background: var(--smrt-calendar-day-hover);
376
+ color: var(--smrt-color-on-surface);
375
377
  }
376
378
 
377
379
  .current-month {
378
380
  font-size: var(--smrt-typography-title-large-size, 1.125rem);
379
381
  font-weight: var(--smrt-typography-title-large-weight, 600);
380
- color: var(--smrt-color-on-surface, #1b1b1f);
382
+ color: var(--smrt-color-on-surface);
381
383
  min-width: 160px;
382
384
  text-align: center;
383
385
  }
@@ -391,26 +393,26 @@ const yearOptions = $derived(() => {
391
393
  .month-select,
392
394
  .year-select {
393
395
  padding: var(--smrt-spacing-1, 0.25rem) var(--smrt-spacing-2, 0.5rem);
394
- border: 1px solid var(--calendar-border);
395
- border-radius: var(--smrt-radius-small, 4px);
396
+ border: 1px solid var(--smrt-calendar-border);
397
+ border-radius: var(--smrt-radius-small);
396
398
  font-size: var(--smrt-typography-body-medium-size, 0.875rem);
397
- background: var(--calendar-bg);
399
+ background: var(--smrt-calendar-bg);
398
400
  cursor: pointer;
399
401
  }
400
402
 
401
403
  .today-btn {
402
404
  padding: var(--smrt-spacing-1, 0.25rem) var(--smrt-spacing-4, 1rem);
403
- border: 1px solid var(--calendar-border);
404
- border-radius: var(--smrt-radius-small, 4px);
405
+ border: 1px solid var(--smrt-calendar-border);
406
+ border-radius: var(--smrt-radius-small);
405
407
  font-size: var(--smrt-typography-body-medium-size, 0.875rem);
406
- background: var(--calendar-bg);
407
- color: var(--smrt-color-primary, #005ac1);
408
+ background: var(--smrt-calendar-bg);
409
+ color: var(--smrt-color-primary);
408
410
  font-weight: var(--smrt-typography-body-medium-weight, 500);
409
411
  transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
410
412
  }
411
413
 
412
414
  .today-btn:hover {
413
- background: var(--smrt-color-primary-container, #d6e3ff);
415
+ background: var(--smrt-color-primary-container);
414
416
  }
415
417
 
416
418
  .calendar-grid {
@@ -420,7 +422,7 @@ const yearOptions = $derived(() => {
420
422
  .day-headers {
421
423
  display: grid;
422
424
  grid-template-columns: repeat(7, 1fr);
423
- gap: var(--smrt-spacing-1, 4px);
425
+ gap: var(--smrt-spacing-1);
424
426
  margin-bottom: var(--smrt-spacing-1, 0.25rem);
425
427
  }
426
428
 
@@ -429,13 +431,13 @@ const yearOptions = $derived(() => {
429
431
  text-align: center;
430
432
  font-size: var(--smrt-typography-body-medium-size, 0.875rem);
431
433
  font-weight: var(--smrt-typography-body-medium-weight, 500);
432
- color: var(--smrt-color-on-surface-variant, #43474e);
434
+ color: var(--smrt-color-on-surface-variant);
433
435
  }
434
436
 
435
437
  .days {
436
438
  display: grid;
437
439
  grid-template-columns: repeat(7, 1fr);
438
- gap: var(--smrt-spacing-1, 4px);
440
+ gap: var(--smrt-spacing-1);
439
441
  }
440
442
 
441
443
  .day-cell {
@@ -444,28 +446,28 @@ const yearOptions = $derived(() => {
444
446
  flex-direction: column;
445
447
  align-items: center;
446
448
  padding: var(--smrt-spacing-1, 0.25rem);
447
- border-radius: var(--smrt-radius-small, 4px);
449
+ border-radius: var(--smrt-radius-small);
448
450
  text-decoration: none;
449
- color: var(--smrt-color-on-surface, #1b1b1f);
451
+ color: var(--smrt-color-on-surface);
450
452
  transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
451
453
  min-height: 60px;
452
454
  }
453
455
 
454
456
  .day-cell:hover {
455
- background: var(--day-hover);
457
+ background: var(--smrt-calendar-day-hover);
456
458
  }
457
459
 
458
460
  .day-cell.other-month {
459
- color: var(--other-month);
461
+ color: var(--smrt-calendar-other-month);
460
462
  }
461
463
 
462
464
  .day-cell.other-month:hover {
463
- color: var(--smrt-color-on-surface-variant, #43474e);
465
+ color: var(--smrt-color-on-surface-variant);
464
466
  }
465
467
 
466
468
  .day-cell.today {
467
- background: var(--today-bg);
468
- border: 2px solid var(--today-border);
469
+ background: var(--smrt-calendar-today-bg);
470
+ border: 2px solid var(--smrt-calendar-today-border);
469
471
  }
470
472
 
471
473
  .day-cell.has-events {
@@ -480,10 +482,10 @@ const yearOptions = $derived(() => {
480
482
  .event-indicators {
481
483
  display: flex;
482
484
  flex-wrap: wrap;
483
- gap: var(--smrt-spacing-1, 4px);
485
+ gap: var(--smrt-spacing-1);
484
486
  justify-content: center;
485
487
  margin-top: auto;
486
- font-size: var(--smrt-typography-label-medium-size, 12px);
488
+ font-size: var(--smrt-typography-label-medium-size);
487
489
  }
488
490
 
489
491
  .event-icon {
@@ -491,8 +493,8 @@ const yearOptions = $derived(() => {
491
493
  }
492
494
 
493
495
  .event-more {
494
- font-size: var(--smrt-typography-label-small-size, 10px);
495
- color: var(--smrt-color-on-surface-variant, #43474e);
496
+ font-size: var(--smrt-typography-label-small-size);
497
+ color: var(--smrt-color-on-surface-variant);
496
498
  }
497
499
 
498
500
  @media (max-width: 640px) {
@@ -523,7 +525,8 @@ const yearOptions = $derived(() => {
523
525
  }
524
526
 
525
527
  .event-indicators {
526
- font-size: var(--smrt-typography-label-small-size, 10px);
528
+ font-size: var(--smrt-typography-label-small-size);
527
529
  }
528
530
  }
531
+ }
529
532
  </style>