@seed-design/css 0.2.3 → 0.2.4

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.
@@ -14,14 +14,14 @@ export declare const vars: {
14
14
  }
15
15
  }
16
16
  },
17
- "weightDefault": {
17
+ "weightRegular": {
18
18
  "enabled": {
19
19
  "label": {
20
20
  "fontWeight": "var(--seed-font-weight-regular)"
21
21
  }
22
22
  }
23
23
  },
24
- "weightStronger": {
24
+ "weightBold": {
25
25
  "enabled": {
26
26
  "label": {
27
27
  "fontWeight": "var(--seed-font-weight-bold)"
@@ -14,14 +14,14 @@ export const vars = {
14
14
  }
15
15
  }
16
16
  },
17
- "weightDefault": {
17
+ "weightRegular": {
18
18
  "enabled": {
19
19
  "label": {
20
20
  "fontWeight": "var(--seed-font-weight-regular)"
21
21
  }
22
22
  }
23
23
  },
24
- "weightStronger": {
24
+ "weightBold": {
25
25
  "enabled": {
26
26
  "label": {
27
27
  "fontWeight": "var(--seed-font-weight-bold)"
@@ -2,16 +2,8 @@ export declare const vars: {
2
2
  "variantSquare": {
3
3
  "enabled": {
4
4
  "root": {
5
- "strokeColor": "var(--seed-color-stroke-neutral-weak)",
6
- "strokeWidth": "1px"
7
- }
8
- },
9
- "enabledSelected": {
10
- "root": {
11
- "color": "var(--seed-color-bg-brand-solid)"
12
- },
13
- "icon": {
14
- "color": "var(--seed-color-palette-static-white)"
5
+ "strokeWidth": "1px",
6
+ "strokeColor": "var(--seed-color-stroke-neutral-weak)"
15
7
  }
16
8
  },
17
9
  "pressed": {
@@ -19,12 +11,10 @@ export declare const vars: {
19
11
  "color": "var(--seed-color-bg-layer-default-pressed)"
20
12
  }
21
13
  },
22
- "pressedSelected": {
14
+ "enabledSelected": {
23
15
  "root": {
24
- "color": "var(--seed-color-bg-brand-solid-pressed)"
25
- },
26
- "icon": {
27
- "color": "var(--seed-color-palette-static-white)"
16
+ "strokeWidth": "0px",
17
+ "strokeColor": "#00000000"
28
18
  }
29
19
  },
30
20
  "disabled": {
@@ -42,25 +32,45 @@ export declare const vars: {
42
32
  }
43
33
  }
44
34
  },
45
- "variantGhost": {
46
- "enabled": {
35
+ "variantSquareToneBrand": {
36
+ "enabledSelected": {
37
+ "root": {
38
+ "color": "var(--seed-color-bg-brand-solid)"
39
+ },
47
40
  "icon": {
48
- "color": "var(--seed-color-fg-placeholder)"
41
+ "color": "var(--seed-color-palette-static-white)"
49
42
  }
50
43
  },
44
+ "pressedSelected": {
45
+ "root": {
46
+ "color": "var(--seed-color-bg-brand-solid-pressed)"
47
+ }
48
+ }
49
+ },
50
+ "variantSquareToneNeutral": {
51
51
  "enabledSelected": {
52
+ "root": {
53
+ "color": "var(--seed-color-bg-neutral-inverted)"
54
+ },
52
55
  "icon": {
53
- "color": "var(--seed-color-fg-brand)"
56
+ "color": "var(--seed-color-fg-neutral-inverted)"
54
57
  }
55
58
  },
56
- "pressed": {
59
+ "pressedSelected": {
57
60
  "root": {
58
- "color": "var(--seed-color-bg-layer-default-pressed)"
61
+ "color": "var(--seed-color-bg-neutral-inverted-pressed)"
62
+ }
63
+ }
64
+ },
65
+ "variantGhost": {
66
+ "enabled": {
67
+ "icon": {
68
+ "color": "var(--seed-color-fg-placeholder)"
59
69
  }
60
70
  },
61
- "pressedSelected": {
71
+ "pressed": {
62
72
  "root": {
63
- "color": "var(--seed-color-palette-carrot-200)"
73
+ "color": "var(--seed-color-bg-layer-default-pressed)"
64
74
  }
65
75
  },
66
76
  "disabled": {
@@ -74,6 +84,30 @@ export declare const vars: {
74
84
  }
75
85
  }
76
86
  },
87
+ "variantGhostToneBrand": {
88
+ "enabledSelected": {
89
+ "icon": {
90
+ "color": "var(--seed-color-fg-brand)"
91
+ }
92
+ },
93
+ "pressedSelected": {
94
+ "root": {
95
+ "color": "var(--seed-color-palette-carrot-200)"
96
+ }
97
+ }
98
+ },
99
+ "variantGhostToneNeutral": {
100
+ "enabledSelected": {
101
+ "icon": {
102
+ "color": "var(--seed-color-fg-neutral-muted)"
103
+ }
104
+ },
105
+ "pressedSelected": {
106
+ "root": {
107
+ "color": "var(--seed-color-palette-gray-200)"
108
+ }
109
+ }
110
+ },
77
111
  "sizeMedium": {
78
112
  "enabled": {
79
113
  "root": {
@@ -2,16 +2,8 @@ export const vars = {
2
2
  "variantSquare": {
3
3
  "enabled": {
4
4
  "root": {
5
- "strokeColor": "var(--seed-color-stroke-neutral-weak)",
6
- "strokeWidth": "1px"
7
- }
8
- },
9
- "enabledSelected": {
10
- "root": {
11
- "color": "var(--seed-color-bg-brand-solid)"
12
- },
13
- "icon": {
14
- "color": "var(--seed-color-palette-static-white)"
5
+ "strokeWidth": "1px",
6
+ "strokeColor": "var(--seed-color-stroke-neutral-weak)"
15
7
  }
16
8
  },
17
9
  "pressed": {
@@ -19,12 +11,10 @@ export const vars = {
19
11
  "color": "var(--seed-color-bg-layer-default-pressed)"
20
12
  }
21
13
  },
22
- "pressedSelected": {
14
+ "enabledSelected": {
23
15
  "root": {
24
- "color": "var(--seed-color-bg-brand-solid-pressed)"
25
- },
26
- "icon": {
27
- "color": "var(--seed-color-palette-static-white)"
16
+ "strokeWidth": "0px",
17
+ "strokeColor": "#00000000"
28
18
  }
29
19
  },
30
20
  "disabled": {
@@ -42,25 +32,45 @@ export const vars = {
42
32
  }
43
33
  }
44
34
  },
45
- "variantGhost": {
46
- "enabled": {
35
+ "variantSquareToneBrand": {
36
+ "enabledSelected": {
37
+ "root": {
38
+ "color": "var(--seed-color-bg-brand-solid)"
39
+ },
47
40
  "icon": {
48
- "color": "var(--seed-color-fg-placeholder)"
41
+ "color": "var(--seed-color-palette-static-white)"
49
42
  }
50
43
  },
44
+ "pressedSelected": {
45
+ "root": {
46
+ "color": "var(--seed-color-bg-brand-solid-pressed)"
47
+ }
48
+ }
49
+ },
50
+ "variantSquareToneNeutral": {
51
51
  "enabledSelected": {
52
+ "root": {
53
+ "color": "var(--seed-color-bg-neutral-inverted)"
54
+ },
52
55
  "icon": {
53
- "color": "var(--seed-color-fg-brand)"
56
+ "color": "var(--seed-color-fg-neutral-inverted)"
54
57
  }
55
58
  },
56
- "pressed": {
59
+ "pressedSelected": {
57
60
  "root": {
58
- "color": "var(--seed-color-bg-layer-default-pressed)"
61
+ "color": "var(--seed-color-bg-neutral-inverted-pressed)"
62
+ }
63
+ }
64
+ },
65
+ "variantGhost": {
66
+ "enabled": {
67
+ "icon": {
68
+ "color": "var(--seed-color-fg-placeholder)"
59
69
  }
60
70
  },
61
- "pressedSelected": {
71
+ "pressed": {
62
72
  "root": {
63
- "color": "var(--seed-color-palette-carrot-200)"
73
+ "color": "var(--seed-color-bg-layer-default-pressed)"
64
74
  }
65
75
  },
66
76
  "disabled": {
@@ -74,6 +84,30 @@ export const vars = {
74
84
  }
75
85
  }
76
86
  },
87
+ "variantGhostToneBrand": {
88
+ "enabledSelected": {
89
+ "icon": {
90
+ "color": "var(--seed-color-fg-brand)"
91
+ }
92
+ },
93
+ "pressedSelected": {
94
+ "root": {
95
+ "color": "var(--seed-color-palette-carrot-200)"
96
+ }
97
+ }
98
+ },
99
+ "variantGhostToneNeutral": {
100
+ "enabledSelected": {
101
+ "icon": {
102
+ "color": "var(--seed-color-fg-neutral-muted)"
103
+ }
104
+ },
105
+ "pressedSelected": {
106
+ "root": {
107
+ "color": "var(--seed-color-palette-gray-200)"
108
+ }
109
+ }
110
+ },
77
111
  "sizeMedium": {
78
112
  "enabled": {
79
113
  "root": {
@@ -231,19 +231,19 @@ export declare const vars: {
231
231
  "color": "var(--seed-color-bg-warning-solid)"
232
232
  },
233
233
  "prefixIcon": {
234
- "color": "var(--seed-color-fg-neutral)"
234
+ "color": "var(--seed-color-palette-static-black-alpha-900)"
235
235
  },
236
236
  "title": {
237
- "color": "var(--seed-color-fg-neutral)"
237
+ "color": "var(--seed-color-palette-static-black-alpha-900)"
238
238
  },
239
239
  "description": {
240
- "color": "var(--seed-color-fg-neutral)"
240
+ "color": "var(--seed-color-palette-static-black-alpha-900)"
241
241
  },
242
242
  "button": {
243
- "color": "var(--seed-color-fg-neutral)"
243
+ "color": "var(--seed-color-palette-static-black-alpha-900)"
244
244
  },
245
245
  "suffixIcon": {
246
- "color": "var(--seed-color-fg-neutral)"
246
+ "color": "var(--seed-color-palette-static-black-alpha-900)"
247
247
  }
248
248
  },
249
249
  "pressed": {
@@ -231,19 +231,19 @@ export const vars = {
231
231
  "color": "var(--seed-color-bg-warning-solid)"
232
232
  },
233
233
  "prefixIcon": {
234
- "color": "var(--seed-color-fg-neutral)"
234
+ "color": "var(--seed-color-palette-static-black-alpha-900)"
235
235
  },
236
236
  "title": {
237
- "color": "var(--seed-color-fg-neutral)"
237
+ "color": "var(--seed-color-palette-static-black-alpha-900)"
238
238
  },
239
239
  "description": {
240
- "color": "var(--seed-color-fg-neutral)"
240
+ "color": "var(--seed-color-palette-static-black-alpha-900)"
241
241
  },
242
242
  "button": {
243
- "color": "var(--seed-color-fg-neutral)"
243
+ "color": "var(--seed-color-palette-static-black-alpha-900)"
244
244
  },
245
245
  "suffixIcon": {
246
- "color": "var(--seed-color-fg-neutral)"
246
+ "color": "var(--seed-color-palette-static-black-alpha-900)"
247
247
  }
248
248
  },
249
249
  "pressed": {
@@ -14,14 +14,14 @@ export declare const vars: {
14
14
  }
15
15
  }
16
16
  },
17
- "weightDefault": {
17
+ "weightRegular": {
18
18
  "enabled": {
19
19
  "label": {
20
20
  "fontWeight": "var(--seed-font-weight-regular)"
21
21
  }
22
22
  }
23
23
  },
24
- "weightStronger": {
24
+ "weightBold": {
25
25
  "enabled": {
26
26
  "label": {
27
27
  "fontWeight": "var(--seed-font-weight-bold)"
@@ -14,14 +14,14 @@ export const vars = {
14
14
  }
15
15
  }
16
16
  },
17
- "weightDefault": {
17
+ "weightRegular": {
18
18
  "enabled": {
19
19
  "label": {
20
20
  "fontWeight": "var(--seed-font-weight-regular)"
21
21
  }
22
22
  }
23
23
  },
24
- "weightStronger": {
24
+ "weightBold": {
25
25
  "enabled": {
26
26
  "label": {
27
27
  "fontWeight": "var(--seed-font-weight-bold)"
@@ -2,7 +2,6 @@ export declare const vars: {
2
2
  "base": {
3
3
  "enabled": {
4
4
  "root": {
5
- "color": "var(--seed-color-bg-layer-default)",
6
5
  "strokeWidth": "1px",
7
6
  "strokeColor": "var(--seed-color-stroke-neutral-weak)",
8
7
  "cornerRadius": "var(--seed-radius-full)"
@@ -18,16 +17,8 @@ export declare const vars: {
18
17
  },
19
18
  "enabledSelected": {
20
19
  "root": {
21
- "color": "var(--seed-color-bg-brand-solid)",
22
- "strokeWidth": "0px"
23
- },
24
- "icon": {
25
- "color": "var(--seed-color-palette-static-white)"
26
- }
27
- },
28
- "enabledSelectedPressed": {
29
- "root": {
30
- "color": "var(--seed-color-bg-brand-solid-pressed)"
20
+ "strokeWidth": "0px",
21
+ "strokeColor": "#00000000"
31
22
  }
32
23
  },
33
24
  "disabled": {
@@ -44,6 +35,36 @@ export declare const vars: {
44
35
  }
45
36
  }
46
37
  },
38
+ "toneBrand": {
39
+ "enabledSelected": {
40
+ "root": {
41
+ "color": "var(--seed-color-bg-brand-solid)"
42
+ },
43
+ "icon": {
44
+ "color": "var(--seed-color-palette-static-white)"
45
+ }
46
+ },
47
+ "enabledSelectedPressed": {
48
+ "root": {
49
+ "color": "var(--seed-color-bg-brand-solid-pressed)"
50
+ }
51
+ }
52
+ },
53
+ "toneNeutral": {
54
+ "enabledSelected": {
55
+ "root": {
56
+ "color": "var(--seed-color-bg-neutral-inverted)"
57
+ },
58
+ "icon": {
59
+ "color": "var(--seed-color-fg-neutral-inverted)"
60
+ }
61
+ },
62
+ "enabledSelectedPressed": {
63
+ "root": {
64
+ "color": "var(--seed-color-bg-neutral-inverted-pressed)"
65
+ }
66
+ }
67
+ },
47
68
  "sizeMedium": {
48
69
  "enabled": {
49
70
  "root": {
@@ -2,7 +2,6 @@ export const vars = {
2
2
  "base": {
3
3
  "enabled": {
4
4
  "root": {
5
- "color": "var(--seed-color-bg-layer-default)",
6
5
  "strokeWidth": "1px",
7
6
  "strokeColor": "var(--seed-color-stroke-neutral-weak)",
8
7
  "cornerRadius": "var(--seed-radius-full)"
@@ -18,16 +17,8 @@ export const vars = {
18
17
  },
19
18
  "enabledSelected": {
20
19
  "root": {
21
- "color": "var(--seed-color-bg-brand-solid)",
22
- "strokeWidth": "0px"
23
- },
24
- "icon": {
25
- "color": "var(--seed-color-palette-static-white)"
26
- }
27
- },
28
- "enabledSelectedPressed": {
29
- "root": {
30
- "color": "var(--seed-color-bg-brand-solid-pressed)"
20
+ "strokeWidth": "0px",
21
+ "strokeColor": "#00000000"
31
22
  }
32
23
  },
33
24
  "disabled": {
@@ -44,6 +35,36 @@ export const vars = {
44
35
  }
45
36
  }
46
37
  },
38
+ "toneBrand": {
39
+ "enabledSelected": {
40
+ "root": {
41
+ "color": "var(--seed-color-bg-brand-solid)"
42
+ },
43
+ "icon": {
44
+ "color": "var(--seed-color-palette-static-white)"
45
+ }
46
+ },
47
+ "enabledSelectedPressed": {
48
+ "root": {
49
+ "color": "var(--seed-color-bg-brand-solid-pressed)"
50
+ }
51
+ }
52
+ },
53
+ "toneNeutral": {
54
+ "enabledSelected": {
55
+ "root": {
56
+ "color": "var(--seed-color-bg-neutral-inverted)"
57
+ },
58
+ "icon": {
59
+ "color": "var(--seed-color-fg-neutral-inverted)"
60
+ }
61
+ },
62
+ "enabledSelectedPressed": {
63
+ "root": {
64
+ "color": "var(--seed-color-bg-neutral-inverted-pressed)"
65
+ }
66
+ }
67
+ },
47
68
  "sizeMedium": {
48
69
  "enabled": {
49
70
  "root": {
@@ -6,7 +6,6 @@ export declare const vars: {
6
6
  "cornerRadius": "var(--seed-radius-full)"
7
7
  },
8
8
  "thumb": {
9
- "color": "var(--seed-color-palette-static-white)",
10
9
  "cornerRadius": "var(--seed-radius-full)"
11
10
  },
12
11
  "label": {
@@ -14,11 +13,6 @@ export declare const vars: {
14
13
  "fontWeight": "var(--seed-font-weight-medium)"
15
14
  }
16
15
  },
17
- "enabledSelected": {
18
- "control": {
19
- "color": "var(--seed-color-bg-brand-solid)"
20
- }
21
- },
22
16
  "disabled": {
23
17
  "control": {
24
18
  "opacity": "0.38"
@@ -28,6 +22,30 @@ export declare const vars: {
28
22
  }
29
23
  }
30
24
  },
25
+ "toneBrand": {
26
+ "enabled": {
27
+ "thumb": {
28
+ "color": "var(--seed-color-palette-static-white)"
29
+ }
30
+ },
31
+ "enabledSelected": {
32
+ "control": {
33
+ "color": "var(--seed-color-bg-brand-solid)"
34
+ }
35
+ }
36
+ },
37
+ "toneNeutral": {
38
+ "enabled": {
39
+ "thumb": {
40
+ "color": "var(--seed-color-fg-neutral-inverted)"
41
+ }
42
+ },
43
+ "enabledSelected": {
44
+ "control": {
45
+ "color": "var(--seed-color-bg-neutral-inverted)"
46
+ }
47
+ }
48
+ },
31
49
  "size32": {
32
50
  "enabled": {
33
51
  "root": {
@@ -37,12 +55,12 @@ export declare const vars: {
37
55
  "control": {
38
56
  "height": "32px",
39
57
  "width": "52px",
40
- "paddingX": "2px",
41
- "paddingY": "2px"
58
+ "paddingX": "3px",
59
+ "paddingY": "3px"
42
60
  },
43
61
  "thumb": {
44
- "height": "28px",
45
- "width": "28px",
62
+ "height": "26px",
63
+ "width": "26px",
46
64
  "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
47
65
  },
48
66
  "label": {
@@ -6,7 +6,6 @@ export const vars = {
6
6
  "cornerRadius": "var(--seed-radius-full)"
7
7
  },
8
8
  "thumb": {
9
- "color": "var(--seed-color-palette-static-white)",
10
9
  "cornerRadius": "var(--seed-radius-full)"
11
10
  },
12
11
  "label": {
@@ -14,11 +13,6 @@ export const vars = {
14
13
  "fontWeight": "var(--seed-font-weight-medium)"
15
14
  }
16
15
  },
17
- "enabledSelected": {
18
- "control": {
19
- "color": "var(--seed-color-bg-brand-solid)"
20
- }
21
- },
22
16
  "disabled": {
23
17
  "control": {
24
18
  "opacity": "0.38"
@@ -28,6 +22,30 @@ export const vars = {
28
22
  }
29
23
  }
30
24
  },
25
+ "toneBrand": {
26
+ "enabled": {
27
+ "thumb": {
28
+ "color": "var(--seed-color-palette-static-white)"
29
+ }
30
+ },
31
+ "enabledSelected": {
32
+ "control": {
33
+ "color": "var(--seed-color-bg-brand-solid)"
34
+ }
35
+ }
36
+ },
37
+ "toneNeutral": {
38
+ "enabled": {
39
+ "thumb": {
40
+ "color": "var(--seed-color-fg-neutral-inverted)"
41
+ }
42
+ },
43
+ "enabledSelected": {
44
+ "control": {
45
+ "color": "var(--seed-color-bg-neutral-inverted)"
46
+ }
47
+ }
48
+ },
31
49
  "size32": {
32
50
  "enabled": {
33
51
  "root": {
@@ -37,12 +55,12 @@ export const vars = {
37
55
  "control": {
38
56
  "height": "32px",
39
57
  "width": "52px",
40
- "paddingX": "2px",
41
- "paddingY": "2px"
58
+ "paddingX": "3px",
59
+ "paddingY": "3px"
42
60
  },
43
61
  "thumb": {
44
- "height": "28px",
45
- "width": "28px",
62
+ "height": "26px",
63
+ "width": "26px",
46
64
  "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
47
65
  },
48
66
  "label": {