@tamagui/themes 1.14.8 → 1.15.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.
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/themes.js +94 -74
- package/dist/cjs/themes.js.map +3 -3
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/index.mjs.map +2 -2
- package/dist/esm/themes.js +96 -75
- package/dist/esm/themes.js.map +3 -3
- package/dist/esm/themes.mjs +96 -75
- package/dist/esm/themes.mjs.map +3 -3
- package/package.json +13 -7
- package/src/generate.ts +25 -0
- package/src/generated.js +23954 -0
- package/src/index.tsx +8 -0
- package/src/themes.tsx +117 -82
- package/types/generate.d.ts +2 -0
- package/types/index.d.ts.map +1 -1
- package/types/themes.d.ts +7460 -7460
- package/types/themes.d.ts.map +1 -1
package/dist/esm/themes.mjs
CHANGED
|
@@ -3,7 +3,8 @@ import {
|
|
|
3
3
|
applyMask,
|
|
4
4
|
createStrengthenMask,
|
|
5
5
|
createTheme,
|
|
6
|
-
createWeakenMask
|
|
6
|
+
createWeakenMask,
|
|
7
|
+
skipMask
|
|
7
8
|
} from "@tamagui/create-theme";
|
|
8
9
|
import { colorTokens, darkColors, lightColors } from "./tokens";
|
|
9
10
|
const lightTransparent = "rgba(255,255,255,0)";
|
|
@@ -62,12 +63,23 @@ const templateShadows = {
|
|
|
62
63
|
shadowColorPress: 2,
|
|
63
64
|
shadowColorFocus: 2
|
|
64
65
|
};
|
|
65
|
-
const
|
|
66
|
+
const toSkip = {
|
|
66
67
|
...templateColors,
|
|
67
68
|
...templateShadows
|
|
68
69
|
};
|
|
70
|
+
const override = Object.fromEntries(Object.entries(toSkip).map(([k]) => [k, 0]));
|
|
71
|
+
const overrideShadows = Object.fromEntries(
|
|
72
|
+
Object.entries(templateShadows).map(([k]) => [k, 0])
|
|
73
|
+
);
|
|
74
|
+
const overrideWithColors = {
|
|
75
|
+
...override,
|
|
76
|
+
color: 0,
|
|
77
|
+
colorHover: 0,
|
|
78
|
+
colorFocus: 0,
|
|
79
|
+
colorPress: 0
|
|
80
|
+
};
|
|
69
81
|
const template = {
|
|
70
|
-
...
|
|
82
|
+
...toSkip,
|
|
71
83
|
// the background, color, etc keys here work like generics - they make it so you
|
|
72
84
|
// can publish components for others to use without mandating a specific color scale
|
|
73
85
|
// the @tamagui/button Button component looks for `$background`, so you set the
|
|
@@ -122,24 +134,22 @@ const baseThemes = {
|
|
|
122
134
|
dark
|
|
123
135
|
};
|
|
124
136
|
const masks = {
|
|
137
|
+
skip: skipMask,
|
|
125
138
|
weaker: createWeakenMask(),
|
|
126
139
|
stronger: createStrengthenMask()
|
|
127
140
|
};
|
|
128
141
|
const maskOptions = {
|
|
129
|
-
|
|
142
|
+
override,
|
|
143
|
+
skip: toSkip,
|
|
130
144
|
// avoids the transparent ends
|
|
131
145
|
max: palettes.light.length - 2,
|
|
132
146
|
min: 1
|
|
133
147
|
};
|
|
134
|
-
const
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
const [colorThemes, inverseColorThemes] = [
|
|
140
|
-
colorTokens[name],
|
|
141
|
-
colorTokens[inverseName]
|
|
142
|
-
].map((colorSet) => {
|
|
148
|
+
const transparent = (hsl, opacity = 0) => hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`);
|
|
149
|
+
const [lightColorThemes, darkColorThemes] = [colorTokens.light, colorTokens.dark].map(
|
|
150
|
+
(colorSet, i) => {
|
|
151
|
+
const isLight = i === 0;
|
|
152
|
+
const theme = baseThemes[isLight ? "light" : "dark"];
|
|
143
153
|
return Object.fromEntries(
|
|
144
154
|
Object.keys(colorSet).map((color) => {
|
|
145
155
|
const colorPalette = Object.values(colorSet[color]);
|
|
@@ -168,80 +178,91 @@ const allThemes = addChildren(baseThemes, (name, theme) => {
|
|
|
168
178
|
return [color, colorTheme];
|
|
169
179
|
})
|
|
170
180
|
);
|
|
171
|
-
}
|
|
181
|
+
}
|
|
182
|
+
);
|
|
183
|
+
const allThemes = addChildren(baseThemes, (name, theme) => {
|
|
184
|
+
const isLight = name === "light";
|
|
185
|
+
const inverseName = isLight ? "dark" : "light";
|
|
186
|
+
const inverseTheme = baseThemes[inverseName];
|
|
187
|
+
const colorThemes = isLight ? lightColorThemes : darkColorThemes;
|
|
188
|
+
const inverseColorThemes = isLight ? darkColorThemes : lightColorThemes;
|
|
172
189
|
const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {
|
|
173
190
|
const inverse = inverseColorThemes[colorName];
|
|
174
191
|
return {
|
|
175
|
-
...getAltThemes(colorTheme, inverse),
|
|
176
|
-
...getComponentThemes(colorTheme, inverse)
|
|
192
|
+
...getAltThemes(colorTheme, inverse, isLight),
|
|
193
|
+
...getComponentThemes(colorTheme, inverse, isLight)
|
|
177
194
|
};
|
|
178
195
|
});
|
|
179
|
-
const baseActiveTheme = applyMask(colorThemes.blue, masks.weaker, {
|
|
180
|
-
...maskOptions,
|
|
181
|
-
strength: 4
|
|
182
|
-
});
|
|
183
196
|
const baseSubThemes = {
|
|
184
|
-
...getAltThemes(
|
|
185
|
-
|
|
197
|
+
...getAltThemes(
|
|
198
|
+
theme,
|
|
199
|
+
inverseTheme,
|
|
200
|
+
isLight,
|
|
201
|
+
process.env.ACTIVE_THEME_INVERSE ? inverseTheme : void 0
|
|
202
|
+
),
|
|
203
|
+
...getComponentThemes(theme, inverseTheme, isLight)
|
|
186
204
|
};
|
|
187
205
|
return {
|
|
188
206
|
...baseSubThemes,
|
|
189
207
|
...allColorThemes
|
|
190
208
|
};
|
|
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
209
|
});
|
|
210
|
+
function getAltThemes(theme, inverse, isLight, activeTheme) {
|
|
211
|
+
const maskOptionsAlt = {
|
|
212
|
+
...maskOptions,
|
|
213
|
+
override: overrideShadows
|
|
214
|
+
};
|
|
215
|
+
const alt1 = applyMask(theme, masks.weaker, maskOptionsAlt);
|
|
216
|
+
const alt2 = applyMask(alt1, masks.weaker, maskOptionsAlt);
|
|
217
|
+
const active = activeTheme ?? (process.env.ACTIVE_THEME_INVERSE ? inverse : applyMask(theme, masks.weaker, {
|
|
218
|
+
...maskOptions,
|
|
219
|
+
strength: 4
|
|
220
|
+
}));
|
|
221
|
+
return addChildren({ alt1, alt2, active }, (_, subTheme) => {
|
|
222
|
+
return getComponentThemes(subTheme, subTheme === inverse ? theme : inverse, isLight);
|
|
223
|
+
});
|
|
224
|
+
}
|
|
225
|
+
function getComponentThemes(theme, inverse, isLight) {
|
|
226
|
+
const weaker1 = applyMask(theme, masks.weaker, maskOptions);
|
|
227
|
+
const weaker2 = applyMask(weaker1, masks.weaker, {
|
|
228
|
+
...maskOptions,
|
|
229
|
+
override: overrideWithColors
|
|
230
|
+
});
|
|
231
|
+
const stronger1 = applyMask(theme, masks.stronger, maskOptions);
|
|
232
|
+
const inverse1 = applyMask(inverse, masks.weaker, maskOptions);
|
|
233
|
+
const inverse2 = applyMask(inverse1, masks.weaker, maskOptions);
|
|
234
|
+
const strongerBorderLighterBackground = isLight ? {
|
|
235
|
+
...stronger1,
|
|
236
|
+
borderColor: weaker1.borderColor,
|
|
237
|
+
borderColorHover: weaker1.borderColorHover,
|
|
238
|
+
borderColorPress: weaker1.borderColorPress,
|
|
239
|
+
borderColorFocus: weaker1.borderColorFocus
|
|
240
|
+
} : {
|
|
241
|
+
...applyMask(theme, masks.skip, maskOptions),
|
|
242
|
+
borderColor: weaker1.borderColor,
|
|
243
|
+
borderColorHover: weaker1.borderColorHover,
|
|
244
|
+
borderColorPress: weaker1.borderColorPress,
|
|
245
|
+
borderColorFocus: weaker1.borderColorFocus
|
|
246
|
+
};
|
|
247
|
+
return {
|
|
248
|
+
Card: weaker1,
|
|
249
|
+
Button: weaker2,
|
|
250
|
+
Checkbox: weaker2,
|
|
251
|
+
DrawerFrame: weaker1,
|
|
252
|
+
SliderTrack: stronger1,
|
|
253
|
+
SliderTrackActive: weaker2,
|
|
254
|
+
SliderThumb: inverse1,
|
|
255
|
+
Progress: weaker1,
|
|
256
|
+
ProgressIndicator: inverse,
|
|
257
|
+
Switch: weaker2,
|
|
258
|
+
SwitchThumb: inverse2,
|
|
259
|
+
TooltipArrow: weaker1,
|
|
260
|
+
TooltipContent: weaker2,
|
|
261
|
+
Input: strongerBorderLighterBackground,
|
|
262
|
+
TextArea: strongerBorderLighterBackground,
|
|
263
|
+
Tooltip: inverse1
|
|
264
|
+
};
|
|
265
|
+
}
|
|
245
266
|
const themes = {
|
|
246
267
|
...allThemes,
|
|
247
268
|
// bring back the full type, the rest use a subset to avoid clogging up ts,
|
package/dist/esm/themes.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/themes.tsx"],
|
|
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 \"
|
|
5
|
-
"mappings": "AAAA;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,aAAa,YAAY,mBAAmB;AAIrD,MAAM,mBAAmB;AACzB,MAAM,kBAAkB;AAGxB,MAAM,WAAW;AAAA,EACf,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEA,MAAM,iBAAiB;AAAA,EACrB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,MAAM,kBAAkB;AAAA,EACtB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;
|
|
6
|
-
"names": [
|
|
4
|
+
"sourcesContent": ["import {\n MaskOptions,\n addChildren,\n applyMask,\n createStrengthenMask,\n createTheme,\n createWeakenMask,\n skipMask,\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 \"override\" so it doesn't get adjusted with masks\n// we want to skip over templateColor + templateShadows\nconst toSkip = {\n ...templateColors,\n ...templateShadows,\n}\n\nconst override = Object.fromEntries(Object.entries(toSkip).map(([k]) => [k, 0]))\nconst overrideShadows = Object.fromEntries(\n Object.entries(templateShadows).map(([k]) => [k, 0])\n)\nconst overrideWithColors = {\n ...override,\n color: 0,\n colorHover: 0,\n colorFocus: 0,\n colorPress: 0,\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 ...toSkip,\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 skip: skipMask,\n weaker: createWeakenMask(),\n stronger: createStrengthenMask(),\n}\n\n// default mask options for most uses\nconst maskOptions: MaskOptions = {\n override,\n skip: toSkip,\n // avoids the transparent ends\n max: palettes.light.length - 2,\n min: 1,\n}\n\nconst transparent = (hsl: string, opacity = 0) =>\n hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)\n\n// setup colorThemes and their inverses\nconst [lightColorThemes, darkColorThemes] = [colorTokens.light, colorTokens.dark].map(\n (colorSet, i) => {\n const isLight = i === 0\n const theme = baseThemes[isLight ? 'light' : 'dark']\n\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\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\n return [color, colorTheme]\n })\n ) as Record<ColorName, SubTheme>\n }\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 colorThemes = isLight ? lightColorThemes : darkColorThemes\n const inverseColorThemes = isLight ? darkColorThemes : lightColorThemes\n\n const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {\n const inverse = inverseColorThemes[colorName]\n return {\n ...getAltThemes(colorTheme, inverse, isLight),\n ...getComponentThemes(colorTheme, inverse, isLight),\n }\n })\n\n const baseSubThemes = {\n ...getAltThemes(\n theme,\n inverseTheme,\n isLight,\n process.env.ACTIVE_THEME_INVERSE ? inverseTheme : undefined\n ),\n ...getComponentThemes(theme, inverseTheme, isLight),\n }\n\n return {\n ...baseSubThemes,\n ...allColorThemes,\n }\n})\n\nfunction getAltThemes(\n theme: SubTheme,\n inverse: SubTheme,\n isLight: boolean,\n activeTheme?: SubTheme\n) {\n const maskOptionsAlt = {\n ...maskOptions,\n override: overrideShadows,\n }\n const alt1 = applyMask(theme, masks.weaker, maskOptionsAlt)\n const alt2 = applyMask(alt1, masks.weaker, maskOptionsAlt)\n const active =\n activeTheme ??\n (process.env.ACTIVE_THEME_INVERSE\n ? inverse\n : applyMask(theme, masks.weaker, {\n ...maskOptions,\n strength: 4,\n }))\n\n return addChildren({ alt1, alt2, active }, (_, subTheme) => {\n return getComponentThemes(subTheme, subTheme === inverse ? theme : inverse, isLight)\n })\n}\n\nfunction getComponentThemes(theme: SubTheme, inverse: SubTheme, isLight: boolean) {\n const weaker1 = applyMask(theme, masks.weaker, maskOptions)\n const weaker2 = applyMask(weaker1, masks.weaker, {\n ...maskOptions,\n override: overrideWithColors,\n })\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 ...applyMask(theme, masks.skip, maskOptions),\n borderColor: weaker1.borderColor,\n borderColorHover: weaker1.borderColorHover,\n borderColorPress: weaker1.borderColorPress,\n borderColorFocus: weaker1.borderColorFocus,\n }\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\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": "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",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/themes",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.15.0",
|
|
4
4
|
"types": "./types/index.d.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -11,15 +11,21 @@
|
|
|
11
11
|
"dist"
|
|
12
12
|
],
|
|
13
13
|
"scripts": {
|
|
14
|
-
"
|
|
14
|
+
"generate": "node -r esbuild-register ./src/generate.ts",
|
|
15
|
+
"build": "tamagui-build && yarn generate",
|
|
15
16
|
"watch": "tamagui-build --watch",
|
|
16
17
|
"lint": "../../node_modules/.bin/rome check src",
|
|
17
|
-
"lint:fix": "../../node_modules/.bin/rome check --apply
|
|
18
|
+
"lint:fix": "../../node_modules/.bin/rome check --apply src",
|
|
18
19
|
"clean": "tamagui-build clean",
|
|
19
20
|
"clean:build": "tamagui-build clean:build"
|
|
20
21
|
},
|
|
21
22
|
"exports": {
|
|
22
23
|
"./package.json": "./package.json",
|
|
24
|
+
"./generated.json": {
|
|
25
|
+
"types": "./generated.d.ts",
|
|
26
|
+
"import": "./generated.json",
|
|
27
|
+
"require": "./generated.json"
|
|
28
|
+
},
|
|
23
29
|
".": {
|
|
24
30
|
"types": "./types/index.d.ts",
|
|
25
31
|
"import": "./dist/esm/index.mjs",
|
|
@@ -27,12 +33,12 @@
|
|
|
27
33
|
}
|
|
28
34
|
},
|
|
29
35
|
"dependencies": {
|
|
30
|
-
"@tamagui/colors": "1.
|
|
31
|
-
"@tamagui/create-theme": "1.
|
|
32
|
-
"@tamagui/web": "1.
|
|
36
|
+
"@tamagui/colors": "1.15.0",
|
|
37
|
+
"@tamagui/create-theme": "1.15.0",
|
|
38
|
+
"@tamagui/web": "1.15.0"
|
|
33
39
|
},
|
|
34
40
|
"devDependencies": {
|
|
35
|
-
"@tamagui/build": "1.
|
|
41
|
+
"@tamagui/build": "1.15.0"
|
|
36
42
|
},
|
|
37
43
|
"publishConfig": {
|
|
38
44
|
"access": "public"
|
package/src/generate.ts
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { writeFile } from 'fs/promises'
|
|
2
|
+
|
|
3
|
+
import { themes } from './themes'
|
|
4
|
+
|
|
5
|
+
async function run() {
|
|
6
|
+
await writeFile('./generated.json', JSON.stringify(themes, null, 2))
|
|
7
|
+
|
|
8
|
+
const baseType = `type Theme = {
|
|
9
|
+
${Object.entries(themes.light)
|
|
10
|
+
.map(([k]) => {
|
|
11
|
+
return ` ${k}: string;\n`
|
|
12
|
+
})
|
|
13
|
+
.join('')}
|
|
14
|
+
}`
|
|
15
|
+
|
|
16
|
+
const types = Object.keys(themes)
|
|
17
|
+
.map((name) => {
|
|
18
|
+
return `export type ${name} = Theme`
|
|
19
|
+
})
|
|
20
|
+
.join('\n')
|
|
21
|
+
|
|
22
|
+
await writeFile('./generated.d.ts', `${baseType}\n${types}`)
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
run()
|