@vellira-ui/tokens 2.98.6 → 2.98.7
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 +141 -189
- package/dist/dark/components/dropdown.d.ts +9 -9
- package/dist/dark/components/dropdown.d.ts.map +1 -1
- package/dist/dark/components/dropdown.js +4 -3
- package/dist/dark/components/input.d.ts +1 -1
- package/dist/dark/components/input.js +4 -4
- package/dist/dark/components/modal.js +1 -1
- package/dist/dark/components/radio.js +1 -1
- package/dist/dark/components/select.js +2 -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 +0 -1
- package/dist/dark/semantic/surface.d.ts.map +1 -1
- package/dist/dark/semantic/surface.js +0 -1
- package/dist/dark/semantic/text.d.ts +2 -2
- package/dist/dark/semantic/text.js +2 -2
- package/dist/factories/componentFocusRing.d.ts +13 -0
- package/dist/factories/componentFocusRing.d.ts.map +1 -0
- package/dist/factories/componentFocusRing.js +6 -0
- package/dist/factories/createContextMenuTokens.d.ts +2 -1
- package/dist/factories/createContextMenuTokens.d.ts.map +1 -1
- package/dist/factories/createContextMenuTokens.js +3 -2
- package/dist/factories/createModalTokens.d.ts +3 -2
- package/dist/factories/createModalTokens.d.ts.map +1 -1
- package/dist/factories/createModalTokens.js +4 -3
- package/dist/factories/createPopoverTokens.d.ts +1 -1
- package/dist/factories/createPopoverTokens.d.ts.map +1 -1
- package/dist/factories/createPopoverTokens.js +2 -2
- package/dist/generated/token-types.d.ts +4 -4
- package/dist/generated/token-types.d.ts.map +1 -1
- package/dist/generated/token-types.js +168 -232
- package/dist/highContrast/components/dropdown.d.ts +8 -8
- package/dist/highContrast/components/dropdown.d.ts.map +1 -1
- package/dist/highContrast/components/dropdown.js +4 -3
- package/dist/highContrast/components/input.d.ts +4 -4
- package/dist/highContrast/components/input.js +4 -4
- package/dist/highContrast/components/radio.js +1 -1
- package/dist/highContrast/components/select.d.ts +1 -1
- package/dist/highContrast/components/select.js +2 -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 +0 -1
- package/dist/highContrast/semantic/surface.d.ts.map +1 -1
- package/dist/highContrast/semantic/surface.js +0 -1
- package/dist/light/components/dropdown.d.ts +8 -8
- package/dist/light/components/dropdown.d.ts.map +1 -1
- package/dist/light/components/dropdown.js +4 -3
- package/dist/light/components/input.js +4 -4
- package/dist/light/components/radio.js +1 -1
- package/dist/light/components/select.js +2 -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 +0 -1
- package/dist/light/semantic/surface.d.ts.map +1 -1
- package/dist/light/semantic/surface.js +0 -1
- package/dist/preservation/token-migrations.d.ts +169 -13
- package/dist/preservation/token-migrations.d.ts.map +1 -1
- package/dist/preservation/token-migrations.js +260 -30
- package/dist/token-architecture.d.ts +55 -9
- package/dist/token-architecture.d.ts.map +1 -1
- package/dist/token-architecture.js +126 -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
|
@@ -271,10 +271,10 @@ 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
|
-
readonly offset:
|
|
274
|
+
readonly color: string;
|
|
275
|
+
readonly width: string;
|
|
276
|
+
readonly shadow: string;
|
|
277
|
+
readonly offset: string;
|
|
278
278
|
};
|
|
279
279
|
};
|
|
280
280
|
readonly disabled: {
|
|
@@ -309,10 +309,10 @@ export declare const dropdown: {
|
|
|
309
309
|
};
|
|
310
310
|
readonly focus: {
|
|
311
311
|
readonly ring: {
|
|
312
|
-
readonly color:
|
|
313
|
-
readonly width:
|
|
314
|
-
readonly shadow:
|
|
315
|
-
readonly offset:
|
|
312
|
+
readonly color: string;
|
|
313
|
+
readonly width: string;
|
|
314
|
+
readonly shadow: string;
|
|
315
|
+
readonly offset: string;
|
|
316
316
|
};
|
|
317
317
|
};
|
|
318
318
|
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,3 +1,4 @@
|
|
|
1
|
+
import { createComponentFocusRing } from '../../factories/componentFocusRing.js';
|
|
1
2
|
import { createDropdownPalette } from '../../factories/createDropdownPalette.js';
|
|
2
3
|
import { createInputColorPalette } from '../../factories/createInputPalette.js';
|
|
3
4
|
import { colors } from '../../primitives/colors.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,
|
|
@@ -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,
|
|
@@ -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,
|
|
@@ -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
|
},
|
|
@@ -4,28 +4,28 @@ export declare const status: {
|
|
|
4
4
|
readonly bg: "#042F2E";
|
|
5
5
|
readonly border: "#5EEAD4";
|
|
6
6
|
readonly ring: "#5EEAD4";
|
|
7
|
-
readonly
|
|
7
|
+
readonly emphasisFg: "#99F6E4";
|
|
8
8
|
};
|
|
9
9
|
readonly error: {
|
|
10
10
|
readonly fg: "#FB7185";
|
|
11
11
|
readonly bg: "#4C0519";
|
|
12
12
|
readonly border: "#FB7185";
|
|
13
13
|
readonly ring: "#FB7185";
|
|
14
|
-
readonly
|
|
14
|
+
readonly emphasisFg: "#FECDD3";
|
|
15
15
|
};
|
|
16
16
|
readonly warning: {
|
|
17
17
|
readonly fg: "#FCD34D";
|
|
18
18
|
readonly bg: "#451A03";
|
|
19
19
|
readonly border: "#FCD34D";
|
|
20
20
|
readonly ring: "#FCD34D";
|
|
21
|
-
readonly
|
|
21
|
+
readonly emphasisFg: "#FDE68A";
|
|
22
22
|
};
|
|
23
23
|
readonly info: {
|
|
24
24
|
readonly fg: "#7DD3FC";
|
|
25
25
|
readonly bg: "#071927";
|
|
26
26
|
readonly border: "#7DD3FC";
|
|
27
27
|
readonly ring: "#7DD3FC";
|
|
28
|
-
readonly
|
|
28
|
+
readonly emphasisFg: "#BAE6FD";
|
|
29
29
|
};
|
|
30
30
|
};
|
|
31
31
|
//# sourceMappingURL=status.d.ts.map
|
|
@@ -5,27 +5,27 @@ export const status = {
|
|
|
5
5
|
bg: colors.success[950],
|
|
6
6
|
border: colors.success[300],
|
|
7
7
|
ring: colors.success[300],
|
|
8
|
-
|
|
8
|
+
emphasisFg: colors.success[200],
|
|
9
9
|
},
|
|
10
10
|
error: {
|
|
11
11
|
fg: colors.error[400],
|
|
12
12
|
bg: colors.error[950],
|
|
13
13
|
border: colors.error[400],
|
|
14
14
|
ring: colors.error[400],
|
|
15
|
-
|
|
15
|
+
emphasisFg: colors.error[200],
|
|
16
16
|
},
|
|
17
17
|
warning: {
|
|
18
18
|
fg: colors.warning[300],
|
|
19
19
|
bg: colors.warning[950],
|
|
20
20
|
border: colors.warning[300],
|
|
21
21
|
ring: colors.warning[300],
|
|
22
|
-
|
|
22
|
+
emphasisFg: colors.warning[200],
|
|
23
23
|
},
|
|
24
24
|
info: {
|
|
25
25
|
fg: colors.info[200],
|
|
26
26
|
bg: colors.info[950],
|
|
27
27
|
border: colors.info[200],
|
|
28
28
|
ring: colors.info[200],
|
|
29
|
-
|
|
29
|
+
emphasisFg: colors.info[150],
|
|
30
30
|
},
|
|
31
31
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/surface.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/surface.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;;;;;;;;;;;;CAeV,CAAC"}
|
|
@@ -271,10 +271,10 @@ export declare const dropdown: {
|
|
|
271
271
|
readonly fg: "#5037C8";
|
|
272
272
|
readonly border: "#5037C8";
|
|
273
273
|
readonly ring: {
|
|
274
|
-
readonly color:
|
|
275
|
-
readonly width:
|
|
276
|
-
readonly shadow:
|
|
277
|
-
readonly offset:
|
|
274
|
+
readonly color: string;
|
|
275
|
+
readonly width: string;
|
|
276
|
+
readonly shadow: string;
|
|
277
|
+
readonly offset: string;
|
|
278
278
|
};
|
|
279
279
|
};
|
|
280
280
|
readonly disabled: {
|
|
@@ -309,10 +309,10 @@ export declare const dropdown: {
|
|
|
309
309
|
};
|
|
310
310
|
readonly focus: {
|
|
311
311
|
readonly ring: {
|
|
312
|
-
readonly color:
|
|
313
|
-
readonly width:
|
|
314
|
-
readonly shadow:
|
|
315
|
-
readonly offset:
|
|
312
|
+
readonly color: string;
|
|
313
|
+
readonly width: string;
|
|
314
|
+
readonly shadow: string;
|
|
315
|
+
readonly offset: string;
|
|
316
316
|
};
|
|
317
317
|
};
|
|
318
318
|
readonly disabled: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/light/components/dropdown.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/light/components/dropdown.ts"],"names":[],"mappings":"AAyEA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuHX,CAAC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { createComponentFocusRing } from '../../factories/componentFocusRing.js';
|
|
1
2
|
import { createDropdownPalette } from '../../factories/createDropdownPalette.js';
|
|
2
3
|
import { createInputColorPalette } from '../../factories/createInputPalette.js';
|
|
3
4
|
import { colors } from '../../primitives/colors.js';
|
|
@@ -123,8 +124,8 @@ export const dropdown = {
|
|
|
123
124
|
focus: {
|
|
124
125
|
bg: 'transparent',
|
|
125
126
|
fg: text.interactive,
|
|
126
|
-
border: border.
|
|
127
|
-
ring: focus.ring,
|
|
127
|
+
border: border.interactive,
|
|
128
|
+
ring: createComponentFocusRing(focus.ring),
|
|
128
129
|
},
|
|
129
130
|
disabled: {
|
|
130
131
|
bg: surface.disabled,
|
|
@@ -147,7 +148,7 @@ export const dropdown = {
|
|
|
147
148
|
},
|
|
148
149
|
pressed: menu.item.pressed,
|
|
149
150
|
focus: {
|
|
150
|
-
ring: focus.ring,
|
|
151
|
+
ring: createComponentFocusRing(focus.ring),
|
|
151
152
|
},
|
|
152
153
|
disabled: menu.item.disabled,
|
|
153
154
|
danger: {
|
|
@@ -77,14 +77,14 @@ export const input = {
|
|
|
77
77
|
hover: {
|
|
78
78
|
bg: surface.hover,
|
|
79
79
|
fg: text.primary,
|
|
80
|
-
border: border.
|
|
80
|
+
border: border.interactive,
|
|
81
81
|
placeholder: text.secondary,
|
|
82
|
-
icon: icons.
|
|
82
|
+
icon: icons.interactiveHover,
|
|
83
83
|
},
|
|
84
84
|
focus: {
|
|
85
85
|
bg: 'transparent',
|
|
86
86
|
fg: text.primary,
|
|
87
|
-
border: border.
|
|
87
|
+
border: border.interactive,
|
|
88
88
|
ring: focus.ring.color,
|
|
89
89
|
placeholder: text.secondary,
|
|
90
90
|
icon: icons.brand,
|
|
@@ -109,7 +109,7 @@ export const input = {
|
|
|
109
109
|
},
|
|
110
110
|
icon: {
|
|
111
111
|
default: icons.default,
|
|
112
|
-
primary: icons.
|
|
112
|
+
primary: icons.interactive,
|
|
113
113
|
secondary: icons.secondary,
|
|
114
114
|
success: icons.success,
|
|
115
115
|
danger: icons.danger,
|
|
@@ -137,13 +137,13 @@ export const select = {
|
|
|
137
137
|
},
|
|
138
138
|
hover: {
|
|
139
139
|
...control.hover,
|
|
140
|
-
icon: icons.
|
|
140
|
+
icon: icons.interactiveHover,
|
|
141
141
|
placeholder: text.secondary,
|
|
142
142
|
},
|
|
143
143
|
focus: {
|
|
144
144
|
bg: 'transparent',
|
|
145
145
|
fg: text.primary,
|
|
146
|
-
border: border.
|
|
146
|
+
border: border.interactive,
|
|
147
147
|
ring: focus.ring.color,
|
|
148
148
|
icon: icons.brand,
|
|
149
149
|
placeholder: text.secondary,
|
|
@@ -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: "#0B7D95";
|
|
32
32
|
readonly fg: "#FFFFFF";
|
|
@@ -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: "#D4CEE8";
|
|
59
59
|
readonly fg: "#231F31";
|
|
@@ -28,7 +28,7 @@ export const action = {
|
|
|
28
28
|
border: 'transparent',
|
|
29
29
|
},
|
|
30
30
|
},
|
|
31
|
-
|
|
31
|
+
accent: {
|
|
32
32
|
default: {
|
|
33
33
|
bg: colors.secondary[700],
|
|
34
34
|
fg: text.inverse,
|
|
@@ -55,7 +55,7 @@ export const action = {
|
|
|
55
55
|
border: 'transparent',
|
|
56
56
|
},
|
|
57
57
|
},
|
|
58
|
-
|
|
58
|
+
neutral: {
|
|
59
59
|
default: {
|
|
60
60
|
bg: colors.vellira[250],
|
|
61
61
|
fg: colors.vellira[900],
|
|
@@ -4,9 +4,9 @@ export declare const icons: {
|
|
|
4
4
|
readonly muted: "#958CB0";
|
|
5
5
|
readonly subtle: "#958CB0";
|
|
6
6
|
readonly disabled: "#958CB0";
|
|
7
|
-
readonly
|
|
7
|
+
readonly interactive: "#5037C8";
|
|
8
8
|
readonly brand: "#5037C8";
|
|
9
|
-
readonly
|
|
9
|
+
readonly interactiveHover: "#402C9F";
|
|
10
10
|
readonly success: "#14B8A6";
|
|
11
11
|
readonly danger: "#BE123C";
|
|
12
12
|
readonly inverse: "#FFFFFF";
|
|
@@ -5,9 +5,9 @@ export const icons = {
|
|
|
5
5
|
muted: colors.vellira[400],
|
|
6
6
|
subtle: colors.vellira[400],
|
|
7
7
|
disabled: colors.vellira[400],
|
|
8
|
-
|
|
8
|
+
interactive: colors.primary[700],
|
|
9
9
|
brand: colors.primary[700],
|
|
10
|
-
|
|
10
|
+
interactiveHover: colors.primary[800],
|
|
11
11
|
success: colors.success[500],
|
|
12
12
|
danger: colors.error[700],
|
|
13
13
|
inverse: colors.mono[50],
|
|
@@ -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';
|