@tamagui/themes 1.5.9 → 1.5.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/themes.js +79 -61
- package/dist/cjs/themes.js.map +2 -2
- package/dist/esm/themes.js +79 -61
- package/dist/esm/themes.js.map +2 -2
- package/dist/esm/themes.mjs +79 -61
- package/dist/esm/themes.mjs.map +2 -2
- package/package.json +6 -6
- package/src/themes.tsx +92 -67
- package/types/index.d.ts.map +1 -0
- package/types/themes.d.ts +39101 -973
- package/types/themes.d.ts.map +1 -0
- package/types/tokens.d.ts.map +1 -0
package/dist/cjs/themes.js
CHANGED
|
@@ -28,7 +28,7 @@ const darkTransparent = "rgba(10,10,10,0)";
|
|
|
28
28
|
const palettes = {
|
|
29
29
|
dark: [
|
|
30
30
|
darkTransparent,
|
|
31
|
-
"#
|
|
31
|
+
"#050505",
|
|
32
32
|
"#151515",
|
|
33
33
|
"#191919",
|
|
34
34
|
"#232323",
|
|
@@ -46,15 +46,15 @@ const palettes = {
|
|
|
46
46
|
lightTransparent,
|
|
47
47
|
"#fff",
|
|
48
48
|
"#f9f9f9",
|
|
49
|
-
"hsl(0, 0%, 99.0%)",
|
|
50
49
|
"hsl(0, 0%, 97.3%)",
|
|
51
50
|
"hsl(0, 0%, 95.1%)",
|
|
52
|
-
"hsl(0, 0%,
|
|
53
|
-
"hsl(0, 0%,
|
|
54
|
-
"hsl(0, 0%,
|
|
51
|
+
"hsl(0, 0%, 94.0%)",
|
|
52
|
+
"hsl(0, 0%, 92.0%)",
|
|
53
|
+
"hsl(0, 0%, 89.5%)",
|
|
54
|
+
"hsl(0, 0%, 81.0%)",
|
|
55
55
|
"hsl(0, 0%, 56.1%)",
|
|
56
|
-
"hsl(0, 0%,
|
|
57
|
-
"hsl(0, 0%,
|
|
56
|
+
"hsl(0, 0%, 50.3%)",
|
|
57
|
+
"hsl(0, 0%, 42.5%)",
|
|
58
58
|
"hsl(0, 0%, 9.0%)",
|
|
59
59
|
darkTransparent
|
|
60
60
|
]
|
|
@@ -121,41 +121,31 @@ const darkShadows = {
|
|
|
121
121
|
};
|
|
122
122
|
const lightTemplate = {
|
|
123
123
|
...template,
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
borderColorFocus:
|
|
124
|
+
// our light color palette is... a bit unique
|
|
125
|
+
borderColor: 6,
|
|
126
|
+
borderColorHover: 7,
|
|
127
|
+
borderColorFocus: 5,
|
|
128
|
+
borderColorPress: 6,
|
|
128
129
|
...lightShadows
|
|
129
130
|
};
|
|
130
131
|
const darkTemplate = { ...template, ...darkShadows };
|
|
131
|
-
const light = (0, import_create_theme.createTheme)(palettes.light, lightTemplate
|
|
132
|
-
|
|
133
|
-
});
|
|
134
|
-
const dark = (0, import_create_theme.createTheme)(palettes.dark, darkTemplate, { nonInheritedValues: import_tokens.darkColors });
|
|
132
|
+
const light = (0, import_create_theme.createTheme)(palettes.light, lightTemplate);
|
|
133
|
+
const dark = (0, import_create_theme.createTheme)(palettes.dark, darkTemplate);
|
|
135
134
|
const baseThemes = {
|
|
136
135
|
light,
|
|
137
136
|
dark
|
|
138
137
|
};
|
|
139
|
-
const max = palettes.dark.length - 1;
|
|
140
138
|
const masks = {
|
|
141
|
-
weaker: (0, import_create_theme.createWeakenMask)(
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
max
|
|
150
|
-
}),
|
|
151
|
-
stronger2: (0, import_create_theme.createStrengthenMask)({
|
|
152
|
-
by: 2,
|
|
153
|
-
min: 1,
|
|
154
|
-
max
|
|
155
|
-
})
|
|
139
|
+
weaker: (0, import_create_theme.createWeakenMask)(),
|
|
140
|
+
stronger: (0, import_create_theme.createStrengthenMask)()
|
|
141
|
+
};
|
|
142
|
+
const maskOptions = {
|
|
143
|
+
skip,
|
|
144
|
+
// avoids the transparent ends
|
|
145
|
+
max: palettes.light.length - 2,
|
|
146
|
+
min: 1
|
|
156
147
|
};
|
|
157
|
-
const allThemes = (0, import_create_theme.addChildren)(baseThemes, (name,
|
|
158
|
-
const theme = themeIn;
|
|
148
|
+
const allThemes = (0, import_create_theme.addChildren)(baseThemes, (name, theme) => {
|
|
159
149
|
const isLight = name === "light";
|
|
160
150
|
const inverseName = isLight ? "dark" : "light";
|
|
161
151
|
const inverseTheme = baseThemes[inverseName];
|
|
@@ -182,10 +172,11 @@ const allThemes = (0, import_create_theme.addChildren)(baseThemes, (name, themeI
|
|
|
182
172
|
palette,
|
|
183
173
|
isLight ? {
|
|
184
174
|
...lightTemplate,
|
|
175
|
+
// light color themes are a bit less sensitive
|
|
185
176
|
borderColor: 4,
|
|
186
177
|
borderColorHover: 5,
|
|
187
|
-
borderColorFocus:
|
|
188
|
-
borderColorPress:
|
|
178
|
+
borderColorFocus: 4,
|
|
179
|
+
borderColorPress: 4
|
|
189
180
|
} : darkTemplate
|
|
190
181
|
);
|
|
191
182
|
return [color, colorTheme];
|
|
@@ -195,50 +186,77 @@ const allThemes = (0, import_create_theme.addChildren)(baseThemes, (name, themeI
|
|
|
195
186
|
const allColorThemes = (0, import_create_theme.addChildren)(colorThemes, (colorName, colorTheme) => {
|
|
196
187
|
const inverse = inverseColorThemes[colorName];
|
|
197
188
|
return {
|
|
198
|
-
...getAltThemes(colorTheme, inverse),
|
|
189
|
+
...getAltThemes(colorTheme, inverse, inverse),
|
|
199
190
|
...getComponentThemes(colorTheme, inverse)
|
|
200
191
|
};
|
|
201
192
|
});
|
|
193
|
+
const baseActiveTheme = (0, import_create_theme.applyMask)(colorThemes.blue, masks.weaker, {
|
|
194
|
+
...maskOptions,
|
|
195
|
+
strength: 4
|
|
196
|
+
});
|
|
197
|
+
const baseSubThemes = {
|
|
198
|
+
...getAltThemes(theme, inverseTheme, baseActiveTheme),
|
|
199
|
+
...getComponentThemes(theme, inverseTheme)
|
|
200
|
+
};
|
|
202
201
|
return {
|
|
203
|
-
...
|
|
204
|
-
...getComponentThemes(theme, inverseTheme),
|
|
202
|
+
...baseSubThemes,
|
|
205
203
|
...allColorThemes
|
|
206
204
|
};
|
|
205
|
+
function getAltThemes(theme2, inverse, activeTheme) {
|
|
206
|
+
const alt1 = (0, import_create_theme.applyMask)(theme2, masks.weaker, maskOptions);
|
|
207
|
+
const alt2 = (0, import_create_theme.applyMask)(alt1, masks.weaker, maskOptions);
|
|
208
|
+
const active = activeTheme ?? (0, import_create_theme.applyMask)(theme2, masks.weaker, {
|
|
209
|
+
...maskOptions,
|
|
210
|
+
strength: 4
|
|
211
|
+
});
|
|
212
|
+
return (0, import_create_theme.addChildren)({ alt1, alt2, active }, (name2, subTheme) => {
|
|
213
|
+
return getComponentThemes(subTheme, subTheme === inverse ? theme2 : inverse);
|
|
214
|
+
});
|
|
215
|
+
}
|
|
207
216
|
function getComponentThemes(theme2, inverse) {
|
|
208
|
-
const
|
|
209
|
-
const
|
|
210
|
-
const
|
|
211
|
-
const
|
|
217
|
+
const weaker1 = (0, import_create_theme.applyMask)(theme2, masks.weaker, maskOptions);
|
|
218
|
+
const weaker2 = (0, import_create_theme.applyMask)(weaker1, masks.weaker, maskOptions);
|
|
219
|
+
const stronger1 = (0, import_create_theme.applyMask)(theme2, masks.stronger, maskOptions);
|
|
220
|
+
const inverse1 = (0, import_create_theme.applyMask)(inverse, masks.weaker, maskOptions);
|
|
221
|
+
const inverse2 = (0, import_create_theme.applyMask)(inverse1, masks.weaker, maskOptions);
|
|
222
|
+
const strongerBorderLighterBackground = isLight ? {
|
|
223
|
+
...stronger1,
|
|
224
|
+
borderColor: weaker1.borderColor,
|
|
225
|
+
borderColorHover: weaker1.borderColorHover,
|
|
226
|
+
borderColorPress: weaker1.borderColorPress,
|
|
227
|
+
borderColorFocus: weaker1.borderColorFocus
|
|
228
|
+
} : {
|
|
229
|
+
...theme2,
|
|
230
|
+
borderColor: weaker1.borderColor,
|
|
231
|
+
borderColorHover: weaker1.borderColorHover,
|
|
232
|
+
borderColorPress: weaker1.borderColorPress,
|
|
233
|
+
borderColorFocus: weaker1.borderColorFocus
|
|
234
|
+
};
|
|
212
235
|
return {
|
|
213
|
-
Card:
|
|
214
|
-
Button:
|
|
215
|
-
DrawerFrame:
|
|
216
|
-
SliderTrack:
|
|
217
|
-
SliderTrackActive:
|
|
236
|
+
Card: weaker1,
|
|
237
|
+
Button: weaker2,
|
|
238
|
+
DrawerFrame: weaker1,
|
|
239
|
+
SliderTrack: stronger1,
|
|
240
|
+
SliderTrackActive: weaker2,
|
|
218
241
|
SliderThumb: inverse1,
|
|
219
|
-
Progress:
|
|
242
|
+
Progress: weaker1,
|
|
220
243
|
ProgressIndicator: inverse,
|
|
221
|
-
Switch:
|
|
244
|
+
Switch: weaker1,
|
|
222
245
|
SwitchThumb: inverse2,
|
|
223
|
-
TooltipArrow:
|
|
224
|
-
TooltipContent:
|
|
246
|
+
TooltipArrow: weaker1,
|
|
247
|
+
TooltipContent: weaker2,
|
|
248
|
+
Input: strongerBorderLighterBackground,
|
|
249
|
+
TextArea: strongerBorderLighterBackground,
|
|
250
|
+
Tooltip: inverse1
|
|
225
251
|
};
|
|
226
252
|
}
|
|
227
|
-
function getAltThemes(theme2, inverse) {
|
|
228
|
-
const alt1 = (0, import_create_theme.applyMask)(theme2, masks.weaker, { skip });
|
|
229
|
-
const alt2 = (0, import_create_theme.applyMask)(alt1, masks.weaker, { skip });
|
|
230
|
-
const active = (0, import_create_theme.applyMask)(theme2, masks.stronger2, { skip });
|
|
231
|
-
return (0, import_create_theme.addChildren)({ alt1, alt2, active }, (name2, theme3) => {
|
|
232
|
-
return getComponentThemes(theme3, inverse);
|
|
233
|
-
});
|
|
234
|
-
}
|
|
235
253
|
});
|
|
236
254
|
const themes = {
|
|
237
255
|
...allThemes,
|
|
238
256
|
// bring back the full type, the rest use a subset to avoid clogging up ts,
|
|
239
257
|
// tamagui will be smart and use the top level themes as the type for useTheme() etc
|
|
240
|
-
light,
|
|
241
|
-
dark
|
|
258
|
+
light: (0, import_create_theme.createTheme)(palettes.light, lightTemplate, { nonInheritedValues: import_tokens.lightColors }),
|
|
259
|
+
dark: (0, import_create_theme.createTheme)(palettes.dark, darkTemplate, { nonInheritedValues: import_tokens.darkColors })
|
|
242
260
|
};
|
|
243
261
|
// Annotate the CommonJS export names for ESM import in node:
|
|
244
262
|
0 && (module.exports = {
|
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 '#
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import {\n MaskOptions,\n addChildren,\n applyMask,\n createStrengthenMask,\n createTheme,\n createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n dark: [\n darkTransparent,\n '#050505',\n '#151515',\n '#191919',\n '#232323',\n '#282828',\n '#323232',\n '#424242',\n '#494949',\n '#545454',\n '#626262',\n '#a5a5a5',\n '#fff',\n lightTransparent,\n ],\n light: [\n lightTransparent,\n '#fff',\n '#f9f9f9',\n 'hsl(0, 0%, 97.3%)',\n 'hsl(0, 0%, 95.1%)',\n 'hsl(0, 0%, 94.0%)',\n 'hsl(0, 0%, 92.0%)',\n 'hsl(0, 0%, 89.5%)',\n 'hsl(0, 0%, 81.0%)',\n 'hsl(0, 0%, 56.1%)',\n 'hsl(0, 0%, 50.3%)',\n 'hsl(0, 0%, 42.5%)',\n 'hsl(0, 0%, 9.0%)',\n darkTransparent,\n ],\n}\n\nconst colorScale = {\n color1: 1,\n color2: 2,\n color3: 3,\n color4: 4,\n color5: 5,\n color6: 6,\n color7: 7,\n color8: 8,\n color9: 9,\n color10: 10,\n color11: 11,\n color12: 12,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n ...colorScale,\n shadowColor: 1,\n shadowColorHover: 1,\n shadowColorPress: 2,\n shadowColorFocus: 2,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n ...skip,\n // the background, color, etc keys here work like generics - they make it so you\n // can publish components for others to use without mandating a specific color scale\n // the @tamagui/button Button component looks for `$background`, so you set the\n // dark_red_Button theme to have a stronger background than the dark_red theme.\n background: 2,\n backgroundHover: 3,\n backgroundPress: 1,\n backgroundFocus: 2,\n backgroundStrong: 1,\n backgroundTransparent: 0,\n color: -1,\n colorHover: -2,\n colorPress: -1,\n colorFocus: -2,\n colorTransparent: -0,\n borderColor: 4,\n borderColorHover: 5,\n borderColorPress: 3,\n borderColorFocus: 4,\n placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.02)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.066)'\nconst darkShadowColor = 'rgba(0,0,0,0.2)'\nconst darkShadowColorStrong = 'rgba(0,0,0,0.3)'\n\nconst lightShadows = {\n shadowColor: lightShadowColorStrong,\n shadowColorHover: lightShadowColorStrong,\n shadowColorPress: lightShadowColor,\n shadowColorFocus: lightShadowColor,\n}\n\nconst darkShadows = {\n shadowColor: darkShadowColorStrong,\n shadowColorHover: darkShadowColorStrong,\n shadowColorPress: darkShadowColor,\n shadowColorFocus: darkShadowColor,\n}\n\nconst lightTemplate = {\n ...template,\n // our light color palette is... a bit unique\n borderColor: 6,\n borderColorHover: 7,\n borderColorFocus: 5,\n borderColorPress: 6,\n ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate)\nconst dark = createTheme(palettes.dark, darkTemplate)\n\ntype SubTheme = typeof light\n\nconst baseThemes: {\n light: SubTheme\n dark: SubTheme\n} = {\n light,\n dark,\n}\n\nconst masks = {\n weaker: createWeakenMask(),\n stronger: createStrengthenMask(),\n}\n\nconst maskOptions: MaskOptions = {\n skip,\n\n // avoids the transparent ends\n max: palettes.light.length - 2,\n min: 1,\n}\n\nconst allThemes = addChildren(baseThemes, (name, theme) => {\n const isLight = name === 'light'\n const inverseName = isLight ? 'dark' : 'light'\n const inverseTheme = baseThemes[inverseName]\n const transparent = (hsl: string, opacity = 0) =>\n hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)\n\n // setup colorThemes and their inverses\n const [colorThemes, inverseColorThemes] = [\n colorTokens[name],\n colorTokens[inverseName],\n ].map((colorSet) => {\n return Object.fromEntries(\n Object.keys(colorSet).map((color) => {\n const colorPalette = Object.values(colorSet[color]) as string[]\n // were re-ordering these\n const [head, tail] = [\n colorPalette.slice(0, 6),\n colorPalette.slice(colorPalette.length - 5),\n ]\n // add our transparent colors first/last\n // and make sure the last (foreground) color is white/black rather than colorful\n // this is mostly for consistency with the older theme-base\n const palette = [\n transparent(colorPalette[0]),\n ...head,\n ...tail,\n theme.color,\n transparent(colorPalette[colorPalette.length - 1]),\n ]\n const colorTheme = createTheme(\n palette,\n isLight\n ? {\n ...lightTemplate,\n // light color themes are a bit less sensitive\n borderColor: 4,\n borderColorHover: 5,\n borderColorFocus: 4,\n borderColorPress: 4,\n }\n : darkTemplate\n )\n return [color, colorTheme]\n })\n ) as Record<ColorName, SubTheme>\n })\n\n const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {\n const inverse = inverseColorThemes[colorName]\n return {\n ...getAltThemes(colorTheme, inverse, inverse),\n ...getComponentThemes(colorTheme, inverse),\n }\n })\n\n const baseActiveTheme = applyMask(colorThemes.blue, masks.weaker, {\n ...maskOptions,\n strength: 4,\n })\n\n const baseSubThemes = {\n ...getAltThemes(theme, inverseTheme, baseActiveTheme),\n ...getComponentThemes(theme, inverseTheme),\n }\n\n return {\n ...baseSubThemes,\n ...allColorThemes,\n }\n\n function getAltThemes(theme: SubTheme, inverse: SubTheme, activeTheme?: SubTheme) {\n const alt1 = applyMask(theme, masks.weaker, maskOptions)\n const alt2 = applyMask(alt1, masks.weaker, maskOptions)\n const active =\n activeTheme ??\n applyMask(theme, masks.weaker, {\n ...maskOptions,\n strength: 4,\n })\n return addChildren({ alt1, alt2, active }, (name, subTheme) => {\n return getComponentThemes(subTheme, subTheme === inverse ? theme : inverse)\n })\n }\n\n function getComponentThemes(theme: SubTheme, inverse: SubTheme) {\n const weaker1 = applyMask(theme, masks.weaker, maskOptions)\n const weaker2 = applyMask(weaker1, masks.weaker, maskOptions)\n const stronger1 = applyMask(theme, masks.stronger, maskOptions)\n const inverse1 = applyMask(inverse, masks.weaker, maskOptions)\n const inverse2 = applyMask(inverse1, masks.weaker, maskOptions)\n const strongerBorderLighterBackground: SubTheme = isLight\n ? {\n ...stronger1,\n borderColor: weaker1.borderColor,\n borderColorHover: weaker1.borderColorHover,\n borderColorPress: weaker1.borderColorPress,\n borderColorFocus: weaker1.borderColorFocus,\n }\n : {\n ...theme,\n borderColor: weaker1.borderColor,\n borderColorHover: weaker1.borderColorHover,\n borderColorPress: weaker1.borderColorPress,\n borderColorFocus: weaker1.borderColorFocus,\n }\n return {\n Card: weaker1,\n Button: weaker2,\n DrawerFrame: weaker1,\n SliderTrack: stronger1,\n SliderTrackActive: weaker2,\n SliderThumb: inverse1,\n Progress: weaker1,\n ProgressIndicator: inverse,\n Switch: weaker1,\n SwitchThumb: inverse2,\n TooltipArrow: weaker1,\n TooltipContent: weaker2,\n Input: strongerBorderLighterBackground,\n TextArea: strongerBorderLighterBackground,\n Tooltip: inverse1,\n }\n }\n})\n\nexport const themes = {\n ...allThemes,\n // bring back the full type, the rest use a subset to avoid clogging up ts,\n // tamagui will be smart and use the top level themes as the type for useTheme() etc\n light: createTheme(palettes.light, lightTemplate, { nonInheritedValues: lightColors }),\n dark: createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors }),\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["theme", "name"]
|
|
7
7
|
}
|
package/dist/esm/themes.js
CHANGED
|
@@ -11,7 +11,7 @@ const darkTransparent = "rgba(10,10,10,0)";
|
|
|
11
11
|
const palettes = {
|
|
12
12
|
dark: [
|
|
13
13
|
darkTransparent,
|
|
14
|
-
"#
|
|
14
|
+
"#050505",
|
|
15
15
|
"#151515",
|
|
16
16
|
"#191919",
|
|
17
17
|
"#232323",
|
|
@@ -29,15 +29,15 @@ const palettes = {
|
|
|
29
29
|
lightTransparent,
|
|
30
30
|
"#fff",
|
|
31
31
|
"#f9f9f9",
|
|
32
|
-
"hsl(0, 0%, 99.0%)",
|
|
33
32
|
"hsl(0, 0%, 97.3%)",
|
|
34
33
|
"hsl(0, 0%, 95.1%)",
|
|
35
|
-
"hsl(0, 0%,
|
|
36
|
-
"hsl(0, 0%,
|
|
37
|
-
"hsl(0, 0%,
|
|
34
|
+
"hsl(0, 0%, 94.0%)",
|
|
35
|
+
"hsl(0, 0%, 92.0%)",
|
|
36
|
+
"hsl(0, 0%, 89.5%)",
|
|
37
|
+
"hsl(0, 0%, 81.0%)",
|
|
38
38
|
"hsl(0, 0%, 56.1%)",
|
|
39
|
-
"hsl(0, 0%,
|
|
40
|
-
"hsl(0, 0%,
|
|
39
|
+
"hsl(0, 0%, 50.3%)",
|
|
40
|
+
"hsl(0, 0%, 42.5%)",
|
|
41
41
|
"hsl(0, 0%, 9.0%)",
|
|
42
42
|
darkTransparent
|
|
43
43
|
]
|
|
@@ -104,41 +104,31 @@ const darkShadows = {
|
|
|
104
104
|
};
|
|
105
105
|
const lightTemplate = {
|
|
106
106
|
...template,
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
borderColorFocus:
|
|
107
|
+
// our light color palette is... a bit unique
|
|
108
|
+
borderColor: 6,
|
|
109
|
+
borderColorHover: 7,
|
|
110
|
+
borderColorFocus: 5,
|
|
111
|
+
borderColorPress: 6,
|
|
111
112
|
...lightShadows
|
|
112
113
|
};
|
|
113
114
|
const darkTemplate = { ...template, ...darkShadows };
|
|
114
|
-
const light = createTheme(palettes.light, lightTemplate
|
|
115
|
-
|
|
116
|
-
});
|
|
117
|
-
const dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors });
|
|
115
|
+
const light = createTheme(palettes.light, lightTemplate);
|
|
116
|
+
const dark = createTheme(palettes.dark, darkTemplate);
|
|
118
117
|
const baseThemes = {
|
|
119
118
|
light,
|
|
120
119
|
dark
|
|
121
120
|
};
|
|
122
|
-
const max = palettes.dark.length - 1;
|
|
123
121
|
const masks = {
|
|
124
|
-
weaker: createWeakenMask(
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
max
|
|
133
|
-
}),
|
|
134
|
-
stronger2: createStrengthenMask({
|
|
135
|
-
by: 2,
|
|
136
|
-
min: 1,
|
|
137
|
-
max
|
|
138
|
-
})
|
|
122
|
+
weaker: createWeakenMask(),
|
|
123
|
+
stronger: createStrengthenMask()
|
|
124
|
+
};
|
|
125
|
+
const maskOptions = {
|
|
126
|
+
skip,
|
|
127
|
+
// avoids the transparent ends
|
|
128
|
+
max: palettes.light.length - 2,
|
|
129
|
+
min: 1
|
|
139
130
|
};
|
|
140
|
-
const allThemes = addChildren(baseThemes, (name,
|
|
141
|
-
const theme = themeIn;
|
|
131
|
+
const allThemes = addChildren(baseThemes, (name, theme) => {
|
|
142
132
|
const isLight = name === "light";
|
|
143
133
|
const inverseName = isLight ? "dark" : "light";
|
|
144
134
|
const inverseTheme = baseThemes[inverseName];
|
|
@@ -165,10 +155,11 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
165
155
|
palette,
|
|
166
156
|
isLight ? {
|
|
167
157
|
...lightTemplate,
|
|
158
|
+
// light color themes are a bit less sensitive
|
|
168
159
|
borderColor: 4,
|
|
169
160
|
borderColorHover: 5,
|
|
170
|
-
borderColorFocus:
|
|
171
|
-
borderColorPress:
|
|
161
|
+
borderColorFocus: 4,
|
|
162
|
+
borderColorPress: 4
|
|
172
163
|
} : darkTemplate
|
|
173
164
|
);
|
|
174
165
|
return [color, colorTheme];
|
|
@@ -178,50 +169,77 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
178
169
|
const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {
|
|
179
170
|
const inverse = inverseColorThemes[colorName];
|
|
180
171
|
return {
|
|
181
|
-
...getAltThemes(colorTheme, inverse),
|
|
172
|
+
...getAltThemes(colorTheme, inverse, inverse),
|
|
182
173
|
...getComponentThemes(colorTheme, inverse)
|
|
183
174
|
};
|
|
184
175
|
});
|
|
176
|
+
const baseActiveTheme = applyMask(colorThemes.blue, masks.weaker, {
|
|
177
|
+
...maskOptions,
|
|
178
|
+
strength: 4
|
|
179
|
+
});
|
|
180
|
+
const baseSubThemes = {
|
|
181
|
+
...getAltThemes(theme, inverseTheme, baseActiveTheme),
|
|
182
|
+
...getComponentThemes(theme, inverseTheme)
|
|
183
|
+
};
|
|
185
184
|
return {
|
|
186
|
-
...
|
|
187
|
-
...getComponentThemes(theme, inverseTheme),
|
|
185
|
+
...baseSubThemes,
|
|
188
186
|
...allColorThemes
|
|
189
187
|
};
|
|
188
|
+
function getAltThemes(theme2, inverse, activeTheme) {
|
|
189
|
+
const alt1 = applyMask(theme2, masks.weaker, maskOptions);
|
|
190
|
+
const alt2 = applyMask(alt1, masks.weaker, maskOptions);
|
|
191
|
+
const active = activeTheme ?? applyMask(theme2, masks.weaker, {
|
|
192
|
+
...maskOptions,
|
|
193
|
+
strength: 4
|
|
194
|
+
});
|
|
195
|
+
return addChildren({ alt1, alt2, active }, (name2, subTheme) => {
|
|
196
|
+
return getComponentThemes(subTheme, subTheme === inverse ? theme2 : inverse);
|
|
197
|
+
});
|
|
198
|
+
}
|
|
190
199
|
function getComponentThemes(theme2, inverse) {
|
|
191
|
-
const
|
|
192
|
-
const
|
|
193
|
-
const
|
|
194
|
-
const
|
|
200
|
+
const weaker1 = applyMask(theme2, masks.weaker, maskOptions);
|
|
201
|
+
const weaker2 = applyMask(weaker1, masks.weaker, maskOptions);
|
|
202
|
+
const stronger1 = applyMask(theme2, masks.stronger, maskOptions);
|
|
203
|
+
const inverse1 = applyMask(inverse, masks.weaker, maskOptions);
|
|
204
|
+
const inverse2 = applyMask(inverse1, masks.weaker, maskOptions);
|
|
205
|
+
const strongerBorderLighterBackground = isLight ? {
|
|
206
|
+
...stronger1,
|
|
207
|
+
borderColor: weaker1.borderColor,
|
|
208
|
+
borderColorHover: weaker1.borderColorHover,
|
|
209
|
+
borderColorPress: weaker1.borderColorPress,
|
|
210
|
+
borderColorFocus: weaker1.borderColorFocus
|
|
211
|
+
} : {
|
|
212
|
+
...theme2,
|
|
213
|
+
borderColor: weaker1.borderColor,
|
|
214
|
+
borderColorHover: weaker1.borderColorHover,
|
|
215
|
+
borderColorPress: weaker1.borderColorPress,
|
|
216
|
+
borderColorFocus: weaker1.borderColorFocus
|
|
217
|
+
};
|
|
195
218
|
return {
|
|
196
|
-
Card:
|
|
197
|
-
Button:
|
|
198
|
-
DrawerFrame:
|
|
199
|
-
SliderTrack:
|
|
200
|
-
SliderTrackActive:
|
|
219
|
+
Card: weaker1,
|
|
220
|
+
Button: weaker2,
|
|
221
|
+
DrawerFrame: weaker1,
|
|
222
|
+
SliderTrack: stronger1,
|
|
223
|
+
SliderTrackActive: weaker2,
|
|
201
224
|
SliderThumb: inverse1,
|
|
202
|
-
Progress:
|
|
225
|
+
Progress: weaker1,
|
|
203
226
|
ProgressIndicator: inverse,
|
|
204
|
-
Switch:
|
|
227
|
+
Switch: weaker1,
|
|
205
228
|
SwitchThumb: inverse2,
|
|
206
|
-
TooltipArrow:
|
|
207
|
-
TooltipContent:
|
|
229
|
+
TooltipArrow: weaker1,
|
|
230
|
+
TooltipContent: weaker2,
|
|
231
|
+
Input: strongerBorderLighterBackground,
|
|
232
|
+
TextArea: strongerBorderLighterBackground,
|
|
233
|
+
Tooltip: inverse1
|
|
208
234
|
};
|
|
209
235
|
}
|
|
210
|
-
function getAltThemes(theme2, inverse) {
|
|
211
|
-
const alt1 = applyMask(theme2, masks.weaker, { skip });
|
|
212
|
-
const alt2 = applyMask(alt1, masks.weaker, { skip });
|
|
213
|
-
const active = applyMask(theme2, masks.stronger2, { skip });
|
|
214
|
-
return addChildren({ alt1, alt2, active }, (name2, theme3) => {
|
|
215
|
-
return getComponentThemes(theme3, inverse);
|
|
216
|
-
});
|
|
217
|
-
}
|
|
218
236
|
});
|
|
219
237
|
const themes = {
|
|
220
238
|
...allThemes,
|
|
221
239
|
// bring back the full type, the rest use a subset to avoid clogging up ts,
|
|
222
240
|
// tamagui will be smart and use the top level themes as the type for useTheme() etc
|
|
223
|
-
light,
|
|
224
|
-
dark
|
|
241
|
+
light: createTheme(palettes.light, lightTemplate, { nonInheritedValues: lightColors }),
|
|
242
|
+
dark: createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })
|
|
225
243
|
};
|
|
226
244
|
export {
|
|
227
245
|
themes
|
package/dist/esm/themes.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 '#
|
|
5
|
-
"mappings": "AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import {\n MaskOptions,\n addChildren,\n applyMask,\n createStrengthenMask,\n createTheme,\n createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n dark: [\n darkTransparent,\n '#050505',\n '#151515',\n '#191919',\n '#232323',\n '#282828',\n '#323232',\n '#424242',\n '#494949',\n '#545454',\n '#626262',\n '#a5a5a5',\n '#fff',\n lightTransparent,\n ],\n light: [\n lightTransparent,\n '#fff',\n '#f9f9f9',\n 'hsl(0, 0%, 97.3%)',\n 'hsl(0, 0%, 95.1%)',\n 'hsl(0, 0%, 94.0%)',\n 'hsl(0, 0%, 92.0%)',\n 'hsl(0, 0%, 89.5%)',\n 'hsl(0, 0%, 81.0%)',\n 'hsl(0, 0%, 56.1%)',\n 'hsl(0, 0%, 50.3%)',\n 'hsl(0, 0%, 42.5%)',\n 'hsl(0, 0%, 9.0%)',\n darkTransparent,\n ],\n}\n\nconst colorScale = {\n color1: 1,\n color2: 2,\n color3: 3,\n color4: 4,\n color5: 5,\n color6: 6,\n color7: 7,\n color8: 8,\n color9: 9,\n color10: 10,\n color11: 11,\n color12: 12,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n ...colorScale,\n shadowColor: 1,\n shadowColorHover: 1,\n shadowColorPress: 2,\n shadowColorFocus: 2,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n ...skip,\n // the background, color, etc keys here work like generics - they make it so you\n // can publish components for others to use without mandating a specific color scale\n // the @tamagui/button Button component looks for `$background`, so you set the\n // dark_red_Button theme to have a stronger background than the dark_red theme.\n background: 2,\n backgroundHover: 3,\n backgroundPress: 1,\n backgroundFocus: 2,\n backgroundStrong: 1,\n backgroundTransparent: 0,\n color: -1,\n colorHover: -2,\n colorPress: -1,\n colorFocus: -2,\n colorTransparent: -0,\n borderColor: 4,\n borderColorHover: 5,\n borderColorPress: 3,\n borderColorFocus: 4,\n placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.02)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.066)'\nconst darkShadowColor = 'rgba(0,0,0,0.2)'\nconst darkShadowColorStrong = 'rgba(0,0,0,0.3)'\n\nconst lightShadows = {\n shadowColor: lightShadowColorStrong,\n shadowColorHover: lightShadowColorStrong,\n shadowColorPress: lightShadowColor,\n shadowColorFocus: lightShadowColor,\n}\n\nconst darkShadows = {\n shadowColor: darkShadowColorStrong,\n shadowColorHover: darkShadowColorStrong,\n shadowColorPress: darkShadowColor,\n shadowColorFocus: darkShadowColor,\n}\n\nconst lightTemplate = {\n ...template,\n // our light color palette is... a bit unique\n borderColor: 6,\n borderColorHover: 7,\n borderColorFocus: 5,\n borderColorPress: 6,\n ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate)\nconst dark = createTheme(palettes.dark, darkTemplate)\n\ntype SubTheme = typeof light\n\nconst baseThemes: {\n light: SubTheme\n dark: SubTheme\n} = {\n light,\n dark,\n}\n\nconst masks = {\n weaker: createWeakenMask(),\n stronger: createStrengthenMask(),\n}\n\nconst maskOptions: MaskOptions = {\n skip,\n\n // avoids the transparent ends\n max: palettes.light.length - 2,\n min: 1,\n}\n\nconst allThemes = addChildren(baseThemes, (name, theme) => {\n const isLight = name === 'light'\n const inverseName = isLight ? 'dark' : 'light'\n const inverseTheme = baseThemes[inverseName]\n const transparent = (hsl: string, opacity = 0) =>\n hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)\n\n // setup colorThemes and their inverses\n const [colorThemes, inverseColorThemes] = [\n colorTokens[name],\n colorTokens[inverseName],\n ].map((colorSet) => {\n return Object.fromEntries(\n Object.keys(colorSet).map((color) => {\n const colorPalette = Object.values(colorSet[color]) as string[]\n // were re-ordering these\n const [head, tail] = [\n colorPalette.slice(0, 6),\n colorPalette.slice(colorPalette.length - 5),\n ]\n // add our transparent colors first/last\n // and make sure the last (foreground) color is white/black rather than colorful\n // this is mostly for consistency with the older theme-base\n const palette = [\n transparent(colorPalette[0]),\n ...head,\n ...tail,\n theme.color,\n transparent(colorPalette[colorPalette.length - 1]),\n ]\n const colorTheme = createTheme(\n palette,\n isLight\n ? {\n ...lightTemplate,\n // light color themes are a bit less sensitive\n borderColor: 4,\n borderColorHover: 5,\n borderColorFocus: 4,\n borderColorPress: 4,\n }\n : darkTemplate\n )\n return [color, colorTheme]\n })\n ) as Record<ColorName, SubTheme>\n })\n\n const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {\n const inverse = inverseColorThemes[colorName]\n return {\n ...getAltThemes(colorTheme, inverse, inverse),\n ...getComponentThemes(colorTheme, inverse),\n }\n })\n\n const baseActiveTheme = applyMask(colorThemes.blue, masks.weaker, {\n ...maskOptions,\n strength: 4,\n })\n\n const baseSubThemes = {\n ...getAltThemes(theme, inverseTheme, baseActiveTheme),\n ...getComponentThemes(theme, inverseTheme),\n }\n\n return {\n ...baseSubThemes,\n ...allColorThemes,\n }\n\n function getAltThemes(theme: SubTheme, inverse: SubTheme, activeTheme?: SubTheme) {\n const alt1 = applyMask(theme, masks.weaker, maskOptions)\n const alt2 = applyMask(alt1, masks.weaker, maskOptions)\n const active =\n activeTheme ??\n applyMask(theme, masks.weaker, {\n ...maskOptions,\n strength: 4,\n })\n return addChildren({ alt1, alt2, active }, (name, subTheme) => {\n return getComponentThemes(subTheme, subTheme === inverse ? theme : inverse)\n })\n }\n\n function getComponentThemes(theme: SubTheme, inverse: SubTheme) {\n const weaker1 = applyMask(theme, masks.weaker, maskOptions)\n const weaker2 = applyMask(weaker1, masks.weaker, maskOptions)\n const stronger1 = applyMask(theme, masks.stronger, maskOptions)\n const inverse1 = applyMask(inverse, masks.weaker, maskOptions)\n const inverse2 = applyMask(inverse1, masks.weaker, maskOptions)\n const strongerBorderLighterBackground: SubTheme = isLight\n ? {\n ...stronger1,\n borderColor: weaker1.borderColor,\n borderColorHover: weaker1.borderColorHover,\n borderColorPress: weaker1.borderColorPress,\n borderColorFocus: weaker1.borderColorFocus,\n }\n : {\n ...theme,\n borderColor: weaker1.borderColor,\n borderColorHover: weaker1.borderColorHover,\n borderColorPress: weaker1.borderColorPress,\n borderColorFocus: weaker1.borderColorFocus,\n }\n return {\n Card: weaker1,\n Button: weaker2,\n DrawerFrame: weaker1,\n SliderTrack: stronger1,\n SliderTrackActive: weaker2,\n SliderThumb: inverse1,\n Progress: weaker1,\n ProgressIndicator: inverse,\n Switch: weaker1,\n SwitchThumb: inverse2,\n TooltipArrow: weaker1,\n TooltipContent: weaker2,\n Input: strongerBorderLighterBackground,\n TextArea: strongerBorderLighterBackground,\n Tooltip: inverse1,\n }\n }\n})\n\nexport const themes = {\n ...allThemes,\n // bring back the full type, the rest use a subset to avoid clogging up ts,\n // tamagui will be smart and use the top level themes as the type for useTheme() etc\n light: createTheme(palettes.light, lightTemplate, { nonInheritedValues: lightColors }),\n dark: createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors }),\n}\n"],
|
|
5
|
+
"mappings": "AAAA;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,aAAa,YAAY,mBAAmB;AAIrD,MAAM,mBAAmB;AACzB,MAAM,kBAAkB;AAGxB,MAAM,WAAW;AAAA,EACf,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEA,MAAM,aAAa;AAAA,EACjB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAGA,MAAM,OAAO;AAAA,EACX,GAAG;AAAA,EACH,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAIA,MAAM,WAAW;AAAA,EACf,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKH,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,uBAAuB;AAAA,EACvB,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAEA,MAAM,mBAAmB;AACzB,MAAM,yBAAyB;AAC/B,MAAM,kBAAkB;AACxB,MAAM,wBAAwB;AAE9B,MAAM,eAAe;AAAA,EACnB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAEA,MAAM,cAAc;AAAA,EAClB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAEA,MAAM,gBAAgB;AAAA,EACpB,GAAG;AAAA;AAAA,EAEH,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,GAAG;AACL;AAEA,MAAM,eAAe,EAAE,GAAG,UAAU,GAAG,YAAY;AAEnD,MAAM,QAAQ,YAAY,SAAS,OAAO,aAAa;AACvD,MAAM,OAAO,YAAY,SAAS,MAAM,YAAY;AAIpD,MAAM,aAGF;AAAA,EACF;AAAA,EACA;AACF;AAEA,MAAM,QAAQ;AAAA,EACZ,QAAQ,iBAAiB;AAAA,EACzB,UAAU,qBAAqB;AACjC;AAEA,MAAM,cAA2B;AAAA,EAC/B;AAAA;AAAA,EAGA,KAAK,SAAS,MAAM,SAAS;AAAA,EAC7B,KAAK;AACP;AAEA,MAAM,YAAY,YAAY,YAAY,CAAC,MAAM,UAAU;AACzD,QAAM,UAAU,SAAS;AACzB,QAAM,cAAc,UAAU,SAAS;AACvC,QAAM,eAAe,WAAW,WAAW;AAC3C,QAAM,cAAc,CAAC,KAAa,UAAU,MAC1C,IAAI,QAAQ,MAAM,MAAM,UAAU,EAAE,QAAQ,QAAQ,OAAO;AAG7D,QAAM,CAAC,aAAa,kBAAkB,IAAI;AAAA,IACxC,YAAY,IAAI;AAAA,IAChB,YAAY,WAAW;AAAA,EACzB,EAAE,IAAI,CAAC,aAAa;AAClB,WAAO,OAAO;AAAA,MACZ,OAAO,KAAK,QAAQ,EAAE,IAAI,CAAC,UAAU;AACnC,cAAM,eAAe,OAAO,OAAO,SAAS,KAAK,CAAC;AAElD,cAAM,CAAC,MAAM,IAAI,IAAI;AAAA,UACnB,aAAa,MAAM,GAAG,CAAC;AAAA,UACvB,aAAa,MAAM,aAAa,SAAS,CAAC;AAAA,QAC5C;AAIA,cAAM,UAAU;AAAA,UACd,YAAY,aAAa,CAAC,CAAC;AAAA,UAC3B,GAAG;AAAA,UACH,GAAG;AAAA,UACH,MAAM;AAAA,UACN,YAAY,aAAa,aAAa,SAAS,CAAC,CAAC;AAAA,QACnD;AACA,cAAM,aAAa;AAAA,UACjB;AAAA,UACA,UACI;AAAA,YACE,GAAG;AAAA;AAAA,YAEH,aAAa;AAAA,YACb,kBAAkB;AAAA,YAClB,kBAAkB;AAAA,YAClB,kBAAkB;AAAA,UACpB,IACA;AAAA,QACN;AACA,eAAO,CAAC,OAAO,UAAU;AAAA,MAC3B,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB,YAAY,aAAa,CAAC,WAAW,eAAe;AACzE,UAAM,UAAU,mBAAmB,SAAS;AAC5C,WAAO;AAAA,MACL,GAAG,aAAa,YAAY,SAAS,OAAO;AAAA,MAC5C,GAAG,mBAAmB,YAAY,OAAO;AAAA,IAC3C;AAAA,EACF,CAAC;AAED,QAAM,kBAAkB,UAAU,YAAY,MAAM,MAAM,QAAQ;AAAA,IAChE,GAAG;AAAA,IACH,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,gBAAgB;AAAA,IACpB,GAAG,aAAa,OAAO,cAAc,eAAe;AAAA,IACpD,GAAG,mBAAmB,OAAO,YAAY;AAAA,EAC3C;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,WAAS,aAAaA,QAAiB,SAAmB,aAAwB;AAChF,UAAM,OAAO,UAAUA,QAAO,MAAM,QAAQ,WAAW;AACvD,UAAM,OAAO,UAAU,MAAM,MAAM,QAAQ,WAAW;AACtD,UAAM,SACJ,eACA,UAAUA,QAAO,MAAM,QAAQ;AAAA,MAC7B,GAAG;AAAA,MACH,UAAU;AAAA,IACZ,CAAC;AACH,WAAO,YAAY,EAAE,MAAM,MAAM,OAAO,GAAG,CAACC,OAAM,aAAa;AAC7D,aAAO,mBAAmB,UAAU,aAAa,UAAUD,SAAQ,OAAO;AAAA,IAC5E,CAAC;AAAA,EACH;AAEA,WAAS,mBAAmBA,QAAiB,SAAmB;AAC9D,UAAM,UAAU,UAAUA,QAAO,MAAM,QAAQ,WAAW;AAC1D,UAAM,UAAU,UAAU,SAAS,MAAM,QAAQ,WAAW;AAC5D,UAAM,YAAY,UAAUA,QAAO,MAAM,UAAU,WAAW;AAC9D,UAAM,WAAW,UAAU,SAAS,MAAM,QAAQ,WAAW;AAC7D,UAAM,WAAW,UAAU,UAAU,MAAM,QAAQ,WAAW;AAC9D,UAAM,kCAA4C,UAC9C;AAAA,MACE,GAAG;AAAA,MACH,aAAa,QAAQ;AAAA,MACrB,kBAAkB,QAAQ;AAAA,MAC1B,kBAAkB,QAAQ;AAAA,MAC1B,kBAAkB,QAAQ;AAAA,IAC5B,IACA;AAAA,MACE,GAAGA;AAAA,MACH,aAAa,QAAQ;AAAA,MACrB,kBAAkB,QAAQ;AAAA,MAC1B,kBAAkB,QAAQ;AAAA,MAC1B,kBAAkB,QAAQ;AAAA,IAC5B;AACJ,WAAO;AAAA,MACL,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,aAAa;AAAA,MACb,mBAAmB;AAAA,MACnB,aAAa;AAAA,MACb,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,cAAc;AAAA,MACd,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;AAEM,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA;AAAA;AAAA,EAGH,OAAO,YAAY,SAAS,OAAO,eAAe,EAAE,oBAAoB,YAAY,CAAC;AAAA,EACrF,MAAM,YAAY,SAAS,MAAM,cAAc,EAAE,oBAAoB,WAAW,CAAC;AACnF;",
|
|
6
6
|
"names": ["theme", "name"]
|
|
7
7
|
}
|