@bitrise/bitkit-v2 0.3.60 → 0.3.62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DataDisplay/BitkitBadge/BitkitBadge.d.ts +11 -0
- package/dist/theme/recipes/Badge.recipe.d.ts +19 -0
- package/dist/theme/recipes/Badge.recipe.js +156 -0
- package/dist/theme/recipes/index.d.ts +18 -0
- package/dist/theme/recipes/index.js +18 -16
- package/dist/theme/semantic-tokens/semanticColors.json.d.ts +42 -0
- package/dist/theme/semantic-tokens/semanticColors.json.js +1 -1
- package/dist/theme/slot-recipes/Switch.recipe.d.ts +31 -0
- package/dist/theme/slot-recipes/Switch.recipe.js +118 -0
- package/dist/theme/slot-recipes/index.d.ts +30 -0
- package/dist/theme/slot-recipes/index.js +10 -8
- package/package.json +4 -4
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { BadgeProps } from '@chakra-ui/react/badge';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
export type BitkitBadgeProps = {
|
|
4
|
+
children?: string;
|
|
5
|
+
icon?: ReactNode;
|
|
6
|
+
} & Omit<BadgeProps, 'children'>;
|
|
7
|
+
declare const BitkitBadge: import('react').ForwardRefExoticComponent<{
|
|
8
|
+
children?: string;
|
|
9
|
+
icon?: ReactNode;
|
|
10
|
+
} & Omit<BadgeProps, "children"> & import('react').RefAttributes<HTMLSpanElement>>;
|
|
11
|
+
export default BitkitBadge;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
declare const badgeRecipe: import('@chakra-ui/react').RecipeDefinition<{
|
|
2
|
+
variant: {
|
|
3
|
+
subtle: {};
|
|
4
|
+
bold: {
|
|
5
|
+
color: "text/on-color";
|
|
6
|
+
};
|
|
7
|
+
};
|
|
8
|
+
colorScheme: {
|
|
9
|
+
neutral: {};
|
|
10
|
+
info: {};
|
|
11
|
+
positive: {};
|
|
12
|
+
negative: {};
|
|
13
|
+
warning: {};
|
|
14
|
+
progress: {};
|
|
15
|
+
orange: {};
|
|
16
|
+
turquoise: {};
|
|
17
|
+
};
|
|
18
|
+
}>;
|
|
19
|
+
export default badgeRecipe;
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
import { defineRecipe as s } from "@chakra-ui/react/styled-system";
|
|
2
|
+
const r = s({
|
|
3
|
+
className: "badge",
|
|
4
|
+
base: {
|
|
5
|
+
display: "inline-flex",
|
|
6
|
+
alignItems: "center",
|
|
7
|
+
gap: "4",
|
|
8
|
+
padding: "4",
|
|
9
|
+
borderRadius: "4",
|
|
10
|
+
textStyle: "comp/badge/sm"
|
|
11
|
+
},
|
|
12
|
+
variants: {
|
|
13
|
+
variant: {
|
|
14
|
+
subtle: {},
|
|
15
|
+
bold: {
|
|
16
|
+
color: "text/on-color"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
colorScheme: {
|
|
20
|
+
neutral: {},
|
|
21
|
+
info: {},
|
|
22
|
+
positive: {},
|
|
23
|
+
negative: {},
|
|
24
|
+
warning: {},
|
|
25
|
+
progress: {},
|
|
26
|
+
orange: {},
|
|
27
|
+
turquoise: {}
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
compoundVariants: [
|
|
31
|
+
{
|
|
32
|
+
colorScheme: "neutral",
|
|
33
|
+
variant: "subtle",
|
|
34
|
+
css: {
|
|
35
|
+
color: "sys/neutral/strong",
|
|
36
|
+
background: "sys/neutral/subtle"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
colorScheme: "info",
|
|
41
|
+
variant: "subtle",
|
|
42
|
+
css: {
|
|
43
|
+
color: "sys/info/strong",
|
|
44
|
+
background: "sys/info/subtle"
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
colorScheme: "positive",
|
|
49
|
+
variant: "subtle",
|
|
50
|
+
css: {
|
|
51
|
+
color: "sys/success/strong",
|
|
52
|
+
background: "sys/success/subtle"
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
colorScheme: "negative",
|
|
57
|
+
variant: "subtle",
|
|
58
|
+
css: {
|
|
59
|
+
color: "sys/critical/strong",
|
|
60
|
+
background: "sys/critical/subtle"
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
colorScheme: "warning",
|
|
65
|
+
variant: "subtle",
|
|
66
|
+
css: {
|
|
67
|
+
color: "sys/warning/strong",
|
|
68
|
+
background: "sys/warning/subtle"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
colorScheme: "progress",
|
|
73
|
+
variant: "subtle",
|
|
74
|
+
css: {
|
|
75
|
+
color: "sys/interactive/strong",
|
|
76
|
+
background: "sys/interactive/subtle"
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
colorScheme: "orange",
|
|
81
|
+
variant: "subtle",
|
|
82
|
+
css: {
|
|
83
|
+
color: "sys/orange/strong",
|
|
84
|
+
background: "sys/orange/subtle"
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
colorScheme: "turquoise",
|
|
89
|
+
variant: "subtle",
|
|
90
|
+
css: {
|
|
91
|
+
color: "sys/turquoise/strong",
|
|
92
|
+
background: "sys/turquoise/subtle"
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
colorScheme: "neutral",
|
|
97
|
+
variant: "bold",
|
|
98
|
+
css: {
|
|
99
|
+
background: "sys/neutral/bold"
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
colorScheme: "info",
|
|
104
|
+
variant: "bold",
|
|
105
|
+
css: {
|
|
106
|
+
background: "sys/info/bold"
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
colorScheme: "positive",
|
|
111
|
+
variant: "bold",
|
|
112
|
+
css: {
|
|
113
|
+
background: "sys/success/bold"
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
colorScheme: "negative",
|
|
118
|
+
variant: "bold",
|
|
119
|
+
css: {
|
|
120
|
+
background: "sys/critical/bold"
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
colorScheme: "warning",
|
|
125
|
+
variant: "bold",
|
|
126
|
+
css: {
|
|
127
|
+
background: "sys/warning/muted",
|
|
128
|
+
color: "text/primary"
|
|
129
|
+
}
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
colorScheme: "progress",
|
|
133
|
+
variant: "bold",
|
|
134
|
+
css: {
|
|
135
|
+
background: "sys/interactive/bold"
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
colorScheme: "orange",
|
|
140
|
+
variant: "bold",
|
|
141
|
+
css: {
|
|
142
|
+
background: "sys/orange/bold"
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
colorScheme: "turquoise",
|
|
147
|
+
variant: "bold",
|
|
148
|
+
css: {
|
|
149
|
+
background: "sys/turquoise/bold"
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
]
|
|
153
|
+
});
|
|
154
|
+
export {
|
|
155
|
+
r as default
|
|
156
|
+
};
|
|
@@ -1,4 +1,22 @@
|
|
|
1
1
|
declare const recipes: {
|
|
2
|
+
badge: import('@chakra-ui/react').RecipeDefinition<{
|
|
3
|
+
variant: {
|
|
4
|
+
subtle: {};
|
|
5
|
+
bold: {
|
|
6
|
+
color: "text/on-color";
|
|
7
|
+
};
|
|
8
|
+
};
|
|
9
|
+
colorScheme: {
|
|
10
|
+
neutral: {};
|
|
11
|
+
info: {};
|
|
12
|
+
positive: {};
|
|
13
|
+
negative: {};
|
|
14
|
+
warning: {};
|
|
15
|
+
progress: {};
|
|
16
|
+
orange: {};
|
|
17
|
+
turquoise: {};
|
|
18
|
+
};
|
|
19
|
+
}>;
|
|
2
20
|
button: import('@chakra-ui/react').RecipeDefinition<{
|
|
3
21
|
variant: Record<string, import('@chakra-ui/react').SystemStyleObject>;
|
|
4
22
|
size: {
|
|
@@ -1,19 +1,21 @@
|
|
|
1
|
-
import e from "./
|
|
2
|
-
import r from "./
|
|
3
|
-
import t from "./
|
|
4
|
-
import o from "./
|
|
5
|
-
import p from "./
|
|
6
|
-
import i from "./
|
|
7
|
-
import m from "./
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
1
|
+
import e from "./Badge.recipe.js";
|
|
2
|
+
import r from "./Button.recipe.js";
|
|
3
|
+
import t from "./Input.recipe.js";
|
|
4
|
+
import o from "./Link.recipe.js";
|
|
5
|
+
import p from "./Separator.recipe.js";
|
|
6
|
+
import i from "./Skeleton.recipe.js";
|
|
7
|
+
import m from "./Spinner.recipe.js";
|
|
8
|
+
import n from "./Textarea.recipe.js";
|
|
9
|
+
const k = {
|
|
10
|
+
badge: e,
|
|
11
|
+
button: r,
|
|
12
|
+
input: t,
|
|
13
|
+
link: o,
|
|
14
|
+
separator: p,
|
|
15
|
+
skeleton: i,
|
|
16
|
+
spinner: m,
|
|
17
|
+
textarea: n
|
|
16
18
|
};
|
|
17
19
|
export {
|
|
18
|
-
|
|
20
|
+
k as default
|
|
19
21
|
};
|
|
@@ -1199,6 +1199,48 @@ declare const _default: {
|
|
|
1199
1199
|
"_light": "{colors.sys.fg.negative}"
|
|
1200
1200
|
}
|
|
1201
1201
|
}
|
|
1202
|
+
},
|
|
1203
|
+
"toggle": {
|
|
1204
|
+
"frameOn": {
|
|
1205
|
+
"value": {
|
|
1206
|
+
"_light": "{colors.sys.success.bold}"
|
|
1207
|
+
}
|
|
1208
|
+
},
|
|
1209
|
+
"frameOn-disabled": {
|
|
1210
|
+
"value": {
|
|
1211
|
+
"_light": "{colors.sys.success.bold/50}"
|
|
1212
|
+
}
|
|
1213
|
+
},
|
|
1214
|
+
"frameOff": {
|
|
1215
|
+
"value": {
|
|
1216
|
+
"_light": "{colors.sys.neutral.bold}"
|
|
1217
|
+
}
|
|
1218
|
+
},
|
|
1219
|
+
"frameOff-disabled": {
|
|
1220
|
+
"value": {
|
|
1221
|
+
"_light": "{colors.sys.neutral.bold/50}"
|
|
1222
|
+
}
|
|
1223
|
+
},
|
|
1224
|
+
"slideOn": {
|
|
1225
|
+
"value": {
|
|
1226
|
+
"_light": "{colors.sys.bg.surface}"
|
|
1227
|
+
}
|
|
1228
|
+
},
|
|
1229
|
+
"slideOn-disabled": {
|
|
1230
|
+
"value": {
|
|
1231
|
+
"_light": "{colors.sys.bg.surface}"
|
|
1232
|
+
}
|
|
1233
|
+
},
|
|
1234
|
+
"slideOff": {
|
|
1235
|
+
"value": {
|
|
1236
|
+
"_light": "{colors.sys.bg.surface}"
|
|
1237
|
+
}
|
|
1238
|
+
},
|
|
1239
|
+
"slideOff-disabled": {
|
|
1240
|
+
"value": {
|
|
1241
|
+
"_light": "{colors.sys.bg.surface}"
|
|
1242
|
+
}
|
|
1243
|
+
}
|
|
1202
1244
|
}
|
|
1203
1245
|
},
|
|
1204
1246
|
"status": {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const l = { primary: { value: { _light: "{colors.pal.purple.30}" } } }, s = { primary: { value: { _light: "{colors.pal.neutral.90}" } } }, o = { fg: { base: { value: { _light: "{colors.pal.neutral.10}" } }, primary: { value: { _light: "{colors.pal.purple.10}" } }, secondary: { value: { _light: "{colors.pal.neutral.40}" } }, tertiary: { value: { _light: "{colors.pal.neutral.60}" } }, subtle: { value: { _light: "{colors.pal.neutral.70}" } }, minimal: { value: { _light: "{colors.pal.neutral.80}" } }, positive: { value: { _light: "{colors.pal.green.50}" } }, negative: { value: { _light: "{colors.pal.red.50}" } }, "on-color": { value: { _light: "{colors.pal.neutral.100}" } }, "on-contrast": { value: { _light: "{colors.pal.neutral.95}" } }, "on-disabled": { value: { _light: "{colors.pal.neutral.70}" } }, disabled: { value: { _light: "{colors.pal.neutral.80}" } } }, bg: { surface: { value: { _light: "{colors.pal.neutral.100}" } }, contrast: { value: { _light: "{colors.pal.neutral.10}" } }, moderate: { value: { _light: "{colors.pal.neutral.90}" } }, subtle: { value: { _light: "{colors.pal.neutral.93}" } }, minimal: { value: { _light: "{colors.pal.neutral.95}" } }, disabled: { value: { _light: "{colors.pal.neutral.95}" } } }, border: { minimal: { value: { _light: "{colors.pal.neutral.93}" } }, subtle: { value: { _light: "{colors.pal.neutral.90}" } }, strong: { value: { _light: "{colors.pal.neutral.80}" } }, emphasized: { value: { _light: "{colors.pal.neutral.70}" } }, critical: { value: { _light: "{colors.pal.red.50}" } }, inverse: { value: { _light: "{colors.pal.neutral.100}" } }, "on-contrast": { value: { _light: "{colors.pal.neutral.95}" } }, disabled: { value: { _light: "{colors.pal.neutral.90}" } } }, primary: { base: { value: { _light: "{colors.pal.purple.40}" } }, emphasized: { value: { _light: "{colors.pal.purple.30}" } }, contrast: { value: { _light: "{colors.pal.purple.10}" } }, muted: { value: { _light: "{colors.pal.purple.80}" } }, subtle: { value: { _light: "{colors.pal.purple.93}" } }, disabled: { value: { _light: "{colors.pal.neutral.90}" } } }, interactive: { base: { value: { _light: "{colors.pal.purple.50}" } }, strong: { value: { _light: "{colors.pal.purple.40}" } }, bold: { value: { _light: "{colors.pal.purple.60}" } }, highlight: { value: { _light: "{colors.pal.purple.70}" } }, muted: { value: { _light: "{colors.pal.purple.80}" } }, moderate: { value: { _light: "{colors.pal.purple.90}" } }, subtle: { value: { _light: "{colors.pal.purple.93}" } }, minimal: { value: { _light: "{colors.pal.purple.95}" } }, disabled: { value: { _light: "{colors.pal.neutral.90}" } } }, info: { base: { value: { _light: "{colors.pal.blue.50}" } }, strong: { value: { _light: "{colors.pal.blue.40}" } }, bold: { value: { _light: "{colors.pal.blue.60}" } }, muted: { value: { _light: "{colors.pal.blue.80}" } }, moderate: { value: { _light: "{colors.pal.blue.90}" } }, subtle: { value: { _light: "{colors.pal.blue.93}" } }, minimal: { value: { _light: "{colors.pal.blue.95}" } } }, success: { base: { value: { _light: "{colors.pal.green.50}" } }, strong: { value: { _light: "{colors.pal.green.40}" } }, bold: { value: { _light: "{colors.pal.green.60}" } }, muted: { value: { _light: "{colors.pal.green.80}" } }, moderate: { value: { _light: "{colors.pal.green.90}" } }, subtle: { value: { _light: "{colors.pal.green.93}" } }, minimal: { value: { _light: "{colors.pal.green.95}" } } }, warning: { base: { value: { _light: "{colors.pal.yellow.50}" } }, strong: { value: { _light: "{colors.pal.yellow.40}" } }, bold: { value: { _light: "{colors.pal.yellow.60}" } }, muted: { value: { _light: "{colors.pal.yellow.80}" } }, moderate: { value: { _light: "{colors.pal.yellow.90}" } }, subtle: { value: { _light: "{colors.pal.yellow.93}" } }, minimal: { value: { _light: "{colors.pal.yellow.95}" } } }, critical: { base: { value: { _light: "{colors.pal.red.50}" } }, dark: { value: { _light: "{colors.pal.red.20}" } }, strong: { value: { _light: "{colors.pal.red.40}" } }, bold: { value: { _light: "{colors.pal.red.60}" } }, muted: { value: { _light: "{colors.pal.red.80}" } }, moderate: { value: { _light: "{colors.pal.red.90}" } }, subtle: { value: { _light: "{colors.pal.red.93}" } }, minimal: { value: { _light: "{colors.pal.red.95}" } } }, neutral: { base: { value: { _light: "{colors.pal.neutral.50}" } }, strong: { value: { _light: "{colors.pal.neutral.40}" } }, bold: { value: { _light: "{colors.pal.neutral.60}" } }, muted: { value: { _light: "{colors.pal.neutral.80}" } }, moderate: { value: { _light: "{colors.pal.neutral.90}" } }, subtle: { value: { _light: "{colors.pal.neutral.93}" } }, minimal: { value: { _light: "{colors.pal.neutral.95}" } } }, orange: { base: { value: { _light: "{colors.pal.orange.50}" } }, strong: { value: { _light: "{colors.pal.orange.40}" } }, bold: { value: { _light: "{colors.pal.orange.60}" } }, muted: { value: { _light: "{colors.pal.orange.80}" } }, moderate: { value: { _light: "{colors.pal.orange.90}" } }, subtle: { value: { _light: "{colors.pal.orange.93}" } }, minimal: { value: { _light: "{colors.pal.orange.95}" } } }, turquoise: { base: { value: { _light: "{colors.pal.turquoise.50}" } }, dark: { value: { _light: "{colors.pal.turquoise.20}" } }, emphasized: { value: { _light: "{colors.pal.turquoise.30}" } }, strong: { value: { _light: "{colors.pal.turquoise.40}" } }, bold: { value: { _light: "{colors.pal.turquoise.60}" } }, muted: { value: { _light: "{colors.pal.turquoise.80}" } }, moderate: { value: { _light: "{colors.pal.turquoise.90}" } }, subtle: { value: { _light: "{colors.pal.turquoise.93}" } }, minimal: { value: { _light: "{colors.pal.turquoise.95}" } } } }, e = { primary: { value: { _light: "{colors.sys.bg.surface}" } }, secondary: { value: { _light: "{colors.sys.bg.minimal}" } }, tertiary: { value: { _light: "{colors.sys.bg.subtle}" } }, hover: { value: { _light: "{colors.sys.bg.subtle}" } }, active: { value: { _light: "{colors.sys.bg.moderate}" } }, selected: { value: { _light: "{colors.sys.interactive.minimal}" } }, "selected-hover": { value: { _light: "{colors.sys.interactive.subtle}" } }, contrast: { value: { _light: "{colors.sys.bg.contrast}" } }, disabled: { value: { _light: "{colors.sys.bg.disabled}" } } }, r = { regular: { value: { _light: "{colors.sys.border.subtle}" } }, minimal: { value: { _light: "{colors.sys.border.minimal}" } }, strong: { value: { _light: "{colors.sys.border.strong}" } }, hover: { value: { _light: "{colors.sys.border.emphasized}" } }, focus: { value: { _light: "{colors.sys.interactive.highlight}" } }, selected: { value: { _light: "{colors.sys.interactive}" } }, error: { value: { _light: "{colors.sys.border.critical}" } }, inverse: { value: { _light: "{colors.sys.border.inverse}" } }, "on-contrast": { value: { _light: "{colors.sys.border.on-contrast}" } }, disabled: { value: { _light: "{colors.sys.border.disabled}" } } }, a = { primary: { value: { _light: "{colors.sys.fg.primary}" } }, secondary: { value: { _light: "{colors.sys.fg.secondary}" } }, tertiary: { value: { _light: "{colors.sys.fg.tertiary}" } }, body: { value: { _light: "{colors.sys.fg}" } }, helper: { value: { _light: "{colors.sys.fg.secondary}" } }, link: { value: { _light: "{colors.sys.interactive}" } }, "link-hover": { value: { _light: "{colors.sys.interactive.strong}" } }, selected: { value: { _light: "{colors.sys.interactive}" } }, positive: { value: { _light: "{colors.sys.fg.positive}" } }, negative: { value: { _light: "{colors.sys.fg.negative}" } }, "on-color": { value: { _light: "{colors.sys.fg.on-color}" } }, "on-contrast": { value: { _light: "{colors.sys.fg.on-contrast}" } }, "on-disabled": { value: { _light: "{colors.sys.fg.on-disabled}" } }, disabled: { value: { _light: "{colors.sys.fg.disabled}" } } }, t = { primary: { value: { _light: "{colors.sys.fg.primary}" } }, secondary: { value: { _light: "{colors.sys.fg.secondary}" } }, tertiary: { value: { _light: "{colors.sys.fg.tertiary}" } }, interactive: { value: { _light: "{colors.sys.interactive}" } }, "interactive-hover": { value: { _light: "{colors.sys.interactive.strong}" } }, positive: { value: { _light: "{colors.sys.fg.positive}" } }, negative: { value: { _light: "{colors.sys.fg.negative}" } }, "on-color": { value: { _light: "{colors.sys.fg.on-color}" } }, "on-contrast": { value: { _light: "{colors.sys.fg.on-contrast}" } }, "on-disabled": { value: { _light: "{colors.sys.fg.on-disabled}" } }, disabled: { value: { _light: "{colors.sys.fg.disabled}" } } }, i = { primary: { bg: { value: { _light: "{colors.sys.primary}" } }, "bg-hover": { value: { _light: "{colors.sys.primary.emphasized}" } }, "bg-active": { value: { _light: "{colors.sys.fg.primary}" } }, "bg-disabled": { value: { _light: "{colors.sys.primary.disabled}" } }, fg: { value: { _light: "{colors.sys.fg.on-color}" } }, "fg-hover": { value: { _light: "{colors.sys.fg.on-color}" } }, "fg-active": { value: { _light: "{colors.sys.fg.on-color}" } }, "fg-disabled": { value: { _light: "{colors.sys.fg.on-disabled}" } } }, secondary: { bg: { value: { _light: "{colors.sys.bg.surface}" } }, "bg-hover": { value: { _light: "{colors.sys.bg.subtle}" } }, "bg-active": { value: { _light: "{colors.sys.bg.moderate}" } }, "bg-disabled": { value: { _light: "{colors.sys.bg.minimal}" } }, fg: { value: { _light: "{colors.sys.fg.primary}" } }, "fg-hover": { value: { _light: "{colors.sys.fg.primary}" } }, "fg-active": { value: { _light: "{colors.sys.fg.primary}" } }, "fg-disabled": { value: { _light: "{colors.sys.fg.disabled}" } }, border: { value: { _light: "{colors.sys.border.strong}" } }, "border-hover": { value: { _light: "{colors.sys.border.emphasized}" } }, "border-active": { value: { _light: "{colors.sys.border.emphasized}" } }, "border-disabled": { value: { _light: "{colors.sys.border.disabled}" } } }, tertiary: { bg: { value: { _light: "transparent" } }, "bg-hover": { value: { _light: "{colors.sys.bg.subtle}" } }, "bg-active": { value: { _light: "{colors.sys.bg.moderate}" } }, "bg-disabled": { value: { _light: "transparent" } }, fg: { value: { _light: "{colors.sys.interactive}" } }, "fg-hover": { value: { _light: "{colors.sys.interactive.strong}" } }, "fg-active": { value: { _light: "{colors.sys.fg.primary}" } }, "fg-disabled": { value: { _light: "{colors.sys.fg.disabled}" } } }, "danger-primary": { bg: { value: { _light: "{colors.sys.critical}" } }, "bg-hover": { value: { _light: "{colors.sys.critical.strong}" } }, "bg-active": { value: { _light: "{colors.sys.critical.dark}" } }, "bg-disabled": { value: { _light: "{colors.sys.primary.disabled}" } }, fg: { value: { _light: "{colors.sys.fg.on-color}" } }, "fg-hover": { value: { _light: "{colors.sys.fg.on-color}" } }, "fg-active": { value: { _light: "{colors.sys.fg.on-color}" } }, "fg-disabled": { value: { _light: "{colors.sys.fg.on-disabled}" } } }, "danger-secondary": { bg: { value: { _light: "{colors.sys.bg.surface}" } }, "bg-hover": { value: { _light: "{colors.sys.critical.minimal}" } }, "bg-active": { value: { _light: "{colors.sys.critical.moderate}" } }, "bg-disabled": { value: { _light: "{colors.sys.bg.minimal}" } }, fg: { value: { _light: "{colors.sys.critical}" } }, "fg-hover": { value: { _light: "{colors.sys.critical}" } }, "fg-active": { value: { _light: "{colors.sys.critical.strong}" } }, "fg-disabled": { value: { _light: "{colors.sys.fg.disabled}" } }, border: { value: { _light: "{colors.sys.critical.muted}" } }, "border-hover": { value: { _light: "{colors.sys.critical.muted}" } }, "border-active": { value: { _light: "{colors.sys.critical}" } }, "border-disabled": { value: { _light: "{colors.sys.border.disabled}" } } }, "danger-tertiary": { bg: { value: { _light: "transparent" } }, "bg-hover": { value: { _light: "{colors.sys.critical.minimal}" } }, "bg-active": { value: { _light: "{colors.sys.critical.moderate}" } }, "bg-disabled": { value: { _light: "transparent" } }, fg: { value: { _light: "{colors.sys.critical}" } }, "fg-hover": { value: { _light: "{colors.sys.critical}" } }, "fg-active": { value: { _light: "{colors.sys.critical.strong}" } }, "fg-disabled": { value: { _light: "{colors.sys.fg.disabled}" } } }, "ai-primary": { bg: { value: { _light: "{colors.sys.turquoise.strong}" } }, "bg-hover": { value: { _light: "{colors.sys.turquoise.emphasized}" } }, "bg-active": { value: { _light: "{colors.sys.turquoise.dark}" } }, "bg-disabled": { value: { _light: "{colors.sys.primary.disabled}" } }, fg: { value: { _light: "{colors.sys.fg.on-color}" } }, "fg-hover": { value: { _light: "{colors.sys.fg.on-color}" } }, "fg-active": { value: { _light: "{colors.sys.fg.on-color}" } }, "fg-disabled": { value: { _light: "{colors.sys.fg.on-disabled}" } } }, "ai-secondary": { bg: { value: { _light: "{colors.sys.bg.surface}" } }, "bg-hover": { value: { _light: "{colors.sys.turquoise.minimal}" } }, "bg-active": { value: { _light: "{colors.sys.turquoise.moderate}" } }, "bg-disabled": { value: { _light: "{colors.sys.bg.minimal}" } }, fg: { value: { _light: "{colors.sys.turquoise}" } }, "fg-hover": { value: { _light: "{colors.sys.turquoise}" } }, "fg-active": { value: { _light: "{colors.sys.turquoise.strong}" } }, "fg-disabled": { value: { _light: "{colors.sys.fg.disabled}" } }, border: { value: { _light: "{colors.sys.turquoise.muted}" } }, "border-hover": { value: { _light: "{colors.sys.turquoise.muted}" } }, "border-active": { value: { _light: "{colors.sys.turquoise}" } }, "border-disabled": { value: { _light: "{colors.sys.border.disabled}" } } }, "ai-tertiary": { bg: { value: { _light: "{colors.sys.bg.transparent}" } }, "bg-hover": { value: { _light: "{colors.sys.turquoise.minimal}" } }, "bg-active": { value: { _light: "{colors.sys.turquoise.moderate}" } }, "bg-disabled": { value: { _light: "{colors.sys.bg.transparent}" } }, fg: { value: { _light: "{colors.sys.turquoise}" } }, "fg-hover": { value: { _light: "{colors.sys.turquoise}" } }, "fg-active": { value: { _light: "{colors.sys.turquoise.strong}" } }, "fg-disabled": { value: { _light: "{colors.sys.fg.disabled}" } } } }, g = { text: { label: { value: { _light: "{colors.sys.fg.primary}" } }, inputValue: { value: { _light: "{colors.sys.fg}" } }, placeholder: { value: { _light: "{colors.sys.fg.subtle}" } }, helper: { value: { _light: "{colors.sys.fg.secondary}" } }, error: { value: { _light: "{colors.sys.fg.negative}" } } } }, u = { info: { bg: { value: { _light: "{colors.sys.info.minimal}" } }, "bg-hover": { value: { _light: "{colors.sys.info.subtle}" } }, "bg-active": { value: { _light: "{colors.sys.info.moderate}" } }, border: { value: { _light: "{colors.sys.info.muted}" } }, icon: { value: { _light: "{colors.sys.info.strong}" } }, text: { value: { _light: "{colors.sys.info.strong}" } } }, success: { bg: { value: { _light: "{colors.sys.success.minimal}" } }, "bg-hover": { value: { _light: "{colors.sys.success.subtle}" } }, "bg-active": { value: { _light: "{colors.sys.success.moderate}" } }, border: { value: { _light: "{colors.sys.success.muted}" } }, icon: { value: { _light: "{colors.sys.success.strong}" } }, text: { value: { _light: "{colors.sys.success.strong}" } } }, warning: { bg: { value: { _light: "{colors.sys.warning.minimal}" } }, "bg-hover": { value: { _light: "{colors.sys.warning.subtle}" } }, "bg-active": { value: { _light: "{colors.sys.warning.moderate}" } }, border: { value: { _light: "{colors.sys.warning.muted}" } }, icon: { value: { _light: "{colors.sys.warning.strong}" } }, text: { value: { _light: "{colors.sys.warning.strong}" } } }, critical: { bg: { value: { _light: "{colors.sys.critical.minimal}" } }, "bg-hover": { value: { _light: "{colors.sys.critical.subtle}" } }, "bg-active": { value: { _light: "{colors.sys.critical.moderate}" } }, border: { value: { _light: "{colors.sys.critical.muted}" } }, icon: { value: { _light: "{colors.sys.critical.strong}" } }, text: { value: { _light: "{colors.sys.critical.strong}" } } }, progress: { bg: { value: { _light: "{colors.sys.interactive.minimal}" } }, "bg-hover": { value: { _light: "{colors.sys.interactive.subtle}" } }, "bg-active": { value: { _light: "{colors.sys.interactive.moderate}" } }, border: { value: { _light: "{colors.sys.interactive.muted}" } }, icon: { value: { _light: "{colors.sys.interactive.strong}" } }, text: { value: { _light: "{colors.sys.interactive.strong}" } } }, neutral: { bg: { value: { _light: "{colors.sys.neutral.minimal}" } }, "bg-hover": { value: { _light: "{colors.sys.neutral.subtle}" } }, "bg-active": { value: { _light: "{colors.sys.neutral.moderate}" } }, border: { value: { _light: "{colors.sys.neutral.muted}" } }, icon: { value: { _light: "{colors.sys.neutral.strong}" } }, text: { value: { _light: "{colors.sys.neutral.strong}" } } }, ai: { bg: { value: { _light: "{colors.sys.turquoise.minimal}" } }, "bg-hover": { value: { _light: "{colors.sys.turquoise.subtle}" } }, "bg-active": { value: { _light: "{colors.sys.turquoise.moderate}" } }, border: { value: { _light: "{colors.sys.turquoise.muted}" } }, icon: { value: { _light: "{colors.sys.turquoise.strong}" } }, text: { value: { _light: "{colors.sys.turquoise.strong}" } } } }, c = { overlay: { value: { _light: "{colors.sys.bg.contrast/50}" } }, "overlay-side": { value: { _light: "linear-gradient (90deg, {colors.sys.bg.contrast/0} 0%, {colors.sys.bg.contrast/32} 100%)" } }, "overlay-light": { value: { _light: "{colors.sys.bg.contrast/16}" } }, skeleton: { value: { _light: "{colors.sys.bg.subtle}" } }, "skeleton-strong": { value: { _light: "{colors.sys.fg.minimal}" } } }, v = { "header-action": { bg: { value: { _light: "{colors.sys.bg.surface/0}" } }, "bg-hover": { value: { _light: "{colors.sys.bg.surface/20}" } }, "bg-active": { value: { _light: "{colors.sys.bg.surface/20}" } }, "bg-selected": { value: { _light: "{colors.sys.bg.surface/20}" } }, "bg-selected-hover": { value: { _light: "{colors.sys.bg.surface/10}" } } } }, h = {
|
|
1
|
+
const l = { primary: { value: { _light: "{colors.pal.purple.30}" } } }, s = { primary: { value: { _light: "{colors.pal.neutral.90}" } } }, o = { fg: { base: { value: { _light: "{colors.pal.neutral.10}" } }, primary: { value: { _light: "{colors.pal.purple.10}" } }, secondary: { value: { _light: "{colors.pal.neutral.40}" } }, tertiary: { value: { _light: "{colors.pal.neutral.60}" } }, subtle: { value: { _light: "{colors.pal.neutral.70}" } }, minimal: { value: { _light: "{colors.pal.neutral.80}" } }, positive: { value: { _light: "{colors.pal.green.50}" } }, negative: { value: { _light: "{colors.pal.red.50}" } }, "on-color": { value: { _light: "{colors.pal.neutral.100}" } }, "on-contrast": { value: { _light: "{colors.pal.neutral.95}" } }, "on-disabled": { value: { _light: "{colors.pal.neutral.70}" } }, disabled: { value: { _light: "{colors.pal.neutral.80}" } } }, bg: { surface: { value: { _light: "{colors.pal.neutral.100}" } }, contrast: { value: { _light: "{colors.pal.neutral.10}" } }, moderate: { value: { _light: "{colors.pal.neutral.90}" } }, subtle: { value: { _light: "{colors.pal.neutral.93}" } }, minimal: { value: { _light: "{colors.pal.neutral.95}" } }, disabled: { value: { _light: "{colors.pal.neutral.95}" } } }, border: { minimal: { value: { _light: "{colors.pal.neutral.93}" } }, subtle: { value: { _light: "{colors.pal.neutral.90}" } }, strong: { value: { _light: "{colors.pal.neutral.80}" } }, emphasized: { value: { _light: "{colors.pal.neutral.70}" } }, critical: { value: { _light: "{colors.pal.red.50}" } }, inverse: { value: { _light: "{colors.pal.neutral.100}" } }, "on-contrast": { value: { _light: "{colors.pal.neutral.95}" } }, disabled: { value: { _light: "{colors.pal.neutral.90}" } } }, primary: { base: { value: { _light: "{colors.pal.purple.40}" } }, emphasized: { value: { _light: "{colors.pal.purple.30}" } }, contrast: { value: { _light: "{colors.pal.purple.10}" } }, muted: { value: { _light: "{colors.pal.purple.80}" } }, subtle: { value: { _light: "{colors.pal.purple.93}" } }, disabled: { value: { _light: "{colors.pal.neutral.90}" } } }, interactive: { base: { value: { _light: "{colors.pal.purple.50}" } }, strong: { value: { _light: "{colors.pal.purple.40}" } }, bold: { value: { _light: "{colors.pal.purple.60}" } }, highlight: { value: { _light: "{colors.pal.purple.70}" } }, muted: { value: { _light: "{colors.pal.purple.80}" } }, moderate: { value: { _light: "{colors.pal.purple.90}" } }, subtle: { value: { _light: "{colors.pal.purple.93}" } }, minimal: { value: { _light: "{colors.pal.purple.95}" } }, disabled: { value: { _light: "{colors.pal.neutral.90}" } } }, info: { base: { value: { _light: "{colors.pal.blue.50}" } }, strong: { value: { _light: "{colors.pal.blue.40}" } }, bold: { value: { _light: "{colors.pal.blue.60}" } }, muted: { value: { _light: "{colors.pal.blue.80}" } }, moderate: { value: { _light: "{colors.pal.blue.90}" } }, subtle: { value: { _light: "{colors.pal.blue.93}" } }, minimal: { value: { _light: "{colors.pal.blue.95}" } } }, success: { base: { value: { _light: "{colors.pal.green.50}" } }, strong: { value: { _light: "{colors.pal.green.40}" } }, bold: { value: { _light: "{colors.pal.green.60}" } }, muted: { value: { _light: "{colors.pal.green.80}" } }, moderate: { value: { _light: "{colors.pal.green.90}" } }, subtle: { value: { _light: "{colors.pal.green.93}" } }, minimal: { value: { _light: "{colors.pal.green.95}" } } }, warning: { base: { value: { _light: "{colors.pal.yellow.50}" } }, strong: { value: { _light: "{colors.pal.yellow.40}" } }, bold: { value: { _light: "{colors.pal.yellow.60}" } }, muted: { value: { _light: "{colors.pal.yellow.80}" } }, moderate: { value: { _light: "{colors.pal.yellow.90}" } }, subtle: { value: { _light: "{colors.pal.yellow.93}" } }, minimal: { value: { _light: "{colors.pal.yellow.95}" } } }, critical: { base: { value: { _light: "{colors.pal.red.50}" } }, dark: { value: { _light: "{colors.pal.red.20}" } }, strong: { value: { _light: "{colors.pal.red.40}" } }, bold: { value: { _light: "{colors.pal.red.60}" } }, muted: { value: { _light: "{colors.pal.red.80}" } }, moderate: { value: { _light: "{colors.pal.red.90}" } }, subtle: { value: { _light: "{colors.pal.red.93}" } }, minimal: { value: { _light: "{colors.pal.red.95}" } } }, neutral: { base: { value: { _light: "{colors.pal.neutral.50}" } }, strong: { value: { _light: "{colors.pal.neutral.40}" } }, bold: { value: { _light: "{colors.pal.neutral.60}" } }, muted: { value: { _light: "{colors.pal.neutral.80}" } }, moderate: { value: { _light: "{colors.pal.neutral.90}" } }, subtle: { value: { _light: "{colors.pal.neutral.93}" } }, minimal: { value: { _light: "{colors.pal.neutral.95}" } } }, orange: { base: { value: { _light: "{colors.pal.orange.50}" } }, strong: { value: { _light: "{colors.pal.orange.40}" } }, bold: { value: { _light: "{colors.pal.orange.60}" } }, muted: { value: { _light: "{colors.pal.orange.80}" } }, moderate: { value: { _light: "{colors.pal.orange.90}" } }, subtle: { value: { _light: "{colors.pal.orange.93}" } }, minimal: { value: { _light: "{colors.pal.orange.95}" } } }, turquoise: { base: { value: { _light: "{colors.pal.turquoise.50}" } }, dark: { value: { _light: "{colors.pal.turquoise.20}" } }, emphasized: { value: { _light: "{colors.pal.turquoise.30}" } }, strong: { value: { _light: "{colors.pal.turquoise.40}" } }, bold: { value: { _light: "{colors.pal.turquoise.60}" } }, muted: { value: { _light: "{colors.pal.turquoise.80}" } }, moderate: { value: { _light: "{colors.pal.turquoise.90}" } }, subtle: { value: { _light: "{colors.pal.turquoise.93}" } }, minimal: { value: { _light: "{colors.pal.turquoise.95}" } } } }, e = { primary: { value: { _light: "{colors.sys.bg.surface}" } }, secondary: { value: { _light: "{colors.sys.bg.minimal}" } }, tertiary: { value: { _light: "{colors.sys.bg.subtle}" } }, hover: { value: { _light: "{colors.sys.bg.subtle}" } }, active: { value: { _light: "{colors.sys.bg.moderate}" } }, selected: { value: { _light: "{colors.sys.interactive.minimal}" } }, "selected-hover": { value: { _light: "{colors.sys.interactive.subtle}" } }, contrast: { value: { _light: "{colors.sys.bg.contrast}" } }, disabled: { value: { _light: "{colors.sys.bg.disabled}" } } }, r = { regular: { value: { _light: "{colors.sys.border.subtle}" } }, minimal: { value: { _light: "{colors.sys.border.minimal}" } }, strong: { value: { _light: "{colors.sys.border.strong}" } }, hover: { value: { _light: "{colors.sys.border.emphasized}" } }, focus: { value: { _light: "{colors.sys.interactive.highlight}" } }, selected: { value: { _light: "{colors.sys.interactive}" } }, error: { value: { _light: "{colors.sys.border.critical}" } }, inverse: { value: { _light: "{colors.sys.border.inverse}" } }, "on-contrast": { value: { _light: "{colors.sys.border.on-contrast}" } }, disabled: { value: { _light: "{colors.sys.border.disabled}" } } }, a = { primary: { value: { _light: "{colors.sys.fg.primary}" } }, secondary: { value: { _light: "{colors.sys.fg.secondary}" } }, tertiary: { value: { _light: "{colors.sys.fg.tertiary}" } }, body: { value: { _light: "{colors.sys.fg}" } }, helper: { value: { _light: "{colors.sys.fg.secondary}" } }, link: { value: { _light: "{colors.sys.interactive}" } }, "link-hover": { value: { _light: "{colors.sys.interactive.strong}" } }, selected: { value: { _light: "{colors.sys.interactive}" } }, positive: { value: { _light: "{colors.sys.fg.positive}" } }, negative: { value: { _light: "{colors.sys.fg.negative}" } }, "on-color": { value: { _light: "{colors.sys.fg.on-color}" } }, "on-contrast": { value: { _light: "{colors.sys.fg.on-contrast}" } }, "on-disabled": { value: { _light: "{colors.sys.fg.on-disabled}" } }, disabled: { value: { _light: "{colors.sys.fg.disabled}" } } }, t = { primary: { value: { _light: "{colors.sys.fg.primary}" } }, secondary: { value: { _light: "{colors.sys.fg.secondary}" } }, tertiary: { value: { _light: "{colors.sys.fg.tertiary}" } }, interactive: { value: { _light: "{colors.sys.interactive}" } }, "interactive-hover": { value: { _light: "{colors.sys.interactive.strong}" } }, positive: { value: { _light: "{colors.sys.fg.positive}" } }, negative: { value: { _light: "{colors.sys.fg.negative}" } }, "on-color": { value: { _light: "{colors.sys.fg.on-color}" } }, "on-contrast": { value: { _light: "{colors.sys.fg.on-contrast}" } }, "on-disabled": { value: { _light: "{colors.sys.fg.on-disabled}" } }, disabled: { value: { _light: "{colors.sys.fg.disabled}" } } }, i = { primary: { bg: { value: { _light: "{colors.sys.primary}" } }, "bg-hover": { value: { _light: "{colors.sys.primary.emphasized}" } }, "bg-active": { value: { _light: "{colors.sys.fg.primary}" } }, "bg-disabled": { value: { _light: "{colors.sys.primary.disabled}" } }, fg: { value: { _light: "{colors.sys.fg.on-color}" } }, "fg-hover": { value: { _light: "{colors.sys.fg.on-color}" } }, "fg-active": { value: { _light: "{colors.sys.fg.on-color}" } }, "fg-disabled": { value: { _light: "{colors.sys.fg.on-disabled}" } } }, secondary: { bg: { value: { _light: "{colors.sys.bg.surface}" } }, "bg-hover": { value: { _light: "{colors.sys.bg.subtle}" } }, "bg-active": { value: { _light: "{colors.sys.bg.moderate}" } }, "bg-disabled": { value: { _light: "{colors.sys.bg.minimal}" } }, fg: { value: { _light: "{colors.sys.fg.primary}" } }, "fg-hover": { value: { _light: "{colors.sys.fg.primary}" } }, "fg-active": { value: { _light: "{colors.sys.fg.primary}" } }, "fg-disabled": { value: { _light: "{colors.sys.fg.disabled}" } }, border: { value: { _light: "{colors.sys.border.strong}" } }, "border-hover": { value: { _light: "{colors.sys.border.emphasized}" } }, "border-active": { value: { _light: "{colors.sys.border.emphasized}" } }, "border-disabled": { value: { _light: "{colors.sys.border.disabled}" } } }, tertiary: { bg: { value: { _light: "transparent" } }, "bg-hover": { value: { _light: "{colors.sys.bg.subtle}" } }, "bg-active": { value: { _light: "{colors.sys.bg.moderate}" } }, "bg-disabled": { value: { _light: "transparent" } }, fg: { value: { _light: "{colors.sys.interactive}" } }, "fg-hover": { value: { _light: "{colors.sys.interactive.strong}" } }, "fg-active": { value: { _light: "{colors.sys.fg.primary}" } }, "fg-disabled": { value: { _light: "{colors.sys.fg.disabled}" } } }, "danger-primary": { bg: { value: { _light: "{colors.sys.critical}" } }, "bg-hover": { value: { _light: "{colors.sys.critical.strong}" } }, "bg-active": { value: { _light: "{colors.sys.critical.dark}" } }, "bg-disabled": { value: { _light: "{colors.sys.primary.disabled}" } }, fg: { value: { _light: "{colors.sys.fg.on-color}" } }, "fg-hover": { value: { _light: "{colors.sys.fg.on-color}" } }, "fg-active": { value: { _light: "{colors.sys.fg.on-color}" } }, "fg-disabled": { value: { _light: "{colors.sys.fg.on-disabled}" } } }, "danger-secondary": { bg: { value: { _light: "{colors.sys.bg.surface}" } }, "bg-hover": { value: { _light: "{colors.sys.critical.minimal}" } }, "bg-active": { value: { _light: "{colors.sys.critical.moderate}" } }, "bg-disabled": { value: { _light: "{colors.sys.bg.minimal}" } }, fg: { value: { _light: "{colors.sys.critical}" } }, "fg-hover": { value: { _light: "{colors.sys.critical}" } }, "fg-active": { value: { _light: "{colors.sys.critical.strong}" } }, "fg-disabled": { value: { _light: "{colors.sys.fg.disabled}" } }, border: { value: { _light: "{colors.sys.critical.muted}" } }, "border-hover": { value: { _light: "{colors.sys.critical.muted}" } }, "border-active": { value: { _light: "{colors.sys.critical}" } }, "border-disabled": { value: { _light: "{colors.sys.border.disabled}" } } }, "danger-tertiary": { bg: { value: { _light: "transparent" } }, "bg-hover": { value: { _light: "{colors.sys.critical.minimal}" } }, "bg-active": { value: { _light: "{colors.sys.critical.moderate}" } }, "bg-disabled": { value: { _light: "transparent" } }, fg: { value: { _light: "{colors.sys.critical}" } }, "fg-hover": { value: { _light: "{colors.sys.critical}" } }, "fg-active": { value: { _light: "{colors.sys.critical.strong}" } }, "fg-disabled": { value: { _light: "{colors.sys.fg.disabled}" } } }, "ai-primary": { bg: { value: { _light: "{colors.sys.turquoise.strong}" } }, "bg-hover": { value: { _light: "{colors.sys.turquoise.emphasized}" } }, "bg-active": { value: { _light: "{colors.sys.turquoise.dark}" } }, "bg-disabled": { value: { _light: "{colors.sys.primary.disabled}" } }, fg: { value: { _light: "{colors.sys.fg.on-color}" } }, "fg-hover": { value: { _light: "{colors.sys.fg.on-color}" } }, "fg-active": { value: { _light: "{colors.sys.fg.on-color}" } }, "fg-disabled": { value: { _light: "{colors.sys.fg.on-disabled}" } } }, "ai-secondary": { bg: { value: { _light: "{colors.sys.bg.surface}" } }, "bg-hover": { value: { _light: "{colors.sys.turquoise.minimal}" } }, "bg-active": { value: { _light: "{colors.sys.turquoise.moderate}" } }, "bg-disabled": { value: { _light: "{colors.sys.bg.minimal}" } }, fg: { value: { _light: "{colors.sys.turquoise}" } }, "fg-hover": { value: { _light: "{colors.sys.turquoise}" } }, "fg-active": { value: { _light: "{colors.sys.turquoise.strong}" } }, "fg-disabled": { value: { _light: "{colors.sys.fg.disabled}" } }, border: { value: { _light: "{colors.sys.turquoise.muted}" } }, "border-hover": { value: { _light: "{colors.sys.turquoise.muted}" } }, "border-active": { value: { _light: "{colors.sys.turquoise}" } }, "border-disabled": { value: { _light: "{colors.sys.border.disabled}" } } }, "ai-tertiary": { bg: { value: { _light: "{colors.sys.bg.transparent}" } }, "bg-hover": { value: { _light: "{colors.sys.turquoise.minimal}" } }, "bg-active": { value: { _light: "{colors.sys.turquoise.moderate}" } }, "bg-disabled": { value: { _light: "{colors.sys.bg.transparent}" } }, fg: { value: { _light: "{colors.sys.turquoise}" } }, "fg-hover": { value: { _light: "{colors.sys.turquoise}" } }, "fg-active": { value: { _light: "{colors.sys.turquoise.strong}" } }, "fg-disabled": { value: { _light: "{colors.sys.fg.disabled}" } } } }, g = { text: { label: { value: { _light: "{colors.sys.fg.primary}" } }, inputValue: { value: { _light: "{colors.sys.fg}" } }, placeholder: { value: { _light: "{colors.sys.fg.subtle}" } }, helper: { value: { _light: "{colors.sys.fg.secondary}" } }, error: { value: { _light: "{colors.sys.fg.negative}" } } }, toggle: { frameOn: { value: { _light: "{colors.sys.success.bold}" } }, "frameOn-disabled": { value: { _light: "{colors.sys.success.bold/50}" } }, frameOff: { value: { _light: "{colors.sys.neutral.bold}" } }, "frameOff-disabled": { value: { _light: "{colors.sys.neutral.bold/50}" } }, slideOn: { value: { _light: "{colors.sys.bg.surface}" } }, "slideOn-disabled": { value: { _light: "{colors.sys.bg.surface}" } }, slideOff: { value: { _light: "{colors.sys.bg.surface}" } }, "slideOff-disabled": { value: { _light: "{colors.sys.bg.surface}" } } } }, u = { info: { bg: { value: { _light: "{colors.sys.info.minimal}" } }, "bg-hover": { value: { _light: "{colors.sys.info.subtle}" } }, "bg-active": { value: { _light: "{colors.sys.info.moderate}" } }, border: { value: { _light: "{colors.sys.info.muted}" } }, icon: { value: { _light: "{colors.sys.info.strong}" } }, text: { value: { _light: "{colors.sys.info.strong}" } } }, success: { bg: { value: { _light: "{colors.sys.success.minimal}" } }, "bg-hover": { value: { _light: "{colors.sys.success.subtle}" } }, "bg-active": { value: { _light: "{colors.sys.success.moderate}" } }, border: { value: { _light: "{colors.sys.success.muted}" } }, icon: { value: { _light: "{colors.sys.success.strong}" } }, text: { value: { _light: "{colors.sys.success.strong}" } } }, warning: { bg: { value: { _light: "{colors.sys.warning.minimal}" } }, "bg-hover": { value: { _light: "{colors.sys.warning.subtle}" } }, "bg-active": { value: { _light: "{colors.sys.warning.moderate}" } }, border: { value: { _light: "{colors.sys.warning.muted}" } }, icon: { value: { _light: "{colors.sys.warning.strong}" } }, text: { value: { _light: "{colors.sys.warning.strong}" } } }, critical: { bg: { value: { _light: "{colors.sys.critical.minimal}" } }, "bg-hover": { value: { _light: "{colors.sys.critical.subtle}" } }, "bg-active": { value: { _light: "{colors.sys.critical.moderate}" } }, border: { value: { _light: "{colors.sys.critical.muted}" } }, icon: { value: { _light: "{colors.sys.critical.strong}" } }, text: { value: { _light: "{colors.sys.critical.strong}" } } }, progress: { bg: { value: { _light: "{colors.sys.interactive.minimal}" } }, "bg-hover": { value: { _light: "{colors.sys.interactive.subtle}" } }, "bg-active": { value: { _light: "{colors.sys.interactive.moderate}" } }, border: { value: { _light: "{colors.sys.interactive.muted}" } }, icon: { value: { _light: "{colors.sys.interactive.strong}" } }, text: { value: { _light: "{colors.sys.interactive.strong}" } } }, neutral: { bg: { value: { _light: "{colors.sys.neutral.minimal}" } }, "bg-hover": { value: { _light: "{colors.sys.neutral.subtle}" } }, "bg-active": { value: { _light: "{colors.sys.neutral.moderate}" } }, border: { value: { _light: "{colors.sys.neutral.muted}" } }, icon: { value: { _light: "{colors.sys.neutral.strong}" } }, text: { value: { _light: "{colors.sys.neutral.strong}" } } }, ai: { bg: { value: { _light: "{colors.sys.turquoise.minimal}" } }, "bg-hover": { value: { _light: "{colors.sys.turquoise.subtle}" } }, "bg-active": { value: { _light: "{colors.sys.turquoise.moderate}" } }, border: { value: { _light: "{colors.sys.turquoise.muted}" } }, icon: { value: { _light: "{colors.sys.turquoise.strong}" } }, text: { value: { _light: "{colors.sys.turquoise.strong}" } } } }, c = { overlay: { value: { _light: "{colors.sys.bg.contrast/50}" } }, "overlay-side": { value: { _light: "linear-gradient (90deg, {colors.sys.bg.contrast/0} 0%, {colors.sys.bg.contrast/32} 100%)" } }, "overlay-light": { value: { _light: "{colors.sys.bg.contrast/16}" } }, skeleton: { value: { _light: "{colors.sys.bg.subtle}" } }, "skeleton-strong": { value: { _light: "{colors.sys.fg.minimal}" } } }, v = { "header-action": { bg: { value: { _light: "{colors.sys.bg.surface/0}" } }, "bg-hover": { value: { _light: "{colors.sys.bg.surface/20}" } }, "bg-active": { value: { _light: "{colors.sys.bg.surface/20}" } }, "bg-selected": { value: { _light: "{colors.sys.bg.surface/20}" } }, "bg-selected-hover": { value: { _light: "{colors.sys.bg.surface/10}" } } } }, h = {
|
|
2
2
|
brand: l,
|
|
3
3
|
separator: s,
|
|
4
4
|
sys: o,
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
declare const switchSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "control" | "indicator" | "thumb", {
|
|
2
|
+
size: {
|
|
3
|
+
sm: {
|
|
4
|
+
root: {
|
|
5
|
+
'--switch-width': string | number;
|
|
6
|
+
'--switch-height': string | number;
|
|
7
|
+
'--switch-indicator-font-size': string | number;
|
|
8
|
+
};
|
|
9
|
+
control: {
|
|
10
|
+
borderRadius: "8";
|
|
11
|
+
};
|
|
12
|
+
label: {
|
|
13
|
+
textStyle: "body/sm/regular";
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
md: {
|
|
17
|
+
root: {
|
|
18
|
+
'--switch-width': string | number;
|
|
19
|
+
'--switch-height': string | number;
|
|
20
|
+
'--switch-indicator-font-size': string | number;
|
|
21
|
+
};
|
|
22
|
+
control: {
|
|
23
|
+
borderRadius: "12";
|
|
24
|
+
};
|
|
25
|
+
label: {
|
|
26
|
+
textStyle: "body/lg/regular";
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
}>;
|
|
31
|
+
export default switchSlotRecipe;
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import { switchAnatomy as i } from "@chakra-ui/react/anatomy";
|
|
2
|
+
import { defineSlotRecipe as e } from "@chakra-ui/react/styled-system";
|
|
3
|
+
import { rem as t } from "../themeUtils.js";
|
|
4
|
+
const l = e({
|
|
5
|
+
slots: i.keys(),
|
|
6
|
+
className: "switch",
|
|
7
|
+
base: {
|
|
8
|
+
root: {
|
|
9
|
+
display: "inline-flex",
|
|
10
|
+
alignItems: "center",
|
|
11
|
+
gap: "8",
|
|
12
|
+
"--switch-diff": "calc(var(--switch-width) - var(--switch-height))",
|
|
13
|
+
"--switch-x": {
|
|
14
|
+
base: "var(--switch-diff)",
|
|
15
|
+
_rtl: "calc(var(--switch-diff) * -1)"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
label: {
|
|
19
|
+
_disabled: {
|
|
20
|
+
color: "text/disabled"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
indicator: {
|
|
24
|
+
color: "icon/on-color",
|
|
25
|
+
position: "absolute",
|
|
26
|
+
width: "var(--switch-height)",
|
|
27
|
+
height: "var(--switch-height)",
|
|
28
|
+
display: "grid",
|
|
29
|
+
placeContent: "center",
|
|
30
|
+
userSelect: "none",
|
|
31
|
+
insetInlineStart: "calc(var(--switch-x) - 2px)",
|
|
32
|
+
_checked: {
|
|
33
|
+
insetInlineStart: "2px"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
control: {
|
|
37
|
+
position: "relative",
|
|
38
|
+
display: "inline-flex",
|
|
39
|
+
width: "var(--switch-width)",
|
|
40
|
+
height: "var(--switch-height)",
|
|
41
|
+
bg: "input/toggle/frameOff",
|
|
42
|
+
cursor: "pointer",
|
|
43
|
+
transition: "backgrounds",
|
|
44
|
+
_checked: {
|
|
45
|
+
bg: "input/toggle/frameOn",
|
|
46
|
+
_disabled: {
|
|
47
|
+
bg: "input/toggle/frameOn-disabled"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
_disabled: {
|
|
51
|
+
bg: "input/toggle/frameOff-disabled",
|
|
52
|
+
cursor: "not-allowed"
|
|
53
|
+
},
|
|
54
|
+
_readOnly: {
|
|
55
|
+
cursor: "default"
|
|
56
|
+
},
|
|
57
|
+
_focusVisible: {
|
|
58
|
+
outline: "3px solid var(--colors-sys-interactive-highlight)"
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
thumb: {
|
|
62
|
+
width: "var(--switch-height)",
|
|
63
|
+
height: "var(--switch-height)",
|
|
64
|
+
bg: "input/toggle/slideOff",
|
|
65
|
+
boxShadow: "small",
|
|
66
|
+
scale: "0.8",
|
|
67
|
+
borderRadius: "inherit",
|
|
68
|
+
transitionProperty: "translate",
|
|
69
|
+
transitionDuration: "fast",
|
|
70
|
+
_checked: {
|
|
71
|
+
bg: "input/toggle/slideOn",
|
|
72
|
+
translate: "var(--switch-x) 0"
|
|
73
|
+
},
|
|
74
|
+
_disabled: {
|
|
75
|
+
bg: "input/toggle/slideOff-disabled",
|
|
76
|
+
_checked: {
|
|
77
|
+
bg: "input/toggle/slideOn-disabled"
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
variants: {
|
|
83
|
+
size: {
|
|
84
|
+
sm: {
|
|
85
|
+
root: {
|
|
86
|
+
"--switch-width": t(32),
|
|
87
|
+
"--switch-height": t(16),
|
|
88
|
+
"--switch-indicator-font-size": t(12)
|
|
89
|
+
},
|
|
90
|
+
control: {
|
|
91
|
+
borderRadius: "8"
|
|
92
|
+
},
|
|
93
|
+
label: {
|
|
94
|
+
textStyle: "body/sm/regular"
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
md: {
|
|
98
|
+
root: {
|
|
99
|
+
"--switch-width": t(48),
|
|
100
|
+
"--switch-height": t(24),
|
|
101
|
+
"--switch-indicator-font-size": t(16)
|
|
102
|
+
},
|
|
103
|
+
control: {
|
|
104
|
+
borderRadius: "12"
|
|
105
|
+
},
|
|
106
|
+
label: {
|
|
107
|
+
textStyle: "body/lg/regular"
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
defaultVariants: {
|
|
113
|
+
size: "md"
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
export {
|
|
117
|
+
l as default
|
|
118
|
+
};
|
|
@@ -34,6 +34,36 @@ declare const slotRecipes: {
|
|
|
34
34
|
};
|
|
35
35
|
};
|
|
36
36
|
}>;
|
|
37
|
+
switch: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "control" | "indicator" | "thumb", {
|
|
38
|
+
size: {
|
|
39
|
+
sm: {
|
|
40
|
+
root: {
|
|
41
|
+
'--switch-width': string | number;
|
|
42
|
+
'--switch-height': string | number;
|
|
43
|
+
'--switch-indicator-font-size': string | number;
|
|
44
|
+
};
|
|
45
|
+
control: {
|
|
46
|
+
borderRadius: "8";
|
|
47
|
+
};
|
|
48
|
+
label: {
|
|
49
|
+
textStyle: "body/sm/regular";
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
md: {
|
|
53
|
+
root: {
|
|
54
|
+
'--switch-width': string | number;
|
|
55
|
+
'--switch-height': string | number;
|
|
56
|
+
'--switch-indicator-font-size': string | number;
|
|
57
|
+
};
|
|
58
|
+
control: {
|
|
59
|
+
borderRadius: "12";
|
|
60
|
+
};
|
|
61
|
+
label: {
|
|
62
|
+
textStyle: "body/lg/regular";
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
};
|
|
66
|
+
}>;
|
|
37
67
|
tooltip: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "trigger" | "arrow" | "arrowTip" | "positioner">>;
|
|
38
68
|
};
|
|
39
69
|
export default slotRecipes;
|
|
@@ -1,13 +1,15 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import t from "./Field.recipe.js";
|
|
2
|
+
import e from "./NativeSelect.js";
|
|
3
3
|
import { numberInputSlotRecipe as o } from "./NumberInput.recipe.js";
|
|
4
|
-
import i from "./
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
import i from "./Switch.recipe.js";
|
|
5
|
+
import p from "./Tooltip.recipe.js";
|
|
6
|
+
const n = {
|
|
7
|
+
field: t,
|
|
8
|
+
nativeSelect: e,
|
|
8
9
|
numberInput: o,
|
|
9
|
-
|
|
10
|
+
switch: i,
|
|
11
|
+
tooltip: p
|
|
10
12
|
};
|
|
11
13
|
export {
|
|
12
|
-
|
|
14
|
+
n as default
|
|
13
15
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bitrise/bitkit-v2",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.3.
|
|
4
|
+
"version": "0.3.62",
|
|
5
5
|
"description": "Bitrise Design System Components built with Chakra UI v3",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"react",
|
|
@@ -63,10 +63,10 @@
|
|
|
63
63
|
"@storybook/addon-docs": "10.0.7",
|
|
64
64
|
"@storybook/react-vite": "10.0.7",
|
|
65
65
|
"@svgr/plugin-jsx": "^8.1.0",
|
|
66
|
-
"@types/node": "^24.10.
|
|
67
|
-
"@types/react-dom": "^19.2.
|
|
66
|
+
"@types/node": "^24.10.1",
|
|
67
|
+
"@types/react-dom": "^19.2.3",
|
|
68
68
|
"@types/react": "^19.2.3",
|
|
69
|
-
"@vitejs/plugin-react": "^5.1.
|
|
69
|
+
"@vitejs/plugin-react": "^5.1.1",
|
|
70
70
|
"axios": "^1.13.2",
|
|
71
71
|
"es-toolkit": "^1.41.0",
|
|
72
72
|
"react-dom": "^19.2.0",
|