@tamagui/themes 1.89.28 → 1.89.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/helpers.native.js.map +1 -1
- package/dist/cjs/themes-old.native.js +6 -1
- package/dist/cjs/themes-old.native.js.map +1 -1
- package/dist/cjs/v3-themes.js +90 -51
- package/dist/cjs/v3-themes.js.map +1 -1
- package/dist/cjs/v3-themes.native.js +76 -51
- package/dist/cjs/v3-themes.native.js.map +2 -2
- package/dist/esm/themes-old.native.js +6 -1
- package/dist/esm/themes-old.native.js.map +1 -1
- package/dist/esm/v3-themes.js +90 -51
- package/dist/esm/v3-themes.js.map +1 -1
- package/dist/esm/v3-themes.mjs +77 -47
- package/dist/esm/v3-themes.native.js +75 -50
- package/dist/esm/v3-themes.native.js.map +2 -2
- package/package.json +7 -20
- package/src/v3-themes.ts +115 -55
- package/tsconfig.json +28 -0
- package/types/v3-themes.d.ts +15776 -5718
- package/types/componentThemeDefinitions.d.ts.map +0 -1
- package/types/generated-new.d.ts.map +0 -1
- package/types/generated-v2.d.ts.map +0 -1
- package/types/generated-v3.d.ts.map +0 -1
- package/types/helpers.d.ts.map +0 -1
- package/types/index.d.ts.map +0 -1
- package/types/masks.d.ts.map +0 -1
- package/types/palettes.d.ts.map +0 -1
- package/types/shadows.d.ts.map +0 -1
- package/types/templates.d.ts.map +0 -1
- package/types/themes-new.d.ts.map +0 -1
- package/types/themes-old.d.ts.map +0 -1
- package/types/themes.d.ts.map +0 -1
- package/types/tokens.d.ts.map +0 -1
- package/types/v2-themes.d.ts.map +0 -1
- package/types/v2.d.ts.map +0 -1
- package/types/v3-themes.d.ts.map +0 -1
- package/types/v3.d.ts.map +0 -1
|
@@ -154,9 +154,10 @@ var colorTokens = {
|
|
|
154
154
|
var transparent = function(hsl) {
|
|
155
155
|
var opacity = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
|
|
156
156
|
return hsl.replace("%)", "%, ".concat(opacity, ")")).replace("hsl(", "hsla(");
|
|
157
|
-
}, getColorPalette = function(colors) {
|
|
158
|
-
var colorPalette = Object.values(colors), colorI = colorPalette.length - 4;
|
|
157
|
+
}, getColorPalette = function(colors, accentColors) {
|
|
158
|
+
var colorPalette = Object.values(colors), colorI = colorPalette.length - 4, accentPalette = Object.values(accentColors), accentBackground = accentPalette[0], accentColor = accentPalette[accentPalette.length - 1];
|
|
159
159
|
return [
|
|
160
|
+
accentBackground,
|
|
160
161
|
transparent(colorPalette[0], 0),
|
|
161
162
|
transparent(colorPalette[0], 0.25),
|
|
162
163
|
transparent(colorPalette[0], 0.5),
|
|
@@ -165,9 +166,14 @@ var colorTokens = {
|
|
|
165
166
|
transparent(colorPalette[colorI], 0.75),
|
|
166
167
|
transparent(colorPalette[colorI], 0.5),
|
|
167
168
|
transparent(colorPalette[colorI], 0.25),
|
|
168
|
-
transparent(colorPalette[colorI], 0)
|
|
169
|
+
transparent(colorPalette[colorI], 0),
|
|
170
|
+
accentColor
|
|
169
171
|
]);
|
|
172
|
+
}, brandColor = {
|
|
173
|
+
light: color.blue4Light,
|
|
174
|
+
dark: color.blue4Dark
|
|
170
175
|
}, lightPalette = [
|
|
176
|
+
brandColor.light,
|
|
171
177
|
color.white0,
|
|
172
178
|
color.white025,
|
|
173
179
|
color.white05,
|
|
@@ -187,8 +193,10 @@ var colorTokens = {
|
|
|
187
193
|
color.black075,
|
|
188
194
|
color.black05,
|
|
189
195
|
color.black025,
|
|
190
|
-
color.black0
|
|
196
|
+
color.black0,
|
|
197
|
+
brandColor.dark
|
|
191
198
|
], darkPalette = [
|
|
199
|
+
brandColor.dark,
|
|
192
200
|
color.black0,
|
|
193
201
|
color.black025,
|
|
194
202
|
color.black05,
|
|
@@ -208,40 +216,43 @@ var colorTokens = {
|
|
|
208
216
|
color.white075,
|
|
209
217
|
color.white05,
|
|
210
218
|
color.white025,
|
|
211
|
-
color.white0
|
|
212
|
-
|
|
219
|
+
color.white0,
|
|
220
|
+
brandColor.light
|
|
221
|
+
], lightColorNames = objectKeys(colorTokens.light), lightPalettes = objectFromEntries(lightColorNames.map(function(key, index) {
|
|
213
222
|
return [
|
|
214
223
|
"light_".concat(key),
|
|
215
|
-
getColorPalette(colorTokens.light[key])
|
|
224
|
+
getColorPalette(colorTokens.light[key], colorTokens.light[lightColorNames[(index + 1) % lightColorNames.length]])
|
|
216
225
|
];
|
|
217
|
-
})),
|
|
226
|
+
})), darkColorNames = objectKeys(colorTokens.dark), darkPalettes = objectFromEntries(darkColorNames.map(function(key, index) {
|
|
218
227
|
return [
|
|
219
228
|
"dark_".concat(key),
|
|
220
|
-
getColorPalette(colorTokens.dark[key])
|
|
229
|
+
getColorPalette(colorTokens.dark[key], colorTokens.light[darkColorNames[(index + 1) % darkColorNames.length]])
|
|
221
230
|
];
|
|
222
231
|
})), colorPalettes = _object_spread({}, lightPalettes, darkPalettes);
|
|
223
232
|
return _object_spread({
|
|
224
233
|
light: lightPalette,
|
|
225
234
|
dark: darkPalette
|
|
226
235
|
}, colorPalettes);
|
|
227
|
-
}(),
|
|
228
|
-
var
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
236
|
+
}(), getTemplates = function(scheme) {
|
|
237
|
+
var isLight = scheme === "light", bgIndex = 4, bgBaseOffset = 1, lighten = isLight ? -1 : 1, darken = -lighten, background = bgIndex + bgBaseOffset, borderColor = background + 3, base = {
|
|
238
|
+
accentBackground: 0,
|
|
239
|
+
accentColor: -0,
|
|
240
|
+
background0: 1,
|
|
241
|
+
background025: 2,
|
|
242
|
+
background05: 3,
|
|
243
|
+
background075: 4,
|
|
244
|
+
color1: bgIndex + 1,
|
|
245
|
+
color2: bgIndex + 2,
|
|
246
|
+
color3: bgIndex + 3,
|
|
247
|
+
color4: bgIndex + 4,
|
|
248
|
+
color5: bgIndex + 5,
|
|
249
|
+
color6: bgIndex + 6,
|
|
250
|
+
color7: bgIndex + 7,
|
|
251
|
+
color8: bgIndex + 8,
|
|
252
|
+
color9: bgIndex + 9,
|
|
253
|
+
color10: bgIndex + 10,
|
|
254
|
+
color11: bgIndex + 11,
|
|
255
|
+
color12: bgIndex + 12,
|
|
245
256
|
color0: -0,
|
|
246
257
|
color025: -1,
|
|
247
258
|
color05: -2,
|
|
@@ -250,20 +261,22 @@ var colorTokens = {
|
|
|
250
261
|
// can publish components for others to use without mandating a specific color scale
|
|
251
262
|
// the @tamagui/button Button component looks for `$background`, so you set the
|
|
252
263
|
// dark_red_Button theme to have a stronger background than the dark_red theme.
|
|
253
|
-
background
|
|
254
|
-
backgroundHover:
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
264
|
+
background,
|
|
265
|
+
backgroundHover: background + lighten,
|
|
266
|
+
// always lighten on hover no matter the scheme
|
|
267
|
+
backgroundPress: background + darken,
|
|
268
|
+
// always darken on press no matter the theme
|
|
269
|
+
backgroundFocus: background + darken,
|
|
270
|
+
borderColor,
|
|
271
|
+
borderColorHover: borderColor + lighten,
|
|
272
|
+
borderColorPress: borderColor + darken,
|
|
273
|
+
borderColorFocus: borderColor,
|
|
274
|
+
color: -bgIndex - 1,
|
|
275
|
+
colorHover: -bgIndex - 2,
|
|
276
|
+
colorPress: -bgIndex - 1,
|
|
277
|
+
colorFocus: -bgIndex - 2,
|
|
265
278
|
colorTransparent: -0,
|
|
266
|
-
placeholderColor: -
|
|
279
|
+
placeholderColor: -bgIndex - 4,
|
|
267
280
|
outlineColor: -1
|
|
268
281
|
}, surface12 = {
|
|
269
282
|
background: base.background + 1,
|
|
@@ -292,16 +305,18 @@ var colorTokens = {
|
|
|
292
305
|
borderColorHover: base.borderColorHover + 3,
|
|
293
306
|
borderColorFocus: base.borderColorFocus + 3,
|
|
294
307
|
borderColorPress: base.borderColorPress + 3
|
|
295
|
-
},
|
|
308
|
+
}, surfaceActiveBg = {
|
|
296
309
|
background: base.background + 5,
|
|
297
310
|
backgroundHover: base.background + 5,
|
|
298
311
|
backgroundPress: base.backgroundPress + 5,
|
|
299
|
-
backgroundFocus: base.backgroundFocus + 5
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
312
|
+
backgroundFocus: base.backgroundFocus + 5
|
|
313
|
+
}, surfaceActive = _object_spread_props(_object_spread({}, surfaceActiveBg), {
|
|
314
|
+
// match border to background when active
|
|
315
|
+
borderColor: surfaceActiveBg.background,
|
|
316
|
+
borderColorHover: surfaceActiveBg.backgroundHover,
|
|
317
|
+
borderColorFocus: surfaceActiveBg.backgroundFocus,
|
|
318
|
+
borderColorPress: surfaceActiveBg.backgroundPress
|
|
319
|
+
}), inverseSurface12 = {
|
|
305
320
|
color: surface12.background,
|
|
306
321
|
colorHover: surface12.backgroundHover,
|
|
307
322
|
colorPress: surface12.backgroundPress,
|
|
@@ -345,7 +360,17 @@ var colorTokens = {
|
|
|
345
360
|
inverseActive,
|
|
346
361
|
surfaceActive
|
|
347
362
|
};
|
|
348
|
-
}(),
|
|
363
|
+
}, lightTemplates = getTemplates("light"), darkTemplates = getTemplates("dark"), templates = _object_spread({}, objectFromEntries(objectKeys(lightTemplates).map(function(name) {
|
|
364
|
+
return [
|
|
365
|
+
"light_".concat(name),
|
|
366
|
+
lightTemplates[name]
|
|
367
|
+
];
|
|
368
|
+
})), objectFromEntries(objectKeys(darkTemplates).map(function(name) {
|
|
369
|
+
return [
|
|
370
|
+
"dark_".concat(name),
|
|
371
|
+
darkTemplates[name]
|
|
372
|
+
];
|
|
373
|
+
}))), shadows = {
|
|
349
374
|
light: {
|
|
350
375
|
shadowColor: lightShadowColorStrong,
|
|
351
376
|
shadowColorHover: lightShadowColorStrong,
|
|
@@ -371,7 +396,7 @@ var colorTokens = {
|
|
|
371
396
|
{
|
|
372
397
|
parent: "dark",
|
|
373
398
|
theme: {
|
|
374
|
-
background: "rgba(0,0,0,0.
|
|
399
|
+
background: "rgba(0,0,0,0.8)"
|
|
375
400
|
}
|
|
376
401
|
}
|
|
377
402
|
], inverseSurface1 = [
|
|
@@ -607,6 +632,7 @@ function objectKeys(obj) {
|
|
|
607
632
|
return Object.keys(obj);
|
|
608
633
|
}
|
|
609
634
|
export {
|
|
635
|
+
getTemplates,
|
|
610
636
|
objectFromEntries,
|
|
611
637
|
objectKeys,
|
|
612
638
|
palettes,
|
|
@@ -617,7 +643,6 @@ export {
|
|
|
617
643
|
space,
|
|
618
644
|
spaces,
|
|
619
645
|
spacesNegative,
|
|
620
|
-
templates,
|
|
621
646
|
themes,
|
|
622
647
|
tokens,
|
|
623
648
|
zIndex
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Users/n8/tamagui/packages/themes/src/v3-themes.ts"],
|
|
4
|
-
"mappings": "AAAA,SACEA,MACAC,UACAC,MACAC,UACAC,OACAC,WACAC,QACAC,YACAC,MACAC,UACAC,QACAC,YACAC,KACAC,SACAC,QACAC,kBACK;AACP,SAASC,0BAA0B;
|
|
5
|
-
"names": ["blue", "blueDark", "gray", "grayDark", "green", "greenDark", "orange", "orangeDark", "pink", "pinkDark", "purple", "purpleDark", "red", "redDark", "yellow", "yellowDark", "createThemeBuilder", "createTokens", "colorTokens", "light", "dark", "lightShadowColor", "lightShadowColorStrong", "darkShadowColor", "darkShadowColorStrong", "darkColors", "lightColors", "color", "white0", "white075", "white05", "white025", "black0", "black075", "black05", "black025", "white1", "white2", "white3", "white4", "white5", "white6", "white7", "white8", "white9", "white10", "white11", "white12", "black1", "black2", "black3", "black4", "black5", "black6", "black7", "black8", "black9", "black10", "black11", "black12", "postfixObjKeys", "palettes", "transparent", "hsl", "opacity", "replace", "getColorPalette", "colors", "colorPalette", "Object", "values", "colorI", "length", "lightPalette", "darkPalette", "
|
|
4
|
+
"mappings": "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",
|
|
5
|
+
"names": ["blue", "blueDark", "gray", "grayDark", "green", "greenDark", "orange", "orangeDark", "pink", "pinkDark", "purple", "purpleDark", "red", "redDark", "yellow", "yellowDark", "createThemeBuilder", "createTokens", "colorTokens", "light", "dark", "lightShadowColor", "lightShadowColorStrong", "darkShadowColor", "darkShadowColorStrong", "darkColors", "lightColors", "color", "white0", "white075", "white05", "white025", "black0", "black075", "black05", "black025", "white1", "white2", "white3", "white4", "white5", "white6", "white7", "white8", "white9", "white10", "white11", "white12", "black1", "black2", "black3", "black4", "black5", "black6", "black7", "black8", "black9", "black10", "black11", "black12", "postfixObjKeys", "palettes", "transparent", "hsl", "opacity", "replace", "getColorPalette", "colors", "accentColors", "colorPalette", "Object", "values", "colorI", "length", "accentPalette", "accentBackground", "accentColor", "brandColor", "blue4Light", "blue4Dark", "lightPalette", "darkPalette", "lightColorNames", "objectKeys", "lightPalettes", "objectFromEntries", "map", "key", "index", "darkColorNames", "darkPalettes", "colorPalettes", "getTemplates", "scheme", "isLight", "bgIndex", "bgBaseOffset", "lighten", "darken", "background", "borderColor", "base", "background0", "background025", "background05", "background075", "color1", "color2", "color3", "color4", "color5", "color6", "color7", "color8", "color9", "color10", "color11", "color12", "color0", "color025", "color05", "color075", "backgroundHover", "backgroundPress", "backgroundFocus", "borderColorHover", "borderColorPress", "borderColorFocus", "colorHover", "colorPress", "colorFocus", "colorTransparent", "placeholderColor", "outlineColor", "surface1", "surface2", "surface3", "surfaceActiveBg", "surfaceActive", "inverseSurface1", "inverseActive", "alt1", "alt2", "lightTemplates", "darkTemplates", "templates", "name", "shadows", "shadowColor", "shadowColorHover", "shadowColorPress", "shadowColorFocus", "nonInherited", "overlayThemeDefinitions", "parent", "theme", "template", "themeBuilder", "addPalettes", "addTemplates", "addThemes", "palette", "nonInheritedValues", "addChildThemes", "active", "surface4", "addComponentThemes", "ListItem", "SelectTrigger", "Card", "Button", "Checkbox", "Switch", "SwitchThumb", "TooltipContent", "Progress", "RadioGroupItem", "TooltipArrow", "SliderTrackActive", "SliderTrack", "SliderThumb", "Tooltip", "ProgressIndicator", "SheetOverlay", "DialogOverlay", "ModalOverlay", "Input", "TextArea", "avoidNestingWithin", "themesIn", "build", "themes", "size", "$0", "$1", "$2", "$3", "$4", "$true", "$5", "$6", "$7", "$8", "$9", "$10", "$11", "$12", "$13", "$14", "$15", "$16", "$17", "$18", "$19", "$20", "spaces", "entries", "k", "v", "sizeToSpace", "spacesNegative", "slice", "space", "fromEntries", "zIndex", "radius", "true", "tokens", "obj", "postfix", "Math", "round", "floor", "arr", "keys"]
|
|
6
6
|
}
|
package/package.json
CHANGED
|
@@ -1,23 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/themes",
|
|
3
|
-
"version": "1.89.
|
|
3
|
+
"version": "1.89.29",
|
|
4
4
|
"types": "./types/index.d.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
7
7
|
"sideEffects": false,
|
|
8
|
-
"files": [
|
|
9
|
-
"v3-themes.js",
|
|
10
|
-
"v3-themes.d.ts",
|
|
11
|
-
"v3.js",
|
|
12
|
-
"v3.d.ts",
|
|
13
|
-
"v2.js",
|
|
14
|
-
"v2.d.ts",
|
|
15
|
-
"v2-themes.js",
|
|
16
|
-
"v2-themes.d.ts",
|
|
17
|
-
"src",
|
|
18
|
-
"types",
|
|
19
|
-
"dist"
|
|
20
|
-
],
|
|
21
8
|
"scripts": {
|
|
22
9
|
"generate": "yarn generate:v1 && yarn generate:v2",
|
|
23
10
|
"generate:v1": "tamagui generate-themes ./src/themes-new.ts ./src/generated-new.ts",
|
|
@@ -65,14 +52,14 @@
|
|
|
65
52
|
}
|
|
66
53
|
},
|
|
67
54
|
"dependencies": {
|
|
68
|
-
"@tamagui/colors": "1.89.
|
|
69
|
-
"@tamagui/create-theme": "1.89.
|
|
70
|
-
"@tamagui/theme-builder": "1.89.
|
|
71
|
-
"@tamagui/web": "1.89.
|
|
55
|
+
"@tamagui/colors": "1.89.29",
|
|
56
|
+
"@tamagui/create-theme": "1.89.29",
|
|
57
|
+
"@tamagui/theme-builder": "1.89.29",
|
|
58
|
+
"@tamagui/web": "1.89.29"
|
|
72
59
|
},
|
|
73
60
|
"devDependencies": {
|
|
74
|
-
"@tamagui/build": "1.89.
|
|
75
|
-
"@tamagui/cli": "1.89.
|
|
61
|
+
"@tamagui/build": "1.89.29",
|
|
62
|
+
"@tamagui/cli": "1.89.29",
|
|
76
63
|
"vitest": "^0.34.3"
|
|
77
64
|
},
|
|
78
65
|
"publishConfig": {
|
package/src/v3-themes.ts
CHANGED
|
@@ -17,7 +17,6 @@ import {
|
|
|
17
17
|
yellowDark,
|
|
18
18
|
} from '@tamagui/colors'
|
|
19
19
|
import { createThemeBuilder } from '@tamagui/theme-builder'
|
|
20
|
-
import type { Variable } from '@tamagui/web'
|
|
21
20
|
import { createTokens } from '@tamagui/web'
|
|
22
21
|
|
|
23
22
|
const colorTokens = {
|
|
@@ -111,15 +110,21 @@ export const palettes = (() => {
|
|
|
111
110
|
const transparent = (hsl: string, opacity = 0) =>
|
|
112
111
|
hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)
|
|
113
112
|
|
|
114
|
-
const getColorPalette = (colors: Object): string[] => {
|
|
113
|
+
const getColorPalette = (colors: Object, accentColors: Object): string[] => {
|
|
115
114
|
const colorPalette = Object.values(colors)
|
|
116
115
|
// make the transparent color vibrant and towards the middle
|
|
117
116
|
const colorI = colorPalette.length - 4
|
|
118
117
|
|
|
118
|
+
// accents!
|
|
119
|
+
const accentPalette = Object.values(accentColors)
|
|
120
|
+
const accentBackground = accentPalette[0]
|
|
121
|
+
const accentColor = accentPalette[accentPalette.length - 1]
|
|
122
|
+
|
|
119
123
|
// add our transparent colors first/last
|
|
120
124
|
// and make sure the last (foreground) color is white/black rather than colorful
|
|
121
125
|
// this is mostly for consistency with the older theme-base
|
|
122
126
|
return [
|
|
127
|
+
accentBackground,
|
|
123
128
|
transparent(colorPalette[0], 0),
|
|
124
129
|
transparent(colorPalette[0], 0.25),
|
|
125
130
|
transparent(colorPalette[0], 0.5),
|
|
@@ -129,15 +134,17 @@ export const palettes = (() => {
|
|
|
129
134
|
transparent(colorPalette[colorI], 0.5),
|
|
130
135
|
transparent(colorPalette[colorI], 0.25),
|
|
131
136
|
transparent(colorPalette[colorI], 0),
|
|
137
|
+
accentColor,
|
|
132
138
|
]
|
|
133
139
|
}
|
|
134
140
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
141
|
+
const brandColor = {
|
|
142
|
+
light: color.blue4Light,
|
|
143
|
+
dark: color.blue4Dark,
|
|
144
|
+
}
|
|
139
145
|
|
|
140
146
|
const lightPalette = [
|
|
147
|
+
brandColor.light,
|
|
141
148
|
color.white0,
|
|
142
149
|
color.white025,
|
|
143
150
|
color.white05,
|
|
@@ -158,9 +165,11 @@ export const palettes = (() => {
|
|
|
158
165
|
color.black05,
|
|
159
166
|
color.black025,
|
|
160
167
|
color.black0,
|
|
168
|
+
brandColor.dark,
|
|
161
169
|
]
|
|
162
170
|
|
|
163
171
|
const darkPalette = [
|
|
172
|
+
brandColor.dark,
|
|
164
173
|
color.black0,
|
|
165
174
|
color.black025,
|
|
166
175
|
color.black05,
|
|
@@ -181,17 +190,34 @@ export const palettes = (() => {
|
|
|
181
190
|
color.white05,
|
|
182
191
|
color.white025,
|
|
183
192
|
color.white0,
|
|
193
|
+
brandColor.light,
|
|
184
194
|
]
|
|
185
195
|
|
|
196
|
+
const lightColorNames = objectKeys(colorTokens.light)
|
|
186
197
|
const lightPalettes = objectFromEntries(
|
|
187
|
-
|
|
188
|
-
(key) =>
|
|
198
|
+
lightColorNames.map(
|
|
199
|
+
(key, index) =>
|
|
200
|
+
[
|
|
201
|
+
`light_${key}`,
|
|
202
|
+
getColorPalette(
|
|
203
|
+
colorTokens.light[key],
|
|
204
|
+
colorTokens.light[lightColorNames[(index + 1) % lightColorNames.length]]
|
|
205
|
+
),
|
|
206
|
+
] as const
|
|
189
207
|
)
|
|
190
208
|
)
|
|
191
209
|
|
|
210
|
+
const darkColorNames = objectKeys(colorTokens.dark)
|
|
192
211
|
const darkPalettes = objectFromEntries(
|
|
193
|
-
|
|
194
|
-
(key) =>
|
|
212
|
+
darkColorNames.map(
|
|
213
|
+
(key, index) =>
|
|
214
|
+
[
|
|
215
|
+
`dark_${key}`,
|
|
216
|
+
getColorPalette(
|
|
217
|
+
colorTokens.dark[key],
|
|
218
|
+
colorTokens.light[darkColorNames[(index + 1) % darkColorNames.length]]
|
|
219
|
+
),
|
|
220
|
+
] as const
|
|
195
221
|
)
|
|
196
222
|
)
|
|
197
223
|
|
|
@@ -207,28 +233,45 @@ export const palettes = (() => {
|
|
|
207
233
|
}
|
|
208
234
|
})()
|
|
209
235
|
|
|
210
|
-
export const
|
|
211
|
-
const
|
|
236
|
+
export const getTemplates = (scheme: 'dark' | 'light') => {
|
|
237
|
+
const isLight = scheme === 'light'
|
|
238
|
+
|
|
239
|
+
// our palettes have 4 things padding each end until you get to bg/color:
|
|
240
|
+
// [accentBg, transparent1, transparent2, transparent3, transparent4, background, ...]
|
|
241
|
+
const bgIndex = 4
|
|
242
|
+
|
|
243
|
+
// light themes will start with a slightly stronger bg, and then lighten on hover
|
|
244
|
+
// whereas dark themes start with a less strong bg, but lighten on hover as well
|
|
245
|
+
const bgBaseOffset = 1
|
|
246
|
+
|
|
247
|
+
const lighten = isLight ? -1 : 1
|
|
248
|
+
const darken = -lighten
|
|
249
|
+
|
|
250
|
+
const background = bgIndex + bgBaseOffset
|
|
251
|
+
const borderColor = background + 3
|
|
212
252
|
|
|
213
253
|
// templates use the palette and specify index
|
|
214
254
|
// negative goes backwards from end so -1 is the last item
|
|
215
255
|
const base = {
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
256
|
+
accentBackground: 0,
|
|
257
|
+
accentColor: -0,
|
|
258
|
+
|
|
259
|
+
background0: 1,
|
|
260
|
+
background025: 2,
|
|
261
|
+
background05: 3,
|
|
262
|
+
background075: 4,
|
|
263
|
+
color1: bgIndex + 1,
|
|
264
|
+
color2: bgIndex + 2,
|
|
265
|
+
color3: bgIndex + 3,
|
|
266
|
+
color4: bgIndex + 4,
|
|
267
|
+
color5: bgIndex + 5,
|
|
268
|
+
color6: bgIndex + 6,
|
|
269
|
+
color7: bgIndex + 7,
|
|
270
|
+
color8: bgIndex + 8,
|
|
271
|
+
color9: bgIndex + 9,
|
|
272
|
+
color10: bgIndex + 10,
|
|
273
|
+
color11: bgIndex + 11,
|
|
274
|
+
color12: bgIndex + 12,
|
|
232
275
|
color0: -0,
|
|
233
276
|
color025: -1,
|
|
234
277
|
color05: -2,
|
|
@@ -237,20 +280,20 @@ export const templates = (() => {
|
|
|
237
280
|
// can publish components for others to use without mandating a specific color scale
|
|
238
281
|
// the @tamagui/button Button component looks for `$background`, so you set the
|
|
239
282
|
// dark_red_Button theme to have a stronger background than the dark_red theme.
|
|
240
|
-
background
|
|
241
|
-
backgroundHover:
|
|
242
|
-
backgroundPress:
|
|
243
|
-
backgroundFocus:
|
|
244
|
-
borderColor
|
|
245
|
-
borderColorHover:
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
color: -
|
|
249
|
-
colorHover: -
|
|
250
|
-
colorPress: -
|
|
251
|
-
colorFocus: -
|
|
283
|
+
background,
|
|
284
|
+
backgroundHover: background + lighten, // always lighten on hover no matter the scheme
|
|
285
|
+
backgroundPress: background + darken, // always darken on press no matter the theme
|
|
286
|
+
backgroundFocus: background + darken,
|
|
287
|
+
borderColor,
|
|
288
|
+
borderColorHover: borderColor + lighten,
|
|
289
|
+
borderColorPress: borderColor + darken,
|
|
290
|
+
borderColorFocus: borderColor,
|
|
291
|
+
color: -bgIndex - 1,
|
|
292
|
+
colorHover: -bgIndex - 2,
|
|
293
|
+
colorPress: -bgIndex - 1,
|
|
294
|
+
colorFocus: -bgIndex - 2,
|
|
252
295
|
colorTransparent: -0,
|
|
253
|
-
placeholderColor: -
|
|
296
|
+
placeholderColor: -bgIndex - 4,
|
|
254
297
|
outlineColor: -1,
|
|
255
298
|
}
|
|
256
299
|
|
|
@@ -287,15 +330,20 @@ export const templates = (() => {
|
|
|
287
330
|
borderColorPress: base.borderColorPress + 3,
|
|
288
331
|
}
|
|
289
332
|
|
|
290
|
-
const
|
|
333
|
+
const surfaceActiveBg = {
|
|
291
334
|
background: base.background + 5,
|
|
292
335
|
backgroundHover: base.background + 5,
|
|
293
336
|
backgroundPress: base.backgroundPress + 5,
|
|
294
337
|
backgroundFocus: base.backgroundFocus + 5,
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
const surfaceActive = {
|
|
341
|
+
...surfaceActiveBg,
|
|
342
|
+
// match border to background when active
|
|
343
|
+
borderColor: surfaceActiveBg.background,
|
|
344
|
+
borderColorHover: surfaceActiveBg.backgroundHover,
|
|
345
|
+
borderColorFocus: surfaceActiveBg.backgroundFocus,
|
|
346
|
+
borderColorPress: surfaceActiveBg.backgroundPress,
|
|
299
347
|
}
|
|
300
348
|
|
|
301
349
|
const inverseSurface1 = {
|
|
@@ -350,7 +398,22 @@ export const templates = (() => {
|
|
|
350
398
|
inverseActive,
|
|
351
399
|
surfaceActive,
|
|
352
400
|
}
|
|
353
|
-
}
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
const lightTemplates = getTemplates('light')
|
|
404
|
+
const darkTemplates = getTemplates('dark')
|
|
405
|
+
const templates = {
|
|
406
|
+
...objectFromEntries(
|
|
407
|
+
objectKeys(lightTemplates).map(
|
|
408
|
+
(name) => [`light_${name}`, lightTemplates[name]] as const
|
|
409
|
+
)
|
|
410
|
+
),
|
|
411
|
+
...objectFromEntries(
|
|
412
|
+
objectKeys(darkTemplates).map(
|
|
413
|
+
(name) => [`dark_${name}`, darkTemplates[name]] as const
|
|
414
|
+
)
|
|
415
|
+
),
|
|
416
|
+
}
|
|
354
417
|
|
|
355
418
|
const shadows = {
|
|
356
419
|
light: {
|
|
@@ -388,7 +451,7 @@ const overlayThemeDefinitions = [
|
|
|
388
451
|
{
|
|
389
452
|
parent: 'dark',
|
|
390
453
|
theme: {
|
|
391
|
-
background: 'rgba(0,0,0,0.
|
|
454
|
+
background: 'rgba(0,0,0,0.8)',
|
|
392
455
|
},
|
|
393
456
|
},
|
|
394
457
|
]
|
|
@@ -561,12 +624,12 @@ const themeBuilder = createThemeBuilder()
|
|
|
561
624
|
|
|
562
625
|
const themesIn = themeBuilder.build()
|
|
563
626
|
|
|
564
|
-
export type Theme = Record<keyof typeof
|
|
627
|
+
export type Theme = Record<keyof typeof lightTemplates.base, string> &
|
|
565
628
|
typeof nonInherited.light
|
|
566
629
|
|
|
567
630
|
export type ThemesOut = Record<keyof typeof themesIn, Theme>
|
|
568
631
|
|
|
569
|
-
export const themes = themesIn as ThemesOut
|
|
632
|
+
export const themes = themesIn as any as ThemesOut
|
|
570
633
|
|
|
571
634
|
// --- tokens ---
|
|
572
635
|
|
|
@@ -673,14 +736,11 @@ export const tokens = createTokens({
|
|
|
673
736
|
|
|
674
737
|
// --- utils ---
|
|
675
738
|
|
|
676
|
-
export function postfixObjKeys<
|
|
677
|
-
A extends { [key: string]: Variable<string> | string },
|
|
678
|
-
B extends string,
|
|
679
|
-
>(
|
|
739
|
+
export function postfixObjKeys<A extends { [key: string]: string }, B extends string>(
|
|
680
740
|
obj: A,
|
|
681
741
|
postfix: B
|
|
682
742
|
): {
|
|
683
|
-
[Key in `${keyof A extends string ? keyof A : never}${B}`]:
|
|
743
|
+
[Key in `${keyof A extends string ? keyof A : never}${B}`]: string
|
|
684
744
|
} {
|
|
685
745
|
return Object.fromEntries(
|
|
686
746
|
Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])
|