@castui/cast-ui 3.1.0 → 4.0.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/Button/Button.d.ts.map +1 -1
- package/dist/components/Button/Button.js +3 -13
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Dialog/Dialog.d.ts +57 -0
- package/dist/components/Dialog/Dialog.d.ts.map +1 -0
- package/dist/components/Dialog/Dialog.js +104 -0
- package/dist/components/Dialog/Dialog.js.map +1 -0
- package/dist/components/Dialog/index.d.ts +2 -0
- package/dist/components/Dialog/index.d.ts.map +1 -0
- package/dist/components/Dialog/index.js +2 -0
- package/dist/components/Dialog/index.js.map +1 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/dist/theme/index.d.ts +1 -1
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/themes.d.ts.map +1 -1
- package/dist/theme/themes.js +15 -18
- package/dist/theme/themes.js.map +1 -1
- package/dist/theme/types.d.ts +13 -2
- package/dist/theme/types.d.ts.map +1 -1
- package/dist/tokens/colors.d.ts +21 -1
- package/dist/tokens/colors.d.ts.map +1 -1
- package/dist/tokens/colors.js +21 -3
- package/dist/tokens/colors.js.map +1 -1
- package/dist/tokens/index.d.ts +2 -2
- package/dist/tokens/index.d.ts.map +1 -1
- package/dist/tokens/index.js +2 -2
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/typography.d.ts +6 -2
- package/dist/tokens/typography.d.ts.map +1 -1
- package/dist/tokens/typography.js +11 -1
- package/dist/tokens/typography.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,qBAAqB,EAC3B,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAO/D,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEvD,MAAM,MAAM,WAAW,GAAG;IACxB,6BAA6B;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,kEAAkE;IAClE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACxC,qBAAqB;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC7C,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,yEAAyE;IACzE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAoBF,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,MAAkB,EAClB,UAAsB,EACtB,IAAgB,EAChB,QAAgB,EAChB,WAAW,EACX,YAAY,EACZ,OAAO,EACP,KAAK,EACL,kBAAkB,GACnB,EAAE,WAAW,2CA0Fb"}
|
|
@@ -12,7 +12,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
12
12
|
* Typography uses the label scale (sm/md/lg) matched to the button size.
|
|
13
13
|
*/
|
|
14
14
|
import { useState, useCallback } from 'react';
|
|
15
|
-
import { Pressable, Text, View,
|
|
15
|
+
import { Pressable, Text, View, } from 'react-native';
|
|
16
16
|
import { useTheme } from '../../theme';
|
|
17
17
|
import { fontFamily, fontWeight, label, controlTokens } from '../../tokens';
|
|
18
18
|
import { Icon } from '../Icon';
|
|
@@ -32,7 +32,6 @@ const ICON_SIZE = 16;
|
|
|
32
32
|
// ---------------------------------------------------------------------------
|
|
33
33
|
export function Button({ children, intent = 'neutral', prominence = 'default', size = 'default', disabled = false, leadingIcon, trailingIcon, onPress, style, accessibilityLabel, }) {
|
|
34
34
|
const { components, colors } = useTheme();
|
|
35
|
-
const [isFocused, setIsFocused] = useState(false);
|
|
36
35
|
const [isHovered, setIsHovered] = useState(false);
|
|
37
36
|
// Resolve tokens for current size + density
|
|
38
37
|
const sizeTokens = components.button[size];
|
|
@@ -53,7 +52,7 @@ export function Button({ children, intent = 'neutral', prominence = 'default', s
|
|
|
53
52
|
return intentClrs[prominence].hover;
|
|
54
53
|
return intentClrs[prominence].default;
|
|
55
54
|
}, [disabled, intentClrs, prominence]);
|
|
56
|
-
return (_jsx(Pressable, { onPress: onPress, disabled: disabled,
|
|
55
|
+
return (_jsx(Pressable, { onPress: onPress, disabled: disabled, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), accessibilityRole: "button", accessibilityLabel: accessibilityLabel || children, accessibilityState: { disabled }, style: style, children: ({ pressed }) => {
|
|
57
56
|
const stateColors = getStateColors(pressed, isHovered);
|
|
58
57
|
const containerStyle = {
|
|
59
58
|
flexDirection: 'row',
|
|
@@ -68,19 +67,10 @@ export function Button({ children, intent = 'neutral', prominence = 'default', s
|
|
|
68
67
|
borderColor: stateColors.border,
|
|
69
68
|
backgroundColor: stateColors.bg,
|
|
70
69
|
};
|
|
71
|
-
// Web-only: focus ring via CSS outline
|
|
72
|
-
const focusStyle = isFocused && !disabled && Platform.OS === 'web'
|
|
73
|
-
? {
|
|
74
|
-
outlineWidth: sizeTokens.focusRingWidth,
|
|
75
|
-
outlineColor: intentClrs.ringColour,
|
|
76
|
-
outlineStyle: 'solid',
|
|
77
|
-
outlineOffset: sizeTokens.focusRingOffset,
|
|
78
|
-
}
|
|
79
|
-
: {};
|
|
80
70
|
// Resolve icon props — strings become <Icon> with auto-matched colour
|
|
81
71
|
const resolvedLeading = typeof leadingIcon === 'string' ? (_jsx(Icon, { name: leadingIcon, size: ICON_SIZE, color: stateColors.fg })) : (leadingIcon);
|
|
82
72
|
const resolvedTrailing = typeof trailingIcon === 'string' ? (_jsx(Icon, { name: trailingIcon, size: ICON_SIZE, color: stateColors.fg })) : (trailingIcon);
|
|
83
|
-
return (_jsxs(View, { style:
|
|
73
|
+
return (_jsxs(View, { style: containerStyle, children: [resolvedLeading, _jsx(Text, { style: {
|
|
84
74
|
fontFamily: fontFamily.sans,
|
|
85
75
|
fontWeight: fontWeight.medium,
|
|
86
76
|
fontSize: labelTokens.fontSize,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;GAWG;AAEH,OAAc,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EACL,SAAS,EACT,IAAI,EACJ,IAAI,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Dialog — modal overlay for focused tasks, confirmations, and alerts.
|
|
3
|
+
*
|
|
4
|
+
* Maps to the Figma <Dialog> component:
|
|
5
|
+
* size → small | default | large
|
|
6
|
+
*
|
|
7
|
+
* Structure: scrim backdrop → card (icon + title + description + slot + actions)
|
|
8
|
+
* Surface styling uses shared overlay tokens (bg, border, radius, shadow).
|
|
9
|
+
* Spacing tokens come from the density theme.
|
|
10
|
+
*
|
|
11
|
+
* Exports:
|
|
12
|
+
* Dialog — full modal (backdrop + card)
|
|
13
|
+
* DialogContent — just the card, for inline use or custom overlays
|
|
14
|
+
*/
|
|
15
|
+
import React from 'react';
|
|
16
|
+
import { type ViewStyle, type StyleProp } from 'react-native';
|
|
17
|
+
export type DialogSize = 'small' | 'default' | 'large';
|
|
18
|
+
export type DialogAction = {
|
|
19
|
+
/** Button label text. */
|
|
20
|
+
label: string;
|
|
21
|
+
/** Press handler. */
|
|
22
|
+
onPress: () => void;
|
|
23
|
+
};
|
|
24
|
+
export type DialogContentProps = {
|
|
25
|
+
/** Dialog title — always visible. */
|
|
26
|
+
title: string;
|
|
27
|
+
/** Supporting text below the title. */
|
|
28
|
+
description?: string;
|
|
29
|
+
/** Header icon — Material Symbols name string or ReactNode. */
|
|
30
|
+
icon?: string | React.ReactNode;
|
|
31
|
+
/** Size variant — controls padding, gap, typography, icon size, and width. */
|
|
32
|
+
size?: DialogSize;
|
|
33
|
+
/** Custom content between the description and actions. */
|
|
34
|
+
children?: React.ReactNode;
|
|
35
|
+
/** Primary action button (brand/bold). Rendered on the right. */
|
|
36
|
+
primaryAction?: DialogAction;
|
|
37
|
+
/** Secondary action button (neutral/default). Rendered on the left. */
|
|
38
|
+
secondaryAction?: DialogAction;
|
|
39
|
+
/** Style override for the card. */
|
|
40
|
+
style?: StyleProp<ViewStyle>;
|
|
41
|
+
/** Accessibility label — falls back to title if not provided. */
|
|
42
|
+
accessibilityLabel?: string;
|
|
43
|
+
};
|
|
44
|
+
export type DialogProps = DialogContentProps & {
|
|
45
|
+
/** Controls visibility. */
|
|
46
|
+
open: boolean;
|
|
47
|
+
/** Called when the backdrop is pressed or the dialog requests close. */
|
|
48
|
+
onClose?: () => void;
|
|
49
|
+
};
|
|
50
|
+
/**
|
|
51
|
+
* The dialog card rendered inline — no modal, no backdrop.
|
|
52
|
+
* Use this for static display (e.g., Storybook visual stories)
|
|
53
|
+
* or when building custom overlay implementations.
|
|
54
|
+
*/
|
|
55
|
+
export declare function DialogContent({ title: titleText, description, icon, size, children, primaryAction, secondaryAction, style, accessibilityLabel, }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
|
|
56
|
+
export declare function Dialog({ open, onClose, ...contentProps }: DialogProps): import("react/jsx-runtime").JSX.Element;
|
|
57
|
+
//# sourceMappingURL=Dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAmBtB,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEvD,MAAM,MAAM,YAAY,GAAG;IACzB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,8EAA8E;IAC9E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iEAAiE;IACjE,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,uEAAuE;IACvE,eAAe,CAAC,EAAE,YAAY,CAAC;IAC/B,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,kBAAkB,GAAG;IAC7C,2BAA2B;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAiDF;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EAAE,SAAS,EAChB,WAAW,EACX,IAAI,EACJ,IAAgB,EAChB,QAAQ,EACR,aAAa,EACb,eAAe,EACf,KAAK,EACL,kBAAkB,GACnB,EAAE,kBAAkB,2CA2GpB;AAMD,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,OAAO,EACP,GAAG,YAAY,EAChB,EAAE,WAAW,2CA6Bb"}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Modal, Pressable, View, Text, Platform, } from 'react-native';
|
|
3
|
+
import { useTheme } from '../../theme';
|
|
4
|
+
import { Button } from '../Button';
|
|
5
|
+
import { Icon } from '../Icon';
|
|
6
|
+
import { fontFamily, fontWeight, title, body, surfaceTokens, textTokens, overlayTokens, controlTokens, } from '../../tokens';
|
|
7
|
+
// ---------------------------------------------------------------------------
|
|
8
|
+
// Constants
|
|
9
|
+
// ---------------------------------------------------------------------------
|
|
10
|
+
/** Maps dialog size → typography scale key */
|
|
11
|
+
const TYPO_SCALE = {
|
|
12
|
+
small: 'sm',
|
|
13
|
+
default: 'md',
|
|
14
|
+
large: 'lg',
|
|
15
|
+
};
|
|
16
|
+
/** Maps dialog size → button size */
|
|
17
|
+
const BUTTON_SIZE = {
|
|
18
|
+
small: 'small',
|
|
19
|
+
default: 'default',
|
|
20
|
+
large: 'large',
|
|
21
|
+
};
|
|
22
|
+
/** Fixed widths per dialog size (from Figma spec) */
|
|
23
|
+
const DIALOG_WIDTH = {
|
|
24
|
+
small: 360,
|
|
25
|
+
default: 480,
|
|
26
|
+
large: 600,
|
|
27
|
+
};
|
|
28
|
+
/** Internal spacing constants (semantic tokens, constant across densities) */
|
|
29
|
+
const HEADER_ICON_GAP = 8; // space/5
|
|
30
|
+
const TITLE_DESC_GAP = 2; // space/2
|
|
31
|
+
/** Shadow for web — matches Figma shadow/lg */
|
|
32
|
+
const SHADOW_WEB = {
|
|
33
|
+
boxShadow: '0px 4px 6px rgba(0,0,0,0.04), 0px 10px 15px rgba(0,0,0,0.08)',
|
|
34
|
+
};
|
|
35
|
+
/** Shadow for native */
|
|
36
|
+
const SHADOW_NATIVE = {
|
|
37
|
+
shadowColor: '#000000',
|
|
38
|
+
shadowOffset: { width: 0, height: 10 },
|
|
39
|
+
shadowOpacity: 0.08,
|
|
40
|
+
shadowRadius: 15,
|
|
41
|
+
elevation: 8,
|
|
42
|
+
};
|
|
43
|
+
// ---------------------------------------------------------------------------
|
|
44
|
+
// DialogContent — the card, without modal/backdrop
|
|
45
|
+
// ---------------------------------------------------------------------------
|
|
46
|
+
/**
|
|
47
|
+
* The dialog card rendered inline — no modal, no backdrop.
|
|
48
|
+
* Use this for static display (e.g., Storybook visual stories)
|
|
49
|
+
* or when building custom overlay implementations.
|
|
50
|
+
*/
|
|
51
|
+
export function DialogContent({ title: titleText, description, icon, size = 'default', children, primaryAction, secondaryAction, style, accessibilityLabel, }) {
|
|
52
|
+
const { components, colors } = useTheme();
|
|
53
|
+
const sizeTokens = components.dialog[size];
|
|
54
|
+
const titleTokens = title[TYPO_SCALE[size]];
|
|
55
|
+
const bodyTokens = body[TYPO_SCALE[size]];
|
|
56
|
+
const buttonSize = BUTTON_SIZE[size];
|
|
57
|
+
const fgColor = colors.neutral.default.default.fg;
|
|
58
|
+
const resolvedIcon = typeof icon === 'string' ? (_jsx(Icon, { name: icon, size: sizeTokens.iconSize, color: fgColor })) : (icon);
|
|
59
|
+
const hasActions = primaryAction || secondaryAction;
|
|
60
|
+
return (_jsxs(View, { accessibilityRole: "alert", accessibilityLabel: accessibilityLabel || titleText, style: [
|
|
61
|
+
{
|
|
62
|
+
width: DIALOG_WIDTH[size],
|
|
63
|
+
maxWidth: '100%',
|
|
64
|
+
backgroundColor: surfaceTokens.overlay.bg,
|
|
65
|
+
borderWidth: controlTokens.borderWidth,
|
|
66
|
+
borderColor: surfaceTokens.overlay.border,
|
|
67
|
+
borderRadius: surfaceTokens.overlay.borderRadius,
|
|
68
|
+
padding: sizeTokens.padding,
|
|
69
|
+
gap: sizeTokens.gap,
|
|
70
|
+
...(Platform.OS === 'web' ? SHADOW_WEB : SHADOW_NATIVE),
|
|
71
|
+
},
|
|
72
|
+
style,
|
|
73
|
+
], children: [_jsxs(View, { style: { gap: TITLE_DESC_GAP }, children: [_jsxs(View, { style: { gap: HEADER_ICON_GAP }, children: [resolvedIcon, _jsx(Text, { accessibilityRole: "header", style: {
|
|
74
|
+
fontFamily: fontFamily.sans,
|
|
75
|
+
fontWeight: fontWeight.medium,
|
|
76
|
+
fontSize: titleTokens.fontSize,
|
|
77
|
+
lineHeight: titleTokens.lineHeight,
|
|
78
|
+
letterSpacing: titleTokens.letterSpacing,
|
|
79
|
+
color: fgColor,
|
|
80
|
+
}, children: titleText })] }), description ? (_jsx(Text, { style: {
|
|
81
|
+
fontFamily: fontFamily.sans,
|
|
82
|
+
fontWeight: fontWeight.regular,
|
|
83
|
+
fontSize: bodyTokens.fontSize,
|
|
84
|
+
lineHeight: bodyTokens.lineHeight,
|
|
85
|
+
letterSpacing: bodyTokens.letterSpacing,
|
|
86
|
+
color: textTokens.description,
|
|
87
|
+
}, children: description })) : null] }), children, hasActions ? (_jsxs(View, { style: {
|
|
88
|
+
flexDirection: 'row',
|
|
89
|
+
justifyContent: 'flex-end',
|
|
90
|
+
gap: sizeTokens.gap,
|
|
91
|
+
}, children: [secondaryAction ? (_jsx(Button, { intent: "neutral", prominence: "default", size: buttonSize, onPress: secondaryAction.onPress, children: secondaryAction.label })) : null, primaryAction ? (_jsx(Button, { intent: "brand", prominence: "bold", size: buttonSize, onPress: primaryAction.onPress, children: primaryAction.label })) : null] })) : null] }));
|
|
92
|
+
}
|
|
93
|
+
// ---------------------------------------------------------------------------
|
|
94
|
+
// Dialog — full modal with backdrop
|
|
95
|
+
// ---------------------------------------------------------------------------
|
|
96
|
+
export function Dialog({ open, onClose, ...contentProps }) {
|
|
97
|
+
return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: onClose, children: _jsx(Pressable, { onPress: onClose, accessibilityRole: "button", accessibilityLabel: "Close dialog", style: {
|
|
98
|
+
flex: 1,
|
|
99
|
+
backgroundColor: `rgba(0, 0, 0, ${overlayTokens.scrimOpacity})`,
|
|
100
|
+
justifyContent: 'center',
|
|
101
|
+
alignItems: 'center',
|
|
102
|
+
}, children: _jsx(Pressable, { onPress: (e) => e.stopPropagation(), accessibilityRole: "none", style: { maxWidth: '90%' }, children: _jsx(DialogContent, { ...contentProps }) }) }) }));
|
|
103
|
+
}
|
|
104
|
+
//# sourceMappingURL=Dialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAgBA,OAAO,EACL,KAAK,EACL,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,QAAQ,GAGT,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EACL,UAAU,EACV,UAAU,EACV,KAAK,EACL,IAAI,EACJ,aAAa,EACb,UAAU,EACV,aAAa,EACb,aAAa,GACd,MAAM,cAAc,CAAC;AA2CtB,8EAA8E;AAC9E,YAAY;AACZ,8EAA8E;AAE9E,8CAA8C;AAC9C,MAAM,UAAU,GAA2C;IACzD,KAAK,EAAE,IAAI;IACX,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,IAAI;CACZ,CAAC;AAEF,qCAAqC;AACrC,MAAM,WAAW,GAAsD;IACrE,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,qDAAqD;AACrD,MAAM,YAAY,GAA+B;IAC/C,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,GAAG;IACZ,KAAK,EAAE,GAAG;CACX,CAAC;AAEF,8EAA8E;AAC9E,MAAM,eAAe,GAAG,CAAC,CAAC,CAAG,UAAU;AACvC,MAAM,cAAc,GAAG,CAAC,CAAC,CAAI,UAAU;AAEvC,+CAA+C;AAC/C,MAAM,UAAU,GAAG;IACjB,SAAS,EAAE,8DAA8D;CAC1E,CAAC;AAEF,wBAAwB;AACxB,MAAM,aAAa,GAAc;IAC/B,WAAW,EAAE,SAAS;IACtB,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IACtC,aAAa,EAAE,IAAI;IACnB,YAAY,EAAE,EAAE;IAChB,SAAS,EAAE,CAAC;CACb,CAAC;AAEF,8EAA8E;AAC9E,mDAAmD;AACnD,8EAA8E;AAE9E;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,KAAK,EAAE,SAAS,EAChB,WAAW,EACX,IAAI,EACJ,IAAI,GAAG,SAAS,EAChB,QAAQ,EACR,aAAa,EACb,eAAe,EACf,KAAK,EACL,kBAAkB,GACC;IACnB,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC1C,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;IAC5C,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;IAC1C,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IAErC,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;IAElD,MAAM,YAAY,GAChB,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CACzB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,GAAI,CAChE,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;IAEJ,MAAM,UAAU,GAAG,aAAa,IAAI,eAAe,CAAC;IAEpD,OAAO,CACL,MAAC,IAAI,IACH,iBAAiB,EAAC,OAAO,EACzB,kBAAkB,EAAE,kBAAkB,IAAI,SAAS,EACnD,KAAK,EAAE;YACL;gBACE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC;gBACzB,QAAQ,EAAE,MAAM;gBAChB,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE;gBACzC,WAAW,EAAE,aAAa,CAAC,WAAW;gBACtC,WAAW,EAAE,aAAa,CAAC,OAAO,CAAC,MAAM;gBACzC,YAAY,EAAE,aAAa,CAAC,OAAO,CAAC,YAAY;gBAChD,OAAO,EAAE,UAAU,CAAC,OAAO;gBAC3B,GAAG,EAAE,UAAU,CAAC,GAAG;gBACnB,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC;aACxD;YACD,KAAK;SACN,aAGD,MAAC,IAAI,IAAC,KAAK,EAAE,EAAE,GAAG,EAAE,cAAc,EAAE,aAClC,MAAC,IAAI,IAAC,KAAK,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE,aAClC,YAAY,EACb,KAAC,IAAI,IACH,iBAAiB,EAAC,QAAQ,EAC1B,KAAK,EAAE;oCACL,UAAU,EAAE,UAAU,CAAC,IAAI;oCAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;oCAC7B,QAAQ,EAAE,WAAW,CAAC,QAAQ;oCAC9B,UAAU,EAAE,WAAW,CAAC,UAAU;oCAClC,aAAa,EAAE,WAAW,CAAC,aAAa;oCACxC,KAAK,EAAE,OAAO;iCACf,YAEA,SAAS,GACL,IACF,EACN,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,IAAI,IACH,KAAK,EAAE;4BACL,UAAU,EAAE,UAAU,CAAC,IAAI;4BAC3B,UAAU,EAAE,UAAU,CAAC,OAAO;4BAC9B,QAAQ,EAAE,UAAU,CAAC,QAAQ;4BAC7B,UAAU,EAAE,UAAU,CAAC,UAAU;4BACjC,aAAa,EAAE,UAAU,CAAC,aAAa;4BACvC,KAAK,EAAE,UAAU,CAAC,WAAW;yBAC9B,YAEA,WAAW,GACP,CACR,CAAC,CAAC,CAAC,IAAI,IACH,EAGN,QAAQ,EAGR,UAAU,CAAC,CAAC,CAAC,CACZ,MAAC,IAAI,IACH,KAAK,EAAE;oBACL,aAAa,EAAE,KAAK;oBACpB,cAAc,EAAE,UAAU;oBAC1B,GAAG,EAAE,UAAU,CAAC,GAAG;iBACpB,aAEA,eAAe,CAAC,CAAC,CAAC,CACjB,KAAC,MAAM,IACL,MAAM,EAAC,SAAS,EAChB,UAAU,EAAC,SAAS,EACpB,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,eAAe,CAAC,OAAO,YAE/B,eAAe,CAAC,KAAK,GACf,CACV,CAAC,CAAC,CAAC,IAAI,EACP,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,MAAM,IACL,MAAM,EAAC,OAAO,EACd,UAAU,EAAC,MAAM,EACjB,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,aAAa,CAAC,OAAO,YAE7B,aAAa,CAAC,KAAK,GACb,CACV,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,oCAAoC;AACpC,8EAA8E;AAE9E,MAAM,UAAU,MAAM,CAAC,EACrB,IAAI,EACJ,OAAO,EACP,GAAG,YAAY,EACH;IACZ,OAAO,CACL,KAAC,KAAK,IACJ,OAAO,EAAE,IAAI,EACb,WAAW,QACX,aAAa,EAAC,MAAM,EACpB,cAAc,EAAE,OAAO,YAEvB,KAAC,SAAS,IACR,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAC,QAAQ,EAC1B,kBAAkB,EAAC,cAAc,EACjC,KAAK,EAAE;gBACL,IAAI,EAAE,CAAC;gBACP,eAAe,EAAE,iBAAiB,aAAa,CAAC,YAAY,GAAG;gBAC/D,cAAc,EAAE,QAAQ;gBACxB,UAAU,EAAE,QAAQ;aACrB,YAED,KAAC,SAAS,IACR,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACnC,iBAAiB,EAAC,MAAM,EACxB,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,YAE1B,KAAC,aAAa,OAAK,YAAY,GAAI,GACzB,GACF,GACN,CACT,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,aAAa,EACb,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACvB,KAAK,YAAY,EACjB,KAAK,UAAU,GAChB,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,aAAa,GAKd,MAAM,UAAU,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
export { intentColors, disabledColors, controlTokens, fontFamily, fontWeight, label, type IntentName, type ProminenceName, type StateName, type LabelSize, } from './tokens';
|
|
2
|
-
export { ThemeProvider, useTheme, themes, type Theme, type ThemeProviderProps, type DensityTheme, type ComponentTokens, type ButtonSizeTokens, type ButtonThemeTokens, type DeepPartial, } from './theme';
|
|
1
|
+
export { intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, fontFamily, fontWeight, label, title, body, type IntentName, type ProminenceName, type StateName, type LabelSize, } from './tokens';
|
|
2
|
+
export { ThemeProvider, useTheme, themes, type Theme, type ThemeProviderProps, type DensityTheme, type ComponentTokens, type ButtonSizeTokens, type ButtonThemeTokens, type DialogSizeTokens, type DialogThemeTokens, 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
|
+
export { Dialog, DialogContent, type DialogProps, type DialogContentProps, type DialogAction, type DialogSize, } from './components/Dialog';
|
|
5
6
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,YAAY,EACZ,cAAc,EACd,aAAa,EACb,UAAU,EACV,UAAU,EACV,KAAK,EACL,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,GACf,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,aAAa,EACb,QAAQ,EACR,MAAM,EACN,KAAK,KAAK,EACV,KAAK,kBAAkB,EACvB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,WAAW,GACjB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAChF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,YAAY,EACZ,cAAc,EACd,aAAa,EACb,aAAa,EACb,UAAU,EACV,aAAa,EACb,UAAU,EACV,UAAU,EACV,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,GACf,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,aAAa,EACb,QAAQ,EACR,MAAM,EACN,KAAK,KAAK,EACV,KAAK,kBAAkB,EACvB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,WAAW,GACjB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAChF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EACL,MAAM,EACN,aAAa,EACb,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACvB,KAAK,YAAY,EACjB,KAAK,UAAU,GAChB,MAAM,qBAAqB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
// Cast UI — Cross-platform design system component library
|
|
2
2
|
//
|
|
3
3
|
// Tokens
|
|
4
|
-
export { intentColors, disabledColors, controlTokens, fontFamily, fontWeight, label, } from './tokens';
|
|
4
|
+
export { intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, fontFamily, fontWeight, label, title, body, } from './tokens';
|
|
5
5
|
// Theme
|
|
6
6
|
export { ThemeProvider, useTheme, themes, } from './theme';
|
|
7
7
|
// Components
|
|
8
8
|
export { Button } from './components/Button';
|
|
9
9
|
export { Icon } from './components/Icon';
|
|
10
|
+
export { Dialog, DialogContent, } from './components/Dialog';
|
|
10
11
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,EAAE;AACF,SAAS;AACT,OAAO,EACL,YAAY,EACZ,cAAc,EACd,aAAa,EACb,UAAU,EACV,UAAU,EACV,KAAK,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,EAAE;AACF,SAAS;AACT,OAAO,EACL,YAAY,EACZ,cAAc,EACd,aAAa,EACb,aAAa,EACb,UAAU,EACV,aAAa,EACb,UAAU,EACV,UAAU,EACV,KAAK,EACL,KAAK,EACL,IAAI,GAKL,MAAM,UAAU,CAAC;AAElB,QAAQ;AACR,OAAO,EACL,aAAa,EACb,QAAQ,EACR,MAAM,GAUP,MAAM,SAAS,CAAC;AAEjB,aAAa;AACb,OAAO,EAAE,MAAM,EAAqC,MAAM,qBAAqB,CAAC;AAChF,OAAO,EAAE,IAAI,EAAkB,MAAM,mBAAmB,CAAC;AACzD,OAAO,EACL,MAAM,EACN,aAAa,GAKd,MAAM,qBAAqB,CAAC"}
|
package/dist/theme/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { ThemeProvider, useTheme, type ThemeProviderProps, type Theme } from './ThemeContext';
|
|
2
2
|
export { themes } from './themes';
|
|
3
|
-
export type { DensityTheme, ComponentTokens, ButtonSizeTokens, ButtonThemeTokens, DeepPartial, } from './types';
|
|
3
|
+
export type { DensityTheme, ComponentTokens, ButtonSizeTokens, ButtonThemeTokens, DialogSizeTokens, DialogThemeTokens, DeepPartial, } from './types';
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,kBAAkB,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAC9F,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EACV,YAAY,EACZ,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,GACZ,MAAM,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,kBAAkB,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAC9F,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EACV,YAAY,EACZ,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,GACZ,MAAM,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../src/theme/themes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE7D,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../src/theme/themes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE7D,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAoFxD,CAAC"}
|
package/dist/theme/themes.js
CHANGED
|
@@ -11,86 +11,83 @@
|
|
|
11
11
|
*/
|
|
12
12
|
export const themes = {
|
|
13
13
|
compact: {
|
|
14
|
+
dialog: {
|
|
15
|
+
small: { padding: 16, gap: 12, iconSize: 24 },
|
|
16
|
+
default: { padding: 24, gap: 16, iconSize: 32 },
|
|
17
|
+
large: { padding: 32, gap: 24, iconSize: 40 },
|
|
18
|
+
},
|
|
14
19
|
button: {
|
|
15
20
|
small: {
|
|
16
21
|
gap: 4,
|
|
17
22
|
paddingX: 6,
|
|
18
23
|
paddingY: 2,
|
|
19
24
|
borderRadius: 8,
|
|
20
|
-
focusRingWidth: 2,
|
|
21
|
-
focusRingOffset: 2,
|
|
22
25
|
},
|
|
23
26
|
default: {
|
|
24
27
|
gap: 8,
|
|
25
28
|
paddingX: 10,
|
|
26
29
|
paddingY: 6,
|
|
27
30
|
borderRadius: 8,
|
|
28
|
-
focusRingWidth: 2,
|
|
29
|
-
focusRingOffset: 2,
|
|
30
31
|
},
|
|
31
32
|
large: {
|
|
32
33
|
gap: 16,
|
|
33
34
|
paddingX: 20,
|
|
34
35
|
paddingY: 14,
|
|
35
36
|
borderRadius: 8,
|
|
36
|
-
focusRingWidth: 2,
|
|
37
|
-
focusRingOffset: 2,
|
|
38
37
|
},
|
|
39
38
|
},
|
|
40
39
|
},
|
|
41
40
|
default: {
|
|
41
|
+
dialog: {
|
|
42
|
+
small: { padding: 24, gap: 16, iconSize: 24 },
|
|
43
|
+
default: { padding: 32, gap: 24, iconSize: 32 },
|
|
44
|
+
large: { padding: 40, gap: 32, iconSize: 40 },
|
|
45
|
+
},
|
|
42
46
|
button: {
|
|
43
47
|
small: {
|
|
44
48
|
gap: 8,
|
|
45
49
|
paddingX: 10,
|
|
46
50
|
paddingY: 6,
|
|
47
51
|
borderRadius: 8,
|
|
48
|
-
focusRingWidth: 2,
|
|
49
|
-
focusRingOffset: 2,
|
|
50
52
|
},
|
|
51
53
|
default: {
|
|
52
54
|
gap: 12,
|
|
53
55
|
paddingX: 14,
|
|
54
56
|
paddingY: 10,
|
|
55
57
|
borderRadius: 8,
|
|
56
|
-
focusRingWidth: 2,
|
|
57
|
-
focusRingOffset: 2,
|
|
58
58
|
},
|
|
59
59
|
large: {
|
|
60
60
|
gap: 20,
|
|
61
61
|
paddingX: 24,
|
|
62
62
|
paddingY: 16,
|
|
63
63
|
borderRadius: 8,
|
|
64
|
-
focusRingWidth: 2,
|
|
65
|
-
focusRingOffset: 2,
|
|
66
64
|
},
|
|
67
65
|
},
|
|
68
66
|
},
|
|
69
67
|
comfortable: {
|
|
68
|
+
dialog: {
|
|
69
|
+
small: { padding: 40, gap: 24, iconSize: 24 },
|
|
70
|
+
default: { padding: 40, gap: 32, iconSize: 32 },
|
|
71
|
+
large: { padding: 48, gap: 40, iconSize: 40 },
|
|
72
|
+
},
|
|
70
73
|
button: {
|
|
71
74
|
small: {
|
|
72
75
|
gap: 12,
|
|
73
76
|
paddingX: 14,
|
|
74
77
|
paddingY: 10,
|
|
75
78
|
borderRadius: 8,
|
|
76
|
-
focusRingWidth: 2,
|
|
77
|
-
focusRingOffset: 2,
|
|
78
79
|
},
|
|
79
80
|
default: {
|
|
80
81
|
gap: 16,
|
|
81
82
|
paddingX: 20,
|
|
82
83
|
paddingY: 14,
|
|
83
84
|
borderRadius: 8,
|
|
84
|
-
focusRingWidth: 2,
|
|
85
|
-
focusRingOffset: 2,
|
|
86
85
|
},
|
|
87
86
|
large: {
|
|
88
87
|
gap: 24,
|
|
89
88
|
paddingX: 32,
|
|
90
89
|
paddingY: 20,
|
|
91
90
|
borderRadius: 8,
|
|
92
|
-
focusRingWidth: 2,
|
|
93
|
-
focusRingOffset: 2,
|
|
94
91
|
},
|
|
95
92
|
},
|
|
96
93
|
},
|
package/dist/theme/themes.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../src/theme/themes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,MAAM,CAAC,MAAM,MAAM,GAA0C;IAC3D,OAAO,EAAE;QACP,MAAM,EAAE;YACN,KAAK,EAAE
|
|
1
|
+
{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../src/theme/themes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,MAAM,CAAC,MAAM,MAAM,GAA0C;IAC3D,OAAO,EAAE;QACP,MAAM,EAAE;YACN,KAAK,EAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;YAC/C,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;YAC/C,KAAK,EAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;SAChD;QACD,MAAM,EAAE;YACN,KAAK,EAAE;gBACL,GAAG,EAAE,CAAC;gBACN,QAAQ,EAAE,CAAC;gBACX,QAAQ,EAAE,CAAC;gBACX,YAAY,EAAE,CAAC;aAChB;YACD,OAAO,EAAE;gBACP,GAAG,EAAE,CAAC;gBACN,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,CAAC;gBACX,YAAY,EAAE,CAAC;aAChB;YACD,KAAK,EAAE;gBACL,GAAG,EAAE,EAAE;gBACP,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,EAAE;gBACZ,YAAY,EAAE,CAAC;aAChB;SACF;KACF;IAED,OAAO,EAAE;QACP,MAAM,EAAE;YACN,KAAK,EAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;YAC/C,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;YAC/C,KAAK,EAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;SAChD;QACD,MAAM,EAAE;YACN,KAAK,EAAE;gBACL,GAAG,EAAE,CAAC;gBACN,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,CAAC;gBACX,YAAY,EAAE,CAAC;aAChB;YACD,OAAO,EAAE;gBACP,GAAG,EAAE,EAAE;gBACP,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,EAAE;gBACZ,YAAY,EAAE,CAAC;aAChB;YACD,KAAK,EAAE;gBACL,GAAG,EAAE,EAAE;gBACP,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,EAAE;gBACZ,YAAY,EAAE,CAAC;aAChB;SACF;KACF;IAED,WAAW,EAAE;QACX,MAAM,EAAE;YACN,KAAK,EAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;YAC/C,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;YAC/C,KAAK,EAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;SAChD;QACD,MAAM,EAAE;YACN,KAAK,EAAE;gBACL,GAAG,EAAE,EAAE;gBACP,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,EAAE;gBACZ,YAAY,EAAE,CAAC;aAChB;YACD,OAAO,EAAE;gBACP,GAAG,EAAE,EAAE;gBACP,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,EAAE;gBACZ,YAAY,EAAE,CAAC;aAChB;YACD,KAAK,EAAE;gBACL,GAAG,EAAE,EAAE;gBACP,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,EAAE;gBACZ,YAAY,EAAE,CAAC;aAChB;SACF;KACF;CACF,CAAC"}
|
package/dist/theme/types.d.ts
CHANGED
|
@@ -11,8 +11,6 @@ export type ButtonSizeTokens = {
|
|
|
11
11
|
paddingX: number;
|
|
12
12
|
paddingY: number;
|
|
13
13
|
borderRadius: number;
|
|
14
|
-
focusRingWidth: number;
|
|
15
|
-
focusRingOffset: number;
|
|
16
14
|
};
|
|
17
15
|
/** All three button sizes */
|
|
18
16
|
export type ButtonThemeTokens = {
|
|
@@ -20,12 +18,25 @@ export type ButtonThemeTokens = {
|
|
|
20
18
|
default: ButtonSizeTokens;
|
|
21
19
|
large: ButtonSizeTokens;
|
|
22
20
|
};
|
|
21
|
+
/** Spacing/sizing tokens for a single dialog size variant */
|
|
22
|
+
export type DialogSizeTokens = {
|
|
23
|
+
padding: number;
|
|
24
|
+
gap: number;
|
|
25
|
+
iconSize: number;
|
|
26
|
+
};
|
|
27
|
+
/** All three dialog sizes */
|
|
28
|
+
export type DialogThemeTokens = {
|
|
29
|
+
small: DialogSizeTokens;
|
|
30
|
+
default: DialogSizeTokens;
|
|
31
|
+
large: DialogSizeTokens;
|
|
32
|
+
};
|
|
23
33
|
/**
|
|
24
34
|
* Component-level tokens that vary by density theme.
|
|
25
35
|
* Extended as new components are added to the library.
|
|
26
36
|
*/
|
|
27
37
|
export type ComponentTokens = {
|
|
28
38
|
button: ButtonThemeTokens;
|
|
39
|
+
dialog: DialogThemeTokens;
|
|
29
40
|
};
|
|
30
41
|
/** Utility type for partial overrides at any depth */
|
|
31
42
|
export type DeepPartial<T> = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/theme/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;AAEjE,6DAA6D;AAC7D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/theme/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;AAEjE,6DAA6D;AAC7D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,6BAA6B;AAC7B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,gBAAgB,CAAC;IACxB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,6DAA6D;AAC7D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,6BAA6B;AAC7B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,gBAAgB,CAAC;IACxB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,MAAM,EAAE,iBAAiB,CAAC;CAC3B,CAAC;AAEF,sDAAsD;AACtD,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAChE,CAAC"}
|
package/dist/tokens/colors.d.ts
CHANGED
|
@@ -19,7 +19,6 @@ type IntentColors = {
|
|
|
19
19
|
default: ProminenceColors;
|
|
20
20
|
bold: ProminenceColors;
|
|
21
21
|
subtle: ProminenceColors;
|
|
22
|
-
ringColour: string;
|
|
23
22
|
};
|
|
24
23
|
export type IntentName = 'brand' | 'neutral' | 'danger';
|
|
25
24
|
export type ProminenceName = 'default' | 'bold' | 'subtle';
|
|
@@ -31,5 +30,26 @@ export declare const disabledColors: StateColors;
|
|
|
31
30
|
export declare const controlTokens: {
|
|
32
31
|
borderWidth: number;
|
|
33
32
|
};
|
|
33
|
+
/** Surface tokens — backgrounds and overlay styling */
|
|
34
|
+
export declare const surfaceTokens: {
|
|
35
|
+
/** Page/screen background — cool-grey/50 */
|
|
36
|
+
base: string;
|
|
37
|
+
/** Subtle background for sections/cards — cool-grey/100 */
|
|
38
|
+
subtle: string;
|
|
39
|
+
/** Overlay surfaces (Dialog, Popover, Tooltip, Select, etc.) */
|
|
40
|
+
overlay: {
|
|
41
|
+
bg: string;
|
|
42
|
+
border: string;
|
|
43
|
+
borderRadius: number;
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
/** Semantic text tokens */
|
|
47
|
+
export declare const textTokens: {
|
|
48
|
+
description: string;
|
|
49
|
+
};
|
|
50
|
+
/** Overlay/scrim opacity */
|
|
51
|
+
export declare const overlayTokens: {
|
|
52
|
+
scrimOpacity: number;
|
|
53
|
+
};
|
|
34
54
|
export {};
|
|
35
55
|
//# sourceMappingURL=colors.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/tokens/colors.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,KAAK,WAAW,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,WAAW,CAAC;IACnB,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,IAAI,EAAE,gBAAgB,CAAC;IACvB,MAAM,EAAE,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/tokens/colors.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,KAAK,WAAW,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,WAAW,CAAC;IACnB,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,IAAI,EAAE,gBAAgB,CAAC;IACvB,MAAM,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAC3D,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEvD,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,UAAU,EAAE,YAAY,CAoDzD,CAAC;AAEF,iDAAiD;AACjD,eAAO,MAAM,cAAc,EAAE,WAI5B,CAAC;AAEF,iCAAiC;AACjC,eAAO,MAAM,aAAa;;CAEzB,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,aAAa;IACxB,4CAA4C;;IAE5C,2DAA2D;;IAE3D,gEAAgE;;;;;;CAMjE,CAAC;AAEF,2BAA2B;AAC3B,eAAO,MAAM,UAAU;;CAEtB,CAAC;AAEF,4BAA4B;AAC5B,eAAO,MAAM,aAAa;;CAEzB,CAAC"}
|
package/dist/tokens/colors.js
CHANGED
|
@@ -22,7 +22,6 @@ export const intentColors = {
|
|
|
22
22
|
hover: { bg: '#F9FAFB', fg: '#1F2937', border: 'transparent' },
|
|
23
23
|
active: { bg: '#F3F4F6', fg: '#111827', border: 'transparent' },
|
|
24
24
|
},
|
|
25
|
-
ringColour: '#9CA3AF',
|
|
26
25
|
},
|
|
27
26
|
brand: {
|
|
28
27
|
default: {
|
|
@@ -40,7 +39,6 @@ export const intentColors = {
|
|
|
40
39
|
hover: { bg: '#EFF6FF', fg: '#1D4ED8', border: 'transparent' },
|
|
41
40
|
active: { bg: '#DBEAFE', fg: '#1E40AF', border: 'transparent' },
|
|
42
41
|
},
|
|
43
|
-
ringColour: '#60A5FA',
|
|
44
42
|
},
|
|
45
43
|
danger: {
|
|
46
44
|
default: {
|
|
@@ -58,7 +56,6 @@ export const intentColors = {
|
|
|
58
56
|
hover: { bg: '#FEF2F2', fg: '#B91C1C', border: 'transparent' },
|
|
59
57
|
active: { bg: '#FEE2E2', fg: '#991B1B', border: 'transparent' },
|
|
60
58
|
},
|
|
61
|
-
ringColour: '#F87171',
|
|
62
59
|
},
|
|
63
60
|
};
|
|
64
61
|
/** Disabled state — shared across all intents */
|
|
@@ -71,4 +68,25 @@ export const disabledColors = {
|
|
|
71
68
|
export const controlTokens = {
|
|
72
69
|
borderWidth: 1,
|
|
73
70
|
};
|
|
71
|
+
/** Surface tokens — backgrounds and overlay styling */
|
|
72
|
+
export const surfaceTokens = {
|
|
73
|
+
/** Page/screen background — cool-grey/50 */
|
|
74
|
+
base: '#F9FAFB',
|
|
75
|
+
/** Subtle background for sections/cards — cool-grey/100 */
|
|
76
|
+
subtle: '#F3F4F6',
|
|
77
|
+
/** Overlay surfaces (Dialog, Popover, Tooltip, Select, etc.) */
|
|
78
|
+
overlay: {
|
|
79
|
+
bg: '#FFFFFF',
|
|
80
|
+
border: '#E5E7EB',
|
|
81
|
+
borderRadius: 8,
|
|
82
|
+
},
|
|
83
|
+
};
|
|
84
|
+
/** Semantic text tokens */
|
|
85
|
+
export const textTokens = {
|
|
86
|
+
description: '#6B7280',
|
|
87
|
+
};
|
|
88
|
+
/** Overlay/scrim opacity */
|
|
89
|
+
export const overlayTokens = {
|
|
90
|
+
scrimOpacity: 0.5,
|
|
91
|
+
};
|
|
74
92
|
//# sourceMappingURL=colors.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../src/tokens/colors.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;
|
|
1
|
+
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../src/tokens/colors.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAwBH,MAAM,CAAC,MAAM,YAAY,GAAqC;IAC5D,OAAO,EAAE;QACP,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;YAC5D,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;YAC1D,MAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;SAC5D;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;YAC5D,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;YAC1D,MAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;SAC5D;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE;YACpE,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE;YAC9D,MAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE;SAChE;KACF;IACD,KAAK,EAAE;QACL,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;YAC5D,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;YAC1D,MAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;SAC5D;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;YAC5D,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;YAC1D,MAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;SAC5D;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE;YACpE,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE;YAC9D,MAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE;SAChE;KACF;IACD,MAAM,EAAE;QACN,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;YAC5D,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;YAC1D,MAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;SAC5D;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;YAC5D,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;YAC1D,MAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;SAC5D;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE;YACpE,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE;YAC9D,MAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE;SAChE;KACF;CACF,CAAC;AAEF,iDAAiD;AACjD,MAAM,CAAC,MAAM,cAAc,GAAgB;IACzC,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,MAAM,EAAE,SAAS;CAClB,CAAC;AAEF,iCAAiC;AACjC,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,WAAW,EAAE,CAAC;CACf,CAAC;AAEF,uDAAuD;AACvD,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,4CAA4C;IAC5C,IAAI,EAAE,SAAS;IACf,2DAA2D;IAC3D,MAAM,EAAE,SAAS;IACjB,gEAAgE;IAChE,OAAO,EAAE;QACP,EAAE,EAAE,SAAS;QACb,MAAM,EAAE,SAAS;QACjB,YAAY,EAAE,CAAC;KAChB;CACF,CAAC;AAEF,2BAA2B;AAC3B,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,4BAA4B;AAC5B,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,YAAY,EAAE,GAAG;CAClB,CAAC"}
|
package/dist/tokens/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { intentColors, disabledColors, controlTokens, type IntentName, type ProminenceName, type StateName, } from './colors';
|
|
2
|
-
export { fontFamily, fontWeight, label, type LabelSize } from './typography';
|
|
1
|
+
export { intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, type IntentName, type ProminenceName, type StateName, } from './colors';
|
|
2
|
+
export { fontFamily, fontWeight, label, title, body, type LabelSize } from './typography';
|
|
3
3
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,cAAc,EACd,aAAa,EACb,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,SAAS,GACf,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,cAAc,EACd,aAAa,EACb,aAAa,EACb,UAAU,EACV,aAAa,EACb,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,SAAS,GACf,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC"}
|
package/dist/tokens/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { intentColors, disabledColors, controlTokens, } from './colors';
|
|
2
|
-
export { fontFamily, fontWeight, label } from './typography';
|
|
1
|
+
export { intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, } from './colors';
|
|
2
|
+
export { fontFamily, fontWeight, label, title, body } from './typography';
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
package/dist/tokens/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,cAAc,EACd,aAAa,GAId,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAkB,MAAM,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,cAAc,EACd,aAAa,EACb,aAAa,EACb,UAAU,EACV,aAAa,GAId,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Source tokens:
|
|
5
5
|
* font-family/{sans|mono|serif}
|
|
6
6
|
* font-weight/{light|regular|medium|semibold|bold}
|
|
7
|
-
* label/{sm|md|lg} → fontSize, lineHeight, letterSpacing
|
|
7
|
+
* label/{sm|md|lg}, title/{sm|md|lg}, body/{sm|md|lg} → fontSize, lineHeight, letterSpacing
|
|
8
8
|
*/
|
|
9
9
|
export declare const fontFamily: {
|
|
10
10
|
readonly sans: string;
|
|
@@ -19,9 +19,13 @@ export declare const fontWeight: {
|
|
|
19
19
|
bold: "700";
|
|
20
20
|
};
|
|
21
21
|
export type LabelSize = 'sm' | 'md' | 'lg';
|
|
22
|
-
|
|
22
|
+
type TypographyScale = Record<'sm' | 'md' | 'lg', {
|
|
23
23
|
fontSize: number;
|
|
24
24
|
lineHeight: number;
|
|
25
25
|
letterSpacing: number;
|
|
26
26
|
}>;
|
|
27
|
+
export declare const label: TypographyScale;
|
|
28
|
+
export declare const title: TypographyScale;
|
|
29
|
+
export declare const body: TypographyScale;
|
|
30
|
+
export {};
|
|
27
31
|
//# sourceMappingURL=typography.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/tokens/typography.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,eAAO,MAAM,UAAU;;;;CAOb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,
|
|
1
|
+
{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/tokens/typography.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,eAAO,MAAM,UAAU;;;;CAOb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,KAAK,eAAe,GAAG,MAAM,CAC3B,IAAI,GAAG,IAAI,GAAG,IAAI,EAClB;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,CAChE,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,eAInB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,eAInB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,eAIlB,CAAC"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Source tokens:
|
|
5
5
|
* font-family/{sans|mono|serif}
|
|
6
6
|
* font-weight/{light|regular|medium|semibold|bold}
|
|
7
|
-
* label/{sm|md|lg} → fontSize, lineHeight, letterSpacing
|
|
7
|
+
* label/{sm|md|lg}, title/{sm|md|lg}, body/{sm|md|lg} → fontSize, lineHeight, letterSpacing
|
|
8
8
|
*/
|
|
9
9
|
import { Platform } from 'react-native';
|
|
10
10
|
export const fontFamily = {
|
|
@@ -27,4 +27,14 @@ export const label = {
|
|
|
27
27
|
md: { fontSize: 14, lineHeight: 20, letterSpacing: 0 },
|
|
28
28
|
lg: { fontSize: 16, lineHeight: 24, letterSpacing: 0 },
|
|
29
29
|
};
|
|
30
|
+
export const title = {
|
|
31
|
+
sm: { fontSize: 16, lineHeight: 24, letterSpacing: 0 },
|
|
32
|
+
md: { fontSize: 18, lineHeight: 24, letterSpacing: 0 },
|
|
33
|
+
lg: { fontSize: 20, lineHeight: 28, letterSpacing: 0 },
|
|
34
|
+
};
|
|
35
|
+
export const body = {
|
|
36
|
+
sm: { fontSize: 12, lineHeight: 18, letterSpacing: 0.25 },
|
|
37
|
+
md: { fontSize: 14, lineHeight: 20, letterSpacing: 0 },
|
|
38
|
+
lg: { fontSize: 16, lineHeight: 24, letterSpacing: 0 },
|
|
39
|
+
};
|
|
30
40
|
//# sourceMappingURL=typography.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../src/tokens/typography.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,8BAA8B,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;IAChF,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;QACpB,GAAG,EAAE,6BAA6B;QAClC,OAAO,EAAE,gBAAgB;KAC1B,CAAC;IACF,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,qBAAqB,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;CACrE,CAAC;AAEX,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,KAAc;IACrB,OAAO,EAAE,KAAc;IACvB,MAAM,EAAE,KAAc;IACtB,QAAQ,EAAE,KAAc;IACxB,IAAI,EAAE,KAAc;CACrB,CAAC;
|
|
1
|
+
{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../src/tokens/typography.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,8BAA8B,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;IAChF,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;QACpB,GAAG,EAAE,6BAA6B;QAClC,OAAO,EAAE,gBAAgB;KAC1B,CAAC;IACF,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,qBAAqB,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;CACrE,CAAC;AAEX,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,KAAc;IACrB,OAAO,EAAE,KAAc;IACvB,MAAM,EAAE,KAAc;IACtB,QAAQ,EAAE,KAAc;IACxB,IAAI,EAAE,KAAc;CACrB,CAAC;AASF,MAAM,CAAC,MAAM,KAAK,GAAoB;IACpC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE;IACzD,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE;IACtD,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE;CACvD,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAoB;IACpC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE;IACtD,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE;IACtD,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE;CACvD,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAoB;IACnC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE;IACzD,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE;IACtD,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE;CACvD,CAAC"}
|
package/package.json
CHANGED