@vellira-ui/tokens 2.28.0 → 2.30.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 +1045 -56
- package/dist/dark/components/button.d.ts +15 -15
- package/dist/dark/components/button.js +1 -1
- package/dist/dark/components/checkbox.d.ts +15 -15
- package/dist/dark/components/checkbox.js +1 -1
- package/dist/dark/components/formField.d.ts +52 -0
- package/dist/dark/components/formField.d.ts.map +1 -1
- package/dist/dark/components/formField.js +55 -0
- package/dist/dark/components/input.d.ts +109 -4
- package/dist/dark/components/input.d.ts.map +1 -1
- package/dist/dark/components/input.js +81 -4
- package/dist/dark/components/radio.d.ts +35 -25
- package/dist/dark/components/radio.d.ts.map +1 -1
- package/dist/dark/components/radio.js +117 -27
- package/dist/factories/createButtonPalette.d.ts.map +1 -0
- package/dist/factories/createCheckboxPalette.d.ts.map +1 -0
- package/dist/factories/createInputPalette.d.ts +78 -0
- package/dist/factories/createInputPalette.d.ts.map +1 -0
- package/dist/factories/createInputPalette.js +78 -0
- package/dist/factories/createRadioPalette.d.ts +19 -0
- package/dist/factories/createRadioPalette.d.ts.map +1 -0
- package/dist/factories/createRadioPalette.js +6 -0
- package/dist/factories/index.d.ts +5 -0
- package/dist/factories/index.d.ts.map +1 -0
- package/dist/factories/index.js +4 -0
- 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 +1388 -68
- package/dist/highContrast/components/button.d.ts +15 -15
- package/dist/highContrast/components/button.js +1 -1
- package/dist/highContrast/components/checkbox.d.ts +15 -15
- package/dist/highContrast/components/checkbox.js +1 -1
- package/dist/highContrast/components/formField.d.ts +52 -0
- package/dist/highContrast/components/formField.d.ts.map +1 -1
- package/dist/highContrast/components/formField.js +55 -0
- package/dist/highContrast/components/input.d.ts +109 -4
- package/dist/highContrast/components/input.d.ts.map +1 -1
- package/dist/highContrast/components/input.js +101 -4
- package/dist/highContrast/components/radio.d.ts +35 -25
- package/dist/highContrast/components/radio.d.ts.map +1 -1
- package/dist/highContrast/components/radio.js +117 -27
- package/dist/light/components/button.d.ts +15 -15
- package/dist/light/components/button.js +1 -1
- package/dist/light/components/checkbox.d.ts +15 -15
- package/dist/light/components/checkbox.js +1 -1
- package/dist/light/components/formField.d.ts +52 -0
- package/dist/light/components/formField.d.ts.map +1 -1
- package/dist/light/components/formField.js +55 -0
- package/dist/light/components/input.d.ts +110 -5
- package/dist/light/components/input.d.ts.map +1 -1
- package/dist/light/components/input.js +81 -4
- package/dist/light/components/radio.d.ts +35 -25
- package/dist/light/components/radio.d.ts.map +1 -1
- package/dist/light/components/radio.js +117 -27
- package/dist/light/semantic/icons.d.ts +1 -1
- package/dist/light/semantic/icons.js +1 -1
- package/package.json +3 -2
- package/dist/utils/createButtonPalette.d.ts.map +0 -1
- package/dist/utils/createCheckboxPalette.d.ts.map +0 -1
- /package/dist/{utils → factories}/createButtonPalette.d.ts +0 -0
- /package/dist/{utils → factories}/createButtonPalette.js +0 -0
- /package/dist/{utils → factories}/createCheckboxPalette.d.ts +0 -0
- /package/dist/{utils → factories}/createCheckboxPalette.js +0 -0
|
@@ -2,9 +2,9 @@ export declare const button: {
|
|
|
2
2
|
readonly primary: {
|
|
3
3
|
readonly ring: string;
|
|
4
4
|
readonly solid: {
|
|
5
|
-
default: import("../../
|
|
6
|
-
hover: import("../../
|
|
7
|
-
pressed: import("../../
|
|
5
|
+
default: import("../../factories/createButtonPalette.js").ButtonState;
|
|
6
|
+
hover: import("../../factories/createButtonPalette.js").ButtonState;
|
|
7
|
+
pressed: import("../../factories/createButtonPalette.js").ButtonState;
|
|
8
8
|
};
|
|
9
9
|
readonly outline: {
|
|
10
10
|
readonly default: {
|
|
@@ -78,9 +78,9 @@ export declare const button: {
|
|
|
78
78
|
readonly neutral: {
|
|
79
79
|
readonly ring: string;
|
|
80
80
|
readonly solid: {
|
|
81
|
-
default: import("../../
|
|
82
|
-
hover: import("../../
|
|
83
|
-
pressed: import("../../
|
|
81
|
+
default: import("../../factories/createButtonPalette.js").ButtonState;
|
|
82
|
+
hover: import("../../factories/createButtonPalette.js").ButtonState;
|
|
83
|
+
pressed: import("../../factories/createButtonPalette.js").ButtonState;
|
|
84
84
|
};
|
|
85
85
|
readonly outline: {
|
|
86
86
|
readonly default: {
|
|
@@ -154,9 +154,9 @@ export declare const button: {
|
|
|
154
154
|
readonly success: {
|
|
155
155
|
readonly ring: string;
|
|
156
156
|
readonly solid: {
|
|
157
|
-
default: import("../../
|
|
158
|
-
hover: import("../../
|
|
159
|
-
pressed: import("../../
|
|
157
|
+
default: import("../../factories/createButtonPalette.js").ButtonState;
|
|
158
|
+
hover: import("../../factories/createButtonPalette.js").ButtonState;
|
|
159
|
+
pressed: import("../../factories/createButtonPalette.js").ButtonState;
|
|
160
160
|
};
|
|
161
161
|
readonly outline: {
|
|
162
162
|
readonly default: {
|
|
@@ -230,9 +230,9 @@ export declare const button: {
|
|
|
230
230
|
readonly warning: {
|
|
231
231
|
readonly ring: string;
|
|
232
232
|
readonly solid: {
|
|
233
|
-
default: import("../../
|
|
234
|
-
hover: import("../../
|
|
235
|
-
pressed: import("../../
|
|
233
|
+
default: import("../../factories/createButtonPalette.js").ButtonState;
|
|
234
|
+
hover: import("../../factories/createButtonPalette.js").ButtonState;
|
|
235
|
+
pressed: import("../../factories/createButtonPalette.js").ButtonState;
|
|
236
236
|
};
|
|
237
237
|
readonly outline: {
|
|
238
238
|
readonly default: {
|
|
@@ -306,9 +306,9 @@ export declare const button: {
|
|
|
306
306
|
readonly danger: {
|
|
307
307
|
readonly ring: string;
|
|
308
308
|
readonly solid: {
|
|
309
|
-
default: import("../../
|
|
310
|
-
hover: import("../../
|
|
311
|
-
pressed: import("../../
|
|
309
|
+
default: import("../../factories/createButtonPalette.js").ButtonState;
|
|
310
|
+
hover: import("../../factories/createButtonPalette.js").ButtonState;
|
|
311
|
+
pressed: import("../../factories/createButtonPalette.js").ButtonState;
|
|
312
312
|
};
|
|
313
313
|
readonly outline: {
|
|
314
314
|
readonly default: {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { createButtonPalette } from '../../factories/createButtonPalette.js';
|
|
1
2
|
import { colors } from '../../primitives/colors.js';
|
|
2
|
-
import { createButtonPalette } from '../../utils/createButtonPalette.js';
|
|
3
3
|
import { border } from '../semantic/border.js';
|
|
4
4
|
import { surface } from '../semantic/surface.js';
|
|
5
5
|
import { text } from '../semantic/text.js';
|
|
@@ -12,33 +12,33 @@ export declare const checkbox: {
|
|
|
12
12
|
};
|
|
13
13
|
readonly primary: {
|
|
14
14
|
readonly ring: string;
|
|
15
|
-
readonly default: import("../../
|
|
16
|
-
readonly hover: import("../../
|
|
17
|
-
readonly pressed: import("../../
|
|
15
|
+
readonly default: import("../../factories/createCheckboxPalette.js").CheckboxState;
|
|
16
|
+
readonly hover: import("../../factories/createCheckboxPalette.js").CheckboxState;
|
|
17
|
+
readonly pressed: import("../../factories/createCheckboxPalette.js").CheckboxState;
|
|
18
18
|
};
|
|
19
19
|
readonly neutral: {
|
|
20
20
|
readonly ring: string;
|
|
21
|
-
readonly default: import("../../
|
|
22
|
-
readonly hover: import("../../
|
|
23
|
-
readonly pressed: import("../../
|
|
21
|
+
readonly default: import("../../factories/createCheckboxPalette.js").CheckboxState;
|
|
22
|
+
readonly hover: import("../../factories/createCheckboxPalette.js").CheckboxState;
|
|
23
|
+
readonly pressed: import("../../factories/createCheckboxPalette.js").CheckboxState;
|
|
24
24
|
};
|
|
25
25
|
readonly success: {
|
|
26
26
|
readonly ring: string;
|
|
27
|
-
readonly default: import("../../
|
|
28
|
-
readonly hover: import("../../
|
|
29
|
-
readonly pressed: import("../../
|
|
27
|
+
readonly default: import("../../factories/createCheckboxPalette.js").CheckboxState;
|
|
28
|
+
readonly hover: import("../../factories/createCheckboxPalette.js").CheckboxState;
|
|
29
|
+
readonly pressed: import("../../factories/createCheckboxPalette.js").CheckboxState;
|
|
30
30
|
};
|
|
31
31
|
readonly warning: {
|
|
32
32
|
readonly ring: string;
|
|
33
|
-
readonly default: import("../../
|
|
34
|
-
readonly hover: import("../../
|
|
35
|
-
readonly pressed: import("../../
|
|
33
|
+
readonly default: import("../../factories/createCheckboxPalette.js").CheckboxState;
|
|
34
|
+
readonly hover: import("../../factories/createCheckboxPalette.js").CheckboxState;
|
|
35
|
+
readonly pressed: import("../../factories/createCheckboxPalette.js").CheckboxState;
|
|
36
36
|
};
|
|
37
37
|
readonly danger: {
|
|
38
38
|
readonly ring: string;
|
|
39
|
-
readonly default: import("../../
|
|
40
|
-
readonly hover: import("../../
|
|
41
|
-
readonly pressed: import("../../
|
|
39
|
+
readonly default: import("../../factories/createCheckboxPalette.js").CheckboxState;
|
|
40
|
+
readonly hover: import("../../factories/createCheckboxPalette.js").CheckboxState;
|
|
41
|
+
readonly pressed: import("../../factories/createCheckboxPalette.js").CheckboxState;
|
|
42
42
|
};
|
|
43
43
|
readonly focus: {
|
|
44
44
|
readonly ring: "#B8A8FF";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { createCheckboxPalette } from '../../factories/createCheckboxPalette.js';
|
|
1
2
|
import { colors } from '../../primitives/colors.js';
|
|
2
|
-
import { createCheckboxPalette } from '../../utils/createCheckboxPalette.js';
|
|
3
3
|
import { border } from '../semantic/border.js';
|
|
4
4
|
import { control } from '../semantic/control.js';
|
|
5
5
|
import { focus } from '../semantic/focus.js';
|
|
@@ -2,6 +2,14 @@ export declare const formField: {
|
|
|
2
2
|
readonly label: {
|
|
3
3
|
readonly fg: "#F4F1FB";
|
|
4
4
|
};
|
|
5
|
+
readonly optional: {
|
|
6
|
+
readonly fg: "#BBB2D2";
|
|
7
|
+
};
|
|
8
|
+
readonly labelInfo: {
|
|
9
|
+
readonly fg: "#BBB2D2";
|
|
10
|
+
readonly border: "#BBB2D2";
|
|
11
|
+
readonly radius: 999;
|
|
12
|
+
};
|
|
5
13
|
readonly description: {
|
|
6
14
|
readonly fg: "#BBB2D2";
|
|
7
15
|
};
|
|
@@ -30,5 +38,49 @@ export declare const formField: {
|
|
|
30
38
|
readonly descriptionFg: "#6B6386";
|
|
31
39
|
readonly helperTextFg: "#6B6386";
|
|
32
40
|
};
|
|
41
|
+
readonly size: {
|
|
42
|
+
readonly sm: {
|
|
43
|
+
readonly gap: 4;
|
|
44
|
+
readonly horizontalGap: 12;
|
|
45
|
+
readonly labelFontSize: 14;
|
|
46
|
+
readonly labelLineHeight: 20;
|
|
47
|
+
readonly descriptionFontSize: 12;
|
|
48
|
+
readonly descriptionLineHeight: 16;
|
|
49
|
+
readonly helperTextFontSize: 12;
|
|
50
|
+
readonly helperTextLineHeight: 16;
|
|
51
|
+
readonly optionalFontSize: 12;
|
|
52
|
+
readonly optionalLineHeight: 16;
|
|
53
|
+
readonly labelInfoSize: 16;
|
|
54
|
+
readonly labelInfoFontSize: 12;
|
|
55
|
+
};
|
|
56
|
+
readonly md: {
|
|
57
|
+
readonly gap: 8;
|
|
58
|
+
readonly horizontalGap: 16;
|
|
59
|
+
readonly labelFontSize: 16;
|
|
60
|
+
readonly labelLineHeight: 24;
|
|
61
|
+
readonly descriptionFontSize: 14;
|
|
62
|
+
readonly descriptionLineHeight: 20;
|
|
63
|
+
readonly helperTextFontSize: 14;
|
|
64
|
+
readonly helperTextLineHeight: 20;
|
|
65
|
+
readonly optionalFontSize: 12;
|
|
66
|
+
readonly optionalLineHeight: 16;
|
|
67
|
+
readonly labelInfoSize: 16;
|
|
68
|
+
readonly labelInfoFontSize: 12;
|
|
69
|
+
};
|
|
70
|
+
readonly lg: {
|
|
71
|
+
readonly gap: 12;
|
|
72
|
+
readonly horizontalGap: 20;
|
|
73
|
+
readonly labelFontSize: 20;
|
|
74
|
+
readonly labelLineHeight: 28;
|
|
75
|
+
readonly descriptionFontSize: 16;
|
|
76
|
+
readonly descriptionLineHeight: 24;
|
|
77
|
+
readonly helperTextFontSize: 16;
|
|
78
|
+
readonly helperTextLineHeight: 24;
|
|
79
|
+
readonly optionalFontSize: 14;
|
|
80
|
+
readonly optionalLineHeight: 20;
|
|
81
|
+
readonly labelInfoSize: 20;
|
|
82
|
+
readonly labelInfoFontSize: 14;
|
|
83
|
+
};
|
|
84
|
+
};
|
|
33
85
|
};
|
|
34
86
|
//# sourceMappingURL=formField.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formField.d.ts","sourceRoot":"","sources":["../../../src/dark/components/formField.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"formField.d.ts","sourceRoot":"","sources":["../../../src/dark/components/formField.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+FZ,CAAC"}
|
|
@@ -1,9 +1,20 @@
|
|
|
1
|
+
import { radius } from '../../tokens/radius.js';
|
|
2
|
+
import { spacing } from '../../tokens/spacing.js';
|
|
3
|
+
import { typography } from '../../tokens/typography.js';
|
|
1
4
|
import { status } from '../semantic/status.js';
|
|
2
5
|
import { text } from '../semantic/text.js';
|
|
3
6
|
export const formField = {
|
|
4
7
|
label: {
|
|
5
8
|
fg: text.primary,
|
|
6
9
|
},
|
|
10
|
+
optional: {
|
|
11
|
+
fg: text.secondary,
|
|
12
|
+
},
|
|
13
|
+
labelInfo: {
|
|
14
|
+
fg: text.secondary,
|
|
15
|
+
border: text.secondary,
|
|
16
|
+
radius: radius.full,
|
|
17
|
+
},
|
|
7
18
|
description: {
|
|
8
19
|
fg: text.secondary,
|
|
9
20
|
},
|
|
@@ -32,4 +43,48 @@ export const formField = {
|
|
|
32
43
|
descriptionFg: text.disabled,
|
|
33
44
|
helperTextFg: text.disabled,
|
|
34
45
|
},
|
|
46
|
+
size: {
|
|
47
|
+
sm: {
|
|
48
|
+
gap: spacing[1],
|
|
49
|
+
horizontalGap: spacing[3],
|
|
50
|
+
labelFontSize: typography.size.sm,
|
|
51
|
+
labelLineHeight: typography.lineHeight.sm,
|
|
52
|
+
descriptionFontSize: typography.size.xs,
|
|
53
|
+
descriptionLineHeight: typography.lineHeight.xs,
|
|
54
|
+
helperTextFontSize: typography.size.xs,
|
|
55
|
+
helperTextLineHeight: typography.lineHeight.xs,
|
|
56
|
+
optionalFontSize: typography.size.xs,
|
|
57
|
+
optionalLineHeight: typography.lineHeight.xs,
|
|
58
|
+
labelInfoSize: spacing[4],
|
|
59
|
+
labelInfoFontSize: typography.size.xs,
|
|
60
|
+
},
|
|
61
|
+
md: {
|
|
62
|
+
gap: spacing[2],
|
|
63
|
+
horizontalGap: spacing[4],
|
|
64
|
+
labelFontSize: typography.size.md,
|
|
65
|
+
labelLineHeight: typography.lineHeight.md,
|
|
66
|
+
descriptionFontSize: typography.size.sm,
|
|
67
|
+
descriptionLineHeight: typography.lineHeight.sm,
|
|
68
|
+
helperTextFontSize: typography.size.sm,
|
|
69
|
+
helperTextLineHeight: typography.lineHeight.sm,
|
|
70
|
+
optionalFontSize: typography.size.xs,
|
|
71
|
+
optionalLineHeight: typography.lineHeight.xs,
|
|
72
|
+
labelInfoSize: spacing[4],
|
|
73
|
+
labelInfoFontSize: typography.size.xs,
|
|
74
|
+
},
|
|
75
|
+
lg: {
|
|
76
|
+
gap: spacing[3],
|
|
77
|
+
horizontalGap: spacing[5],
|
|
78
|
+
labelFontSize: typography.size.lg,
|
|
79
|
+
labelLineHeight: typography.lineHeight.lg,
|
|
80
|
+
descriptionFontSize: typography.size.md,
|
|
81
|
+
descriptionLineHeight: typography.lineHeight.md,
|
|
82
|
+
helperTextFontSize: typography.size.md,
|
|
83
|
+
helperTextLineHeight: typography.lineHeight.md,
|
|
84
|
+
optionalFontSize: typography.size.sm,
|
|
85
|
+
optionalLineHeight: typography.lineHeight.sm,
|
|
86
|
+
labelInfoSize: spacing[5],
|
|
87
|
+
labelInfoFontSize: typography.size.sm,
|
|
88
|
+
},
|
|
89
|
+
},
|
|
35
90
|
};
|
|
@@ -1,4 +1,94 @@
|
|
|
1
1
|
export declare const input: {
|
|
2
|
+
readonly primary: {
|
|
3
|
+
readonly ring: string;
|
|
4
|
+
readonly outline: {
|
|
5
|
+
default: import("../../factories/createInputPalette.js").InputState;
|
|
6
|
+
hover: import("../../factories/createInputPalette.js").InputState;
|
|
7
|
+
focus: import("../../factories/createInputPalette.js").InputState;
|
|
8
|
+
};
|
|
9
|
+
readonly filled: {
|
|
10
|
+
default: import("../../factories/createInputPalette.js").InputState;
|
|
11
|
+
hover: import("../../factories/createInputPalette.js").InputState;
|
|
12
|
+
focus: import("../../factories/createInputPalette.js").InputState;
|
|
13
|
+
};
|
|
14
|
+
readonly soft: {
|
|
15
|
+
default: import("../../factories/createInputPalette.js").InputState;
|
|
16
|
+
hover: import("../../factories/createInputPalette.js").InputState;
|
|
17
|
+
focus: import("../../factories/createInputPalette.js").InputState;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
readonly neutral: {
|
|
21
|
+
readonly ring: string;
|
|
22
|
+
readonly outline: {
|
|
23
|
+
default: import("../../factories/createInputPalette.js").InputState;
|
|
24
|
+
hover: import("../../factories/createInputPalette.js").InputState;
|
|
25
|
+
focus: import("../../factories/createInputPalette.js").InputState;
|
|
26
|
+
};
|
|
27
|
+
readonly filled: {
|
|
28
|
+
default: import("../../factories/createInputPalette.js").InputState;
|
|
29
|
+
hover: import("../../factories/createInputPalette.js").InputState;
|
|
30
|
+
focus: import("../../factories/createInputPalette.js").InputState;
|
|
31
|
+
};
|
|
32
|
+
readonly soft: {
|
|
33
|
+
default: import("../../factories/createInputPalette.js").InputState;
|
|
34
|
+
hover: import("../../factories/createInputPalette.js").InputState;
|
|
35
|
+
focus: import("../../factories/createInputPalette.js").InputState;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
readonly success: {
|
|
39
|
+
readonly ring: string;
|
|
40
|
+
readonly outline: {
|
|
41
|
+
default: import("../../factories/createInputPalette.js").InputState;
|
|
42
|
+
hover: import("../../factories/createInputPalette.js").InputState;
|
|
43
|
+
focus: import("../../factories/createInputPalette.js").InputState;
|
|
44
|
+
};
|
|
45
|
+
readonly filled: {
|
|
46
|
+
default: import("../../factories/createInputPalette.js").InputState;
|
|
47
|
+
hover: import("../../factories/createInputPalette.js").InputState;
|
|
48
|
+
focus: import("../../factories/createInputPalette.js").InputState;
|
|
49
|
+
};
|
|
50
|
+
readonly soft: {
|
|
51
|
+
default: import("../../factories/createInputPalette.js").InputState;
|
|
52
|
+
hover: import("../../factories/createInputPalette.js").InputState;
|
|
53
|
+
focus: import("../../factories/createInputPalette.js").InputState;
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
readonly warning: {
|
|
57
|
+
readonly ring: string;
|
|
58
|
+
readonly outline: {
|
|
59
|
+
default: import("../../factories/createInputPalette.js").InputState;
|
|
60
|
+
hover: import("../../factories/createInputPalette.js").InputState;
|
|
61
|
+
focus: import("../../factories/createInputPalette.js").InputState;
|
|
62
|
+
};
|
|
63
|
+
readonly filled: {
|
|
64
|
+
default: import("../../factories/createInputPalette.js").InputState;
|
|
65
|
+
hover: import("../../factories/createInputPalette.js").InputState;
|
|
66
|
+
focus: import("../../factories/createInputPalette.js").InputState;
|
|
67
|
+
};
|
|
68
|
+
readonly soft: {
|
|
69
|
+
default: import("../../factories/createInputPalette.js").InputState;
|
|
70
|
+
hover: import("../../factories/createInputPalette.js").InputState;
|
|
71
|
+
focus: import("../../factories/createInputPalette.js").InputState;
|
|
72
|
+
};
|
|
73
|
+
};
|
|
74
|
+
readonly danger: {
|
|
75
|
+
readonly ring: string;
|
|
76
|
+
readonly outline: {
|
|
77
|
+
default: import("../../factories/createInputPalette.js").InputState;
|
|
78
|
+
hover: import("../../factories/createInputPalette.js").InputState;
|
|
79
|
+
focus: import("../../factories/createInputPalette.js").InputState;
|
|
80
|
+
};
|
|
81
|
+
readonly filled: {
|
|
82
|
+
default: import("../../factories/createInputPalette.js").InputState;
|
|
83
|
+
hover: import("../../factories/createInputPalette.js").InputState;
|
|
84
|
+
focus: import("../../factories/createInputPalette.js").InputState;
|
|
85
|
+
};
|
|
86
|
+
readonly soft: {
|
|
87
|
+
default: import("../../factories/createInputPalette.js").InputState;
|
|
88
|
+
hover: import("../../factories/createInputPalette.js").InputState;
|
|
89
|
+
focus: import("../../factories/createInputPalette.js").InputState;
|
|
90
|
+
};
|
|
91
|
+
};
|
|
2
92
|
readonly default: {
|
|
3
93
|
readonly bg: "transparent";
|
|
4
94
|
readonly fg: "#F4F1FB";
|
|
@@ -32,10 +122,6 @@ export declare const input: {
|
|
|
32
122
|
readonly border: "#FB7185";
|
|
33
123
|
readonly ring: "#FB7185";
|
|
34
124
|
};
|
|
35
|
-
readonly success: {
|
|
36
|
-
readonly border: "#2DD4BF";
|
|
37
|
-
readonly ring: "#2DD4BF";
|
|
38
|
-
};
|
|
39
125
|
readonly readOnly: {
|
|
40
126
|
readonly bg: "#242034";
|
|
41
127
|
readonly fg: "#BBB2D2";
|
|
@@ -60,5 +146,24 @@ export declare const input: {
|
|
|
60
146
|
readonly focusBg: "#242034";
|
|
61
147
|
readonly pressedBg: "#3D3754";
|
|
62
148
|
};
|
|
149
|
+
readonly revealButton: {
|
|
150
|
+
readonly fg: "#F4F1FB";
|
|
151
|
+
readonly hoverFg: "#F4F1FB";
|
|
152
|
+
readonly hoverBg: "#2F2A42";
|
|
153
|
+
};
|
|
154
|
+
readonly addon: {
|
|
155
|
+
readonly bg: "#231F31";
|
|
156
|
+
readonly fg: "#BBB2D2";
|
|
157
|
+
readonly border: "#4F4867";
|
|
158
|
+
};
|
|
159
|
+
readonly affix: {
|
|
160
|
+
readonly fg: "#F4F1FB";
|
|
161
|
+
};
|
|
162
|
+
readonly counter: {
|
|
163
|
+
readonly fg: "#BBB2D2";
|
|
164
|
+
};
|
|
165
|
+
readonly spinner: {
|
|
166
|
+
readonly fg: "#958CB0";
|
|
167
|
+
};
|
|
63
168
|
};
|
|
64
169
|
//# sourceMappingURL=input.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/dark/components/input.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/dark/components/input.ts"],"names":[],"mappings":"AAsEA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+FR,CAAC"}
|
|
@@ -1,10 +1,72 @@
|
|
|
1
|
+
import { createInputColorPalette } from '../../factories/createInputPalette.js';
|
|
2
|
+
import { colors } from '../../primitives/colors.js';
|
|
1
3
|
import { border } from '../semantic/border.js';
|
|
2
4
|
import { focus } from '../semantic/focus.js';
|
|
3
5
|
import { icons } from '../semantic/icons.js';
|
|
4
6
|
import { status } from '../semantic/status.js';
|
|
5
7
|
import { surface } from '../semantic/surface.js';
|
|
6
8
|
import { text } from '../semantic/text.js';
|
|
9
|
+
const inputPaletteDefaults = {
|
|
10
|
+
fg: text.primary,
|
|
11
|
+
placeholder: text.secondary,
|
|
12
|
+
filledFocusBg: surface.subtle,
|
|
13
|
+
hoverBg: surface.hover,
|
|
14
|
+
};
|
|
15
|
+
const primary = createInputColorPalette({
|
|
16
|
+
...inputPaletteDefaults,
|
|
17
|
+
accent: colors.primary[400],
|
|
18
|
+
accentHover: colors.primary[500],
|
|
19
|
+
accentSoft: colors.primary[900],
|
|
20
|
+
filledBg: colors.primary[950],
|
|
21
|
+
filledHoverBg: colors.primary[900],
|
|
22
|
+
ring: colors.primary[400],
|
|
23
|
+
});
|
|
24
|
+
const neutral = createInputColorPalette({
|
|
25
|
+
...inputPaletteDefaults,
|
|
26
|
+
accent: colors.vellira[300],
|
|
27
|
+
accentHover: colors.vellira[400],
|
|
28
|
+
accentSoft: colors.vellira[800],
|
|
29
|
+
filledBg: colors.vellira[900],
|
|
30
|
+
filledHoverBg: colors.vellira[800],
|
|
31
|
+
hoverBg: colors.vellira[900],
|
|
32
|
+
ring: colors.vellira[400],
|
|
33
|
+
});
|
|
34
|
+
const success = createInputColorPalette({
|
|
35
|
+
...inputPaletteDefaults,
|
|
36
|
+
accent: colors.success[400],
|
|
37
|
+
accentHover: colors.success[500],
|
|
38
|
+
accentSoft: colors.success[900],
|
|
39
|
+
filledBg: colors.success[950],
|
|
40
|
+
filledHoverBg: colors.success[900],
|
|
41
|
+
hoverBg: colors.success[950],
|
|
42
|
+
ring: colors.success[500],
|
|
43
|
+
});
|
|
44
|
+
const warning = createInputColorPalette({
|
|
45
|
+
...inputPaletteDefaults,
|
|
46
|
+
accent: colors.warning[400],
|
|
47
|
+
accentHover: colors.warning[500],
|
|
48
|
+
accentSoft: colors.warning[900],
|
|
49
|
+
filledBg: colors.warning[950],
|
|
50
|
+
filledHoverBg: colors.warning[900],
|
|
51
|
+
hoverBg: colors.warning[950],
|
|
52
|
+
ring: colors.warning[500],
|
|
53
|
+
});
|
|
54
|
+
const danger = createInputColorPalette({
|
|
55
|
+
...inputPaletteDefaults,
|
|
56
|
+
accent: colors.error[400],
|
|
57
|
+
accentHover: colors.error[500],
|
|
58
|
+
accentSoft: colors.error[900],
|
|
59
|
+
filledBg: colors.error[950],
|
|
60
|
+
filledHoverBg: colors.error[900],
|
|
61
|
+
hoverBg: colors.error[950],
|
|
62
|
+
ring: colors.error[500],
|
|
63
|
+
});
|
|
7
64
|
export const input = {
|
|
65
|
+
primary,
|
|
66
|
+
neutral,
|
|
67
|
+
success,
|
|
68
|
+
warning,
|
|
69
|
+
danger,
|
|
8
70
|
default: {
|
|
9
71
|
bg: 'transparent',
|
|
10
72
|
fg: text.primary,
|
|
@@ -38,10 +100,6 @@ export const input = {
|
|
|
38
100
|
border: status.error.border,
|
|
39
101
|
ring: status.error.fg,
|
|
40
102
|
},
|
|
41
|
-
success: {
|
|
42
|
-
border: status.success.border,
|
|
43
|
-
ring: status.success.fg,
|
|
44
|
-
},
|
|
45
103
|
readOnly: {
|
|
46
104
|
bg: surface.subtle,
|
|
47
105
|
fg: text.secondary,
|
|
@@ -66,4 +124,23 @@ export const input = {
|
|
|
66
124
|
focusBg: surface.subtle,
|
|
67
125
|
pressedBg: surface.active,
|
|
68
126
|
},
|
|
127
|
+
revealButton: {
|
|
128
|
+
fg: text.primary,
|
|
129
|
+
hoverFg: text.primary,
|
|
130
|
+
hoverBg: surface.hover,
|
|
131
|
+
},
|
|
132
|
+
addon: {
|
|
133
|
+
bg: surface.muted,
|
|
134
|
+
fg: text.secondary,
|
|
135
|
+
border: border.default,
|
|
136
|
+
},
|
|
137
|
+
affix: {
|
|
138
|
+
fg: text.primary,
|
|
139
|
+
},
|
|
140
|
+
counter: {
|
|
141
|
+
fg: text.secondary,
|
|
142
|
+
},
|
|
143
|
+
spinner: {
|
|
144
|
+
fg: icons.muted,
|
|
145
|
+
},
|
|
69
146
|
};
|
|
@@ -14,31 +14,35 @@ export declare const radio: {
|
|
|
14
14
|
readonly fg: "#B8A8FF";
|
|
15
15
|
readonly border: "#B8A8FF";
|
|
16
16
|
};
|
|
17
|
-
readonly
|
|
18
|
-
readonly
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
readonly
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
readonly
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
readonly
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
17
|
+
readonly primary: {
|
|
18
|
+
readonly ring: string;
|
|
19
|
+
readonly default: import("../../factories/createRadioPalette.js").RadioState;
|
|
20
|
+
readonly hover: import("../../factories/createRadioPalette.js").RadioState;
|
|
21
|
+
readonly pressed: import("../../factories/createRadioPalette.js").RadioState;
|
|
22
|
+
};
|
|
23
|
+
readonly neutral: {
|
|
24
|
+
readonly ring: string;
|
|
25
|
+
readonly default: import("../../factories/createRadioPalette.js").RadioState;
|
|
26
|
+
readonly hover: import("../../factories/createRadioPalette.js").RadioState;
|
|
27
|
+
readonly pressed: import("../../factories/createRadioPalette.js").RadioState;
|
|
28
|
+
};
|
|
29
|
+
readonly success: {
|
|
30
|
+
readonly ring: string;
|
|
31
|
+
readonly default: import("../../factories/createRadioPalette.js").RadioState;
|
|
32
|
+
readonly hover: import("../../factories/createRadioPalette.js").RadioState;
|
|
33
|
+
readonly pressed: import("../../factories/createRadioPalette.js").RadioState;
|
|
34
|
+
};
|
|
35
|
+
readonly warning: {
|
|
36
|
+
readonly ring: string;
|
|
37
|
+
readonly default: import("../../factories/createRadioPalette.js").RadioState;
|
|
38
|
+
readonly hover: import("../../factories/createRadioPalette.js").RadioState;
|
|
39
|
+
readonly pressed: import("../../factories/createRadioPalette.js").RadioState;
|
|
40
|
+
};
|
|
41
|
+
readonly danger: {
|
|
42
|
+
readonly ring: string;
|
|
43
|
+
readonly default: import("../../factories/createRadioPalette.js").RadioState;
|
|
44
|
+
readonly hover: import("../../factories/createRadioPalette.js").RadioState;
|
|
45
|
+
readonly pressed: import("../../factories/createRadioPalette.js").RadioState;
|
|
42
46
|
};
|
|
43
47
|
readonly focus: {
|
|
44
48
|
readonly ring: "#B8A8FF";
|
|
@@ -55,5 +59,11 @@ export declare const radio: {
|
|
|
55
59
|
readonly fg: "#6B6386";
|
|
56
60
|
readonly border: "#3D3754";
|
|
57
61
|
};
|
|
62
|
+
readonly selectedDisabled: {
|
|
63
|
+
readonly bg: "#2F2A42";
|
|
64
|
+
readonly fg: "#6B6386";
|
|
65
|
+
readonly border: "#3D3754";
|
|
66
|
+
readonly labelFg: "#6B6386";
|
|
67
|
+
};
|
|
58
68
|
};
|
|
59
69
|
//# sourceMappingURL=radio.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/dark/components/radio.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/dark/components/radio.ts"],"names":[],"mappings":"AAsHA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCR,CAAC"}
|