@tamagui/themes 1.125.6 → 1.125.7

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 (48) hide show
  1. package/.turbo/turbo-build.log +2 -1
  2. package/dist/esm/componentThemeDefinitions.native.js +87 -94
  3. package/dist/esm/componentThemeDefinitions.native.js.map +1 -6
  4. package/dist/esm/generated-new.native.js +1997 -42536
  5. package/dist/esm/generated-new.native.js.map +1 -6
  6. package/dist/esm/generated-v2.native.js +1921 -41696
  7. package/dist/esm/generated-v2.native.js.map +1 -6
  8. package/dist/esm/generated-v3.native.js +1075 -9612
  9. package/dist/esm/generated-v3.native.js.map +1 -6
  10. package/dist/esm/generated-v4-tamagui.native.js +743 -12912
  11. package/dist/esm/generated-v4-tamagui.native.js.map +1 -6
  12. package/dist/esm/helpers.native.js +3 -7
  13. package/dist/esm/helpers.native.js.map +1 -6
  14. package/dist/esm/index.native.js +7 -7
  15. package/dist/esm/index.native.js.map +1 -6
  16. package/dist/esm/palettes.native.js +31 -66
  17. package/dist/esm/palettes.native.js.map +1 -6
  18. package/dist/esm/shadows.native.js +20 -18
  19. package/dist/esm/shadows.native.js.map +1 -6
  20. package/dist/esm/templates.native.js +89 -85
  21. package/dist/esm/templates.native.js.map +1 -6
  22. package/dist/esm/themes-new.native.js +51 -54
  23. package/dist/esm/themes-new.native.js.map +1 -6
  24. package/dist/esm/themes-old.native.js +228 -228
  25. package/dist/esm/themes-old.native.js.map +1 -6
  26. package/dist/esm/themes.native.js +3 -5
  27. package/dist/esm/themes.native.js.map +1 -6
  28. package/dist/esm/tokens.native.js +121 -132
  29. package/dist/esm/tokens.native.js.map +1 -6
  30. package/dist/esm/utils.native.js +4 -12
  31. package/dist/esm/utils.native.js.map +1 -6
  32. package/dist/esm/v2-themes.native.js +406 -462
  33. package/dist/esm/v2-themes.native.js.map +1 -6
  34. package/dist/esm/v2.native.js +4 -23
  35. package/dist/esm/v2.native.js.map +1 -6
  36. package/dist/esm/v3-themes.native.js +421 -467
  37. package/dist/esm/v3-themes.native.js.map +1 -6
  38. package/dist/esm/v3-tokens.native.js +75 -83
  39. package/dist/esm/v3-tokens.native.js.map +1 -6
  40. package/dist/esm/v3.native.js +4 -23
  41. package/dist/esm/v3.native.js.map +1 -6
  42. package/dist/esm/v4-tamagui.native.js +177 -224
  43. package/dist/esm/v4-tamagui.native.js.map +1 -6
  44. package/dist/esm/v4-tokens.native.js +75 -83
  45. package/dist/esm/v4-tokens.native.js.map +1 -6
  46. package/dist/esm/v4.native.js +4 -8
  47. package/dist/esm/v4.native.js.map +1 -6
  48. package/package.json +7 -7
@@ -3,490 +3,441 @@ import { blue, blueDark, gray, grayDark, green, greenDark, orange, orangeDark, p
3
3
  import { createTokens } from "@tamagui/web";
4
4
  import { masks as masks2 } from "@tamagui/theme-builder";
5
5
  var colorTokens = {
6
- light: {
7
- blue,
8
- gray,
9
- green,
10
- orange,
11
- pink,
12
- purple,
13
- red,
14
- yellow
6
+ light: {
7
+ blue,
8
+ gray,
9
+ green,
10
+ orange,
11
+ pink,
12
+ purple,
13
+ red,
14
+ yellow
15
+ },
16
+ dark: {
17
+ blue: blueDark,
18
+ gray: grayDark,
19
+ green: greenDark,
20
+ orange: orangeDark,
21
+ pink: pinkDark,
22
+ purple: purpleDark,
23
+ red: redDark,
24
+ yellow: yellowDark
25
+ }
26
+ },
27
+ palettes = function () {
28
+ var lightTransparent = "rgba(255,255,255,0)",
29
+ darkTransparent = "rgba(10,10,10,0)",
30
+ transparent = function (hsl) {
31
+ var opacity = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
32
+ return hsl.replace("%)", `%, ${opacity})`).replace("hsl(", "hsla(");
33
+ },
34
+ getColorPalette = function (colors) {
35
+ var color2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : colors[0],
36
+ colorPalette = Object.values(colors),
37
+ [head, tail] = [colorPalette.slice(0, 6), colorPalette.slice(colorPalette.length - 5)];
38
+ return [transparent(colorPalette[0]), ...head, ...tail, color2, transparent(colorPalette[colorPalette.length - 1])];
39
+ },
40
+ lightColor = "hsl(0, 0%, 9.0%)",
41
+ lightPalette = [lightTransparent, "#fff", "#f8f8f8", "hsl(0, 0%, 96.3%)", "hsl(0, 0%, 94.1%)", "hsl(0, 0%, 92.0%)", "hsl(0, 0%, 90.0%)", "hsl(0, 0%, 88.5%)", "hsl(0, 0%, 81.0%)", "hsl(0, 0%, 56.1%)", "hsl(0, 0%, 50.3%)", "hsl(0, 0%, 42.5%)", lightColor, darkTransparent],
42
+ darkColor = "#fff",
43
+ darkPalette = [darkTransparent, "#050505", "#151515", "#191919", "#232323", "#282828", "#323232", "#424242", "#494949", "#545454", "#626262", "#a5a5a5", darkColor, lightTransparent],
44
+ lightPalettes = objectFromEntries(objectKeys(colorTokens.light).map(function (key) {
45
+ return [`light_${key}`, getColorPalette(colorTokens.light[key], lightColor)];
46
+ })),
47
+ darkPalettes = objectFromEntries(objectKeys(colorTokens.dark).map(function (key) {
48
+ return [`dark_${key}`, getColorPalette(colorTokens.dark[key], darkColor)];
49
+ })),
50
+ colorPalettes = {
51
+ ...lightPalettes,
52
+ ...darkPalettes
53
+ };
54
+ return {
55
+ light: lightPalette,
56
+ dark: darkPalette,
57
+ ...colorPalettes
58
+ };
59
+ }(),
60
+ templateColorsSpecific = {
61
+ color1: 1,
62
+ color2: 2,
63
+ color3: 3,
64
+ color4: 4,
65
+ color5: 5,
66
+ color6: 6,
67
+ color7: 7,
68
+ color8: 8,
69
+ color9: 9,
70
+ color10: 10,
71
+ color11: 11,
72
+ color12: 12
15
73
  },
16
- dark: {
17
- blue: blueDark,
18
- gray: grayDark,
19
- green: greenDark,
20
- orange: orangeDark,
21
- pink: pinkDark,
22
- purple: purpleDark,
23
- red: redDark,
24
- yellow: yellowDark
25
- }
26
- }, palettes = function() {
27
- var lightTransparent = "rgba(255,255,255,0)", darkTransparent = "rgba(10,10,10,0)", transparent = function(hsl) {
28
- var opacity = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
29
- return hsl.replace("%)", `%, ${opacity})`).replace("hsl(", "hsla(");
30
- }, getColorPalette = function(colors) {
31
- var color2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : colors[0], colorPalette = Object.values(colors), [head, tail] = [
32
- colorPalette.slice(0, 6),
33
- colorPalette.slice(colorPalette.length - 5)
34
- ];
35
- return [
36
- transparent(colorPalette[0]),
37
- ...head,
38
- ...tail,
39
- color2,
40
- transparent(colorPalette[colorPalette.length - 1])
41
- ];
42
- }, lightColor = "hsl(0, 0%, 9.0%)", lightPalette = [
43
- lightTransparent,
44
- "#fff",
45
- "#f8f8f8",
46
- "hsl(0, 0%, 96.3%)",
47
- "hsl(0, 0%, 94.1%)",
48
- "hsl(0, 0%, 92.0%)",
49
- "hsl(0, 0%, 90.0%)",
50
- "hsl(0, 0%, 88.5%)",
51
- "hsl(0, 0%, 81.0%)",
52
- "hsl(0, 0%, 56.1%)",
53
- "hsl(0, 0%, 50.3%)",
54
- "hsl(0, 0%, 42.5%)",
55
- lightColor,
56
- darkTransparent
57
- ], darkColor = "#fff", darkPalette = [
58
- darkTransparent,
59
- "#050505",
60
- "#151515",
61
- "#191919",
62
- "#232323",
63
- "#282828",
64
- "#323232",
65
- "#424242",
66
- "#494949",
67
- "#545454",
68
- "#626262",
69
- "#a5a5a5",
70
- darkColor,
71
- lightTransparent
72
- ], lightPalettes = objectFromEntries(objectKeys(colorTokens.light).map(function(key) {
73
- return [
74
- `light_${key}`,
75
- getColorPalette(colorTokens.light[key], lightColor)
76
- ];
77
- })), darkPalettes = objectFromEntries(objectKeys(colorTokens.dark).map(function(key) {
78
- return [
79
- `dark_${key}`,
80
- getColorPalette(colorTokens.dark[key], darkColor)
81
- ];
82
- })), colorPalettes = {
83
- ...lightPalettes,
84
- ...darkPalettes
85
- };
86
- return {
87
- light: lightPalette,
88
- dark: darkPalette,
89
- ...colorPalettes
90
- };
91
- }(), templateColorsSpecific = {
92
- color1: 1,
93
- color2: 2,
94
- color3: 3,
95
- color4: 4,
96
- color5: 5,
97
- color6: 6,
98
- color7: 7,
99
- color8: 8,
100
- color9: 9,
101
- color10: 10,
102
- color11: 11,
103
- color12: 12
104
- }, templates = function() {
105
- var template = {
106
- ...templateColorsSpecific,
107
- // the background, color, etc keys here work like generics - they make it so you
108
- // can publish components for others to use without mandating a specific color scale
109
- // the @tamagui/button Button component looks for `$background`, so you set the
110
- // dark_red_Button theme to have a stronger background than the dark_red theme.
111
- background: 2,
112
- backgroundHover: 3,
113
- backgroundPress: 4,
114
- backgroundFocus: 5,
115
- backgroundStrong: 1,
116
- backgroundTransparent: 0,
117
- color: -1,
118
- colorHover: -2,
119
- colorPress: -1,
120
- colorFocus: -2,
121
- colorTransparent: -0,
122
- borderColor: 5,
123
- borderColorHover: 6,
124
- borderColorFocus: 4,
125
- borderColorPress: 5,
126
- placeholderColor: -4,
127
- // in the future this should be partially transparent
128
- outlineColor: 5
129
- };
130
- return {
131
- base: template,
132
- colorLight: {
133
- ...template,
134
- // light color themes are a bit less sensitive
135
- borderColor: 4,
136
- borderColorHover: 5,
74
+ templates = function () {
75
+ var template = {
76
+ ...templateColorsSpecific,
77
+ // the background, color, etc keys here work like generics - they make it so you
78
+ // can publish components for others to use without mandating a specific color scale
79
+ // the @tamagui/button Button component looks for `$background`, so you set the
80
+ // dark_red_Button theme to have a stronger background than the dark_red theme.
81
+ background: 2,
82
+ backgroundHover: 3,
83
+ backgroundPress: 4,
84
+ backgroundFocus: 5,
85
+ backgroundStrong: 1,
86
+ backgroundTransparent: 0,
87
+ color: -1,
88
+ colorHover: -2,
89
+ colorPress: -1,
90
+ colorFocus: -2,
91
+ colorTransparent: -0,
92
+ borderColor: 5,
93
+ borderColorHover: 6,
137
94
  borderColorFocus: 4,
138
- borderColorPress: 4
139
- }
140
- };
141
- }(), maskOptions = function() {
142
- var shadows2 = {
143
- shadowColor: 0,
144
- shadowColorHover: 0,
145
- shadowColorPress: 0,
146
- shadowColorFocus: 0
147
- }, colors = {
148
- ...shadows2,
149
- color: 0,
150
- colorHover: 0,
151
- colorFocus: 0,
152
- colorPress: 0
153
- }, baseMaskOptions = {
154
- override: shadows2,
155
- skip: shadows2,
156
- // avoids the transparent ends
157
- max: palettes.light.length - 2,
158
- min: 1
159
- }, skipShadowsAndSpecificColors = {
160
- ...shadows2,
161
- ...templateColorsSpecific
162
- };
163
- return {
164
- component: {
165
- ...baseMaskOptions,
166
- override: colors,
167
- skip: skipShadowsAndSpecificColors
168
- },
169
- alt: {
170
- ...baseMaskOptions
171
- },
172
- button: {
173
- ...baseMaskOptions,
174
- override: {
175
- ...colors,
176
- borderColor: "transparent",
177
- borderColorHover: "transparent"
95
+ borderColorPress: 5,
96
+ placeholderColor: -4,
97
+ // in the future this should be partially transparent
98
+ outlineColor: 5
99
+ };
100
+ return {
101
+ base: template,
102
+ colorLight: {
103
+ ...template,
104
+ // light color themes are a bit less sensitive
105
+ borderColor: 4,
106
+ borderColorHover: 5,
107
+ borderColorFocus: 4,
108
+ borderColorPress: 4
109
+ }
110
+ };
111
+ }(),
112
+ maskOptions = function () {
113
+ var shadows2 = {
114
+ shadowColor: 0,
115
+ shadowColorHover: 0,
116
+ shadowColorPress: 0,
117
+ shadowColorFocus: 0
118
+ },
119
+ colors = {
120
+ ...shadows2,
121
+ color: 0,
122
+ colorHover: 0,
123
+ colorFocus: 0,
124
+ colorPress: 0
125
+ },
126
+ baseMaskOptions = {
127
+ override: shadows2,
128
+ skip: shadows2,
129
+ // avoids the transparent ends
130
+ max: palettes.light.length - 2,
131
+ min: 1
132
+ },
133
+ skipShadowsAndSpecificColors = {
134
+ ...shadows2,
135
+ ...templateColorsSpecific
136
+ };
137
+ return {
138
+ component: {
139
+ ...baseMaskOptions,
140
+ override: colors,
141
+ skip: skipShadowsAndSpecificColors
178
142
  },
179
- skip: skipShadowsAndSpecificColors
143
+ alt: {
144
+ ...baseMaskOptions
145
+ },
146
+ button: {
147
+ ...baseMaskOptions,
148
+ override: {
149
+ ...colors,
150
+ borderColor: "transparent",
151
+ borderColorHover: "transparent"
152
+ },
153
+ skip: skipShadowsAndSpecificColors
154
+ }
155
+ };
156
+ }(),
157
+ lightShadowColor = "rgba(0,0,0,0.04)",
158
+ lightShadowColorStrong = "rgba(0,0,0,0.085)",
159
+ darkShadowColor = "rgba(0,0,0,0.2)",
160
+ darkShadowColorStrong = "rgba(0,0,0,0.3)",
161
+ size = {
162
+ $0: 0,
163
+ "$0.25": 2,
164
+ "$0.5": 4,
165
+ "$0.75": 8,
166
+ $1: 20,
167
+ "$1.5": 24,
168
+ $2: 28,
169
+ "$2.5": 32,
170
+ $3: 36,
171
+ "$3.5": 40,
172
+ $4: 44,
173
+ $true: 44,
174
+ "$4.5": 48,
175
+ $5: 52,
176
+ $6: 64,
177
+ $7: 74,
178
+ $8: 84,
179
+ $9: 94,
180
+ $10: 104,
181
+ $11: 124,
182
+ $12: 144,
183
+ $13: 164,
184
+ $14: 184,
185
+ $15: 204,
186
+ $16: 224,
187
+ $17: 224,
188
+ $18: 244,
189
+ $19: 264,
190
+ $20: 284
191
+ },
192
+ spaces = Object.entries(size).map(function (param) {
193
+ var [k, v] = param;
194
+ return [k, sizeToSpace(v)];
195
+ }),
196
+ spacesNegative = spaces.slice(1).map(function (param) {
197
+ var [k, v] = param;
198
+ return [`-${k.slice(1)}`, -v];
199
+ }),
200
+ space = {
201
+ ...Object.fromEntries(spaces),
202
+ ...Object.fromEntries(spacesNegative)
203
+ },
204
+ zIndex = {
205
+ 0: 0,
206
+ 1: 100,
207
+ 2: 200,
208
+ 3: 300,
209
+ 4: 400,
210
+ 5: 500
211
+ },
212
+ darkColors = {
213
+ ...colorTokens.dark.blue,
214
+ ...colorTokens.dark.gray,
215
+ ...colorTokens.dark.green,
216
+ ...colorTokens.dark.orange,
217
+ ...colorTokens.dark.pink,
218
+ ...colorTokens.dark.purple,
219
+ ...colorTokens.dark.red,
220
+ ...colorTokens.dark.yellow
221
+ },
222
+ lightColors = {
223
+ ...colorTokens.light.blue,
224
+ ...colorTokens.light.gray,
225
+ ...colorTokens.light.green,
226
+ ...colorTokens.light.orange,
227
+ ...colorTokens.light.pink,
228
+ ...colorTokens.light.purple,
229
+ ...colorTokens.light.red,
230
+ ...colorTokens.light.yellow
231
+ },
232
+ color = {
233
+ ...postfixObjKeys(lightColors, "Light"),
234
+ ...postfixObjKeys(darkColors, "Dark")
235
+ },
236
+ radius = {
237
+ 0: 0,
238
+ 1: 3,
239
+ 2: 5,
240
+ 3: 7,
241
+ 4: 9,
242
+ true: 9,
243
+ 5: 10,
244
+ 6: 16,
245
+ 7: 19,
246
+ 8: 22,
247
+ 9: 26,
248
+ 10: 34,
249
+ 11: 42,
250
+ 12: 50
251
+ },
252
+ tokens = createTokens({
253
+ color,
254
+ radius,
255
+ zIndex,
256
+ space,
257
+ size
258
+ }),
259
+ shadows = {
260
+ light: {
261
+ shadowColor: lightShadowColorStrong,
262
+ shadowColorHover: lightShadowColorStrong,
263
+ shadowColorPress: lightShadowColor,
264
+ shadowColorFocus: lightShadowColor
265
+ },
266
+ dark: {
267
+ shadowColor: darkShadowColorStrong,
268
+ shadowColorHover: darkShadowColorStrong,
269
+ shadowColorPress: darkShadowColor,
270
+ shadowColorFocus: darkShadowColor
180
271
  }
181
- };
182
- }(), lightShadowColor = "rgba(0,0,0,0.04)", lightShadowColorStrong = "rgba(0,0,0,0.085)", darkShadowColor = "rgba(0,0,0,0.2)", darkShadowColorStrong = "rgba(0,0,0,0.3)", size = {
183
- $0: 0,
184
- "$0.25": 2,
185
- "$0.5": 4,
186
- "$0.75": 8,
187
- $1: 20,
188
- "$1.5": 24,
189
- $2: 28,
190
- "$2.5": 32,
191
- $3: 36,
192
- "$3.5": 40,
193
- $4: 44,
194
- $true: 44,
195
- "$4.5": 48,
196
- $5: 52,
197
- $6: 64,
198
- $7: 74,
199
- $8: 84,
200
- $9: 94,
201
- $10: 104,
202
- $11: 124,
203
- $12: 144,
204
- $13: 164,
205
- $14: 184,
206
- $15: 204,
207
- $16: 224,
208
- $17: 224,
209
- $18: 244,
210
- $19: 264,
211
- $20: 284
212
- }, spaces = Object.entries(size).map(function(param) {
213
- var [k, v] = param;
214
- return [
215
- k,
216
- sizeToSpace(v)
217
- ];
218
- }), spacesNegative = spaces.slice(1).map(function(param) {
219
- var [k, v] = param;
220
- return [
221
- `-${k.slice(1)}`,
222
- -v
223
- ];
224
- }), space = {
225
- ...Object.fromEntries(spaces),
226
- ...Object.fromEntries(spacesNegative)
227
- }, zIndex = {
228
- 0: 0,
229
- 1: 100,
230
- 2: 200,
231
- 3: 300,
232
- 4: 400,
233
- 5: 500
234
- }, darkColors = {
235
- ...colorTokens.dark.blue,
236
- ...colorTokens.dark.gray,
237
- ...colorTokens.dark.green,
238
- ...colorTokens.dark.orange,
239
- ...colorTokens.dark.pink,
240
- ...colorTokens.dark.purple,
241
- ...colorTokens.dark.red,
242
- ...colorTokens.dark.yellow
243
- }, lightColors = {
244
- ...colorTokens.light.blue,
245
- ...colorTokens.light.gray,
246
- ...colorTokens.light.green,
247
- ...colorTokens.light.orange,
248
- ...colorTokens.light.pink,
249
- ...colorTokens.light.purple,
250
- ...colorTokens.light.red,
251
- ...colorTokens.light.yellow
252
- }, color = {
253
- ...postfixObjKeys(lightColors, "Light"),
254
- ...postfixObjKeys(darkColors, "Dark")
255
- }, radius = {
256
- 0: 0,
257
- 1: 3,
258
- 2: 5,
259
- 3: 7,
260
- 4: 9,
261
- true: 9,
262
- 5: 10,
263
- 6: 16,
264
- 7: 19,
265
- 8: 22,
266
- 9: 26,
267
- 10: 34,
268
- 11: 42,
269
- 12: 50
270
- }, tokens = createTokens({
271
- color,
272
- radius,
273
- zIndex,
274
- space,
275
- size
276
- }), shadows = {
277
- light: {
278
- shadowColor: lightShadowColorStrong,
279
- shadowColorHover: lightShadowColorStrong,
280
- shadowColorPress: lightShadowColor,
281
- shadowColorFocus: lightShadowColor
282
272
  },
283
- dark: {
284
- shadowColor: darkShadowColorStrong,
285
- shadowColorHover: darkShadowColorStrong,
286
- shadowColorPress: darkShadowColor,
287
- shadowColorFocus: darkShadowColor
288
- }
289
- }, colorThemeDefinition = function(colorName) {
290
- return [
291
- {
273
+ colorThemeDefinition = function (colorName) {
274
+ return [{
292
275
  parent: "light",
293
276
  palette: colorName,
294
277
  template: "colorLight"
295
- },
296
- {
278
+ }, {
297
279
  parent: "dark",
298
280
  palette: colorName,
299
281
  template: "base"
282
+ }];
283
+ },
284
+ nonInherited = {
285
+ light: {
286
+ ...lightColors,
287
+ ...shadows.light
288
+ },
289
+ dark: {
290
+ ...darkColors,
291
+ ...shadows.dark
300
292
  }
301
- ];
302
- }, nonInherited = {
303
- light: {
304
- ...lightColors,
305
- ...shadows.light
306
293
  },
307
- dark: {
308
- ...darkColors,
309
- ...shadows.dark
310
- }
311
- }, overlayThemeDefinitions = [
312
- {
294
+ overlayThemeDefinitions = [{
313
295
  parent: "light",
314
296
  theme: {
315
297
  background: "rgba(0,0,0,0.5)"
316
298
  }
317
- },
318
- {
299
+ }, {
319
300
  parent: "dark",
320
301
  theme: {
321
302
  background: "rgba(0,0,0,0.9)"
322
303
  }
323
- }
324
- ], themeBuilder = createThemeBuilder().addPalettes(palettes).addTemplates(templates).addMasks(masks).addThemes({
325
- light: {
326
- template: "base",
327
- palette: "light",
328
- nonInheritedValues: nonInherited.light
329
- },
330
- dark: {
331
- template: "base",
332
- palette: "dark",
333
- nonInheritedValues: nonInherited.dark
334
- }
335
- }).addChildThemes({
336
- orange: colorThemeDefinition("orange"),
337
- yellow: colorThemeDefinition("yellow"),
338
- green: colorThemeDefinition("green"),
339
- blue: colorThemeDefinition("blue"),
340
- purple: colorThemeDefinition("purple"),
341
- pink: colorThemeDefinition("pink"),
342
- red: colorThemeDefinition("red"),
343
- gray: colorThemeDefinition("gray")
344
- }).addChildThemes({
345
- alt1: {
346
- mask: "soften",
347
- ...maskOptions.alt
348
- },
349
- alt2: {
350
- mask: "soften2Border1",
351
- ...maskOptions.alt
352
- },
353
- active: {
354
- mask: "soften3FlatBorder",
355
- skip: {
356
- color: 1
304
+ }],
305
+ themeBuilder = createThemeBuilder().addPalettes(palettes).addTemplates(templates).addMasks(masks).addThemes({
306
+ light: {
307
+ template: "base",
308
+ palette: "light",
309
+ nonInheritedValues: nonInherited.light
310
+ },
311
+ dark: {
312
+ template: "base",
313
+ palette: "dark",
314
+ nonInheritedValues: nonInherited.dark
357
315
  }
358
- }
359
- }).addComponentThemes({
360
- ListItem: [
361
- {
316
+ }).addChildThemes({
317
+ orange: colorThemeDefinition("orange"),
318
+ yellow: colorThemeDefinition("yellow"),
319
+ green: colorThemeDefinition("green"),
320
+ blue: colorThemeDefinition("blue"),
321
+ purple: colorThemeDefinition("purple"),
322
+ pink: colorThemeDefinition("pink"),
323
+ red: colorThemeDefinition("red"),
324
+ gray: colorThemeDefinition("gray")
325
+ }).addChildThemes({
326
+ alt1: {
327
+ mask: "soften",
328
+ ...maskOptions.alt
329
+ },
330
+ alt2: {
331
+ mask: "soften2Border1",
332
+ ...maskOptions.alt
333
+ },
334
+ active: {
335
+ mask: "soften3FlatBorder",
336
+ skip: {
337
+ color: 1
338
+ }
339
+ }
340
+ }).addComponentThemes({
341
+ ListItem: [{
362
342
  parent: "light",
363
- avoidNestingWithin: [
364
- "active"
365
- ],
343
+ avoidNestingWithin: ["active"],
366
344
  mask: "identity",
367
345
  ...maskOptions.component
368
- },
369
- {
346
+ }, {
370
347
  parent: "dark",
371
- avoidNestingWithin: [
372
- "active"
373
- ],
348
+ avoidNestingWithin: ["active"],
374
349
  mask: "identity",
375
350
  ...maskOptions.component
351
+ }],
352
+ Card: {
353
+ mask: "soften",
354
+ avoidNestingWithin: ["active"],
355
+ ...maskOptions.component
356
+ },
357
+ Button: {
358
+ mask: "soften2Border1",
359
+ ...maskOptions.component
360
+ },
361
+ Checkbox: {
362
+ mask: "softenBorder2",
363
+ ...maskOptions.component
364
+ },
365
+ Switch: {
366
+ mask: "soften2Border1",
367
+ ...maskOptions.component
368
+ },
369
+ SwitchThumb: {
370
+ mask: "inverseStrengthen2",
371
+ avoidNestingWithin: ["active"],
372
+ ...maskOptions.component
373
+ },
374
+ TooltipContent: {
375
+ mask: "soften2Border1",
376
+ avoidNestingWithin: ["active"],
377
+ ...maskOptions.component
378
+ },
379
+ DrawerFrame: {
380
+ mask: "soften",
381
+ avoidNestingWithin: ["active"],
382
+ ...maskOptions.component
383
+ },
384
+ Progress: {
385
+ mask: "soften",
386
+ avoidNestingWithin: ["active"],
387
+ ...maskOptions.component
388
+ },
389
+ RadioGroupItem: {
390
+ mask: "softenBorder2",
391
+ avoidNestingWithin: ["active"],
392
+ ...maskOptions.component
393
+ },
394
+ TooltipArrow: {
395
+ mask: "soften",
396
+ avoidNestingWithin: ["active"],
397
+ ...maskOptions.component
398
+ },
399
+ SliderTrackActive: {
400
+ mask: "inverseSoften",
401
+ ...maskOptions.component
402
+ },
403
+ SliderTrack: {
404
+ mask: "soften2Border1",
405
+ avoidNestingWithin: ["active"],
406
+ ...maskOptions.component
407
+ },
408
+ SliderThumb: {
409
+ mask: "inverse",
410
+ avoidNestingWithin: ["active"],
411
+ ...maskOptions.component
412
+ },
413
+ Tooltip: {
414
+ mask: "inverse",
415
+ avoidNestingWithin: ["active"],
416
+ ...maskOptions.component
417
+ },
418
+ ProgressIndicator: {
419
+ mask: "inverse",
420
+ avoidNestingWithin: ["active"],
421
+ ...maskOptions.component
422
+ },
423
+ SheetOverlay: overlayThemeDefinitions,
424
+ DialogOverlay: overlayThemeDefinitions,
425
+ ModalOverlay: overlayThemeDefinitions,
426
+ Input: {
427
+ mask: "softenBorder2",
428
+ ...maskOptions.component
429
+ },
430
+ TextArea: {
431
+ mask: "softenBorder2",
432
+ ...maskOptions.component
376
433
  }
377
- ],
378
- Card: {
379
- mask: "soften",
380
- avoidNestingWithin: [
381
- "active"
382
- ],
383
- ...maskOptions.component
384
- },
385
- Button: {
386
- mask: "soften2Border1",
387
- ...maskOptions.component
388
- },
389
- Checkbox: {
390
- mask: "softenBorder2",
391
- ...maskOptions.component
392
- },
393
- Switch: {
394
- mask: "soften2Border1",
395
- ...maskOptions.component
396
- },
397
- SwitchThumb: {
398
- mask: "inverseStrengthen2",
399
- avoidNestingWithin: [
400
- "active"
401
- ],
402
- ...maskOptions.component
403
- },
404
- TooltipContent: {
405
- mask: "soften2Border1",
406
- avoidNestingWithin: [
407
- "active"
408
- ],
409
- ...maskOptions.component
410
- },
411
- DrawerFrame: {
412
- mask: "soften",
413
- avoidNestingWithin: [
414
- "active"
415
- ],
416
- ...maskOptions.component
417
- },
418
- Progress: {
419
- mask: "soften",
420
- avoidNestingWithin: [
421
- "active"
422
- ],
423
- ...maskOptions.component
424
- },
425
- RadioGroupItem: {
426
- mask: "softenBorder2",
427
- avoidNestingWithin: [
428
- "active"
429
- ],
430
- ...maskOptions.component
431
- },
432
- TooltipArrow: {
433
- mask: "soften",
434
- avoidNestingWithin: [
435
- "active"
436
- ],
437
- ...maskOptions.component
438
- },
439
- SliderTrackActive: {
440
- mask: "inverseSoften",
441
- ...maskOptions.component
442
- },
443
- SliderTrack: {
444
- mask: "soften2Border1",
445
- avoidNestingWithin: [
446
- "active"
447
- ],
448
- ...maskOptions.component
449
- },
450
- SliderThumb: {
451
- mask: "inverse",
452
- avoidNestingWithin: [
453
- "active"
454
- ],
455
- ...maskOptions.component
456
- },
457
- Tooltip: {
458
- mask: "inverse",
459
- avoidNestingWithin: [
460
- "active"
461
- ],
462
- ...maskOptions.component
463
- },
464
- ProgressIndicator: {
465
- mask: "inverse",
466
- avoidNestingWithin: [
467
- "active"
468
- ],
469
- ...maskOptions.component
470
- },
471
- SheetOverlay: overlayThemeDefinitions,
472
- DialogOverlay: overlayThemeDefinitions,
473
- ModalOverlay: overlayThemeDefinitions,
474
- Input: {
475
- mask: "softenBorder2",
476
- ...maskOptions.component
477
- },
478
- TextArea: {
479
- mask: "softenBorder2",
480
- ...maskOptions.component
481
- }
482
- }, {}), themesIn = themeBuilder.build(), themes = themesIn;
434
+ }, {}),
435
+ themesIn = themeBuilder.build(),
436
+ themes = themesIn;
483
437
  function postfixObjKeys(obj, postfix) {
484
- return Object.fromEntries(Object.entries(obj).map(function(param) {
438
+ return Object.fromEntries(Object.entries(obj).map(function (param) {
485
439
  var [k, v] = param;
486
- return [
487
- `${k}${postfix}`,
488
- v
489
- ];
440
+ return [`${k}${postfix}`, v];
490
441
  }));
491
442
  }
492
443
  function sizeToSpace(v) {
@@ -498,12 +449,5 @@ function objectFromEntries(arr) {
498
449
  function objectKeys(obj) {
499
450
  return Object.keys(obj);
500
451
  }
501
- export {
502
- maskOptions,
503
- masks2 as masks,
504
- palettes,
505
- templates,
506
- themes,
507
- tokens
508
- };
509
- //# sourceMappingURL=v2-themes.js.map
452
+ export { maskOptions, masks2 as masks, palettes, templates, themes, tokens };
453
+ //# sourceMappingURL=v2-themes.native.js.map