@tamagui/theme-base 1.0.1-beta.18 → 1.0.1-beta.180
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/colorUtils.js +10 -10
- package/dist/cjs/colorUtils.js.map +1 -1
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/themes.js +196 -147
- package/dist/cjs/themes.js.map +3 -3
- package/dist/cjs/tokens.js +116 -30
- package/dist/cjs/tokens.js.map +2 -2
- package/dist/esm/colorUtils.js +10 -13
- package/dist/esm/colorUtils.js.map +1 -1
- package/dist/esm/index.js +0 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/themes.js +191 -134
- package/dist/esm/themes.js.map +3 -3
- package/dist/esm/tokens.js +126 -18
- package/dist/esm/tokens.js.map +2 -2
- package/package.json +16 -6
- package/src/colorUtils.tsx +42 -0
- package/src/index.tsx +3 -0
- package/src/themes.tsx +449 -0
- package/src/tokens.tsx +177 -0
- package/types/themes.d.ts +124 -4479
- package/types/tokens.d.ts +657 -197
- package/dist/jsx/colorUtils.js +0 -42
- package/dist/jsx/index.js +0 -3
- package/dist/jsx/themes.js +0 -244
- package/dist/jsx/tokens.js +0 -45
- package/types/colorUtils.d.ts.map +0 -1
- package/types/index.d.ts.map +0 -1
- package/types/themes.d.ts.map +0 -1
- package/types/tokens.d.ts.map +0 -1
package/dist/esm/themes.js
CHANGED
|
@@ -1,82 +1,123 @@
|
|
|
1
|
-
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
import * as Colors from "@tamagui/colors";
|
|
4
|
-
import { allDarkColors, allLightColors } from "@tamagui/colors";
|
|
5
|
-
import { getVariableValue } from "@tamagui/core";
|
|
1
|
+
import { createTheme, getVariableValue, isWeb } from "@tamagui/core";
|
|
6
2
|
import { setColorAlpha } from "./colorUtils";
|
|
7
|
-
import {
|
|
8
|
-
const alternates = [1, 2, 3
|
|
3
|
+
import { darkColors, lightColors } from "./tokens";
|
|
4
|
+
const alternates = [1, 2, 3];
|
|
5
|
+
const alts = [1, 2];
|
|
9
6
|
function createThemesFrom(name, getTheme, props) {
|
|
10
7
|
const { shift = 0 } = props;
|
|
11
8
|
const theme = getTheme(0 + shift, props);
|
|
12
9
|
let themeEntries = [[name, theme]];
|
|
13
10
|
const altThemes = alternates.map((alt) => [
|
|
11
|
+
`${name}_alt${alt}`,
|
|
12
|
+
getTheme(alt * 1 + shift, props)
|
|
13
|
+
]);
|
|
14
|
+
const altThemes2 = alternates.map((alt) => [
|
|
14
15
|
`${name}_alt${alt}`,
|
|
15
16
|
getTheme(alt + shift, props)
|
|
16
17
|
]);
|
|
17
18
|
const altButtonThemes = alternates.map((_, i) => {
|
|
18
|
-
const [bName, bTheme] = [
|
|
19
|
+
const [bName, bTheme] = [altThemes2[i][0], (altThemes2[i + 1] || altThemes2[i])[1]];
|
|
19
20
|
return [`${bName}_Button`, bTheme];
|
|
20
21
|
});
|
|
21
22
|
const darkerTheme = getTheme(Math.max(0, shift + (props.isLight ? 1 : -1)), props);
|
|
22
|
-
const activeTheme =
|
|
23
|
+
const activeTheme = props.activeTheme || {
|
|
24
|
+
...theme,
|
|
25
|
+
borderColor: props.backgrounds[7],
|
|
26
|
+
background: props.backgrounds[6],
|
|
27
|
+
backgroundHover: props.backgrounds[6],
|
|
28
|
+
backgroundPress: props.backgrounds[6]
|
|
29
|
+
};
|
|
30
|
+
const inverted = altThemes.map(([_name, theme2]) => {
|
|
31
|
+
return {
|
|
32
|
+
...theme2,
|
|
33
|
+
background: theme2.color,
|
|
34
|
+
backgroundHover: theme2.colorHover,
|
|
35
|
+
backgroundFocus: theme2.colorFocus,
|
|
36
|
+
backgroundPress: theme2.colorPress,
|
|
37
|
+
color: theme2.background,
|
|
38
|
+
colorHover: theme2.backgroundHover,
|
|
39
|
+
colorFocus: theme2.backgroundFocus,
|
|
40
|
+
colorPress: theme2.backgroundPress
|
|
41
|
+
};
|
|
42
|
+
});
|
|
23
43
|
themeEntries = [
|
|
24
44
|
...themeEntries,
|
|
25
|
-
...altThemes,
|
|
26
|
-
...altButtonThemes,
|
|
27
|
-
[`${name}_Button`,
|
|
45
|
+
...altThemes.slice(0, alts.length),
|
|
46
|
+
...altButtonThemes.slice(0, alts.length),
|
|
47
|
+
[`${name}_Button`, altThemes2[1][1]],
|
|
48
|
+
[`${name}_DrawerFrame`, altThemes2[1][1]],
|
|
49
|
+
[`${name}_SliderTrack`, altThemes[0][1]],
|
|
50
|
+
[`${name}_SliderTrackActive`, altThemes[2][1]],
|
|
51
|
+
[`${name}_SliderThumb`, inverted[2]],
|
|
52
|
+
[`${name}_Progress`, altThemes[2][1]],
|
|
53
|
+
[`${name}_ProgressIndicator`, inverted[2]],
|
|
54
|
+
[`${name}_Switch`, altThemes[0][1]],
|
|
55
|
+
[`${name}_SwitchThumb`, inverted[2]],
|
|
56
|
+
[`${name}_TooltipArrow`, altThemes[1][1]],
|
|
57
|
+
[`${name}_TooltipContent`, altThemes[1][1]],
|
|
28
58
|
[`${name}_darker`, darkerTheme],
|
|
29
59
|
[`${name}_active`, activeTheme]
|
|
30
60
|
];
|
|
31
61
|
const themes2 = Object.fromEntries(themeEntries);
|
|
32
62
|
return themes2;
|
|
33
63
|
}
|
|
34
|
-
|
|
35
|
-
const createTheme = /* @__PURE__ */ __name((str = 1, {
|
|
64
|
+
const themeCreator = (str = 1, {
|
|
36
65
|
backgrounds,
|
|
37
66
|
isLight = true,
|
|
38
67
|
isBase = false,
|
|
39
68
|
colors = [...backgrounds].reverse(),
|
|
40
69
|
borderColors = isLight ? colors : backgrounds,
|
|
41
|
-
|
|
70
|
+
backgroundStrong,
|
|
42
71
|
offsets: offsetsProp
|
|
43
72
|
}) => {
|
|
44
|
-
var _a, _b, _c, _d;
|
|
45
73
|
const offsets = {
|
|
46
|
-
borderColor: (
|
|
47
|
-
background: (
|
|
48
|
-
color: (
|
|
74
|
+
borderColor: (offsetsProp == null ? void 0 : offsetsProp.borderColor) ?? (offsetsProp == null ? void 0 : offsetsProp.background) ?? [0, 0, 0, 0],
|
|
75
|
+
background: (offsetsProp == null ? void 0 : offsetsProp.background) ?? [0, 0, 0, 0],
|
|
76
|
+
color: (offsetsProp == null ? void 0 : offsetsProp.color) ?? [0, 0, 0, 0]
|
|
49
77
|
};
|
|
50
|
-
const
|
|
78
|
+
const darkColors2 = isLight ? colors : backgrounds;
|
|
51
79
|
const lighterDir = isLight ? -1 : 1;
|
|
52
80
|
const darkerDir = -lighterDir;
|
|
53
81
|
const strongerDir = isLight ? darkerDir : lighterDir;
|
|
54
|
-
const
|
|
82
|
+
const softerDir = -strongerDir;
|
|
83
|
+
const get = (arr, index, name = "background") => {
|
|
55
84
|
return arr[Math.max(0, Math.min(index + (offsets[name][str] || 0), arr.length - 1))];
|
|
56
|
-
}
|
|
85
|
+
};
|
|
57
86
|
const colorTranslucent = setColorAlpha(getVariableValue(get(colors, 0 + str, "color")), 0.5);
|
|
58
|
-
|
|
87
|
+
const theme = {
|
|
59
88
|
background: get(backgrounds, str),
|
|
60
|
-
|
|
61
|
-
backgroundSoft: get(backgrounds, str +
|
|
62
|
-
backgroundHover: get(backgrounds, str +
|
|
63
|
-
backgroundPress: get(backgrounds, str + darkerDir
|
|
89
|
+
backgroundStrong: backgroundStrong || get(backgrounds, str + strongerDir * 2),
|
|
90
|
+
backgroundSoft: get(backgrounds, str + softerDir * 2),
|
|
91
|
+
backgroundHover: get(backgrounds, str + lighterDir),
|
|
92
|
+
backgroundPress: get(backgrounds, str + darkerDir),
|
|
64
93
|
backgroundFocus: get(backgrounds, str + darkerDir * 2),
|
|
65
|
-
backgroundTransparent:
|
|
94
|
+
backgroundTransparent: "hsla(0, 0%, 0%, 0.012)",
|
|
66
95
|
color: get(colors, 0 + str, "color"),
|
|
67
96
|
colorHover: get(colors, 1 + str, "color"),
|
|
68
97
|
colorPress: get(colors, 2 + str, "color"),
|
|
69
98
|
colorFocus: get(colors, 3 + str, "color"),
|
|
70
99
|
colorTranslucent,
|
|
71
|
-
colorMid: colors[Math.floor(colors.length / 2)],
|
|
72
|
-
shadowColor: isLight ?
|
|
73
|
-
shadowColorHover:
|
|
74
|
-
shadowColorPress:
|
|
75
|
-
shadowColorFocus:
|
|
100
|
+
colorMid: (isLight ? colors : backgrounds)[Math.floor(colors.length / 2)],
|
|
101
|
+
shadowColor: isLight ? "hsla(0, 0%, 0%, 0.03)" : "hsla(0, 0%, 0%, 0.2)",
|
|
102
|
+
shadowColorHover: darkColors2[!isLight ? 1 : 8],
|
|
103
|
+
shadowColorPress: darkColors2[!isLight ? 1 : 8],
|
|
104
|
+
shadowColorFocus: darkColors2[!isLight ? 1 : 8],
|
|
76
105
|
borderColor: null,
|
|
77
106
|
borderColorHover: null,
|
|
78
107
|
borderColorPress: null,
|
|
79
|
-
borderColorFocus: null
|
|
108
|
+
borderColorFocus: null,
|
|
109
|
+
color1: backgrounds[0],
|
|
110
|
+
color2: backgrounds[1],
|
|
111
|
+
color3: backgrounds[2],
|
|
112
|
+
color4: backgrounds[3],
|
|
113
|
+
color5: backgrounds[4],
|
|
114
|
+
color6: backgrounds[5],
|
|
115
|
+
color7: backgrounds[6],
|
|
116
|
+
color8: backgrounds[7],
|
|
117
|
+
color9: backgrounds[8],
|
|
118
|
+
color10: backgrounds[9],
|
|
119
|
+
color11: backgrounds[10],
|
|
120
|
+
color12: backgrounds[11]
|
|
80
121
|
};
|
|
81
122
|
if (isBase) {
|
|
82
123
|
Object.assign(theme, {
|
|
@@ -94,62 +135,52 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
|
|
|
94
135
|
});
|
|
95
136
|
}
|
|
96
137
|
return theme;
|
|
97
|
-
}
|
|
98
|
-
const
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
]
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
"#
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
"#494949",
|
|
139
|
-
"#545454",
|
|
140
|
-
"#626262",
|
|
141
|
-
"#777777"
|
|
142
|
-
];
|
|
143
|
-
const lightThemes = createThemesFrom("light", createTheme, {
|
|
144
|
-
backgrounds: lightGradient,
|
|
145
|
-
backgroundStronger: "#fcfcfc",
|
|
146
|
-
borderColors: lightGradient.slice(2),
|
|
147
|
-
isLight: true
|
|
138
|
+
};
|
|
139
|
+
const themeColors = {
|
|
140
|
+
light: [
|
|
141
|
+
"#fff",
|
|
142
|
+
"#f4f4f4",
|
|
143
|
+
"hsl(0, 0%, 99.0%)",
|
|
144
|
+
"hsl(0, 0%, 97.3%)",
|
|
145
|
+
"hsl(0, 0%, 95.1%)",
|
|
146
|
+
"hsl(0, 0%, 93.0%)",
|
|
147
|
+
"hsl(0, 0%, 90.9%)",
|
|
148
|
+
"hsl(0, 0%, 88.7%)",
|
|
149
|
+
"hsl(0, 0%, 85.8%)",
|
|
150
|
+
"hsl(0, 0%, 78.0%)",
|
|
151
|
+
"hsl(0, 0%, 56.1%)",
|
|
152
|
+
"hsl(0, 0%, 52.3%)",
|
|
153
|
+
"hsl(0, 0%, 43.5%)",
|
|
154
|
+
"hsl(0, 0%, 9.0%)"
|
|
155
|
+
],
|
|
156
|
+
dark: [
|
|
157
|
+
"#111111",
|
|
158
|
+
"#151515",
|
|
159
|
+
"#191919",
|
|
160
|
+
"#232323",
|
|
161
|
+
"#282828",
|
|
162
|
+
"#323232",
|
|
163
|
+
"#383838",
|
|
164
|
+
"#424242",
|
|
165
|
+
"#494949",
|
|
166
|
+
"#545454",
|
|
167
|
+
"#626262",
|
|
168
|
+
"#777777"
|
|
169
|
+
]
|
|
170
|
+
};
|
|
171
|
+
const lightThemes = createThemesFrom("light", themeCreator, {
|
|
172
|
+
backgrounds: themeColors.light,
|
|
173
|
+
backgroundStrong: isWeb ? "#fefefe" : "#f2f2f2",
|
|
174
|
+
borderColors: themeColors.light.slice(2),
|
|
175
|
+
isLight: true,
|
|
176
|
+
offsets: {
|
|
177
|
+
background: [2, 2, 2, 2, 2, 2]
|
|
178
|
+
}
|
|
148
179
|
});
|
|
149
|
-
const darkThemes = createThemesFrom("dark",
|
|
150
|
-
backgrounds:
|
|
151
|
-
colors:
|
|
152
|
-
|
|
180
|
+
const darkThemes = createThemesFrom("dark", themeCreator, {
|
|
181
|
+
backgrounds: themeColors.dark,
|
|
182
|
+
colors: themeColors.light.slice(2),
|
|
183
|
+
backgroundStrong: "#070707",
|
|
153
184
|
isBase: true,
|
|
154
185
|
isLight: false,
|
|
155
186
|
shift: 1,
|
|
@@ -157,52 +188,78 @@ const darkThemes = createThemesFrom("dark", createTheme, {
|
|
|
157
188
|
color: [0, 4, 5, 5, 5, 5]
|
|
158
189
|
}
|
|
159
190
|
});
|
|
191
|
+
darkThemes.dark_darker.background = "#030303";
|
|
192
|
+
darkThemes.dark_darker.backgroundStrong = "#000";
|
|
193
|
+
const light = createTheme({
|
|
194
|
+
...lightColors,
|
|
195
|
+
...lightThemes.light
|
|
196
|
+
});
|
|
197
|
+
const dark = createTheme({
|
|
198
|
+
...darkColors,
|
|
199
|
+
...darkThemes.dark
|
|
200
|
+
});
|
|
160
201
|
const baseThemes = {
|
|
161
202
|
...lightThemes,
|
|
162
|
-
light
|
|
163
|
-
|
|
164
|
-
...lightThemes.light
|
|
165
|
-
},
|
|
166
|
-
light_active: makeActiveTheme(lightThemes.light),
|
|
203
|
+
light,
|
|
204
|
+
light_active: lightThemes.light,
|
|
167
205
|
light_Card: lightThemes.light,
|
|
206
|
+
light_SliderTrack: lightThemes.light_alt1,
|
|
207
|
+
light_SliderTrackActive: lightThemes.light_alt2,
|
|
208
|
+
light_Switch: lightThemes.light_alt2,
|
|
209
|
+
light_SwitchThumb: lightThemes.light,
|
|
168
210
|
light_DrawerFrame: lightThemes.light_alt1,
|
|
169
|
-
light_Button: lightThemes.light_alt1,
|
|
170
211
|
...darkThemes,
|
|
171
|
-
dark
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
212
|
+
dark,
|
|
213
|
+
dark_active: darkThemes.dark,
|
|
214
|
+
dark_Card: darkThemes.dark,
|
|
215
|
+
dark_DrawerFrame: darkThemes.dark_alt1,
|
|
216
|
+
dark_SliderTrack: darkThemes.dark_darker,
|
|
217
|
+
dark_SliderTrackActive: darkThemes.dark_alt2,
|
|
218
|
+
dark_Switch: darkThemes.dark_alt2,
|
|
219
|
+
dark_SwitchThumb: darkThemes.dark_darker,
|
|
178
220
|
dark_Button: darkThemes.dark_alt1
|
|
179
221
|
};
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
return res;
|
|
222
|
+
const darkEntries = Object.entries(dark);
|
|
223
|
+
const lightEntries = Object.entries(light);
|
|
224
|
+
function findColors(prefix, dark2 = false) {
|
|
225
|
+
return Object.fromEntries(
|
|
226
|
+
(dark2 ? darkEntries : lightEntries).filter(([k]) => k.startsWith(prefix))
|
|
227
|
+
);
|
|
187
228
|
}
|
|
188
|
-
|
|
189
|
-
|
|
229
|
+
const colorSchemes = [
|
|
230
|
+
{ name: "blue", colors: findColors("blue"), darkColors: findColors("blue", true) },
|
|
231
|
+
{ name: "gray", colors: findColors("gray"), darkColors: findColors("gray", true) },
|
|
232
|
+
{ name: "green", colors: findColors("green"), darkColors: findColors("green", true) },
|
|
233
|
+
{ name: "orange", colors: findColors("orange"), darkColors: findColors("orange", true) },
|
|
234
|
+
{ name: "pink", colors: findColors("pink"), darkColors: findColors("pink", true) },
|
|
235
|
+
{ name: "purple", colors: findColors("purple"), darkColors: findColors("purple", true) },
|
|
236
|
+
{ name: "red", colors: findColors("red"), darkColors: findColors("red", true) },
|
|
237
|
+
{ name: "yellow", colors: findColors("yellow"), darkColors: findColors("yellow", true) }
|
|
238
|
+
];
|
|
239
|
+
const colorNames = [
|
|
240
|
+
"blue",
|
|
241
|
+
"green",
|
|
242
|
+
"orange",
|
|
243
|
+
"pink",
|
|
244
|
+
"purple",
|
|
245
|
+
"red",
|
|
246
|
+
"yellow",
|
|
247
|
+
"gray"
|
|
248
|
+
];
|
|
249
|
+
const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors: darkColors2 }) => {
|
|
190
250
|
const [altLightThemes, altDarkThemes] = [
|
|
191
|
-
{ colors:
|
|
192
|
-
{ colors, backgrounds:
|
|
251
|
+
{ colors: darkColors2, backgrounds: colors },
|
|
252
|
+
{ colors, backgrounds: darkColors2 }
|
|
193
253
|
].map((props, i) => {
|
|
194
254
|
const isLight = i === 0;
|
|
255
|
+
const colorsBase = Object.values(props.colors).slice(2);
|
|
195
256
|
const [backgrounds, colors2] = [
|
|
196
257
|
Object.values(props.backgrounds),
|
|
197
|
-
|
|
258
|
+
isLight ? colorsBase : [colorsBase[0], "#ccc", ...colorsBase.slice(1)]
|
|
198
259
|
];
|
|
199
260
|
const scheme = isLight ? "light" : "dark";
|
|
200
261
|
const shift = isLight ? 0 : 1;
|
|
201
|
-
|
|
202
|
-
const [_, h, sp, lp] = backgrounds[0].match(/hsl\(([0-9\.]+), ([0-9\.]+)\%, ([0-9\.]+)\%\)/);
|
|
203
|
-
backgrounds.unshift(`hsl(${h}, ${sp}%, ${parseFloat(lp) / 2}%)`);
|
|
204
|
-
}
|
|
205
|
-
const themeWithAlts = createThemesFrom(name, createTheme, {
|
|
262
|
+
const themeWithAlts = createThemesFrom(name, themeCreator, {
|
|
206
263
|
colors: colors2,
|
|
207
264
|
backgrounds,
|
|
208
265
|
borderColors: backgrounds,
|
|
@@ -210,36 +267,36 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) =>
|
|
|
210
267
|
shift,
|
|
211
268
|
isBase: false,
|
|
212
269
|
offsets: {
|
|
213
|
-
background: isLight ? [
|
|
270
|
+
background: isLight ? [2, 2, 2, 2, 2, 2] : null,
|
|
214
271
|
borderColor: isLight ? [2, 2, 2, 3, 2] : null,
|
|
215
272
|
color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1]
|
|
216
273
|
}
|
|
217
274
|
});
|
|
218
275
|
return Object.entries(themeWithAlts).map(([k, v]) => [`${scheme}_${k}`, v]);
|
|
219
276
|
});
|
|
220
|
-
|
|
221
|
-
const darkButtonTheme = altDarkThemes[0];
|
|
222
|
-
return [
|
|
223
|
-
...altLightThemes,
|
|
224
|
-
[`${lightButtonTheme[0]}_Button`, altLightThemes[2][1]],
|
|
225
|
-
[`${lightButtonTheme[0]}_Card`, altLightThemes[2][1]],
|
|
226
|
-
[`${lightButtonTheme[0]}_DrawerFrame`, altLightThemes[2][1]],
|
|
227
|
-
...altDarkThemes,
|
|
228
|
-
[`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]],
|
|
229
|
-
[`${darkButtonTheme[0]}_Card`, altDarkThemes[2][1]],
|
|
230
|
-
[`${darkButtonTheme[0]}_DrawerFrame`, altDarkThemes[2][1]]
|
|
231
|
-
];
|
|
277
|
+
return [...altLightThemes, ...altDarkThemes];
|
|
232
278
|
});
|
|
233
279
|
const colorThemes = Object.fromEntries(colorThemeEntries);
|
|
280
|
+
baseThemes.dark_active = {
|
|
281
|
+
...colorThemes.dark_blue_alt2,
|
|
282
|
+
background: darkColors.blue10,
|
|
283
|
+
backgroundHover: darkColors.blue11,
|
|
284
|
+
backgroundPress: darkColors.blue9,
|
|
285
|
+
backgroundFocus: darkColors.blue9,
|
|
286
|
+
color: darkColors.blue12,
|
|
287
|
+
colorHover: darkColors.blue12,
|
|
288
|
+
colorPress: darkColors.blue12,
|
|
289
|
+
colorFocus: darkColors.blue12
|
|
290
|
+
};
|
|
291
|
+
baseThemes.light_active = baseThemes.dark_active;
|
|
234
292
|
const allThemes = {
|
|
235
293
|
...baseThemes,
|
|
236
294
|
...colorThemes
|
|
237
295
|
};
|
|
238
296
|
const themes = allThemes;
|
|
239
297
|
export {
|
|
298
|
+
colorNames,
|
|
240
299
|
colorSchemes,
|
|
241
|
-
darkGradient,
|
|
242
|
-
lightGradient,
|
|
243
300
|
themes
|
|
244
301
|
};
|
|
245
302
|
//# sourceMappingURL=themes.js.map
|
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 * as Colors from '@tamagui/colors'\nimport { allDarkColors, allLightColors } from '@tamagui/colors'\nimport { Variable, getVariableValue } from '@tamagui/core'\n\nimport { setColorAlpha } from './colorUtils'\nimport { color } from './tokens'\n\n// spaghetti ahead\n\ntype ThemeCreatorProps = {\n shift?: number\n backgrounds: (string | Variable)[]\n backgroundStronger?: string | Variable\n borderColors?: (string | Variable)[]\n colors?: (string | Variable)[]\n offsets?: {\n color?: number[] | null\n background?: number[] | null\n borderColor?: number[] | null\n }\n isLight?: boolean\n isBase?: boolean\n}\n\n// helpers\n\nconst alternates = [1, 2, 3, 4] as const\ntype AltKeys = 1 | 2 | 3 | 4 // one less for dark_darker\ntype AltName<Name extends string, Keys extends string | number> = `${Name}_alt${Keys}`\ntype ThemeCreator<A = any> = (str: number, props: ThemeCreatorProps) => A\n\nfunction createThemesFrom<Name extends string, GetTheme extends ThemeCreator = ThemeCreator>(\n name: Name,\n getTheme: GetTheme,\n props: ThemeCreatorProps\n): {\n [key in `${Name}_alt${AltKeys}` | `${Name}` | `${Name}_darker`]: GetTheme extends ThemeCreator<\n infer Theme\n >\n ? Theme\n : never\n} {\n const { shift = 0 } = props\n const theme = getTheme(0 + shift, props)\n let themeEntries: any[] = [[name, theme]]\n const altThemes: any[] = alternates.map((alt) => [\n `${name}_alt${alt}`,\n getTheme(alt + shift, props),\n ])\n const altButtonThemes: any[] = alternates.map((_, i) => {\n const [bName, bTheme] = [altThemes[i][0], (altThemes[i + 1] || altThemes[i])[1]]\n return [`${bName}_Button` as any, bTheme]\n })\n // add these after alts since we rely on positioning\n const darkerTheme = getTheme(Math.max(0, shift + (props.isLight ? 1 : -1)), props)\n const activeTheme = makeActiveTheme(theme)\n themeEntries = [\n ...themeEntries,\n ...altThemes,\n ...altButtonThemes,\n [`${name}_Button`, altThemes[0][1]],\n [`${name}_darker`, darkerTheme],\n [`${name}_active`, activeTheme],\n ]\n const themes = Object.fromEntries(themeEntries)\n // if (props.isLight) {\n // console.log('themes', themes)\n // }\n return themes as any\n}\n\nconst createTheme = (\n str = 1,\n {\n backgrounds,\n isLight = true,\n isBase = false,\n colors = [...backgrounds].reverse(),\n borderColors = isLight ? colors : backgrounds,\n backgroundStronger,\n offsets: offsetsProp,\n }: ThemeCreatorProps\n) => {\n const offsets = {\n borderColor: offsetsProp?.borderColor ?? offsetsProp?.background ?? [0, 0, 0, 0],\n background: offsetsProp?.background ?? [0, 0, 0, 0],\n color: offsetsProp?.color ?? [0, 0, 0, 0],\n }\n const darkColors = isLight ? colors : backgrounds\n const lighterDir = isLight ? -1 : 1\n const darkerDir = -lighterDir\n const strongerDir = isLight ? darkerDir : lighterDir\n const get = (arr: any[], index: number, name = 'background') => {\n return arr[Math.max(0, Math.min(index + (offsets[name][str] || 0), arr.length - 1))]\n }\n\n const colorTranslucent = setColorAlpha(getVariableValue(get(colors, 0 + str, 'color')), 0.5)\n\n let theme = {\n background: get(backgrounds, str),\n backgroundStronger: backgroundStronger || get(backgrounds, str + strongerDir),\n backgroundSoft: get(backgrounds, str + 3),\n backgroundHover: get(backgrounds, str + strongerDir),\n backgroundPress: get(backgrounds, str + darkerDir * 1),\n backgroundFocus: get(backgrounds, str + darkerDir * 2),\n backgroundTransparent: color.grayA1,\n color: get(colors, 0 + str, 'color'),\n colorHover: get(colors, 1 + str, 'color'),\n colorPress: get(colors, 2 + str, 'color'),\n colorFocus: get(colors, 3 + str, 'color'),\n colorTranslucent,\n colorMid: colors[Math.floor(colors.length / 2)],\n shadowColor: isLight ? color.grayA2 : color.grayA8,\n shadowColorHover: darkColors[!isLight ? 1 : 8],\n shadowColorPress: darkColors[!isLight ? 1 : 8],\n shadowColorFocus: darkColors[!isLight ? 1 : 8],\n borderColor: null as any as string | Variable,\n borderColorHover: null as any as string | Variable,\n borderColorPress: null as any as string | Variable,\n borderColorFocus: null as any as string | Variable,\n }\n\n if (isBase) {\n Object.assign(theme, {\n borderColor: isLight\n ? get(colors, 8 - str, 'borderColor')\n : get(backgrounds, 2 + str, 'borderColor'),\n borderColorHover: isLight\n ? get(colors, 6 - str, 'borderColor')\n : get(backgrounds, 3 + str, 'borderColor'),\n borderColorPress: isLight\n ? get(colors, 5 - str, 'borderColor')\n : get(backgrounds, 1 + str, 'borderColor'),\n borderColorFocus: isLight\n ? get(colors, 4 - str, 'borderColor')\n : get(backgrounds, 3 + str, 'borderColor'),\n })\n } else {\n Object.assign(theme, {\n borderColor: get(borderColors, 1 + strongerDir, 'borderColor'),\n borderColorHover: get(borderColors, 2 + strongerDir, 'borderColor'),\n borderColorPress: get(borderColors, 3 + strongerDir, 'borderColor'),\n borderColorFocus: get(borderColors, 4 + strongerDir, 'borderColor'),\n })\n }\n\n return theme\n}\n\nexport const colorSchemes = [\n { name: 'blue', colors: Colors.blue, darkColors: Colors.blueDark },\n { name: 'gray', colors: Colors.gray, darkColors: Colors.grayDark },\n { name: 'green', colors: Colors.green, darkColors: Colors.greenDark },\n { name: 'indigo', colors: Colors.indigo, darkColors: Colors.indigoDark },\n { name: 'orange', colors: Colors.orange, darkColors: Colors.orangeDark },\n { name: 'pink', colors: Colors.pink, darkColors: Colors.pinkDark },\n { name: 'purple', colors: Colors.purple, darkColors: Colors.purpleDark },\n { name: 'red', colors: Colors.red, darkColors: Colors.redDark },\n { name: 'violet', colors: Colors.violet, darkColors: Colors.violetDark },\n { name: 'yellow', colors: Colors.yellow, darkColors: Colors.yellowDark },\n { name: 'teal', colors: Colors.teal, darkColors: Colors.tealDark },\n { name: 'lime', colors: Colors.lime, darkColors: Colors.limeDark },\n { name: 'brown', colors: Colors.brown, darkColors: Colors.brownDark },\n] as const\n\nexport type ColorNames = typeof colorSchemes[number]['name']\n\nexport const lightGradient = [\n '#fff',\n '#f4f4f4',\n color.gray1,\n color.gray2,\n color.gray3,\n color.gray4,\n color.gray5,\n color.gray6,\n color.gray7,\n color.gray8,\n color.gray9,\n color.gray10,\n color.gray11,\n color.gray12,\n]\n\nexport const darkGradient = [\n '#111111',\n '#151515',\n '#191919',\n '#232323',\n '#282828',\n '#323232',\n '#383838',\n '#424242',\n '#494949',\n '#545454',\n '#626262',\n '#777777',\n]\n\nconst lightThemes = createThemesFrom('light', createTheme, {\n backgrounds: lightGradient,\n // isBase: true,\n backgroundStronger: '#fcfcfc',\n borderColors: lightGradient.slice(2),\n isLight: true,\n})\n\nconst darkThemes = createThemesFrom('dark', createTheme, {\n backgrounds: darkGradient,\n colors: lightGradient.slice(2),\n backgroundStronger: '#111',\n isBase: true,\n isLight: false,\n shift: 1,\n offsets: {\n color: [0, 4, 5, 5, 5, 5],\n },\n})\n\nconst baseThemes = {\n // light\n ...lightThemes,\n light: {\n ...allLightColors,\n ...lightThemes.light,\n },\n light_active: makeActiveTheme(lightThemes.light),\n light_Card: lightThemes.light,\n light_DrawerFrame: lightThemes.light_alt1,\n light_Button: lightThemes.light_alt1,\n\n // dark\n ...darkThemes,\n dark: {\n ...allDarkColors,\n ...darkThemes.dark,\n },\n dark_active: makeActiveTheme(darkThemes.dark),\n dark_Card: darkThemes.dark_alt1,\n dark_DrawerFrame: darkThemes.dark_alt2,\n dark_Button: darkThemes.dark_alt1,\n}\n\nfunction makeActiveTheme(theme: any) {\n const res = { ...theme }\n res.backgroundHover = res.background\n res.colorHover = res.color\n res.backgroundPress = res.background\n res.colorPress = res.color\n return res\n}\n\ntype ColorThemeNames =\n | ColorNames\n | AltName<`light_${ColorNames}`, AltKeys>\n | AltName<`dark_${ColorNames}`, AltKeys>\n\nconst colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) => {\n const [altLightThemes, altDarkThemes] = [\n { colors: darkColors, backgrounds: colors },\n { colors, backgrounds: darkColors },\n ].map((props, i) => {\n const isLight = i === 0\n const [backgrounds, colors] = [\n Object.values(props.backgrounds),\n Object.values(props.colors).slice(isLight ? 2 : 2),\n ] as const\n\n const scheme = isLight ? 'light' : 'dark'\n const shift = isLight ? 0 : 1\n\n if (!isLight) {\n const [_, h, sp, lp] = backgrounds[0].match(/hsl\\(([0-9\\.]+), ([0-9\\.]+)\\%, ([0-9\\.]+)\\%\\)/)!\n backgrounds.unshift(`hsl(${h}, ${sp}%, ${parseFloat(lp) / 2}%)`)\n }\n\n const themeWithAlts = createThemesFrom(name, createTheme, {\n colors,\n backgrounds,\n borderColors: backgrounds,\n isLight,\n shift,\n isBase: false,\n offsets: {\n background: isLight ? [1, 1, 1, 1, 1, 1] : null,\n borderColor: isLight ? [2, 2, 2, 3, 2] : null,\n color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1],\n },\n })\n\n return Object.entries(themeWithAlts).map(([k, v]) => [`${scheme}_${k}`, v])\n })\n const lightButtonTheme = altLightThemes[0]\n const darkButtonTheme = altDarkThemes[0]\n return [\n ...altLightThemes,\n [`${lightButtonTheme[0]}_Button`, altLightThemes[2][1]],\n [`${lightButtonTheme[0]}_Card`, altLightThemes[2][1]],\n [`${lightButtonTheme[0]}_DrawerFrame`, altLightThemes[2][1]],\n ...altDarkThemes,\n [`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]],\n [`${darkButtonTheme[0]}_Card`, altDarkThemes[2][1]],\n [`${darkButtonTheme[0]}_DrawerFrame`, altDarkThemes[2][1]],\n ]\n})\n\ntype MyThemeBase = typeof baseThemes['light_alt1']\n\nconst colorThemes: {\n [key in ColorThemeNames]: MyThemeBase\n} = Object.fromEntries(colorThemeEntries) as any\n\nconst allThemes = {\n ...baseThemes,\n ...colorThemes,\n} as const\n\nexport const themes: {\n [key in keyof typeof allThemes]: typeof baseThemes['light']\n} = allThemes as any\n\n// TODO\n// export function createThemes(props: {\n// colors?:\n// | 'amber'\n// | 'blue'\n// | 'bronze'\n// | 'brown'\n// | 'crimson'\n// | 'cyan'\n// | 'gold'\n// | 'grass'\n// | 'gray'\n// | 'green'\n// | 'indigo'\n// | 'lime'\n// | 'mint'\n// | 'olive'\n// | 'orange'\n// | 'pink'\n// | 'plum'\n// | 'purple'\n// | 'mauve'\n// | 'red'\n// | 'sage'\n// | 'sand'\n// | 'sky'\n// | 'slate'\n// | 'teal'\n// | 'tomato'\n// | 'violet'\n// | 'yellow'\n// alternates?: number\n// }) {}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import { Variable, createTheme, getVariableValue, isWeb } from '@tamagui/core'\n\nimport { setColorAlpha } from './colorUtils'\nimport { darkColors, lightColors } from './tokens'\n\n// spaghetti ahead\n\ntype ThemeCreatorProps = {\n shift?: number\n backgrounds: (string | Variable)[]\n backgroundStrong?: string | Variable\n borderColors?: (string | Variable)[]\n colors?: (string | Variable)[]\n activeTheme?: any\n offsets?: {\n color?: number[] | null\n background?: number[] | null\n borderColor?: number[] | null\n }\n isLight?: boolean\n isBase?: boolean\n}\n\n// helpers\n\nconst alternates = [1, 2, 3] as const\nconst alts = [1, 2] as const\ntype AltKeys = 1 | 2\ntype AltName<Name extends string, Keys extends string | number> = `${Name}_alt${Keys}`\ntype ThemeCreator<A = any> = (str: number, props: ThemeCreatorProps) => A\n\ninterface SubTheme {\n background: Variable<any> | string\n backgroundStrong: Variable<any> | string\n backgroundSoft: Variable<any> | string\n backgroundHover: Variable<any> | string\n backgroundPress: Variable<any> | string\n backgroundFocus: Variable<any> | string\n backgroundTransparent: Variable<any> | string\n color: Variable<any> | string\n colorHover: Variable<any> | string\n colorPress: Variable<any> | string\n colorFocus: Variable<any> | string\n colorTranslucent: Variable<any> | string\n colorMid: Variable<any> | string\n shadowColor: Variable<any> | string\n shadowColorHover: Variable<any> | string\n shadowColorPress: Variable<any> | string\n shadowColorFocus: Variable<any> | string\n borderColor: Variable<any> | string\n borderColorHover: Variable<any> | string\n borderColorPress: Variable<any> | string\n borderColorFocus: Variable<any> | string\n color1: Variable<any> | string\n color2: Variable<any> | string\n color3: Variable<any> | string\n color4: Variable<any> | string\n color5: Variable<any> | string\n color6: Variable<any> | string\n color7: Variable<any> | string\n color8: Variable<any> | string\n color9: Variable<any> | string\n color10: Variable<any> | string\n color11: Variable<any> | string\n color12: Variable<any> | string\n}\n\nfunction createThemesFrom<Name extends string, GetTheme extends ThemeCreator = ThemeCreator>(\n name: Name,\n getTheme: GetTheme,\n props: ThemeCreatorProps\n): {\n [key in `${Name}_alt${AltKeys}` | `${Name}` | `${Name}_darker`]: GetTheme extends ThemeCreator<\n infer Theme\n >\n ? Theme\n : never\n} {\n const { shift = 0 } = props\n const theme = getTheme(0 + shift, props)\n let themeEntries: any[] = [[name, theme]]\n\n // generate alternates (for use in other themes), but keep just alts\n const altThemes: any[] = alternates.map((alt) => [\n `${name}_alt${alt}`,\n getTheme(alt * 1 + shift, props),\n ])\n const altThemes2: any[] = alternates.map((alt) => [\n `${name}_alt${alt}`,\n getTheme(alt + shift, props),\n ])\n const altButtonThemes: any[] = alternates.map((_, i) => {\n const [bName, bTheme] = [altThemes2[i][0], (altThemes2[i + 1] || altThemes2[i])[1]]\n return [`${bName}_Button` as any, bTheme]\n })\n // add these after alts since we rely on positioning\n const darkerTheme = getTheme(Math.max(0, shift + (props.isLight ? 1 : -1)), props)\n const activeTheme = props.activeTheme || {\n ...theme,\n borderColor: props.backgrounds[7],\n background: props.backgrounds[6],\n backgroundHover: props.backgrounds[6],\n backgroundPress: props.backgrounds[6],\n }\n\n // TODO can be de-duped\n const inverted = altThemes.map(([_name, theme]) => {\n return {\n ...theme,\n background: theme.color,\n backgroundHover: theme.colorHover,\n backgroundFocus: theme.colorFocus,\n backgroundPress: theme.colorPress,\n color: theme.background,\n colorHover: theme.backgroundHover,\n colorFocus: theme.backgroundFocus,\n colorPress: theme.backgroundPress,\n }\n })\n\n themeEntries = [\n ...themeEntries,\n // keep just alts\n ...altThemes.slice(0, alts.length),\n ...altButtonThemes.slice(0, alts.length),\n [`${name}_Button`, altThemes2[1][1]],\n [`${name}_DrawerFrame`, altThemes2[1][1]],\n [`${name}_SliderTrack`, altThemes[0][1]],\n [`${name}_SliderTrackActive`, altThemes[2][1]],\n [`${name}_SliderThumb`, inverted[2]],\n [`${name}_Progress`, altThemes[2][1]],\n [`${name}_ProgressIndicator`, inverted[2]],\n [`${name}_Switch`, altThemes[0][1]],\n [`${name}_SwitchThumb`, inverted[2]],\n [`${name}_TooltipArrow`, altThemes[1][1]],\n [`${name}_TooltipContent`, altThemes[1][1]],\n [`${name}_darker`, darkerTheme],\n [`${name}_active`, activeTheme],\n ]\n const themes = Object.fromEntries(themeEntries)\n // if (props.isLight) {\n // console.log('themes', themes)\n // }\n return themes as any\n}\n\nconst themeCreator = (\n str = 1,\n {\n backgrounds,\n isLight = true,\n isBase = false,\n colors = [...backgrounds].reverse(),\n borderColors = isLight ? colors : backgrounds,\n backgroundStrong,\n offsets: offsetsProp,\n }: ThemeCreatorProps\n) => {\n const offsets = {\n borderColor: offsetsProp?.borderColor ?? offsetsProp?.background ?? [0, 0, 0, 0],\n background: offsetsProp?.background ?? [0, 0, 0, 0],\n color: offsetsProp?.color ?? [0, 0, 0, 0],\n }\n const darkColors = isLight ? colors : backgrounds\n const lighterDir = isLight ? -1 : 1\n const darkerDir = -lighterDir\n const strongerDir = isLight ? darkerDir : lighterDir\n const softerDir = -strongerDir\n const get = (arr: any[], index: number, name = 'background') => {\n return arr[Math.max(0, Math.min(index + (offsets[name][str] || 0), arr.length - 1))]\n }\n\n const colorTranslucent = setColorAlpha(getVariableValue(get(colors, 0 + str, 'color')), 0.5)\n\n const theme: SubTheme = {\n background: get(backgrounds, str),\n backgroundStrong: backgroundStrong || get(backgrounds, str + strongerDir * 2),\n backgroundSoft: get(backgrounds, str + softerDir * 2),\n backgroundHover: get(backgrounds, str + lighterDir),\n backgroundPress: get(backgrounds, str + darkerDir),\n backgroundFocus: get(backgrounds, str + darkerDir * 2),\n backgroundTransparent: 'hsla(0, 0%, 0%, 0.012)',\n color: get(colors, 0 + str, 'color'),\n colorHover: get(colors, 1 + str, 'color'),\n colorPress: get(colors, 2 + str, 'color'),\n colorFocus: get(colors, 3 + str, 'color'),\n colorTranslucent,\n colorMid: (isLight ? colors : backgrounds)[Math.floor(colors.length / 2)],\n shadowColor: isLight ? 'hsla(0, 0%, 0%, 0.03)' : 'hsla(0, 0%, 0%, 0.2)',\n shadowColorHover: darkColors[!isLight ? 1 : 8],\n shadowColorPress: darkColors[!isLight ? 1 : 8],\n shadowColorFocus: darkColors[!isLight ? 1 : 8],\n borderColor: null as any as string | Variable,\n borderColorHover: null as any as string | Variable,\n borderColorPress: null as any as string | Variable,\n borderColorFocus: null as any as string | Variable,\n color1: backgrounds[0],\n color2: backgrounds[1],\n color3: backgrounds[2],\n color4: backgrounds[3],\n color5: backgrounds[4],\n color6: backgrounds[5],\n color7: backgrounds[6],\n color8: backgrounds[7],\n color9: backgrounds[8],\n color10: backgrounds[9],\n color11: backgrounds[10],\n color12: backgrounds[11],\n }\n\n if (isBase) {\n Object.assign(theme, {\n borderColor: isLight\n ? get(colors, 8 - str, 'borderColor')\n : get(backgrounds, 2 + str, 'borderColor'),\n borderColorHover: isLight\n ? get(colors, 6 - str, 'borderColor')\n : get(backgrounds, 3 + str, 'borderColor'),\n borderColorPress: isLight\n ? get(colors, 5 - str, 'borderColor')\n : get(backgrounds, 1 + str, 'borderColor'),\n borderColorFocus: isLight\n ? get(colors, 4 - str, 'borderColor')\n : get(backgrounds, 3 + str, 'borderColor'),\n })\n } else {\n Object.assign(theme, {\n borderColor: get(borderColors, 1 + strongerDir, 'borderColor'),\n borderColorHover: get(borderColors, 2 + strongerDir, 'borderColor'),\n borderColorPress: get(borderColors, 3 + strongerDir, 'borderColor'),\n borderColorFocus: get(borderColors, 4 + strongerDir, 'borderColor'),\n })\n }\n\n return theme\n}\n\nconst themeColors = {\n light: [\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%, 88.7%)',\n 'hsl(0, 0%, 85.8%)',\n 'hsl(0, 0%, 78.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 ],\n dark: [\n '#111111',\n '#151515',\n '#191919',\n '#232323',\n '#282828',\n '#323232',\n '#383838',\n '#424242',\n '#494949',\n '#545454',\n '#626262',\n '#777777',\n ],\n}\n\nconst lightThemes = createThemesFrom('light', themeCreator, {\n backgrounds: themeColors.light,\n // for now web non-ios style native is...\n backgroundStrong: isWeb ? '#fefefe' : '#f2f2f2',\n borderColors: themeColors.light.slice(2),\n isLight: true,\n offsets: {\n background: [2, 2, 2, 2, 2, 2],\n },\n})\n\nconst darkThemes = createThemesFrom('dark', themeCreator, {\n backgrounds: themeColors.dark,\n colors: themeColors.light.slice(2),\n backgroundStrong: '#070707',\n isBase: true,\n isLight: false,\n shift: 1,\n offsets: {\n color: [0, 4, 5, 5, 5, 5],\n },\n})\n\ndarkThemes.dark_darker.background = '#030303'\ndarkThemes.dark_darker.backgroundStrong = '#000'\n\ntype BaseTheme = {\n [key in keyof typeof lightColors | keyof SubTheme]: Variable<string>\n}\n\nconst light = createTheme({\n ...lightColors,\n ...lightThemes.light,\n}) as BaseTheme\n\nconst dark = createTheme({\n ...darkColors,\n ...darkThemes.dark,\n}) as BaseTheme\n\nconst baseThemes = {\n // light\n ...lightThemes,\n light,\n // reserving in types, updating later\n light_active: lightThemes.light,\n light_Card: lightThemes.light,\n light_SliderTrack: lightThemes.light_alt1,\n light_SliderTrackActive: lightThemes.light_alt2,\n light_Switch: lightThemes.light_alt2,\n light_SwitchThumb: lightThemes.light,\n light_DrawerFrame: lightThemes.light_alt1,\n\n // dark\n ...darkThemes,\n dark,\n // reserving in types, updating later\n dark_active: darkThemes.dark,\n dark_Card: darkThemes.dark,\n dark_DrawerFrame: darkThemes.dark_alt1,\n dark_SliderTrack: darkThemes.dark_darker,\n dark_SliderTrackActive: darkThemes.dark_alt2,\n dark_Switch: darkThemes.dark_alt2,\n dark_SwitchThumb: darkThemes.dark_darker,\n dark_Button: darkThemes.dark_alt1,\n}\n\nconst darkEntries = Object.entries(dark)\nconst lightEntries = Object.entries(light)\nfunction findColors(prefix: string, dark = false): BaseTheme {\n return Object.fromEntries(\n (dark ? darkEntries : lightEntries).filter(([k]) => k.startsWith(prefix))\n ) as any\n}\n\nexport const colorSchemes = [\n { name: 'blue', colors: findColors('blue'), darkColors: findColors('blue', true) },\n { name: 'gray', colors: findColors('gray'), darkColors: findColors('gray', true) },\n { name: 'green', colors: findColors('green'), darkColors: findColors('green', true) },\n { name: 'orange', colors: findColors('orange'), darkColors: findColors('orange', true) },\n { name: 'pink', colors: findColors('pink'), darkColors: findColors('pink', true) },\n { name: 'purple', colors: findColors('purple'), darkColors: findColors('purple', true) },\n { name: 'red', colors: findColors('red'), darkColors: findColors('red', true) },\n { name: 'yellow', colors: findColors('yellow'), darkColors: findColors('yellow', true) },\n] as const\n\nexport type ColorNames = typeof colorSchemes[number]['name']\n\n// nice and flat\nexport const colorNames: ColorNames[] = [\n 'blue',\n 'green',\n 'orange',\n 'pink',\n 'purple',\n 'red',\n 'yellow',\n 'gray',\n]\n\ntype ColorThemeNames =\n | ColorNames\n | AltName<`light_${ColorNames}`, AltKeys>\n | AltName<`dark_${ColorNames}`, AltKeys>\n\nconst colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) => {\n const [altLightThemes, altDarkThemes] = [\n { colors: darkColors, backgrounds: colors },\n { colors, backgrounds: darkColors },\n ].map((props, i) => {\n const isLight = i === 0\n const colorsBase = Object.values(props.colors).slice(2)\n const [backgrounds, colors] = [\n Object.values(props.backgrounds),\n isLight ? colorsBase : [colorsBase[0], '#ccc', ...colorsBase.slice(1)],\n ] as const\n\n const scheme = isLight ? 'light' : 'dark'\n const shift = isLight ? 0 : 1\n\n // if (!isLight) {\n // const [_, h, sp, lp] = backgrounds[0].match(/hsl\\(([0-9\\.]+), ([0-9\\.]+)\\%, ([0-9\\.]+)\\%\\)/)!\n // backgrounds.unshift(`hsl(${h}, ${sp}%, ${parseFloat(lp) / 2}%)`)\n // }\n\n const themeWithAlts = createThemesFrom(name, themeCreator, {\n // @ts-ignore\n colors,\n // @ts-ignore\n backgrounds,\n // @ts-ignore\n borderColors: backgrounds,\n isLight,\n shift,\n isBase: false,\n offsets: {\n background: isLight ? [2, 2, 2, 2, 2, 2] : null,\n borderColor: isLight ? [2, 2, 2, 3, 2] : null,\n color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1],\n },\n })\n\n return Object.entries(themeWithAlts).map(([k, v]) => [`${scheme}_${k}`, v])\n })\n return [...altLightThemes, ...altDarkThemes]\n})\n\ntype TypedColorTheme = typeof lightThemes.light_alt1\ntype TypedTheme = typeof light\ntype TypedThemes = {\n [key in keyof typeof allThemes]: TypedTheme\n}\n\nconst colorThemes: {\n [key in ColorThemeNames]: TypedColorTheme\n} = Object.fromEntries(colorThemeEntries) as any\n\n// add in base _active themes\nbaseThemes.dark_active = {\n ...colorThemes.dark_blue_alt2,\n background: darkColors.blue10,\n backgroundHover: darkColors.blue11,\n backgroundPress: darkColors.blue9,\n backgroundFocus: darkColors.blue9,\n color: darkColors.blue12,\n colorHover: darkColors.blue12,\n colorPress: darkColors.blue12,\n colorFocus: darkColors.blue12,\n}\n\n// light active uses light foregound, ios style\nbaseThemes.light_active = baseThemes.dark_active\n\nconst allThemes = {\n ...baseThemes,\n ...colorThemes,\n} as const\n\nexport const themes: TypedThemes = allThemes as any\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["theme", "themes", "darkColors", "dark", "colors"]
|
|
7
7
|
}
|