@seed-design/css 0.1.14 → 0.2.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.
Files changed (64) hide show
  1. package/all.css +127 -91
  2. package/all.min.css +1 -1
  3. package/base.css +88 -51
  4. package/base.min.css +1 -1
  5. package/package.json +2 -2
  6. package/recipes/action-button.css +4 -4
  7. package/recipes/action-sheet-item.css +1 -1
  8. package/recipes/action-sheet.css +1 -1
  9. package/recipes/app-bar.css +1 -1
  10. package/recipes/avatar.css +1 -1
  11. package/recipes/badge.css +6 -6
  12. package/recipes/checkbox.css +2 -2
  13. package/recipes/chip.css +5 -5
  14. package/recipes/control-chip.css +1 -1
  15. package/recipes/extended-action-sheet-item.css +1 -1
  16. package/recipes/inline-banner.css +1 -2
  17. package/recipes/menu-sheet-item.css +1 -1
  18. package/recipes/page-banner.css +1 -2
  19. package/recipes/radio.css +1 -1
  20. package/recipes/reaction-button.css +3 -3
  21. package/recipes/select-box.css +4 -4
  22. package/recipes/snackbar.css +1 -0
  23. package/recipes/tabs.css +1 -1
  24. package/recipes/text-field.css +3 -3
  25. package/vars/color/fg.d.ts +3 -3
  26. package/vars/color/fg.mjs +3 -3
  27. package/vars/color/stroke.d.ts +14 -10
  28. package/vars/color/stroke.mjs +14 -10
  29. package/vars/component/action-button.d.ts +4 -4
  30. package/vars/component/action-button.mjs +4 -4
  31. package/vars/component/action-sheet.d.ts +1 -1
  32. package/vars/component/action-sheet.mjs +1 -1
  33. package/vars/component/avatar.d.ts +1 -1
  34. package/vars/component/avatar.mjs +1 -1
  35. package/vars/component/badge.d.ts +6 -6
  36. package/vars/component/badge.mjs +6 -6
  37. package/vars/component/checkbox.d.ts +2 -2
  38. package/vars/component/checkbox.mjs +2 -2
  39. package/vars/component/chip.d.ts +6 -6
  40. package/vars/component/chip.mjs +6 -6
  41. package/vars/component/control-chip.d.ts +1 -1
  42. package/vars/component/control-chip.mjs +1 -1
  43. package/vars/component/extended-action-sheet.d.ts +1 -1
  44. package/vars/component/extended-action-sheet.mjs +1 -1
  45. package/vars/component/menu-sheet.d.ts +1 -1
  46. package/vars/component/menu-sheet.mjs +1 -1
  47. package/vars/component/radio.d.ts +1 -1
  48. package/vars/component/radio.mjs +1 -1
  49. package/vars/component/reaction-button.d.ts +1 -1
  50. package/vars/component/reaction-button.mjs +1 -1
  51. package/vars/component/select-box.d.ts +4 -4
  52. package/vars/component/select-box.mjs +4 -4
  53. package/vars/component/snackbar.d.ts +1 -0
  54. package/vars/component/snackbar.mjs +1 -0
  55. package/vars/component/tablist.d.ts +1 -1
  56. package/vars/component/tablist.mjs +1 -1
  57. package/vars/component/text-field.d.ts +4 -4
  58. package/vars/component/text-field.mjs +4 -4
  59. package/vars/component/top-navigation.d.ts +1 -1
  60. package/vars/component/top-navigation.mjs +1 -1
  61. package/vars/font-size.d.ts +8 -1
  62. package/vars/font-size.mjs +8 -1
  63. package/vars/line-height.d.ts +11 -1
  64. package/vars/line-height.mjs +11 -1
package/recipes/radio.css CHANGED
@@ -7,7 +7,7 @@
7
7
  flex: none;
8
8
  background-color: var(--seed-color-bg-layer-default);
9
9
  border-width: 1px;
10
- border-color: var(--seed-color-stroke-control);
10
+ border-color: var(--seed-color-stroke-neutral-weak);
11
11
  border-radius: var(--seed-radius-full);
12
12
  }
13
13
  .seed-radio__root:is(:active, [data-active]) {
package/recipes/reaction-button.css CHANGED
@@ -34,7 +34,7 @@
34
34
  .seed-reaction-button:is([aria-pressed=true], [data-pressed]) {
35
35
  background: var(--seed-color-bg-layer-default);
36
36
  color: var(--seed-color-fg-brand);
37
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand);
37
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
38
38
  --seed-prefix-icon-color: var(--seed-color-fg-brand);
39
39
  --seed-count-color: var(--seed-color-fg-brand);
40
40
  }
@@ -45,7 +45,7 @@
45
45
  cursor: not-allowed;
46
46
  background: var(--seed-color-bg-disabled);
47
47
  color: var(--seed-color-fg-disabled);
48
- box-shadow: inset 0 0 0 0px var(--seed-color-stroke-brand);
48
+ box-shadow: inset 0 0 0 0px var(--seed-color-stroke-brand-weak);
49
49
  --seed-prefix-icon-color: var(--seed-color-fg-disabled);
50
50
  --seed-count-color: var(--seed-color-fg-disabled);
51
51
  }
@@ -54,7 +54,7 @@
54
54
  }
55
55
  .seed-reaction-button:is([aria-pressed=true], [data-pressed])[data-loading] {
56
56
  background: var(--seed-color-bg-layer-default-pressed);
57
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand);
57
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
58
58
  --track-color: var(--seed-color-palette-carrot-200);
59
59
  --range-color: var(--seed-color-fg-brand);
60
60
  }
package/recipes/select-box.css CHANGED
@@ -7,14 +7,14 @@
7
7
  padding-inline: var(--seed-dimension-x4);
8
8
  padding-block: var(--seed-dimension-x5);
9
9
  border-radius: var(--seed-radius-r3);
10
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
10
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
11
11
  }
12
12
  .seed-select-box__root:is(:active, [data-active]) {
13
13
  background-color: var(--seed-color-bg-layer-default-pressed);
14
14
  }
15
15
  .seed-select-box__root:is(:checked, [data-checked]) {
16
16
  background-color: var(--seed-color-bg-neutral-weak);
17
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-control);
17
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
18
18
  }
19
19
  .seed-select-box__root:is(:checked, [data-checked]):is(:active, [data-active]) {
20
20
  background-color: var(--seed-color-bg-neutral-weak-pressed);
@@ -36,7 +36,7 @@
36
36
  background-color: var(--seed-color-bg-layer-default);
37
37
  border-style: solid;
38
38
  border-width: 1px;
39
- border-color: var(--seed-color-stroke-control);
39
+ border-color: var(--seed-color-stroke-neutral-weak);
40
40
  border-radius: var(--seed-radius-r1);
41
41
  }
42
42
  .seed-select-box__checkboxControl:is(:active, [data-active]) {
@@ -69,7 +69,7 @@
69
69
  background-color: var(--seed-color-bg-layer-default);
70
70
  border-style: solid;
71
71
  border-width: 1px;
72
- border-color: var(--seed-color-stroke-control);
72
+ border-color: var(--seed-color-stroke-neutral-weak);
73
73
  border-radius: var(--seed-radius-full);
74
74
  }
75
75
  .seed-select-box__radioControl:is(:active, [data-active]) {
package/recipes/snackbar.css CHANGED
@@ -4,6 +4,7 @@
4
4
  justify-content: space-between;
5
5
  align-items: center;
6
6
  width: 100%;
7
+ max-width: 560px;
7
8
  background: var(--seed-color-bg-neutral-solid);
8
9
  border-radius: var(--seed-radius-r2);
9
10
  padding-inline: var(--seed-dimension-x4);
package/recipes/tabs.css CHANGED
@@ -17,7 +17,7 @@
17
17
  }
18
18
  .seed-tabs__list {
19
19
  background: var(--seed-color-bg-layer-default);
20
- box-shadow: inset 0 -1px var(--seed-color-stroke-neutral);
20
+ box-shadow: inset 0 -1px var(--seed-color-stroke-neutral-muted);
21
21
  }
22
22
  .seed-tabs__carousel {
23
23
  display: block;
package/recipes/text-field.css CHANGED
@@ -18,15 +18,15 @@
18
18
  background-color: var(--seed-color-bg-layer-default);
19
19
  border-style: solid;
20
20
  border-width: 1px;
21
- border-color: var(--seed-color-stroke-field);
21
+ border-color: var(--seed-color-stroke-neutral-weak);
22
22
  overflow: hidden;
23
23
  }
24
24
  .seed-text-field__field:not(:is([data-readonly])):is(:focus, [data-focus]) {
25
- border-color: var(--seed-color-stroke-field-focused);
25
+ border-color: var(--seed-color-stroke-neutral-contrast);
26
26
  }
27
27
  .seed-text-field__field:is(:invalid, [data-invalid]) {
28
28
  background-color: var(--seed-color-bg-critical-weak);
29
- border-color: var(--seed-color-stroke-critical);
29
+ border-color: var(--seed-color-stroke-critical-weak);
30
30
  }
31
31
  .seed-text-field__field:is(:invalid, [data-invalid]):is(:focus, [data-focus]) {
32
32
  background-color: var(--seed-color-bg-layer-default);
package/vars/color/fg.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  export declare const neutral = "var(--seed-color-fg-neutral)";
2
+ export declare const placeholder = "var(--seed-color-fg-placeholder)";
3
+ export declare const disabled = "var(--seed-color-fg-disabled)";
2
4
  export declare const brand = "var(--seed-color-fg-brand)";
5
+ export declare const informative = "var(--seed-color-fg-informative)";
3
6
  export declare const critical = "var(--seed-color-fg-critical)";
4
7
  export declare const positive = "var(--seed-color-fg-positive)";
5
8
  export declare const warning = "var(--seed-color-fg-warning)";
6
- export declare const informative = "var(--seed-color-fg-informative)";
7
- export declare const placeholder = "var(--seed-color-fg-placeholder)";
8
- export declare const disabled = "var(--seed-color-fg-disabled)";
9
9
  export declare const brandContrast = "var(--seed-color-fg-brand-contrast)";
10
10
  export declare const criticalContrast = "var(--seed-color-fg-critical-contrast)";
11
11
  export declare const informativeContrast = "var(--seed-color-fg-informative-contrast)";
package/vars/color/fg.mjs CHANGED
@@ -1,11 +1,11 @@
1
1
  export const neutral = "var(--seed-color-fg-neutral)";
2
+ export const placeholder = "var(--seed-color-fg-placeholder)";
3
+ export const disabled = "var(--seed-color-fg-disabled)";
2
4
  export const brand = "var(--seed-color-fg-brand)";
5
+ export const informative = "var(--seed-color-fg-informative)";
3
6
  export const critical = "var(--seed-color-fg-critical)";
4
7
  export const positive = "var(--seed-color-fg-positive)";
5
8
  export const warning = "var(--seed-color-fg-warning)";
6
- export const informative = "var(--seed-color-fg-informative)";
7
- export const placeholder = "var(--seed-color-fg-placeholder)";
8
- export const disabled = "var(--seed-color-fg-disabled)";
9
9
  export const brandContrast = "var(--seed-color-fg-brand-contrast)";
10
10
  export const criticalContrast = "var(--seed-color-fg-critical-contrast)";
11
11
  export const informativeContrast = "var(--seed-color-fg-informative-contrast)";
package/vars/color/stroke.d.ts CHANGED
@@ -1,11 +1,15 @@
1
- export declare const neutral = "var(--seed-color-stroke-neutral)";
2
- export declare const brand = "var(--seed-color-stroke-brand)";
3
- export declare const positive = "var(--seed-color-stroke-positive)";
4
- export declare const informative = "var(--seed-color-stroke-informative)";
5
- export declare const warning = "var(--seed-color-stroke-warning)";
6
- export declare const critical = "var(--seed-color-stroke-critical)";
7
- export declare const field = "var(--seed-color-stroke-field)";
8
- export declare const control = "var(--seed-color-stroke-control)";
9
- export declare const fieldFocused = "var(--seed-color-stroke-field-focused)";
1
+ export declare const brandWeak = "var(--seed-color-stroke-brand-weak)";
2
+ export declare const brandSolid = "var(--seed-color-stroke-brand-solid)";
3
+ export declare const criticalWeak = "var(--seed-color-stroke-critical-weak)";
4
+ export declare const criticalSolid = "var(--seed-color-stroke-critical-solid)";
5
+ export declare const informativeWeak = "var(--seed-color-stroke-informative-weak)";
6
+ export declare const informativeSolid = "var(--seed-color-stroke-informative-solid)";
7
+ export declare const neutralContrast = "var(--seed-color-stroke-neutral-contrast)";
8
+ export declare const neutralSolid = "var(--seed-color-stroke-neutral-solid)";
9
+ export declare const neutralWeak = "var(--seed-color-stroke-neutral-weak)";
10
10
  export declare const neutralMuted = "var(--seed-color-stroke-neutral-muted)";
11
- export declare const onImage = "var(--seed-color-stroke-on-image)";
11
+ export declare const neutralSubtle = "var(--seed-color-stroke-neutral-subtle)";
12
+ export declare const positiveWeak = "var(--seed-color-stroke-positive-weak)";
13
+ export declare const positiveSolid = "var(--seed-color-stroke-positive-solid)";
14
+ export declare const warningWeak = "var(--seed-color-stroke-warning-weak)";
15
+ export declare const warningSolid = "var(--seed-color-stroke-warning-solid)";
package/vars/color/stroke.mjs CHANGED
@@ -1,11 +1,15 @@
1
- export const neutral = "var(--seed-color-stroke-neutral)";
2
- export const brand = "var(--seed-color-stroke-brand)";
3
- export const positive = "var(--seed-color-stroke-positive)";
4
- export const informative = "var(--seed-color-stroke-informative)";
5
- export const warning = "var(--seed-color-stroke-warning)";
6
- export const critical = "var(--seed-color-stroke-critical)";
7
- export const field = "var(--seed-color-stroke-field)";
8
- export const control = "var(--seed-color-stroke-control)";
9
- export const fieldFocused = "var(--seed-color-stroke-field-focused)";
1
+ export const brandWeak = "var(--seed-color-stroke-brand-weak)";
2
+ export const brandSolid = "var(--seed-color-stroke-brand-solid)";
3
+ export const criticalWeak = "var(--seed-color-stroke-critical-weak)";
4
+ export const criticalSolid = "var(--seed-color-stroke-critical-solid)";
5
+ export const informativeWeak = "var(--seed-color-stroke-informative-weak)";
6
+ export const informativeSolid = "var(--seed-color-stroke-informative-solid)";
7
+ export const neutralContrast = "var(--seed-color-stroke-neutral-contrast)";
8
+ export const neutralSolid = "var(--seed-color-stroke-neutral-solid)";
9
+ export const neutralWeak = "var(--seed-color-stroke-neutral-weak)";
10
10
  export const neutralMuted = "var(--seed-color-stroke-neutral-muted)";
11
- export const onImage = "var(--seed-color-stroke-on-image)";
11
+ export const neutralSubtle = "var(--seed-color-stroke-neutral-subtle)";
12
+ export const positiveWeak = "var(--seed-color-stroke-positive-weak)";
13
+ export const positiveSolid = "var(--seed-color-stroke-positive-solid)";
14
+ export const warningWeak = "var(--seed-color-stroke-warning-weak)";
15
+ export const warningSolid = "var(--seed-color-stroke-warning-solid)";
package/vars/component/action-button.d.ts CHANGED
@@ -214,7 +214,7 @@ export declare const vars: {
214
214
  "enabled": {
215
215
  "root": {
216
216
  "color": "var(--seed-color-bg-layer-default)",
217
- "strokeColor": "var(--seed-color-stroke-neutral)",
217
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
218
218
  "strokeWidth": "1px"
219
219
  },
220
220
  "label": {
@@ -242,7 +242,7 @@ export declare const vars: {
242
242
  "disabled": {
243
243
  "root": {
244
244
  "color": "var(--seed-color-bg-layer-default)",
245
- "strokeColor": "var(--seed-color-stroke-neutral)"
245
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)"
246
246
  },
247
247
  "label": {
248
248
  "color": "var(--seed-color-fg-disabled)"
@@ -267,7 +267,7 @@ export declare const vars: {
267
267
  "enabled": {
268
268
  "root": {
269
269
  "color": "var(--seed-color-bg-layer-default)",
270
- "strokeColor": "var(--seed-color-stroke-neutral)",
270
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
271
271
  "strokeWidth": "1px"
272
272
  },
273
273
  "label": {
@@ -295,7 +295,7 @@ export declare const vars: {
295
295
  "disabled": {
296
296
  "root": {
297
297
  "color": "var(--seed-color-bg-layer-default)",
298
- "strokeColor": "var(--seed-color-stroke-neutral)"
298
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)"
299
299
  },
300
300
  "label": {
301
301
  "color": "var(--seed-color-fg-disabled)"
package/vars/component/action-button.mjs CHANGED
@@ -214,7 +214,7 @@ export const vars = {
214
214
  "enabled": {
215
215
  "root": {
216
216
  "color": "var(--seed-color-bg-layer-default)",
217
- "strokeColor": "var(--seed-color-stroke-neutral)",
217
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
218
218
  "strokeWidth": "1px"
219
219
  },
220
220
  "label": {
@@ -242,7 +242,7 @@ export const vars = {
242
242
  "disabled": {
243
243
  "root": {
244
244
  "color": "var(--seed-color-bg-layer-default)",
245
- "strokeColor": "var(--seed-color-stroke-neutral)"
245
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)"
246
246
  },
247
247
  "label": {
248
248
  "color": "var(--seed-color-fg-disabled)"
@@ -267,7 +267,7 @@ export const vars = {
267
267
  "enabled": {
268
268
  "root": {
269
269
  "color": "var(--seed-color-bg-layer-default)",
270
- "strokeColor": "var(--seed-color-stroke-neutral)",
270
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
271
271
  "strokeWidth": "1px"
272
272
  },
273
273
  "label": {
@@ -295,7 +295,7 @@ export const vars = {
295
295
  "disabled": {
296
296
  "root": {
297
297
  "color": "var(--seed-color-bg-layer-default)",
298
- "strokeColor": "var(--seed-color-stroke-neutral)"
298
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)"
299
299
  },
300
300
  "label": {
301
301
  "color": "var(--seed-color-fg-disabled)"
package/vars/component/action-sheet.d.ts CHANGED
@@ -38,7 +38,7 @@ export declare const vars: {
38
38
  },
39
39
  "divider": {
40
40
  "strokeWidth": "1px",
41
- "strokeColor": "var(--seed-color-stroke-neutral)",
41
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
42
42
  "marginX": "var(--seed-dimension-spacing-x-global-gutter)"
43
43
  }
44
44
  }
package/vars/component/action-sheet.mjs CHANGED
@@ -38,7 +38,7 @@ export const vars = {
38
38
  },
39
39
  "divider": {
40
40
  "strokeWidth": "1px",
41
- "strokeColor": "var(--seed-color-stroke-neutral)",
41
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
42
42
  "marginX": "var(--seed-dimension-spacing-x-global-gutter)"
43
43
  }
44
44
  }
package/vars/component/avatar.d.ts CHANGED
@@ -3,7 +3,7 @@ export declare const vars: {
3
3
  "enabled": {
4
4
  "root": {
5
5
  "cornerRadius": "var(--seed-radius-full)",
6
- "strokeColor": "var(--seed-color-stroke-on-image)"
6
+ "strokeColor": "var(--seed-color-stroke-neutral-subtle)"
7
7
  }
8
8
  }
9
9
  },
package/vars/component/avatar.mjs CHANGED
@@ -3,7 +3,7 @@ export const vars = {
3
3
  "enabled": {
4
4
  "root": {
5
5
  "cornerRadius": "var(--seed-radius-full)",
6
- "strokeColor": "var(--seed-color-stroke-on-image)"
6
+ "strokeColor": "var(--seed-color-stroke-neutral-subtle)"
7
7
  }
8
8
  }
9
9
  },
package/vars/component/badge.d.ts CHANGED
@@ -76,7 +76,7 @@ export declare const vars: {
76
76
  "toneNeutralVariantOutline": {
77
77
  "enabled": {
78
78
  "root": {
79
- "strokeColor": "var(--seed-color-stroke-neutral)"
79
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)"
80
80
  },
81
81
  "label": {
82
82
  "color": "var(--seed-color-fg-neutral-muted)"
@@ -106,7 +106,7 @@ export declare const vars: {
106
106
  "toneBrandVariantOutline": {
107
107
  "enabled": {
108
108
  "root": {
109
- "strokeColor": "var(--seed-color-stroke-brand)"
109
+ "strokeColor": "var(--seed-color-stroke-brand-weak)"
110
110
  },
111
111
  "label": {
112
112
  "color": "var(--seed-color-fg-brand)"
@@ -136,7 +136,7 @@ export declare const vars: {
136
136
  "toneInformativeVariantOutline": {
137
137
  "enabled": {
138
138
  "root": {
139
- "strokeColor": "var(--seed-color-stroke-informative)"
139
+ "strokeColor": "var(--seed-color-stroke-informative-weak)"
140
140
  },
141
141
  "label": {
142
142
  "color": "var(--seed-color-fg-informative)"
@@ -166,7 +166,7 @@ export declare const vars: {
166
166
  "tonePositiveVariantOutline": {
167
167
  "enabled": {
168
168
  "root": {
169
- "strokeColor": "var(--seed-color-stroke-positive)"
169
+ "strokeColor": "var(--seed-color-stroke-positive-weak)"
170
170
  },
171
171
  "label": {
172
172
  "color": "var(--seed-color-fg-positive)"
@@ -196,7 +196,7 @@ export declare const vars: {
196
196
  "toneWarningVariantOutline": {
197
197
  "enabled": {
198
198
  "root": {
199
- "strokeColor": "var(--seed-color-stroke-warning)"
199
+ "strokeColor": "var(--seed-color-stroke-warning-weak)"
200
200
  },
201
201
  "label": {
202
202
  "color": "var(--seed-color-fg-warning)"
@@ -226,7 +226,7 @@ export declare const vars: {
226
226
  "toneCriticalVariantOutline": {
227
227
  "enabled": {
228
228
  "root": {
229
- "strokeColor": "var(--seed-color-stroke-critical)"
229
+ "strokeColor": "var(--seed-color-stroke-critical-weak)"
230
230
  },
231
231
  "label": {
232
232
  "color": "var(--seed-color-fg-critical)"
package/vars/component/badge.mjs CHANGED
@@ -76,7 +76,7 @@ export const vars = {
76
76
  "toneNeutralVariantOutline": {
77
77
  "enabled": {
78
78
  "root": {
79
- "strokeColor": "var(--seed-color-stroke-neutral)"
79
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)"
80
80
  },
81
81
  "label": {
82
82
  "color": "var(--seed-color-fg-neutral-muted)"
@@ -106,7 +106,7 @@ export const vars = {
106
106
  "toneBrandVariantOutline": {
107
107
  "enabled": {
108
108
  "root": {
109
- "strokeColor": "var(--seed-color-stroke-brand)"
109
+ "strokeColor": "var(--seed-color-stroke-brand-weak)"
110
110
  },
111
111
  "label": {
112
112
  "color": "var(--seed-color-fg-brand)"
@@ -136,7 +136,7 @@ export const vars = {
136
136
  "toneInformativeVariantOutline": {
137
137
  "enabled": {
138
138
  "root": {
139
- "strokeColor": "var(--seed-color-stroke-informative)"
139
+ "strokeColor": "var(--seed-color-stroke-informative-weak)"
140
140
  },
141
141
  "label": {
142
142
  "color": "var(--seed-color-fg-informative)"
@@ -166,7 +166,7 @@ export const vars = {
166
166
  "tonePositiveVariantOutline": {
167
167
  "enabled": {
168
168
  "root": {
169
- "strokeColor": "var(--seed-color-stroke-positive)"
169
+ "strokeColor": "var(--seed-color-stroke-positive-weak)"
170
170
  },
171
171
  "label": {
172
172
  "color": "var(--seed-color-fg-positive)"
@@ -196,7 +196,7 @@ export const vars = {
196
196
  "toneWarningVariantOutline": {
197
197
  "enabled": {
198
198
  "root": {
199
- "strokeColor": "var(--seed-color-stroke-warning)"
199
+ "strokeColor": "var(--seed-color-stroke-warning-weak)"
200
200
  },
201
201
  "label": {
202
202
  "color": "var(--seed-color-fg-warning)"
@@ -226,7 +226,7 @@ export const vars = {
226
226
  "toneCriticalVariantOutline": {
227
227
  "enabled": {
228
228
  "root": {
229
- "strokeColor": "var(--seed-color-stroke-critical)"
229
+ "strokeColor": "var(--seed-color-stroke-critical-weak)"
230
230
  },
231
231
  "label": {
232
232
  "color": "var(--seed-color-fg-critical)"
package/vars/component/checkbox.d.ts CHANGED
@@ -26,7 +26,7 @@ export declare const vars: {
26
26
  "variantSquare": {
27
27
  "enabled": {
28
28
  "control": {
29
- "strokeColor": "var(--seed-color-stroke-control)",
29
+ "strokeColor": "var(--seed-color-stroke-neutral-weak)",
30
30
  "strokeWidth": "1px"
31
31
  }
32
32
  },
@@ -54,7 +54,7 @@ export declare const vars: {
54
54
  "disabled": {
55
55
  "control": {
56
56
  "color": "var(--seed-color-bg-disabled)",
57
- "strokeColor": "var(--seed-color-stroke-neutral)"
57
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)"
58
58
  },
59
59
  "label": {
60
60
  "color": "var(--seed-color-fg-disabled)"
package/vars/component/checkbox.mjs CHANGED
@@ -26,7 +26,7 @@ export const vars = {
26
26
  "variantSquare": {
27
27
  "enabled": {
28
28
  "control": {
29
- "strokeColor": "var(--seed-color-stroke-control)",
29
+ "strokeColor": "var(--seed-color-stroke-neutral-weak)",
30
30
  "strokeWidth": "1px"
31
31
  }
32
32
  },
@@ -54,7 +54,7 @@ export const vars = {
54
54
  "disabled": {
55
55
  "control": {
56
56
  "color": "var(--seed-color-bg-disabled)",
57
- "strokeColor": "var(--seed-color-stroke-neutral)"
57
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)"
58
58
  },
59
59
  "label": {
60
60
  "color": "var(--seed-color-fg-disabled)"
package/vars/component/chip.d.ts CHANGED
@@ -107,7 +107,7 @@ export declare const vars: {
107
107
  "variantOutlineStrong": {
108
108
  "enabled": {
109
109
  "root": {
110
- "strokeColor": "var(--seed-color-stroke-neutral)",
110
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
111
111
  "strokeWidth": "1px",
112
112
  "color": "var(--seed-color-bg-layer-default)"
113
113
  },
@@ -126,7 +126,7 @@ export declare const vars: {
126
126
  },
127
127
  "pressed": {
128
128
  "root": {
129
- "strokeColor": "var(--seed-color-stroke-neutral)",
129
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
130
130
  "strokeWidth": "1px",
131
131
  "color": "var(--seed-color-bg-layer-default-pressed)"
132
132
  },
@@ -191,7 +191,7 @@ export declare const vars: {
191
191
  "variantOutlineWeak": {
192
192
  "enabled": {
193
193
  "root": {
194
- "strokeColor": "var(--seed-color-stroke-neutral)",
194
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
195
195
  "strokeWidth": "1px",
196
196
  "color": "var(--seed-color-bg-layer-default)"
197
197
  },
@@ -210,7 +210,7 @@ export declare const vars: {
210
210
  },
211
211
  "pressed": {
212
212
  "root": {
213
- "strokeColor": "var(--seed-color-stroke-neutral)",
213
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
214
214
  "strokeWidth": "1px",
215
215
  "color": "var(--seed-color-bg-layer-default-pressed)"
216
216
  },
@@ -234,7 +234,7 @@ export declare const vars: {
234
234
  },
235
235
  "selected": {
236
236
  "root": {
237
- "strokeColor": "var(--seed-color-stroke-field-focused)",
237
+ "strokeColor": "var(--seed-color-stroke-neutral-contrast)",
238
238
  "strokeWidth": "1px",
239
239
  "color": "var(--seed-color-bg-neutral-weak)"
240
240
  },
@@ -253,7 +253,7 @@ export declare const vars: {
253
253
  },
254
254
  "selectedPressed": {
255
255
  "root": {
256
- "strokeColor": "var(--seed-color-stroke-field-focused)",
256
+ "strokeColor": "var(--seed-color-stroke-neutral-contrast)",
257
257
  "strokeWidth": "1px",
258
258
  "color": "var(--seed-color-bg-neutral-weak-pressed)"
259
259
  },
package/vars/component/chip.mjs CHANGED
@@ -107,7 +107,7 @@ export const vars = {
107
107
  "variantOutlineStrong": {
108
108
  "enabled": {
109
109
  "root": {
110
- "strokeColor": "var(--seed-color-stroke-neutral)",
110
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
111
111
  "strokeWidth": "1px",
112
112
  "color": "var(--seed-color-bg-layer-default)"
113
113
  },
@@ -126,7 +126,7 @@ export const vars = {
126
126
  },
127
127
  "pressed": {
128
128
  "root": {
129
- "strokeColor": "var(--seed-color-stroke-neutral)",
129
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
130
130
  "strokeWidth": "1px",
131
131
  "color": "var(--seed-color-bg-layer-default-pressed)"
132
132
  },
@@ -191,7 +191,7 @@ export const vars = {
191
191
  "variantOutlineWeak": {
192
192
  "enabled": {
193
193
  "root": {
194
- "strokeColor": "var(--seed-color-stroke-neutral)",
194
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
195
195
  "strokeWidth": "1px",
196
196
  "color": "var(--seed-color-bg-layer-default)"
197
197
  },
@@ -210,7 +210,7 @@ export const vars = {
210
210
  },
211
211
  "pressed": {
212
212
  "root": {
213
- "strokeColor": "var(--seed-color-stroke-neutral)",
213
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
214
214
  "strokeWidth": "1px",
215
215
  "color": "var(--seed-color-bg-layer-default-pressed)"
216
216
  },
@@ -234,7 +234,7 @@ export const vars = {
234
234
  },
235
235
  "selected": {
236
236
  "root": {
237
- "strokeColor": "var(--seed-color-stroke-field-focused)",
237
+ "strokeColor": "var(--seed-color-stroke-neutral-contrast)",
238
238
  "strokeWidth": "1px",
239
239
  "color": "var(--seed-color-bg-neutral-weak)"
240
240
  },
@@ -253,7 +253,7 @@ export const vars = {
253
253
  },
254
254
  "selectedPressed": {
255
255
  "root": {
256
- "strokeColor": "var(--seed-color-stroke-field-focused)",
256
+ "strokeColor": "var(--seed-color-stroke-neutral-contrast)",
257
257
  "strokeWidth": "1px",
258
258
  "color": "var(--seed-color-bg-neutral-weak-pressed)"
259
259
  },
package/vars/component/control-chip.d.ts CHANGED
@@ -2,7 +2,7 @@ export declare const vars: {
2
2
  "base": {
3
3
  "enabled": {
4
4
  "root": {
5
- "strokeColor": "var(--seed-color-stroke-neutral)",
5
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
6
6
  "strokeWidth": "1px",
7
7
  "cornerRadius": "var(--seed-radius-full)"
8
8
  },
package/vars/component/control-chip.mjs CHANGED
@@ -2,7 +2,7 @@ export const vars = {
2
2
  "base": {
3
3
  "enabled": {
4
4
  "root": {
5
- "strokeColor": "var(--seed-color-stroke-neutral)",
5
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
6
6
  "strokeWidth": "1px",
7
7
  "cornerRadius": "var(--seed-radius-full)"
8
8
  },
package/vars/component/extended-action-sheet.d.ts CHANGED
@@ -45,7 +45,7 @@ export declare const vars: {
45
45
  },
46
46
  "divider": {
47
47
  "strokeBottomWidth": "1px",
48
- "strokeColor": "var(--seed-color-stroke-neutral)"
48
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)"
49
49
  },
50
50
  "footer": {
51
51
  "paddingTop": "var(--seed-dimension-x2_5)"
package/vars/component/extended-action-sheet.mjs CHANGED
@@ -45,7 +45,7 @@ export const vars = {
45
45
  },
46
46
  "divider": {
47
47
  "strokeBottomWidth": "1px",
48
- "strokeColor": "var(--seed-color-stroke-neutral)"
48
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)"
49
49
  },
50
50
  "footer": {
51
51
  "paddingTop": "var(--seed-dimension-x2_5)"
package/vars/component/menu-sheet.d.ts CHANGED
@@ -45,7 +45,7 @@ export declare const vars: {
45
45
  },
46
46
  "divider": {
47
47
  "strokeBottomWidth": "1px",
48
- "strokeColor": "var(--seed-color-stroke-neutral)"
48
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)"
49
49
  },
50
50
  "footer": {
51
51
  "paddingTop": "var(--seed-dimension-x2_5)"
package/vars/component/menu-sheet.mjs CHANGED
@@ -45,7 +45,7 @@ export const vars = {
45
45
  },
46
46
  "divider": {
47
47
  "strokeBottomWidth": "1px",
48
- "strokeColor": "var(--seed-color-stroke-neutral)"
48
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)"
49
49
  },
50
50
  "footer": {
51
51
  "paddingTop": "var(--seed-dimension-x2_5)"
package/vars/component/radio.d.ts CHANGED
@@ -4,7 +4,7 @@ export declare const vars: {
4
4
  "root": {
5
5
  "color": "var(--seed-color-bg-layer-default)",
6
6
  "strokeWidth": "1px",
7
- "strokeColor": "var(--seed-color-stroke-control)",
7
+ "strokeColor": "var(--seed-color-stroke-neutral-weak)",
8
8
  "cornerRadius": "var(--seed-radius-full)"
9
9
  },
10
10
  "icon": {
package/vars/component/radio.mjs CHANGED
@@ -4,7 +4,7 @@ export const vars = {
4
4
  "root": {
5
5
  "color": "var(--seed-color-bg-layer-default)",
6
6
  "strokeWidth": "1px",
7
- "strokeColor": "var(--seed-color-stroke-control)",
7
+ "strokeColor": "var(--seed-color-stroke-neutral-weak)",
8
8
  "cornerRadius": "var(--seed-radius-full)"
9
9
  },
10
10
  "icon": {