@reliability-design/web 1.0.3 → 1.0.6

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 (114) hide show
  1. package/dist/components/rel-accordion/README.md +132 -0
  2. package/dist/components/rel-accordion/rel-accordion.ts +43 -16
  3. package/dist/components/rel-alert/README.md +141 -0
  4. package/dist/components/rel-alert/rel-alert.ts +18 -7
  5. package/dist/components/rel-avatar/README.md +119 -0
  6. package/dist/components/rel-badge/README.md +86 -0
  7. package/dist/components/rel-badge/rel-badge.ts +6 -6
  8. package/dist/components/rel-breadcrumb/README.md +102 -0
  9. package/dist/components/rel-breadcrumb/rel-breadcrumb.ts +12 -6
  10. package/dist/components/rel-button/README.md +130 -0
  11. package/dist/components/rel-calendar/README.md +109 -0
  12. package/dist/components/rel-calendar/index.ts +1 -0
  13. package/dist/components/rel-calendar/rel-calendar.ts +467 -0
  14. package/dist/components/rel-card/README.md +94 -0
  15. package/dist/components/rel-card/rel-card.ts +12 -3
  16. package/dist/components/rel-cardmedia/README.md +127 -0
  17. package/dist/components/rel-cardmedia/rel-cardmedia.ts +14 -4
  18. package/dist/components/rel-carousel/README.md +166 -0
  19. package/dist/components/rel-carousel/index.ts +1 -0
  20. package/dist/components/rel-carousel/rel-carousel.ts +469 -0
  21. package/dist/components/rel-chart/README.md +286 -0
  22. package/dist/components/rel-chart/index.ts +1 -0
  23. package/dist/components/rel-chart/rel-chart.ts +736 -0
  24. package/dist/components/rel-checkbox/README.md +77 -0
  25. package/dist/components/rel-checkbox/rel-checkbox.ts +18 -10
  26. package/dist/components/rel-chip/README.md +114 -0
  27. package/dist/components/rel-chip/rel-chip.ts +20 -4
  28. package/dist/components/rel-container/README.md +99 -0
  29. package/dist/components/rel-date-picker/README.md +253 -0
  30. package/dist/components/rel-date-picker/index.ts +1 -0
  31. package/dist/components/rel-date-picker/rel-date-picker.ts +916 -0
  32. package/dist/components/rel-divider/README.md +100 -0
  33. package/dist/components/rel-drawer/README.md +200 -0
  34. package/dist/components/rel-drawer/index.ts +1 -0
  35. package/dist/components/rel-drawer/rel-drawer.ts +621 -0
  36. package/dist/components/rel-kbd/README.md +151 -0
  37. package/dist/components/rel-kbd/rel-kbd.ts +118 -0
  38. package/dist/components/rel-layout/README.md +88 -0
  39. package/dist/components/rel-menu/README.md +151 -0
  40. package/dist/components/rel-menu/rel-menu.ts +18 -10
  41. package/dist/components/rel-menubar/README.md +329 -0
  42. package/dist/components/rel-menubar/index.ts +2 -0
  43. package/dist/components/rel-menubar/rel-menubar-menu.ts +16 -0
  44. package/dist/components/rel-menubar/rel-menubar.ts +576 -0
  45. package/dist/components/rel-nav-menu/README.md +289 -0
  46. package/dist/components/rel-nav-menu/index.ts +3 -0
  47. package/dist/components/rel-nav-menu/rel-nav-menu-item.ts +143 -0
  48. package/dist/components/rel-nav-menu/rel-nav-menu-panel.ts +53 -0
  49. package/dist/components/rel-nav-menu/rel-nav-menu.ts +331 -0
  50. package/dist/components/rel-navbar/README.md +126 -0
  51. package/dist/components/rel-navbar/rel-navbar.ts +91 -0
  52. package/dist/components/rel-otp/README.md +440 -0
  53. package/dist/components/rel-otp/index.ts +1 -0
  54. package/dist/components/rel-otp/rel-otp.ts +504 -0
  55. package/dist/components/rel-pagination/README.md +410 -0
  56. package/dist/components/rel-pagination/index.ts +1 -0
  57. package/dist/components/rel-pagination/rel-pagination.ts +376 -0
  58. package/dist/components/rel-popover/README.md +568 -0
  59. package/dist/components/rel-popover/index.ts +2 -0
  60. package/dist/components/rel-popover/rel-popover-content.ts +55 -0
  61. package/dist/components/rel-popover/rel-popover.ts +327 -0
  62. package/dist/components/rel-progress/README.md +110 -0
  63. package/dist/components/rel-progress/rel-progress.ts +32 -5
  64. package/dist/components/rel-quote-page/README.md +166 -0
  65. package/dist/components/rel-quote-page/rel-quote-page.ts +816 -0
  66. package/dist/components/rel-radio/README.md +120 -0
  67. package/dist/components/rel-radio/rel-radio.ts +13 -5
  68. package/dist/components/rel-resizable/README.md +140 -0
  69. package/dist/components/rel-resizable/index.ts +3 -0
  70. package/dist/components/rel-resizable/rel-resizable-group.ts +374 -0
  71. package/dist/components/rel-resizable/rel-resizable-handle.ts +149 -0
  72. package/dist/components/rel-resizable/rel-resizable-panel.ts +47 -0
  73. package/dist/components/rel-segmented-button/README.md +141 -0
  74. package/dist/components/rel-segmented-button/rel-segmented-button.ts +18 -13
  75. package/dist/components/rel-select/README.md +107 -0
  76. package/dist/components/rel-select/rel-select.ts +14 -14
  77. package/dist/components/rel-sheet/README.md +224 -0
  78. package/dist/components/rel-sheet/rel-sheet.ts +683 -0
  79. package/dist/components/rel-sidebar/README.md +209 -0
  80. package/dist/components/rel-sidebar/rel-sidebar.ts +1158 -0
  81. package/dist/components/rel-slider/README.md +135 -0
  82. package/dist/components/rel-slider/rel-slider.ts +19 -7
  83. package/dist/components/rel-snackbar/README.md +134 -0
  84. package/dist/components/rel-snackbar/rel-snackbar.ts +67 -2
  85. package/dist/components/rel-stepper/README.md +160 -0
  86. package/dist/components/rel-stepper/rel-stepper.ts +6 -6
  87. package/dist/components/rel-switch/README.md +102 -0
  88. package/dist/components/rel-switch/rel-switch.ts +15 -6
  89. package/dist/components/rel-tab/README.md +163 -0
  90. package/dist/components/rel-tab/rel-tab.ts +36 -14
  91. package/dist/components/rel-table/README.md +178 -0
  92. package/dist/components/rel-table/rel-table-body.ts +16 -0
  93. package/dist/components/rel-table/rel-table-caption.ts +22 -0
  94. package/dist/components/rel-table/rel-table-cell.ts +49 -0
  95. package/dist/components/rel-table/rel-table-footer.ts +18 -0
  96. package/dist/components/rel-table/rel-table-head.ts +33 -0
  97. package/dist/components/rel-table/rel-table-header.ts +16 -0
  98. package/dist/components/rel-table/rel-table-row.ts +32 -0
  99. package/dist/components/rel-table/rel-table.ts +47 -0
  100. package/dist/components/rel-textfield/README.md +90 -0
  101. package/dist/components/rel-textfield/rel-textfield.ts +35 -19
  102. package/dist/components/rel-toast/README.md +148 -0
  103. package/dist/components/rel-toast/rel-toast.ts +32 -14
  104. package/dist/components/rel-tooltip/README.md +103 -0
  105. package/dist/components/rel-tooltip/rel-tooltip.ts +9 -9
  106. package/dist/index.d.mts +836 -1
  107. package/dist/index.d.ts +836 -1
  108. package/dist/index.js +10658 -1493
  109. package/dist/index.js.map +1 -1
  110. package/dist/index.mjs +10616 -1499
  111. package/dist/index.mjs.map +1 -1
  112. package/dist/styles/vars.css +293 -183
  113. package/dist/{vars-6ZIUPIU4.css → vars-ITL2K3KO.css} +293 -183
  114. package/package.json +1 -1
@@ -1,184 +1,294 @@
1
- /* AUTO-GENERATED — CLEANED — DO NOT EDIT */
2
- :root {
3
- /* ------------------ BORDER RADII ------------------ */
4
- --rel-borders-radius-border-radius-0: 0px;
5
- --rel-borders-radius-border-radius-100: 2px;
6
- --rel-borders-radius-border-radius-200: 8px;
7
- --rel-borders-radius-border-radius-300: 16px;
8
- --rel-borders-radius-border-radius-400: 24px;
9
- --rel-borders-radius-border-radius-500: 1000px;
10
-
11
- /* ------------------ BORDER WIDTHS ------------------ */
12
- --rel-borders-width-stroke-050: 0.5px;
13
- --rel-borders-width-stroke-100: 1px;
14
- --rel-borders-width-stroke-150: 1.5px;
15
- --rel-borders-width-stroke-200: 2px;
16
- --rel-borders-width-stroke-300: 3px;
17
- --rel-borders-width-stroke-400: 4px;
18
-
19
- /* ------------------ COLORS ------------------ */
20
- --rel-colors-green-primary: #00F49C;
21
- --rel-colors-green-secondary: #06D98C;
22
- --rel-colors-green-tertiary: #00A86B;
23
- --rel-colors-green-success: #00A86B;
24
- --rel-colors-green-credited: #4CAA47;
25
- --rel-colors-green-bg-light: #E8F5E8;
26
-
27
- --rel-colors-black: #000000;
28
-
29
- --rel-colors-gray-primary: #333333;
30
- --rel-colors-gray-heading: #2B2B2B;
31
- --rel-colors-gray-placeholder: #A9A9A9;
32
- --rel-colors-gray-dark-placeholder: #373737;
33
- --rel-colors-gray-toast-bg: #404040;
34
- --rel-colors-gray-light: #FAFAFA;
35
- --rel-colors-gray-warm: #F5F5F4;
36
- --rel-colors-gray-border: #DDDDDD;
37
- --rel-colors-gray-disabled-text: #9E9E9E;
38
- --rel-colors-gray-divider: #BDBDBD;
39
- --rel-colors-gray-tab-border: #C4C4C4;
40
- --rel-colors-gray-surface: #F5F5F5;
41
- --rel-colors-gray-screen-bg: #EEEEEE;
42
-
43
- --rel-colors-red-primary: #CC0000;
44
- --rel-colors-red-secondary: #D50000;
45
- --rel-colors-red-tertiary: #9C1E33;
46
- --rel-colors-red-bg-alert: #FFE8EB;
47
- --rel-colors-red-light: #FFDEDE;
48
-
49
- --rel-colors-white: #FFFFFF;
50
-
51
- --rel-colors-blue-primary: #0091EA;
52
- --rel-colors-blue-secondary: #4A90E2;
53
- --rel-colors-blue-tertiary: #0059F4;
54
- --rel-colors-blue-light: #80D8FF;
55
- --rel-colors-blue-bg: #E1F2FF;
56
-
57
- --rel-colors-orange-warning: #FF6D00;
58
- --rel-colors-orange-expired: #F2915C;
59
- --rel-colors-orange-bg-light: #FFE9D9;
60
- --rel-colors-orange-bg-counter: #FFF3E0;
61
-
62
- --rel-colors-yellow-pending: #FFBF43;
63
-
64
- --rel-colors-gold: #D6BA00;
65
- --rel-colors-gold-light: #F6EFD7;
66
- --rel-colors-gold-secondary: #F5F0D3;
67
-
68
- --rel-colors-platinum: #8392C9;
69
- --rel-colors-platinum-secondary: #E4E6F2;
70
-
71
- --rel-colors-silver: #BABABA;
72
- --rel-colors-silver-secondary: #F0F0F0;
73
-
74
- --rel-colors-bronze: #7D5300;
75
- --rel-colors-bronze-secondary: #E2DAC7;
76
-
77
- /* ------------------ SEMANTIC TEXT ------------------ */
78
- --rel-text-primary: var(--rel-colors-gray-primary);
79
- --rel-text-heading: var(--rel-colors-gray-heading);
80
-
81
- --rel-text-error: var(--rel-colors-red-primary);
82
- --rel-text-error-small: var(--rel-colors-red-secondary);
83
- --rel-text-error-medium: var(--rel-colors-red-tertiary);
84
- --rel-text-error-large: var(--rel-colors-red-tertiary);
85
-
86
- --rel-text-warning: var(--rel-colors-orange-warning);
87
- --rel-text-warning-small: var(--rel-colors-orange-expired);
88
- --rel-text-warning-medium: var(--rel-colors-yellow-pending);
89
- --rel-text-warning-large: var(--rel-colors-orange-warning);
90
-
91
- --rel-text-success: var(--rel-colors-green-success);
92
- --rel-text-success-small: var(--rel-colors-green-secondary);
93
- --rel-text-success-medium: var(--rel-colors-green-tertiary);
94
- --rel-text-success-large: var(--rel-colors-green-success);
95
-
96
- --rel-text-info: var(--rel-colors-blue-primary);
97
- --rel-text-info-secondary: var(--rel-colors-blue-secondary);
98
- --rel-text-info-hover: var(--rel-colors-blue-tertiary);
99
-
100
- --rel-text-placeholder: var(--rel-colors-gray-placeholder);
101
- --rel-text-dark-placeholder: var(--rel-colors-gray-dark-placeholder);
102
-
103
- --rel-text-disabled: var(--rel-colors-gray-disabled-text);
104
- --rel-text-credited: var(--rel-colors-green-credited);
105
-
106
- /* ------------------ SEMANTIC ICONS ------------------ */
107
- --rel-icon-info: var(--rel-colors-blue-primary);
108
- --rel-icon-error: var(--rel-colors-red-primary);
109
- --rel-icon-warning: var(--rel-colors-orange-warning);
110
- --rel-icon-success: var(--rel-colors-green-success);
111
-
112
- /* ------------------ SEMANTIC BORDERS ------------------ */
113
- --rel-border-default: var(--rel-colors-gray-border);
114
- --rel-border-error: var(--rel-colors-red-primary);
115
- --rel-border-warning: var(--rel-colors-orange-warning);
116
- --rel-border-success: var(--rel-colors-green-primary);
117
- --rel-border-info: var(--rel-colors-blue-primary);
118
- --rel-border-divider: var(--rel-colors-gray-divider);
119
- --rel-border-tab: var(--rel-colors-gray-tab-border);
120
-
121
- /* ------------------ SEMANTIC BACKGROUNDS ------------------ */
122
- --rel-background-error: var(--rel-colors-red-bg-alert);
123
- --rel-background-error-light: var(--rel-colors-red-light);
124
- --rel-background-warning: var(--rel-colors-orange-bg-light);
125
- --rel-background-warning-counter: var(--rel-colors-orange-bg-counter);
126
- --rel-background-success: var(--rel-colors-green-bg-light);
127
- --rel-background-info: var(--rel-colors-blue-bg);
128
- --rel-background-info-accent: var(--rel-colors-blue-light);
129
-
130
- /* ------------------ SEMANTIC SURFACES ------------------ */
131
- --rel-surface-secondary: var(--rel-colors-gray-light);
132
- --rel-surface-screen: var(--rel-colors-gray-screen-bg);
133
- --rel-surface-surface: var(--rel-colors-gray-surface);
134
- --rel-surface-warm: var(--rel-colors-gray-warm);
135
- --rel-surface-toast: var(--rel-colors-gray-toast-bg);
136
-
137
- /* ------------------ SHADOWS ------------------ */
138
- --rel-shadows-shadow-100: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px rgba(0, 0, 0, 0.15);
139
- --rel-shadows-shadow-200: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px rgba(0, 0, 0, 0.15);
140
- --rel-shadows-shadow-300: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 4px 8px rgba(0, 0, 0, 0.15);
141
- --rel-shadows-shadow-400: 0px 2px 3px rgba(0, 0, 0, 0.3), 0px 6px 10px rgba(0, 0, 0, 0.15);
142
- --rel-shadows-shadow-500: 0px 4px 4px rgba(0, 0, 0, 0.3), 0px 8px 12px rgba(0, 0, 0, 0.15);
143
-
144
- /* ------------------ SPACING ------------------ */
145
- --rel-spacing-space-3xs: 2px;
146
- --rel-spacing-space-2xs: 4px;
147
- --rel-spacing-space-xs: 8px;
148
- --rel-spacing-space-sm: 12px;
149
- --rel-spacing-space-md: 16px;
150
- --rel-spacing-space-lg: 20px;
151
- --rel-spacing-space-xl: 24px;
152
- --rel-spacing-space-2xl: 32px;
153
- --rel-spacing-space-3xl: 48px;
154
-
155
- /* ------------------ TYPOGRAPHY ------------------ */
156
- --rel-fontFamilies-primary: Poppins, sans-serif;
157
-
158
- --rel-fontWeights-regular: 400;
159
- --rel-fontWeights-medium: 500;
160
- --rel-fontWeights-semibold: 600;
161
- --rel-fontWeights-bold: 700;
162
-
163
- --rel-fontSizes-3xl: 36px;
164
- --rel-fontSizes-2xl: 28px;
165
- --rel-fontSizes-xl: 24px;
166
- --rel-fontSizes-lg: 20px;
167
- --rel-fontSizes-md: 14px;
168
- --rel-fontSizes-sm: 12px;
169
- --rel-fontSizes-xs: 10px;
170
-
171
- --rel-lineHeights-3xl: 48px;
172
- --rel-lineHeights-2xl: 42px;
173
- --rel-lineHeights-xl: 36px;
174
- --rel-lineHeights-lg: 28px;
175
- --rel-lineHeights-md: 20px;
176
- --rel-lineHeights-sm: 18px;
177
- --rel-lineHeights-xs: 16px;
178
- --rel-lineHeights-2xs: 12px;
179
-
180
- --rel-letterSpacing-normal: 0px;
181
- --rel-letterSpacing-dense: -0.2px;
182
- --rel-letterSpacing-denser: -0.3px;
183
- --rel-letterSpacing-densest: -0.54px;
1
+ /* AUTO-GENERATED — CLEANED — DO NOT EDIT */
2
+
3
+ /* ------------------ THEME TRANSITIONS ------------------ */
4
+ /* Smooth transitions for theme switching (light/dark) */
5
+ * {
6
+ transition-property: color, background-color, border-color, box-shadow, fill, stroke;
7
+ transition-duration: 0.2s;
8
+ transition-timing-function: ease;
9
+ }
10
+
11
+ /* Disable theme transitions for reduced motion */
12
+ @media (prefers-reduced-motion: reduce) {
13
+ * {
14
+ transition-property: none;
15
+ transition-duration: 0s;
16
+ }
17
+ }
18
+
19
+ :root {
20
+ /* ------------------ BORDER RADII ------------------ */
21
+ --rel-borders-radius-border-radius-0: 0px;
22
+ --rel-borders-radius-border-radius-100: 2px;
23
+ --rel-borders-radius-border-radius-200: 8px;
24
+ --rel-borders-radius-border-radius-300: 16px;
25
+ --rel-borders-radius-border-radius-400: 24px;
26
+ --rel-borders-radius-border-radius-500: 1000px;
27
+
28
+ /* ------------------ BORDER WIDTHS ------------------ */
29
+ --rel-borders-width-stroke-050: 0.5px;
30
+ --rel-borders-width-stroke-100: 1px;
31
+ --rel-borders-width-stroke-150: 1.5px;
32
+ --rel-borders-width-stroke-200: 2px;
33
+ --rel-borders-width-stroke-300: 3px;
34
+ --rel-borders-width-stroke-400: 4px;
35
+
36
+ /* ------------------ COLORS ------------------ */
37
+ --rel-colors-green-primary: #00F49C;
38
+ --rel-colors-green-secondary: #06D98C;
39
+ --rel-colors-green-tertiary: #00A86B;
40
+ --rel-colors-green-success: #00A86B;
41
+ --rel-colors-green-credited: #4CAA47;
42
+ --rel-colors-green-bg-light: #E8F5E8;
43
+
44
+ --rel-colors-black: #000000;
45
+
46
+ --rel-colors-gray-primary: #333333;
47
+ --rel-colors-gray-heading: #2B2B2B;
48
+ --rel-colors-gray-placeholder: #A9A9A9;
49
+ --rel-colors-gray-dark-placeholder: #373737;
50
+ --rel-colors-gray-toast-bg: #404040;
51
+ --rel-colors-gray-light: #FAFAFA;
52
+ --rel-colors-gray-warm: #F5F5F4;
53
+ --rel-colors-gray-border: #DDDDDD;
54
+ --rel-colors-gray-disabled-text: #9E9E9E;
55
+ --rel-colors-gray-divider: #BDBDBD;
56
+ --rel-colors-gray-tab-border: #C4C4C4;
57
+ --rel-colors-gray-surface: #F5F5F5;
58
+ --rel-colors-gray-screen-bg: #EEEEEE;
59
+
60
+ --rel-colors-red-primary: #CC0000;
61
+ --rel-colors-red-secondary: #D50000;
62
+ --rel-colors-red-tertiary: #9C1E33;
63
+ --rel-colors-red-bg-alert: #FFE8EB;
64
+ --rel-colors-red-light: #FFDEDE;
65
+
66
+ --rel-colors-white: #FFFFFF;
67
+
68
+ --rel-colors-blue-primary: #0091EA;
69
+ --rel-colors-blue-secondary: #4A90E2;
70
+ --rel-colors-blue-tertiary: #0059F4;
71
+ --rel-colors-blue-light: #80D8FF;
72
+ --rel-colors-blue-bg: #E1F2FF;
73
+
74
+ --rel-colors-orange-warning: #FF6D00;
75
+ --rel-colors-orange-expired: #F2915C;
76
+ --rel-colors-orange-bg-light: #FFE9D9;
77
+ --rel-colors-orange-bg-counter: #FFF3E0;
78
+
79
+ --rel-colors-yellow-pending: #FFBF43;
80
+
81
+ --rel-colors-gold: #D6BA00;
82
+ --rel-colors-gold-light: #F6EFD7;
83
+ --rel-colors-gold-secondary: #F5F0D3;
84
+
85
+ --rel-colors-platinum: #8392C9;
86
+ --rel-colors-platinum-secondary: #E4E6F2;
87
+
88
+ --rel-colors-silver: #BABABA;
89
+ --rel-colors-silver-secondary: #F0F0F0;
90
+
91
+ --rel-colors-bronze: #7D5300;
92
+ --rel-colors-bronze-secondary: #E2DAC7;
93
+
94
+ /* ------------------ SEMANTIC TEXT ------------------ */
95
+ --rel-text-primary: var(--rel-colors-gray-primary);
96
+ --rel-text-heading: var(--rel-colors-gray-heading);
97
+
98
+ --rel-text-error: var(--rel-colors-red-primary);
99
+ --rel-text-error-small: var(--rel-colors-red-secondary);
100
+ --rel-text-error-medium: var(--rel-colors-red-tertiary);
101
+ --rel-text-error-large: var(--rel-colors-red-tertiary);
102
+
103
+ --rel-text-warning: var(--rel-colors-orange-warning);
104
+ --rel-text-warning-small: var(--rel-colors-orange-expired);
105
+ --rel-text-warning-medium: var(--rel-colors-yellow-pending);
106
+ --rel-text-warning-large: var(--rel-colors-orange-warning);
107
+
108
+ --rel-text-success: var(--rel-colors-green-success);
109
+ --rel-text-success-small: var(--rel-colors-green-secondary);
110
+ --rel-text-success-medium: var(--rel-colors-green-tertiary);
111
+ --rel-text-success-large: var(--rel-colors-green-success);
112
+
113
+ --rel-text-info: var(--rel-colors-blue-primary);
114
+ --rel-text-info-secondary: var(--rel-colors-blue-secondary);
115
+ --rel-text-info-hover: var(--rel-colors-blue-tertiary);
116
+
117
+ --rel-text-placeholder: var(--rel-colors-gray-placeholder);
118
+ --rel-text-dark-placeholder: var(--rel-colors-gray-dark-placeholder);
119
+
120
+ --rel-text-disabled: var(--rel-colors-gray-disabled-text);
121
+ --rel-text-credited: var(--rel-colors-green-credited);
122
+
123
+ /* ------------------ SEMANTIC ICONS ------------------ */
124
+ --rel-icon-info: var(--rel-colors-blue-primary);
125
+ --rel-icon-error: var(--rel-colors-red-primary);
126
+ --rel-icon-warning: var(--rel-colors-orange-warning);
127
+ --rel-icon-success: var(--rel-colors-green-success);
128
+
129
+ /* ------------------ SEMANTIC BORDERS ------------------ */
130
+ --rel-border-default: var(--rel-colors-gray-border);
131
+ --rel-border-error: var(--rel-colors-red-primary);
132
+ --rel-border-warning: var(--rel-colors-orange-warning);
133
+ --rel-border-success: var(--rel-colors-green-primary);
134
+ --rel-border-info: var(--rel-colors-blue-primary);
135
+ --rel-border-divider: var(--rel-colors-gray-divider);
136
+ --rel-border-tab: var(--rel-colors-gray-tab-border);
137
+
138
+ /* ------------------ SEMANTIC BACKGROUNDS ------------------ */
139
+ --rel-background-error: var(--rel-colors-red-bg-alert);
140
+ --rel-background-error-light: var(--rel-colors-red-light);
141
+ --rel-background-warning: var(--rel-colors-orange-bg-light);
142
+ --rel-background-warning-counter: var(--rel-colors-orange-bg-counter);
143
+ --rel-background-success: var(--rel-colors-green-bg-light);
144
+ --rel-background-info: var(--rel-colors-blue-bg);
145
+ --rel-background-info-accent: var(--rel-colors-blue-light);
146
+
147
+ /* ------------------ SEMANTIC SURFACES ------------------ */
148
+ --rel-surface-secondary: var(--rel-colors-gray-light);
149
+ --rel-surface-screen: var(--rel-colors-gray-screen-bg);
150
+ --rel-surface-surface: var(--rel-colors-gray-surface);
151
+ --rel-surface-warm: var(--rel-colors-gray-warm);
152
+ --rel-surface-toast: var(--rel-colors-gray-toast-bg);
153
+
154
+ /* ------------------ 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);
160
+
161
+ /* ------------------ SPACING ------------------ */
162
+ --rel-spacing-space-3xs: 2px;
163
+ --rel-spacing-space-2xs: 4px;
164
+ --rel-spacing-space-xs: 8px;
165
+ --rel-spacing-space-sm: 12px;
166
+ --rel-spacing-space-md: 16px;
167
+ --rel-spacing-space-lg: 20px;
168
+ --rel-spacing-space-xl: 24px;
169
+ --rel-spacing-space-2xl: 32px;
170
+ --rel-spacing-space-3xl: 48px;
171
+
172
+ /* ------------------ TYPOGRAPHY ------------------ */
173
+ --rel-fontFamilies-primary: Poppins, sans-serif;
174
+
175
+ --rel-fontWeights-regular: 400;
176
+ --rel-fontWeights-medium: 500;
177
+ --rel-fontWeights-semibold: 600;
178
+ --rel-fontWeights-bold: 700;
179
+
180
+ --rel-fontSizes-3xl: 36px;
181
+ --rel-fontSizes-2xl: 28px;
182
+ --rel-fontSizes-xl: 24px;
183
+ --rel-fontSizes-lg: 20px;
184
+ --rel-fontSizes-md: 14px;
185
+ --rel-fontSizes-sm: 12px;
186
+ --rel-fontSizes-xs: 10px;
187
+
188
+ --rel-lineHeights-3xl: 48px;
189
+ --rel-lineHeights-2xl: 42px;
190
+ --rel-lineHeights-xl: 36px;
191
+ --rel-lineHeights-lg: 28px;
192
+ --rel-lineHeights-md: 20px;
193
+ --rel-lineHeights-sm: 18px;
194
+ --rel-lineHeights-xs: 16px;
195
+ --rel-lineHeights-2xs: 12px;
196
+
197
+ --rel-letterSpacing-normal: 0px;
198
+ --rel-letterSpacing-dense: -0.2px;
199
+ --rel-letterSpacing-denser: -0.3px;
200
+ --rel-letterSpacing-densest: -0.54px;
201
+
202
+ /* ------------------ OVERLAYS ------------------ */
203
+ --rel-overlay-scrim: rgba(0, 0, 0, 0.5);
204
+
205
+ /* ------------------ NEW ADDITIONS / COMPAT TOKENS ------------------ */
206
+ /* Keep expected/legacy token names working across components */
207
+ --rel-colors-primary-500: var(--rel-colors-blue-primary);
208
+ --rel-colors-gray-body: var(--rel-text-primary);
209
+ }
210
+
211
+ /* ------------------ DARK MODE ------------------ */
212
+ /* Enable by setting: <html data-theme="dark"> */
213
+ :root[data-theme="dark"] {
214
+ /* ------------------ COLORS (OVERRIDES) ------------------ */
215
+ /* Inverted base colors for dark theme */
216
+ --rel-colors-white: #0f1115;
217
+ --rel-colors-black: #e6e8ee;
218
+
219
+ /* Text colors - refined for better readability */
220
+ --rel-colors-gray-primary: #e6e8ee;
221
+ --rel-colors-gray-heading: #f5f7ff;
222
+ --rel-colors-gray-placeholder: #8b95a7;
223
+ --rel-colors-gray-dark-placeholder: #707a8c;
224
+ --rel-colors-gray-disabled-text: #667085;
225
+
226
+ /* Border & divider colors - subtle but clear */
227
+ --rel-colors-gray-border: #2a3241;
228
+ --rel-colors-gray-divider: #2a3241;
229
+ --rel-colors-gray-tab-border: #323b4b;
230
+
231
+ /* Surface hierarchy - screen < surface < secondary, warm, toast */
232
+ --rel-colors-gray-screen-bg: #0f1115;
233
+ --rel-colors-gray-surface: #141821;
234
+ --rel-colors-gray-light: #1a1f2b;
235
+ --rel-colors-gray-warm: #161b22;
236
+ --rel-colors-gray-toast-bg: #1d2430;
237
+
238
+ /* ------------------ STATUS BACKGROUNDS (DARK TINTS) ------------------ */
239
+ --rel-colors-red-bg-alert: #2a1116;
240
+ --rel-colors-red-light: #3a151c;
241
+
242
+ --rel-colors-orange-bg-light: #2a1a10;
243
+ --rel-colors-orange-bg-counter: #241a10;
244
+
245
+ --rel-colors-green-bg-light: #0f231a;
246
+
247
+ --rel-colors-blue-bg: #0f1e2c;
248
+ --rel-colors-blue-light: #1b6ea8;
249
+
250
+ /* ------------------ SEMANTIC TEXT (EXPLICIT) ------------------ */
251
+ --rel-text-primary: var(--rel-colors-gray-primary);
252
+ --rel-text-heading: var(--rel-colors-gray-heading);
253
+
254
+ --rel-text-placeholder: var(--rel-colors-gray-placeholder);
255
+ --rel-text-dark-placeholder: var(--rel-colors-gray-dark-placeholder);
256
+
257
+ --rel-text-disabled: var(--rel-colors-gray-disabled-text);
258
+
259
+ /* ------------------ SEMANTIC BORDERS (EXPLICIT) ------------------ */
260
+ --rel-border-default: var(--rel-colors-gray-border);
261
+ --rel-border-divider: var(--rel-colors-gray-divider);
262
+ --rel-border-tab: var(--rel-colors-gray-tab-border);
263
+
264
+ /* ------------------ SEMANTIC BACKGROUNDS ------------------ */
265
+ --rel-background-error: var(--rel-colors-red-bg-alert);
266
+ --rel-background-error-light: var(--rel-colors-red-light);
267
+ --rel-background-warning: var(--rel-colors-orange-bg-light);
268
+ --rel-background-warning-counter: var(--rel-colors-orange-bg-counter);
269
+ --rel-background-success: var(--rel-colors-green-bg-light);
270
+ --rel-background-info: var(--rel-colors-blue-bg);
271
+ --rel-background-info-accent: var(--rel-colors-blue-light);
272
+
273
+ /* ------------------ SEMANTIC SURFACES (EXPLICIT) ------------------ */
274
+ --rel-surface-secondary: var(--rel-colors-gray-light);
275
+ --rel-surface-screen: var(--rel-colors-gray-screen-bg);
276
+ --rel-surface-surface: var(--rel-colors-gray-surface);
277
+ --rel-surface-warm: var(--rel-colors-gray-warm);
278
+ --rel-surface-toast: var(--rel-colors-gray-toast-bg);
279
+
280
+ /* ------------------ SHADOWS (DARK TUNED) ------------------ */
281
+ --rel-shadows-shadow-100: 0px 1px 2px rgba(0, 0, 0, 0.6);
282
+ --rel-shadows-shadow-200: 0px 2px 6px rgba(0, 0, 0, 0.6);
283
+ --rel-shadows-shadow-300: 0px 4px 10px rgba(0, 0, 0, 0.65);
284
+ --rel-shadows-shadow-400: 0px 6px 16px rgba(0, 0, 0, 0.7);
285
+ --rel-shadows-shadow-500: 0px 10px 24px rgba(0, 0, 0, 0.75);
286
+
287
+ /* ------------------ OVERLAYS ------------------ */
288
+ --rel-overlay-scrim: rgba(0, 0, 0, 0.6);
289
+
290
+ /* ------------------ NEW ADDITIONS / COMPAT TOKENS ------------------ */
291
+ /* Keep expected/legacy token names working across components */
292
+ --rel-colors-primary-500: var(--rel-colors-blue-primary);
293
+ --rel-colors-gray-body: var(--rel-text-primary);
184
294
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reliability-design/web",
3
- "version": "1.0.3",
3
+ "version": "1.0.6",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",