@tamagui/themes 1.4.0 → 1.5.1
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 +24 -11
- package/dist/cjs/themes.js.map +2 -2
- package/dist/esm/themes.js +24 -11
- package/dist/esm/themes.js.map +2 -2
- package/dist/esm/themes.mjs +24 -11
- package/dist/esm/themes.mjs.map +2 -2
- package/package.json +6 -6
- package/src/themes.tsx +32 -14
- package/types/themes.d.ts +900 -1939
- package/types/themes.d.ts.map +1 -1
package/dist/cjs/themes.js
CHANGED
|
@@ -105,8 +105,8 @@ const template = {
|
|
|
105
105
|
};
|
|
106
106
|
const lightShadowColor = "rgba(0,0,0,0.15)";
|
|
107
107
|
const lightShadowColorStrong = "rgba(0,0,0,0.2)";
|
|
108
|
-
const darkShadowColor = "rgba(0,0,0,0.
|
|
109
|
-
const darkShadowColorStrong = "rgba(0,0,0,0.
|
|
108
|
+
const darkShadowColor = "rgba(0,0,0,0.3)";
|
|
109
|
+
const darkShadowColorStrong = "rgba(0,0,0,0.45)";
|
|
110
110
|
const lightShadows = {
|
|
111
111
|
shadowColor: lightShadowColorStrong,
|
|
112
112
|
shadowColorHover: lightShadowColorStrong,
|
|
@@ -143,9 +143,14 @@ const masks = {
|
|
|
143
143
|
by: 1,
|
|
144
144
|
min: 1,
|
|
145
145
|
max
|
|
146
|
+
}),
|
|
147
|
+
stronger2: (0, import_create_theme.createStrengthenMask)({
|
|
148
|
+
by: 2,
|
|
149
|
+
min: 1,
|
|
150
|
+
max
|
|
146
151
|
})
|
|
147
152
|
};
|
|
148
|
-
const
|
|
153
|
+
const allThemes = (0, import_create_theme.addChildren)(baseThemes, (name, themeIn) => {
|
|
149
154
|
const theme = themeIn;
|
|
150
155
|
const inverseName = name === "light" ? "dark" : "light";
|
|
151
156
|
const inverseTheme = baseThemes[inverseName];
|
|
@@ -175,16 +180,17 @@ const themes = (0, import_create_theme.addChildren)(baseThemes, (name, themeIn)
|
|
|
175
180
|
})
|
|
176
181
|
);
|
|
177
182
|
});
|
|
183
|
+
const allColorThemes = (0, import_create_theme.addChildren)(colorThemes, (colorName, colorTheme) => {
|
|
184
|
+
const inverse = inverseColorThemes[colorName];
|
|
185
|
+
return {
|
|
186
|
+
...getAltThemes(colorTheme, inverse),
|
|
187
|
+
...getComponentThemes(colorTheme, inverse)
|
|
188
|
+
};
|
|
189
|
+
});
|
|
178
190
|
return {
|
|
179
191
|
...getAltThemes(theme, inverseTheme),
|
|
180
192
|
...getComponentThemes(theme, inverseTheme),
|
|
181
|
-
...
|
|
182
|
-
const inverse = inverseColorThemes[colorName];
|
|
183
|
-
return {
|
|
184
|
-
...getAltThemes(colorTheme, inverse),
|
|
185
|
-
...getComponentThemes(colorTheme, inverse)
|
|
186
|
-
};
|
|
187
|
-
})
|
|
193
|
+
...allColorThemes
|
|
188
194
|
};
|
|
189
195
|
function getComponentThemes(theme2, inverse) {
|
|
190
196
|
const stronger1 = (0, import_create_theme.applyMask)(theme2, masks.stronger, { skip });
|
|
@@ -208,11 +214,18 @@ const themes = (0, import_create_theme.addChildren)(baseThemes, (name, themeIn)
|
|
|
208
214
|
function getAltThemes(theme2, inverse) {
|
|
209
215
|
const alt1 = (0, import_create_theme.applyMask)(theme2, masks.weaker, { skip });
|
|
210
216
|
const alt2 = (0, import_create_theme.applyMask)(alt1, masks.weaker, { skip });
|
|
211
|
-
|
|
217
|
+
const active = (0, import_create_theme.applyMask)(theme2, masks.stronger2, { skip });
|
|
218
|
+
return (0, import_create_theme.addChildren)({ alt1, alt2, active }, (name2, theme3) => {
|
|
212
219
|
return getComponentThemes(theme3, inverse);
|
|
213
220
|
});
|
|
214
221
|
}
|
|
215
222
|
});
|
|
223
|
+
const themes = {
|
|
224
|
+
...allThemes,
|
|
225
|
+
// bring back the full type (the rest use a subset)
|
|
226
|
+
light,
|
|
227
|
+
dark
|
|
228
|
+
};
|
|
216
229
|
// Annotate the CommonJS export names for ESM import in node:
|
|
217
230
|
0 && (module.exports = {
|
|
218
231
|
themes
|
package/dist/cjs/themes.js.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 '#090909',\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 '#f4f4f4',\n 'hsl(0, 0%, 99.0%)',\n 'hsl(0, 0%, 97.3%)',\n 'hsl(0, 0%, 95.1%)',\n 'hsl(0, 0%, 93.0%)',\n 'hsl(0, 0%, 90.9%)',\n 'hsl(0, 0%, 80.0%)',\n 'hsl(0, 0%, 56.1%)',\n 'hsl(0, 0%, 52.3%)',\n 'hsl(0, 0%, 43.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: 3,\n borderColorHover: 4,\n borderColorPress: 2,\n borderColorFocus: 3,\n placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.15)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.2)'\nconst darkShadowColor = 'rgba(0,0,0,0.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMO;AAEP,oBAAqD;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,EACH,GAAG;AACL;AAEA,MAAM,eAAe,EAAE,GAAG,UAAU,GAAG,YAAY;AAEnD,MAAM,YAAQ,iCAAY,SAAS,OAAO,eAAe;AAAA,EACvD,oBAAoB;AACtB,CAAC;AAED,MAAM,WAAO,iCAAY,SAAS,MAAM,cAAc,EAAE,oBAAoB,yBAAW,CAAC;
|
|
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 '#090909',\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 '#f4f4f4',\n 'hsl(0, 0%, 99.0%)',\n 'hsl(0, 0%, 97.3%)',\n 'hsl(0, 0%, 95.1%)',\n 'hsl(0, 0%, 93.0%)',\n 'hsl(0, 0%, 90.9%)',\n 'hsl(0, 0%, 80.0%)',\n 'hsl(0, 0%, 56.1%)',\n 'hsl(0, 0%, 52.3%)',\n 'hsl(0, 0%, 43.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: 3,\n borderColorHover: 4,\n borderColorPress: 2,\n borderColorFocus: 3,\n placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.15)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.2)'\nconst darkShadowColor = 'rgba(0,0,0,0.3)'\nconst darkShadowColorStrong = 'rgba(0,0,0,0.45)'\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 ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate, {\n nonInheritedValues: lightColors,\n})\n\nconst dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })\n\ntype Theme = { [key in keyof typeof lightTemplate]: string }\n\nconst baseThemes: {\n light: Theme\n dark: Theme\n} = {\n light,\n dark,\n}\n\n// avoid transparent ends\nconst max = palettes.dark.length - 1\nconst masks = {\n weaker: createWeakenMask({\n by: 1,\n min: 1,\n max,\n }),\n stronger: createStrengthenMask({\n by: 1,\n min: 1,\n max,\n }),\n stronger2: createStrengthenMask({\n by: 2,\n min: 1,\n max,\n }),\n}\n\nconst allThemes = addChildren(baseThemes, (name, themeIn) => {\n const theme = themeIn as Theme\n const inverseName = name === 'light' ? '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 ColorName])\n // we want a much lighter text color by default so swap them around a bit\n const first6 = colorPalette.slice(0, 6)\n const last5 = colorPalette.slice(colorPalette.length - 5)\n return [\n color,\n createTheme(\n [\n transparent(colorPalette[0]),\n ...first6,\n ...last5,\n theme.color,\n transparent(colorPalette[colorPalette.length - 1]),\n ],\n template\n ),\n ]\n })\n ) as Record<ColorName, Theme>\n })\n\n const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {\n const inverse = inverseColorThemes[colorName]\n return {\n ...getAltThemes(colorTheme as any, inverse as any),\n ...getComponentThemes(colorTheme as any, inverse as any),\n }\n })\n\n return {\n ...getAltThemes(theme, inverseTheme),\n ...getComponentThemes(theme, inverseTheme),\n ...allColorThemes,\n }\n\n function getComponentThemes(theme: Theme, inverse: Theme) {\n const stronger1 = applyMask(theme, masks.stronger, { skip })\n const stronger2 = applyMask(stronger1, masks.stronger, { skip })\n const inverse1 = applyMask(inverse, masks.weaker, { skip })\n const inverse2 = applyMask(inverse1, masks.weaker, { skip })\n return {\n Button: stronger2,\n DrawerFrame: stronger1,\n SliderTrack: theme,\n SliderTrackActive: stronger2,\n SliderThumb: inverse1,\n Progress: stronger1,\n ProgressIndicator: inverse,\n Switch: stronger2,\n SwitchThumb: inverse2,\n TooltipArrow: stronger1,\n TooltipContent: stronger2,\n }\n }\n\n function getAltThemes(theme: Theme, inverse: Theme) {\n const alt1 = applyMask(theme, masks.weaker, { skip })\n const alt2 = applyMask(alt1, masks.weaker, { skip })\n const active = applyMask(theme, masks.stronger2, { skip })\n return addChildren({ alt1, alt2, active }, (name, theme) => {\n return getComponentThemes(theme as any, inverse)\n })\n }\n})\n\nexport const themes = {\n ...allThemes,\n // bring back the full type (the rest use a subset)\n light,\n dark,\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["theme", "name"]
|
|
7
7
|
}
|
package/dist/esm/themes.js
CHANGED
|
@@ -88,8 +88,8 @@ const template = {
|
|
|
88
88
|
};
|
|
89
89
|
const lightShadowColor = "rgba(0,0,0,0.15)";
|
|
90
90
|
const lightShadowColorStrong = "rgba(0,0,0,0.2)";
|
|
91
|
-
const darkShadowColor = "rgba(0,0,0,0.
|
|
92
|
-
const darkShadowColorStrong = "rgba(0,0,0,0.
|
|
91
|
+
const darkShadowColor = "rgba(0,0,0,0.3)";
|
|
92
|
+
const darkShadowColorStrong = "rgba(0,0,0,0.45)";
|
|
93
93
|
const lightShadows = {
|
|
94
94
|
shadowColor: lightShadowColorStrong,
|
|
95
95
|
shadowColorHover: lightShadowColorStrong,
|
|
@@ -126,9 +126,14 @@ const masks = {
|
|
|
126
126
|
by: 1,
|
|
127
127
|
min: 1,
|
|
128
128
|
max
|
|
129
|
+
}),
|
|
130
|
+
stronger2: createStrengthenMask({
|
|
131
|
+
by: 2,
|
|
132
|
+
min: 1,
|
|
133
|
+
max
|
|
129
134
|
})
|
|
130
135
|
};
|
|
131
|
-
const
|
|
136
|
+
const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
132
137
|
const theme = themeIn;
|
|
133
138
|
const inverseName = name === "light" ? "dark" : "light";
|
|
134
139
|
const inverseTheme = baseThemes[inverseName];
|
|
@@ -158,16 +163,17 @@ const themes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
158
163
|
})
|
|
159
164
|
);
|
|
160
165
|
});
|
|
166
|
+
const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {
|
|
167
|
+
const inverse = inverseColorThemes[colorName];
|
|
168
|
+
return {
|
|
169
|
+
...getAltThemes(colorTheme, inverse),
|
|
170
|
+
...getComponentThemes(colorTheme, inverse)
|
|
171
|
+
};
|
|
172
|
+
});
|
|
161
173
|
return {
|
|
162
174
|
...getAltThemes(theme, inverseTheme),
|
|
163
175
|
...getComponentThemes(theme, inverseTheme),
|
|
164
|
-
...
|
|
165
|
-
const inverse = inverseColorThemes[colorName];
|
|
166
|
-
return {
|
|
167
|
-
...getAltThemes(colorTheme, inverse),
|
|
168
|
-
...getComponentThemes(colorTheme, inverse)
|
|
169
|
-
};
|
|
170
|
-
})
|
|
176
|
+
...allColorThemes
|
|
171
177
|
};
|
|
172
178
|
function getComponentThemes(theme2, inverse) {
|
|
173
179
|
const stronger1 = applyMask(theme2, masks.stronger, { skip });
|
|
@@ -191,11 +197,18 @@ const themes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
191
197
|
function getAltThemes(theme2, inverse) {
|
|
192
198
|
const alt1 = applyMask(theme2, masks.weaker, { skip });
|
|
193
199
|
const alt2 = applyMask(alt1, masks.weaker, { skip });
|
|
194
|
-
|
|
200
|
+
const active = applyMask(theme2, masks.stronger2, { skip });
|
|
201
|
+
return addChildren({ alt1, alt2, active }, (name2, theme3) => {
|
|
195
202
|
return getComponentThemes(theme3, inverse);
|
|
196
203
|
});
|
|
197
204
|
}
|
|
198
205
|
});
|
|
206
|
+
const themes = {
|
|
207
|
+
...allThemes,
|
|
208
|
+
// bring back the full type (the rest use a subset)
|
|
209
|
+
light,
|
|
210
|
+
dark
|
|
211
|
+
};
|
|
199
212
|
export {
|
|
200
213
|
themes
|
|
201
214
|
};
|
package/dist/esm/themes.js.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 '#090909',\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 '#f4f4f4',\n 'hsl(0, 0%, 99.0%)',\n 'hsl(0, 0%, 97.3%)',\n 'hsl(0, 0%, 95.1%)',\n 'hsl(0, 0%, 93.0%)',\n 'hsl(0, 0%, 90.9%)',\n 'hsl(0, 0%, 80.0%)',\n 'hsl(0, 0%, 56.1%)',\n 'hsl(0, 0%, 52.3%)',\n 'hsl(0, 0%, 43.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: 3,\n borderColorHover: 4,\n borderColorPress: 2,\n borderColorFocus: 3,\n placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.15)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.2)'\nconst darkShadowColor = 'rgba(0,0,0,0.
|
|
5
|
-
"mappings": "AAAA;AAAA,EACE;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,EACH,GAAG;AACL;AAEA,MAAM,eAAe,EAAE,GAAG,UAAU,GAAG,YAAY;AAEnD,MAAM,QAAQ,YAAY,SAAS,OAAO,eAAe;AAAA,EACvD,oBAAoB;AACtB,CAAC;AAED,MAAM,OAAO,YAAY,SAAS,MAAM,cAAc,EAAE,oBAAoB,WAAW,CAAC;
|
|
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 '#090909',\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 '#f4f4f4',\n 'hsl(0, 0%, 99.0%)',\n 'hsl(0, 0%, 97.3%)',\n 'hsl(0, 0%, 95.1%)',\n 'hsl(0, 0%, 93.0%)',\n 'hsl(0, 0%, 90.9%)',\n 'hsl(0, 0%, 80.0%)',\n 'hsl(0, 0%, 56.1%)',\n 'hsl(0, 0%, 52.3%)',\n 'hsl(0, 0%, 43.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: 3,\n borderColorHover: 4,\n borderColorPress: 2,\n borderColorFocus: 3,\n placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.15)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.2)'\nconst darkShadowColor = 'rgba(0,0,0,0.3)'\nconst darkShadowColorStrong = 'rgba(0,0,0,0.45)'\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 ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate, {\n nonInheritedValues: lightColors,\n})\n\nconst dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })\n\ntype Theme = { [key in keyof typeof lightTemplate]: string }\n\nconst baseThemes: {\n light: Theme\n dark: Theme\n} = {\n light,\n dark,\n}\n\n// avoid transparent ends\nconst max = palettes.dark.length - 1\nconst masks = {\n weaker: createWeakenMask({\n by: 1,\n min: 1,\n max,\n }),\n stronger: createStrengthenMask({\n by: 1,\n min: 1,\n max,\n }),\n stronger2: createStrengthenMask({\n by: 2,\n min: 1,\n max,\n }),\n}\n\nconst allThemes = addChildren(baseThemes, (name, themeIn) => {\n const theme = themeIn as Theme\n const inverseName = name === 'light' ? '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 ColorName])\n // we want a much lighter text color by default so swap them around a bit\n const first6 = colorPalette.slice(0, 6)\n const last5 = colorPalette.slice(colorPalette.length - 5)\n return [\n color,\n createTheme(\n [\n transparent(colorPalette[0]),\n ...first6,\n ...last5,\n theme.color,\n transparent(colorPalette[colorPalette.length - 1]),\n ],\n template\n ),\n ]\n })\n ) as Record<ColorName, Theme>\n })\n\n const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {\n const inverse = inverseColorThemes[colorName]\n return {\n ...getAltThemes(colorTheme as any, inverse as any),\n ...getComponentThemes(colorTheme as any, inverse as any),\n }\n })\n\n return {\n ...getAltThemes(theme, inverseTheme),\n ...getComponentThemes(theme, inverseTheme),\n ...allColorThemes,\n }\n\n function getComponentThemes(theme: Theme, inverse: Theme) {\n const stronger1 = applyMask(theme, masks.stronger, { skip })\n const stronger2 = applyMask(stronger1, masks.stronger, { skip })\n const inverse1 = applyMask(inverse, masks.weaker, { skip })\n const inverse2 = applyMask(inverse1, masks.weaker, { skip })\n return {\n Button: stronger2,\n DrawerFrame: stronger1,\n SliderTrack: theme,\n SliderTrackActive: stronger2,\n SliderThumb: inverse1,\n Progress: stronger1,\n ProgressIndicator: inverse,\n Switch: stronger2,\n SwitchThumb: inverse2,\n TooltipArrow: stronger1,\n TooltipContent: stronger2,\n }\n }\n\n function getAltThemes(theme: Theme, inverse: Theme) {\n const alt1 = applyMask(theme, masks.weaker, { skip })\n const alt2 = applyMask(alt1, masks.weaker, { skip })\n const active = applyMask(theme, masks.stronger2, { skip })\n return addChildren({ alt1, alt2, active }, (name, theme) => {\n return getComponentThemes(theme as any, inverse)\n })\n }\n})\n\nexport const themes = {\n ...allThemes,\n // bring back the full type (the rest use a subset)\n light,\n dark,\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["theme", "name"]
|
|
7
7
|
}
|
package/dist/esm/themes.mjs
CHANGED
|
@@ -88,8 +88,8 @@ const template = {
|
|
|
88
88
|
};
|
|
89
89
|
const lightShadowColor = "rgba(0,0,0,0.15)";
|
|
90
90
|
const lightShadowColorStrong = "rgba(0,0,0,0.2)";
|
|
91
|
-
const darkShadowColor = "rgba(0,0,0,0.
|
|
92
|
-
const darkShadowColorStrong = "rgba(0,0,0,0.
|
|
91
|
+
const darkShadowColor = "rgba(0,0,0,0.3)";
|
|
92
|
+
const darkShadowColorStrong = "rgba(0,0,0,0.45)";
|
|
93
93
|
const lightShadows = {
|
|
94
94
|
shadowColor: lightShadowColorStrong,
|
|
95
95
|
shadowColorHover: lightShadowColorStrong,
|
|
@@ -126,9 +126,14 @@ const masks = {
|
|
|
126
126
|
by: 1,
|
|
127
127
|
min: 1,
|
|
128
128
|
max
|
|
129
|
+
}),
|
|
130
|
+
stronger2: createStrengthenMask({
|
|
131
|
+
by: 2,
|
|
132
|
+
min: 1,
|
|
133
|
+
max
|
|
129
134
|
})
|
|
130
135
|
};
|
|
131
|
-
const
|
|
136
|
+
const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
132
137
|
const theme = themeIn;
|
|
133
138
|
const inverseName = name === "light" ? "dark" : "light";
|
|
134
139
|
const inverseTheme = baseThemes[inverseName];
|
|
@@ -158,16 +163,17 @@ const themes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
158
163
|
})
|
|
159
164
|
);
|
|
160
165
|
});
|
|
166
|
+
const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {
|
|
167
|
+
const inverse = inverseColorThemes[colorName];
|
|
168
|
+
return {
|
|
169
|
+
...getAltThemes(colorTheme, inverse),
|
|
170
|
+
...getComponentThemes(colorTheme, inverse)
|
|
171
|
+
};
|
|
172
|
+
});
|
|
161
173
|
return {
|
|
162
174
|
...getAltThemes(theme, inverseTheme),
|
|
163
175
|
...getComponentThemes(theme, inverseTheme),
|
|
164
|
-
...
|
|
165
|
-
const inverse = inverseColorThemes[colorName];
|
|
166
|
-
return {
|
|
167
|
-
...getAltThemes(colorTheme, inverse),
|
|
168
|
-
...getComponentThemes(colorTheme, inverse)
|
|
169
|
-
};
|
|
170
|
-
})
|
|
176
|
+
...allColorThemes
|
|
171
177
|
};
|
|
172
178
|
function getComponentThemes(theme2, inverse) {
|
|
173
179
|
const stronger1 = applyMask(theme2, masks.stronger, { skip });
|
|
@@ -191,11 +197,18 @@ const themes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
191
197
|
function getAltThemes(theme2, inverse) {
|
|
192
198
|
const alt1 = applyMask(theme2, masks.weaker, { skip });
|
|
193
199
|
const alt2 = applyMask(alt1, masks.weaker, { skip });
|
|
194
|
-
|
|
200
|
+
const active = applyMask(theme2, masks.stronger2, { skip });
|
|
201
|
+
return addChildren({ alt1, alt2, active }, (name2, theme3) => {
|
|
195
202
|
return getComponentThemes(theme3, inverse);
|
|
196
203
|
});
|
|
197
204
|
}
|
|
198
205
|
});
|
|
206
|
+
const themes = {
|
|
207
|
+
...allThemes,
|
|
208
|
+
// bring back the full type (the rest use a subset)
|
|
209
|
+
light,
|
|
210
|
+
dark
|
|
211
|
+
};
|
|
199
212
|
export {
|
|
200
213
|
themes
|
|
201
214
|
};
|
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 '#090909',\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 '#f4f4f4',\n 'hsl(0, 0%, 99.0%)',\n 'hsl(0, 0%, 97.3%)',\n 'hsl(0, 0%, 95.1%)',\n 'hsl(0, 0%, 93.0%)',\n 'hsl(0, 0%, 90.9%)',\n 'hsl(0, 0%, 80.0%)',\n 'hsl(0, 0%, 56.1%)',\n 'hsl(0, 0%, 52.3%)',\n 'hsl(0, 0%, 43.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: 3,\n borderColorHover: 4,\n borderColorPress: 2,\n borderColorFocus: 3,\n placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.15)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.2)'\nconst darkShadowColor = 'rgba(0,0,0,0.
|
|
5
|
-
"mappings": "AAAA;AAAA,EACE;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,EACH,GAAG;AACL;AAEA,MAAM,eAAe,EAAE,GAAG,UAAU,GAAG,YAAY;AAEnD,MAAM,QAAQ,YAAY,SAAS,OAAO,eAAe;AAAA,EACvD,oBAAoB;AACtB,CAAC;AAED,MAAM,OAAO,YAAY,SAAS,MAAM,cAAc,EAAE,oBAAoB,WAAW,CAAC;
|
|
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 '#090909',\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 '#f4f4f4',\n 'hsl(0, 0%, 99.0%)',\n 'hsl(0, 0%, 97.3%)',\n 'hsl(0, 0%, 95.1%)',\n 'hsl(0, 0%, 93.0%)',\n 'hsl(0, 0%, 90.9%)',\n 'hsl(0, 0%, 80.0%)',\n 'hsl(0, 0%, 56.1%)',\n 'hsl(0, 0%, 52.3%)',\n 'hsl(0, 0%, 43.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: 3,\n borderColorHover: 4,\n borderColorPress: 2,\n borderColorFocus: 3,\n placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.15)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.2)'\nconst darkShadowColor = 'rgba(0,0,0,0.3)'\nconst darkShadowColorStrong = 'rgba(0,0,0,0.45)'\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 ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate, {\n nonInheritedValues: lightColors,\n})\n\nconst dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })\n\ntype Theme = { [key in keyof typeof lightTemplate]: string }\n\nconst baseThemes: {\n light: Theme\n dark: Theme\n} = {\n light,\n dark,\n}\n\n// avoid transparent ends\nconst max = palettes.dark.length - 1\nconst masks = {\n weaker: createWeakenMask({\n by: 1,\n min: 1,\n max,\n }),\n stronger: createStrengthenMask({\n by: 1,\n min: 1,\n max,\n }),\n stronger2: createStrengthenMask({\n by: 2,\n min: 1,\n max,\n }),\n}\n\nconst allThemes = addChildren(baseThemes, (name, themeIn) => {\n const theme = themeIn as Theme\n const inverseName = name === 'light' ? '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 ColorName])\n // we want a much lighter text color by default so swap them around a bit\n const first6 = colorPalette.slice(0, 6)\n const last5 = colorPalette.slice(colorPalette.length - 5)\n return [\n color,\n createTheme(\n [\n transparent(colorPalette[0]),\n ...first6,\n ...last5,\n theme.color,\n transparent(colorPalette[colorPalette.length - 1]),\n ],\n template\n ),\n ]\n })\n ) as Record<ColorName, Theme>\n })\n\n const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {\n const inverse = inverseColorThemes[colorName]\n return {\n ...getAltThemes(colorTheme as any, inverse as any),\n ...getComponentThemes(colorTheme as any, inverse as any),\n }\n })\n\n return {\n ...getAltThemes(theme, inverseTheme),\n ...getComponentThemes(theme, inverseTheme),\n ...allColorThemes,\n }\n\n function getComponentThemes(theme: Theme, inverse: Theme) {\n const stronger1 = applyMask(theme, masks.stronger, { skip })\n const stronger2 = applyMask(stronger1, masks.stronger, { skip })\n const inverse1 = applyMask(inverse, masks.weaker, { skip })\n const inverse2 = applyMask(inverse1, masks.weaker, { skip })\n return {\n Button: stronger2,\n DrawerFrame: stronger1,\n SliderTrack: theme,\n SliderTrackActive: stronger2,\n SliderThumb: inverse1,\n Progress: stronger1,\n ProgressIndicator: inverse,\n Switch: stronger2,\n SwitchThumb: inverse2,\n TooltipArrow: stronger1,\n TooltipContent: stronger2,\n }\n }\n\n function getAltThemes(theme: Theme, inverse: Theme) {\n const alt1 = applyMask(theme, masks.weaker, { skip })\n const alt2 = applyMask(alt1, masks.weaker, { skip })\n const active = applyMask(theme, masks.stronger2, { skip })\n return addChildren({ alt1, alt2, active }, (name, theme) => {\n return getComponentThemes(theme as any, inverse)\n })\n }\n})\n\nexport const themes = {\n ...allThemes,\n // bring back the full type (the rest use a subset)\n light,\n dark,\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
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.
|
|
3
|
+
"version": "1.5.1",
|
|
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.
|
|
36
|
-
"@tamagui/core": "^1.
|
|
37
|
-
"@tamagui/create-theme": "^1.
|
|
38
|
-
"@tamagui/create-themes": "^1.
|
|
35
|
+
"@tamagui/colors": "^1.5.1",
|
|
36
|
+
"@tamagui/core": "^1.5.1",
|
|
37
|
+
"@tamagui/create-theme": "^1.5.1",
|
|
38
|
+
"@tamagui/create-themes": "^1.5.1"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@tamagui/build": "^1.
|
|
41
|
+
"@tamagui/build": "^1.5.1"
|
|
42
42
|
},
|
|
43
43
|
"publishConfig": {
|
|
44
44
|
"access": "public"
|
package/src/themes.tsx
CHANGED
|
@@ -101,8 +101,8 @@ const template = {
|
|
|
101
101
|
|
|
102
102
|
const lightShadowColor = 'rgba(0,0,0,0.15)'
|
|
103
103
|
const lightShadowColorStrong = 'rgba(0,0,0,0.2)'
|
|
104
|
-
const darkShadowColor = 'rgba(0,0,0,0.
|
|
105
|
-
const darkShadowColorStrong = 'rgba(0,0,0,0.
|
|
104
|
+
const darkShadowColor = 'rgba(0,0,0,0.3)'
|
|
105
|
+
const darkShadowColorStrong = 'rgba(0,0,0,0.45)'
|
|
106
106
|
|
|
107
107
|
const lightShadows = {
|
|
108
108
|
shadowColor: lightShadowColorStrong,
|
|
@@ -131,13 +131,16 @@ const light = createTheme(palettes.light, lightTemplate, {
|
|
|
131
131
|
|
|
132
132
|
const dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })
|
|
133
133
|
|
|
134
|
-
|
|
134
|
+
type Theme = { [key in keyof typeof lightTemplate]: string }
|
|
135
|
+
|
|
136
|
+
const baseThemes: {
|
|
137
|
+
light: Theme
|
|
138
|
+
dark: Theme
|
|
139
|
+
} = {
|
|
135
140
|
light,
|
|
136
141
|
dark,
|
|
137
142
|
}
|
|
138
143
|
|
|
139
|
-
type Theme = typeof light
|
|
140
|
-
|
|
141
144
|
// avoid transparent ends
|
|
142
145
|
const max = palettes.dark.length - 1
|
|
143
146
|
const masks = {
|
|
@@ -151,9 +154,14 @@ const masks = {
|
|
|
151
154
|
min: 1,
|
|
152
155
|
max,
|
|
153
156
|
}),
|
|
157
|
+
stronger2: createStrengthenMask({
|
|
158
|
+
by: 2,
|
|
159
|
+
min: 1,
|
|
160
|
+
max,
|
|
161
|
+
}),
|
|
154
162
|
}
|
|
155
163
|
|
|
156
|
-
|
|
164
|
+
const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
157
165
|
const theme = themeIn as Theme
|
|
158
166
|
const inverseName = name === 'light' ? 'dark' : 'light'
|
|
159
167
|
const inverseTheme = baseThemes[inverseName]
|
|
@@ -188,16 +196,18 @@ export const themes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
188
196
|
) as Record<ColorName, Theme>
|
|
189
197
|
})
|
|
190
198
|
|
|
199
|
+
const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {
|
|
200
|
+
const inverse = inverseColorThemes[colorName]
|
|
201
|
+
return {
|
|
202
|
+
...getAltThemes(colorTheme as any, inverse as any),
|
|
203
|
+
...getComponentThemes(colorTheme as any, inverse as any),
|
|
204
|
+
}
|
|
205
|
+
})
|
|
206
|
+
|
|
191
207
|
return {
|
|
192
208
|
...getAltThemes(theme, inverseTheme),
|
|
193
209
|
...getComponentThemes(theme, inverseTheme),
|
|
194
|
-
...
|
|
195
|
-
const inverse = inverseColorThemes[colorName]
|
|
196
|
-
return {
|
|
197
|
-
...getAltThemes(colorTheme as any, inverse as any),
|
|
198
|
-
...getComponentThemes(colorTheme as any, inverse as any),
|
|
199
|
-
}
|
|
200
|
-
}),
|
|
210
|
+
...allColorThemes,
|
|
201
211
|
}
|
|
202
212
|
|
|
203
213
|
function getComponentThemes(theme: Theme, inverse: Theme) {
|
|
@@ -223,8 +233,16 @@ export const themes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
223
233
|
function getAltThemes(theme: Theme, inverse: Theme) {
|
|
224
234
|
const alt1 = applyMask(theme, masks.weaker, { skip })
|
|
225
235
|
const alt2 = applyMask(alt1, masks.weaker, { skip })
|
|
226
|
-
|
|
236
|
+
const active = applyMask(theme, masks.stronger2, { skip })
|
|
237
|
+
return addChildren({ alt1, alt2, active }, (name, theme) => {
|
|
227
238
|
return getComponentThemes(theme as any, inverse)
|
|
228
239
|
})
|
|
229
240
|
}
|
|
230
241
|
})
|
|
242
|
+
|
|
243
|
+
export const themes = {
|
|
244
|
+
...allThemes,
|
|
245
|
+
// bring back the full type (the rest use a subset)
|
|
246
|
+
light,
|
|
247
|
+
dark,
|
|
248
|
+
}
|