@tamagui/themes 1.5.9 → 1.5.11
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/themes.js +79 -61
- package/dist/cjs/themes.js.map +2 -2
- package/dist/esm/themes.js +79 -61
- package/dist/esm/themes.js.map +2 -2
- package/dist/esm/themes.mjs +79 -61
- package/dist/esm/themes.mjs.map +2 -2
- package/package.json +6 -6
- package/src/themes.tsx +92 -67
- package/types/index.d.ts.map +1 -0
- package/types/themes.d.ts +39101 -973
- package/types/themes.d.ts.map +1 -0
- package/types/tokens.d.ts.map +1 -0
package/dist/esm/themes.mjs
CHANGED
|
@@ -11,7 +11,7 @@ const darkTransparent = "rgba(10,10,10,0)";
|
|
|
11
11
|
const palettes = {
|
|
12
12
|
dark: [
|
|
13
13
|
darkTransparent,
|
|
14
|
-
"#
|
|
14
|
+
"#050505",
|
|
15
15
|
"#151515",
|
|
16
16
|
"#191919",
|
|
17
17
|
"#232323",
|
|
@@ -29,15 +29,15 @@ const palettes = {
|
|
|
29
29
|
lightTransparent,
|
|
30
30
|
"#fff",
|
|
31
31
|
"#f9f9f9",
|
|
32
|
-
"hsl(0, 0%, 99.0%)",
|
|
33
32
|
"hsl(0, 0%, 97.3%)",
|
|
34
33
|
"hsl(0, 0%, 95.1%)",
|
|
35
|
-
"hsl(0, 0%,
|
|
36
|
-
"hsl(0, 0%,
|
|
37
|
-
"hsl(0, 0%,
|
|
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
38
|
"hsl(0, 0%, 56.1%)",
|
|
39
|
-
"hsl(0, 0%,
|
|
40
|
-
"hsl(0, 0%,
|
|
39
|
+
"hsl(0, 0%, 50.3%)",
|
|
40
|
+
"hsl(0, 0%, 42.5%)",
|
|
41
41
|
"hsl(0, 0%, 9.0%)",
|
|
42
42
|
darkTransparent
|
|
43
43
|
]
|
|
@@ -104,41 +104,31 @@ const darkShadows = {
|
|
|
104
104
|
};
|
|
105
105
|
const lightTemplate = {
|
|
106
106
|
...template,
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
borderColorFocus:
|
|
107
|
+
// our light color palette is... a bit unique
|
|
108
|
+
borderColor: 6,
|
|
109
|
+
borderColorHover: 7,
|
|
110
|
+
borderColorFocus: 5,
|
|
111
|
+
borderColorPress: 6,
|
|
111
112
|
...lightShadows
|
|
112
113
|
};
|
|
113
114
|
const darkTemplate = { ...template, ...darkShadows };
|
|
114
|
-
const light = createTheme(palettes.light, lightTemplate
|
|
115
|
-
|
|
116
|
-
});
|
|
117
|
-
const dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors });
|
|
115
|
+
const light = createTheme(palettes.light, lightTemplate);
|
|
116
|
+
const dark = createTheme(palettes.dark, darkTemplate);
|
|
118
117
|
const baseThemes = {
|
|
119
118
|
light,
|
|
120
119
|
dark
|
|
121
120
|
};
|
|
122
|
-
const max = palettes.dark.length - 1;
|
|
123
121
|
const masks = {
|
|
124
|
-
weaker: createWeakenMask(
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
max
|
|
133
|
-
}),
|
|
134
|
-
stronger2: createStrengthenMask({
|
|
135
|
-
by: 2,
|
|
136
|
-
min: 1,
|
|
137
|
-
max
|
|
138
|
-
})
|
|
122
|
+
weaker: createWeakenMask(),
|
|
123
|
+
stronger: createStrengthenMask()
|
|
124
|
+
};
|
|
125
|
+
const maskOptions = {
|
|
126
|
+
skip,
|
|
127
|
+
// avoids the transparent ends
|
|
128
|
+
max: palettes.light.length - 2,
|
|
129
|
+
min: 1
|
|
139
130
|
};
|
|
140
|
-
const allThemes = addChildren(baseThemes, (name,
|
|
141
|
-
const theme = themeIn;
|
|
131
|
+
const allThemes = addChildren(baseThemes, (name, theme) => {
|
|
142
132
|
const isLight = name === "light";
|
|
143
133
|
const inverseName = isLight ? "dark" : "light";
|
|
144
134
|
const inverseTheme = baseThemes[inverseName];
|
|
@@ -165,10 +155,11 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
165
155
|
palette,
|
|
166
156
|
isLight ? {
|
|
167
157
|
...lightTemplate,
|
|
158
|
+
// light color themes are a bit less sensitive
|
|
168
159
|
borderColor: 4,
|
|
169
160
|
borderColorHover: 5,
|
|
170
|
-
borderColorFocus:
|
|
171
|
-
borderColorPress:
|
|
161
|
+
borderColorFocus: 4,
|
|
162
|
+
borderColorPress: 4
|
|
172
163
|
} : darkTemplate
|
|
173
164
|
);
|
|
174
165
|
return [color, colorTheme];
|
|
@@ -178,50 +169,77 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
178
169
|
const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {
|
|
179
170
|
const inverse = inverseColorThemes[colorName];
|
|
180
171
|
return {
|
|
181
|
-
...getAltThemes(colorTheme, inverse),
|
|
172
|
+
...getAltThemes(colorTheme, inverse, inverse),
|
|
182
173
|
...getComponentThemes(colorTheme, inverse)
|
|
183
174
|
};
|
|
184
175
|
});
|
|
176
|
+
const baseActiveTheme = applyMask(colorThemes.blue, masks.weaker, {
|
|
177
|
+
...maskOptions,
|
|
178
|
+
strength: 4
|
|
179
|
+
});
|
|
180
|
+
const baseSubThemes = {
|
|
181
|
+
...getAltThemes(theme, inverseTheme, baseActiveTheme),
|
|
182
|
+
...getComponentThemes(theme, inverseTheme)
|
|
183
|
+
};
|
|
185
184
|
return {
|
|
186
|
-
...
|
|
187
|
-
...getComponentThemes(theme, inverseTheme),
|
|
185
|
+
...baseSubThemes,
|
|
188
186
|
...allColorThemes
|
|
189
187
|
};
|
|
188
|
+
function getAltThemes(theme2, inverse, activeTheme) {
|
|
189
|
+
const alt1 = applyMask(theme2, masks.weaker, maskOptions);
|
|
190
|
+
const alt2 = applyMask(alt1, masks.weaker, maskOptions);
|
|
191
|
+
const active = activeTheme ?? applyMask(theme2, masks.weaker, {
|
|
192
|
+
...maskOptions,
|
|
193
|
+
strength: 4
|
|
194
|
+
});
|
|
195
|
+
return addChildren({ alt1, alt2, active }, (name2, subTheme) => {
|
|
196
|
+
return getComponentThemes(subTheme, subTheme === inverse ? theme2 : inverse);
|
|
197
|
+
});
|
|
198
|
+
}
|
|
190
199
|
function getComponentThemes(theme2, inverse) {
|
|
191
|
-
const
|
|
192
|
-
const
|
|
193
|
-
const
|
|
194
|
-
const
|
|
200
|
+
const weaker1 = applyMask(theme2, masks.weaker, maskOptions);
|
|
201
|
+
const weaker2 = applyMask(weaker1, masks.weaker, maskOptions);
|
|
202
|
+
const stronger1 = applyMask(theme2, masks.stronger, maskOptions);
|
|
203
|
+
const inverse1 = applyMask(inverse, masks.weaker, maskOptions);
|
|
204
|
+
const inverse2 = applyMask(inverse1, masks.weaker, maskOptions);
|
|
205
|
+
const strongerBorderLighterBackground = isLight ? {
|
|
206
|
+
...stronger1,
|
|
207
|
+
borderColor: weaker1.borderColor,
|
|
208
|
+
borderColorHover: weaker1.borderColorHover,
|
|
209
|
+
borderColorPress: weaker1.borderColorPress,
|
|
210
|
+
borderColorFocus: weaker1.borderColorFocus
|
|
211
|
+
} : {
|
|
212
|
+
...theme2,
|
|
213
|
+
borderColor: weaker1.borderColor,
|
|
214
|
+
borderColorHover: weaker1.borderColorHover,
|
|
215
|
+
borderColorPress: weaker1.borderColorPress,
|
|
216
|
+
borderColorFocus: weaker1.borderColorFocus
|
|
217
|
+
};
|
|
195
218
|
return {
|
|
196
|
-
Card:
|
|
197
|
-
Button:
|
|
198
|
-
DrawerFrame:
|
|
199
|
-
SliderTrack:
|
|
200
|
-
SliderTrackActive:
|
|
219
|
+
Card: weaker1,
|
|
220
|
+
Button: weaker2,
|
|
221
|
+
DrawerFrame: weaker1,
|
|
222
|
+
SliderTrack: stronger1,
|
|
223
|
+
SliderTrackActive: weaker2,
|
|
201
224
|
SliderThumb: inverse1,
|
|
202
|
-
Progress:
|
|
225
|
+
Progress: weaker1,
|
|
203
226
|
ProgressIndicator: inverse,
|
|
204
|
-
Switch:
|
|
227
|
+
Switch: weaker1,
|
|
205
228
|
SwitchThumb: inverse2,
|
|
206
|
-
TooltipArrow:
|
|
207
|
-
TooltipContent:
|
|
229
|
+
TooltipArrow: weaker1,
|
|
230
|
+
TooltipContent: weaker2,
|
|
231
|
+
Input: strongerBorderLighterBackground,
|
|
232
|
+
TextArea: strongerBorderLighterBackground,
|
|
233
|
+
Tooltip: inverse1
|
|
208
234
|
};
|
|
209
235
|
}
|
|
210
|
-
function getAltThemes(theme2, inverse) {
|
|
211
|
-
const alt1 = applyMask(theme2, masks.weaker, { skip });
|
|
212
|
-
const alt2 = applyMask(alt1, masks.weaker, { skip });
|
|
213
|
-
const active = applyMask(theme2, masks.stronger2, { skip });
|
|
214
|
-
return addChildren({ alt1, alt2, active }, (name2, theme3) => {
|
|
215
|
-
return getComponentThemes(theme3, inverse);
|
|
216
|
-
});
|
|
217
|
-
}
|
|
218
236
|
});
|
|
219
237
|
const themes = {
|
|
220
238
|
...allThemes,
|
|
221
239
|
// bring back the full type, the rest use a subset to avoid clogging up ts,
|
|
222
240
|
// tamagui will be smart and use the top level themes as the type for useTheme() etc
|
|
223
|
-
light,
|
|
224
|
-
dark
|
|
241
|
+
light: createTheme(palettes.light, lightTemplate, { nonInheritedValues: lightColors }),
|
|
242
|
+
dark: createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })
|
|
225
243
|
};
|
|
226
244
|
export {
|
|
227
245
|
themes
|
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 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 '#
|
|
5
|
-
"mappings": "AAAA;AAAA,
|
|
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 colorScale = {\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\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n ...colorScale,\n shadowColor: 1,\n shadowColorHover: 1,\n shadowColorPress: 2,\n shadowColorFocus: 2,\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\nconst maskOptions: MaskOptions = {\n skip,\n\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, 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 alt1 = applyMask(theme, masks.weaker, maskOptions)\n const alt2 = applyMask(alt1, masks.weaker, maskOptions)\n const active =\n activeTheme ??\n applyMask(theme, masks.weaker, {\n ...maskOptions,\n strength: 4,\n })\n return addChildren({ alt1, alt2, active }, (name, 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 DrawerFrame: weaker1,\n SliderTrack: stronger1,\n SliderTrackActive: weaker2,\n SliderThumb: inverse1,\n Progress: weaker1,\n ProgressIndicator: inverse,\n Switch: weaker1,\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"],
|
|
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,aAAa;AAAA,EACjB,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;AAGA,MAAM,OAAO;AAAA,EACX,GAAG;AAAA,EACH,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAIA,MAAM,WAAW;AAAA,EACf,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKH,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,uBAAuB;AAAA,EACvB,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAEA,MAAM,mBAAmB;AACzB,MAAM,yBAAyB;AAC/B,MAAM,kBAAkB;AACxB,MAAM,wBAAwB;AAE9B,MAAM,eAAe;AAAA,EACnB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAEA,MAAM,cAAc;AAAA,EAClB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAEA,MAAM,gBAAgB;AAAA,EACpB,GAAG;AAAA;AAAA,EAEH,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,GAAG;AACL;AAEA,MAAM,eAAe,EAAE,GAAG,UAAU,GAAG,YAAY;AAEnD,MAAM,QAAQ,YAAY,SAAS,OAAO,aAAa;AACvD,MAAM,OAAO,YAAY,SAAS,MAAM,YAAY;AAIpD,MAAM,aAGF;AAAA,EACF;AAAA,EACA;AACF;AAEA,MAAM,QAAQ;AAAA,EACZ,QAAQ,iBAAiB;AAAA,EACzB,UAAU,qBAAqB;AACjC;AAEA,MAAM,cAA2B;AAAA,EAC/B;AAAA;AAAA,EAGA,KAAK,SAAS,MAAM,SAAS;AAAA,EAC7B,KAAK;AACP;AAEA,MAAM,YAAY,YAAY,YAAY,CAAC,MAAM,UAAU;AACzD,QAAM,UAAU,SAAS;AACzB,QAAM,cAAc,UAAU,SAAS;AACvC,QAAM,eAAe,WAAW,WAAW;AAC3C,QAAM,cAAc,CAAC,KAAa,UAAU,MAC1C,IAAI,QAAQ,MAAM,MAAM,UAAU,EAAE,QAAQ,QAAQ,OAAO;AAG7D,QAAM,CAAC,aAAa,kBAAkB,IAAI;AAAA,IACxC,YAAY,IAAI;AAAA,IAChB,YAAY,WAAW;AAAA,EACzB,EAAE,IAAI,CAAC,aAAa;AAClB,WAAO,OAAO;AAAA,MACZ,OAAO,KAAK,QAAQ,EAAE,IAAI,CAAC,UAAU;AACnC,cAAM,eAAe,OAAO,OAAO,SAAS,KAAK,CAAC;AAElD,cAAM,CAAC,MAAM,IAAI,IAAI;AAAA,UACnB,aAAa,MAAM,GAAG,CAAC;AAAA,UACvB,aAAa,MAAM,aAAa,SAAS,CAAC;AAAA,QAC5C;AAIA,cAAM,UAAU;AAAA,UACd,YAAY,aAAa,CAAC,CAAC;AAAA,UAC3B,GAAG;AAAA,UACH,GAAG;AAAA,UACH,MAAM;AAAA,UACN,YAAY,aAAa,aAAa,SAAS,CAAC,CAAC;AAAA,QACnD;AACA,cAAM,aAAa;AAAA,UACjB;AAAA,UACA,UACI;AAAA,YACE,GAAG;AAAA;AAAA,YAEH,aAAa;AAAA,YACb,kBAAkB;AAAA,YAClB,kBAAkB;AAAA,YAClB,kBAAkB;AAAA,UACpB,IACA;AAAA,QACN;AACA,eAAO,CAAC,OAAO,UAAU;AAAA,MAC3B,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB,YAAY,aAAa,CAAC,WAAW,eAAe;AACzE,UAAM,UAAU,mBAAmB,SAAS;AAC5C,WAAO;AAAA,MACL,GAAG,aAAa,YAAY,SAAS,OAAO;AAAA,MAC5C,GAAG,mBAAmB,YAAY,OAAO;AAAA,IAC3C;AAAA,EACF,CAAC;AAED,QAAM,kBAAkB,UAAU,YAAY,MAAM,MAAM,QAAQ;AAAA,IAChE,GAAG;AAAA,IACH,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,gBAAgB;AAAA,IACpB,GAAG,aAAa,OAAO,cAAc,eAAe;AAAA,IACpD,GAAG,mBAAmB,OAAO,YAAY;AAAA,EAC3C;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,WAAS,aAAaA,QAAiB,SAAmB,aAAwB;AAChF,UAAM,OAAO,UAAUA,QAAO,MAAM,QAAQ,WAAW;AACvD,UAAM,OAAO,UAAU,MAAM,MAAM,QAAQ,WAAW;AACtD,UAAM,SACJ,eACA,UAAUA,QAAO,MAAM,QAAQ;AAAA,MAC7B,GAAG;AAAA,MACH,UAAU;AAAA,IACZ,CAAC;AACH,WAAO,YAAY,EAAE,MAAM,MAAM,OAAO,GAAG,CAACC,OAAM,aAAa;AAC7D,aAAO,mBAAmB,UAAU,aAAa,UAAUD,SAAQ,OAAO;AAAA,IAC5E,CAAC;AAAA,EACH;AAEA,WAAS,mBAAmBA,QAAiB,SAAmB;AAC9D,UAAM,UAAU,UAAUA,QAAO,MAAM,QAAQ,WAAW;AAC1D,UAAM,UAAU,UAAU,SAAS,MAAM,QAAQ,WAAW;AAC5D,UAAM,YAAY,UAAUA,QAAO,MAAM,UAAU,WAAW;AAC9D,UAAM,WAAW,UAAU,SAAS,MAAM,QAAQ,WAAW;AAC7D,UAAM,WAAW,UAAU,UAAU,MAAM,QAAQ,WAAW;AAC9D,UAAM,kCAA4C,UAC9C;AAAA,MACE,GAAG;AAAA,MACH,aAAa,QAAQ;AAAA,MACrB,kBAAkB,QAAQ;AAAA,MAC1B,kBAAkB,QAAQ;AAAA,MAC1B,kBAAkB,QAAQ;AAAA,IAC5B,IACA;AAAA,MACE,GAAGA;AAAA,MACH,aAAa,QAAQ;AAAA,MACrB,kBAAkB,QAAQ;AAAA,MAC1B,kBAAkB,QAAQ;AAAA,MAC1B,kBAAkB,QAAQ;AAAA,IAC5B;AACJ,WAAO;AAAA,MACL,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,aAAa;AAAA,MACb,mBAAmB;AAAA,MACnB,aAAa;AAAA,MACb,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,cAAc;AAAA,MACd,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;AAEM,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA;AAAA;AAAA,EAGH,OAAO,YAAY,SAAS,OAAO,eAAe,EAAE,oBAAoB,YAAY,CAAC;AAAA,EACrF,MAAM,YAAY,SAAS,MAAM,cAAc,EAAE,oBAAoB,WAAW,CAAC;AACnF;",
|
|
6
6
|
"names": ["theme", "name"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/themes",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.11",
|
|
4
4
|
"types": "./types/index.d.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -32,13 +32,13 @@
|
|
|
32
32
|
}
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@tamagui/colors": "^1.5.
|
|
36
|
-
"@tamagui/core": "^1.5.
|
|
37
|
-
"@tamagui/create-theme": "^1.5.
|
|
38
|
-
"@tamagui/create-themes": "^1.5.
|
|
35
|
+
"@tamagui/colors": "^1.5.11",
|
|
36
|
+
"@tamagui/core": "^1.5.11",
|
|
37
|
+
"@tamagui/create-theme": "^1.5.11",
|
|
38
|
+
"@tamagui/create-themes": "^1.5.11"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@tamagui/build": "^1.5.
|
|
41
|
+
"@tamagui/build": "^1.5.11"
|
|
42
42
|
},
|
|
43
43
|
"publishConfig": {
|
|
44
44
|
"access": "public"
|
package/src/themes.tsx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import {
|
|
2
|
+
MaskOptions,
|
|
2
3
|
addChildren,
|
|
3
4
|
applyMask,
|
|
4
5
|
createStrengthenMask,
|
|
@@ -17,7 +18,7 @@ const darkTransparent = 'rgba(10,10,10,0)'
|
|
|
17
18
|
const palettes = {
|
|
18
19
|
dark: [
|
|
19
20
|
darkTransparent,
|
|
20
|
-
'#
|
|
21
|
+
'#050505',
|
|
21
22
|
'#151515',
|
|
22
23
|
'#191919',
|
|
23
24
|
'#232323',
|
|
@@ -35,15 +36,15 @@ const palettes = {
|
|
|
35
36
|
lightTransparent,
|
|
36
37
|
'#fff',
|
|
37
38
|
'#f9f9f9',
|
|
38
|
-
'hsl(0, 0%, 99.0%)',
|
|
39
39
|
'hsl(0, 0%, 97.3%)',
|
|
40
40
|
'hsl(0, 0%, 95.1%)',
|
|
41
|
-
'hsl(0, 0%,
|
|
42
|
-
'hsl(0, 0%,
|
|
43
|
-
'hsl(0, 0%,
|
|
41
|
+
'hsl(0, 0%, 94.0%)',
|
|
42
|
+
'hsl(0, 0%, 92.0%)',
|
|
43
|
+
'hsl(0, 0%, 89.5%)',
|
|
44
|
+
'hsl(0, 0%, 81.0%)',
|
|
44
45
|
'hsl(0, 0%, 56.1%)',
|
|
45
|
-
'hsl(0, 0%,
|
|
46
|
-
'hsl(0, 0%,
|
|
46
|
+
'hsl(0, 0%, 50.3%)',
|
|
47
|
+
'hsl(0, 0%, 42.5%)',
|
|
47
48
|
'hsl(0, 0%, 9.0%)',
|
|
48
49
|
darkTransparent,
|
|
49
50
|
],
|
|
@@ -120,22 +121,20 @@ const darkShadows = {
|
|
|
120
121
|
|
|
121
122
|
const lightTemplate = {
|
|
122
123
|
...template,
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
borderColorFocus:
|
|
124
|
+
// our light color palette is... a bit unique
|
|
125
|
+
borderColor: 6,
|
|
126
|
+
borderColorHover: 7,
|
|
127
|
+
borderColorFocus: 5,
|
|
128
|
+
borderColorPress: 6,
|
|
127
129
|
...lightShadows,
|
|
128
130
|
}
|
|
129
131
|
|
|
130
132
|
const darkTemplate = { ...template, ...darkShadows }
|
|
131
133
|
|
|
132
|
-
const light = createTheme(palettes.light, lightTemplate
|
|
133
|
-
|
|
134
|
-
})
|
|
135
|
-
|
|
136
|
-
const dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })
|
|
134
|
+
const light = createTheme(palettes.light, lightTemplate)
|
|
135
|
+
const dark = createTheme(palettes.dark, darkTemplate)
|
|
137
136
|
|
|
138
|
-
type SubTheme =
|
|
137
|
+
type SubTheme = typeof light
|
|
139
138
|
|
|
140
139
|
const baseThemes: {
|
|
141
140
|
light: SubTheme
|
|
@@ -145,28 +144,20 @@ const baseThemes: {
|
|
|
145
144
|
dark,
|
|
146
145
|
}
|
|
147
146
|
|
|
148
|
-
// avoid transparent ends
|
|
149
|
-
const max = palettes.dark.length - 1
|
|
150
147
|
const masks = {
|
|
151
|
-
weaker: createWeakenMask(
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
stronger2: createStrengthenMask({
|
|
162
|
-
by: 2,
|
|
163
|
-
min: 1,
|
|
164
|
-
max,
|
|
165
|
-
}),
|
|
148
|
+
weaker: createWeakenMask(),
|
|
149
|
+
stronger: createStrengthenMask(),
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
const maskOptions: MaskOptions = {
|
|
153
|
+
skip,
|
|
154
|
+
|
|
155
|
+
// avoids the transparent ends
|
|
156
|
+
max: palettes.light.length - 2,
|
|
157
|
+
min: 1,
|
|
166
158
|
}
|
|
167
159
|
|
|
168
|
-
const allThemes = addChildren(baseThemes, (name,
|
|
169
|
-
const theme = themeIn as SubTheme
|
|
160
|
+
const allThemes = addChildren(baseThemes, (name, theme) => {
|
|
170
161
|
const isLight = name === 'light'
|
|
171
162
|
const inverseName = isLight ? 'dark' : 'light'
|
|
172
163
|
const inverseTheme = baseThemes[inverseName]
|
|
@@ -180,7 +171,7 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
180
171
|
].map((colorSet) => {
|
|
181
172
|
return Object.fromEntries(
|
|
182
173
|
Object.keys(colorSet).map((color) => {
|
|
183
|
-
const colorPalette = Object.values(colorSet[color as
|
|
174
|
+
const colorPalette = Object.values(colorSet[color]) as string[]
|
|
184
175
|
// were re-ordering these
|
|
185
176
|
const [head, tail] = [
|
|
186
177
|
colorPalette.slice(0, 6),
|
|
@@ -201,10 +192,11 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
201
192
|
isLight
|
|
202
193
|
? {
|
|
203
194
|
...lightTemplate,
|
|
195
|
+
// light color themes are a bit less sensitive
|
|
204
196
|
borderColor: 4,
|
|
205
197
|
borderColorHover: 5,
|
|
206
|
-
borderColorFocus:
|
|
207
|
-
borderColorPress:
|
|
198
|
+
borderColorFocus: 4,
|
|
199
|
+
borderColorPress: 4,
|
|
208
200
|
}
|
|
209
201
|
: darkTemplate
|
|
210
202
|
)
|
|
@@ -216,52 +208,85 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
216
208
|
const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {
|
|
217
209
|
const inverse = inverseColorThemes[colorName]
|
|
218
210
|
return {
|
|
219
|
-
...getAltThemes(colorTheme
|
|
220
|
-
...getComponentThemes(colorTheme
|
|
211
|
+
...getAltThemes(colorTheme, inverse, inverse),
|
|
212
|
+
...getComponentThemes(colorTheme, inverse),
|
|
221
213
|
}
|
|
222
214
|
})
|
|
223
215
|
|
|
224
|
-
|
|
225
|
-
...
|
|
216
|
+
const baseActiveTheme = applyMask(colorThemes.blue, masks.weaker, {
|
|
217
|
+
...maskOptions,
|
|
218
|
+
strength: 4,
|
|
219
|
+
})
|
|
220
|
+
|
|
221
|
+
const baseSubThemes = {
|
|
222
|
+
...getAltThemes(theme, inverseTheme, baseActiveTheme),
|
|
226
223
|
...getComponentThemes(theme, inverseTheme),
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
return {
|
|
227
|
+
...baseSubThemes,
|
|
227
228
|
...allColorThemes,
|
|
228
229
|
}
|
|
229
230
|
|
|
231
|
+
function getAltThemes(theme: SubTheme, inverse: SubTheme, activeTheme?: SubTheme) {
|
|
232
|
+
const alt1 = applyMask(theme, masks.weaker, maskOptions)
|
|
233
|
+
const alt2 = applyMask(alt1, masks.weaker, maskOptions)
|
|
234
|
+
const active =
|
|
235
|
+
activeTheme ??
|
|
236
|
+
applyMask(theme, masks.weaker, {
|
|
237
|
+
...maskOptions,
|
|
238
|
+
strength: 4,
|
|
239
|
+
})
|
|
240
|
+
return addChildren({ alt1, alt2, active }, (name, subTheme) => {
|
|
241
|
+
return getComponentThemes(subTheme, subTheme === inverse ? theme : inverse)
|
|
242
|
+
})
|
|
243
|
+
}
|
|
244
|
+
|
|
230
245
|
function getComponentThemes(theme: SubTheme, inverse: SubTheme) {
|
|
231
|
-
const
|
|
232
|
-
const
|
|
233
|
-
const
|
|
234
|
-
const
|
|
246
|
+
const weaker1 = applyMask(theme, masks.weaker, maskOptions)
|
|
247
|
+
const weaker2 = applyMask(weaker1, masks.weaker, maskOptions)
|
|
248
|
+
const stronger1 = applyMask(theme, masks.stronger, maskOptions)
|
|
249
|
+
const inverse1 = applyMask(inverse, masks.weaker, maskOptions)
|
|
250
|
+
const inverse2 = applyMask(inverse1, masks.weaker, maskOptions)
|
|
251
|
+
const strongerBorderLighterBackground: SubTheme = isLight
|
|
252
|
+
? {
|
|
253
|
+
...stronger1,
|
|
254
|
+
borderColor: weaker1.borderColor,
|
|
255
|
+
borderColorHover: weaker1.borderColorHover,
|
|
256
|
+
borderColorPress: weaker1.borderColorPress,
|
|
257
|
+
borderColorFocus: weaker1.borderColorFocus,
|
|
258
|
+
}
|
|
259
|
+
: {
|
|
260
|
+
...theme,
|
|
261
|
+
borderColor: weaker1.borderColor,
|
|
262
|
+
borderColorHover: weaker1.borderColorHover,
|
|
263
|
+
borderColorPress: weaker1.borderColorPress,
|
|
264
|
+
borderColorFocus: weaker1.borderColorFocus,
|
|
265
|
+
}
|
|
235
266
|
return {
|
|
236
|
-
Card:
|
|
237
|
-
Button:
|
|
238
|
-
DrawerFrame:
|
|
239
|
-
SliderTrack:
|
|
240
|
-
SliderTrackActive:
|
|
267
|
+
Card: weaker1,
|
|
268
|
+
Button: weaker2,
|
|
269
|
+
DrawerFrame: weaker1,
|
|
270
|
+
SliderTrack: stronger1,
|
|
271
|
+
SliderTrackActive: weaker2,
|
|
241
272
|
SliderThumb: inverse1,
|
|
242
|
-
Progress:
|
|
273
|
+
Progress: weaker1,
|
|
243
274
|
ProgressIndicator: inverse,
|
|
244
|
-
Switch:
|
|
275
|
+
Switch: weaker1,
|
|
245
276
|
SwitchThumb: inverse2,
|
|
246
|
-
TooltipArrow:
|
|
247
|
-
TooltipContent:
|
|
277
|
+
TooltipArrow: weaker1,
|
|
278
|
+
TooltipContent: weaker2,
|
|
279
|
+
Input: strongerBorderLighterBackground,
|
|
280
|
+
TextArea: strongerBorderLighterBackground,
|
|
281
|
+
Tooltip: inverse1,
|
|
248
282
|
}
|
|
249
283
|
}
|
|
250
|
-
|
|
251
|
-
function getAltThemes(theme: SubTheme, inverse: SubTheme) {
|
|
252
|
-
const alt1 = applyMask(theme, masks.weaker, { skip })
|
|
253
|
-
const alt2 = applyMask(alt1, masks.weaker, { skip })
|
|
254
|
-
const active = applyMask(theme, masks.stronger2, { skip })
|
|
255
|
-
return addChildren({ alt1, alt2, active }, (name, theme) => {
|
|
256
|
-
return getComponentThemes(theme as any, inverse)
|
|
257
|
-
})
|
|
258
|
-
}
|
|
259
284
|
})
|
|
260
285
|
|
|
261
286
|
export const themes = {
|
|
262
287
|
...allThemes,
|
|
263
288
|
// bring back the full type, the rest use a subset to avoid clogging up ts,
|
|
264
289
|
// tamagui will be smart and use the top level themes as the type for useTheme() etc
|
|
265
|
-
light,
|
|
266
|
-
dark,
|
|
290
|
+
light: createTheme(palettes.light, lightTemplate, { nonInheritedValues: lightColors }),
|
|
291
|
+
dark: createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors }),
|
|
267
292
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA"}
|