@reliability-design/web 1.0.6 → 1.2.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 (78) hide show
  1. package/dist/components/rel-accordion/rel-accordion.ts +20 -31
  2. package/dist/components/rel-alert/rel-alert.ts +81 -11
  3. package/dist/components/rel-avatar/rel-avatar.ts +6 -3
  4. package/dist/components/rel-badge/rel-badge.ts +8 -3
  5. package/dist/components/rel-breadcrumb/rel-breadcrumb.ts +6 -6
  6. package/dist/components/rel-button/rel-button.ts +118 -16
  7. package/dist/components/rel-calendar/rel-calendar.ts +16 -9
  8. package/dist/components/rel-card/rel-card.ts +9 -17
  9. package/dist/components/rel-cardmedia/rel-cardmedia.ts +20 -23
  10. package/dist/components/rel-carousel/rel-carousel.ts +596 -469
  11. package/dist/components/rel-checkbox/rel-checkbox.ts +98 -15
  12. package/dist/components/rel-chip/rel-chip.ts +291 -186
  13. package/dist/components/rel-container/rel-container.ts +2 -2
  14. package/dist/components/rel-date-picker/rel-date-picker.ts +23 -19
  15. package/dist/components/rel-divider/rel-divider.ts +12 -3
  16. package/dist/components/rel-drawer/rel-drawer-footer.ts +27 -0
  17. package/dist/components/rel-drawer/rel-drawer.ts +57 -113
  18. package/dist/components/rel-kbd/rel-kbd.ts +94 -118
  19. package/dist/components/rel-layout/rel-layout.ts +49 -58
  20. package/dist/components/rel-menu/rel-menu.ts +359 -327
  21. package/dist/components/rel-menubar/rel-menubar-menu.css +3 -0
  22. package/dist/components/rel-menubar/rel-menubar-menu.ts +2 -1
  23. package/dist/components/rel-menubar/rel-menubar.ts +602 -576
  24. package/dist/components/rel-nav-menu/rel-nav-menu-item.ts +240 -143
  25. package/dist/components/rel-nav-menu/rel-nav-menu.ts +227 -331
  26. package/dist/components/rel-navbar/rel-navbar.ts +13 -0
  27. package/dist/components/rel-otp/rel-otp.ts +22 -25
  28. package/dist/components/rel-pagination/rel-pagination.ts +112 -63
  29. package/dist/components/rel-popover/rel-popover-content.ts +6 -5
  30. package/dist/components/rel-popover/rel-popover.ts +42 -20
  31. package/dist/components/rel-progress/rel-progress.ts +10 -9
  32. package/dist/components/rel-radio/rel-radio.ts +228 -155
  33. package/dist/components/rel-range-picker/rel-range-picker.css +349 -0
  34. package/dist/components/rel-range-picker/rel-range-picker.ts +1079 -0
  35. package/dist/components/rel-resizable/rel-resizable-handle.ts +12 -15
  36. package/dist/components/rel-segmented-button/rel-segmented-button.ts +41 -20
  37. package/dist/components/rel-select/rel-select.ts +112 -27
  38. package/dist/components/rel-sheet/rel-sheet.ts +362 -683
  39. package/dist/components/rel-sidebar/rel-sidebar.ts +13 -5
  40. package/dist/components/rel-slider/rel-slider.ts +74 -29
  41. package/dist/components/rel-snackbar/rel-snackbar.ts +67 -37
  42. package/dist/components/rel-stepper/rel-stepper.ts +43 -31
  43. package/dist/components/rel-switch/rel-switch.ts +26 -12
  44. package/dist/components/rel-tab/rel-tab.ts +57 -37
  45. package/dist/components/rel-table/rel-table-body.ts +5 -0
  46. package/dist/components/rel-table/rel-table-caption.ts +6 -1
  47. package/dist/components/rel-table/rel-table-cell.ts +42 -49
  48. package/dist/components/rel-table/rel-table-footer.ts +5 -0
  49. package/dist/components/rel-table/rel-table-head.ts +13 -1
  50. package/dist/components/rel-table/rel-table-header.ts +5 -0
  51. package/dist/components/rel-table/rel-table-row.ts +7 -3
  52. package/dist/components/rel-table/rel-table.ts +8 -2
  53. package/dist/components/rel-textfield/rel-textfield.ts +153 -44
  54. package/dist/components/rel-toast/rel-toast.ts +56 -22
  55. package/dist/components/rel-tooltip/rel-tooltip.ts +52 -9
  56. package/dist/components/rel-topbar/rel-topbar-actions.ts +24 -0
  57. package/dist/components/rel-topbar/rel-topbar-brand.ts +47 -0
  58. package/dist/components/rel-topbar/rel-topbar-dropdown-item.ts +63 -0
  59. package/dist/components/rel-topbar/rel-topbar-dropdown.ts +28 -0
  60. package/dist/components/rel-topbar/rel-topbar-item.ts +320 -0
  61. package/dist/components/rel-topbar/rel-topbar-mobile-panel.ts +24 -0
  62. package/dist/components/rel-topbar/rel-topbar-profile.ts +222 -0
  63. package/dist/components/rel-topbar/rel-topbar-utilities.ts +24 -0
  64. package/dist/components/rel-topbar/rel-topbar.ts +438 -0
  65. package/dist/index.d.mts +375 -411
  66. package/dist/index.d.ts +375 -411
  67. package/dist/index.js +7587 -7980
  68. package/dist/index.js.map +1 -1
  69. package/dist/index.mjs +7647 -8023
  70. package/dist/index.mjs.map +1 -1
  71. package/dist/rel-menubar-menu-BEEQDAXW.css +3 -0
  72. package/dist/styles/vars-v2.css +525 -0
  73. package/dist/styles/vars.css +79 -27
  74. package/dist/{vars-ITL2K3KO.css → vars-I2PC74XD.css} +79 -27
  75. package/dist/vars-v2-VMGWTFJZ.css +525 -0
  76. package/package.json +3 -1
  77. package/dist/components/rel-quote-page/README.md +0 -166
  78. package/dist/components/rel-quote-page/rel-quote-page.ts +0 -816
package/dist/styles/vars.css CHANGED
@@ -1,4 +1,5 @@
1
- /* AUTO-GENERATED — CLEANED — DO NOT EDIT */
1
+ /* AUTO-GENERATED from tokens/*.json — DO NOT EDIT */
2
+ /* To regenerate: npm run sync-tokens -w @reliability-design/figma-pipeline */
2
3
 
3
4
  /* ------------------ THEME TRANSITIONS ------------------ */
4
5
  /* Smooth transitions for theme switching (light/dark) */
@@ -17,6 +18,7 @@
17
18
  }
18
19
 
19
20
  :root {
21
+
20
22
  /* ------------------ BORDER RADII ------------------ */
21
23
  --rel-borders-radius-border-radius-0: 0px;
22
24
  --rel-borders-radius-border-radius-100: 2px;
@@ -37,12 +39,10 @@
37
39
  --rel-colors-green-primary: #00F49C;
38
40
  --rel-colors-green-secondary: #06D98C;
39
41
  --rel-colors-green-tertiary: #00A86B;
40
- --rel-colors-green-success: #00A86B;
42
+ --rel-colors-green-success: #22C55E;
41
43
  --rel-colors-green-credited: #4CAA47;
42
44
  --rel-colors-green-bg-light: #E8F5E8;
43
-
44
45
  --rel-colors-black: #000000;
45
-
46
46
  --rel-colors-gray-primary: #333333;
47
47
  --rel-colors-gray-heading: #2B2B2B;
48
48
  --rel-colors-gray-placeholder: #A9A9A9;
@@ -56,67 +56,52 @@
56
56
  --rel-colors-gray-tab-border: #C4C4C4;
57
57
  --rel-colors-gray-surface: #F5F5F5;
58
58
  --rel-colors-gray-screen-bg: #EEEEEE;
59
-
60
59
  --rel-colors-red-primary: #CC0000;
61
60
  --rel-colors-red-secondary: #D50000;
62
61
  --rel-colors-red-tertiary: #9C1E33;
63
62
  --rel-colors-red-bg-alert: #FFE8EB;
64
63
  --rel-colors-red-light: #FFDEDE;
65
-
66
64
  --rel-colors-white: #FFFFFF;
67
-
68
65
  --rel-colors-blue-primary: #0091EA;
69
66
  --rel-colors-blue-secondary: #4A90E2;
70
67
  --rel-colors-blue-tertiary: #0059F4;
71
68
  --rel-colors-blue-light: #80D8FF;
72
69
  --rel-colors-blue-bg: #E1F2FF;
73
-
74
70
  --rel-colors-orange-warning: #FF6D00;
75
71
  --rel-colors-orange-expired: #F2915C;
76
72
  --rel-colors-orange-bg-light: #FFE9D9;
77
73
  --rel-colors-orange-bg-counter: #FFF3E0;
78
-
79
74
  --rel-colors-yellow-pending: #FFBF43;
80
-
81
75
  --rel-colors-gold: #D6BA00;
82
76
  --rel-colors-gold-light: #F6EFD7;
83
77
  --rel-colors-gold-secondary: #F5F0D3;
84
-
85
78
  --rel-colors-platinum: #8392C9;
86
79
  --rel-colors-platinum-secondary: #E4E6F2;
87
-
88
80
  --rel-colors-silver: #BABABA;
89
81
  --rel-colors-silver-secondary: #F0F0F0;
90
-
91
82
  --rel-colors-bronze: #7D5300;
92
83
  --rel-colors-bronze-secondary: #E2DAC7;
93
84
 
94
85
  /* ------------------ SEMANTIC TEXT ------------------ */
95
86
  --rel-text-primary: var(--rel-colors-gray-primary);
96
87
  --rel-text-heading: var(--rel-colors-gray-heading);
97
-
98
88
  --rel-text-error: var(--rel-colors-red-primary);
99
89
  --rel-text-error-small: var(--rel-colors-red-secondary);
100
90
  --rel-text-error-medium: var(--rel-colors-red-tertiary);
101
91
  --rel-text-error-large: var(--rel-colors-red-tertiary);
102
-
103
92
  --rel-text-warning: var(--rel-colors-orange-warning);
104
93
  --rel-text-warning-small: var(--rel-colors-orange-expired);
105
94
  --rel-text-warning-medium: var(--rel-colors-yellow-pending);
106
95
  --rel-text-warning-large: var(--rel-colors-orange-warning);
107
-
108
96
  --rel-text-success: var(--rel-colors-green-success);
109
97
  --rel-text-success-small: var(--rel-colors-green-secondary);
110
98
  --rel-text-success-medium: var(--rel-colors-green-tertiary);
111
99
  --rel-text-success-large: var(--rel-colors-green-success);
112
-
113
100
  --rel-text-info: var(--rel-colors-blue-primary);
114
101
  --rel-text-info-secondary: var(--rel-colors-blue-secondary);
115
102
  --rel-text-info-hover: var(--rel-colors-blue-tertiary);
116
-
117
103
  --rel-text-placeholder: var(--rel-colors-gray-placeholder);
118
104
  --rel-text-dark-placeholder: var(--rel-colors-gray-dark-placeholder);
119
-
120
105
  --rel-text-disabled: var(--rel-colors-gray-disabled-text);
121
106
  --rel-text-credited: var(--rel-colors-green-credited);
122
107
 
@@ -152,11 +137,11 @@
152
137
  --rel-surface-toast: var(--rel-colors-gray-toast-bg);
153
138
 
154
139
  /* ------------------ SHADOWS ------------------ */
155
- --rel-shadows-shadow-100: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px rgba(0, 0, 0, 0.15);
156
- --rel-shadows-shadow-200: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px rgba(0, 0, 0, 0.15);
157
- --rel-shadows-shadow-300: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 4px 8px rgba(0, 0, 0, 0.15);
158
- --rel-shadows-shadow-400: 0px 2px 3px rgba(0, 0, 0, 0.3), 0px 6px 10px rgba(0, 0, 0, 0.15);
159
- --rel-shadows-shadow-500: 0px 4px 4px rgba(0, 0, 0, 0.3), 0px 8px 12px rgba(0, 0, 0, 0.15);
140
+ --rel-shadows-shadow-100: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
141
+ --rel-shadows-shadow-200: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15);
142
+ --rel-shadows-shadow-300: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 4px 8px 3px rgba(0,0,0,0.15);
143
+ --rel-shadows-shadow-400: 0px 2px 3px 0px rgba(0,0,0,0.3), 0px 6px 10px 4px rgba(0,0,0,0.15);
144
+ --rel-shadows-shadow-500: 0px 4px 4px 0px rgba(0,0,0,0.3), 0px 8px 12px 6px rgba(0,0,0,0.15);
160
145
 
161
146
  /* ------------------ SPACING ------------------ */
162
147
  --rel-spacing-space-3xs: 2px;
@@ -208,9 +193,47 @@
208
193
  --rel-colors-gray-body: var(--rel-text-primary);
209
194
  }
210
195
 
196
+ /* !!MANUAL_START!! */
197
+
198
+ /* ------------------ SEMANTIC ALIAS LAYER — LIGHT MODE DEFAULTS ------------------
199
+ Components should reference these tokens. They automatically flip in dark mode.
200
+ Each must resolve to the same effective value as the primitive it wraps. */
201
+ :root {
202
+
203
+ /* Backgrounds */
204
+ --rel-color-bg-primary: var(--rel-colors-white); /* #FFFFFF — Main page/card surface */
205
+ --rel-color-bg-secondary: var(--rel-colors-gray-light); /* #FAFAFA — Subtle surface lift */
206
+ --rel-color-bg-tertiary: var(--rel-colors-gray-surface); /* #F5F5F5 — Input fill, code bg */
207
+ --rel-color-bg-hover: var(--rel-colors-gray-surface); /* #F5F5F5 — Hover state */
208
+ --rel-color-bg-selected: var(--rel-colors-gray-screen-bg); /* #EEEEEE — Selected/active bg */
209
+
210
+ /* Text */
211
+ --rel-color-text-primary: var(--rel-text-primary); /* #333333 — Body text */
212
+ --rel-color-text-secondary: var(--rel-colors-gray-disabled-text);/* #9E9E9E — Muted text */
213
+ --rel-color-text-heading: var(--rel-text-heading); /* #2B2B2B — Headings */
214
+ --rel-color-text-inverse: var(--rel-colors-white); /* #FFFFFF — Text on dark/colored fills — PINNED */
215
+ --rel-color-text-disabled: var(--rel-text-disabled); /* #9E9E9E — Disabled text */
216
+ --rel-color-text-placeholder: var(--rel-text-placeholder); /* #A9A9A9 — Input placeholder */
217
+
218
+ /* Borders */
219
+ --rel-color-border-default: var(--rel-border-default); /* #DDDDDD — Default border */
220
+ --rel-color-border-strong: var(--rel-colors-black); /* #000000 — High-contrast border (secondary buttons) */
221
+ --rel-color-border-focus: var(--rel-colors-blue-primary); /* #0091EA — Focus ring */
222
+ --rel-color-border-divider: var(--rel-border-divider); /* #BDBDBD — Divider line */
223
+
224
+ /* Icons */
225
+ --rel-color-icon-primary: var(--rel-colors-gray-placeholder);/* #A9A9A9 — Default icon */
226
+ --rel-color-icon-hover: var(--rel-colors-black); /* #000000 — Hovered icon */
227
+
228
+ /* Brand */
229
+ --rel-color-brand: var(--rel-colors-green-primary); /* #00F49C — Brand accent — pinned, never flips */
230
+ --rel-color-brand-hover: var(--rel-colors-green-secondary); /* #06D98C — Brand hover — pinned */
231
+ }
232
+
211
233
  /* ------------------ DARK MODE ------------------ */
212
- /* Enable by setting: <html data-theme="dark"> */
213
- :root[data-theme="dark"] {
234
+ /* Enable by setting: <html data-theme="dark"> or adding class="dark" */
235
+ :root[data-theme="dark"], .dark {
236
+
214
237
  /* ------------------ COLORS (OVERRIDES) ------------------ */
215
238
  /* Inverted base colors for dark theme */
216
239
  --rel-colors-white: #0f1115;
@@ -235,6 +258,7 @@
235
258
  --rel-colors-gray-warm: #161b22;
236
259
  --rel-colors-gray-toast-bg: #1d2430;
237
260
 
261
+
238
262
  /* ------------------ STATUS BACKGROUNDS (DARK TINTS) ------------------ */
239
263
  --rel-colors-red-bg-alert: #2a1116;
240
264
  --rel-colors-red-light: #3a151c;
@@ -291,4 +315,32 @@
291
315
  /* Keep expected/legacy token names working across components */
292
316
  --rel-colors-primary-500: var(--rel-colors-blue-primary);
293
317
  --rel-colors-gray-body: var(--rel-text-primary);
294
- }
318
+
319
+ /* ------------------ SEMANTIC ALIAS LAYER — DARK MODE OVERRIDES ------------------
320
+ Values sourced from tokens/semantic-colors.json § dark */
321
+
322
+ /* Backgrounds */
323
+ --rel-color-bg-primary: #1A1A1A; /* --color-dark-50 */
324
+ --rel-color-bg-secondary: #262626; /* --color-dark-100 */
325
+ --rel-color-bg-tertiary: #2E2E2E; /* --color-dark-200 */
326
+ --rel-color-bg-hover: #2E2E2E; /* --color-dark-200 */
327
+ --rel-color-bg-selected: #404040; /* --color-dark-300 */
328
+
329
+ /* Text */
330
+ --rel-color-text-primary: #F5F5F5; /* --color-dark-900 */
331
+ --rel-color-text-secondary: #D4D4D4; /* --color-dark-700 */
332
+ --rel-color-text-heading: #F5F5F5; /* --color-dark-900 */
333
+ --rel-color-text-inverse: #212121; /* --color-gray-900 */
334
+ --rel-color-text-disabled: #737373; /* --color-dark-500 */
335
+ --rel-color-text-placeholder: #737373; /* --color-dark-500 */
336
+
337
+ /* Borders */
338
+ --rel-color-border-default: #404040; /* --color-dark-300 */
339
+ --rel-color-border-strong: #D4D4D4; /* --color-dark-700 */
340
+ --rel-color-border-focus: #D4D4D4; /* --color-dark-700 */
341
+ --rel-color-border-divider: #404040; /* --color-dark-300 */
342
+
343
+ /* Icons */
344
+ --rel-color-icon-primary: #A3A3A3; /* --color-dark-600 */
345
+ --rel-color-icon-hover: #F5F5F5; /* --color-dark-900 */
346
+ }
package/dist/{vars-ITL2K3KO.css → vars-I2PC74XD.css} RENAMED
@@ -1,4 +1,5 @@
1
- /* AUTO-GENERATED — CLEANED — DO NOT EDIT */
1
+ /* AUTO-GENERATED from tokens/*.json — DO NOT EDIT */
2
+ /* To regenerate: npm run sync-tokens -w @reliability-design/figma-pipeline */
2
3
 
3
4
  /* ------------------ THEME TRANSITIONS ------------------ */
4
5
  /* Smooth transitions for theme switching (light/dark) */
@@ -17,6 +18,7 @@
17
18
  }
18
19
 
19
20
  :root {
21
+
20
22
  /* ------------------ BORDER RADII ------------------ */
21
23
  --rel-borders-radius-border-radius-0: 0px;
22
24
  --rel-borders-radius-border-radius-100: 2px;
@@ -37,12 +39,10 @@
37
39
  --rel-colors-green-primary: #00F49C;
38
40
  --rel-colors-green-secondary: #06D98C;
39
41
  --rel-colors-green-tertiary: #00A86B;
40
- --rel-colors-green-success: #00A86B;
42
+ --rel-colors-green-success: #22C55E;
41
43
  --rel-colors-green-credited: #4CAA47;
42
44
  --rel-colors-green-bg-light: #E8F5E8;
43
-
44
45
  --rel-colors-black: #000000;
45
-
46
46
  --rel-colors-gray-primary: #333333;
47
47
  --rel-colors-gray-heading: #2B2B2B;
48
48
  --rel-colors-gray-placeholder: #A9A9A9;
@@ -56,67 +56,52 @@
56
56
  --rel-colors-gray-tab-border: #C4C4C4;
57
57
  --rel-colors-gray-surface: #F5F5F5;
58
58
  --rel-colors-gray-screen-bg: #EEEEEE;
59
-
60
59
  --rel-colors-red-primary: #CC0000;
61
60
  --rel-colors-red-secondary: #D50000;
62
61
  --rel-colors-red-tertiary: #9C1E33;
63
62
  --rel-colors-red-bg-alert: #FFE8EB;
64
63
  --rel-colors-red-light: #FFDEDE;
65
-
66
64
  --rel-colors-white: #FFFFFF;
67
-
68
65
  --rel-colors-blue-primary: #0091EA;
69
66
  --rel-colors-blue-secondary: #4A90E2;
70
67
  --rel-colors-blue-tertiary: #0059F4;
71
68
  --rel-colors-blue-light: #80D8FF;
72
69
  --rel-colors-blue-bg: #E1F2FF;
73
-
74
70
  --rel-colors-orange-warning: #FF6D00;
75
71
  --rel-colors-orange-expired: #F2915C;
76
72
  --rel-colors-orange-bg-light: #FFE9D9;
77
73
  --rel-colors-orange-bg-counter: #FFF3E0;
78
-
79
74
  --rel-colors-yellow-pending: #FFBF43;
80
-
81
75
  --rel-colors-gold: #D6BA00;
82
76
  --rel-colors-gold-light: #F6EFD7;
83
77
  --rel-colors-gold-secondary: #F5F0D3;
84
-
85
78
  --rel-colors-platinum: #8392C9;
86
79
  --rel-colors-platinum-secondary: #E4E6F2;
87
-
88
80
  --rel-colors-silver: #BABABA;
89
81
  --rel-colors-silver-secondary: #F0F0F0;
90
-
91
82
  --rel-colors-bronze: #7D5300;
92
83
  --rel-colors-bronze-secondary: #E2DAC7;
93
84
 
94
85
  /* ------------------ SEMANTIC TEXT ------------------ */
95
86
  --rel-text-primary: var(--rel-colors-gray-primary);
96
87
  --rel-text-heading: var(--rel-colors-gray-heading);
97
-
98
88
  --rel-text-error: var(--rel-colors-red-primary);
99
89
  --rel-text-error-small: var(--rel-colors-red-secondary);
100
90
  --rel-text-error-medium: var(--rel-colors-red-tertiary);
101
91
  --rel-text-error-large: var(--rel-colors-red-tertiary);
102
-
103
92
  --rel-text-warning: var(--rel-colors-orange-warning);
104
93
  --rel-text-warning-small: var(--rel-colors-orange-expired);
105
94
  --rel-text-warning-medium: var(--rel-colors-yellow-pending);
106
95
  --rel-text-warning-large: var(--rel-colors-orange-warning);
107
-
108
96
  --rel-text-success: var(--rel-colors-green-success);
109
97
  --rel-text-success-small: var(--rel-colors-green-secondary);
110
98
  --rel-text-success-medium: var(--rel-colors-green-tertiary);
111
99
  --rel-text-success-large: var(--rel-colors-green-success);
112
-
113
100
  --rel-text-info: var(--rel-colors-blue-primary);
114
101
  --rel-text-info-secondary: var(--rel-colors-blue-secondary);
115
102
  --rel-text-info-hover: var(--rel-colors-blue-tertiary);
116
-
117
103
  --rel-text-placeholder: var(--rel-colors-gray-placeholder);
118
104
  --rel-text-dark-placeholder: var(--rel-colors-gray-dark-placeholder);
119
-
120
105
  --rel-text-disabled: var(--rel-colors-gray-disabled-text);
121
106
  --rel-text-credited: var(--rel-colors-green-credited);
122
107
 
@@ -152,11 +137,11 @@
152
137
  --rel-surface-toast: var(--rel-colors-gray-toast-bg);
153
138
 
154
139
  /* ------------------ SHADOWS ------------------ */
155
- --rel-shadows-shadow-100: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px rgba(0, 0, 0, 0.15);
156
- --rel-shadows-shadow-200: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px rgba(0, 0, 0, 0.15);
157
- --rel-shadows-shadow-300: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 4px 8px rgba(0, 0, 0, 0.15);
158
- --rel-shadows-shadow-400: 0px 2px 3px rgba(0, 0, 0, 0.3), 0px 6px 10px rgba(0, 0, 0, 0.15);
159
- --rel-shadows-shadow-500: 0px 4px 4px rgba(0, 0, 0, 0.3), 0px 8px 12px rgba(0, 0, 0, 0.15);
140
+ --rel-shadows-shadow-100: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
141
+ --rel-shadows-shadow-200: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15);
142
+ --rel-shadows-shadow-300: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 4px 8px 3px rgba(0,0,0,0.15);
143
+ --rel-shadows-shadow-400: 0px 2px 3px 0px rgba(0,0,0,0.3), 0px 6px 10px 4px rgba(0,0,0,0.15);
144
+ --rel-shadows-shadow-500: 0px 4px 4px 0px rgba(0,0,0,0.3), 0px 8px 12px 6px rgba(0,0,0,0.15);
160
145
 
161
146
  /* ------------------ SPACING ------------------ */
162
147
  --rel-spacing-space-3xs: 2px;
@@ -208,9 +193,47 @@
208
193
  --rel-colors-gray-body: var(--rel-text-primary);
209
194
  }
210
195
 
196
+ /* !!MANUAL_START!! */
197
+
198
+ /* ------------------ SEMANTIC ALIAS LAYER — LIGHT MODE DEFAULTS ------------------
199
+ Components should reference these tokens. They automatically flip in dark mode.
200
+ Each must resolve to the same effective value as the primitive it wraps. */
201
+ :root {
202
+
203
+ /* Backgrounds */
204
+ --rel-color-bg-primary: var(--rel-colors-white); /* #FFFFFF — Main page/card surface */
205
+ --rel-color-bg-secondary: var(--rel-colors-gray-light); /* #FAFAFA — Subtle surface lift */
206
+ --rel-color-bg-tertiary: var(--rel-colors-gray-surface); /* #F5F5F5 — Input fill, code bg */
207
+ --rel-color-bg-hover: var(--rel-colors-gray-surface); /* #F5F5F5 — Hover state */
208
+ --rel-color-bg-selected: var(--rel-colors-gray-screen-bg); /* #EEEEEE — Selected/active bg */
209
+
210
+ /* Text */
211
+ --rel-color-text-primary: var(--rel-text-primary); /* #333333 — Body text */
212
+ --rel-color-text-secondary: var(--rel-colors-gray-disabled-text);/* #9E9E9E — Muted text */
213
+ --rel-color-text-heading: var(--rel-text-heading); /* #2B2B2B — Headings */
214
+ --rel-color-text-inverse: var(--rel-colors-white); /* #FFFFFF — Text on dark/colored fills — PINNED */
215
+ --rel-color-text-disabled: var(--rel-text-disabled); /* #9E9E9E — Disabled text */
216
+ --rel-color-text-placeholder: var(--rel-text-placeholder); /* #A9A9A9 — Input placeholder */
217
+
218
+ /* Borders */
219
+ --rel-color-border-default: var(--rel-border-default); /* #DDDDDD — Default border */
220
+ --rel-color-border-strong: var(--rel-colors-black); /* #000000 — High-contrast border (secondary buttons) */
221
+ --rel-color-border-focus: var(--rel-colors-blue-primary); /* #0091EA — Focus ring */
222
+ --rel-color-border-divider: var(--rel-border-divider); /* #BDBDBD — Divider line */
223
+
224
+ /* Icons */
225
+ --rel-color-icon-primary: var(--rel-colors-gray-placeholder);/* #A9A9A9 — Default icon */
226
+ --rel-color-icon-hover: var(--rel-colors-black); /* #000000 — Hovered icon */
227
+
228
+ /* Brand */
229
+ --rel-color-brand: var(--rel-colors-green-primary); /* #00F49C — Brand accent — pinned, never flips */
230
+ --rel-color-brand-hover: var(--rel-colors-green-secondary); /* #06D98C — Brand hover — pinned */
231
+ }
232
+
211
233
  /* ------------------ DARK MODE ------------------ */
212
- /* Enable by setting: <html data-theme="dark"> */
213
- :root[data-theme="dark"] {
234
+ /* Enable by setting: <html data-theme="dark"> or adding class="dark" */
235
+ :root[data-theme="dark"], .dark {
236
+
214
237
  /* ------------------ COLORS (OVERRIDES) ------------------ */
215
238
  /* Inverted base colors for dark theme */
216
239
  --rel-colors-white: #0f1115;
@@ -235,6 +258,7 @@
235
258
  --rel-colors-gray-warm: #161b22;
236
259
  --rel-colors-gray-toast-bg: #1d2430;
237
260
 
261
+
238
262
  /* ------------------ STATUS BACKGROUNDS (DARK TINTS) ------------------ */
239
263
  --rel-colors-red-bg-alert: #2a1116;
240
264
  --rel-colors-red-light: #3a151c;
@@ -291,4 +315,32 @@
291
315
  /* Keep expected/legacy token names working across components */
292
316
  --rel-colors-primary-500: var(--rel-colors-blue-primary);
293
317
  --rel-colors-gray-body: var(--rel-text-primary);
294
- }
318
+
319
+ /* ------------------ SEMANTIC ALIAS LAYER — DARK MODE OVERRIDES ------------------
320
+ Values sourced from tokens/semantic-colors.json § dark */
321
+
322
+ /* Backgrounds */
323
+ --rel-color-bg-primary: #1A1A1A; /* --color-dark-50 */
324
+ --rel-color-bg-secondary: #262626; /* --color-dark-100 */
325
+ --rel-color-bg-tertiary: #2E2E2E; /* --color-dark-200 */
326
+ --rel-color-bg-hover: #2E2E2E; /* --color-dark-200 */
327
+ --rel-color-bg-selected: #404040; /* --color-dark-300 */
328
+
329
+ /* Text */
330
+ --rel-color-text-primary: #F5F5F5; /* --color-dark-900 */
331
+ --rel-color-text-secondary: #D4D4D4; /* --color-dark-700 */
332
+ --rel-color-text-heading: #F5F5F5; /* --color-dark-900 */
333
+ --rel-color-text-inverse: #212121; /* --color-gray-900 */
334
+ --rel-color-text-disabled: #737373; /* --color-dark-500 */
335
+ --rel-color-text-placeholder: #737373; /* --color-dark-500 */
336
+
337
+ /* Borders */
338
+ --rel-color-border-default: #404040; /* --color-dark-300 */
339
+ --rel-color-border-strong: #D4D4D4; /* --color-dark-700 */
340
+ --rel-color-border-focus: #D4D4D4; /* --color-dark-700 */
341
+ --rel-color-border-divider: #404040; /* --color-dark-300 */
342
+
343
+ /* Icons */
344
+ --rel-color-icon-primary: #A3A3A3; /* --color-dark-600 */
345
+ --rel-color-icon-hover: #F5F5F5; /* --color-dark-900 */
346
+ }