@vellira-ui/tokens 2.98.6 → 2.99.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/css/tokens.css +171 -213
- package/dist/dark/components/contextMenu.d.ts +13 -3
- package/dist/dark/components/contextMenu.d.ts.map +1 -1
- package/dist/dark/components/contextMenu.js +0 -2
- package/dist/dark/components/dropdown.d.ts +20 -10
- package/dist/dark/components/dropdown.d.ts.map +1 -1
- package/dist/dark/components/dropdown.js +6 -5
- package/dist/dark/components/input.d.ts +1 -1
- package/dist/dark/components/input.js +4 -4
- package/dist/dark/components/modal.d.ts +16 -7
- package/dist/dark/components/modal.d.ts.map +1 -1
- package/dist/dark/components/modal.js +1 -3
- package/dist/dark/components/popover.d.ts +5 -25
- package/dist/dark/components/popover.d.ts.map +1 -1
- package/dist/dark/components/popover.js +0 -4
- package/dist/dark/components/radio.js +1 -1
- package/dist/dark/components/select.d.ts +9 -2
- package/dist/dark/components/select.d.ts.map +1 -1
- package/dist/dark/components/select.js +5 -5
- package/dist/dark/components/tooltip.d.ts.map +1 -1
- package/dist/dark/components/tooltip.js +0 -2
- package/dist/dark/semantic/action.d.ts +2 -2
- package/dist/dark/semantic/action.js +2 -2
- package/dist/dark/semantic/border.d.ts +1 -1
- package/dist/dark/semantic/border.js +1 -1
- package/dist/dark/semantic/control.js +1 -1
- package/dist/dark/semantic/focus.d.ts +1 -1
- package/dist/dark/semantic/focus.js +1 -1
- package/dist/dark/semantic/icons.d.ts +2 -2
- package/dist/dark/semantic/icons.js +2 -2
- package/dist/dark/semantic/index.d.ts +0 -1
- package/dist/dark/semantic/index.d.ts.map +1 -1
- package/dist/dark/semantic/index.js +0 -1
- package/dist/dark/semantic/overlay.d.ts +2 -2
- package/dist/dark/semantic/overlay.js +2 -2
- package/dist/dark/semantic/status.d.ts +6 -6
- package/dist/dark/semantic/status.js +6 -6
- package/dist/dark/semantic/surface.d.ts +1 -1
- package/dist/dark/semantic/surface.js +1 -1
- package/dist/dark/semantic/text.d.ts +2 -2
- package/dist/dark/semantic/text.js +2 -2
- package/dist/factories/componentFocusRing.d.ts +15 -0
- package/dist/factories/componentFocusRing.d.ts.map +1 -0
- package/dist/factories/componentFocusRing.js +7 -0
- package/dist/factories/createContextMenuTokens.d.ts +50 -18
- package/dist/factories/createContextMenuTokens.d.ts.map +1 -1
- package/dist/factories/createContextMenuTokens.js +6 -5
- package/dist/factories/createModalTokens.d.ts +41 -21
- package/dist/factories/createModalTokens.d.ts.map +1 -1
- package/dist/factories/createModalTokens.js +8 -9
- package/dist/factories/createPopoverTokens.d.ts +12 -20
- package/dist/factories/createPopoverTokens.d.ts.map +1 -1
- package/dist/factories/createPopoverTokens.js +5 -9
- package/dist/factories/createTooltipTokens.d.ts +4 -7
- package/dist/factories/createTooltipTokens.d.ts.map +1 -1
- package/dist/factories/createTooltipTokens.js +4 -4
- package/dist/generated/token-types.d.ts +7 -6
- package/dist/generated/token-types.d.ts.map +1 -1
- package/dist/generated/token-types.js +176 -248
- package/dist/highContrast/components/contextMenu.d.ts +13 -3
- package/dist/highContrast/components/contextMenu.d.ts.map +1 -1
- package/dist/highContrast/components/contextMenu.js +0 -2
- package/dist/highContrast/components/dropdown.d.ts +19 -9
- package/dist/highContrast/components/dropdown.d.ts.map +1 -1
- package/dist/highContrast/components/dropdown.js +6 -5
- package/dist/highContrast/components/input.d.ts +4 -4
- package/dist/highContrast/components/input.js +4 -4
- package/dist/highContrast/components/modal.d.ts +16 -7
- package/dist/highContrast/components/modal.d.ts.map +1 -1
- package/dist/highContrast/components/modal.js +0 -2
- package/dist/highContrast/components/popover.d.ts +5 -25
- package/dist/highContrast/components/popover.d.ts.map +1 -1
- package/dist/highContrast/components/popover.js +0 -4
- package/dist/highContrast/components/radio.js +1 -1
- package/dist/highContrast/components/select.d.ts +10 -3
- package/dist/highContrast/components/select.d.ts.map +1 -1
- package/dist/highContrast/components/select.js +5 -5
- package/dist/highContrast/components/tooltip.d.ts.map +1 -1
- package/dist/highContrast/components/tooltip.js +0 -2
- package/dist/highContrast/semantic/action.d.ts +2 -2
- package/dist/highContrast/semantic/action.js +2 -2
- package/dist/highContrast/semantic/border.d.ts +1 -1
- package/dist/highContrast/semantic/border.js +1 -1
- package/dist/highContrast/semantic/focus.d.ts +1 -1
- package/dist/highContrast/semantic/focus.js +1 -1
- package/dist/highContrast/semantic/icons.d.ts +4 -4
- package/dist/highContrast/semantic/icons.js +4 -4
- package/dist/highContrast/semantic/index.d.ts +0 -1
- package/dist/highContrast/semantic/index.d.ts.map +1 -1
- package/dist/highContrast/semantic/index.js +0 -1
- package/dist/highContrast/semantic/overlay.d.ts +2 -2
- package/dist/highContrast/semantic/overlay.js +2 -2
- package/dist/highContrast/semantic/status.d.ts +4 -4
- package/dist/highContrast/semantic/status.js +4 -4
- package/dist/highContrast/semantic/surface.d.ts +1 -1
- package/dist/highContrast/semantic/surface.js +1 -1
- package/dist/light/components/contextMenu.d.ts +13 -3
- package/dist/light/components/contextMenu.d.ts.map +1 -1
- package/dist/light/components/contextMenu.js +0 -2
- package/dist/light/components/dropdown.d.ts +19 -9
- package/dist/light/components/dropdown.d.ts.map +1 -1
- package/dist/light/components/dropdown.js +6 -5
- package/dist/light/components/input.js +4 -4
- package/dist/light/components/modal.d.ts +16 -7
- package/dist/light/components/modal.d.ts.map +1 -1
- package/dist/light/components/modal.js +0 -2
- package/dist/light/components/popover.d.ts +5 -25
- package/dist/light/components/popover.d.ts.map +1 -1
- package/dist/light/components/popover.js +0 -4
- package/dist/light/components/radio.js +1 -1
- package/dist/light/components/select.d.ts +9 -2
- package/dist/light/components/select.d.ts.map +1 -1
- package/dist/light/components/select.js +5 -5
- package/dist/light/components/tooltip.d.ts.map +1 -1
- package/dist/light/components/tooltip.js +0 -2
- package/dist/light/semantic/action.d.ts +2 -2
- package/dist/light/semantic/action.js +2 -2
- package/dist/light/semantic/border.d.ts +1 -1
- package/dist/light/semantic/border.js +1 -1
- package/dist/light/semantic/focus.d.ts +1 -1
- package/dist/light/semantic/focus.js +1 -1
- package/dist/light/semantic/icons.d.ts +2 -2
- package/dist/light/semantic/icons.js +2 -2
- package/dist/light/semantic/index.d.ts +0 -1
- package/dist/light/semantic/index.d.ts.map +1 -1
- package/dist/light/semantic/index.js +0 -1
- package/dist/light/semantic/menu.js +1 -1
- package/dist/light/semantic/overlay.d.ts +2 -2
- package/dist/light/semantic/overlay.js +2 -2
- package/dist/light/semantic/status.d.ts +4 -4
- package/dist/light/semantic/status.js +4 -4
- package/dist/light/semantic/surface.d.ts +1 -1
- package/dist/light/semantic/surface.js +1 -1
- package/dist/platform-output/component-token-intents.d.ts +71 -0
- package/dist/platform-output/component-token-intents.d.ts.map +1 -0
- package/dist/platform-output/component-token-intents.js +110 -0
- package/dist/platform-output/component-token-web-compatibility.d.ts +32 -0
- package/dist/platform-output/component-token-web-compatibility.d.ts.map +1 -0
- package/dist/platform-output/component-token-web-compatibility.js +40 -0
- package/dist/preservation/token-migrations.d.ts +208 -13
- package/dist/preservation/token-migrations.d.ts.map +1 -1
- package/dist/preservation/token-migrations.js +332 -30
- package/dist/token-architecture.d.ts +56 -10
- package/dist/token-architecture.d.ts.map +1 -1
- package/dist/token-architecture.js +129 -20
- package/package.json +1 -1
- package/dist/dark/semantic/navigation.d.ts +0 -34
- package/dist/dark/semantic/navigation.d.ts.map +0 -1
- package/dist/dark/semantic/navigation.js +0 -37
- package/dist/highContrast/semantic/navigation.d.ts +0 -34
- package/dist/highContrast/semantic/navigation.d.ts.map +0 -1
- package/dist/highContrast/semantic/navigation.js +0 -36
- package/dist/light/semantic/navigation.d.ts +0 -34
- package/dist/light/semantic/navigation.d.ts.map +0 -1
- package/dist/light/semantic/navigation.js +0 -37
|
@@ -5,27 +5,27 @@ export const status = {
|
|
|
5
5
|
bg: 'rgba(52, 211, 153, 0.14)',
|
|
6
6
|
border: colors.success[400],
|
|
7
7
|
ring: colors.success[300],
|
|
8
|
-
|
|
8
|
+
emphasisFg: colors.success[600],
|
|
9
9
|
},
|
|
10
10
|
error: {
|
|
11
11
|
fg: colors.error[400],
|
|
12
12
|
bg: 'rgba(251, 113, 133, 0.16)',
|
|
13
13
|
border: colors.error[400],
|
|
14
14
|
ring: colors.error[400],
|
|
15
|
-
|
|
15
|
+
emphasisFg: colors.error[600],
|
|
16
16
|
},
|
|
17
17
|
warning: {
|
|
18
18
|
fg: colors.warning[400],
|
|
19
19
|
bg: 'rgba(251, 191, 36, 0.14)',
|
|
20
20
|
border: colors.warning[400],
|
|
21
|
-
ring: colors.
|
|
22
|
-
|
|
21
|
+
ring: colors.warning[300],
|
|
22
|
+
emphasisFg: colors.warning[600],
|
|
23
23
|
},
|
|
24
24
|
info: {
|
|
25
25
|
fg: colors.info[200],
|
|
26
26
|
bg: 'rgba(56, 189, 248, 0.14)',
|
|
27
27
|
border: colors.info[200],
|
|
28
|
-
ring: colors.
|
|
29
|
-
|
|
28
|
+
ring: colors.info[200],
|
|
29
|
+
emphasisFg: colors.info[500],
|
|
30
30
|
},
|
|
31
31
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
export declare const surface: {
|
|
2
2
|
readonly canvas: "#000000";
|
|
3
3
|
readonly default: "#181521";
|
|
4
|
+
readonly panel: "#181521";
|
|
4
5
|
readonly muted: "#231F31";
|
|
5
6
|
readonly subtle: "#242034";
|
|
6
7
|
readonly elevated: "#2F2A42";
|
|
7
|
-
readonly background: "#181521";
|
|
8
8
|
readonly hover: "#2F2A42";
|
|
9
9
|
readonly active: "#3D3754";
|
|
10
10
|
readonly pressed: "#4F4867";
|
|
@@ -3,10 +3,10 @@ import { withAlpha } from '../../utils/color.js';
|
|
|
3
3
|
export const surface = {
|
|
4
4
|
canvas: colors.mono[950],
|
|
5
5
|
default: colors.vellira[950],
|
|
6
|
+
panel: colors.vellira[950],
|
|
6
7
|
muted: colors.vellira[900],
|
|
7
8
|
subtle: colors.vellira[850],
|
|
8
9
|
elevated: colors.vellira[800],
|
|
9
|
-
background: colors.vellira[950],
|
|
10
10
|
hover: colors.vellira[800],
|
|
11
11
|
active: colors.vellira[700],
|
|
12
12
|
pressed: colors.vellira[600],
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export declare const text: {
|
|
2
2
|
readonly primary: "#F4F1FB";
|
|
3
3
|
readonly secondary: "#BBB2D2";
|
|
4
|
-
readonly muted: "#
|
|
5
|
-
readonly subtle: "#
|
|
4
|
+
readonly muted: "#9CA3AF";
|
|
5
|
+
readonly subtle: "#958CB0";
|
|
6
6
|
readonly disabled: "#6B6386";
|
|
7
7
|
readonly brand: "#B8A8FF";
|
|
8
8
|
readonly interactive: "#B8A8FF";
|
|
@@ -2,8 +2,8 @@ import { colors } from '../../primitives/colors.js';
|
|
|
2
2
|
export const text = {
|
|
3
3
|
primary: colors.vellira[100],
|
|
4
4
|
secondary: colors.vellira[300],
|
|
5
|
-
muted: colors.
|
|
6
|
-
subtle: colors.
|
|
5
|
+
muted: colors.mono[500],
|
|
6
|
+
subtle: colors.vellira[400],
|
|
7
7
|
disabled: colors.vellira[500],
|
|
8
8
|
brand: colors.primary[300],
|
|
9
9
|
interactive: colors.primary[300],
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export type SemanticFocusRing = {
|
|
2
|
+
readonly color: string;
|
|
3
|
+
readonly width: string;
|
|
4
|
+
readonly offsetColor: string;
|
|
5
|
+
};
|
|
6
|
+
export declare const createComponentFocusRing: (ring: SemanticFocusRing) => {
|
|
7
|
+
readonly color: string;
|
|
8
|
+
readonly width: string;
|
|
9
|
+
readonly shadow: Readonly<{
|
|
10
|
+
kind: "shadow";
|
|
11
|
+
role: "focus-ring";
|
|
12
|
+
}>;
|
|
13
|
+
readonly offset: string;
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=componentFocusRing.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"componentFocusRing.d.ts","sourceRoot":"","sources":["../../src/factories/componentFocusRing.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,MAAM,iBAAiB;;;;;;;;CAMnD,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { createComponentFocusRingShadowIntent } from '../platform-output/component-token-intents.js';
|
|
2
|
+
export const createComponentFocusRing = (ring) => ({
|
|
3
|
+
color: ring.color,
|
|
4
|
+
width: ring.width,
|
|
5
|
+
shadow: createComponentFocusRingShadowIntent(),
|
|
6
|
+
offset: ring.offsetColor,
|
|
7
|
+
});
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { createComponentFocusRing, type SemanticFocusRing } from './componentFocusRing.js';
|
|
1
2
|
type ContextMenuState = {
|
|
2
3
|
readonly bg: string;
|
|
3
4
|
readonly fg: string;
|
|
@@ -8,16 +9,10 @@ type ContextMenuDangerStates = {
|
|
|
8
9
|
readonly active: ContextMenuState;
|
|
9
10
|
readonly disabled: ContextMenuState;
|
|
10
11
|
};
|
|
11
|
-
type ContextMenuFocusRing =
|
|
12
|
-
readonly color: string;
|
|
13
|
-
readonly width: string;
|
|
14
|
-
readonly shadow: string;
|
|
15
|
-
readonly offset: string;
|
|
16
|
-
};
|
|
12
|
+
type ContextMenuFocusRing = ReturnType<typeof createComponentFocusRing>;
|
|
17
13
|
type ContextMenuTokensConfig = {
|
|
18
14
|
contentBg: string;
|
|
19
15
|
contentBorder: string;
|
|
20
|
-
contentShadow: string;
|
|
21
16
|
itemDefault: ContextMenuState;
|
|
22
17
|
itemHover: ContextMenuState;
|
|
23
18
|
itemActive: ContextMenuState;
|
|
@@ -35,7 +30,7 @@ type ContextMenuTokensConfig = {
|
|
|
35
30
|
};
|
|
36
31
|
export type ContextMenuThemeSemantics = {
|
|
37
32
|
focus: {
|
|
38
|
-
ring:
|
|
33
|
+
ring: SemanticFocusRing;
|
|
39
34
|
};
|
|
40
35
|
menu: {
|
|
41
36
|
background: string;
|
|
@@ -49,9 +44,6 @@ export type ContextMenuThemeSemantics = {
|
|
|
49
44
|
danger: ContextMenuDangerStates;
|
|
50
45
|
};
|
|
51
46
|
};
|
|
52
|
-
shadow: {
|
|
53
|
-
lg: string;
|
|
54
|
-
};
|
|
55
47
|
text: {
|
|
56
48
|
interactive: string;
|
|
57
49
|
interactiveHover: string;
|
|
@@ -63,7 +55,11 @@ export declare const createContextMenuTokens: (config: ContextMenuTokensConfig)
|
|
|
63
55
|
readonly content: {
|
|
64
56
|
readonly bg: string;
|
|
65
57
|
readonly border: string;
|
|
66
|
-
readonly shadow:
|
|
58
|
+
readonly shadow: Readonly<{
|
|
59
|
+
kind: "shadow";
|
|
60
|
+
role: "elevation";
|
|
61
|
+
level: import("../platform-output/component-token-intents.js").ComponentShadowLevel;
|
|
62
|
+
}>;
|
|
67
63
|
};
|
|
68
64
|
readonly item: {
|
|
69
65
|
readonly default: ContextMenuState;
|
|
@@ -75,7 +71,15 @@ export declare const createContextMenuTokens: (config: ContextMenuTokensConfig)
|
|
|
75
71
|
};
|
|
76
72
|
readonly pressed: ContextMenuState;
|
|
77
73
|
readonly focus: {
|
|
78
|
-
readonly ring:
|
|
74
|
+
readonly ring: {
|
|
75
|
+
readonly color: string;
|
|
76
|
+
readonly width: string;
|
|
77
|
+
readonly shadow: Readonly<{
|
|
78
|
+
kind: "shadow";
|
|
79
|
+
role: "focus-ring";
|
|
80
|
+
}>;
|
|
81
|
+
readonly offset: string;
|
|
82
|
+
};
|
|
79
83
|
};
|
|
80
84
|
readonly disabled: ContextMenuState;
|
|
81
85
|
readonly danger: ContextMenuDangerStates;
|
|
@@ -96,7 +100,15 @@ export declare const createContextMenuTokens: (config: ContextMenuTokensConfig)
|
|
|
96
100
|
readonly bg: "transparent";
|
|
97
101
|
readonly fg: string;
|
|
98
102
|
readonly border: "transparent";
|
|
99
|
-
readonly ring:
|
|
103
|
+
readonly ring: {
|
|
104
|
+
readonly color: string;
|
|
105
|
+
readonly width: string;
|
|
106
|
+
readonly shadow: Readonly<{
|
|
107
|
+
kind: "shadow";
|
|
108
|
+
role: "focus-ring";
|
|
109
|
+
}>;
|
|
110
|
+
readonly offset: string;
|
|
111
|
+
};
|
|
100
112
|
};
|
|
101
113
|
readonly disabled: {
|
|
102
114
|
readonly bg: "transparent";
|
|
@@ -108,11 +120,15 @@ export declare const createContextMenuTokens: (config: ContextMenuTokensConfig)
|
|
|
108
120
|
readonly fg: string;
|
|
109
121
|
};
|
|
110
122
|
};
|
|
111
|
-
export declare const createContextMenuTokensFromSemantics: ({ focus, menu,
|
|
123
|
+
export declare const createContextMenuTokensFromSemantics: ({ focus, menu, text, }: ContextMenuThemeSemantics) => {
|
|
112
124
|
readonly content: {
|
|
113
125
|
readonly bg: string;
|
|
114
126
|
readonly border: string;
|
|
115
|
-
readonly shadow:
|
|
127
|
+
readonly shadow: Readonly<{
|
|
128
|
+
kind: "shadow";
|
|
129
|
+
role: "elevation";
|
|
130
|
+
level: import("../platform-output/component-token-intents.js").ComponentShadowLevel;
|
|
131
|
+
}>;
|
|
116
132
|
};
|
|
117
133
|
readonly item: {
|
|
118
134
|
readonly default: ContextMenuState;
|
|
@@ -124,7 +140,15 @@ export declare const createContextMenuTokensFromSemantics: ({ focus, menu, shado
|
|
|
124
140
|
};
|
|
125
141
|
readonly pressed: ContextMenuState;
|
|
126
142
|
readonly focus: {
|
|
127
|
-
readonly ring:
|
|
143
|
+
readonly ring: {
|
|
144
|
+
readonly color: string;
|
|
145
|
+
readonly width: string;
|
|
146
|
+
readonly shadow: Readonly<{
|
|
147
|
+
kind: "shadow";
|
|
148
|
+
role: "focus-ring";
|
|
149
|
+
}>;
|
|
150
|
+
readonly offset: string;
|
|
151
|
+
};
|
|
128
152
|
};
|
|
129
153
|
readonly disabled: ContextMenuState;
|
|
130
154
|
readonly danger: ContextMenuDangerStates;
|
|
@@ -145,7 +169,15 @@ export declare const createContextMenuTokensFromSemantics: ({ focus, menu, shado
|
|
|
145
169
|
readonly bg: "transparent";
|
|
146
170
|
readonly fg: string;
|
|
147
171
|
readonly border: "transparent";
|
|
148
|
-
readonly ring:
|
|
172
|
+
readonly ring: {
|
|
173
|
+
readonly color: string;
|
|
174
|
+
readonly width: string;
|
|
175
|
+
readonly shadow: Readonly<{
|
|
176
|
+
kind: "shadow";
|
|
177
|
+
role: "focus-ring";
|
|
178
|
+
}>;
|
|
179
|
+
readonly offset: string;
|
|
180
|
+
};
|
|
149
181
|
};
|
|
150
182
|
readonly disabled: {
|
|
151
183
|
readonly bg: "transparent";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createContextMenuTokens.d.ts","sourceRoot":"","sources":["../../src/factories/createContextMenuTokens.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"createContextMenuTokens.d.ts","sourceRoot":"","sources":["../../src/factories/createContextMenuTokens.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,wBAAwB,EACxB,KAAK,iBAAiB,EACvB,MAAM,yBAAyB,CAAC;AAEjC,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,CAAC,OAAO,EAAE,gBAAgB,CAAC;IACnC,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAC;IACjC,QAAQ,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAEF,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAExE,KAAK,uBAAuB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,SAAS,EAAE,gBAAgB,CAAC;IAC5B,UAAU,EAAE,gBAAgB,CAAC;IAC7B,WAAW,EAAE,gBAAgB,CAAC;IAC9B,aAAa,EAAE,oBAAoB,CAAC;IACpC,YAAY,EAAE,gBAAgB,CAAC;IAC/B,UAAU,EAAE,uBAAuB,CAAC;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,oBAAoB,CAAC;IACvC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,EAAE;QACL,IAAI,EAAE,iBAAiB,CAAC;KACzB,CAAC;IACF,IAAI,EAAE;QACJ,UAAU,EAAE,MAAM,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE;YACJ,OAAO,EAAE,gBAAgB,CAAC;YAC1B,KAAK,EAAE,gBAAgB,CAAC;YACxB,MAAM,EAAE,gBAAgB,CAAC;YACzB,OAAO,EAAE,gBAAgB,CAAC;YAC1B,QAAQ,EAAE,gBAAgB,CAAC;YAC3B,MAAM,EAAE,uBAAuB,CAAC;SACjC,CAAC;KACH,CAAC;IACF,IAAI,EAAE;QACJ,WAAW,EAAE,MAAM,CAAC;QACpB,gBAAgB,EAAE,MAAM,CAAC;QACzB,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,QAAQ,uBAAuB;;;;;;;;;;;;;;;yBAxDxD,MAAM;yBACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GR,CAAC;AAEd,eAAO,MAAM,oCAAoC,GAAI,wBAIlD,yBAAyB;;;;;;;;;;;;;;;yBAjHb,MAAM;yBACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkIjB,CAAC"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
import { createComponentShadowIntent } from '../platform-output/component-token-intents.js';
|
|
2
|
+
import { createComponentFocusRing, } from './componentFocusRing.js';
|
|
1
3
|
export const createContextMenuTokens = (config) => ({
|
|
2
4
|
content: {
|
|
3
5
|
bg: config.contentBg,
|
|
4
6
|
border: config.contentBorder,
|
|
5
|
-
shadow:
|
|
7
|
+
shadow: createComponentShadowIntent('lg'),
|
|
6
8
|
},
|
|
7
9
|
item: {
|
|
8
10
|
default: config.itemDefault,
|
|
@@ -46,22 +48,21 @@ export const createContextMenuTokens = (config) => ({
|
|
|
46
48
|
fg: config.groupLabelFg,
|
|
47
49
|
},
|
|
48
50
|
});
|
|
49
|
-
export const createContextMenuTokensFromSemantics = ({ focus, menu,
|
|
51
|
+
export const createContextMenuTokensFromSemantics = ({ focus, menu, text, }) => createContextMenuTokens({
|
|
50
52
|
contentBg: menu.background,
|
|
51
53
|
contentBorder: menu.border,
|
|
52
|
-
contentShadow: shadow.lg,
|
|
53
54
|
itemDefault: menu.item.default,
|
|
54
55
|
itemHover: menu.item.hover,
|
|
55
56
|
itemActive: menu.item.active,
|
|
56
57
|
itemPressed: menu.item.pressed,
|
|
57
|
-
itemFocusRing: focus.ring,
|
|
58
|
+
itemFocusRing: createComponentFocusRing(focus.ring),
|
|
58
59
|
itemDisabled: menu.item.disabled,
|
|
59
60
|
itemDanger: menu.item.danger,
|
|
60
61
|
triggerDefaultFg: text.interactive,
|
|
61
62
|
triggerHoverBg: menu.item.hover.bg,
|
|
62
63
|
triggerHoverFg: text.interactiveHover,
|
|
63
64
|
triggerFocusFg: text.interactive,
|
|
64
|
-
triggerFocusRing: focus.ring,
|
|
65
|
+
triggerFocusRing: createComponentFocusRing(focus.ring),
|
|
65
66
|
triggerDisabledFg: text.disabled,
|
|
66
67
|
groupLabelFg: text.secondary,
|
|
67
68
|
});
|
|
@@ -1,15 +1,10 @@
|
|
|
1
|
-
type
|
|
2
|
-
|
|
3
|
-
width: string;
|
|
4
|
-
shadow: string;
|
|
5
|
-
offset: string;
|
|
6
|
-
};
|
|
1
|
+
import { createComponentFocusRing, type SemanticFocusRing } from './componentFocusRing.js';
|
|
2
|
+
type ModalFocusRing = ReturnType<typeof createComponentFocusRing>;
|
|
7
3
|
type ModalTokensConfig = {
|
|
8
4
|
overlayBg: string;
|
|
9
5
|
contentBg: string;
|
|
10
6
|
contentFg: string;
|
|
11
7
|
contentBorder: string;
|
|
12
|
-
contentShadow: string;
|
|
13
8
|
titleFg: string;
|
|
14
9
|
descriptionFg: string;
|
|
15
10
|
closeButtonDefaultFg: string;
|
|
@@ -31,11 +26,11 @@ export type ModalThemeSemantics = {
|
|
|
31
26
|
closeButtonHoverBg?: string;
|
|
32
27
|
closeButtonPressedBg?: string;
|
|
33
28
|
focus: {
|
|
34
|
-
ring:
|
|
29
|
+
ring: SemanticFocusRing;
|
|
35
30
|
};
|
|
36
31
|
overlay: {
|
|
37
32
|
backdrop: string;
|
|
38
|
-
|
|
33
|
+
dialog: {
|
|
39
34
|
bg: string;
|
|
40
35
|
border: string;
|
|
41
36
|
};
|
|
@@ -44,9 +39,6 @@ export type ModalThemeSemantics = {
|
|
|
44
39
|
lg: number;
|
|
45
40
|
full: number;
|
|
46
41
|
};
|
|
47
|
-
shadow: {
|
|
48
|
-
xl: string;
|
|
49
|
-
};
|
|
50
42
|
spacing: {
|
|
51
43
|
1: number;
|
|
52
44
|
3: number;
|
|
@@ -74,14 +66,20 @@ export declare const createModalTokens: (config: ModalTokensConfig) => {
|
|
|
74
66
|
readonly bg: string;
|
|
75
67
|
readonly fg: string;
|
|
76
68
|
readonly border: string;
|
|
77
|
-
readonly shadow:
|
|
69
|
+
readonly shadow: Readonly<{
|
|
70
|
+
kind: "shadow";
|
|
71
|
+
role: "elevation";
|
|
72
|
+
level: import("../platform-output/component-token-intents.js").ComponentShadowLevel;
|
|
73
|
+
}>;
|
|
78
74
|
readonly borderWidth: 1;
|
|
79
75
|
readonly radius: number;
|
|
80
76
|
readonly padding: number;
|
|
81
77
|
readonly gap: number;
|
|
82
78
|
readonly minWidth: 320;
|
|
83
|
-
readonly maxHeight:
|
|
84
|
-
|
|
79
|
+
readonly maxHeight: Readonly<{
|
|
80
|
+
kind: "viewport-height";
|
|
81
|
+
ratio: number;
|
|
82
|
+
}>;
|
|
85
83
|
readonly viewportMargin: number;
|
|
86
84
|
readonly topOffset: number;
|
|
87
85
|
readonly zIndexOffset: 1;
|
|
@@ -131,7 +129,15 @@ export declare const createModalTokens: (config: ModalTokensConfig) => {
|
|
|
131
129
|
readonly border: "transparent";
|
|
132
130
|
};
|
|
133
131
|
readonly focus: {
|
|
134
|
-
readonly ring:
|
|
132
|
+
readonly ring: {
|
|
133
|
+
readonly color: string;
|
|
134
|
+
readonly width: string;
|
|
135
|
+
readonly shadow: Readonly<{
|
|
136
|
+
kind: "shadow";
|
|
137
|
+
role: "focus-ring";
|
|
138
|
+
}>;
|
|
139
|
+
readonly offset: string;
|
|
140
|
+
};
|
|
135
141
|
};
|
|
136
142
|
readonly disabled: {
|
|
137
143
|
readonly bg: "transparent";
|
|
@@ -145,7 +151,7 @@ export declare const createModalTokens: (config: ModalTokensConfig) => {
|
|
|
145
151
|
readonly openDuration: "180ms";
|
|
146
152
|
};
|
|
147
153
|
};
|
|
148
|
-
export declare const createModalTokensFromSemantics: ({ closeButtonHoverBg, closeButtonPressedBg, focus, overlay, radius,
|
|
154
|
+
export declare const createModalTokensFromSemantics: ({ closeButtonHoverBg, closeButtonPressedBg, focus, overlay, radius, spacing, surface, text, }: ModalThemeSemantics) => {
|
|
149
155
|
readonly overlay: {
|
|
150
156
|
readonly bg: string;
|
|
151
157
|
readonly blur: 4;
|
|
@@ -155,14 +161,20 @@ export declare const createModalTokensFromSemantics: ({ closeButtonHoverBg, clos
|
|
|
155
161
|
readonly bg: string;
|
|
156
162
|
readonly fg: string;
|
|
157
163
|
readonly border: string;
|
|
158
|
-
readonly shadow:
|
|
164
|
+
readonly shadow: Readonly<{
|
|
165
|
+
kind: "shadow";
|
|
166
|
+
role: "elevation";
|
|
167
|
+
level: import("../platform-output/component-token-intents.js").ComponentShadowLevel;
|
|
168
|
+
}>;
|
|
159
169
|
readonly borderWidth: 1;
|
|
160
170
|
readonly radius: number;
|
|
161
171
|
readonly padding: number;
|
|
162
172
|
readonly gap: number;
|
|
163
173
|
readonly minWidth: 320;
|
|
164
|
-
readonly maxHeight:
|
|
165
|
-
|
|
174
|
+
readonly maxHeight: Readonly<{
|
|
175
|
+
kind: "viewport-height";
|
|
176
|
+
ratio: number;
|
|
177
|
+
}>;
|
|
166
178
|
readonly viewportMargin: number;
|
|
167
179
|
readonly topOffset: number;
|
|
168
180
|
readonly zIndexOffset: 1;
|
|
@@ -212,7 +224,15 @@ export declare const createModalTokensFromSemantics: ({ closeButtonHoverBg, clos
|
|
|
212
224
|
readonly border: "transparent";
|
|
213
225
|
};
|
|
214
226
|
readonly focus: {
|
|
215
|
-
readonly ring:
|
|
227
|
+
readonly ring: {
|
|
228
|
+
readonly color: string;
|
|
229
|
+
readonly width: string;
|
|
230
|
+
readonly shadow: Readonly<{
|
|
231
|
+
kind: "shadow";
|
|
232
|
+
role: "focus-ring";
|
|
233
|
+
}>;
|
|
234
|
+
readonly offset: string;
|
|
235
|
+
};
|
|
216
236
|
};
|
|
217
237
|
readonly disabled: {
|
|
218
238
|
readonly bg: "transparent";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createModalTokens.d.ts","sourceRoot":"","sources":["../../src/factories/createModalTokens.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"createModalTokens.d.ts","sourceRoot":"","sources":["../../src/factories/createModalTokens.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,wBAAwB,EACxB,KAAK,iBAAiB,EACvB,MAAM,yBAAyB,CAAC;AAEjC,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAElE,KAAK,iBAAiB,GAAG;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,oBAAoB,EAAE,cAAc,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,EAAE;QACL,IAAI,EAAE,iBAAiB,CAAC;KACzB,CAAC;IACF,OAAO,EAAE;QACP,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE;YACN,EAAE,EAAE,MAAM,CAAC;YACX,MAAM,EAAE,MAAM,CAAC;SAChB,CAAC;KACH,CAAC;IACF,MAAM,EAAE;QACN,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,OAAO,EAAE;QACP,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAaF,eAAO,MAAM,iBAAiB,GAAI,QAAQ,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0F9C,CAAC;AAEd,eAAO,MAAM,8BAA8B,GAAI,+FAS5C,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBlB,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import { createComponentShadowIntent, createComponentViewportHeightIntent, } from '../platform-output/component-token-intents.js';
|
|
2
|
+
import { createComponentFocusRing, } from './componentFocusRing.js';
|
|
1
3
|
const modalLayout = {
|
|
2
|
-
maxHeight:
|
|
3
|
-
nativeMaxHeight: '90%',
|
|
4
|
+
maxHeight: createComponentViewportHeightIntent(0.9),
|
|
4
5
|
zIndexOffset: 1,
|
|
5
6
|
};
|
|
6
7
|
const modalMotion = {
|
|
@@ -18,14 +19,13 @@ export const createModalTokens = (config) => ({
|
|
|
18
19
|
bg: config.contentBg,
|
|
19
20
|
fg: config.contentFg,
|
|
20
21
|
border: config.contentBorder,
|
|
21
|
-
shadow:
|
|
22
|
+
shadow: createComponentShadowIntent('xl'),
|
|
22
23
|
borderWidth: 1,
|
|
23
24
|
radius: config.radiusLg,
|
|
24
25
|
padding: config.spacing4,
|
|
25
26
|
gap: config.spacing4,
|
|
26
27
|
minWidth: 320,
|
|
27
28
|
maxHeight: modalLayout.maxHeight,
|
|
28
|
-
nativeMaxHeight: modalLayout.nativeMaxHeight,
|
|
29
29
|
viewportMargin: config.spacing8,
|
|
30
30
|
topOffset: config.spacing10,
|
|
31
31
|
zIndexOffset: modalLayout.zIndexOffset,
|
|
@@ -85,12 +85,11 @@ export const createModalTokens = (config) => ({
|
|
|
85
85
|
},
|
|
86
86
|
motion: modalMotion,
|
|
87
87
|
});
|
|
88
|
-
export const createModalTokensFromSemantics = ({ closeButtonHoverBg, closeButtonPressedBg, focus, overlay, radius,
|
|
88
|
+
export const createModalTokensFromSemantics = ({ closeButtonHoverBg, closeButtonPressedBg, focus, overlay, radius, spacing, surface, text, }) => createModalTokens({
|
|
89
89
|
overlayBg: overlay.backdrop,
|
|
90
|
-
contentBg: overlay.
|
|
90
|
+
contentBg: overlay.dialog.bg,
|
|
91
91
|
contentFg: text.primary,
|
|
92
|
-
contentBorder: overlay.
|
|
93
|
-
contentShadow: shadow.xl,
|
|
92
|
+
contentBorder: overlay.dialog.border,
|
|
94
93
|
titleFg: text.primary,
|
|
95
94
|
descriptionFg: text.secondary,
|
|
96
95
|
closeButtonDefaultFg: text.secondary,
|
|
@@ -99,7 +98,7 @@ export const createModalTokensFromSemantics = ({ closeButtonHoverBg, closeButton
|
|
|
99
98
|
closeButtonPressedBg: closeButtonPressedBg ?? surface.pressed,
|
|
100
99
|
closeButtonPressedFg: text.primary,
|
|
101
100
|
closeButtonDisabledFg: text.disabled,
|
|
102
|
-
closeButtonFocusRing: focus.ring,
|
|
101
|
+
closeButtonFocusRing: createComponentFocusRing(focus.ring),
|
|
103
102
|
radiusLg: radius.lg,
|
|
104
103
|
radiusFull: radius.full,
|
|
105
104
|
spacing1: spacing[1],
|
|
@@ -1,11 +1,7 @@
|
|
|
1
|
-
import type { shadows } from '../tokens/shadows.js';
|
|
2
|
-
type NativeShadowToken = (typeof shadows)[keyof typeof shadows];
|
|
3
1
|
type PopoverTokensConfig = {
|
|
4
2
|
contentBg: string;
|
|
5
3
|
contentFg: string;
|
|
6
4
|
contentBorder: string;
|
|
7
|
-
contentWebShadow: string;
|
|
8
|
-
contentNativeShadow: NativeShadowToken;
|
|
9
5
|
titleFg: string;
|
|
10
6
|
descriptionFg: string;
|
|
11
7
|
radiusLg: number;
|
|
@@ -14,17 +10,11 @@ type PopoverTokensConfig = {
|
|
|
14
10
|
};
|
|
15
11
|
export type PopoverThemeSources = {
|
|
16
12
|
overlay: {
|
|
17
|
-
|
|
13
|
+
floating: {
|
|
18
14
|
bg: string;
|
|
19
15
|
border: string;
|
|
20
16
|
};
|
|
21
17
|
};
|
|
22
|
-
shadow: {
|
|
23
|
-
lg: string;
|
|
24
|
-
};
|
|
25
|
-
shadows: {
|
|
26
|
-
lg: NativeShadowToken;
|
|
27
|
-
};
|
|
28
18
|
text: {
|
|
29
19
|
primary: string;
|
|
30
20
|
secondary: string;
|
|
@@ -41,10 +31,11 @@ export declare const createPopoverTokens: (config: PopoverTokensConfig) => {
|
|
|
41
31
|
readonly bg: string;
|
|
42
32
|
readonly fg: string;
|
|
43
33
|
readonly border: string;
|
|
44
|
-
readonly shadow: {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
34
|
+
readonly shadow: Readonly<{
|
|
35
|
+
kind: "shadow";
|
|
36
|
+
role: "elevation";
|
|
37
|
+
level: import("../platform-output/component-token-intents.js").ComponentShadowLevel;
|
|
38
|
+
}>;
|
|
48
39
|
readonly borderWidth: 1;
|
|
49
40
|
readonly radius: number;
|
|
50
41
|
readonly padding: number;
|
|
@@ -64,15 +55,16 @@ export declare const createPopoverTokens: (config: PopoverTokensConfig) => {
|
|
|
64
55
|
readonly border: string;
|
|
65
56
|
};
|
|
66
57
|
};
|
|
67
|
-
export declare const createPopoverTokensFromTheme: ({ overlay,
|
|
58
|
+
export declare const createPopoverTokensFromTheme: ({ overlay, text, radius, spacing, }: PopoverThemeSources) => {
|
|
68
59
|
readonly content: {
|
|
69
60
|
readonly bg: string;
|
|
70
61
|
readonly fg: string;
|
|
71
62
|
readonly border: string;
|
|
72
|
-
readonly shadow: {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
63
|
+
readonly shadow: Readonly<{
|
|
64
|
+
kind: "shadow";
|
|
65
|
+
role: "elevation";
|
|
66
|
+
level: import("../platform-output/component-token-intents.js").ComponentShadowLevel;
|
|
67
|
+
}>;
|
|
76
68
|
readonly borderWidth: 1;
|
|
77
69
|
readonly radius: number;
|
|
78
70
|
readonly padding: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createPopoverTokens.d.ts","sourceRoot":"","sources":["../../src/factories/createPopoverTokens.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"createPopoverTokens.d.ts","sourceRoot":"","sources":["../../src/factories/createPopoverTokens.ts"],"names":[],"mappings":"AAEA,KAAK,mBAAmB,GAAG;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE;QACP,QAAQ,EAAE;YACR,EAAE,EAAE,MAAM,CAAC;YACX,MAAM,EAAE,MAAM,CAAC;SAChB,CAAC;KACH,CAAC;IACF,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,MAAM,EAAE;QACN,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,OAAO,EAAE;QACP,QAAQ,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KAChC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,QAAQ,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BlD,CAAC;AAEd,eAAO,MAAM,4BAA4B,GAAI,qCAK1C,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUlB,CAAC"}
|
|
@@ -1,12 +1,10 @@
|
|
|
1
|
+
import { createComponentShadowIntent } from '../platform-output/component-token-intents.js';
|
|
1
2
|
export const createPopoverTokens = (config) => ({
|
|
2
3
|
content: {
|
|
3
4
|
bg: config.contentBg,
|
|
4
5
|
fg: config.contentFg,
|
|
5
6
|
border: config.contentBorder,
|
|
6
|
-
shadow:
|
|
7
|
-
web: config.contentWebShadow,
|
|
8
|
-
native: config.contentNativeShadow,
|
|
9
|
-
},
|
|
7
|
+
shadow: createComponentShadowIntent('lg'),
|
|
10
8
|
borderWidth: 1,
|
|
11
9
|
radius: config.radiusLg,
|
|
12
10
|
padding: config.spacing4,
|
|
@@ -26,12 +24,10 @@ export const createPopoverTokens = (config) => ({
|
|
|
26
24
|
border: config.contentBorder,
|
|
27
25
|
},
|
|
28
26
|
});
|
|
29
|
-
export const createPopoverTokensFromTheme = ({ overlay,
|
|
30
|
-
contentBg: overlay.
|
|
27
|
+
export const createPopoverTokensFromTheme = ({ overlay, text, radius, spacing, }) => createPopoverTokens({
|
|
28
|
+
contentBg: overlay.floating.bg,
|
|
31
29
|
contentFg: text.primary,
|
|
32
|
-
contentBorder: overlay.
|
|
33
|
-
contentWebShadow: shadow.lg,
|
|
34
|
-
contentNativeShadow: shadows.lg,
|
|
30
|
+
contentBorder: overlay.floating.border,
|
|
35
31
|
titleFg: text.primary,
|
|
36
32
|
descriptionFg: text.secondary,
|
|
37
33
|
radiusLg: radius.lg,
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import { type ComponentElevationShadowIntent } from '../platform-output/component-token-intents.js';
|
|
1
2
|
type TooltipContentTokens = {
|
|
2
3
|
bg: string;
|
|
3
4
|
fg: string;
|
|
4
5
|
border: string;
|
|
5
|
-
shadow:
|
|
6
|
+
shadow: ComponentElevationShadowIntent;
|
|
6
7
|
borderWidth: number;
|
|
7
8
|
radius: number;
|
|
8
9
|
paddingX: number;
|
|
@@ -28,7 +29,6 @@ type TooltipTokensConfig = {
|
|
|
28
29
|
contentBg: string;
|
|
29
30
|
contentFg: string;
|
|
30
31
|
contentBorder: string;
|
|
31
|
-
contentShadow: string;
|
|
32
32
|
contentBorderWidth?: number;
|
|
33
33
|
contentRadius: number;
|
|
34
34
|
contentPaddingX: number;
|
|
@@ -60,9 +60,6 @@ export type TooltipThemeSources = {
|
|
|
60
60
|
border: string;
|
|
61
61
|
};
|
|
62
62
|
};
|
|
63
|
-
shadow: {
|
|
64
|
-
md: string;
|
|
65
|
-
};
|
|
66
63
|
radius: {
|
|
67
64
|
sm: number;
|
|
68
65
|
};
|
|
@@ -80,7 +77,7 @@ export type TooltipThemeSources = {
|
|
|
80
77
|
};
|
|
81
78
|
};
|
|
82
79
|
};
|
|
83
|
-
export declare const createTooltipTokens: ({ contentBg, contentFg, contentBorder,
|
|
84
|
-
export declare const createTooltipTokensFromTheme: ({ overlay,
|
|
80
|
+
export declare const createTooltipTokens: ({ contentBg, contentFg, contentBorder, contentBorderWidth, contentRadius, contentPaddingX, contentPaddingY, contentMaxWidth, contentCompactMaxWidth, contentCompactPaddingX, contentCompactPaddingY, contentFontSize, contentLineHeight, contentCompactFontSize, contentCompactLineHeight, contentAnimationDuration, contentTranslateY, contentScale, arrowBg, arrowSize, arrowCompactSize, }: TooltipTokensConfig) => TooltipTokens;
|
|
81
|
+
export declare const createTooltipTokensFromTheme: ({ overlay, radius, spacing, typography, }: TooltipThemeSources) => TooltipTokens;
|
|
85
82
|
export {};
|
|
86
83
|
//# sourceMappingURL=createTooltipTokens.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTooltipTokens.d.ts","sourceRoot":"","sources":["../../src/factories/createTooltipTokens.ts"],"names":[],"mappings":"AAAA,KAAK,oBAAoB,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"createTooltipTokens.d.ts","sourceRoot":"","sources":["../../src/factories/createTooltipTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,8BAA8B,EAEpC,MAAM,+CAA+C,CAAC;AAEvD,KAAK,oBAAoB,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,8BAA8B,CAAC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,MAAM,CAAC;IAC/B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,wBAAwB,EAAE,MAAM,CAAC;IACjC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,oBAAoB,CAAC;IAC9B,KAAK,EAAE,kBAAkB,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE;QACP,OAAO,EAAE;YACP,EAAE,EAAE,MAAM,CAAC;YACX,EAAE,EAAE,MAAM,CAAC;YACX,MAAM,EAAE,MAAM,CAAC;SAChB,CAAC;KACH,CAAC;IACF,MAAM,EAAE;QACN,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,OAAO,EAAE;QACP,QAAQ,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KAChC,CAAC;IACF,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,EAAE,EAAE,MAAM,CAAC;YACX,EAAE,EAAE,MAAM,CAAC;SACZ,CAAC;QACF,UAAU,EAAE;YACV,EAAE,EAAE,MAAM,CAAC;YACX,EAAE,EAAE,MAAM,CAAC;SACZ,CAAC;KACH,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,+XAsBjC,mBAAmB,KAAG,aA6BZ,CAAC;AAEd,eAAO,MAAM,4BAA4B,GAAI,2CAK1C,mBAAmB,kBAclB,CAAC"}
|