@impulse-ui-native/theme 11.4.0 → 14.0.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 (37) hide show
  1. package/dist/index.d.mts +2 -2
  2. package/dist/theme/create-avatar-tokens.js +54 -13
  3. package/dist/theme/create-avatar-tokens.js.map +1 -1
  4. package/dist/theme/create-button-tokens.js +206 -56
  5. package/dist/theme/create-button-tokens.js.map +1 -1
  6. package/dist/theme/create-checkbox-tokens.js +198 -55
  7. package/dist/theme/create-checkbox-tokens.js.map +1 -1
  8. package/dist/theme/create-control-tokens.js +522 -86
  9. package/dist/theme/create-control-tokens.js.map +1 -1
  10. package/dist/theme/create-icon-button-tokens.js +206 -56
  11. package/dist/theme/create-icon-button-tokens.js.map +1 -1
  12. package/dist/theme/create-radio-tokens.js +198 -55
  13. package/dist/theme/create-radio-tokens.js.map +1 -1
  14. package/dist/theme/create-segmented-control-tokens.js +219 -64
  15. package/dist/theme/create-segmented-control-tokens.js.map +1 -1
  16. package/dist/theme/create-slider-tokens.js +391 -121
  17. package/dist/theme/create-slider-tokens.js.map +1 -1
  18. package/dist/theme/create-switch-tokens.js +165 -46
  19. package/dist/theme/create-switch-tokens.js.map +1 -1
  20. package/dist/theme/create-tag-tokens.js +38 -0
  21. package/dist/theme/create-tag-tokens.js.map +1 -1
  22. package/dist/types/avatar-tokens.types.d.mts +2 -2
  23. package/dist/types/buttons-tokens.types.d.mts +3 -3
  24. package/dist/types/checkbox-tokens.types.d.mts +2 -2
  25. package/dist/types/components.types.d.mts +5 -2
  26. package/dist/types/control-tokens.types.d.mts +4 -4
  27. package/dist/types/index.d.mts +2 -2
  28. package/dist/types/radio-tokens.types.d.mts +2 -2
  29. package/dist/types/segmented-control-tokens.types.d.mts +3 -2
  30. package/dist/types/slider-tokens.types.d.mts +3 -2
  31. package/dist/types/switch-tokens.types.d.mts +2 -2
  32. package/dist/types/tag-tokens.types.d.mts +4 -4
  33. package/dist/utils/segmented-control-state.utils.js +2 -2
  34. package/dist/utils/segmented-control-state.utils.js.map +1 -1
  35. package/dist/utils/slider-tokens.utils.js +1 -1
  36. package/dist/utils/slider-tokens.utils.js.map +1 -1
  37. package/package.json +2 -2
package/dist/theme/create-radio-tokens.js CHANGED
@@ -3,6 +3,11 @@ function createRadioTokens(tokens) {
3
3
  const primaryContrast = tokens.colors.primary.contrast;
4
4
  const secondary = tokens.colors.secondary.value;
5
5
  const secondaryContrast = tokens.colors.secondary.contrast;
6
+ const neutral = tokens.colors.text.secondary;
7
+ const neutralContrast = tokens.colors.text.inverse;
8
+ const neutralSoft = tokens.colors.surface.subtle.value;
9
+ const neutralSoftContrast = tokens.colors.text.primary;
10
+ const subtle = tokens.colors.subtle.value;
6
11
  return {
7
12
  borderWidth: tokens.borderSize.md,
8
13
  borderRadius: tokens.radii.round,
@@ -23,71 +28,209 @@ function createRadioTokens(tokens) {
23
28
  hitSlop: 8
24
29
  }
25
30
  },
26
- variants: {
27
- filled: {
28
- unselected: {
29
- backgroundColor: "transparent",
30
- borderColor: tokens.colors.border.strong.value,
31
- color: primaryContrast
31
+ colors: {
32
+ neutral: {
33
+ filled: {
34
+ unselected: {
35
+ backgroundColor: "transparent",
36
+ borderColor: tokens.colors.border.strong.value,
37
+ color: neutralContrast
38
+ },
39
+ selected: {
40
+ backgroundColor: neutral,
41
+ borderColor: neutral,
42
+ color: neutralContrast
43
+ },
44
+ disabledUnselected: {
45
+ backgroundColor: "transparent",
46
+ borderColor: tokens.colors.border.default.value,
47
+ color: tokens.colors.text.disabled
48
+ },
49
+ disabledSelected: {
50
+ backgroundColor: tokens.colors.surface.subtle.value,
51
+ borderColor: tokens.colors.border.default.value,
52
+ color: tokens.colors.text.disabled
53
+ }
32
54
  },
33
- selected: {
34
- backgroundColor: primary,
35
- borderColor: primary,
36
- color: primaryContrast
55
+ outlined: {
56
+ unselected: {
57
+ backgroundColor: "transparent",
58
+ borderColor: tokens.colors.border.strong.value,
59
+ color: neutral
60
+ },
61
+ selected: {
62
+ backgroundColor: "transparent",
63
+ borderColor: neutral,
64
+ color: neutral
65
+ },
66
+ disabledUnselected: {
67
+ backgroundColor: "transparent",
68
+ borderColor: tokens.colors.border.default.value,
69
+ color: tokens.colors.text.disabled
70
+ },
71
+ disabledSelected: {
72
+ backgroundColor: tokens.colors.surface.subtle.value,
73
+ borderColor: tokens.colors.border.default.value,
74
+ color: tokens.colors.text.disabled
75
+ }
37
76
  },
38
- disabledUnselected: {
39
- backgroundColor: "transparent",
40
- borderColor: tokens.colors.border.default.value,
41
- color: tokens.colors.text.disabled
42
- },
43
- disabledSelected: {
44
- backgroundColor: tokens.colors.surface.subtle.value,
45
- borderColor: tokens.colors.border.default.value,
46
- color: tokens.colors.text.disabled
77
+ soft: {
78
+ unselected: {
79
+ backgroundColor: "transparent",
80
+ borderColor: tokens.colors.border.strong.value,
81
+ color: neutralSoftContrast
82
+ },
83
+ selected: {
84
+ backgroundColor: neutralSoft,
85
+ borderColor: neutralSoft,
86
+ color: neutralSoftContrast
87
+ },
88
+ disabledUnselected: {
89
+ backgroundColor: "transparent",
90
+ borderColor: tokens.colors.border.default.value,
91
+ color: tokens.colors.text.disabled
92
+ },
93
+ disabledSelected: {
94
+ backgroundColor: tokens.colors.surface.subtle.value,
95
+ borderColor: tokens.colors.border.default.value,
96
+ color: tokens.colors.text.disabled
97
+ }
47
98
  }
48
99
  },
49
- outlined: {
50
- unselected: {
51
- backgroundColor: "transparent",
52
- borderColor: tokens.colors.border.strong.value,
53
- color: primary
54
- },
55
- selected: {
56
- backgroundColor: "transparent",
57
- borderColor: primary,
58
- color: primary
100
+ primary: {
101
+ filled: {
102
+ unselected: {
103
+ backgroundColor: "transparent",
104
+ borderColor: tokens.colors.border.strong.value,
105
+ color: primaryContrast
106
+ },
107
+ selected: {
108
+ backgroundColor: primary,
109
+ borderColor: primary,
110
+ color: primaryContrast
111
+ },
112
+ disabledUnselected: {
113
+ backgroundColor: "transparent",
114
+ borderColor: tokens.colors.border.default.value,
115
+ color: tokens.colors.text.disabled
116
+ },
117
+ disabledSelected: {
118
+ backgroundColor: tokens.colors.surface.subtle.value,
119
+ borderColor: tokens.colors.border.default.value,
120
+ color: tokens.colors.text.disabled
121
+ }
59
122
  },
60
- disabledUnselected: {
61
- backgroundColor: "transparent",
62
- borderColor: tokens.colors.border.default.value,
63
- color: tokens.colors.text.disabled
123
+ outlined: {
124
+ unselected: {
125
+ backgroundColor: "transparent",
126
+ borderColor: tokens.colors.border.strong.value,
127
+ color: primary
128
+ },
129
+ selected: {
130
+ backgroundColor: "transparent",
131
+ borderColor: primary,
132
+ color: primary
133
+ },
134
+ disabledUnselected: {
135
+ backgroundColor: "transparent",
136
+ borderColor: tokens.colors.border.default.value,
137
+ color: tokens.colors.text.disabled
138
+ },
139
+ disabledSelected: {
140
+ backgroundColor: tokens.colors.surface.subtle.value,
141
+ borderColor: tokens.colors.border.default.value,
142
+ color: tokens.colors.text.disabled
143
+ }
64
144
  },
65
- disabledSelected: {
66
- backgroundColor: tokens.colors.surface.subtle.value,
67
- borderColor: tokens.colors.border.default.value,
68
- color: tokens.colors.text.disabled
145
+ soft: {
146
+ unselected: {
147
+ backgroundColor: "transparent",
148
+ borderColor: tokens.colors.border.strong.value,
149
+ color: secondaryContrast
150
+ },
151
+ selected: {
152
+ backgroundColor: secondary,
153
+ borderColor: secondary,
154
+ color: secondaryContrast
155
+ },
156
+ disabledUnselected: {
157
+ backgroundColor: "transparent",
158
+ borderColor: tokens.colors.border.default.value,
159
+ color: tokens.colors.text.disabled
160
+ },
161
+ disabledSelected: {
162
+ backgroundColor: tokens.colors.surface.subtle.value,
163
+ borderColor: tokens.colors.border.default.value,
164
+ color: tokens.colors.text.disabled
165
+ }
69
166
  }
70
167
  },
71
- soft: {
72
- unselected: {
73
- backgroundColor: "transparent",
74
- borderColor: tokens.colors.border.strong.value,
75
- color: secondaryContrast
76
- },
77
- selected: {
78
- backgroundColor: secondary,
79
- borderColor: secondary,
80
- color: secondaryContrast
168
+ secondary: {
169
+ filled: {
170
+ unselected: {
171
+ backgroundColor: "transparent",
172
+ borderColor: tokens.colors.border.strong.value,
173
+ color: secondaryContrast
174
+ },
175
+ selected: {
176
+ backgroundColor: secondary,
177
+ borderColor: secondary,
178
+ color: secondaryContrast
179
+ },
180
+ disabledUnselected: {
181
+ backgroundColor: "transparent",
182
+ borderColor: tokens.colors.border.default.value,
183
+ color: tokens.colors.text.disabled
184
+ },
185
+ disabledSelected: {
186
+ backgroundColor: tokens.colors.surface.subtle.value,
187
+ borderColor: tokens.colors.border.default.value,
188
+ color: tokens.colors.text.disabled
189
+ }
81
190
  },
82
- disabledUnselected: {
83
- backgroundColor: "transparent",
84
- borderColor: tokens.colors.border.default.value,
85
- color: tokens.colors.text.disabled
191
+ outlined: {
192
+ unselected: {
193
+ backgroundColor: "transparent",
194
+ borderColor: tokens.colors.border.strong.value,
195
+ color: secondaryContrast
196
+ },
197
+ selected: {
198
+ backgroundColor: "transparent",
199
+ borderColor: secondaryContrast,
200
+ color: secondaryContrast
201
+ },
202
+ disabledUnselected: {
203
+ backgroundColor: "transparent",
204
+ borderColor: tokens.colors.border.default.value,
205
+ color: tokens.colors.text.disabled
206
+ },
207
+ disabledSelected: {
208
+ backgroundColor: tokens.colors.surface.subtle.value,
209
+ borderColor: tokens.colors.border.default.value,
210
+ color: tokens.colors.text.disabled
211
+ }
86
212
  },
87
- disabledSelected: {
88
- backgroundColor: tokens.colors.surface.subtle.value,
89
- borderColor: tokens.colors.border.default.value,
90
- color: tokens.colors.text.disabled
213
+ soft: {
214
+ unselected: {
215
+ backgroundColor: "transparent",
216
+ borderColor: tokens.colors.border.strong.value,
217
+ color: secondaryContrast
218
+ },
219
+ selected: {
220
+ backgroundColor: subtle,
221
+ borderColor: subtle,
222
+ color: secondaryContrast
223
+ },
224
+ disabledUnselected: {
225
+ backgroundColor: "transparent",
226
+ borderColor: tokens.colors.border.default.value,
227
+ color: tokens.colors.text.disabled
228
+ },
229
+ disabledSelected: {
230
+ backgroundColor: tokens.colors.surface.subtle.value,
231
+ borderColor: tokens.colors.border.default.value,
232
+ color: tokens.colors.text.disabled
233
+ }
91
234
  }
92
235
  }
93
236
  }
package/dist/theme/create-radio-tokens.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/theme/create-radio-tokens.ts"],"sourcesContent":["import type { PrimitiveThemeTokens, RadioTokens } from \"../types\";\n\nexport function createRadioTokens(tokens: PrimitiveThemeTokens): RadioTokens {\n const primary = tokens.colors.primary.value;\n const primaryContrast = tokens.colors.primary.contrast;\n const secondary = tokens.colors.secondary.value;\n const secondaryContrast = tokens.colors.secondary.contrast;\n\n return {\n borderWidth: tokens.borderSize.md,\n borderRadius: tokens.radii.round,\n\n sizes: {\n small: {\n size: 20,\n indicatorSize: 8,\n hitSlop: 12,\n },\n medium: {\n size: 24,\n indicatorSize: 10,\n hitSlop: 10,\n },\n large: {\n size: 28,\n indicatorSize: 12,\n hitSlop: 8,\n },\n },\n\n variants: {\n filled: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: primaryContrast,\n },\n selected: {\n backgroundColor: primary,\n borderColor: primary,\n color: primaryContrast,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.surface.subtle.value,\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n },\n outlined: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: primary,\n },\n selected: {\n backgroundColor: \"transparent\",\n borderColor: primary,\n color: primary,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.surface.subtle.value,\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n },\n soft: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: secondaryContrast,\n },\n selected: {\n backgroundColor: secondary,\n borderColor: secondary,\n color: secondaryContrast,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.surface.subtle.value,\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n },\n },\n };\n}\n"],"mappings":"AAEO,SAAS,kBAAkB,QAA2C;AAC3E,QAAM,UAAU,OAAO,OAAO,QAAQ;AACtC,QAAM,kBAAkB,OAAO,OAAO,QAAQ;AAC9C,QAAM,YAAY,OAAO,OAAO,UAAU;AAC1C,QAAM,oBAAoB,OAAO,OAAO,UAAU;AAElD,SAAO;AAAA,IACL,aAAa,OAAO,WAAW;AAAA,IAC/B,cAAc,OAAO,MAAM;AAAA,IAE3B,OAAO;AAAA,MACL,OAAO;AAAA,QACL,MAAM;AAAA,QACN,eAAe;AAAA,QACf,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,eAAe;AAAA,QACf,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,eAAe;AAAA,QACf,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,YAAY;AAAA,UACV,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,UACzC,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,oBAAoB;AAAA,UAClB,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC1C,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,QACA,kBAAkB;AAAA,UAChB,iBAAiB,OAAO,OAAO,QAAQ,OAAO;AAAA,UAC9C,aAAa,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC1C,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,UAAU;AAAA,QACR,YAAY;AAAA,UACV,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,UACzC,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,oBAAoB;AAAA,UAClB,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC1C,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,QACA,kBAAkB;AAAA,UAChB,iBAAiB,OAAO,OAAO,QAAQ,OAAO;AAAA,UAC9C,aAAa,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC1C,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,MAAM;AAAA,QACJ,YAAY;AAAA,UACV,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,UACzC,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,oBAAoB;AAAA,UAClB,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC1C,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,QACA,kBAAkB;AAAA,UAChB,iBAAiB,OAAO,OAAO,QAAQ,OAAO;AAAA,UAC9C,aAAa,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC1C,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
1
+ {"version":3,"sources":["../../src/theme/create-radio-tokens.ts"],"sourcesContent":["import type { PrimitiveThemeTokens, RadioTokens } from \"../types\";\n\nexport function createRadioTokens(tokens: PrimitiveThemeTokens): RadioTokens {\n const primary = tokens.colors.primary.value;\n const primaryContrast = tokens.colors.primary.contrast;\n const secondary = tokens.colors.secondary.value;\n const secondaryContrast = tokens.colors.secondary.contrast;\n\n const neutral = tokens.colors.text.secondary;\n const neutralContrast = tokens.colors.text.inverse;\n const neutralSoft = tokens.colors.surface.subtle.value;\n const neutralSoftContrast = tokens.colors.text.primary;\n const subtle = tokens.colors.subtle.value;\n\n return {\n borderWidth: tokens.borderSize.md,\n borderRadius: tokens.radii.round,\n\n sizes: {\n small: {\n size: 20,\n indicatorSize: 8,\n hitSlop: 12,\n },\n medium: {\n size: 24,\n indicatorSize: 10,\n hitSlop: 10,\n },\n large: {\n size: 28,\n indicatorSize: 12,\n hitSlop: 8,\n },\n },\n\n colors: {\n neutral: {\n filled: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: neutralContrast,\n },\n selected: {\n backgroundColor: neutral,\n borderColor: neutral,\n color: neutralContrast,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.surface.subtle.value,\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n },\n outlined: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: neutral,\n },\n selected: {\n backgroundColor: \"transparent\",\n borderColor: neutral,\n color: neutral,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.surface.subtle.value,\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n },\n soft: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: neutralSoftContrast,\n },\n selected: {\n backgroundColor: neutralSoft,\n borderColor: neutralSoft,\n color: neutralSoftContrast,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.surface.subtle.value,\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n },\n },\n primary: {\n filled: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: primaryContrast,\n },\n selected: {\n backgroundColor: primary,\n borderColor: primary,\n color: primaryContrast,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.surface.subtle.value,\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n },\n outlined: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: primary,\n },\n selected: {\n backgroundColor: \"transparent\",\n borderColor: primary,\n color: primary,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.surface.subtle.value,\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n },\n soft: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: secondaryContrast,\n },\n selected: {\n backgroundColor: secondary,\n borderColor: secondary,\n color: secondaryContrast,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.surface.subtle.value,\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n },\n },\n secondary: {\n filled: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: secondaryContrast,\n },\n selected: {\n backgroundColor: secondary,\n borderColor: secondary,\n color: secondaryContrast,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.surface.subtle.value,\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n },\n outlined: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: secondaryContrast,\n },\n selected: {\n backgroundColor: \"transparent\",\n borderColor: secondaryContrast,\n color: secondaryContrast,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.surface.subtle.value,\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n },\n soft: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: secondaryContrast,\n },\n selected: {\n backgroundColor: subtle,\n borderColor: subtle,\n color: secondaryContrast,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.surface.subtle.value,\n borderColor: tokens.colors.border.default.value,\n color: tokens.colors.text.disabled,\n },\n },\n },\n },\n };\n}\n"],"mappings":"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","names":[]}
package/dist/theme/create-segmented-control-tokens.js CHANGED
@@ -4,6 +4,11 @@ function createSegmentedControlTokens(tokens) {
4
4
  const secondary = tokens.colors.secondary.value;
5
5
  const secondaryContrast = tokens.colors.secondary.contrast;
6
6
  const transparent = "transparent";
7
+ const neutral = tokens.colors.text.secondary;
8
+ const neutralContrast = tokens.colors.text.inverse;
9
+ const neutralSoft = tokens.colors.surface.elevated.value;
10
+ const neutralSoftContrast = tokens.colors.text.primary;
11
+ const subtle = tokens.colors.subtle.value;
7
12
  return {
8
13
  borderRadius: tokens.radii.md,
9
14
  borderWidth: tokens.borderSize.sm,
@@ -75,76 +80,226 @@ function createSegmentedControlTokens(tokens) {
75
80
  paddingHorizontal: tokens.space.sm
76
81
  }
77
82
  },
78
- variants: {
79
- filled: {
80
- states: {
81
- unselected: {
82
- backgroundColor: transparent,
83
- borderColor: transparent,
84
- color: tokens.colors.text.secondary
85
- },
86
- selected: {
87
- backgroundColor: primary,
88
- borderColor: primary,
89
- color: primaryContrast
90
- },
91
- disabledUnselected: {
92
- backgroundColor: transparent,
93
- borderColor: transparent,
94
- color: tokens.colors.text.disabled
95
- },
96
- disabledSelected: {
97
- backgroundColor: tokens.colors.surface.subtle.value,
98
- borderColor: tokens.colors.border.subtle.value,
99
- color: tokens.colors.text.disabled
83
+ colors: {
84
+ neutral: {
85
+ filled: {
86
+ states: {
87
+ unselected: {
88
+ backgroundColor: transparent,
89
+ borderColor: transparent,
90
+ color: tokens.colors.text.secondary
91
+ },
92
+ selected: {
93
+ backgroundColor: neutral,
94
+ borderColor: neutral,
95
+ color: neutralContrast
96
+ },
97
+ disabledUnselected: {
98
+ backgroundColor: transparent,
99
+ borderColor: transparent,
100
+ color: tokens.colors.text.disabled
101
+ },
102
+ disabledSelected: {
103
+ backgroundColor: tokens.colors.surface.subtle.value,
104
+ borderColor: tokens.colors.border.subtle.value,
105
+ color: tokens.colors.text.disabled
106
+ }
107
+ }
108
+ },
109
+ outlined: {
110
+ states: {
111
+ unselected: {
112
+ backgroundColor: transparent,
113
+ borderColor: transparent,
114
+ color: tokens.colors.text.secondary
115
+ },
116
+ selected: {
117
+ backgroundColor: tokens.colors.surface.elevated.value,
118
+ borderColor: neutral,
119
+ color: neutral
120
+ },
121
+ disabledUnselected: {
122
+ backgroundColor: transparent,
123
+ borderColor: transparent,
124
+ color: tokens.colors.text.disabled
125
+ },
126
+ disabledSelected: {
127
+ backgroundColor: transparent,
128
+ borderColor: tokens.colors.border.default.value,
129
+ color: tokens.colors.text.disabled
130
+ }
131
+ }
132
+ },
133
+ soft: {
134
+ states: {
135
+ unselected: {
136
+ backgroundColor: transparent,
137
+ borderColor: transparent,
138
+ color: tokens.colors.text.secondary
139
+ },
140
+ selected: {
141
+ backgroundColor: neutralSoft,
142
+ borderColor: neutralSoft,
143
+ color: neutralSoftContrast
144
+ },
145
+ disabledUnselected: {
146
+ backgroundColor: transparent,
147
+ borderColor: transparent,
148
+ color: tokens.colors.text.disabled
149
+ },
150
+ disabledSelected: {
151
+ backgroundColor: tokens.colors.surface.subtle.value,
152
+ borderColor: tokens.colors.border.subtle.value,
153
+ color: tokens.colors.text.disabled
154
+ }
100
155
  }
101
156
  }
102
157
  },
103
- outlined: {
104
- states: {
105
- unselected: {
106
- backgroundColor: transparent,
107
- borderColor: transparent,
108
- color: tokens.colors.text.secondary
109
- },
110
- selected: {
111
- backgroundColor: tokens.colors.surface.elevated.value,
112
- borderColor: primary,
113
- color: primary
114
- },
115
- disabledUnselected: {
116
- backgroundColor: transparent,
117
- borderColor: transparent,
118
- color: tokens.colors.text.disabled
119
- },
120
- disabledSelected: {
121
- backgroundColor: transparent,
122
- borderColor: tokens.colors.border.default.value,
123
- color: tokens.colors.text.disabled
158
+ primary: {
159
+ filled: {
160
+ states: {
161
+ unselected: {
162
+ backgroundColor: transparent,
163
+ borderColor: transparent,
164
+ color: tokens.colors.text.secondary
165
+ },
166
+ selected: {
167
+ backgroundColor: primary,
168
+ borderColor: primary,
169
+ color: primaryContrast
170
+ },
171
+ disabledUnselected: {
172
+ backgroundColor: transparent,
173
+ borderColor: transparent,
174
+ color: tokens.colors.text.disabled
175
+ },
176
+ disabledSelected: {
177
+ backgroundColor: tokens.colors.surface.subtle.value,
178
+ borderColor: tokens.colors.border.subtle.value,
179
+ color: tokens.colors.text.disabled
180
+ }
181
+ }
182
+ },
183
+ outlined: {
184
+ states: {
185
+ unselected: {
186
+ backgroundColor: transparent,
187
+ borderColor: transparent,
188
+ color: tokens.colors.text.secondary
189
+ },
190
+ selected: {
191
+ backgroundColor: tokens.colors.surface.elevated.value,
192
+ borderColor: primary,
193
+ color: primary
194
+ },
195
+ disabledUnselected: {
196
+ backgroundColor: transparent,
197
+ borderColor: transparent,
198
+ color: tokens.colors.text.disabled
199
+ },
200
+ disabledSelected: {
201
+ backgroundColor: transparent,
202
+ borderColor: tokens.colors.border.default.value,
203
+ color: tokens.colors.text.disabled
204
+ }
205
+ }
206
+ },
207
+ soft: {
208
+ states: {
209
+ unselected: {
210
+ backgroundColor: transparent,
211
+ borderColor: transparent,
212
+ color: tokens.colors.text.secondary
213
+ },
214
+ selected: {
215
+ backgroundColor: secondary,
216
+ borderColor: secondary,
217
+ color: secondaryContrast
218
+ },
219
+ disabledUnselected: {
220
+ backgroundColor: transparent,
221
+ borderColor: transparent,
222
+ color: tokens.colors.text.disabled
223
+ },
224
+ disabledSelected: {
225
+ backgroundColor: tokens.colors.surface.subtle.value,
226
+ borderColor: tokens.colors.border.subtle.value,
227
+ color: tokens.colors.text.disabled
228
+ }
124
229
  }
125
230
  }
126
231
  },
127
- soft: {
128
- states: {
129
- unselected: {
130
- backgroundColor: transparent,
131
- borderColor: transparent,
132
- color: tokens.colors.text.secondary
133
- },
134
- selected: {
135
- backgroundColor: secondary,
136
- borderColor: secondary,
137
- color: secondaryContrast
138
- },
139
- disabledUnselected: {
140
- backgroundColor: transparent,
141
- borderColor: transparent,
142
- color: tokens.colors.text.disabled
143
- },
144
- disabledSelected: {
145
- backgroundColor: tokens.colors.surface.subtle.value,
146
- borderColor: tokens.colors.border.subtle.value,
147
- color: tokens.colors.text.disabled
232
+ secondary: {
233
+ filled: {
234
+ states: {
235
+ unselected: {
236
+ backgroundColor: transparent,
237
+ borderColor: transparent,
238
+ color: tokens.colors.text.secondary
239
+ },
240
+ selected: {
241
+ backgroundColor: secondary,
242
+ borderColor: secondary,
243
+ color: secondaryContrast
244
+ },
245
+ disabledUnselected: {
246
+ backgroundColor: transparent,
247
+ borderColor: transparent,
248
+ color: tokens.colors.text.disabled
249
+ },
250
+ disabledSelected: {
251
+ backgroundColor: tokens.colors.surface.subtle.value,
252
+ borderColor: tokens.colors.border.subtle.value,
253
+ color: tokens.colors.text.disabled
254
+ }
255
+ }
256
+ },
257
+ outlined: {
258
+ states: {
259
+ unselected: {
260
+ backgroundColor: transparent,
261
+ borderColor: transparent,
262
+ color: tokens.colors.text.secondary
263
+ },
264
+ selected: {
265
+ backgroundColor: tokens.colors.surface.elevated.value,
266
+ borderColor: secondaryContrast,
267
+ color: secondaryContrast
268
+ },
269
+ disabledUnselected: {
270
+ backgroundColor: transparent,
271
+ borderColor: transparent,
272
+ color: tokens.colors.text.disabled
273
+ },
274
+ disabledSelected: {
275
+ backgroundColor: transparent,
276
+ borderColor: tokens.colors.border.default.value,
277
+ color: tokens.colors.text.disabled
278
+ }
279
+ }
280
+ },
281
+ soft: {
282
+ states: {
283
+ unselected: {
284
+ backgroundColor: transparent,
285
+ borderColor: transparent,
286
+ color: tokens.colors.text.secondary
287
+ },
288
+ selected: {
289
+ backgroundColor: subtle,
290
+ borderColor: subtle,
291
+ color: secondaryContrast
292
+ },
293
+ disabledUnselected: {
294
+ backgroundColor: transparent,
295
+ borderColor: transparent,
296
+ color: tokens.colors.text.disabled
297
+ },
298
+ disabledSelected: {
299
+ backgroundColor: tokens.colors.surface.subtle.value,
300
+ borderColor: tokens.colors.border.subtle.value,
301
+ color: tokens.colors.text.disabled
302
+ }
148
303
  }
149
304
  }
150
305
  }