@tamagui/themes 1.14.0 → 1.14.2
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/index.js +20 -1
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/themes.js +272 -1
- package/dist/cjs/themes.js.map +2 -2
- package/dist/cjs/tokens.js +179 -1
- package/dist/cjs/tokens.js.map +2 -2
- package/dist/esm/index.js +3 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +3 -1
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/themes.js +254 -1
- package/dist/esm/themes.js.map +2 -2
- package/dist/esm/themes.mjs +254 -1
- package/dist/esm/themes.mjs.map +2 -2
- package/dist/esm/tokens.js +164 -1
- package/dist/esm/tokens.js.map +2 -2
- package/dist/esm/tokens.mjs +164 -1
- package/dist/esm/tokens.mjs.map +2 -2
- package/package.json +5 -5
package/dist/esm/themes.js
CHANGED
|
@@ -1,2 +1,255 @@
|
|
|
1
|
-
import
|
|
1
|
+
import {
|
|
2
|
+
addChildren,
|
|
3
|
+
applyMask,
|
|
4
|
+
createStrengthenMask,
|
|
5
|
+
createTheme,
|
|
6
|
+
createWeakenMask
|
|
7
|
+
} from "@tamagui/create-theme";
|
|
8
|
+
import { colorTokens, darkColors, lightColors } from "./tokens";
|
|
9
|
+
const lightTransparent = "rgba(255,255,255,0)";
|
|
10
|
+
const darkTransparent = "rgba(10,10,10,0)";
|
|
11
|
+
const palettes = {
|
|
12
|
+
dark: [
|
|
13
|
+
darkTransparent,
|
|
14
|
+
"#050505",
|
|
15
|
+
"#151515",
|
|
16
|
+
"#191919",
|
|
17
|
+
"#232323",
|
|
18
|
+
"#282828",
|
|
19
|
+
"#323232",
|
|
20
|
+
"#424242",
|
|
21
|
+
"#494949",
|
|
22
|
+
"#545454",
|
|
23
|
+
"#626262",
|
|
24
|
+
"#a5a5a5",
|
|
25
|
+
"#fff",
|
|
26
|
+
lightTransparent
|
|
27
|
+
],
|
|
28
|
+
light: [
|
|
29
|
+
lightTransparent,
|
|
30
|
+
"#fff",
|
|
31
|
+
"#f9f9f9",
|
|
32
|
+
"hsl(0, 0%, 97.3%)",
|
|
33
|
+
"hsl(0, 0%, 95.1%)",
|
|
34
|
+
"hsl(0, 0%, 94.0%)",
|
|
35
|
+
"hsl(0, 0%, 92.0%)",
|
|
36
|
+
"hsl(0, 0%, 89.5%)",
|
|
37
|
+
"hsl(0, 0%, 81.0%)",
|
|
38
|
+
"hsl(0, 0%, 56.1%)",
|
|
39
|
+
"hsl(0, 0%, 50.3%)",
|
|
40
|
+
"hsl(0, 0%, 42.5%)",
|
|
41
|
+
"hsl(0, 0%, 9.0%)",
|
|
42
|
+
darkTransparent
|
|
43
|
+
]
|
|
44
|
+
};
|
|
45
|
+
const templateColors = {
|
|
46
|
+
color1: 1,
|
|
47
|
+
color2: 2,
|
|
48
|
+
color3: 3,
|
|
49
|
+
color4: 4,
|
|
50
|
+
color5: 5,
|
|
51
|
+
color6: 6,
|
|
52
|
+
color7: 7,
|
|
53
|
+
color8: 8,
|
|
54
|
+
color9: 9,
|
|
55
|
+
color10: 10,
|
|
56
|
+
color11: 11,
|
|
57
|
+
color12: 12
|
|
58
|
+
};
|
|
59
|
+
const templateShadows = {
|
|
60
|
+
shadowColor: 1,
|
|
61
|
+
shadowColorHover: 1,
|
|
62
|
+
shadowColorPress: 2,
|
|
63
|
+
shadowColorFocus: 2
|
|
64
|
+
};
|
|
65
|
+
const skip = {
|
|
66
|
+
...templateColors,
|
|
67
|
+
...templateShadows
|
|
68
|
+
};
|
|
69
|
+
const template = {
|
|
70
|
+
...skip,
|
|
71
|
+
// the background, color, etc keys here work like generics - they make it so you
|
|
72
|
+
// can publish components for others to use without mandating a specific color scale
|
|
73
|
+
// the @tamagui/button Button component looks for `$background`, so you set the
|
|
74
|
+
// dark_red_Button theme to have a stronger background than the dark_red theme.
|
|
75
|
+
background: 2,
|
|
76
|
+
backgroundHover: 3,
|
|
77
|
+
backgroundPress: 1,
|
|
78
|
+
backgroundFocus: 2,
|
|
79
|
+
backgroundStrong: 1,
|
|
80
|
+
backgroundTransparent: 0,
|
|
81
|
+
color: -1,
|
|
82
|
+
colorHover: -2,
|
|
83
|
+
colorPress: -1,
|
|
84
|
+
colorFocus: -2,
|
|
85
|
+
colorTransparent: -0,
|
|
86
|
+
borderColor: 4,
|
|
87
|
+
borderColorHover: 5,
|
|
88
|
+
borderColorPress: 3,
|
|
89
|
+
borderColorFocus: 4,
|
|
90
|
+
placeholderColor: -4
|
|
91
|
+
};
|
|
92
|
+
const lightShadowColor = "rgba(0,0,0,0.02)";
|
|
93
|
+
const lightShadowColorStrong = "rgba(0,0,0,0.066)";
|
|
94
|
+
const darkShadowColor = "rgba(0,0,0,0.2)";
|
|
95
|
+
const darkShadowColorStrong = "rgba(0,0,0,0.3)";
|
|
96
|
+
const lightShadows = {
|
|
97
|
+
shadowColor: lightShadowColorStrong,
|
|
98
|
+
shadowColorHover: lightShadowColorStrong,
|
|
99
|
+
shadowColorPress: lightShadowColor,
|
|
100
|
+
shadowColorFocus: lightShadowColor
|
|
101
|
+
};
|
|
102
|
+
const darkShadows = {
|
|
103
|
+
shadowColor: darkShadowColorStrong,
|
|
104
|
+
shadowColorHover: darkShadowColorStrong,
|
|
105
|
+
shadowColorPress: darkShadowColor,
|
|
106
|
+
shadowColorFocus: darkShadowColor
|
|
107
|
+
};
|
|
108
|
+
const lightTemplate = {
|
|
109
|
+
...template,
|
|
110
|
+
// our light color palette is... a bit unique
|
|
111
|
+
borderColor: 6,
|
|
112
|
+
borderColorHover: 7,
|
|
113
|
+
borderColorFocus: 5,
|
|
114
|
+
borderColorPress: 6,
|
|
115
|
+
...lightShadows
|
|
116
|
+
};
|
|
117
|
+
const darkTemplate = { ...template, ...darkShadows };
|
|
118
|
+
const light = createTheme(palettes.light, lightTemplate);
|
|
119
|
+
const dark = createTheme(palettes.dark, darkTemplate);
|
|
120
|
+
const baseThemes = {
|
|
121
|
+
light,
|
|
122
|
+
dark
|
|
123
|
+
};
|
|
124
|
+
const masks = {
|
|
125
|
+
weaker: createWeakenMask(),
|
|
126
|
+
stronger: createStrengthenMask()
|
|
127
|
+
};
|
|
128
|
+
const maskOptions = {
|
|
129
|
+
skip,
|
|
130
|
+
// avoids the transparent ends
|
|
131
|
+
max: palettes.light.length - 2,
|
|
132
|
+
min: 1
|
|
133
|
+
};
|
|
134
|
+
const allThemes = addChildren(baseThemes, (name, theme) => {
|
|
135
|
+
const isLight = name === "light";
|
|
136
|
+
const inverseName = isLight ? "dark" : "light";
|
|
137
|
+
const inverseTheme = baseThemes[inverseName];
|
|
138
|
+
const transparent = (hsl, opacity = 0) => hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`);
|
|
139
|
+
const [colorThemes, inverseColorThemes] = [
|
|
140
|
+
colorTokens[name],
|
|
141
|
+
colorTokens[inverseName]
|
|
142
|
+
].map((colorSet) => {
|
|
143
|
+
return Object.fromEntries(
|
|
144
|
+
Object.keys(colorSet).map((color) => {
|
|
145
|
+
const colorPalette = Object.values(colorSet[color]);
|
|
146
|
+
const [head, tail] = [
|
|
147
|
+
colorPalette.slice(0, 6),
|
|
148
|
+
colorPalette.slice(colorPalette.length - 5)
|
|
149
|
+
];
|
|
150
|
+
const palette = [
|
|
151
|
+
transparent(colorPalette[0]),
|
|
152
|
+
...head,
|
|
153
|
+
...tail,
|
|
154
|
+
theme.color,
|
|
155
|
+
transparent(colorPalette[colorPalette.length - 1])
|
|
156
|
+
];
|
|
157
|
+
const colorTheme = createTheme(
|
|
158
|
+
palette,
|
|
159
|
+
isLight ? {
|
|
160
|
+
...lightTemplate,
|
|
161
|
+
// light color themes are a bit less sensitive
|
|
162
|
+
borderColor: 4,
|
|
163
|
+
borderColorHover: 5,
|
|
164
|
+
borderColorFocus: 4,
|
|
165
|
+
borderColorPress: 4
|
|
166
|
+
} : darkTemplate
|
|
167
|
+
);
|
|
168
|
+
return [color, colorTheme];
|
|
169
|
+
})
|
|
170
|
+
);
|
|
171
|
+
});
|
|
172
|
+
const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {
|
|
173
|
+
const inverse = inverseColorThemes[colorName];
|
|
174
|
+
return {
|
|
175
|
+
...getAltThemes(colorTheme, inverse),
|
|
176
|
+
...getComponentThemes(colorTheme, inverse)
|
|
177
|
+
};
|
|
178
|
+
});
|
|
179
|
+
const baseActiveTheme = applyMask(colorThemes.blue, masks.weaker, {
|
|
180
|
+
...maskOptions,
|
|
181
|
+
strength: 4
|
|
182
|
+
});
|
|
183
|
+
const baseSubThemes = {
|
|
184
|
+
...getAltThemes(theme, inverseTheme, baseActiveTheme),
|
|
185
|
+
...getComponentThemes(theme, inverseTheme)
|
|
186
|
+
};
|
|
187
|
+
return {
|
|
188
|
+
...baseSubThemes,
|
|
189
|
+
...allColorThemes
|
|
190
|
+
};
|
|
191
|
+
function getAltThemes(theme2, inverse, activeTheme) {
|
|
192
|
+
const maskOptionsAlt = {
|
|
193
|
+
...maskOptions,
|
|
194
|
+
skip: templateShadows
|
|
195
|
+
};
|
|
196
|
+
const alt1 = applyMask(theme2, masks.weaker, maskOptionsAlt);
|
|
197
|
+
const alt2 = applyMask(alt1, masks.weaker, maskOptionsAlt);
|
|
198
|
+
const active = activeTheme ?? applyMask(theme2, masks.weaker, {
|
|
199
|
+
...maskOptions,
|
|
200
|
+
strength: 4
|
|
201
|
+
});
|
|
202
|
+
return addChildren({ alt1, alt2, active }, (_, subTheme) => {
|
|
203
|
+
return getComponentThemes(subTheme, subTheme === inverse ? theme2 : inverse);
|
|
204
|
+
});
|
|
205
|
+
}
|
|
206
|
+
function getComponentThemes(theme2, inverse) {
|
|
207
|
+
const weaker1 = applyMask(theme2, masks.weaker, maskOptions);
|
|
208
|
+
const weaker2 = applyMask(weaker1, masks.weaker, maskOptions);
|
|
209
|
+
const stronger1 = applyMask(theme2, masks.stronger, maskOptions);
|
|
210
|
+
const inverse1 = applyMask(inverse, masks.weaker, maskOptions);
|
|
211
|
+
const inverse2 = applyMask(inverse1, masks.weaker, maskOptions);
|
|
212
|
+
const strongerBorderLighterBackground = isLight ? {
|
|
213
|
+
...stronger1,
|
|
214
|
+
borderColor: weaker1.borderColor,
|
|
215
|
+
borderColorHover: weaker1.borderColorHover,
|
|
216
|
+
borderColorPress: weaker1.borderColorPress,
|
|
217
|
+
borderColorFocus: weaker1.borderColorFocus
|
|
218
|
+
} : {
|
|
219
|
+
...theme2,
|
|
220
|
+
borderColor: weaker1.borderColor,
|
|
221
|
+
borderColorHover: weaker1.borderColorHover,
|
|
222
|
+
borderColorPress: weaker1.borderColorPress,
|
|
223
|
+
borderColorFocus: weaker1.borderColorFocus
|
|
224
|
+
};
|
|
225
|
+
return {
|
|
226
|
+
Card: weaker1,
|
|
227
|
+
Button: weaker2,
|
|
228
|
+
Checkbox: weaker2,
|
|
229
|
+
DrawerFrame: weaker1,
|
|
230
|
+
SliderTrack: stronger1,
|
|
231
|
+
SliderTrackActive: weaker2,
|
|
232
|
+
SliderThumb: inverse1,
|
|
233
|
+
Progress: weaker1,
|
|
234
|
+
ProgressIndicator: inverse,
|
|
235
|
+
Switch: weaker2,
|
|
236
|
+
SwitchThumb: inverse2,
|
|
237
|
+
TooltipArrow: weaker1,
|
|
238
|
+
TooltipContent: weaker2,
|
|
239
|
+
Input: strongerBorderLighterBackground,
|
|
240
|
+
TextArea: strongerBorderLighterBackground,
|
|
241
|
+
Tooltip: inverse1
|
|
242
|
+
};
|
|
243
|
+
}
|
|
244
|
+
});
|
|
245
|
+
const themes = {
|
|
246
|
+
...allThemes,
|
|
247
|
+
// bring back the full type, the rest use a subset to avoid clogging up ts,
|
|
248
|
+
// tamagui will be smart and use the top level themes as the type for useTheme() etc
|
|
249
|
+
light: createTheme(palettes.light, lightTemplate, { nonInheritedValues: lightColors }),
|
|
250
|
+
dark: createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })
|
|
251
|
+
};
|
|
252
|
+
export {
|
|
253
|
+
themes
|
|
254
|
+
};
|
|
2
255
|
//# sourceMappingURL=themes.js.map
|
package/dist/esm/themes.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/themes.tsx"],
|
|
4
4
|
"sourcesContent": ["import {\n MaskOptions,\n addChildren,\n applyMask,\n createStrengthenMask,\n createTheme,\n createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n dark: [\n darkTransparent,\n '#050505',\n '#151515',\n '#191919',\n '#232323',\n '#282828',\n '#323232',\n '#424242',\n '#494949',\n '#545454',\n '#626262',\n '#a5a5a5',\n '#fff',\n lightTransparent,\n ],\n light: [\n lightTransparent,\n '#fff',\n '#f9f9f9',\n 'hsl(0, 0%, 97.3%)',\n 'hsl(0, 0%, 95.1%)',\n 'hsl(0, 0%, 94.0%)',\n 'hsl(0, 0%, 92.0%)',\n 'hsl(0, 0%, 89.5%)',\n 'hsl(0, 0%, 81.0%)',\n 'hsl(0, 0%, 56.1%)',\n 'hsl(0, 0%, 50.3%)',\n 'hsl(0, 0%, 42.5%)',\n 'hsl(0, 0%, 9.0%)',\n darkTransparent,\n ],\n}\n\nconst templateColors = {\n color1: 1,\n color2: 2,\n color3: 3,\n color4: 4,\n color5: 5,\n color6: 6,\n color7: 7,\n color8: 8,\n color9: 9,\n color10: 10,\n color11: 11,\n color12: 12,\n}\n\nconst templateShadows = {\n shadowColor: 1,\n shadowColorHover: 1,\n shadowColorPress: 2,\n shadowColorFocus: 2,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n ...templateColors,\n ...templateShadows,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n ...skip,\n // the background, color, etc keys here work like generics - they make it so you\n // can publish components for others to use without mandating a specific color scale\n // the @tamagui/button Button component looks for `$background`, so you set the\n // dark_red_Button theme to have a stronger background than the dark_red theme.\n background: 2,\n backgroundHover: 3,\n backgroundPress: 1,\n backgroundFocus: 2,\n backgroundStrong: 1,\n backgroundTransparent: 0,\n color: -1,\n colorHover: -2,\n colorPress: -1,\n colorFocus: -2,\n colorTransparent: -0,\n borderColor: 4,\n borderColorHover: 5,\n borderColorPress: 3,\n borderColorFocus: 4,\n placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.02)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.066)'\nconst darkShadowColor = 'rgba(0,0,0,0.2)'\nconst darkShadowColorStrong = 'rgba(0,0,0,0.3)'\n\nconst lightShadows = {\n shadowColor: lightShadowColorStrong,\n shadowColorHover: lightShadowColorStrong,\n shadowColorPress: lightShadowColor,\n shadowColorFocus: lightShadowColor,\n}\n\nconst darkShadows = {\n shadowColor: darkShadowColorStrong,\n shadowColorHover: darkShadowColorStrong,\n shadowColorPress: darkShadowColor,\n shadowColorFocus: darkShadowColor,\n}\n\nconst lightTemplate = {\n ...template,\n // our light color palette is... a bit unique\n borderColor: 6,\n borderColorHover: 7,\n borderColorFocus: 5,\n borderColorPress: 6,\n ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate)\nconst dark = createTheme(palettes.dark, darkTemplate)\n\ntype SubTheme = typeof light\n\nconst baseThemes: {\n light: SubTheme\n dark: SubTheme\n} = {\n light,\n dark,\n}\n\nconst masks = {\n weaker: createWeakenMask(),\n stronger: createStrengthenMask(),\n}\n\n// default mask options for most uses\nconst maskOptions: MaskOptions = {\n skip,\n // avoids the transparent ends\n max: palettes.light.length - 2,\n min: 1,\n}\n\nconst allThemes = addChildren(baseThemes, (name, theme) => {\n const isLight = name === 'light'\n const inverseName = isLight ? 'dark' : 'light'\n const inverseTheme = baseThemes[inverseName]\n const transparent = (hsl: string, opacity = 0) =>\n hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)\n\n // setup colorThemes and their inverses\n const [colorThemes, inverseColorThemes] = [\n colorTokens[name],\n colorTokens[inverseName],\n ].map((colorSet) => {\n return Object.fromEntries(\n Object.keys(colorSet).map((color) => {\n const colorPalette = Object.values(colorSet[color]) as string[]\n // were re-ordering these\n const [head, tail] = [\n colorPalette.slice(0, 6),\n colorPalette.slice(colorPalette.length - 5),\n ]\n // add our transparent colors first/last\n // and make sure the last (foreground) color is white/black rather than colorful\n // this is mostly for consistency with the older theme-base\n const palette = [\n transparent(colorPalette[0]),\n ...head,\n ...tail,\n theme.color,\n transparent(colorPalette[colorPalette.length - 1]),\n ]\n const colorTheme = createTheme(\n palette,\n isLight\n ? {\n ...lightTemplate,\n // light color themes are a bit less sensitive\n borderColor: 4,\n borderColorHover: 5,\n borderColorFocus: 4,\n borderColorPress: 4,\n }\n : darkTemplate\n )\n return [color, colorTheme]\n })\n ) as Record<ColorName, SubTheme>\n })\n\n const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {\n const inverse = inverseColorThemes[colorName]\n return {\n ...getAltThemes(colorTheme, inverse),\n ...getComponentThemes(colorTheme, inverse),\n }\n })\n\n const baseActiveTheme = applyMask(colorThemes.blue, masks.weaker, {\n ...maskOptions,\n strength: 4,\n })\n\n const baseSubThemes = {\n ...getAltThemes(theme, inverseTheme, baseActiveTheme),\n ...getComponentThemes(theme, inverseTheme),\n }\n\n return {\n ...baseSubThemes,\n ...allColorThemes,\n }\n\n function getAltThemes(theme: SubTheme, inverse: SubTheme, activeTheme?: SubTheme) {\n const maskOptionsAlt = {\n ...maskOptions,\n skip: templateShadows,\n }\n const alt1 = applyMask(theme, masks.weaker, maskOptionsAlt)\n const alt2 = applyMask(alt1, masks.weaker, maskOptionsAlt)\n const active =\n activeTheme ??\n applyMask(theme, masks.weaker, {\n ...maskOptions,\n strength: 4,\n })\n return addChildren({ alt1, alt2, active }, (_, subTheme) => {\n return getComponentThemes(subTheme, subTheme === inverse ? theme : inverse)\n })\n }\n\n function getComponentThemes(theme: SubTheme, inverse: SubTheme) {\n const weaker1 = applyMask(theme, masks.weaker, maskOptions)\n const weaker2 = applyMask(weaker1, masks.weaker, maskOptions)\n const stronger1 = applyMask(theme, masks.stronger, maskOptions)\n const inverse1 = applyMask(inverse, masks.weaker, maskOptions)\n const inverse2 = applyMask(inverse1, masks.weaker, maskOptions)\n const strongerBorderLighterBackground: SubTheme = isLight\n ? {\n ...stronger1,\n borderColor: weaker1.borderColor,\n borderColorHover: weaker1.borderColorHover,\n borderColorPress: weaker1.borderColorPress,\n borderColorFocus: weaker1.borderColorFocus,\n }\n : {\n ...theme,\n borderColor: weaker1.borderColor,\n borderColorHover: weaker1.borderColorHover,\n borderColorPress: weaker1.borderColorPress,\n borderColorFocus: weaker1.borderColorFocus,\n }\n return {\n Card: weaker1,\n Button: weaker2,\n Checkbox: weaker2,\n DrawerFrame: weaker1,\n SliderTrack: stronger1,\n SliderTrackActive: weaker2,\n SliderThumb: inverse1,\n Progress: weaker1,\n ProgressIndicator: inverse,\n Switch: weaker2,\n SwitchThumb: inverse2,\n TooltipArrow: weaker1,\n TooltipContent: weaker2,\n Input: strongerBorderLighterBackground,\n TextArea: strongerBorderLighterBackground,\n Tooltip: inverse1,\n }\n }\n})\n\nexport const themes = {\n ...allThemes,\n // bring back the full type, the rest use a subset to avoid clogging up ts,\n // tamagui will be smart and use the top level themes as the type for useTheme() etc\n light: createTheme(palettes.light, lightTemplate, { nonInheritedValues: lightColors }),\n dark: createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors }),\n}\n\n// if (process.env.NODE_ENV === 'development') {\n// console.log(JSON.stringify(themes).length)\n// }\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": ["
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["theme"]
|
|
7
7
|
}
|
package/dist/esm/themes.mjs
CHANGED
|
@@ -1,2 +1,255 @@
|
|
|
1
|
-
import
|
|
1
|
+
import {
|
|
2
|
+
addChildren,
|
|
3
|
+
applyMask,
|
|
4
|
+
createStrengthenMask,
|
|
5
|
+
createTheme,
|
|
6
|
+
createWeakenMask
|
|
7
|
+
} from "@tamagui/create-theme";
|
|
8
|
+
import { colorTokens, darkColors, lightColors } from "./tokens";
|
|
9
|
+
const lightTransparent = "rgba(255,255,255,0)";
|
|
10
|
+
const darkTransparent = "rgba(10,10,10,0)";
|
|
11
|
+
const palettes = {
|
|
12
|
+
dark: [
|
|
13
|
+
darkTransparent,
|
|
14
|
+
"#050505",
|
|
15
|
+
"#151515",
|
|
16
|
+
"#191919",
|
|
17
|
+
"#232323",
|
|
18
|
+
"#282828",
|
|
19
|
+
"#323232",
|
|
20
|
+
"#424242",
|
|
21
|
+
"#494949",
|
|
22
|
+
"#545454",
|
|
23
|
+
"#626262",
|
|
24
|
+
"#a5a5a5",
|
|
25
|
+
"#fff",
|
|
26
|
+
lightTransparent
|
|
27
|
+
],
|
|
28
|
+
light: [
|
|
29
|
+
lightTransparent,
|
|
30
|
+
"#fff",
|
|
31
|
+
"#f9f9f9",
|
|
32
|
+
"hsl(0, 0%, 97.3%)",
|
|
33
|
+
"hsl(0, 0%, 95.1%)",
|
|
34
|
+
"hsl(0, 0%, 94.0%)",
|
|
35
|
+
"hsl(0, 0%, 92.0%)",
|
|
36
|
+
"hsl(0, 0%, 89.5%)",
|
|
37
|
+
"hsl(0, 0%, 81.0%)",
|
|
38
|
+
"hsl(0, 0%, 56.1%)",
|
|
39
|
+
"hsl(0, 0%, 50.3%)",
|
|
40
|
+
"hsl(0, 0%, 42.5%)",
|
|
41
|
+
"hsl(0, 0%, 9.0%)",
|
|
42
|
+
darkTransparent
|
|
43
|
+
]
|
|
44
|
+
};
|
|
45
|
+
const templateColors = {
|
|
46
|
+
color1: 1,
|
|
47
|
+
color2: 2,
|
|
48
|
+
color3: 3,
|
|
49
|
+
color4: 4,
|
|
50
|
+
color5: 5,
|
|
51
|
+
color6: 6,
|
|
52
|
+
color7: 7,
|
|
53
|
+
color8: 8,
|
|
54
|
+
color9: 9,
|
|
55
|
+
color10: 10,
|
|
56
|
+
color11: 11,
|
|
57
|
+
color12: 12
|
|
58
|
+
};
|
|
59
|
+
const templateShadows = {
|
|
60
|
+
shadowColor: 1,
|
|
61
|
+
shadowColorHover: 1,
|
|
62
|
+
shadowColorPress: 2,
|
|
63
|
+
shadowColorFocus: 2
|
|
64
|
+
};
|
|
65
|
+
const skip = {
|
|
66
|
+
...templateColors,
|
|
67
|
+
...templateShadows
|
|
68
|
+
};
|
|
69
|
+
const template = {
|
|
70
|
+
...skip,
|
|
71
|
+
// the background, color, etc keys here work like generics - they make it so you
|
|
72
|
+
// can publish components for others to use without mandating a specific color scale
|
|
73
|
+
// the @tamagui/button Button component looks for `$background`, so you set the
|
|
74
|
+
// dark_red_Button theme to have a stronger background than the dark_red theme.
|
|
75
|
+
background: 2,
|
|
76
|
+
backgroundHover: 3,
|
|
77
|
+
backgroundPress: 1,
|
|
78
|
+
backgroundFocus: 2,
|
|
79
|
+
backgroundStrong: 1,
|
|
80
|
+
backgroundTransparent: 0,
|
|
81
|
+
color: -1,
|
|
82
|
+
colorHover: -2,
|
|
83
|
+
colorPress: -1,
|
|
84
|
+
colorFocus: -2,
|
|
85
|
+
colorTransparent: -0,
|
|
86
|
+
borderColor: 4,
|
|
87
|
+
borderColorHover: 5,
|
|
88
|
+
borderColorPress: 3,
|
|
89
|
+
borderColorFocus: 4,
|
|
90
|
+
placeholderColor: -4
|
|
91
|
+
};
|
|
92
|
+
const lightShadowColor = "rgba(0,0,0,0.02)";
|
|
93
|
+
const lightShadowColorStrong = "rgba(0,0,0,0.066)";
|
|
94
|
+
const darkShadowColor = "rgba(0,0,0,0.2)";
|
|
95
|
+
const darkShadowColorStrong = "rgba(0,0,0,0.3)";
|
|
96
|
+
const lightShadows = {
|
|
97
|
+
shadowColor: lightShadowColorStrong,
|
|
98
|
+
shadowColorHover: lightShadowColorStrong,
|
|
99
|
+
shadowColorPress: lightShadowColor,
|
|
100
|
+
shadowColorFocus: lightShadowColor
|
|
101
|
+
};
|
|
102
|
+
const darkShadows = {
|
|
103
|
+
shadowColor: darkShadowColorStrong,
|
|
104
|
+
shadowColorHover: darkShadowColorStrong,
|
|
105
|
+
shadowColorPress: darkShadowColor,
|
|
106
|
+
shadowColorFocus: darkShadowColor
|
|
107
|
+
};
|
|
108
|
+
const lightTemplate = {
|
|
109
|
+
...template,
|
|
110
|
+
// our light color palette is... a bit unique
|
|
111
|
+
borderColor: 6,
|
|
112
|
+
borderColorHover: 7,
|
|
113
|
+
borderColorFocus: 5,
|
|
114
|
+
borderColorPress: 6,
|
|
115
|
+
...lightShadows
|
|
116
|
+
};
|
|
117
|
+
const darkTemplate = { ...template, ...darkShadows };
|
|
118
|
+
const light = createTheme(palettes.light, lightTemplate);
|
|
119
|
+
const dark = createTheme(palettes.dark, darkTemplate);
|
|
120
|
+
const baseThemes = {
|
|
121
|
+
light,
|
|
122
|
+
dark
|
|
123
|
+
};
|
|
124
|
+
const masks = {
|
|
125
|
+
weaker: createWeakenMask(),
|
|
126
|
+
stronger: createStrengthenMask()
|
|
127
|
+
};
|
|
128
|
+
const maskOptions = {
|
|
129
|
+
skip,
|
|
130
|
+
// avoids the transparent ends
|
|
131
|
+
max: palettes.light.length - 2,
|
|
132
|
+
min: 1
|
|
133
|
+
};
|
|
134
|
+
const allThemes = addChildren(baseThemes, (name, theme) => {
|
|
135
|
+
const isLight = name === "light";
|
|
136
|
+
const inverseName = isLight ? "dark" : "light";
|
|
137
|
+
const inverseTheme = baseThemes[inverseName];
|
|
138
|
+
const transparent = (hsl, opacity = 0) => hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`);
|
|
139
|
+
const [colorThemes, inverseColorThemes] = [
|
|
140
|
+
colorTokens[name],
|
|
141
|
+
colorTokens[inverseName]
|
|
142
|
+
].map((colorSet) => {
|
|
143
|
+
return Object.fromEntries(
|
|
144
|
+
Object.keys(colorSet).map((color) => {
|
|
145
|
+
const colorPalette = Object.values(colorSet[color]);
|
|
146
|
+
const [head, tail] = [
|
|
147
|
+
colorPalette.slice(0, 6),
|
|
148
|
+
colorPalette.slice(colorPalette.length - 5)
|
|
149
|
+
];
|
|
150
|
+
const palette = [
|
|
151
|
+
transparent(colorPalette[0]),
|
|
152
|
+
...head,
|
|
153
|
+
...tail,
|
|
154
|
+
theme.color,
|
|
155
|
+
transparent(colorPalette[colorPalette.length - 1])
|
|
156
|
+
];
|
|
157
|
+
const colorTheme = createTheme(
|
|
158
|
+
palette,
|
|
159
|
+
isLight ? {
|
|
160
|
+
...lightTemplate,
|
|
161
|
+
// light color themes are a bit less sensitive
|
|
162
|
+
borderColor: 4,
|
|
163
|
+
borderColorHover: 5,
|
|
164
|
+
borderColorFocus: 4,
|
|
165
|
+
borderColorPress: 4
|
|
166
|
+
} : darkTemplate
|
|
167
|
+
);
|
|
168
|
+
return [color, colorTheme];
|
|
169
|
+
})
|
|
170
|
+
);
|
|
171
|
+
});
|
|
172
|
+
const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {
|
|
173
|
+
const inverse = inverseColorThemes[colorName];
|
|
174
|
+
return {
|
|
175
|
+
...getAltThemes(colorTheme, inverse),
|
|
176
|
+
...getComponentThemes(colorTheme, inverse)
|
|
177
|
+
};
|
|
178
|
+
});
|
|
179
|
+
const baseActiveTheme = applyMask(colorThemes.blue, masks.weaker, {
|
|
180
|
+
...maskOptions,
|
|
181
|
+
strength: 4
|
|
182
|
+
});
|
|
183
|
+
const baseSubThemes = {
|
|
184
|
+
...getAltThemes(theme, inverseTheme, baseActiveTheme),
|
|
185
|
+
...getComponentThemes(theme, inverseTheme)
|
|
186
|
+
};
|
|
187
|
+
return {
|
|
188
|
+
...baseSubThemes,
|
|
189
|
+
...allColorThemes
|
|
190
|
+
};
|
|
191
|
+
function getAltThemes(theme2, inverse, activeTheme) {
|
|
192
|
+
const maskOptionsAlt = {
|
|
193
|
+
...maskOptions,
|
|
194
|
+
skip: templateShadows
|
|
195
|
+
};
|
|
196
|
+
const alt1 = applyMask(theme2, masks.weaker, maskOptionsAlt);
|
|
197
|
+
const alt2 = applyMask(alt1, masks.weaker, maskOptionsAlt);
|
|
198
|
+
const active = activeTheme ?? applyMask(theme2, masks.weaker, {
|
|
199
|
+
...maskOptions,
|
|
200
|
+
strength: 4
|
|
201
|
+
});
|
|
202
|
+
return addChildren({ alt1, alt2, active }, (_, subTheme) => {
|
|
203
|
+
return getComponentThemes(subTheme, subTheme === inverse ? theme2 : inverse);
|
|
204
|
+
});
|
|
205
|
+
}
|
|
206
|
+
function getComponentThemes(theme2, inverse) {
|
|
207
|
+
const weaker1 = applyMask(theme2, masks.weaker, maskOptions);
|
|
208
|
+
const weaker2 = applyMask(weaker1, masks.weaker, maskOptions);
|
|
209
|
+
const stronger1 = applyMask(theme2, masks.stronger, maskOptions);
|
|
210
|
+
const inverse1 = applyMask(inverse, masks.weaker, maskOptions);
|
|
211
|
+
const inverse2 = applyMask(inverse1, masks.weaker, maskOptions);
|
|
212
|
+
const strongerBorderLighterBackground = isLight ? {
|
|
213
|
+
...stronger1,
|
|
214
|
+
borderColor: weaker1.borderColor,
|
|
215
|
+
borderColorHover: weaker1.borderColorHover,
|
|
216
|
+
borderColorPress: weaker1.borderColorPress,
|
|
217
|
+
borderColorFocus: weaker1.borderColorFocus
|
|
218
|
+
} : {
|
|
219
|
+
...theme2,
|
|
220
|
+
borderColor: weaker1.borderColor,
|
|
221
|
+
borderColorHover: weaker1.borderColorHover,
|
|
222
|
+
borderColorPress: weaker1.borderColorPress,
|
|
223
|
+
borderColorFocus: weaker1.borderColorFocus
|
|
224
|
+
};
|
|
225
|
+
return {
|
|
226
|
+
Card: weaker1,
|
|
227
|
+
Button: weaker2,
|
|
228
|
+
Checkbox: weaker2,
|
|
229
|
+
DrawerFrame: weaker1,
|
|
230
|
+
SliderTrack: stronger1,
|
|
231
|
+
SliderTrackActive: weaker2,
|
|
232
|
+
SliderThumb: inverse1,
|
|
233
|
+
Progress: weaker1,
|
|
234
|
+
ProgressIndicator: inverse,
|
|
235
|
+
Switch: weaker2,
|
|
236
|
+
SwitchThumb: inverse2,
|
|
237
|
+
TooltipArrow: weaker1,
|
|
238
|
+
TooltipContent: weaker2,
|
|
239
|
+
Input: strongerBorderLighterBackground,
|
|
240
|
+
TextArea: strongerBorderLighterBackground,
|
|
241
|
+
Tooltip: inverse1
|
|
242
|
+
};
|
|
243
|
+
}
|
|
244
|
+
});
|
|
245
|
+
const themes = {
|
|
246
|
+
...allThemes,
|
|
247
|
+
// bring back the full type, the rest use a subset to avoid clogging up ts,
|
|
248
|
+
// tamagui will be smart and use the top level themes as the type for useTheme() etc
|
|
249
|
+
light: createTheme(palettes.light, lightTemplate, { nonInheritedValues: lightColors }),
|
|
250
|
+
dark: createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })
|
|
251
|
+
};
|
|
252
|
+
export {
|
|
253
|
+
themes
|
|
254
|
+
};
|
|
2
255
|
//# sourceMappingURL=themes.mjs.map
|
package/dist/esm/themes.mjs.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/themes.tsx"],
|
|
4
4
|
"sourcesContent": ["import {\n MaskOptions,\n addChildren,\n applyMask,\n createStrengthenMask,\n createTheme,\n createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n dark: [\n darkTransparent,\n '#050505',\n '#151515',\n '#191919',\n '#232323',\n '#282828',\n '#323232',\n '#424242',\n '#494949',\n '#545454',\n '#626262',\n '#a5a5a5',\n '#fff',\n lightTransparent,\n ],\n light: [\n lightTransparent,\n '#fff',\n '#f9f9f9',\n 'hsl(0, 0%, 97.3%)',\n 'hsl(0, 0%, 95.1%)',\n 'hsl(0, 0%, 94.0%)',\n 'hsl(0, 0%, 92.0%)',\n 'hsl(0, 0%, 89.5%)',\n 'hsl(0, 0%, 81.0%)',\n 'hsl(0, 0%, 56.1%)',\n 'hsl(0, 0%, 50.3%)',\n 'hsl(0, 0%, 42.5%)',\n 'hsl(0, 0%, 9.0%)',\n darkTransparent,\n ],\n}\n\nconst templateColors = {\n color1: 1,\n color2: 2,\n color3: 3,\n color4: 4,\n color5: 5,\n color6: 6,\n color7: 7,\n color8: 8,\n color9: 9,\n color10: 10,\n color11: 11,\n color12: 12,\n}\n\nconst templateShadows = {\n shadowColor: 1,\n shadowColorHover: 1,\n shadowColorPress: 2,\n shadowColorFocus: 2,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n ...templateColors,\n ...templateShadows,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n ...skip,\n // the background, color, etc keys here work like generics - they make it so you\n // can publish components for others to use without mandating a specific color scale\n // the @tamagui/button Button component looks for `$background`, so you set the\n // dark_red_Button theme to have a stronger background than the dark_red theme.\n background: 2,\n backgroundHover: 3,\n backgroundPress: 1,\n backgroundFocus: 2,\n backgroundStrong: 1,\n backgroundTransparent: 0,\n color: -1,\n colorHover: -2,\n colorPress: -1,\n colorFocus: -2,\n colorTransparent: -0,\n borderColor: 4,\n borderColorHover: 5,\n borderColorPress: 3,\n borderColorFocus: 4,\n placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.02)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.066)'\nconst darkShadowColor = 'rgba(0,0,0,0.2)'\nconst darkShadowColorStrong = 'rgba(0,0,0,0.3)'\n\nconst lightShadows = {\n shadowColor: lightShadowColorStrong,\n shadowColorHover: lightShadowColorStrong,\n shadowColorPress: lightShadowColor,\n shadowColorFocus: lightShadowColor,\n}\n\nconst darkShadows = {\n shadowColor: darkShadowColorStrong,\n shadowColorHover: darkShadowColorStrong,\n shadowColorPress: darkShadowColor,\n shadowColorFocus: darkShadowColor,\n}\n\nconst lightTemplate = {\n ...template,\n // our light color palette is... a bit unique\n borderColor: 6,\n borderColorHover: 7,\n borderColorFocus: 5,\n borderColorPress: 6,\n ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate)\nconst dark = createTheme(palettes.dark, darkTemplate)\n\ntype SubTheme = typeof light\n\nconst baseThemes: {\n light: SubTheme\n dark: SubTheme\n} = {\n light,\n dark,\n}\n\nconst masks = {\n weaker: createWeakenMask(),\n stronger: createStrengthenMask(),\n}\n\n// default mask options for most uses\nconst maskOptions: MaskOptions = {\n skip,\n // avoids the transparent ends\n max: palettes.light.length - 2,\n min: 1,\n}\n\nconst allThemes = addChildren(baseThemes, (name, theme) => {\n const isLight = name === 'light'\n const inverseName = isLight ? 'dark' : 'light'\n const inverseTheme = baseThemes[inverseName]\n const transparent = (hsl: string, opacity = 0) =>\n hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)\n\n // setup colorThemes and their inverses\n const [colorThemes, inverseColorThemes] = [\n colorTokens[name],\n colorTokens[inverseName],\n ].map((colorSet) => {\n return Object.fromEntries(\n Object.keys(colorSet).map((color) => {\n const colorPalette = Object.values(colorSet[color]) as string[]\n // were re-ordering these\n const [head, tail] = [\n colorPalette.slice(0, 6),\n colorPalette.slice(colorPalette.length - 5),\n ]\n // add our transparent colors first/last\n // and make sure the last (foreground) color is white/black rather than colorful\n // this is mostly for consistency with the older theme-base\n const palette = [\n transparent(colorPalette[0]),\n ...head,\n ...tail,\n theme.color,\n transparent(colorPalette[colorPalette.length - 1]),\n ]\n const colorTheme = createTheme(\n palette,\n isLight\n ? {\n ...lightTemplate,\n // light color themes are a bit less sensitive\n borderColor: 4,\n borderColorHover: 5,\n borderColorFocus: 4,\n borderColorPress: 4,\n }\n : darkTemplate\n )\n return [color, colorTheme]\n })\n ) as Record<ColorName, SubTheme>\n })\n\n const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {\n const inverse = inverseColorThemes[colorName]\n return {\n ...getAltThemes(colorTheme, inverse),\n ...getComponentThemes(colorTheme, inverse),\n }\n })\n\n const baseActiveTheme = applyMask(colorThemes.blue, masks.weaker, {\n ...maskOptions,\n strength: 4,\n })\n\n const baseSubThemes = {\n ...getAltThemes(theme, inverseTheme, baseActiveTheme),\n ...getComponentThemes(theme, inverseTheme),\n }\n\n return {\n ...baseSubThemes,\n ...allColorThemes,\n }\n\n function getAltThemes(theme: SubTheme, inverse: SubTheme, activeTheme?: SubTheme) {\n const maskOptionsAlt = {\n ...maskOptions,\n skip: templateShadows,\n }\n const alt1 = applyMask(theme, masks.weaker, maskOptionsAlt)\n const alt2 = applyMask(alt1, masks.weaker, maskOptionsAlt)\n const active =\n activeTheme ??\n applyMask(theme, masks.weaker, {\n ...maskOptions,\n strength: 4,\n })\n return addChildren({ alt1, alt2, active }, (_, subTheme) => {\n return getComponentThemes(subTheme, subTheme === inverse ? theme : inverse)\n })\n }\n\n function getComponentThemes(theme: SubTheme, inverse: SubTheme) {\n const weaker1 = applyMask(theme, masks.weaker, maskOptions)\n const weaker2 = applyMask(weaker1, masks.weaker, maskOptions)\n const stronger1 = applyMask(theme, masks.stronger, maskOptions)\n const inverse1 = applyMask(inverse, masks.weaker, maskOptions)\n const inverse2 = applyMask(inverse1, masks.weaker, maskOptions)\n const strongerBorderLighterBackground: SubTheme = isLight\n ? {\n ...stronger1,\n borderColor: weaker1.borderColor,\n borderColorHover: weaker1.borderColorHover,\n borderColorPress: weaker1.borderColorPress,\n borderColorFocus: weaker1.borderColorFocus,\n }\n : {\n ...theme,\n borderColor: weaker1.borderColor,\n borderColorHover: weaker1.borderColorHover,\n borderColorPress: weaker1.borderColorPress,\n borderColorFocus: weaker1.borderColorFocus,\n }\n return {\n Card: weaker1,\n Button: weaker2,\n Checkbox: weaker2,\n DrawerFrame: weaker1,\n SliderTrack: stronger1,\n SliderTrackActive: weaker2,\n SliderThumb: inverse1,\n Progress: weaker1,\n ProgressIndicator: inverse,\n Switch: weaker2,\n SwitchThumb: inverse2,\n TooltipArrow: weaker1,\n TooltipContent: weaker2,\n Input: strongerBorderLighterBackground,\n TextArea: strongerBorderLighterBackground,\n Tooltip: inverse1,\n }\n }\n})\n\nexport const themes = {\n ...allThemes,\n // bring back the full type, the rest use a subset to avoid clogging up ts,\n // tamagui will be smart and use the top level themes as the type for useTheme() etc\n light: createTheme(palettes.light, lightTemplate, { nonInheritedValues: lightColors }),\n dark: createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors }),\n}\n\n// if (process.env.NODE_ENV === 'development') {\n// console.log(JSON.stringify(themes).length)\n// }\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": ["
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["theme"]
|
|
7
7
|
}
|