@tamagui/theme-base 1.0.0-beta.9 → 1.0.1-beta.101
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 +9 -10
- package/dist/cjs/colorUtils.js.map +1 -1
- package/dist/cjs/themes.js +162 -113
- package/dist/cjs/themes.js.map +2 -2
- package/dist/cjs/tokens.js +97 -26
- 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/themes.js +189 -129
- package/dist/esm/themes.js.map +2 -2
- package/dist/esm/tokens.js +130 -23
- package/dist/esm/tokens.js.map +2 -2
- package/dist/jsx/colorUtils.js +10 -11
- package/dist/jsx/colorUtils.js.map +7 -0
- package/dist/jsx/index.js +1 -0
- package/dist/jsx/index.js.map +7 -0
- package/dist/jsx/themes.js +170 -116
- package/dist/jsx/themes.js.map +7 -0
- package/dist/jsx/tokens.js +145 -23
- package/dist/jsx/tokens.js.map +7 -0
- package/package.json +8 -5
- package/src/colorUtils.tsx +42 -0
- package/src/index.tsx +3 -0
- package/src/themes.tsx +401 -0
- package/src/tokens.tsx +195 -0
- package/types/colorUtils.d.ts +0 -0
- package/types/colorUtils.d.ts.map +0 -0
- package/types/index.d.ts +0 -0
- package/types/index.d.ts.map +0 -0
- package/types/themes.d.ts +2063 -3320
- package/types/themes.d.ts.map +1 -1
- package/types/tokens.d.ts +531 -186
- package/types/tokens.d.ts.map +1 -1
package/dist/esm/themes.js
CHANGED
|
@@ -1,83 +1,141 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
import { createTheme, getVariableValue, isWeb } from "@tamagui/core";
|
|
6
21
|
import { setColorAlpha } from "./colorUtils";
|
|
7
|
-
import {
|
|
22
|
+
import { darkColors, lightColors, tokens } from "./tokens";
|
|
23
|
+
const { color } = tokens;
|
|
8
24
|
const alternates = [1, 2, 3, 4];
|
|
25
|
+
const alts = [1, 2, 3];
|
|
9
26
|
function createThemesFrom(name, getTheme, props) {
|
|
10
27
|
const { shift = 0 } = props;
|
|
11
28
|
const theme = getTheme(0 + shift, props);
|
|
12
29
|
let themeEntries = [[name, theme]];
|
|
13
30
|
const altThemes = alternates.map((alt) => [
|
|
31
|
+
`${name}_alt${alt}`,
|
|
32
|
+
getTheme(alt + (props.isLight ? 0 : 0) + shift, props)
|
|
33
|
+
]);
|
|
34
|
+
const altThemes2 = alternates.map((alt) => [
|
|
14
35
|
`${name}_alt${alt}`,
|
|
15
36
|
getTheme(alt + shift, props)
|
|
16
37
|
]);
|
|
17
38
|
const altButtonThemes = alternates.map((_, i) => {
|
|
18
|
-
const [bName, bTheme] = [
|
|
39
|
+
const [bName, bTheme] = [altThemes2[i][0], (altThemes2[i + 1] || altThemes2[i])[1]];
|
|
19
40
|
return [`${bName}_Button`, bTheme];
|
|
20
41
|
});
|
|
21
42
|
const darkerTheme = getTheme(Math.max(0, shift + (props.isLight ? 1 : -1)), props);
|
|
22
43
|
const activeTheme = makeActiveTheme(theme);
|
|
44
|
+
const inverted = altThemes.map(([_name, theme2]) => {
|
|
45
|
+
return __spreadProps(__spreadValues({}, theme2), {
|
|
46
|
+
background: theme2.color,
|
|
47
|
+
backgroundHover: theme2.colorHover,
|
|
48
|
+
backgroundFocus: theme2.colorFocus,
|
|
49
|
+
backgroundPress: theme2.colorPress,
|
|
50
|
+
color: theme2.background,
|
|
51
|
+
colorHover: theme2.backgroundHover,
|
|
52
|
+
colorFocus: theme2.backgroundFocus,
|
|
53
|
+
colorPress: theme2.backgroundPress
|
|
54
|
+
});
|
|
55
|
+
});
|
|
23
56
|
themeEntries = [
|
|
24
57
|
...themeEntries,
|
|
25
|
-
...altThemes,
|
|
26
|
-
...altButtonThemes,
|
|
27
|
-
[`${name}_Button`,
|
|
58
|
+
...altThemes.slice(0, alts.length),
|
|
59
|
+
...altButtonThemes.slice(0, alts.length),
|
|
60
|
+
[`${name}_Button`, altThemes2[1][1]],
|
|
61
|
+
[`${name}_DrawerFrame`, altThemes2[1][1]],
|
|
62
|
+
[`${name}_SliderTrack`, altThemes[0][1]],
|
|
63
|
+
[`${name}_SliderTrackActive`, altThemes[3][1]],
|
|
64
|
+
[`${name}_SliderThumb`, inverted[2]],
|
|
65
|
+
[`${name}_Progress`, altThemes[2][1]],
|
|
66
|
+
[`${name}_ProgressIndicator`, inverted[2]],
|
|
67
|
+
[`${name}_Switch`, altThemes[0][1]],
|
|
68
|
+
[`${name}_SwitchThumb`, inverted[2]],
|
|
69
|
+
[`${name}_TooltipArrow`, altThemes[1][1]],
|
|
70
|
+
[`${name}_TooltipContent`, altThemes[1][1]],
|
|
28
71
|
[`${name}_darker`, darkerTheme],
|
|
29
72
|
[`${name}_active`, activeTheme]
|
|
30
73
|
];
|
|
31
74
|
const themes2 = Object.fromEntries(themeEntries);
|
|
32
75
|
return themes2;
|
|
33
76
|
}
|
|
34
|
-
|
|
35
|
-
const createTheme = /* @__PURE__ */ __name((str = 1, {
|
|
77
|
+
const themeCreator = (str = 1, {
|
|
36
78
|
backgrounds,
|
|
37
79
|
isLight = true,
|
|
38
80
|
isBase = false,
|
|
39
81
|
colors = [...backgrounds].reverse(),
|
|
40
82
|
borderColors = isLight ? colors : backgrounds,
|
|
41
|
-
|
|
83
|
+
backgroundStrong,
|
|
42
84
|
offsets: offsetsProp
|
|
43
85
|
}) => {
|
|
44
|
-
var _a, _b, _c, _d;
|
|
45
86
|
const offsets = {
|
|
46
|
-
borderColor: (
|
|
47
|
-
background: (
|
|
48
|
-
color: (
|
|
87
|
+
borderColor: (offsetsProp == null ? void 0 : offsetsProp.borderColor) ?? (offsetsProp == null ? void 0 : offsetsProp.background) ?? [0, 0, 0, 0],
|
|
88
|
+
background: (offsetsProp == null ? void 0 : offsetsProp.background) ?? [0, 0, 0, 0],
|
|
89
|
+
color: (offsetsProp == null ? void 0 : offsetsProp.color) ?? [0, 0, 0, 0]
|
|
49
90
|
};
|
|
50
|
-
const
|
|
91
|
+
const darkColors2 = isLight ? colors : backgrounds;
|
|
51
92
|
const lighterDir = isLight ? -1 : 1;
|
|
52
93
|
const darkerDir = -lighterDir;
|
|
53
94
|
const strongerDir = isLight ? darkerDir : lighterDir;
|
|
54
|
-
const
|
|
95
|
+
const softerDir = -strongerDir;
|
|
96
|
+
const get = (arr, index, name = "background") => {
|
|
55
97
|
return arr[Math.max(0, Math.min(index + (offsets[name][str] || 0), arr.length - 1))];
|
|
56
|
-
}
|
|
98
|
+
};
|
|
57
99
|
const colorTranslucent = setColorAlpha(getVariableValue(get(colors, 0 + str, "color")), 0.5);
|
|
58
100
|
let theme = {
|
|
59
101
|
background: get(backgrounds, str),
|
|
60
|
-
|
|
61
|
-
backgroundSoft: get(backgrounds, str +
|
|
62
|
-
backgroundHover: get(backgrounds, str +
|
|
63
|
-
backgroundPress: get(backgrounds, str + darkerDir
|
|
102
|
+
backgroundStrong: backgroundStrong || get(backgrounds, str + strongerDir * 2),
|
|
103
|
+
backgroundSoft: get(backgrounds, str + softerDir * 2),
|
|
104
|
+
backgroundHover: get(backgrounds, str + lighterDir),
|
|
105
|
+
backgroundPress: get(backgrounds, str + darkerDir),
|
|
64
106
|
backgroundFocus: get(backgrounds, str + darkerDir * 2),
|
|
65
|
-
backgroundTransparent: color.
|
|
107
|
+
backgroundTransparent: color.grayA1Light,
|
|
66
108
|
color: get(colors, 0 + str, "color"),
|
|
67
109
|
colorHover: get(colors, 1 + str, "color"),
|
|
68
110
|
colorPress: get(colors, 2 + str, "color"),
|
|
69
111
|
colorFocus: get(colors, 3 + str, "color"),
|
|
70
112
|
colorTranslucent,
|
|
71
|
-
colorMid: colors[Math.floor(colors.length / 2)],
|
|
72
|
-
shadowColor: isLight ? color.
|
|
73
|
-
shadowColorHover:
|
|
74
|
-
shadowColorPress:
|
|
75
|
-
shadowColorFocus:
|
|
113
|
+
colorMid: (isLight ? colors : backgrounds)[Math.floor(colors.length / 2)],
|
|
114
|
+
shadowColor: isLight ? color.grayA2Light : color.grayA8Light,
|
|
115
|
+
shadowColorHover: darkColors2[!isLight ? 1 : 8],
|
|
116
|
+
shadowColorPress: darkColors2[!isLight ? 1 : 8],
|
|
117
|
+
shadowColorFocus: darkColors2[!isLight ? 1 : 8],
|
|
76
118
|
borderColor: null,
|
|
77
119
|
borderColorHover: null,
|
|
78
120
|
borderColorPress: null,
|
|
79
121
|
borderColorFocus: null
|
|
80
122
|
};
|
|
123
|
+
if (process.env.ENABLE_STEPS) {
|
|
124
|
+
Object.assign(theme, {
|
|
125
|
+
step1: backgrounds[0],
|
|
126
|
+
step2: backgrounds[1],
|
|
127
|
+
step3: backgrounds[2],
|
|
128
|
+
step4: backgrounds[3],
|
|
129
|
+
step5: backgrounds[4],
|
|
130
|
+
step6: backgrounds[5],
|
|
131
|
+
step7: backgrounds[6],
|
|
132
|
+
step8: backgrounds[7],
|
|
133
|
+
step9: backgrounds[8],
|
|
134
|
+
step10: backgrounds[9],
|
|
135
|
+
step11: backgrounds[10],
|
|
136
|
+
step12: backgrounds[11]
|
|
137
|
+
});
|
|
138
|
+
}
|
|
81
139
|
if (isBase) {
|
|
82
140
|
Object.assign(theme, {
|
|
83
141
|
borderColor: isLight ? get(colors, 8 - str, "borderColor") : get(backgrounds, 2 + str, "borderColor"),
|
|
@@ -94,62 +152,52 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
|
|
|
94
152
|
});
|
|
95
153
|
}
|
|
96
154
|
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
|
|
155
|
+
};
|
|
156
|
+
const themeColors = {
|
|
157
|
+
light: [
|
|
158
|
+
"#fff",
|
|
159
|
+
"#f4f4f4",
|
|
160
|
+
color.gray1Light,
|
|
161
|
+
color.gray2Light,
|
|
162
|
+
color.gray3Light,
|
|
163
|
+
color.gray4Light,
|
|
164
|
+
color.gray5Light,
|
|
165
|
+
color.gray6Light,
|
|
166
|
+
color.gray7Light,
|
|
167
|
+
color.gray8Light,
|
|
168
|
+
color.gray9Light,
|
|
169
|
+
color.gray10Light,
|
|
170
|
+
color.gray11Light,
|
|
171
|
+
color.gray12Light
|
|
172
|
+
],
|
|
173
|
+
dark: [
|
|
174
|
+
"#111111",
|
|
175
|
+
"#151515",
|
|
176
|
+
"#191919",
|
|
177
|
+
"#232323",
|
|
178
|
+
"#282828",
|
|
179
|
+
"#323232",
|
|
180
|
+
"#383838",
|
|
181
|
+
"#424242",
|
|
182
|
+
"#494949",
|
|
183
|
+
"#545454",
|
|
184
|
+
"#626262",
|
|
185
|
+
"#777777"
|
|
186
|
+
]
|
|
187
|
+
};
|
|
188
|
+
const lightThemes = createThemesFrom("light", themeCreator, {
|
|
189
|
+
backgrounds: themeColors.light,
|
|
190
|
+
backgroundStrong: isWeb ? "#fefefe" : "#f2f2f2",
|
|
191
|
+
borderColors: themeColors.light.slice(2),
|
|
192
|
+
isLight: true,
|
|
193
|
+
offsets: {
|
|
194
|
+
background: [2, 2, 2, 2, 2, 2]
|
|
195
|
+
}
|
|
148
196
|
});
|
|
149
|
-
const darkThemes = createThemesFrom("dark",
|
|
150
|
-
backgrounds:
|
|
151
|
-
colors:
|
|
152
|
-
|
|
197
|
+
const darkThemes = createThemesFrom("dark", themeCreator, {
|
|
198
|
+
backgrounds: themeColors.dark,
|
|
199
|
+
colors: themeColors.light.slice(2),
|
|
200
|
+
backgroundStrong: "#070707",
|
|
153
201
|
isBase: true,
|
|
154
202
|
isLight: false,
|
|
155
203
|
shift: 1,
|
|
@@ -157,52 +205,79 @@ const darkThemes = createThemesFrom("dark", createTheme, {
|
|
|
157
205
|
color: [0, 4, 5, 5, 5, 5]
|
|
158
206
|
}
|
|
159
207
|
});
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
208
|
+
darkThemes.dark_darker.background = "#030303";
|
|
209
|
+
darkThemes.dark_darker.backgroundStrong = "#000";
|
|
210
|
+
const light = createTheme(__spreadValues(__spreadValues({}, lightColors), lightThemes.light));
|
|
211
|
+
const dark = createTheme(__spreadValues(__spreadValues({}, darkColors), darkThemes.dark));
|
|
212
|
+
const baseThemes = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, lightThemes), {
|
|
213
|
+
light,
|
|
166
214
|
light_active: makeActiveTheme(lightThemes.light),
|
|
167
215
|
light_Card: lightThemes.light,
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
216
|
+
light_SliderTrack: lightThemes.light_alt2,
|
|
217
|
+
light_SliderTrackActive: lightThemes.light_alt3,
|
|
218
|
+
light_Switch: lightThemes.light_alt1,
|
|
219
|
+
light_SwitchThumb: darkThemes.dark,
|
|
220
|
+
light_DrawerFrame: lightThemes.light_alt1
|
|
221
|
+
}), darkThemes), {
|
|
222
|
+
dark,
|
|
175
223
|
dark_active: makeActiveTheme(darkThemes.dark),
|
|
176
|
-
dark_Card: darkThemes.
|
|
224
|
+
dark_Card: darkThemes.dark,
|
|
177
225
|
dark_DrawerFrame: darkThemes.dark_alt2,
|
|
226
|
+
dark_SliderTrack: darkThemes.dark_darker,
|
|
227
|
+
dark_SliderTrackActive: darkThemes.dark_alt3,
|
|
228
|
+
dark_Switch: darkThemes.dark_darker,
|
|
229
|
+
dark_SwitchThumb: lightThemes.light_alt3,
|
|
178
230
|
dark_Button: darkThemes.dark_alt1
|
|
179
|
-
};
|
|
231
|
+
});
|
|
180
232
|
function makeActiveTheme(theme) {
|
|
181
|
-
const res = {
|
|
233
|
+
const res = __spreadValues({}, theme);
|
|
182
234
|
res.backgroundHover = res.background;
|
|
183
235
|
res.colorHover = res.color;
|
|
184
236
|
res.backgroundPress = res.background;
|
|
185
237
|
res.colorPress = res.color;
|
|
186
238
|
return res;
|
|
187
239
|
}
|
|
188
|
-
|
|
189
|
-
const
|
|
240
|
+
const darkEntries = Object.entries(dark);
|
|
241
|
+
const lightEntries = Object.entries(light);
|
|
242
|
+
function findColors(prefix, dark2 = false) {
|
|
243
|
+
return Object.fromEntries((dark2 ? darkEntries : lightEntries).filter(([k]) => k.startsWith(prefix)));
|
|
244
|
+
}
|
|
245
|
+
const colorSchemes = [
|
|
246
|
+
{ name: "blue", colors: findColors("blue"), darkColors: findColors("blue", true) },
|
|
247
|
+
{ name: "gray", colors: findColors("gray"), darkColors: findColors("gray", true) },
|
|
248
|
+
{ name: "green", colors: findColors("green"), darkColors: findColors("green", true) },
|
|
249
|
+
{ name: "orange", colors: findColors("orange"), darkColors: findColors("orange", true) },
|
|
250
|
+
{ name: "pink", colors: findColors("pink"), darkColors: findColors("pink", true) },
|
|
251
|
+
{ name: "purple", colors: findColors("purple"), darkColors: findColors("purple", true) },
|
|
252
|
+
{ name: "red", colors: findColors("red"), darkColors: findColors("red", true) },
|
|
253
|
+
{ name: "yellow", colors: findColors("yellow"), darkColors: findColors("yellow", true) },
|
|
254
|
+
{ name: "teal", colors: findColors("teal"), darkColors: findColors("teal", true) }
|
|
255
|
+
];
|
|
256
|
+
const colorNames = [
|
|
257
|
+
"blue",
|
|
258
|
+
"gray",
|
|
259
|
+
"green",
|
|
260
|
+
"orange",
|
|
261
|
+
"pink",
|
|
262
|
+
"purple",
|
|
263
|
+
"red",
|
|
264
|
+
"yellow",
|
|
265
|
+
"teal"
|
|
266
|
+
];
|
|
267
|
+
const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors: darkColors2 }) => {
|
|
190
268
|
const [altLightThemes, altDarkThemes] = [
|
|
191
|
-
{ colors:
|
|
192
|
-
{ colors, backgrounds:
|
|
269
|
+
{ colors: darkColors2, backgrounds: colors },
|
|
270
|
+
{ colors, backgrounds: darkColors2 }
|
|
193
271
|
].map((props, i) => {
|
|
194
272
|
const isLight = i === 0;
|
|
273
|
+
const colorsBase = Object.values(props.colors).slice(2);
|
|
195
274
|
const [backgrounds, colors2] = [
|
|
196
275
|
Object.values(props.backgrounds),
|
|
197
|
-
|
|
276
|
+
isLight ? colorsBase : [colorsBase[0], "#ccc", ...colorsBase.slice(1)]
|
|
198
277
|
];
|
|
199
278
|
const scheme = isLight ? "light" : "dark";
|
|
200
279
|
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, {
|
|
280
|
+
const themeWithAlts = createThemesFrom(name, themeCreator, {
|
|
206
281
|
colors: colors2,
|
|
207
282
|
backgrounds,
|
|
208
283
|
borderColors: backgrounds,
|
|
@@ -210,36 +285,21 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) =>
|
|
|
210
285
|
shift,
|
|
211
286
|
isBase: false,
|
|
212
287
|
offsets: {
|
|
213
|
-
background: isLight ? [
|
|
288
|
+
background: isLight ? [2, 2, 2, 2, 2, 2] : null,
|
|
214
289
|
borderColor: isLight ? [2, 2, 2, 3, 2] : null,
|
|
215
290
|
color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1]
|
|
216
291
|
}
|
|
217
292
|
});
|
|
218
293
|
return Object.entries(themeWithAlts).map(([k, v]) => [`${scheme}_${k}`, v]);
|
|
219
294
|
});
|
|
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
|
-
];
|
|
295
|
+
return [...altLightThemes, ...altDarkThemes];
|
|
232
296
|
});
|
|
233
297
|
const colorThemes = Object.fromEntries(colorThemeEntries);
|
|
234
|
-
const allThemes = {
|
|
235
|
-
...baseThemes,
|
|
236
|
-
...colorThemes
|
|
237
|
-
};
|
|
298
|
+
const allThemes = __spreadValues(__spreadValues({}, baseThemes), colorThemes);
|
|
238
299
|
const themes = allThemes;
|
|
239
300
|
export {
|
|
301
|
+
colorNames,
|
|
240
302
|
colorSchemes,
|
|
241
|
-
darkGradient,
|
|
242
|
-
lightGradient,
|
|
243
303
|
themes
|
|
244
304
|
};
|
|
245
305
|
//# 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": "
|
|
4
|
+
"sourcesContent": ["import { Variable, createTheme, getVariableValue, isWeb } from '@tamagui/core'\n\nimport { setColorAlpha } from './colorUtils'\nimport { darkColors, lightColors, tokens } from './tokens'\n\nconst { color } = 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 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\nconst alts = [1, 2, 3] as const\ntype AltKeys = 1 | 2 | 3\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\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 + (props.isLight ? 0 : 0) + 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 = makeActiveTheme(theme)\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[3][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 let theme = {\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: color.grayA1Light,\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 ? color.grayA2Light : color.grayA8Light,\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 (process.env.ENABLE_STEPS) {\n Object.assign(theme, {\n step1: backgrounds[0],\n step2: backgrounds[1],\n step3: backgrounds[2],\n step4: backgrounds[3],\n step5: backgrounds[4],\n step6: backgrounds[5],\n step7: backgrounds[6],\n step8: backgrounds[7],\n step9: backgrounds[8],\n step10: backgrounds[9],\n step11: backgrounds[10],\n step12: backgrounds[11],\n })\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 color.gray1Light,\n color.gray2Light,\n color.gray3Light,\n color.gray4Light,\n color.gray5Light,\n color.gray6Light,\n color.gray7Light,\n color.gray8Light,\n color.gray9Light,\n color.gray10Light,\n color.gray11Light,\n color.gray12Light,\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\nconst light = createTheme({\n ...lightColors,\n ...lightThemes.light,\n})\n\nconst dark = createTheme({\n ...darkColors,\n ...darkThemes.dark,\n})\n\ntype ThemeBase = {\n [Key in keyof typeof dark]: string\n}\n\nconst baseThemes = {\n // light\n ...lightThemes,\n light,\n light_active: makeActiveTheme(lightThemes.light),\n light_Card: lightThemes.light,\n light_SliderTrack: lightThemes.light_alt2,\n light_SliderTrackActive: lightThemes.light_alt3,\n light_Switch: lightThemes.light_alt1,\n light_SwitchThumb: darkThemes.dark,\n light_DrawerFrame: lightThemes.light_alt1,\n\n // dark\n ...darkThemes,\n dark,\n dark_active: makeActiveTheme(darkThemes.dark),\n dark_Card: darkThemes.dark,\n dark_DrawerFrame: darkThemes.dark_alt2,\n dark_SliderTrack: darkThemes.dark_darker,\n dark_SliderTrackActive: darkThemes.dark_alt3,\n dark_Switch: darkThemes.dark_darker,\n dark_SwitchThumb: lightThemes.light_alt3,\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\nconst darkEntries = Object.entries(dark)\nconst lightEntries = Object.entries(light)\nfunction findColors(prefix: string, dark = false): ThemeBase {\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 { name: 'teal', colors: findColors('teal'), darkColors: findColors('teal', true) },\n] as const\n\nexport type ColorNames = typeof colorSchemes[number]['name']\n\n// nice and flat\nexport const colorNames: ColorNames[] = [\n 'blue',\n 'gray',\n 'green',\n 'orange',\n 'pink',\n 'purple',\n 'red',\n 'yellow',\n 'teal',\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 colors,\n backgrounds,\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 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|