@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
|
@@ -2,7 +2,11 @@ export declare const contextMenu: {
|
|
|
2
2
|
readonly content: {
|
|
3
3
|
readonly bg: string;
|
|
4
4
|
readonly border: string;
|
|
5
|
-
readonly shadow:
|
|
5
|
+
readonly shadow: Readonly<{
|
|
6
|
+
kind: "shadow";
|
|
7
|
+
role: "elevation";
|
|
8
|
+
level: import("../../platform-output/component-token-intents.js").ComponentShadowLevel;
|
|
9
|
+
}>;
|
|
6
10
|
};
|
|
7
11
|
readonly item: {
|
|
8
12
|
readonly default: {
|
|
@@ -26,7 +30,10 @@ export declare const contextMenu: {
|
|
|
26
30
|
readonly ring: {
|
|
27
31
|
readonly color: string;
|
|
28
32
|
readonly width: string;
|
|
29
|
-
readonly shadow:
|
|
33
|
+
readonly shadow: Readonly<{
|
|
34
|
+
kind: "shadow";
|
|
35
|
+
role: "focus-ring";
|
|
36
|
+
}>;
|
|
30
37
|
readonly offset: string;
|
|
31
38
|
};
|
|
32
39
|
};
|
|
@@ -72,7 +79,10 @@ export declare const contextMenu: {
|
|
|
72
79
|
readonly ring: {
|
|
73
80
|
readonly color: string;
|
|
74
81
|
readonly width: string;
|
|
75
|
-
readonly shadow:
|
|
82
|
+
readonly shadow: Readonly<{
|
|
83
|
+
kind: "shadow";
|
|
84
|
+
role: "focus-ring";
|
|
85
|
+
}>;
|
|
76
86
|
readonly offset: string;
|
|
77
87
|
};
|
|
78
88
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"contextMenu.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/contextMenu.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"contextMenu.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/contextMenu.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAItB,CAAC"}
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import { createContextMenuTokensFromSemantics } from '../../factories/createContextMenuTokens.js';
|
|
2
2
|
import { focus } from '../semantic/focus.js';
|
|
3
3
|
import { menu } from '../semantic/menu.js';
|
|
4
|
-
import { shadow } from '../semantic/shadow.js';
|
|
5
4
|
import { text } from '../semantic/text.js';
|
|
6
5
|
export const contextMenu = createContextMenuTokensFromSemantics({
|
|
7
6
|
focus,
|
|
8
7
|
menu,
|
|
9
|
-
shadow,
|
|
10
8
|
text,
|
|
11
9
|
});
|
|
@@ -271,10 +271,13 @@ export declare const dropdown: {
|
|
|
271
271
|
readonly fg: "#FBBF24";
|
|
272
272
|
readonly border: "#FCD34D";
|
|
273
273
|
readonly ring: {
|
|
274
|
-
readonly color:
|
|
275
|
-
readonly width:
|
|
276
|
-
readonly shadow:
|
|
277
|
-
|
|
274
|
+
readonly color: string;
|
|
275
|
+
readonly width: string;
|
|
276
|
+
readonly shadow: Readonly<{
|
|
277
|
+
kind: "shadow";
|
|
278
|
+
role: "focus-ring";
|
|
279
|
+
}>;
|
|
280
|
+
readonly offset: string;
|
|
278
281
|
};
|
|
279
282
|
};
|
|
280
283
|
readonly disabled: {
|
|
@@ -287,7 +290,11 @@ export declare const dropdown: {
|
|
|
287
290
|
readonly bg: "#111827";
|
|
288
291
|
readonly fg: "#FFFFFF";
|
|
289
292
|
readonly border: "#FFFFFF";
|
|
290
|
-
readonly shadow:
|
|
293
|
+
readonly shadow: Readonly<{
|
|
294
|
+
kind: "shadow";
|
|
295
|
+
role: "elevation";
|
|
296
|
+
level: import("../../platform-output/component-token-intents.js").ComponentShadowLevel;
|
|
297
|
+
}>;
|
|
291
298
|
};
|
|
292
299
|
readonly item: {
|
|
293
300
|
readonly default: {
|
|
@@ -309,10 +316,13 @@ export declare const dropdown: {
|
|
|
309
316
|
};
|
|
310
317
|
readonly focus: {
|
|
311
318
|
readonly ring: {
|
|
312
|
-
readonly color:
|
|
313
|
-
readonly width:
|
|
314
|
-
readonly shadow:
|
|
315
|
-
|
|
319
|
+
readonly color: string;
|
|
320
|
+
readonly width: string;
|
|
321
|
+
readonly shadow: Readonly<{
|
|
322
|
+
kind: "shadow";
|
|
323
|
+
role: "focus-ring";
|
|
324
|
+
}>;
|
|
325
|
+
readonly offset: string;
|
|
316
326
|
};
|
|
317
327
|
};
|
|
318
328
|
readonly disabled: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/dropdown.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/dropdown.ts"],"names":[],"mappings":"AAyEA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+FX,CAAC"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
+
import { createComponentFocusRing } from '../../factories/componentFocusRing.js';
|
|
1
2
|
import { createDropdownPalette } from '../../factories/createDropdownPalette.js';
|
|
2
3
|
import { createInputColorPalette } from '../../factories/createInputPalette.js';
|
|
4
|
+
import { createComponentShadowIntent } from '../../platform-output/component-token-intents.js';
|
|
3
5
|
import { colors } from '../../primitives/colors.js';
|
|
4
6
|
import { border } from '../semantic/border.js';
|
|
5
7
|
import { focus } from '../semantic/focus.js';
|
|
6
8
|
import { menu } from '../semantic/menu.js';
|
|
7
|
-
import { shadow } from '../semantic/shadow.js';
|
|
8
9
|
import { status } from '../semantic/status.js';
|
|
9
10
|
import { surface } from '../semantic/surface.js';
|
|
10
11
|
import { text } from '../semantic/text.js';
|
|
@@ -99,8 +100,8 @@ export const dropdown = {
|
|
|
99
100
|
focus: {
|
|
100
101
|
bg: 'transparent',
|
|
101
102
|
fg: text.interactive,
|
|
102
|
-
border: border.
|
|
103
|
-
ring: focus.ring,
|
|
103
|
+
border: border.interactive,
|
|
104
|
+
ring: createComponentFocusRing(focus.ring),
|
|
104
105
|
},
|
|
105
106
|
disabled: {
|
|
106
107
|
bg: surface.disabled,
|
|
@@ -112,7 +113,7 @@ export const dropdown = {
|
|
|
112
113
|
bg: menu.background,
|
|
113
114
|
fg: menu.item.default.fg,
|
|
114
115
|
border: menu.border,
|
|
115
|
-
shadow:
|
|
116
|
+
shadow: createComponentShadowIntent('lg'),
|
|
116
117
|
},
|
|
117
118
|
item: {
|
|
118
119
|
default: menu.item.default,
|
|
@@ -123,7 +124,7 @@ export const dropdown = {
|
|
|
123
124
|
},
|
|
124
125
|
pressed: menu.item.pressed,
|
|
125
126
|
focus: {
|
|
126
|
-
ring: focus.ring,
|
|
127
|
+
ring: createComponentFocusRing(focus.ring),
|
|
127
128
|
},
|
|
128
129
|
disabled: menu.item.disabled,
|
|
129
130
|
danger: {
|
|
@@ -127,7 +127,7 @@ export declare const input: {
|
|
|
127
127
|
readonly fg: "#EEE8FA";
|
|
128
128
|
readonly border: "#6B7280";
|
|
129
129
|
readonly placeholder: "#D1D5DB";
|
|
130
|
-
readonly icon: "#
|
|
130
|
+
readonly icon: "#D1D5DB";
|
|
131
131
|
};
|
|
132
132
|
readonly icon: {
|
|
133
133
|
readonly default: "#FFFFFF";
|
|
@@ -135,12 +135,12 @@ export declare const input: {
|
|
|
135
135
|
readonly secondary: "#E5E7EB";
|
|
136
136
|
readonly success: "#5EEAD4";
|
|
137
137
|
readonly danger: "#FDA4AF";
|
|
138
|
-
readonly muted: "#
|
|
138
|
+
readonly muted: "#D1D5DB";
|
|
139
139
|
readonly inverse: "#000000";
|
|
140
140
|
readonly brand: "#FCD34D";
|
|
141
141
|
};
|
|
142
142
|
readonly clearButton: {
|
|
143
|
-
readonly fg: "#
|
|
143
|
+
readonly fg: "#D1D5DB";
|
|
144
144
|
readonly hoverFg: "#FB7185";
|
|
145
145
|
readonly hoverBg: "#4C0519";
|
|
146
146
|
readonly focusBg: "#1F2937";
|
|
@@ -163,7 +163,7 @@ export declare const input: {
|
|
|
163
163
|
readonly fg: "#EEE8FA";
|
|
164
164
|
};
|
|
165
165
|
readonly spinner: {
|
|
166
|
-
readonly fg: "#
|
|
166
|
+
readonly fg: "#D1D5DB";
|
|
167
167
|
};
|
|
168
168
|
};
|
|
169
169
|
//# sourceMappingURL=input.d.ts.map
|
|
@@ -97,14 +97,14 @@ export const input = {
|
|
|
97
97
|
hover: {
|
|
98
98
|
bg: surface.hover,
|
|
99
99
|
fg: text.primary,
|
|
100
|
-
border: border.
|
|
100
|
+
border: border.interactive,
|
|
101
101
|
placeholder: text.secondary,
|
|
102
|
-
icon: icons.
|
|
102
|
+
icon: icons.interactiveHover,
|
|
103
103
|
},
|
|
104
104
|
focus: {
|
|
105
105
|
bg: 'transparent',
|
|
106
106
|
fg: text.primary,
|
|
107
|
-
border: border.
|
|
107
|
+
border: border.interactive,
|
|
108
108
|
ring: focus.ring.color,
|
|
109
109
|
placeholder: text.secondary,
|
|
110
110
|
icon: icons.brand,
|
|
@@ -129,7 +129,7 @@ export const input = {
|
|
|
129
129
|
},
|
|
130
130
|
icon: {
|
|
131
131
|
default: icons.default,
|
|
132
|
-
primary: icons.
|
|
132
|
+
primary: icons.interactive,
|
|
133
133
|
secondary: icons.secondary,
|
|
134
134
|
success: icons.success,
|
|
135
135
|
danger: icons.danger,
|
|
@@ -8,14 +8,20 @@ export declare const modal: {
|
|
|
8
8
|
readonly bg: string;
|
|
9
9
|
readonly fg: string;
|
|
10
10
|
readonly border: string;
|
|
11
|
-
readonly shadow:
|
|
11
|
+
readonly shadow: Readonly<{
|
|
12
|
+
kind: "shadow";
|
|
13
|
+
role: "elevation";
|
|
14
|
+
level: import("../../platform-output/component-token-intents.js").ComponentShadowLevel;
|
|
15
|
+
}>;
|
|
12
16
|
readonly borderWidth: 1;
|
|
13
17
|
readonly radius: number;
|
|
14
18
|
readonly padding: number;
|
|
15
19
|
readonly gap: number;
|
|
16
20
|
readonly minWidth: 320;
|
|
17
|
-
readonly maxHeight:
|
|
18
|
-
|
|
21
|
+
readonly maxHeight: Readonly<{
|
|
22
|
+
kind: "viewport-height";
|
|
23
|
+
ratio: number;
|
|
24
|
+
}>;
|
|
19
25
|
readonly viewportMargin: number;
|
|
20
26
|
readonly topOffset: number;
|
|
21
27
|
readonly zIndexOffset: 1;
|
|
@@ -66,10 +72,13 @@ export declare const modal: {
|
|
|
66
72
|
};
|
|
67
73
|
readonly focus: {
|
|
68
74
|
readonly ring: {
|
|
69
|
-
color: string;
|
|
70
|
-
width: string;
|
|
71
|
-
shadow:
|
|
72
|
-
|
|
75
|
+
readonly color: string;
|
|
76
|
+
readonly width: string;
|
|
77
|
+
readonly shadow: Readonly<{
|
|
78
|
+
kind: "shadow";
|
|
79
|
+
role: "focus-ring";
|
|
80
|
+
}>;
|
|
81
|
+
readonly offset: string;
|
|
73
82
|
};
|
|
74
83
|
};
|
|
75
84
|
readonly disabled: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/modal.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/modal.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOhB,CAAC"}
|
|
@@ -3,14 +3,12 @@ import { radius } from '../../tokens/radius.js';
|
|
|
3
3
|
import { spacing } from '../../tokens/spacing.js';
|
|
4
4
|
import { focus } from '../semantic/focus.js';
|
|
5
5
|
import { overlay } from '../semantic/overlay.js';
|
|
6
|
-
import { shadow } from '../semantic/shadow.js';
|
|
7
6
|
import { surface } from '../semantic/surface.js';
|
|
8
7
|
import { text } from '../semantic/text.js';
|
|
9
8
|
export const modal = createModalTokensFromSemantics({
|
|
10
9
|
focus,
|
|
11
10
|
overlay,
|
|
12
11
|
radius,
|
|
13
|
-
shadow,
|
|
14
12
|
spacing,
|
|
15
13
|
surface,
|
|
16
14
|
text,
|
|
@@ -3,31 +3,11 @@ export declare const popover: {
|
|
|
3
3
|
readonly bg: string;
|
|
4
4
|
readonly fg: string;
|
|
5
5
|
readonly border: string;
|
|
6
|
-
readonly shadow: {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
readonly blur: 3;
|
|
12
|
-
readonly color: "#000000";
|
|
13
|
-
readonly opacity: 0.04;
|
|
14
|
-
readonly elevation: 1;
|
|
15
|
-
} | {
|
|
16
|
-
readonly x: 0;
|
|
17
|
-
readonly y: 6;
|
|
18
|
-
readonly blur: 16;
|
|
19
|
-
readonly color: "#000000";
|
|
20
|
-
readonly opacity: 0.08;
|
|
21
|
-
readonly elevation: 4;
|
|
22
|
-
} | {
|
|
23
|
-
readonly x: 0;
|
|
24
|
-
readonly y: 12;
|
|
25
|
-
readonly blur: 32;
|
|
26
|
-
readonly color: "#000000";
|
|
27
|
-
readonly opacity: 0.1;
|
|
28
|
-
readonly elevation: 8;
|
|
29
|
-
};
|
|
30
|
-
};
|
|
6
|
+
readonly shadow: Readonly<{
|
|
7
|
+
kind: "shadow";
|
|
8
|
+
role: "elevation";
|
|
9
|
+
level: import("../../platform-output/component-token-intents.js").ComponentShadowLevel;
|
|
10
|
+
}>;
|
|
31
11
|
readonly borderWidth: 1;
|
|
32
12
|
readonly radius: number;
|
|
33
13
|
readonly padding: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/popover.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/popover.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKlB,CAAC"}
|
|
@@ -1,14 +1,10 @@
|
|
|
1
1
|
import { createPopoverTokensFromTheme } from '../../factories/createPopoverTokens.js';
|
|
2
2
|
import { radius } from '../../tokens/radius.js';
|
|
3
|
-
import { shadows } from '../../tokens/shadows.js';
|
|
4
3
|
import { spacing } from '../../tokens/spacing.js';
|
|
5
4
|
import { overlay } from '../semantic/overlay.js';
|
|
6
|
-
import { shadow } from '../semantic/shadow.js';
|
|
7
5
|
import { text } from '../semantic/text.js';
|
|
8
6
|
export const popover = createPopoverTokensFromTheme({
|
|
9
7
|
overlay,
|
|
10
|
-
shadow,
|
|
11
|
-
shadows,
|
|
12
8
|
text,
|
|
13
9
|
radius,
|
|
14
10
|
spacing,
|
|
@@ -2411,7 +2411,11 @@ export declare const select: {
|
|
|
2411
2411
|
readonly bg: "#111827";
|
|
2412
2412
|
readonly fg: "#FFFFFF";
|
|
2413
2413
|
readonly border: "#FFFFFF";
|
|
2414
|
-
readonly shadow:
|
|
2414
|
+
readonly shadow: Readonly<{
|
|
2415
|
+
kind: "shadow";
|
|
2416
|
+
role: "elevation";
|
|
2417
|
+
level: import("../../platform-output/component-token-intents.js").ComponentShadowLevel;
|
|
2418
|
+
}>;
|
|
2415
2419
|
readonly search: {
|
|
2416
2420
|
readonly bg: "#000000";
|
|
2417
2421
|
readonly fg: "#FFFFFF";
|
|
@@ -2430,7 +2434,7 @@ export declare const select: {
|
|
|
2430
2434
|
};
|
|
2431
2435
|
};
|
|
2432
2436
|
readonly clearButton: {
|
|
2433
|
-
readonly fg: "#
|
|
2437
|
+
readonly fg: "#D1D5DB";
|
|
2434
2438
|
readonly hoverFg: "#FB7185";
|
|
2435
2439
|
readonly hoverBg: "#4C0519";
|
|
2436
2440
|
readonly focusBg: "#1F2937";
|
|
@@ -2462,7 +2466,10 @@ export declare const select: {
|
|
|
2462
2466
|
readonly bg: "#1F2937";
|
|
2463
2467
|
readonly fg: "#FDE68A";
|
|
2464
2468
|
readonly border: "#FCD34D";
|
|
2465
|
-
readonly shadow:
|
|
2469
|
+
readonly shadow: Readonly<{
|
|
2470
|
+
kind: "shadow";
|
|
2471
|
+
role: "none";
|
|
2472
|
+
}>;
|
|
2466
2473
|
};
|
|
2467
2474
|
readonly disabled: {
|
|
2468
2475
|
readonly border: "transparent";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/select.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/select.ts"],"names":[],"mappings":"AA2HA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyOT,CAAC"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { createInputColorPalette } from '../../factories/createInputPalette.js';
|
|
2
2
|
import { createSelectPalette } from '../../factories/createSelectPalette.js';
|
|
3
|
+
import { createComponentNoShadowIntent, createComponentShadowIntent, } from '../../platform-output/component-token-intents.js';
|
|
3
4
|
import { colors } from '../../primitives/colors.js';
|
|
4
5
|
import { border } from '../semantic/border.js';
|
|
5
6
|
import { control } from '../semantic/control.js';
|
|
6
7
|
import { focus } from '../semantic/focus.js';
|
|
7
8
|
import { icons } from '../semantic/icons.js';
|
|
8
9
|
import { menu } from '../semantic/menu.js';
|
|
9
|
-
import { shadow } from '../semantic/shadow.js';
|
|
10
10
|
import { status } from '../semantic/status.js';
|
|
11
11
|
import { surface } from '../semantic/surface.js';
|
|
12
12
|
import { text } from '../semantic/text.js';
|
|
@@ -186,13 +186,13 @@ export const select = {
|
|
|
186
186
|
},
|
|
187
187
|
hover: {
|
|
188
188
|
...control.hover,
|
|
189
|
-
icon: icons.
|
|
189
|
+
icon: icons.interactiveHover,
|
|
190
190
|
placeholder: text.secondary,
|
|
191
191
|
},
|
|
192
192
|
focus: {
|
|
193
193
|
bg: 'transparent',
|
|
194
194
|
fg: text.primary,
|
|
195
|
-
border: border.
|
|
195
|
+
border: border.interactive,
|
|
196
196
|
ring: focus.ring.color,
|
|
197
197
|
icon: icons.brand,
|
|
198
198
|
placeholder: text.secondary,
|
|
@@ -214,7 +214,7 @@ export const select = {
|
|
|
214
214
|
bg: menu.background,
|
|
215
215
|
fg: menu.item.default.fg,
|
|
216
216
|
border: menu.border,
|
|
217
|
-
shadow:
|
|
217
|
+
shadow: createComponentShadowIntent('lg'),
|
|
218
218
|
search: {
|
|
219
219
|
bg: surface.default,
|
|
220
220
|
fg: text.primary,
|
|
@@ -261,7 +261,7 @@ export const select = {
|
|
|
261
261
|
bg: control.selected.muted.bg,
|
|
262
262
|
fg: control.selected.muted.fg,
|
|
263
263
|
border: control.selected.muted.border,
|
|
264
|
-
shadow:
|
|
264
|
+
shadow: createComponentNoShadowIntent(),
|
|
265
265
|
},
|
|
266
266
|
disabled: {
|
|
267
267
|
...menu.item.disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/tooltip.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/tooltip.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,OAAO,gEAKlB,CAAC"}
|
|
@@ -3,10 +3,8 @@ import { radius } from '../../tokens/radius.js';
|
|
|
3
3
|
import { spacing } from '../../tokens/spacing.js';
|
|
4
4
|
import { typography } from '../../tokens/typography.js';
|
|
5
5
|
import { overlay } from '../semantic/overlay.js';
|
|
6
|
-
import { shadow } from '../semantic/shadow.js';
|
|
7
6
|
export const tooltip = createTooltipTokensFromTheme({
|
|
8
7
|
overlay,
|
|
9
|
-
shadow,
|
|
10
8
|
radius,
|
|
11
9
|
spacing,
|
|
12
10
|
typography,
|
|
@@ -26,7 +26,7 @@ export declare const action: {
|
|
|
26
26
|
readonly border: "transparent";
|
|
27
27
|
};
|
|
28
28
|
};
|
|
29
|
-
readonly
|
|
29
|
+
readonly accent: {
|
|
30
30
|
readonly default: {
|
|
31
31
|
readonly bg: "#79E8F8";
|
|
32
32
|
readonly fg: "#000000";
|
|
@@ -53,7 +53,7 @@ export declare const action: {
|
|
|
53
53
|
readonly border: "transparent";
|
|
54
54
|
};
|
|
55
55
|
};
|
|
56
|
-
readonly
|
|
56
|
+
readonly neutral: {
|
|
57
57
|
readonly default: {
|
|
58
58
|
readonly bg: "#FFFFFF";
|
|
59
59
|
readonly fg: "#000000";
|
|
@@ -27,7 +27,7 @@ export const action = {
|
|
|
27
27
|
border: 'transparent',
|
|
28
28
|
},
|
|
29
29
|
},
|
|
30
|
-
|
|
30
|
+
accent: {
|
|
31
31
|
default: {
|
|
32
32
|
bg: colors.secondary[300],
|
|
33
33
|
fg: colors.mono[950],
|
|
@@ -54,7 +54,7 @@ export const action = {
|
|
|
54
54
|
border: 'transparent',
|
|
55
55
|
},
|
|
56
56
|
},
|
|
57
|
-
|
|
57
|
+
neutral: {
|
|
58
58
|
default: {
|
|
59
59
|
bg: colors.mono[50],
|
|
60
60
|
fg: colors.mono[950],
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
export declare const icons: {
|
|
2
2
|
readonly default: "#FFFFFF";
|
|
3
3
|
readonly secondary: "#E5E7EB";
|
|
4
|
-
readonly muted: "#
|
|
5
|
-
readonly subtle: "#
|
|
4
|
+
readonly muted: "#D1D5DB";
|
|
5
|
+
readonly subtle: "#9CA3AF";
|
|
6
6
|
readonly disabled: "#6B7280";
|
|
7
|
-
readonly
|
|
7
|
+
readonly interactive: "#FCD34D";
|
|
8
8
|
readonly brand: "#FCD34D";
|
|
9
|
-
readonly
|
|
9
|
+
readonly interactiveHover: "#FDE68A";
|
|
10
10
|
readonly success: "#5EEAD4";
|
|
11
11
|
readonly danger: "#FDA4AF";
|
|
12
12
|
readonly inverse: "#000000";
|
|
@@ -2,12 +2,12 @@ import { colors } from '../../primitives/colors.js';
|
|
|
2
2
|
export const icons = {
|
|
3
3
|
default: colors.mono[50],
|
|
4
4
|
secondary: colors.gray[200],
|
|
5
|
-
muted: colors.gray[
|
|
6
|
-
subtle: colors.gray[
|
|
5
|
+
muted: colors.gray[300],
|
|
6
|
+
subtle: colors.gray[400],
|
|
7
7
|
disabled: colors.gray[500],
|
|
8
|
-
|
|
8
|
+
interactive: colors.warning[300],
|
|
9
9
|
brand: colors.warning[300],
|
|
10
|
-
|
|
10
|
+
interactiveHover: colors.warning[200],
|
|
11
11
|
success: colors.success[300],
|
|
12
12
|
danger: colors.error[300],
|
|
13
13
|
inverse: colors.mono[950],
|
|
@@ -5,7 +5,6 @@ export { divider } from './divider.js';
|
|
|
5
5
|
export { focus } from './focus.js';
|
|
6
6
|
export { icons } from './icons.js';
|
|
7
7
|
export { menu } from './menu.js';
|
|
8
|
-
export { navigation } from './navigation.js';
|
|
9
8
|
export { overlay } from './overlay.js';
|
|
10
9
|
export { shadow } from './shadow.js';
|
|
11
10
|
export { skeleton } from './skeleton.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC"}
|
|
@@ -5,7 +5,6 @@ export { divider } from './divider.js';
|
|
|
5
5
|
export { focus } from './focus.js';
|
|
6
6
|
export { icons } from './icons.js';
|
|
7
7
|
export { menu } from './menu.js';
|
|
8
|
-
export { navigation } from './navigation.js';
|
|
9
8
|
export { overlay } from './overlay.js';
|
|
10
9
|
export { shadow } from './shadow.js';
|
|
11
10
|
export { skeleton } from './skeleton.js';
|
|
@@ -5,11 +5,11 @@ export declare const overlay: {
|
|
|
5
5
|
readonly fg: "#000000";
|
|
6
6
|
readonly border: "#FCD34D";
|
|
7
7
|
};
|
|
8
|
-
readonly
|
|
8
|
+
readonly floating: {
|
|
9
9
|
readonly bg: "#111827";
|
|
10
10
|
readonly border: "#9CA3AF";
|
|
11
11
|
};
|
|
12
|
-
readonly
|
|
12
|
+
readonly dialog: {
|
|
13
13
|
readonly bg: "#111827";
|
|
14
14
|
readonly border: "#9CA3AF";
|
|
15
15
|
};
|
|
@@ -9,11 +9,11 @@ export const overlay = {
|
|
|
9
9
|
fg: colors.mono[950],
|
|
10
10
|
border: colors.warning[300],
|
|
11
11
|
},
|
|
12
|
-
|
|
12
|
+
floating: {
|
|
13
13
|
bg: surface.muted,
|
|
14
14
|
border: border.default,
|
|
15
15
|
},
|
|
16
|
-
|
|
16
|
+
dialog: {
|
|
17
17
|
bg: surface.muted,
|
|
18
18
|
border: border.default,
|
|
19
19
|
},
|