@tamagui/themes 1.5.3 → 1.5.6
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 +16 -13
- package/dist/cjs/themes.js.map +2 -2
- package/dist/esm/themes.js +16 -13
- package/dist/esm/themes.js.map +2 -2
- package/dist/esm/themes.mjs +16 -13
- package/dist/esm/themes.mjs.map +2 -2
- package/package.json +6 -6
- package/src/themes.tsx +27 -21
- package/types/themes.d.ts +947 -875
- package/types/themes.d.ts.map +1 -1
package/dist/cjs/themes.js
CHANGED
|
@@ -45,7 +45,7 @@ const palettes = {
|
|
|
45
45
|
light: [
|
|
46
46
|
lightTransparent,
|
|
47
47
|
"#fff",
|
|
48
|
-
"#
|
|
48
|
+
"#f9f9f9",
|
|
49
49
|
"hsl(0, 0%, 99.0%)",
|
|
50
50
|
"hsl(0, 0%, 97.3%)",
|
|
51
51
|
"hsl(0, 0%, 95.1%)",
|
|
@@ -103,8 +103,8 @@ const template = {
|
|
|
103
103
|
borderColorFocus: 4,
|
|
104
104
|
placeholderColor: -4
|
|
105
105
|
};
|
|
106
|
-
const lightShadowColor = "rgba(0,0,0,0.
|
|
107
|
-
const lightShadowColorStrong = "rgba(0,0,0,0.
|
|
106
|
+
const lightShadowColor = "rgba(0,0,0,0.02)";
|
|
107
|
+
const lightShadowColorStrong = "rgba(0,0,0,0.066)";
|
|
108
108
|
const darkShadowColor = "rgba(0,0,0,0.2)";
|
|
109
109
|
const darkShadowColorStrong = "rgba(0,0,0,0.3)";
|
|
110
110
|
const lightShadows = {
|
|
@@ -121,11 +121,10 @@ const darkShadows = {
|
|
|
121
121
|
};
|
|
122
122
|
const lightTemplate = {
|
|
123
123
|
...template,
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
backgroundStrong: 2,
|
|
124
|
+
borderColor: 3,
|
|
125
|
+
borderColorHover: 4,
|
|
126
|
+
borderColorPress: 2,
|
|
127
|
+
borderColorFocus: 3,
|
|
129
128
|
...lightShadows
|
|
130
129
|
};
|
|
131
130
|
const darkTemplate = { ...template, ...darkShadows };
|
|
@@ -168,12 +167,14 @@ const allThemes = (0, import_create_theme.addChildren)(baseThemes, (name, themeI
|
|
|
168
167
|
return Object.fromEntries(
|
|
169
168
|
Object.keys(colorSet).map((color) => {
|
|
170
169
|
const colorPalette = Object.values(colorSet[color]);
|
|
171
|
-
const
|
|
172
|
-
|
|
170
|
+
const [head, tail] = [
|
|
171
|
+
colorPalette.slice(0, 6),
|
|
172
|
+
colorPalette.slice(colorPalette.length - 5)
|
|
173
|
+
];
|
|
173
174
|
const palette = [
|
|
174
175
|
transparent(colorPalette[0]),
|
|
175
|
-
...
|
|
176
|
-
...
|
|
176
|
+
...head,
|
|
177
|
+
...tail,
|
|
177
178
|
theme.color,
|
|
178
179
|
transparent(colorPalette[colorPalette.length - 1])
|
|
179
180
|
];
|
|
@@ -200,6 +201,7 @@ const allThemes = (0, import_create_theme.addChildren)(baseThemes, (name, themeI
|
|
|
200
201
|
const inverse1 = (0, import_create_theme.applyMask)(inverse, masks.weaker, { skip });
|
|
201
202
|
const inverse2 = (0, import_create_theme.applyMask)(inverse1, masks.weaker, { skip });
|
|
202
203
|
return {
|
|
204
|
+
Card: stronger1,
|
|
203
205
|
Button: stronger2,
|
|
204
206
|
DrawerFrame: stronger1,
|
|
205
207
|
SliderTrack: theme2,
|
|
@@ -224,7 +226,8 @@ const allThemes = (0, import_create_theme.addChildren)(baseThemes, (name, themeI
|
|
|
224
226
|
});
|
|
225
227
|
const themes = {
|
|
226
228
|
...allThemes,
|
|
227
|
-
// bring back the full type
|
|
229
|
+
// bring back the full type, the rest use a subset to avoid clogging up ts,
|
|
230
|
+
// tamagui will be smart and use the top level themes as the type for useTheme() etc
|
|
228
231
|
light,
|
|
229
232
|
dark
|
|
230
233
|
};
|
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 '#
|
|
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,
|
|
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 '#f9f9f9',\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: 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 borderColor: 3,\n borderColorHover: 4,\n borderColorPress: 2,\n borderColorFocus: 3,\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 SubTheme = { [key in keyof typeof lightTemplate]: string }\n\nconst baseThemes: {\n light: SubTheme\n dark: SubTheme\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 SubTheme\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 ColorName])\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(palette, isLight ? lightTemplate : darkTemplate)\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 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: SubTheme, inverse: SubTheme) {\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 Card: stronger1,\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: SubTheme, inverse: SubTheme) {\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 to avoid clogging up ts,\n // tamagui will be smart and use the top level themes as the type for useTheme() etc\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
|
@@ -28,7 +28,7 @@ const palettes = {
|
|
|
28
28
|
light: [
|
|
29
29
|
lightTransparent,
|
|
30
30
|
"#fff",
|
|
31
|
-
"#
|
|
31
|
+
"#f9f9f9",
|
|
32
32
|
"hsl(0, 0%, 99.0%)",
|
|
33
33
|
"hsl(0, 0%, 97.3%)",
|
|
34
34
|
"hsl(0, 0%, 95.1%)",
|
|
@@ -86,8 +86,8 @@ const template = {
|
|
|
86
86
|
borderColorFocus: 4,
|
|
87
87
|
placeholderColor: -4
|
|
88
88
|
};
|
|
89
|
-
const lightShadowColor = "rgba(0,0,0,0.
|
|
90
|
-
const lightShadowColorStrong = "rgba(0,0,0,0.
|
|
89
|
+
const lightShadowColor = "rgba(0,0,0,0.02)";
|
|
90
|
+
const lightShadowColorStrong = "rgba(0,0,0,0.066)";
|
|
91
91
|
const darkShadowColor = "rgba(0,0,0,0.2)";
|
|
92
92
|
const darkShadowColorStrong = "rgba(0,0,0,0.3)";
|
|
93
93
|
const lightShadows = {
|
|
@@ -104,11 +104,10 @@ const darkShadows = {
|
|
|
104
104
|
};
|
|
105
105
|
const lightTemplate = {
|
|
106
106
|
...template,
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
backgroundStrong: 2,
|
|
107
|
+
borderColor: 3,
|
|
108
|
+
borderColorHover: 4,
|
|
109
|
+
borderColorPress: 2,
|
|
110
|
+
borderColorFocus: 3,
|
|
112
111
|
...lightShadows
|
|
113
112
|
};
|
|
114
113
|
const darkTemplate = { ...template, ...darkShadows };
|
|
@@ -151,12 +150,14 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
151
150
|
return Object.fromEntries(
|
|
152
151
|
Object.keys(colorSet).map((color) => {
|
|
153
152
|
const colorPalette = Object.values(colorSet[color]);
|
|
154
|
-
const
|
|
155
|
-
|
|
153
|
+
const [head, tail] = [
|
|
154
|
+
colorPalette.slice(0, 6),
|
|
155
|
+
colorPalette.slice(colorPalette.length - 5)
|
|
156
|
+
];
|
|
156
157
|
const palette = [
|
|
157
158
|
transparent(colorPalette[0]),
|
|
158
|
-
...
|
|
159
|
-
...
|
|
159
|
+
...head,
|
|
160
|
+
...tail,
|
|
160
161
|
theme.color,
|
|
161
162
|
transparent(colorPalette[colorPalette.length - 1])
|
|
162
163
|
];
|
|
@@ -183,6 +184,7 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
183
184
|
const inverse1 = applyMask(inverse, masks.weaker, { skip });
|
|
184
185
|
const inverse2 = applyMask(inverse1, masks.weaker, { skip });
|
|
185
186
|
return {
|
|
187
|
+
Card: stronger1,
|
|
186
188
|
Button: stronger2,
|
|
187
189
|
DrawerFrame: stronger1,
|
|
188
190
|
SliderTrack: theme2,
|
|
@@ -207,7 +209,8 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
207
209
|
});
|
|
208
210
|
const themes = {
|
|
209
211
|
...allThemes,
|
|
210
|
-
// bring back the full type
|
|
212
|
+
// bring back the full type, the rest use a subset to avoid clogging up ts,
|
|
213
|
+
// tamagui will be smart and use the top level themes as the type for useTheme() etc
|
|
211
214
|
light,
|
|
212
215
|
dark
|
|
213
216
|
};
|
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 '#
|
|
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,
|
|
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 '#f9f9f9',\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: 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 borderColor: 3,\n borderColorHover: 4,\n borderColorPress: 2,\n borderColorFocus: 3,\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 SubTheme = { [key in keyof typeof lightTemplate]: string }\n\nconst baseThemes: {\n light: SubTheme\n dark: SubTheme\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 SubTheme\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 ColorName])\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(palette, isLight ? lightTemplate : darkTemplate)\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 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: SubTheme, inverse: SubTheme) {\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 Card: stronger1,\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: SubTheme, inverse: SubTheme) {\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 to avoid clogging up ts,\n // tamagui will be smart and use the top level themes as the type for useTheme() etc\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
|
@@ -28,7 +28,7 @@ const palettes = {
|
|
|
28
28
|
light: [
|
|
29
29
|
lightTransparent,
|
|
30
30
|
"#fff",
|
|
31
|
-
"#
|
|
31
|
+
"#f9f9f9",
|
|
32
32
|
"hsl(0, 0%, 99.0%)",
|
|
33
33
|
"hsl(0, 0%, 97.3%)",
|
|
34
34
|
"hsl(0, 0%, 95.1%)",
|
|
@@ -86,8 +86,8 @@ const template = {
|
|
|
86
86
|
borderColorFocus: 4,
|
|
87
87
|
placeholderColor: -4
|
|
88
88
|
};
|
|
89
|
-
const lightShadowColor = "rgba(0,0,0,0.
|
|
90
|
-
const lightShadowColorStrong = "rgba(0,0,0,0.
|
|
89
|
+
const lightShadowColor = "rgba(0,0,0,0.02)";
|
|
90
|
+
const lightShadowColorStrong = "rgba(0,0,0,0.066)";
|
|
91
91
|
const darkShadowColor = "rgba(0,0,0,0.2)";
|
|
92
92
|
const darkShadowColorStrong = "rgba(0,0,0,0.3)";
|
|
93
93
|
const lightShadows = {
|
|
@@ -104,11 +104,10 @@ const darkShadows = {
|
|
|
104
104
|
};
|
|
105
105
|
const lightTemplate = {
|
|
106
106
|
...template,
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
backgroundStrong: 2,
|
|
107
|
+
borderColor: 3,
|
|
108
|
+
borderColorHover: 4,
|
|
109
|
+
borderColorPress: 2,
|
|
110
|
+
borderColorFocus: 3,
|
|
112
111
|
...lightShadows
|
|
113
112
|
};
|
|
114
113
|
const darkTemplate = { ...template, ...darkShadows };
|
|
@@ -151,12 +150,14 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
151
150
|
return Object.fromEntries(
|
|
152
151
|
Object.keys(colorSet).map((color) => {
|
|
153
152
|
const colorPalette = Object.values(colorSet[color]);
|
|
154
|
-
const
|
|
155
|
-
|
|
153
|
+
const [head, tail] = [
|
|
154
|
+
colorPalette.slice(0, 6),
|
|
155
|
+
colorPalette.slice(colorPalette.length - 5)
|
|
156
|
+
];
|
|
156
157
|
const palette = [
|
|
157
158
|
transparent(colorPalette[0]),
|
|
158
|
-
...
|
|
159
|
-
...
|
|
159
|
+
...head,
|
|
160
|
+
...tail,
|
|
160
161
|
theme.color,
|
|
161
162
|
transparent(colorPalette[colorPalette.length - 1])
|
|
162
163
|
];
|
|
@@ -183,6 +184,7 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
183
184
|
const inverse1 = applyMask(inverse, masks.weaker, { skip });
|
|
184
185
|
const inverse2 = applyMask(inverse1, masks.weaker, { skip });
|
|
185
186
|
return {
|
|
187
|
+
Card: stronger1,
|
|
186
188
|
Button: stronger2,
|
|
187
189
|
DrawerFrame: stronger1,
|
|
188
190
|
SliderTrack: theme2,
|
|
@@ -207,7 +209,8 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
207
209
|
});
|
|
208
210
|
const themes = {
|
|
209
211
|
...allThemes,
|
|
210
|
-
// bring back the full type
|
|
212
|
+
// bring back the full type, the rest use a subset to avoid clogging up ts,
|
|
213
|
+
// tamagui will be smart and use the top level themes as the type for useTheme() etc
|
|
211
214
|
light,
|
|
212
215
|
dark
|
|
213
216
|
};
|
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 '#
|
|
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,
|
|
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 '#f9f9f9',\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: 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 borderColor: 3,\n borderColorHover: 4,\n borderColorPress: 2,\n borderColorFocus: 3,\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 SubTheme = { [key in keyof typeof lightTemplate]: string }\n\nconst baseThemes: {\n light: SubTheme\n dark: SubTheme\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 SubTheme\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 ColorName])\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(palette, isLight ? lightTemplate : darkTemplate)\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 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: SubTheme, inverse: SubTheme) {\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 Card: stronger1,\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: SubTheme, inverse: SubTheme) {\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 to avoid clogging up ts,\n // tamagui will be smart and use the top level themes as the type for useTheme() etc\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.5.
|
|
3
|
+
"version": "1.5.6",
|
|
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.6",
|
|
36
|
+
"@tamagui/core": "^1.5.6",
|
|
37
|
+
"@tamagui/create-theme": "^1.5.6",
|
|
38
|
+
"@tamagui/create-themes": "^1.5.6"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@tamagui/build": "^1.5.
|
|
41
|
+
"@tamagui/build": "^1.5.6"
|
|
42
42
|
},
|
|
43
43
|
"publishConfig": {
|
|
44
44
|
"access": "public"
|
package/src/themes.tsx
CHANGED
|
@@ -34,7 +34,7 @@ const palettes = {
|
|
|
34
34
|
light: [
|
|
35
35
|
lightTransparent,
|
|
36
36
|
'#fff',
|
|
37
|
-
'#
|
|
37
|
+
'#f9f9f9',
|
|
38
38
|
'hsl(0, 0%, 99.0%)',
|
|
39
39
|
'hsl(0, 0%, 97.3%)',
|
|
40
40
|
'hsl(0, 0%, 95.1%)',
|
|
@@ -99,8 +99,8 @@ const template = {
|
|
|
99
99
|
placeholderColor: -4,
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
-
const lightShadowColor = 'rgba(0,0,0,0.
|
|
103
|
-
const lightShadowColorStrong = 'rgba(0,0,0,0.
|
|
102
|
+
const lightShadowColor = 'rgba(0,0,0,0.02)'
|
|
103
|
+
const lightShadowColorStrong = 'rgba(0,0,0,0.066)'
|
|
104
104
|
const darkShadowColor = 'rgba(0,0,0,0.2)'
|
|
105
105
|
const darkShadowColorStrong = 'rgba(0,0,0,0.3)'
|
|
106
106
|
|
|
@@ -120,11 +120,10 @@ const darkShadows = {
|
|
|
120
120
|
|
|
121
121
|
const lightTemplate = {
|
|
122
122
|
...template,
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
backgroundStrong: 2,
|
|
123
|
+
borderColor: 3,
|
|
124
|
+
borderColorHover: 4,
|
|
125
|
+
borderColorPress: 2,
|
|
126
|
+
borderColorFocus: 3,
|
|
128
127
|
...lightShadows,
|
|
129
128
|
}
|
|
130
129
|
|
|
@@ -136,11 +135,11 @@ const light = createTheme(palettes.light, lightTemplate, {
|
|
|
136
135
|
|
|
137
136
|
const dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })
|
|
138
137
|
|
|
139
|
-
type
|
|
138
|
+
type SubTheme = { [key in keyof typeof lightTemplate]: string }
|
|
140
139
|
|
|
141
140
|
const baseThemes: {
|
|
142
|
-
light:
|
|
143
|
-
dark:
|
|
141
|
+
light: SubTheme
|
|
142
|
+
dark: SubTheme
|
|
144
143
|
} = {
|
|
145
144
|
light,
|
|
146
145
|
dark,
|
|
@@ -167,7 +166,7 @@ const masks = {
|
|
|
167
166
|
}
|
|
168
167
|
|
|
169
168
|
const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
170
|
-
const theme = themeIn as
|
|
169
|
+
const theme = themeIn as SubTheme
|
|
171
170
|
const isLight = name === 'light'
|
|
172
171
|
const inverseName = isLight ? 'dark' : 'light'
|
|
173
172
|
const inverseTheme = baseThemes[inverseName]
|
|
@@ -182,20 +181,25 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
182
181
|
return Object.fromEntries(
|
|
183
182
|
Object.keys(colorSet).map((color) => {
|
|
184
183
|
const colorPalette = Object.values(colorSet[color as ColorName])
|
|
185
|
-
//
|
|
186
|
-
const
|
|
187
|
-
|
|
184
|
+
// were re-ordering these
|
|
185
|
+
const [head, tail] = [
|
|
186
|
+
colorPalette.slice(0, 6),
|
|
187
|
+
colorPalette.slice(colorPalette.length - 5),
|
|
188
|
+
]
|
|
189
|
+
// add our transparent colors first/last
|
|
190
|
+
// and make sure the last (foreground) color is white/black rather than colorful
|
|
191
|
+
// this is mostly for consistency with the older theme-base
|
|
188
192
|
const palette = [
|
|
189
193
|
transparent(colorPalette[0]),
|
|
190
|
-
...
|
|
191
|
-
...
|
|
194
|
+
...head,
|
|
195
|
+
...tail,
|
|
192
196
|
theme.color,
|
|
193
197
|
transparent(colorPalette[colorPalette.length - 1]),
|
|
194
198
|
]
|
|
195
199
|
const colorTheme = createTheme(palette, isLight ? lightTemplate : darkTemplate)
|
|
196
200
|
return [color, colorTheme]
|
|
197
201
|
})
|
|
198
|
-
) as Record<ColorName,
|
|
202
|
+
) as Record<ColorName, SubTheme>
|
|
199
203
|
})
|
|
200
204
|
|
|
201
205
|
const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {
|
|
@@ -212,12 +216,13 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
212
216
|
...allColorThemes,
|
|
213
217
|
}
|
|
214
218
|
|
|
215
|
-
function getComponentThemes(theme:
|
|
219
|
+
function getComponentThemes(theme: SubTheme, inverse: SubTheme) {
|
|
216
220
|
const stronger1 = applyMask(theme, masks.stronger, { skip })
|
|
217
221
|
const stronger2 = applyMask(stronger1, masks.stronger, { skip })
|
|
218
222
|
const inverse1 = applyMask(inverse, masks.weaker, { skip })
|
|
219
223
|
const inverse2 = applyMask(inverse1, masks.weaker, { skip })
|
|
220
224
|
return {
|
|
225
|
+
Card: stronger1,
|
|
221
226
|
Button: stronger2,
|
|
222
227
|
DrawerFrame: stronger1,
|
|
223
228
|
SliderTrack: theme,
|
|
@@ -232,7 +237,7 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
232
237
|
}
|
|
233
238
|
}
|
|
234
239
|
|
|
235
|
-
function getAltThemes(theme:
|
|
240
|
+
function getAltThemes(theme: SubTheme, inverse: SubTheme) {
|
|
236
241
|
const alt1 = applyMask(theme, masks.weaker, { skip })
|
|
237
242
|
const alt2 = applyMask(alt1, masks.weaker, { skip })
|
|
238
243
|
const active = applyMask(theme, masks.stronger2, { skip })
|
|
@@ -244,7 +249,8 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
244
249
|
|
|
245
250
|
export const themes = {
|
|
246
251
|
...allThemes,
|
|
247
|
-
// bring back the full type
|
|
252
|
+
// bring back the full type, the rest use a subset to avoid clogging up ts,
|
|
253
|
+
// tamagui will be smart and use the top level themes as the type for useTheme() etc
|
|
248
254
|
light,
|
|
249
255
|
dark,
|
|
250
256
|
}
|