@castui/cast-ui 4.7.0 → 4.8.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.
- package/README.md +6 -0
- package/dist/components/Accordion/Accordion.d.ts +80 -0
- package/dist/components/Accordion/Accordion.js +157 -0
- package/dist/components/Accordion/index.d.ts +1 -0
- package/dist/components/Accordion/index.js +6 -0
- package/dist/components/AppBar/AppBar.d.ts +47 -0
- package/dist/components/AppBar/AppBar.js +47 -0
- package/dist/components/AppBar/index.d.ts +1 -0
- package/dist/components/AppBar/index.js +5 -0
- package/dist/components/Autocomplete/Autocomplete.d.ts +70 -0
- package/dist/components/Autocomplete/Autocomplete.js +249 -0
- package/dist/components/Autocomplete/index.d.ts +1 -0
- package/dist/components/Autocomplete/index.js +5 -0
- package/dist/components/Backdrop/Backdrop.d.ts +32 -0
- package/dist/components/Backdrop/Backdrop.js +74 -0
- package/dist/components/Backdrop/index.d.ts +1 -0
- package/dist/components/Backdrop/index.js +5 -0
- package/dist/components/BottomSheet/BottomSheet.d.ts +50 -0
- package/dist/components/BottomSheet/BottomSheet.js +159 -0
- package/dist/components/BottomSheet/index.d.ts +1 -0
- package/dist/components/BottomSheet/index.js +6 -0
- package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +63 -0
- package/dist/components/Breadcrumbs/Breadcrumbs.js +143 -0
- package/dist/components/Breadcrumbs/index.d.ts +1 -0
- package/dist/components/Breadcrumbs/index.js +6 -0
- package/dist/components/CodeBlock/CodeBlock.d.ts +42 -0
- package/dist/components/CodeBlock/CodeBlock.js +110 -0
- package/dist/components/CodeBlock/index.d.ts +1 -0
- package/dist/components/CodeBlock/index.js +5 -0
- package/dist/components/Drawer/Drawer.d.ts +51 -0
- package/dist/components/Drawer/Drawer.js +168 -0
- package/dist/components/Drawer/index.d.ts +1 -0
- package/dist/components/Drawer/index.js +6 -0
- package/dist/components/Link/Link.d.ts +51 -0
- package/dist/components/Link/Link.js +73 -0
- package/dist/components/Link/index.d.ts +1 -0
- package/dist/components/Link/index.js +5 -0
- package/dist/components/Menu/Menu.d.ts +91 -0
- package/dist/components/Menu/Menu.js +211 -0
- package/dist/components/Menu/index.d.ts +1 -0
- package/dist/components/Menu/index.js +9 -0
- package/dist/components/Slider/Slider.d.ts +47 -0
- package/dist/components/Slider/Slider.js +132 -0
- package/dist/components/Slider/index.d.ts +1 -0
- package/dist/components/Slider/index.js +5 -0
- package/dist/components/SpeedDial/SpeedDial.d.ts +72 -0
- package/dist/components/SpeedDial/SpeedDial.js +189 -0
- package/dist/components/SpeedDial/index.d.ts +1 -0
- package/dist/components/SpeedDial/index.js +6 -0
- package/dist/components/Table/Table.d.ts +74 -0
- package/dist/components/Table/Table.js +176 -0
- package/dist/components/Table/index.d.ts +1 -0
- package/dist/components/Table/index.js +9 -0
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.d.ts +69 -0
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.js +158 -0
- package/dist/components/ToggleButtonGroup/index.d.ts +1 -0
- package/dist/components/ToggleButtonGroup/index.js +6 -0
- package/dist/index.d.ts +16 -2
- package/dist/index.js +49 -2
- package/dist/theme/ThemeContext.d.ts +8 -1
- package/dist/theme/ThemeContext.js +7 -4
- package/dist/theme/applyCastTheme.d.ts +75 -0
- package/dist/theme/applyCastTheme.js +95 -0
- package/dist/theme/index.d.ts +2 -1
- package/dist/theme/index.js +3 -1
- package/dist/theme/themes.js +177 -0
- package/dist/theme/types.d.ts +177 -0
- package/dist/tokens/colors.d.ts +44 -0
- package/dist/tokens/colors.js +47 -1
- package/dist/tokens/index.d.ts +1 -1
- package/dist/tokens/index.js +4 -1
- package/package.json +2 -1
package/dist/theme/themes.js
CHANGED
|
@@ -14,6 +14,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
14
14
|
exports.themes = void 0;
|
|
15
15
|
exports.themes = {
|
|
16
16
|
compact: {
|
|
17
|
+
accordion: {
|
|
18
|
+
small: { gap: 6, paddingX: 8, paddingY: 6 },
|
|
19
|
+
default: { gap: 8, paddingX: 12, paddingY: 8 },
|
|
20
|
+
large: { gap: 8, paddingX: 16, paddingY: 12 },
|
|
21
|
+
},
|
|
17
22
|
dialog: {
|
|
18
23
|
small: { padding: 16, gap: 12, iconSize: 24 },
|
|
19
24
|
default: { padding: 24, gap: 16, iconSize: 32 },
|
|
@@ -123,8 +128,67 @@ exports.themes = {
|
|
|
123
128
|
default: { gap: 6, paddingX: 10, paddingY: 6, indicatorHeight: 2 },
|
|
124
129
|
large: { gap: 8, paddingX: 12, paddingY: 8, indicatorHeight: 4 },
|
|
125
130
|
},
|
|
131
|
+
bottomSheet: {
|
|
132
|
+
borderRadius: 16, handleWidth: 40, handleHeight: 4, handleGap: 8,
|
|
133
|
+
padding: 16, gap: 12,
|
|
134
|
+
},
|
|
135
|
+
link: {
|
|
136
|
+
small: { gap: 2 },
|
|
137
|
+
default: { gap: 4 },
|
|
138
|
+
large: { gap: 4 },
|
|
139
|
+
},
|
|
140
|
+
breadcrumbs: {
|
|
141
|
+
small: { gap: 4 },
|
|
142
|
+
default: { gap: 4 },
|
|
143
|
+
large: { gap: 8 },
|
|
144
|
+
},
|
|
145
|
+
codeBlock: {
|
|
146
|
+
borderRadius: 8,
|
|
147
|
+
small: { padding: 8, gap: 8 },
|
|
148
|
+
default: { padding: 12, gap: 8 },
|
|
149
|
+
large: { padding: 16, gap: 12 },
|
|
150
|
+
},
|
|
151
|
+
drawer: { padding: 16, gap: 12 },
|
|
152
|
+
menu: {
|
|
153
|
+
item: { gap: 8, paddingX: 8, paddingY: 4, borderRadius: 4 },
|
|
154
|
+
content: { paddingY: 2 },
|
|
155
|
+
group: { paddingX: 8, labelPaddingY: 6 },
|
|
156
|
+
separator: { marginY: 4 },
|
|
157
|
+
},
|
|
158
|
+
toggleButtonGroup: {
|
|
159
|
+
borderRadius: 8,
|
|
160
|
+
small: { paddingX: 6, paddingY: 2, gap: 4 },
|
|
161
|
+
default: { paddingX: 10, paddingY: 6, gap: 8 },
|
|
162
|
+
large: { paddingX: 20, paddingY: 14, gap: 16 },
|
|
163
|
+
},
|
|
164
|
+
appBar: {
|
|
165
|
+
small: { paddingX: 12, paddingY: 6, gap: 8 },
|
|
166
|
+
default: { paddingX: 16, paddingY: 8, gap: 8 },
|
|
167
|
+
large: { paddingX: 16, paddingY: 12, gap: 12 },
|
|
168
|
+
},
|
|
169
|
+
slider: {
|
|
170
|
+
borderRadius: 9999,
|
|
171
|
+
small: { trackHeight: 4, thumbSize: 12 },
|
|
172
|
+
default: { trackHeight: 6, thumbSize: 16 },
|
|
173
|
+
large: { trackHeight: 8, thumbSize: 20 },
|
|
174
|
+
},
|
|
175
|
+
speedDial: {
|
|
176
|
+
small: { fabSize: 40, actionSize: 32, gap: 6 },
|
|
177
|
+
default: { fabSize: 48, actionSize: 40, gap: 8 },
|
|
178
|
+
large: { fabSize: 64, actionSize: 48, gap: 12 },
|
|
179
|
+
},
|
|
180
|
+
table: {
|
|
181
|
+
small: { cellPaddingX: 8, cellPaddingY: 4 },
|
|
182
|
+
default: { cellPaddingX: 12, cellPaddingY: 8 },
|
|
183
|
+
large: { cellPaddingX: 16, cellPaddingY: 12 },
|
|
184
|
+
},
|
|
126
185
|
},
|
|
127
186
|
default: {
|
|
187
|
+
accordion: {
|
|
188
|
+
small: { gap: 8, paddingX: 12, paddingY: 8 },
|
|
189
|
+
default: { gap: 8, paddingX: 16, paddingY: 12 },
|
|
190
|
+
large: { gap: 12, paddingX: 20, paddingY: 16 },
|
|
191
|
+
},
|
|
128
192
|
dialog: {
|
|
129
193
|
small: { padding: 24, gap: 16, iconSize: 24 },
|
|
130
194
|
default: { padding: 32, gap: 24, iconSize: 32 },
|
|
@@ -234,8 +298,67 @@ exports.themes = {
|
|
|
234
298
|
default: { gap: 8, paddingX: 12, paddingY: 8, indicatorHeight: 2 },
|
|
235
299
|
large: { gap: 8, paddingX: 16, paddingY: 10, indicatorHeight: 4 },
|
|
236
300
|
},
|
|
301
|
+
bottomSheet: {
|
|
302
|
+
borderRadius: 16, handleWidth: 40, handleHeight: 4, handleGap: 8,
|
|
303
|
+
padding: 24, gap: 16,
|
|
304
|
+
},
|
|
305
|
+
link: {
|
|
306
|
+
small: { gap: 4 },
|
|
307
|
+
default: { gap: 4 },
|
|
308
|
+
large: { gap: 8 },
|
|
309
|
+
},
|
|
310
|
+
breadcrumbs: {
|
|
311
|
+
small: { gap: 4 },
|
|
312
|
+
default: { gap: 8 },
|
|
313
|
+
large: { gap: 8 },
|
|
314
|
+
},
|
|
315
|
+
codeBlock: {
|
|
316
|
+
borderRadius: 8,
|
|
317
|
+
small: { padding: 12, gap: 8 },
|
|
318
|
+
default: { padding: 16, gap: 12 },
|
|
319
|
+
large: { padding: 24, gap: 16 },
|
|
320
|
+
},
|
|
321
|
+
drawer: { padding: 24, gap: 16 },
|
|
322
|
+
menu: {
|
|
323
|
+
item: { gap: 12, paddingX: 12, paddingY: 6, borderRadius: 4 },
|
|
324
|
+
content: { paddingY: 4 },
|
|
325
|
+
group: { paddingX: 12, labelPaddingY: 6 },
|
|
326
|
+
separator: { marginY: 4 },
|
|
327
|
+
},
|
|
328
|
+
toggleButtonGroup: {
|
|
329
|
+
borderRadius: 8,
|
|
330
|
+
small: { paddingX: 10, paddingY: 6, gap: 8 },
|
|
331
|
+
default: { paddingX: 14, paddingY: 10, gap: 12 },
|
|
332
|
+
large: { paddingX: 24, paddingY: 16, gap: 20 },
|
|
333
|
+
},
|
|
334
|
+
appBar: {
|
|
335
|
+
small: { paddingX: 16, paddingY: 8, gap: 8 },
|
|
336
|
+
default: { paddingX: 16, paddingY: 12, gap: 12 },
|
|
337
|
+
large: { paddingX: 24, paddingY: 16, gap: 16 },
|
|
338
|
+
},
|
|
339
|
+
slider: {
|
|
340
|
+
borderRadius: 9999,
|
|
341
|
+
small: { trackHeight: 4, thumbSize: 12 },
|
|
342
|
+
default: { trackHeight: 6, thumbSize: 16 },
|
|
343
|
+
large: { trackHeight: 8, thumbSize: 20 },
|
|
344
|
+
},
|
|
345
|
+
speedDial: {
|
|
346
|
+
small: { fabSize: 40, actionSize: 32, gap: 8 },
|
|
347
|
+
default: { fabSize: 48, actionSize: 40, gap: 12 },
|
|
348
|
+
large: { fabSize: 64, actionSize: 48, gap: 16 },
|
|
349
|
+
},
|
|
350
|
+
table: {
|
|
351
|
+
small: { cellPaddingX: 12, cellPaddingY: 6 },
|
|
352
|
+
default: { cellPaddingX: 16, cellPaddingY: 12 },
|
|
353
|
+
large: { cellPaddingX: 24, cellPaddingY: 16 },
|
|
354
|
+
},
|
|
237
355
|
},
|
|
238
356
|
comfortable: {
|
|
357
|
+
accordion: {
|
|
358
|
+
small: { gap: 8, paddingX: 16, paddingY: 12 },
|
|
359
|
+
default: { gap: 12, paddingX: 20, paddingY: 16 },
|
|
360
|
+
large: { gap: 12, paddingX: 24, paddingY: 20 },
|
|
361
|
+
},
|
|
239
362
|
dialog: {
|
|
240
363
|
small: { padding: 40, gap: 24, iconSize: 24 },
|
|
241
364
|
default: { padding: 40, gap: 32, iconSize: 32 },
|
|
@@ -345,5 +468,59 @@ exports.themes = {
|
|
|
345
468
|
default: { gap: 8, paddingX: 16, paddingY: 10, indicatorHeight: 2 },
|
|
346
469
|
large: { gap: 12, paddingX: 20, paddingY: 12, indicatorHeight: 4 },
|
|
347
470
|
},
|
|
471
|
+
bottomSheet: {
|
|
472
|
+
borderRadius: 16, handleWidth: 40, handleHeight: 4, handleGap: 8,
|
|
473
|
+
padding: 32, gap: 24,
|
|
474
|
+
},
|
|
475
|
+
link: {
|
|
476
|
+
small: { gap: 4 },
|
|
477
|
+
default: { gap: 8 },
|
|
478
|
+
large: { gap: 8 },
|
|
479
|
+
},
|
|
480
|
+
breadcrumbs: {
|
|
481
|
+
small: { gap: 8 },
|
|
482
|
+
default: { gap: 8 },
|
|
483
|
+
large: { gap: 12 },
|
|
484
|
+
},
|
|
485
|
+
codeBlock: {
|
|
486
|
+
borderRadius: 8,
|
|
487
|
+
small: { padding: 16, gap: 12 },
|
|
488
|
+
default: { padding: 24, gap: 16 },
|
|
489
|
+
large: { padding: 32, gap: 24 },
|
|
490
|
+
},
|
|
491
|
+
drawer: { padding: 32, gap: 24 },
|
|
492
|
+
menu: {
|
|
493
|
+
item: { gap: 16, paddingX: 16, paddingY: 8, borderRadius: 4 },
|
|
494
|
+
content: { paddingY: 6 },
|
|
495
|
+
group: { paddingX: 16, labelPaddingY: 6 },
|
|
496
|
+
separator: { marginY: 4 },
|
|
497
|
+
},
|
|
498
|
+
toggleButtonGroup: {
|
|
499
|
+
borderRadius: 8,
|
|
500
|
+
small: { paddingX: 14, paddingY: 10, gap: 12 },
|
|
501
|
+
default: { paddingX: 20, paddingY: 14, gap: 16 },
|
|
502
|
+
large: { paddingX: 32, paddingY: 20, gap: 24 },
|
|
503
|
+
},
|
|
504
|
+
appBar: {
|
|
505
|
+
small: { paddingX: 16, paddingY: 12, gap: 12 },
|
|
506
|
+
default: { paddingX: 24, paddingY: 16, gap: 16 },
|
|
507
|
+
large: { paddingX: 32, paddingY: 20, gap: 20 },
|
|
508
|
+
},
|
|
509
|
+
slider: {
|
|
510
|
+
borderRadius: 9999,
|
|
511
|
+
small: { trackHeight: 4, thumbSize: 12 },
|
|
512
|
+
default: { trackHeight: 6, thumbSize: 16 },
|
|
513
|
+
large: { trackHeight: 8, thumbSize: 20 },
|
|
514
|
+
},
|
|
515
|
+
speedDial: {
|
|
516
|
+
small: { fabSize: 40, actionSize: 32, gap: 12 },
|
|
517
|
+
default: { fabSize: 48, actionSize: 40, gap: 16 },
|
|
518
|
+
large: { fabSize: 64, actionSize: 48, gap: 20 },
|
|
519
|
+
},
|
|
520
|
+
table: {
|
|
521
|
+
small: { cellPaddingX: 16, cellPaddingY: 8 },
|
|
522
|
+
default: { cellPaddingX: 20, cellPaddingY: 16 },
|
|
523
|
+
large: { cellPaddingX: 32, cellPaddingY: 24 },
|
|
524
|
+
},
|
|
348
525
|
},
|
|
349
526
|
};
|
package/dist/theme/types.d.ts
CHANGED
|
@@ -288,10 +288,175 @@ export type SpinnerThemeTokens = {
|
|
|
288
288
|
default: SpinnerSizeTokens;
|
|
289
289
|
large: SpinnerSizeTokens;
|
|
290
290
|
};
|
|
291
|
+
/**
|
|
292
|
+
* BottomSheet tokens. The sheet hugs its content up to a max height, so there
|
|
293
|
+
* are no size variants. `padding` and `gap` vary by density. The top corner
|
|
294
|
+
* radius and the drag handle dimensions are constant across density (handle
|
|
295
|
+
* width/height are keyed to primitive `size/*`, the radius to a primitive
|
|
296
|
+
* `radius/*`, the handle gap to `space/*`).
|
|
297
|
+
*/
|
|
298
|
+
export type BottomSheetThemeTokens = {
|
|
299
|
+
/** Top-corner radius of the sheet. Constant. */
|
|
300
|
+
borderRadius: number;
|
|
301
|
+
/** Drag handle width. Constant. */
|
|
302
|
+
handleWidth: number;
|
|
303
|
+
/** Drag handle height. Constant. */
|
|
304
|
+
handleHeight: number;
|
|
305
|
+
/** Gap below the handle before the content. Constant. */
|
|
306
|
+
handleGap: number;
|
|
307
|
+
/** Content padding. Varies by density. */
|
|
308
|
+
padding: number;
|
|
309
|
+
/** Gap between stacked content sections. Varies by density. */
|
|
310
|
+
gap: number;
|
|
311
|
+
};
|
|
312
|
+
/** Spacing tokens for one accordion size variant. gap, paddingX, and paddingY
|
|
313
|
+
* all vary by density (bound to primitive space/*). The flush style has no
|
|
314
|
+
* border-radius, and the chevron / leading icon use the named Icon scale keyed
|
|
315
|
+
* by the `size` prop, so there are no constant dimension tokens. */
|
|
316
|
+
export type AccordionSizeTokens = {
|
|
317
|
+
gap: number;
|
|
318
|
+
paddingX: number;
|
|
319
|
+
paddingY: number;
|
|
320
|
+
};
|
|
321
|
+
/** Accordion tokens — three size variants, each density-varying. */
|
|
322
|
+
export type AccordionThemeTokens = {
|
|
323
|
+
small: AccordionSizeTokens;
|
|
324
|
+
default: AccordionSizeTokens;
|
|
325
|
+
large: AccordionSizeTokens;
|
|
326
|
+
};
|
|
291
327
|
/**
|
|
292
328
|
* Component-level tokens that vary by density theme.
|
|
293
329
|
* Extended as new components are added to the library.
|
|
294
330
|
*/
|
|
331
|
+
/** Link spacing tokens for one size variant (icon/label gap, varies by density). */
|
|
332
|
+
export type LinkSizeTokens = {
|
|
333
|
+
gap: number;
|
|
334
|
+
};
|
|
335
|
+
/** Link tokens — gap varies by size and density. */
|
|
336
|
+
export type LinkThemeTokens = {
|
|
337
|
+
small: LinkSizeTokens;
|
|
338
|
+
default: LinkSizeTokens;
|
|
339
|
+
large: LinkSizeTokens;
|
|
340
|
+
};
|
|
341
|
+
/** Breadcrumbs spacing tokens for one size variant (row + icon gap, density). */
|
|
342
|
+
export type BreadcrumbsSizeTokens = {
|
|
343
|
+
gap: number;
|
|
344
|
+
};
|
|
345
|
+
/** Breadcrumbs tokens — gap varies by size and density. */
|
|
346
|
+
export type BreadcrumbsThemeTokens = {
|
|
347
|
+
small: BreadcrumbsSizeTokens;
|
|
348
|
+
default: BreadcrumbsSizeTokens;
|
|
349
|
+
large: BreadcrumbsSizeTokens;
|
|
350
|
+
};
|
|
351
|
+
/** CodeBlock spacing tokens for one size variant (padding + gap, density). */
|
|
352
|
+
export type CodeBlockSizeTokens = {
|
|
353
|
+
padding: number;
|
|
354
|
+
gap: number;
|
|
355
|
+
};
|
|
356
|
+
/** CodeBlock tokens — padding/gap vary by size and density; radius is constant. */
|
|
357
|
+
export type CodeBlockThemeTokens = {
|
|
358
|
+
borderRadius: number;
|
|
359
|
+
small: CodeBlockSizeTokens;
|
|
360
|
+
default: CodeBlockSizeTokens;
|
|
361
|
+
large: CodeBlockSizeTokens;
|
|
362
|
+
};
|
|
363
|
+
/**
|
|
364
|
+
* Drawer tokens. The panel hugs an edge with no size variants, like
|
|
365
|
+
* BottomSheet. padding and gap vary by density; the panel is square (no radius
|
|
366
|
+
* token), and the default width is a layout constant in code, not a token.
|
|
367
|
+
*/
|
|
368
|
+
export type DrawerThemeTokens = {
|
|
369
|
+
padding: number;
|
|
370
|
+
gap: number;
|
|
371
|
+
};
|
|
372
|
+
/** Menu item spacing tokens (density-varying). */
|
|
373
|
+
export type MenuItemTokens = {
|
|
374
|
+
gap: number;
|
|
375
|
+
paddingX: number;
|
|
376
|
+
paddingY: number;
|
|
377
|
+
borderRadius: number;
|
|
378
|
+
};
|
|
379
|
+
/** Menu group (section label) tokens. */
|
|
380
|
+
export type MenuGroupTokens = {
|
|
381
|
+
paddingX: number;
|
|
382
|
+
labelPaddingY: number;
|
|
383
|
+
};
|
|
384
|
+
/** Menu tokens. Mirrors the select shape, namespaced to menu. Item spacing
|
|
385
|
+
* varies by density; the size prop drives typography. */
|
|
386
|
+
export type MenuThemeTokens = {
|
|
387
|
+
item: MenuItemTokens;
|
|
388
|
+
content: {
|
|
389
|
+
paddingY: number;
|
|
390
|
+
};
|
|
391
|
+
group: MenuGroupTokens;
|
|
392
|
+
separator: {
|
|
393
|
+
marginY: number;
|
|
394
|
+
};
|
|
395
|
+
};
|
|
396
|
+
/** Toggle button spacing tokens for one size variant (density-varying). */
|
|
397
|
+
export type ToggleButtonGroupSizeTokens = {
|
|
398
|
+
paddingX: number;
|
|
399
|
+
paddingY: number;
|
|
400
|
+
gap: number;
|
|
401
|
+
};
|
|
402
|
+
/** Toggle button group tokens — padding/gap vary by size and density; the group
|
|
403
|
+
* border-radius is constant. */
|
|
404
|
+
export type ToggleButtonGroupThemeTokens = {
|
|
405
|
+
borderRadius: number;
|
|
406
|
+
small: ToggleButtonGroupSizeTokens;
|
|
407
|
+
default: ToggleButtonGroupSizeTokens;
|
|
408
|
+
large: ToggleButtonGroupSizeTokens;
|
|
409
|
+
};
|
|
410
|
+
/** App bar spacing tokens for one size variant (density-varying). */
|
|
411
|
+
export type AppBarSizeTokens = {
|
|
412
|
+
paddingX: number;
|
|
413
|
+
paddingY: number;
|
|
414
|
+
gap: number;
|
|
415
|
+
};
|
|
416
|
+
/** App bar tokens — padding/gap vary by size and density. The bar height comes
|
|
417
|
+
* from the padding, so there is no height token. */
|
|
418
|
+
export type AppBarThemeTokens = {
|
|
419
|
+
small: AppBarSizeTokens;
|
|
420
|
+
default: AppBarSizeTokens;
|
|
421
|
+
large: AppBarSizeTokens;
|
|
422
|
+
};
|
|
423
|
+
/** Slider geometry for one size variant (constant across density). */
|
|
424
|
+
export type SliderSizeTokens = {
|
|
425
|
+
trackHeight: number;
|
|
426
|
+
thumbSize: number;
|
|
427
|
+
};
|
|
428
|
+
/** Slider tokens — track thickness + thumb size keyed by the size prop; pill
|
|
429
|
+
* radius constant. No density-varying spacing. */
|
|
430
|
+
export type SliderThemeTokens = {
|
|
431
|
+
borderRadius: number;
|
|
432
|
+
small: SliderSizeTokens;
|
|
433
|
+
default: SliderSizeTokens;
|
|
434
|
+
large: SliderSizeTokens;
|
|
435
|
+
};
|
|
436
|
+
/** Speed dial sizes for one size variant. fab/action sizes are constant per
|
|
437
|
+
* size; gap varies by density. */
|
|
438
|
+
export type SpeedDialSizeTokens = {
|
|
439
|
+
fabSize: number;
|
|
440
|
+
actionSize: number;
|
|
441
|
+
gap: number;
|
|
442
|
+
};
|
|
443
|
+
/** Speed dial tokens — three size variants. */
|
|
444
|
+
export type SpeedDialThemeTokens = {
|
|
445
|
+
small: SpeedDialSizeTokens;
|
|
446
|
+
default: SpeedDialSizeTokens;
|
|
447
|
+
large: SpeedDialSizeTokens;
|
|
448
|
+
};
|
|
449
|
+
/** Table cell padding for one size variant (density-varying). */
|
|
450
|
+
export type TableSizeTokens = {
|
|
451
|
+
cellPaddingX: number;
|
|
452
|
+
cellPaddingY: number;
|
|
453
|
+
};
|
|
454
|
+
/** Table tokens — three size variants. */
|
|
455
|
+
export type TableThemeTokens = {
|
|
456
|
+
small: TableSizeTokens;
|
|
457
|
+
default: TableSizeTokens;
|
|
458
|
+
large: TableSizeTokens;
|
|
459
|
+
};
|
|
295
460
|
export type ComponentTokens = {
|
|
296
461
|
button: ButtonThemeTokens;
|
|
297
462
|
dialog: DialogThemeTokens;
|
|
@@ -311,7 +476,19 @@ export type ComponentTokens = {
|
|
|
311
476
|
tooltip: TooltipThemeTokens;
|
|
312
477
|
progress: ProgressThemeTokens;
|
|
313
478
|
tabs: TabsThemeTokens;
|
|
479
|
+
accordion: AccordionThemeTokens;
|
|
314
480
|
spinner: SpinnerThemeTokens;
|
|
481
|
+
bottomSheet: BottomSheetThemeTokens;
|
|
482
|
+
link: LinkThemeTokens;
|
|
483
|
+
breadcrumbs: BreadcrumbsThemeTokens;
|
|
484
|
+
codeBlock: CodeBlockThemeTokens;
|
|
485
|
+
drawer: DrawerThemeTokens;
|
|
486
|
+
menu: MenuThemeTokens;
|
|
487
|
+
toggleButtonGroup: ToggleButtonGroupThemeTokens;
|
|
488
|
+
appBar: AppBarThemeTokens;
|
|
489
|
+
slider: SliderThemeTokens;
|
|
490
|
+
speedDial: SpeedDialThemeTokens;
|
|
491
|
+
table: TableThemeTokens;
|
|
315
492
|
};
|
|
316
493
|
/** Utility type for partial overrides at any depth */
|
|
317
494
|
export type DeepPartial<T> = {
|
package/dist/tokens/colors.d.ts
CHANGED
|
@@ -95,6 +95,11 @@ export type ColorScheme = {
|
|
|
95
95
|
/** Separator line colour */
|
|
96
96
|
separator: string;
|
|
97
97
|
};
|
|
98
|
+
/** Menu colours — item state colours (neutral) + separator. Mirrors select. */
|
|
99
|
+
menu: {
|
|
100
|
+
item: OptionStateColors;
|
|
101
|
+
separator: string;
|
|
102
|
+
};
|
|
98
103
|
/** Tag tokens — multi-select pill styling (layout constant across modes) */
|
|
99
104
|
tag: {
|
|
100
105
|
bg: string;
|
|
@@ -204,6 +209,14 @@ export type ColorScheme = {
|
|
|
204
209
|
spinner: {
|
|
205
210
|
track: string;
|
|
206
211
|
};
|
|
212
|
+
/**
|
|
213
|
+
* BottomSheet colours. The card surface reuses surface.overlay; the scrim
|
|
214
|
+
* reuses overlay.scrimOpacity. The drag handle is the one bespoke colour:
|
|
215
|
+
* control/bottom-sheet/handle/bg, a primitive grey that follows colour mode.
|
|
216
|
+
*/
|
|
217
|
+
bottomSheet: {
|
|
218
|
+
handle: string;
|
|
219
|
+
};
|
|
207
220
|
/** Avatar colours — initials/icon fallback surface + foreground */
|
|
208
221
|
avatar: {
|
|
209
222
|
bg: string;
|
|
@@ -222,6 +235,19 @@ export type ColorScheme = {
|
|
|
222
235
|
separator: string;
|
|
223
236
|
containerBg: string;
|
|
224
237
|
};
|
|
238
|
+
/** Slider colours — track background (the fill uses the intent system). */
|
|
239
|
+
slider: {
|
|
240
|
+
track: string;
|
|
241
|
+
};
|
|
242
|
+
/** Table colours — header, borders, and row states (neutral/brand, reused). */
|
|
243
|
+
table: {
|
|
244
|
+
headerBg: string;
|
|
245
|
+
border: string;
|
|
246
|
+
rowHover: string;
|
|
247
|
+
stripe: string;
|
|
248
|
+
selectedBg: string;
|
|
249
|
+
selectedHoverBg: string;
|
|
250
|
+
};
|
|
225
251
|
};
|
|
226
252
|
export declare const lightColors: ColorScheme;
|
|
227
253
|
export declare const darkColors: ColorScheme;
|
|
@@ -271,6 +297,11 @@ export declare const selectColors: {
|
|
|
271
297
|
/** Separator line colour */
|
|
272
298
|
separator: string;
|
|
273
299
|
};
|
|
300
|
+
/** Menu colours — item state colours + separator (mirrors select). */
|
|
301
|
+
export declare const menuColors: {
|
|
302
|
+
item: OptionStateColors;
|
|
303
|
+
separator: string;
|
|
304
|
+
};
|
|
274
305
|
/** Tag tokens — multi-select pill styling (constant across densities) */
|
|
275
306
|
export declare const tagTokens: {
|
|
276
307
|
bg: string;
|
|
@@ -382,6 +413,19 @@ export declare const skeletonColors: {
|
|
|
382
413
|
bg: string;
|
|
383
414
|
highlight: string;
|
|
384
415
|
};
|
|
416
|
+
/** Slider colours — track background (fill comes from the intent system). */
|
|
417
|
+
export declare const sliderColors: {
|
|
418
|
+
track: string;
|
|
419
|
+
};
|
|
420
|
+
/** Table colours — header, borders, and row states. */
|
|
421
|
+
export declare const tableColors: {
|
|
422
|
+
headerBg: string;
|
|
423
|
+
border: string;
|
|
424
|
+
rowHover: string;
|
|
425
|
+
stripe: string;
|
|
426
|
+
selectedBg: string;
|
|
427
|
+
selectedHoverBg: string;
|
|
428
|
+
};
|
|
385
429
|
/** List colours — used by List / ListItem / ListSubheader */
|
|
386
430
|
export declare const listColors: {
|
|
387
431
|
item: OptionStateColors;
|
package/dist/tokens/colors.js
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* the light-scheme values, kept for backwards compatibility.
|
|
16
16
|
*/
|
|
17
17
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
18
|
-
exports.listColors = exports.skeletonColors = exports.avatarColors = exports.tabsColors = exports.progressColors = exports.toggleColors = exports.radioColors = exports.checkboxColors = exports.errorTokens = exports.tagTokens = exports.selectColors = exports.overlayTokens = exports.textTokens = exports.surfaceTokens = exports.controlTokens = exports.disabledColors = exports.intentColors = exports.colorSchemes = exports.darkColors = exports.lightColors = void 0;
|
|
18
|
+
exports.listColors = exports.tableColors = exports.sliderColors = exports.skeletonColors = exports.avatarColors = exports.tabsColors = exports.progressColors = exports.toggleColors = exports.radioColors = exports.checkboxColors = exports.errorTokens = exports.tagTokens = exports.menuColors = exports.selectColors = exports.overlayTokens = exports.textTokens = exports.surfaceTokens = exports.controlTokens = exports.disabledColors = exports.intentColors = exports.colorSchemes = exports.darkColors = exports.lightColors = void 0;
|
|
19
19
|
// ---------------------------------------------------------------------------
|
|
20
20
|
// Light scheme — semantic-light mode
|
|
21
21
|
// ---------------------------------------------------------------------------
|
|
@@ -96,6 +96,16 @@ exports.lightColors = {
|
|
|
96
96
|
},
|
|
97
97
|
separator: '#E5E7EB',
|
|
98
98
|
},
|
|
99
|
+
menu: {
|
|
100
|
+
item: {
|
|
101
|
+
default: { bg: 'transparent', fg: '#374151' },
|
|
102
|
+
hover: { bg: '#F9FAFB', fg: '#111827' },
|
|
103
|
+
selected: { bg: '#EFF6FF', fg: '#1D4ED8' },
|
|
104
|
+
selectedHover: { bg: '#DBEAFE', fg: '#1D4ED8' },
|
|
105
|
+
disabled: { bg: 'transparent', fg: '#9CA3AF' },
|
|
106
|
+
},
|
|
107
|
+
separator: '#E5E7EB',
|
|
108
|
+
},
|
|
99
109
|
tag: {
|
|
100
110
|
bg: '#F3F4F6',
|
|
101
111
|
fg: '#374151',
|
|
@@ -142,6 +152,7 @@ exports.lightColors = {
|
|
|
142
152
|
progress: { track: '#E5E7EB' }, // control/progress/track/bg → cool-grey/200
|
|
143
153
|
tabs: { track: '#E5E7EB' }, // control/tabs/track/bg → cool-grey/200
|
|
144
154
|
spinner: { track: '#E5E7EB' }, // control/spinner/track/bg → cool-grey/200
|
|
155
|
+
bottomSheet: { handle: '#D1D5DB' }, // control/bottom-sheet/handle/bg → cool-grey/300
|
|
145
156
|
avatar: { bg: '#F3F4F6', fg: '#374151' },
|
|
146
157
|
skeleton: { bg: '#F3F4F6', highlight: '#E5E7EB' },
|
|
147
158
|
list: {
|
|
@@ -157,6 +168,15 @@ exports.lightColors = {
|
|
|
157
168
|
separator: '#E5E7EB',
|
|
158
169
|
containerBg: '#FFFFFF',
|
|
159
170
|
},
|
|
171
|
+
slider: { track: '#E5E7EB' }, // control/slider/track/bg -> cool-grey/200
|
|
172
|
+
table: {
|
|
173
|
+
headerBg: '#F3F4F6',
|
|
174
|
+
border: '#E5E7EB',
|
|
175
|
+
rowHover: '#F3F4F6',
|
|
176
|
+
stripe: '#F9FAFB',
|
|
177
|
+
selectedBg: '#EFF6FF',
|
|
178
|
+
selectedHoverBg: '#DBEAFE',
|
|
179
|
+
},
|
|
160
180
|
};
|
|
161
181
|
// ---------------------------------------------------------------------------
|
|
162
182
|
// Dark scheme — semantic-dark mode
|
|
@@ -240,6 +260,16 @@ exports.darkColors = {
|
|
|
240
260
|
},
|
|
241
261
|
separator: '#374151',
|
|
242
262
|
},
|
|
263
|
+
menu: {
|
|
264
|
+
item: {
|
|
265
|
+
default: { bg: 'transparent', fg: '#E5E7EB' },
|
|
266
|
+
hover: { bg: '#374151', fg: '#F9FAFB' },
|
|
267
|
+
selected: { bg: '#1E3A8A', fg: '#93C5FD' },
|
|
268
|
+
selectedHover: { bg: '#1E40AF', fg: '#93C5FD' },
|
|
269
|
+
disabled: { bg: 'transparent', fg: '#6B7280' },
|
|
270
|
+
},
|
|
271
|
+
separator: '#374151',
|
|
272
|
+
},
|
|
243
273
|
tag: {
|
|
244
274
|
bg: '#374151',
|
|
245
275
|
fg: '#E5E7EB',
|
|
@@ -286,6 +316,7 @@ exports.darkColors = {
|
|
|
286
316
|
progress: { track: '#374151' }, // control/progress/track/bg → cool-grey/700
|
|
287
317
|
tabs: { track: '#374151' }, // control/tabs/track/bg → cool-grey/700
|
|
288
318
|
spinner: { track: '#374151' }, // control/spinner/track/bg → cool-grey/700
|
|
319
|
+
bottomSheet: { handle: '#4B5563' }, // control/bottom-sheet/handle/bg → cool-grey/600
|
|
289
320
|
avatar: { bg: '#374151', fg: '#E5E7EB' },
|
|
290
321
|
skeleton: { bg: '#1F2937', highlight: '#374151' },
|
|
291
322
|
list: {
|
|
@@ -301,6 +332,15 @@ exports.darkColors = {
|
|
|
301
332
|
separator: '#374151',
|
|
302
333
|
containerBg: '#1F2937',
|
|
303
334
|
},
|
|
335
|
+
slider: { track: '#374151' }, // control/slider/track/bg -> cool-grey/700
|
|
336
|
+
table: {
|
|
337
|
+
headerBg: '#1F2937',
|
|
338
|
+
border: '#374151',
|
|
339
|
+
rowHover: '#374151',
|
|
340
|
+
stripe: '#111827',
|
|
341
|
+
selectedBg: '#1E3A8A',
|
|
342
|
+
selectedHoverBg: '#1E40AF',
|
|
343
|
+
},
|
|
304
344
|
};
|
|
305
345
|
/** Scheme lookup by colour mode */
|
|
306
346
|
exports.colorSchemes = {
|
|
@@ -334,6 +374,8 @@ exports.overlayTokens = {
|
|
|
334
374
|
};
|
|
335
375
|
/** Option state colours — used by SelectOption (neutral intent) */
|
|
336
376
|
exports.selectColors = exports.lightColors.select;
|
|
377
|
+
/** Menu colours — item state colours + separator (mirrors select). */
|
|
378
|
+
exports.menuColors = exports.lightColors.menu;
|
|
337
379
|
/** Tag tokens — multi-select pill styling (constant across densities) */
|
|
338
380
|
exports.tagTokens = exports.lightColors.tag;
|
|
339
381
|
/** Error/danger colour for form field borders and helper text */
|
|
@@ -352,5 +394,9 @@ exports.tabsColors = exports.lightColors.tabs;
|
|
|
352
394
|
exports.avatarColors = exports.lightColors.avatar;
|
|
353
395
|
/** Skeleton colours — placeholder surface for loading states */
|
|
354
396
|
exports.skeletonColors = exports.lightColors.skeleton;
|
|
397
|
+
/** Slider colours — track background (fill comes from the intent system). */
|
|
398
|
+
exports.sliderColors = exports.lightColors.slider;
|
|
399
|
+
/** Table colours — header, borders, and row states. */
|
|
400
|
+
exports.tableColors = exports.lightColors.table;
|
|
355
401
|
/** List colours — used by List / ListItem / ListSubheader */
|
|
356
402
|
exports.listColors = exports.lightColors.list;
|
package/dist/tokens/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { lightColors, darkColors, colorSchemes, intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, progressColors, tabsColors, radioColors, avatarColors, skeletonColors, type IntentName, type ProminenceName, type StateName, type ColorMode, type ColorScheme, } from './colors';
|
|
1
|
+
export { lightColors, darkColors, colorSchemes, intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, menuColors, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, progressColors, tabsColors, radioColors, avatarColors, skeletonColors, sliderColors, tableColors, type IntentName, type ProminenceName, type StateName, type ColorMode, type ColorScheme, } from './colors';
|
|
2
2
|
export { fontFamily, fontWeight, label, title, body, heading, display, caption, type LabelSize, } from './typography';
|
|
3
3
|
export { iconSize, type IconSize } from './icon';
|
package/dist/tokens/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.iconSize = exports.caption = exports.display = exports.heading = exports.body = exports.title = exports.label = exports.fontWeight = exports.fontFamily = exports.skeletonColors = exports.avatarColors = exports.radioColors = exports.tabsColors = exports.progressColors = exports.toggleColors = exports.checkboxColors = exports.listColors = exports.errorTokens = exports.tagTokens = exports.selectColors = exports.overlayTokens = exports.textTokens = exports.surfaceTokens = exports.controlTokens = exports.disabledColors = exports.intentColors = exports.colorSchemes = exports.darkColors = exports.lightColors = void 0;
|
|
3
|
+
exports.iconSize = exports.caption = exports.display = exports.heading = exports.body = exports.title = exports.label = exports.fontWeight = exports.fontFamily = exports.tableColors = exports.sliderColors = exports.skeletonColors = exports.avatarColors = exports.radioColors = exports.tabsColors = exports.progressColors = exports.toggleColors = exports.checkboxColors = exports.listColors = exports.errorTokens = exports.tagTokens = exports.menuColors = exports.selectColors = exports.overlayTokens = exports.textTokens = exports.surfaceTokens = exports.controlTokens = exports.disabledColors = exports.intentColors = exports.colorSchemes = exports.darkColors = exports.lightColors = void 0;
|
|
4
4
|
var colors_1 = require("./colors");
|
|
5
5
|
Object.defineProperty(exports, "lightColors", { enumerable: true, get: function () { return colors_1.lightColors; } });
|
|
6
6
|
Object.defineProperty(exports, "darkColors", { enumerable: true, get: function () { return colors_1.darkColors; } });
|
|
@@ -12,6 +12,7 @@ Object.defineProperty(exports, "surfaceTokens", { enumerable: true, get: functio
|
|
|
12
12
|
Object.defineProperty(exports, "textTokens", { enumerable: true, get: function () { return colors_1.textTokens; } });
|
|
13
13
|
Object.defineProperty(exports, "overlayTokens", { enumerable: true, get: function () { return colors_1.overlayTokens; } });
|
|
14
14
|
Object.defineProperty(exports, "selectColors", { enumerable: true, get: function () { return colors_1.selectColors; } });
|
|
15
|
+
Object.defineProperty(exports, "menuColors", { enumerable: true, get: function () { return colors_1.menuColors; } });
|
|
15
16
|
Object.defineProperty(exports, "tagTokens", { enumerable: true, get: function () { return colors_1.tagTokens; } });
|
|
16
17
|
Object.defineProperty(exports, "errorTokens", { enumerable: true, get: function () { return colors_1.errorTokens; } });
|
|
17
18
|
Object.defineProperty(exports, "listColors", { enumerable: true, get: function () { return colors_1.listColors; } });
|
|
@@ -22,6 +23,8 @@ Object.defineProperty(exports, "tabsColors", { enumerable: true, get: function (
|
|
|
22
23
|
Object.defineProperty(exports, "radioColors", { enumerable: true, get: function () { return colors_1.radioColors; } });
|
|
23
24
|
Object.defineProperty(exports, "avatarColors", { enumerable: true, get: function () { return colors_1.avatarColors; } });
|
|
24
25
|
Object.defineProperty(exports, "skeletonColors", { enumerable: true, get: function () { return colors_1.skeletonColors; } });
|
|
26
|
+
Object.defineProperty(exports, "sliderColors", { enumerable: true, get: function () { return colors_1.sliderColors; } });
|
|
27
|
+
Object.defineProperty(exports, "tableColors", { enumerable: true, get: function () { return colors_1.tableColors; } });
|
|
25
28
|
var typography_1 = require("./typography");
|
|
26
29
|
Object.defineProperty(exports, "fontFamily", { enumerable: true, get: function () { return typography_1.fontFamily; } });
|
|
27
30
|
Object.defineProperty(exports, "fontWeight", { enumerable: true, get: function () { return typography_1.fontWeight; } });
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@castui/cast-ui",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.8.0",
|
|
4
4
|
"description": "A cross-platform design system for React Native (iOS, Android, Web) with multi-theme support.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
"sideEffects": false,
|
|
15
15
|
"files": [
|
|
16
16
|
"dist/",
|
|
17
|
+
"skills/",
|
|
17
18
|
"README.md",
|
|
18
19
|
"LICENSE"
|
|
19
20
|
],
|