@castui/cast-ui 4.4.0 → 4.5.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/dist/components/Progress/Progress.d.ts +41 -0
- package/dist/components/Progress/Progress.js +93 -0
- package/dist/components/Progress/index.d.ts +1 -0
- package/dist/components/Progress/index.js +5 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.js +5 -2
- package/dist/theme/index.d.ts +1 -1
- package/dist/theme/themes.js +18 -0
- package/dist/theme/types.d.ts +14 -0
- package/dist/tokens/colors.d.ts +8 -0
- package/dist/tokens/colors.js +5 -1
- package/dist/tokens/index.d.ts +1 -1
- package/dist/tokens/index.js +2 -1
- package/package.json +1 -1
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Progress — linear progress indicator (determinate + indeterminate).
|
|
3
|
+
*
|
|
4
|
+
* Maps 1:1 to the Figma <Progress> component:
|
|
5
|
+
* intent → neutral | brand | danger (fill colour)
|
|
6
|
+
* size → small | default | large (track thickness)
|
|
7
|
+
* value → 0–100 (determinate fill; omit for indeterminate)
|
|
8
|
+
*
|
|
9
|
+
* The track thickness is the one genuinely new token this component introduces
|
|
10
|
+
* (`progress/{size}/track-height`): it is keyed by the `size` prop and is
|
|
11
|
+
* constant across the three densities — like Badge's dot-size or Toggle's
|
|
12
|
+
* track. The pill radius is constant. Progress therefore reads no
|
|
13
|
+
* density-varying spacing.
|
|
14
|
+
*
|
|
15
|
+
* Colours: the fill binds to the intent system
|
|
16
|
+
* (`colors[intent].bold.default.bg`) so it tracks the host intent and any
|
|
17
|
+
* ThemeProvider colour overrides; the track background is the dedicated
|
|
18
|
+
* `control/progress/track/bg` semantic (cool-grey/200 light, cool-grey/700
|
|
19
|
+
* dark, matching the Toggle off-track), so it follows light/dark colour mode.
|
|
20
|
+
*
|
|
21
|
+
* When `value` is omitted (or null) the bar renders an indeterminate sweep.
|
|
22
|
+
*/
|
|
23
|
+
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
24
|
+
import type { IntentName } from '../../tokens';
|
|
25
|
+
export type ProgressSize = 'small' | 'default' | 'large';
|
|
26
|
+
export type ProgressProps = {
|
|
27
|
+
/**
|
|
28
|
+
* Completion percentage (0–100). Omit (or pass null) for an indeterminate
|
|
29
|
+
* animated sweep.
|
|
30
|
+
*/
|
|
31
|
+
value?: number | null;
|
|
32
|
+
/** Semantic intent — drives the fill colour. */
|
|
33
|
+
intent?: IntentName;
|
|
34
|
+
/** Size variant — controls track thickness. */
|
|
35
|
+
size?: ProgressSize;
|
|
36
|
+
/** Outer style — use for positioning (margin, width, alignSelf). */
|
|
37
|
+
style?: StyleProp<ViewStyle>;
|
|
38
|
+
/** Accessibility label — describes what is loading. */
|
|
39
|
+
accessibilityLabel?: string;
|
|
40
|
+
};
|
|
41
|
+
export declare function Progress({ value, intent, size, style, accessibilityLabel, }: ProgressProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Progress = Progress;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
/**
|
|
6
|
+
* Progress — linear progress indicator (determinate + indeterminate).
|
|
7
|
+
*
|
|
8
|
+
* Maps 1:1 to the Figma <Progress> component:
|
|
9
|
+
* intent → neutral | brand | danger (fill colour)
|
|
10
|
+
* size → small | default | large (track thickness)
|
|
11
|
+
* value → 0–100 (determinate fill; omit for indeterminate)
|
|
12
|
+
*
|
|
13
|
+
* The track thickness is the one genuinely new token this component introduces
|
|
14
|
+
* (`progress/{size}/track-height`): it is keyed by the `size` prop and is
|
|
15
|
+
* constant across the three densities — like Badge's dot-size or Toggle's
|
|
16
|
+
* track. The pill radius is constant. Progress therefore reads no
|
|
17
|
+
* density-varying spacing.
|
|
18
|
+
*
|
|
19
|
+
* Colours: the fill binds to the intent system
|
|
20
|
+
* (`colors[intent].bold.default.bg`) so it tracks the host intent and any
|
|
21
|
+
* ThemeProvider colour overrides; the track background is the dedicated
|
|
22
|
+
* `control/progress/track/bg` semantic (cool-grey/200 light, cool-grey/700
|
|
23
|
+
* dark, matching the Toggle off-track), so it follows light/dark colour mode.
|
|
24
|
+
*
|
|
25
|
+
* When `value` is omitted (or null) the bar renders an indeterminate sweep.
|
|
26
|
+
*/
|
|
27
|
+
const react_1 = require("react");
|
|
28
|
+
const react_native_1 = require("react-native");
|
|
29
|
+
const theme_1 = require("../../theme");
|
|
30
|
+
// ---------------------------------------------------------------------------
|
|
31
|
+
// Constants
|
|
32
|
+
// ---------------------------------------------------------------------------
|
|
33
|
+
/** Fraction of the track the indeterminate sweep bar occupies. */
|
|
34
|
+
const INDETERMINATE_BAR_FRACTION = 0.4;
|
|
35
|
+
const clamp = (n) => Math.max(0, Math.min(100, n));
|
|
36
|
+
// ---------------------------------------------------------------------------
|
|
37
|
+
// Component
|
|
38
|
+
// ---------------------------------------------------------------------------
|
|
39
|
+
function Progress({ value, intent = 'brand', size = 'default', style, accessibilityLabel = 'Loading', }) {
|
|
40
|
+
const { components, colors, scheme } = (0, theme_1.useTheme)();
|
|
41
|
+
const { trackHeight } = components.progress[size];
|
|
42
|
+
const borderRadius = components.progress.borderRadius;
|
|
43
|
+
const fill = colors[intent].bold.default.bg;
|
|
44
|
+
const trackBg = scheme.progress.track;
|
|
45
|
+
const isIndeterminate = value === undefined || value === null;
|
|
46
|
+
const pct = isIndeterminate ? 0 : clamp(value);
|
|
47
|
+
// Track width is needed to drive the indeterminate translateX in px
|
|
48
|
+
// (useNativeDriver can't animate a percentage width).
|
|
49
|
+
const [trackWidth, setTrackWidth] = (0, react_1.useState)(0);
|
|
50
|
+
const onLayout = (e) => setTrackWidth(e.nativeEvent.layout.width);
|
|
51
|
+
const slide = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
|
|
52
|
+
(0, react_1.useEffect)(() => {
|
|
53
|
+
if (!isIndeterminate || trackWidth === 0)
|
|
54
|
+
return;
|
|
55
|
+
slide.setValue(0);
|
|
56
|
+
const loop = react_native_1.Animated.loop(react_native_1.Animated.timing(slide, {
|
|
57
|
+
toValue: 1,
|
|
58
|
+
duration: 1200,
|
|
59
|
+
easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
|
|
60
|
+
useNativeDriver: true,
|
|
61
|
+
}));
|
|
62
|
+
loop.start();
|
|
63
|
+
return () => loop.stop();
|
|
64
|
+
}, [isIndeterminate, trackWidth, slide]);
|
|
65
|
+
const barWidth = trackWidth * INDETERMINATE_BAR_FRACTION;
|
|
66
|
+
const translateX = slide.interpolate({
|
|
67
|
+
inputRange: [0, 1],
|
|
68
|
+
outputRange: [-barWidth, trackWidth],
|
|
69
|
+
});
|
|
70
|
+
return ((0, jsx_runtime_1.jsx)(react_native_1.View, { onLayout: onLayout, accessibilityRole: "progressbar", accessibilityLabel: accessibilityLabel, accessibilityValue: isIndeterminate ? undefined : { min: 0, max: 100, now: Math.round(pct) }, accessibilityState: isIndeterminate ? { busy: true } : undefined, style: [
|
|
71
|
+
{
|
|
72
|
+
width: '100%',
|
|
73
|
+
height: trackHeight,
|
|
74
|
+
borderRadius,
|
|
75
|
+
backgroundColor: trackBg,
|
|
76
|
+
overflow: 'hidden',
|
|
77
|
+
},
|
|
78
|
+
style,
|
|
79
|
+
], children: isIndeterminate ? ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: {
|
|
80
|
+
position: 'absolute',
|
|
81
|
+
top: 0,
|
|
82
|
+
bottom: 0,
|
|
83
|
+
width: barWidth,
|
|
84
|
+
borderRadius,
|
|
85
|
+
backgroundColor: fill,
|
|
86
|
+
transform: [{ translateX }],
|
|
87
|
+
} })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
|
|
88
|
+
width: `${pct}%`,
|
|
89
|
+
height: '100%',
|
|
90
|
+
borderRadius,
|
|
91
|
+
backgroundColor: fill,
|
|
92
|
+
} })) }));
|
|
93
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Progress, type ProgressProps, type ProgressSize } from './Progress';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { lightColors, darkColors, colorSchemes, intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, radioColors, avatarColors, skeletonColors, fontFamily, fontWeight, label, title, body, heading, display, caption, type IntentName, type ProminenceName, type StateName, type ColorMode, type ColorScheme, type LabelSize, iconSize, type IconSize, } from './tokens';
|
|
2
|
-
export { ThemeProvider, useTheme, themes, type Theme, type ThemeProviderProps, type DensityTheme, type ComponentTokens, type ButtonSizeTokens, type ButtonThemeTokens, type DialogSizeTokens, type DialogThemeTokens, type InputSizeTokens, type InputThemeTokens, type SelectContentTokens, type SelectOptionTokens, type SelectGroupTokens, type SelectSeparatorTokens, type SelectThemeTokens, type ListItemTokens, type ListSubheaderTokens, type ListThemeTokens, type CheckboxSizeTokens, type CheckboxThemeTokens, type AlertSizeTokens, type AlertThemeTokens, type ToggleSizeTokens, type ToggleThemeTokens, type CardSizeTokens, type CardThemeTokens, type BadgeSizeTokens, type BadgeThemeTokens, type RadioSizeTokens, type RadioThemeTokens, type ToastSizeTokens, type ToastThemeTokens, type ChipSizeTokens, type ChipThemeTokens, type AvatarSizeTokens, type AvatarThemeTokens, type PopoverSizeTokens, type PopoverThemeTokens, type TooltipSizeTokens, type TooltipThemeTokens, type DeepPartial, } from './theme';
|
|
1
|
+
export { lightColors, darkColors, colorSchemes, intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, progressColors, radioColors, avatarColors, skeletonColors, fontFamily, fontWeight, label, title, body, heading, display, caption, type IntentName, type ProminenceName, type StateName, type ColorMode, type ColorScheme, type LabelSize, iconSize, type IconSize, } from './tokens';
|
|
2
|
+
export { ThemeProvider, useTheme, themes, type Theme, type ThemeProviderProps, type DensityTheme, type ComponentTokens, type ButtonSizeTokens, type ButtonThemeTokens, type DialogSizeTokens, type DialogThemeTokens, type InputSizeTokens, type InputThemeTokens, type SelectContentTokens, type SelectOptionTokens, type SelectGroupTokens, type SelectSeparatorTokens, type SelectThemeTokens, type ListItemTokens, type ListSubheaderTokens, type ListThemeTokens, type CheckboxSizeTokens, type CheckboxThemeTokens, type AlertSizeTokens, type AlertThemeTokens, type ToggleSizeTokens, type ToggleThemeTokens, type CardSizeTokens, type CardThemeTokens, type BadgeSizeTokens, type BadgeThemeTokens, type RadioSizeTokens, type RadioThemeTokens, type ToastSizeTokens, type ToastThemeTokens, type ChipSizeTokens, type ChipThemeTokens, type AvatarSizeTokens, type AvatarThemeTokens, type PopoverSizeTokens, type PopoverThemeTokens, type TooltipSizeTokens, type TooltipThemeTokens, type ProgressSizeTokens, type ProgressThemeTokens, type DeepPartial, } from './theme';
|
|
3
3
|
export { Button, type ButtonProps, type ButtonSize } from './components/Button';
|
|
4
4
|
export { Icon, type IconProps } from './components/Icon';
|
|
5
5
|
export { Dialog, DialogContent, type DialogProps, type DialogContentProps, type DialogAction, type DialogSize, } from './components/Dialog';
|
|
@@ -20,3 +20,4 @@ export { Popover, type PopoverProps, type PopoverSize, type PopoverDirection, }
|
|
|
20
20
|
export { Skeleton, type SkeletonProps, type SkeletonShape, } from './components/Skeleton';
|
|
21
21
|
export { Tooltip, type TooltipProps, type TooltipSize, type TooltipDirection, } from './components/Tooltip';
|
|
22
22
|
export { Text, type TextProps, type TextType } from './components/Text';
|
|
23
|
+
export { Progress, type ProgressProps, type ProgressSize } from './components/Progress';
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
4
|
-
exports.Text = exports.Tooltip = exports.Skeleton = exports.Popover = exports.Avatar = exports.Divider = exports.Chip = exports.Toast = exports.RadioGroup = exports.Radio = void 0;
|
|
3
|
+
exports.Badge = exports.Card = exports.Toggle = exports.Alert = exports.Checkbox = exports.ListDivider = exports.ListSubheader = exports.ListItem = exports.List = exports.SelectDropdown = exports.SelectTag = exports.SelectSeparator = exports.SelectGroup = exports.SelectOption = exports.Select = exports.DialogContent = exports.Dialog = exports.Icon = exports.Button = exports.themes = exports.useTheme = exports.ThemeProvider = 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.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;
|
|
4
|
+
exports.Progress = exports.Text = exports.Tooltip = exports.Skeleton = exports.Popover = exports.Avatar = exports.Divider = exports.Chip = exports.Toast = exports.RadioGroup = exports.Radio = exports.Input = void 0;
|
|
5
5
|
// Cast UI — Cross-platform design system component library
|
|
6
6
|
//
|
|
7
7
|
// Tokens
|
|
@@ -21,6 +21,7 @@ Object.defineProperty(exports, "errorTokens", { enumerable: true, get: function
|
|
|
21
21
|
Object.defineProperty(exports, "listColors", { enumerable: true, get: function () { return tokens_1.listColors; } });
|
|
22
22
|
Object.defineProperty(exports, "checkboxColors", { enumerable: true, get: function () { return tokens_1.checkboxColors; } });
|
|
23
23
|
Object.defineProperty(exports, "toggleColors", { enumerable: true, get: function () { return tokens_1.toggleColors; } });
|
|
24
|
+
Object.defineProperty(exports, "progressColors", { enumerable: true, get: function () { return tokens_1.progressColors; } });
|
|
24
25
|
Object.defineProperty(exports, "radioColors", { enumerable: true, get: function () { return tokens_1.radioColors; } });
|
|
25
26
|
Object.defineProperty(exports, "avatarColors", { enumerable: true, get: function () { return tokens_1.avatarColors; } });
|
|
26
27
|
Object.defineProperty(exports, "skeletonColors", { enumerable: true, get: function () { return tokens_1.skeletonColors; } });
|
|
@@ -89,3 +90,5 @@ var Tooltip_1 = require("./components/Tooltip");
|
|
|
89
90
|
Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
|
|
90
91
|
var Text_1 = require("./components/Text");
|
|
91
92
|
Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
|
|
93
|
+
var Progress_1 = require("./components/Progress");
|
|
94
|
+
Object.defineProperty(exports, "Progress", { enumerable: true, get: function () { return Progress_1.Progress; } });
|
package/dist/theme/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { ThemeProvider, useTheme, type ThemeProviderProps, type Theme } from './ThemeContext';
|
|
2
2
|
export { themes } from './themes';
|
|
3
|
-
export type { DensityTheme, ComponentTokens, ButtonSizeTokens, ButtonThemeTokens, DialogSizeTokens, DialogThemeTokens, InputSizeTokens, InputThemeTokens, SelectContentTokens, SelectOptionTokens, SelectGroupTokens, SelectSeparatorTokens, SelectThemeTokens, ListItemTokens, ListSubheaderTokens, ListThemeTokens, CheckboxSizeTokens, CheckboxThemeTokens, AlertSizeTokens, AlertThemeTokens, ToggleSizeTokens, ToggleThemeTokens, CardSizeTokens, CardThemeTokens, BadgeSizeTokens, BadgeThemeTokens, RadioSizeTokens, RadioThemeTokens, ToastSizeTokens, ToastThemeTokens, ChipSizeTokens, ChipThemeTokens, AvatarSizeTokens, AvatarThemeTokens, PopoverSizeTokens, PopoverThemeTokens, TooltipSizeTokens, TooltipThemeTokens, DeepPartial, } from './types';
|
|
3
|
+
export type { DensityTheme, ComponentTokens, ButtonSizeTokens, ButtonThemeTokens, DialogSizeTokens, DialogThemeTokens, InputSizeTokens, InputThemeTokens, SelectContentTokens, SelectOptionTokens, SelectGroupTokens, SelectSeparatorTokens, SelectThemeTokens, ListItemTokens, ListSubheaderTokens, ListThemeTokens, CheckboxSizeTokens, CheckboxThemeTokens, AlertSizeTokens, AlertThemeTokens, ToggleSizeTokens, ToggleThemeTokens, CardSizeTokens, CardThemeTokens, BadgeSizeTokens, BadgeThemeTokens, RadioSizeTokens, RadioThemeTokens, ToastSizeTokens, ToastThemeTokens, ChipSizeTokens, ChipThemeTokens, AvatarSizeTokens, AvatarThemeTokens, PopoverSizeTokens, PopoverThemeTokens, TooltipSizeTokens, TooltipThemeTokens, ProgressSizeTokens, ProgressThemeTokens, DeepPartial, } from './types';
|
package/dist/theme/themes.js
CHANGED
|
@@ -106,6 +106,12 @@ exports.themes = {
|
|
|
106
106
|
small: { paddingX: 4, paddingY: 1 },
|
|
107
107
|
default: { paddingX: 6, paddingY: 2 },
|
|
108
108
|
},
|
|
109
|
+
progress: {
|
|
110
|
+
borderRadius: 9999,
|
|
111
|
+
small: { trackHeight: 4 },
|
|
112
|
+
default: { trackHeight: 8 },
|
|
113
|
+
large: { trackHeight: 12 },
|
|
114
|
+
},
|
|
109
115
|
},
|
|
110
116
|
default: {
|
|
111
117
|
dialog: {
|
|
@@ -200,6 +206,12 @@ exports.themes = {
|
|
|
200
206
|
small: { paddingX: 6, paddingY: 2 },
|
|
201
207
|
default: { paddingX: 8, paddingY: 4 },
|
|
202
208
|
},
|
|
209
|
+
progress: {
|
|
210
|
+
borderRadius: 9999,
|
|
211
|
+
small: { trackHeight: 4 },
|
|
212
|
+
default: { trackHeight: 8 },
|
|
213
|
+
large: { trackHeight: 12 },
|
|
214
|
+
},
|
|
203
215
|
},
|
|
204
216
|
comfortable: {
|
|
205
217
|
dialog: {
|
|
@@ -294,5 +306,11 @@ exports.themes = {
|
|
|
294
306
|
small: { paddingX: 8, paddingY: 4 },
|
|
295
307
|
default: { paddingX: 10, paddingY: 6 },
|
|
296
308
|
},
|
|
309
|
+
progress: {
|
|
310
|
+
borderRadius: 9999,
|
|
311
|
+
small: { trackHeight: 4 },
|
|
312
|
+
default: { trackHeight: 8 },
|
|
313
|
+
large: { trackHeight: 12 },
|
|
314
|
+
},
|
|
297
315
|
},
|
|
298
316
|
};
|
package/dist/theme/types.d.ts
CHANGED
|
@@ -242,6 +242,19 @@ export type TooltipThemeTokens = {
|
|
|
242
242
|
small: TooltipSizeTokens;
|
|
243
243
|
default: TooltipSizeTokens;
|
|
244
244
|
};
|
|
245
|
+
/** Progress track thickness for one size variant (constant across density,
|
|
246
|
+
* keyed by the `size` prop like Badge dot-size / Toggle track). */
|
|
247
|
+
export type ProgressSizeTokens = {
|
|
248
|
+
trackHeight: number;
|
|
249
|
+
};
|
|
250
|
+
/** Progress tokens — track thickness varies by the `size` prop; the pill
|
|
251
|
+
* radius is constant. No density-varying spacing. */
|
|
252
|
+
export type ProgressThemeTokens = {
|
|
253
|
+
borderRadius: number;
|
|
254
|
+
small: ProgressSizeTokens;
|
|
255
|
+
default: ProgressSizeTokens;
|
|
256
|
+
large: ProgressSizeTokens;
|
|
257
|
+
};
|
|
245
258
|
/**
|
|
246
259
|
* Component-level tokens that vary by density theme.
|
|
247
260
|
* Extended as new components are added to the library.
|
|
@@ -263,6 +276,7 @@ export type ComponentTokens = {
|
|
|
263
276
|
avatar: AvatarThemeTokens;
|
|
264
277
|
popover: PopoverThemeTokens;
|
|
265
278
|
tooltip: TooltipThemeTokens;
|
|
279
|
+
progress: ProgressThemeTokens;
|
|
266
280
|
};
|
|
267
281
|
/** Utility type for partial overrides at any depth */
|
|
268
282
|
export type DeepPartial<T> = {
|
package/dist/tokens/colors.d.ts
CHANGED
|
@@ -188,6 +188,10 @@ export type ColorScheme = {
|
|
|
188
188
|
disabled: string;
|
|
189
189
|
};
|
|
190
190
|
};
|
|
191
|
+
/** Progress colours — track background (the fill uses the intent system) */
|
|
192
|
+
progress: {
|
|
193
|
+
track: string;
|
|
194
|
+
};
|
|
191
195
|
/** Avatar colours — initials/icon fallback surface + foreground */
|
|
192
196
|
avatar: {
|
|
193
197
|
bg: string;
|
|
@@ -348,6 +352,10 @@ export declare const toggleColors: {
|
|
|
348
352
|
disabled: string;
|
|
349
353
|
};
|
|
350
354
|
};
|
|
355
|
+
/** Progress colours — track background (fill comes from the intent system) */
|
|
356
|
+
export declare const progressColors: {
|
|
357
|
+
track: string;
|
|
358
|
+
};
|
|
351
359
|
/** Avatar colours — initials/icon fallback surface + foreground */
|
|
352
360
|
export declare const avatarColors: {
|
|
353
361
|
bg: string;
|
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.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.skeletonColors = exports.avatarColors = 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;
|
|
19
19
|
// ---------------------------------------------------------------------------
|
|
20
20
|
// Light scheme — semantic-light mode
|
|
21
21
|
// ---------------------------------------------------------------------------
|
|
@@ -139,6 +139,7 @@ exports.lightColors = {
|
|
|
139
139
|
thumb: '#FFFFFF',
|
|
140
140
|
label: { default: '#374151', disabled: '#9CA3AF' },
|
|
141
141
|
},
|
|
142
|
+
progress: { track: '#E5E7EB' }, // control/progress/track/bg → cool-grey/200
|
|
142
143
|
avatar: { bg: '#F3F4F6', fg: '#374151' },
|
|
143
144
|
skeleton: { bg: '#F3F4F6', highlight: '#E5E7EB' },
|
|
144
145
|
list: {
|
|
@@ -280,6 +281,7 @@ exports.darkColors = {
|
|
|
280
281
|
thumb: '#FFFFFF',
|
|
281
282
|
label: { default: '#E5E7EB', disabled: '#6B7280' },
|
|
282
283
|
},
|
|
284
|
+
progress: { track: '#374151' }, // control/progress/track/bg → cool-grey/700
|
|
283
285
|
avatar: { bg: '#374151', fg: '#E5E7EB' },
|
|
284
286
|
skeleton: { bg: '#1F2937', highlight: '#374151' },
|
|
285
287
|
list: {
|
|
@@ -338,6 +340,8 @@ exports.checkboxColors = exports.lightColors.checkbox;
|
|
|
338
340
|
exports.radioColors = exports.lightColors.radio;
|
|
339
341
|
/** Toggle colours — track (on/off/disabled) + thumb + label */
|
|
340
342
|
exports.toggleColors = exports.lightColors.toggle;
|
|
343
|
+
/** Progress colours — track background (fill comes from the intent system) */
|
|
344
|
+
exports.progressColors = exports.lightColors.progress;
|
|
341
345
|
/** Avatar colours — initials/icon fallback surface + foreground */
|
|
342
346
|
exports.avatarColors = exports.lightColors.avatar;
|
|
343
347
|
/** Skeleton colours — placeholder surface for loading states */
|
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, 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, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, progressColors, radioColors, avatarColors, skeletonColors, 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.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.skeletonColors = exports.avatarColors = exports.radioColors = 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;
|
|
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; } });
|
|
@@ -17,6 +17,7 @@ Object.defineProperty(exports, "errorTokens", { enumerable: true, get: function
|
|
|
17
17
|
Object.defineProperty(exports, "listColors", { enumerable: true, get: function () { return colors_1.listColors; } });
|
|
18
18
|
Object.defineProperty(exports, "checkboxColors", { enumerable: true, get: function () { return colors_1.checkboxColors; } });
|
|
19
19
|
Object.defineProperty(exports, "toggleColors", { enumerable: true, get: function () { return colors_1.toggleColors; } });
|
|
20
|
+
Object.defineProperty(exports, "progressColors", { enumerable: true, get: function () { return colors_1.progressColors; } });
|
|
20
21
|
Object.defineProperty(exports, "radioColors", { enumerable: true, get: function () { return colors_1.radioColors; } });
|
|
21
22
|
Object.defineProperty(exports, "avatarColors", { enumerable: true, get: function () { return colors_1.avatarColors; } });
|
|
22
23
|
Object.defineProperty(exports, "skeletonColors", { enumerable: true, get: function () { return colors_1.skeletonColors; } });
|
package/package.json
CHANGED