@yomologic/react-ui 0.5.0 → 0.5.2
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.
- package/dist/base.css +41 -10
- package/dist/index.d.mts +1006 -0
- package/dist/index.d.ts +17 -5
- package/dist/index.js +269 -216
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +354 -301
- package/dist/index.mjs.map +1 -0
- package/dist/styles.css +162 -52
- package/dist/styles.css.map +1 -0
- package/dist/styles.d.mts +2 -0
- package/package.json +4 -5
package/dist/base.css
CHANGED
|
@@ -11,6 +11,8 @@
|
|
|
11
11
|
--color-warning: #d4a574;
|
|
12
12
|
--color-info: #4d9de0;
|
|
13
13
|
--color-background: #0f1419;
|
|
14
|
+
--color-surface: #1a2028;
|
|
15
|
+
--color-surface-elevated: #242c36;
|
|
14
16
|
--color-foreground: #e3e8ed;
|
|
15
17
|
--color-muted: #1a2028;
|
|
16
18
|
--color-muted-foreground: #8b9ba8;
|
|
@@ -158,6 +160,15 @@
|
|
|
158
160
|
--z-index-snackbar: 2000;
|
|
159
161
|
--z-index-toast: 2100;
|
|
160
162
|
|
|
163
|
+
/* Component: Drawer */
|
|
164
|
+
--drawer-font-size: 0.875rem;
|
|
165
|
+
--drawer-item-padding-x: 1rem;
|
|
166
|
+
--drawer-item-padding-y: 0.625rem;
|
|
167
|
+
--drawer-border-radius: 0.5rem;
|
|
168
|
+
--drawer-section-padding-y: 1rem;
|
|
169
|
+
--drawer-title-margin-bottom: 0.5rem;
|
|
170
|
+
--drawer-item-spacing: 0.25rem;
|
|
171
|
+
|
|
161
172
|
/* Component: Nav */
|
|
162
173
|
--nav-height: 3.5rem;
|
|
163
174
|
--nav-gap: 0.5rem;
|
|
@@ -188,11 +199,11 @@
|
|
|
188
199
|
--checkbox-size-md: 1.5rem;
|
|
189
200
|
--checkbox-size-lg: 1.75rem;
|
|
190
201
|
--checkbox-size-xl: 2rem;
|
|
191
|
-
--checkbox-label-font-size-xs: 0.
|
|
192
|
-
--checkbox-label-font-size-sm: 0.
|
|
193
|
-
--checkbox-label-font-size-md:
|
|
194
|
-
--checkbox-label-font-size-lg:
|
|
195
|
-
--checkbox-label-font-size-xl:
|
|
202
|
+
--checkbox-label-font-size-xs: var(--typography-caption, 0.6875rem);
|
|
203
|
+
--checkbox-label-font-size-sm: var(--typography-small, 0.75rem);
|
|
204
|
+
--checkbox-label-font-size-md: var(--typography-body, 0.875rem);
|
|
205
|
+
--checkbox-label-font-size-lg: var(--typography-h6, 0.875rem);
|
|
206
|
+
--checkbox-label-font-size-xl: var(--typography-h5, 1rem);
|
|
196
207
|
--checkbox-label-spacing-xs: 0.5rem;
|
|
197
208
|
--checkbox-label-spacing-sm: 0.625rem;
|
|
198
209
|
--checkbox-label-spacing-md: 0.75rem;
|
|
@@ -212,11 +223,11 @@
|
|
|
212
223
|
--radio-size-md: 1.5rem;
|
|
213
224
|
--radio-size-lg: 1.75rem;
|
|
214
225
|
--radio-size-xl: 2rem;
|
|
215
|
-
--radio-label-font-size-xs: 0.
|
|
216
|
-
--radio-label-font-size-sm: 0.
|
|
217
|
-
--radio-label-font-size-md:
|
|
218
|
-
--radio-label-font-size-lg:
|
|
219
|
-
--radio-label-font-size-xl:
|
|
226
|
+
--radio-label-font-size-xs: var(--typography-caption, 0.6875rem);
|
|
227
|
+
--radio-label-font-size-sm: var(--typography-small, 0.75rem);
|
|
228
|
+
--radio-label-font-size-md: var(--typography-body, 0.875rem);
|
|
229
|
+
--radio-label-font-size-lg: var(--typography-h6, 0.875rem);
|
|
230
|
+
--radio-label-font-size-xl: var(--typography-h5, 1rem);
|
|
220
231
|
--radio-label-spacing-xs: 0.5rem;
|
|
221
232
|
--radio-label-spacing-sm: 0.625rem;
|
|
222
233
|
--radio-label-spacing-md: 0.75rem;
|
|
@@ -292,3 +303,23 @@
|
|
|
292
303
|
/* Component: Rating */
|
|
293
304
|
--star-size: 1.5rem;
|
|
294
305
|
}
|
|
306
|
+
|
|
307
|
+
/* Responsive Typography - Desktop Overrides */
|
|
308
|
+
@media (min-width: 1024px) {
|
|
309
|
+
:root {
|
|
310
|
+
/* Update component label sizes to use desktop typography */
|
|
311
|
+
--checkbox-label-font-size-xs: var(--typography-caption, 0.6875rem);
|
|
312
|
+
--checkbox-label-font-size-sm: var(--typography-small-desktop, 0.875rem);
|
|
313
|
+
--checkbox-label-font-size-md: var(--typography-body-desktop, 1rem);
|
|
314
|
+
--checkbox-label-font-size-lg: var(--typography-h6-desktop, 1rem);
|
|
315
|
+
--checkbox-label-font-size-xl: var(--typography-h5-desktop, 1.125rem);
|
|
316
|
+
|
|
317
|
+
--radio-label-font-size-xs: var(--typography-caption, 0.6875rem);
|
|
318
|
+
--radio-label-font-size-sm: var(--typography-small-desktop, 0.875rem);
|
|
319
|
+
--radio-label-font-size-md: var(--typography-body-desktop, 1rem);
|
|
320
|
+
--radio-label-font-size-lg: var(--typography-h6-desktop, 1rem);
|
|
321
|
+
--radio-label-font-size-xl: var(--typography-h5-desktop, 1.125rem);
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
|