@tamagui/themes 1.5.2 → 1.5.3
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 +14 -13
- package/dist/cjs/themes.js.map +2 -2
- package/dist/esm/themes.js +14 -13
- package/dist/esm/themes.js.map +2 -2
- package/dist/esm/themes.mjs +14 -13
- package/dist/esm/themes.mjs.map +2 -2
- package/package.json +6 -6
- package/src/themes.tsx +14 -13
- package/types/themes.d.ts.map +1 -1
package/dist/cjs/themes.js
CHANGED
|
@@ -97,16 +97,16 @@ const template = {
|
|
|
97
97
|
colorPress: -1,
|
|
98
98
|
colorFocus: -2,
|
|
99
99
|
colorTransparent: -0,
|
|
100
|
-
borderColor:
|
|
101
|
-
borderColorHover:
|
|
102
|
-
borderColorPress:
|
|
103
|
-
borderColorFocus:
|
|
100
|
+
borderColor: 4,
|
|
101
|
+
borderColorHover: 5,
|
|
102
|
+
borderColorPress: 3,
|
|
103
|
+
borderColorFocus: 4,
|
|
104
104
|
placeholderColor: -4
|
|
105
105
|
};
|
|
106
|
-
const lightShadowColor = "rgba(0,0,0,0.
|
|
107
|
-
const lightShadowColorStrong = "rgba(0,0,0,0.
|
|
108
|
-
const darkShadowColor = "rgba(0,0,0,0.
|
|
109
|
-
const darkShadowColorStrong = "rgba(0,0,0,0.
|
|
106
|
+
const lightShadowColor = "rgba(0,0,0,0.05)";
|
|
107
|
+
const lightShadowColorStrong = "rgba(0,0,0,0.1)";
|
|
108
|
+
const darkShadowColor = "rgba(0,0,0,0.2)";
|
|
109
|
+
const darkShadowColorStrong = "rgba(0,0,0,0.3)";
|
|
110
110
|
const lightShadows = {
|
|
111
111
|
shadowColor: lightShadowColorStrong,
|
|
112
112
|
shadowColorHover: lightShadowColorStrong,
|
|
@@ -121,6 +121,11 @@ const darkShadows = {
|
|
|
121
121
|
};
|
|
122
122
|
const lightTemplate = {
|
|
123
123
|
...template,
|
|
124
|
+
background: 1,
|
|
125
|
+
backgroundHover: 2,
|
|
126
|
+
backgroundPress: 1,
|
|
127
|
+
backgroundFocus: 1,
|
|
128
|
+
backgroundStrong: 2,
|
|
124
129
|
...lightShadows
|
|
125
130
|
};
|
|
126
131
|
const darkTemplate = { ...template, ...darkShadows };
|
|
@@ -165,7 +170,6 @@ const allThemes = (0, import_create_theme.addChildren)(baseThemes, (name, themeI
|
|
|
165
170
|
const colorPalette = Object.values(colorSet[color]);
|
|
166
171
|
const first6 = colorPalette.slice(0, 6);
|
|
167
172
|
const last5 = colorPalette.slice(colorPalette.length - 5);
|
|
168
|
-
const shadows = isLight ? lightShadows : darkShadows;
|
|
169
173
|
const palette = [
|
|
170
174
|
transparent(colorPalette[0]),
|
|
171
175
|
...first6,
|
|
@@ -173,10 +177,7 @@ const allThemes = (0, import_create_theme.addChildren)(baseThemes, (name, themeI
|
|
|
173
177
|
theme.color,
|
|
174
178
|
transparent(colorPalette[colorPalette.length - 1])
|
|
175
179
|
];
|
|
176
|
-
const colorTheme = (0, import_create_theme.createTheme)(palette,
|
|
177
|
-
...template,
|
|
178
|
-
...shadows
|
|
179
|
-
});
|
|
180
|
+
const colorTheme = (0, import_create_theme.createTheme)(palette, isLight ? lightTemplate : darkTemplate);
|
|
180
181
|
return [color, colorTheme];
|
|
181
182
|
})
|
|
182
183
|
);
|
package/dist/cjs/themes.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/themes.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n addChildren,\n applyMask,\n createStrengthenMask,\n createTheme,\n createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n dark: [\n darkTransparent,\n '#090909',\n '#151515',\n '#191919',\n '#232323',\n '#282828',\n '#323232',\n '#424242',\n '#494949',\n '#545454',\n '#626262',\n '#a5a5a5',\n '#fff',\n lightTransparent,\n ],\n light: [\n lightTransparent,\n '#fff',\n '#f4f4f4',\n 'hsl(0, 0%, 99.0%)',\n 'hsl(0, 0%, 97.3%)',\n 'hsl(0, 0%, 95.1%)',\n 'hsl(0, 0%, 93.0%)',\n 'hsl(0, 0%, 90.9%)',\n 'hsl(0, 0%, 80.0%)',\n 'hsl(0, 0%, 56.1%)',\n 'hsl(0, 0%, 52.3%)',\n 'hsl(0, 0%, 43.5%)',\n 'hsl(0, 0%, 9.0%)',\n darkTransparent,\n ],\n}\n\nconst colorScale = {\n color1: 1,\n color2: 2,\n color3: 3,\n color4: 4,\n color5: 5,\n color6: 6,\n color7: 7,\n color8: 8,\n color9: 9,\n color10: 10,\n color11: 11,\n color12: 12,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n ...colorScale,\n shadowColor: 1,\n shadowColorHover: 1,\n shadowColorPress: 2,\n shadowColorFocus: 2,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n ...skip,\n // the background, color, etc keys here work like generics - they make it so you\n // can publish components for others to use without mandating a specific color scale\n // the @tamagui/button Button component looks for `$background`, so you set the\n // dark_red_Button theme to have a stronger background than the dark_red theme.\n background: 2,\n backgroundHover: 3,\n backgroundPress: 1,\n backgroundFocus: 2,\n backgroundStrong: 1,\n backgroundTransparent: 0,\n color: -1,\n colorHover: -2,\n colorPress: -1,\n colorFocus: -2,\n colorTransparent: -0,\n borderColor:
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import {\n addChildren,\n applyMask,\n createStrengthenMask,\n createTheme,\n createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n dark: [\n darkTransparent,\n '#090909',\n '#151515',\n '#191919',\n '#232323',\n '#282828',\n '#323232',\n '#424242',\n '#494949',\n '#545454',\n '#626262',\n '#a5a5a5',\n '#fff',\n lightTransparent,\n ],\n light: [\n lightTransparent,\n '#fff',\n '#f4f4f4',\n 'hsl(0, 0%, 99.0%)',\n 'hsl(0, 0%, 97.3%)',\n 'hsl(0, 0%, 95.1%)',\n 'hsl(0, 0%, 93.0%)',\n 'hsl(0, 0%, 90.9%)',\n 'hsl(0, 0%, 80.0%)',\n 'hsl(0, 0%, 56.1%)',\n 'hsl(0, 0%, 52.3%)',\n 'hsl(0, 0%, 43.5%)',\n 'hsl(0, 0%, 9.0%)',\n darkTransparent,\n ],\n}\n\nconst colorScale = {\n color1: 1,\n color2: 2,\n color3: 3,\n color4: 4,\n color5: 5,\n color6: 6,\n color7: 7,\n color8: 8,\n color9: 9,\n color10: 10,\n color11: 11,\n color12: 12,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n ...colorScale,\n shadowColor: 1,\n shadowColorHover: 1,\n shadowColorPress: 2,\n shadowColorFocus: 2,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n ...skip,\n // the background, color, etc keys here work like generics - they make it so you\n // can publish components for others to use without mandating a specific color scale\n // the @tamagui/button Button component looks for `$background`, so you set the\n // dark_red_Button theme to have a stronger background than the dark_red theme.\n background: 2,\n backgroundHover: 3,\n backgroundPress: 1,\n backgroundFocus: 2,\n backgroundStrong: 1,\n backgroundTransparent: 0,\n color: -1,\n colorHover: -2,\n colorPress: -1,\n colorFocus: -2,\n colorTransparent: -0,\n borderColor: 4,\n borderColorHover: 5,\n borderColorPress: 3,\n borderColorFocus: 4,\n placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.05)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.1)'\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 background: 1,\n backgroundHover: 2,\n backgroundPress: 1,\n backgroundFocus: 1,\n backgroundStrong: 2,\n ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate, {\n nonInheritedValues: lightColors,\n})\n\nconst dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })\n\ntype Theme = { [key in keyof typeof lightTemplate]: string }\n\nconst baseThemes: {\n light: Theme\n dark: Theme\n} = {\n light,\n dark,\n}\n\n// avoid transparent ends\nconst max = palettes.dark.length - 1\nconst masks = {\n weaker: createWeakenMask({\n by: 1,\n min: 1,\n max,\n }),\n stronger: createStrengthenMask({\n by: 1,\n min: 1,\n max,\n }),\n stronger2: createStrengthenMask({\n by: 2,\n min: 1,\n max,\n }),\n}\n\nconst allThemes = addChildren(baseThemes, (name, themeIn) => {\n const theme = themeIn as Theme\n const isLight = name === 'light'\n const inverseName = isLight ? 'dark' : 'light'\n const inverseTheme = baseThemes[inverseName]\n const transparent = (hsl: string, opacity = 0) =>\n hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)\n\n // setup colorThemes and their inverses\n const [colorThemes, inverseColorThemes] = [\n colorTokens[name],\n colorTokens[inverseName],\n ].map((colorSet) => {\n return Object.fromEntries(\n Object.keys(colorSet).map((color) => {\n const colorPalette = Object.values(colorSet[color as ColorName])\n // we want a much lighter text color by default so swap them around a bit\n const first6 = colorPalette.slice(0, 6)\n const last5 = colorPalette.slice(colorPalette.length - 5)\n const palette = [\n transparent(colorPalette[0]),\n ...first6,\n ...last5,\n theme.color,\n transparent(colorPalette[colorPalette.length - 1]),\n ]\n const colorTheme = createTheme(palette, isLight ? lightTemplate : darkTemplate)\n return [color, colorTheme]\n })\n ) as Record<ColorName, Theme>\n })\n\n const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {\n const inverse = inverseColorThemes[colorName]\n return {\n ...getAltThemes(colorTheme as any, inverse as any),\n ...getComponentThemes(colorTheme as any, inverse as any),\n }\n })\n\n return {\n ...getAltThemes(theme, inverseTheme),\n ...getComponentThemes(theme, inverseTheme),\n ...allColorThemes,\n }\n\n function getComponentThemes(theme: Theme, inverse: Theme) {\n const stronger1 = applyMask(theme, masks.stronger, { skip })\n const stronger2 = applyMask(stronger1, masks.stronger, { skip })\n const inverse1 = applyMask(inverse, masks.weaker, { skip })\n const inverse2 = applyMask(inverse1, masks.weaker, { skip })\n return {\n Button: stronger2,\n DrawerFrame: stronger1,\n SliderTrack: theme,\n SliderTrackActive: stronger2,\n SliderThumb: inverse1,\n Progress: stronger1,\n ProgressIndicator: inverse,\n Switch: stronger2,\n SwitchThumb: inverse2,\n TooltipArrow: stronger1,\n TooltipContent: stronger2,\n }\n }\n\n function getAltThemes(theme: Theme, inverse: Theme) {\n const alt1 = applyMask(theme, masks.weaker, { skip })\n const alt2 = applyMask(alt1, masks.weaker, { skip })\n const active = applyMask(theme, masks.stronger2, { skip })\n return addChildren({ alt1, alt2, active }, (name, theme) => {\n return getComponentThemes(theme as any, inverse)\n })\n }\n})\n\nexport const themes = {\n ...allThemes,\n // bring back the full type (the rest use a subset)\n light,\n dark,\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["theme", "name"]
|
|
7
7
|
}
|
package/dist/esm/themes.js
CHANGED
|
@@ -80,16 +80,16 @@ const template = {
|
|
|
80
80
|
colorPress: -1,
|
|
81
81
|
colorFocus: -2,
|
|
82
82
|
colorTransparent: -0,
|
|
83
|
-
borderColor:
|
|
84
|
-
borderColorHover:
|
|
85
|
-
borderColorPress:
|
|
86
|
-
borderColorFocus:
|
|
83
|
+
borderColor: 4,
|
|
84
|
+
borderColorHover: 5,
|
|
85
|
+
borderColorPress: 3,
|
|
86
|
+
borderColorFocus: 4,
|
|
87
87
|
placeholderColor: -4
|
|
88
88
|
};
|
|
89
|
-
const lightShadowColor = "rgba(0,0,0,0.
|
|
90
|
-
const lightShadowColorStrong = "rgba(0,0,0,0.
|
|
91
|
-
const darkShadowColor = "rgba(0,0,0,0.
|
|
92
|
-
const darkShadowColorStrong = "rgba(0,0,0,0.
|
|
89
|
+
const lightShadowColor = "rgba(0,0,0,0.05)";
|
|
90
|
+
const lightShadowColorStrong = "rgba(0,0,0,0.1)";
|
|
91
|
+
const darkShadowColor = "rgba(0,0,0,0.2)";
|
|
92
|
+
const darkShadowColorStrong = "rgba(0,0,0,0.3)";
|
|
93
93
|
const lightShadows = {
|
|
94
94
|
shadowColor: lightShadowColorStrong,
|
|
95
95
|
shadowColorHover: lightShadowColorStrong,
|
|
@@ -104,6 +104,11 @@ const darkShadows = {
|
|
|
104
104
|
};
|
|
105
105
|
const lightTemplate = {
|
|
106
106
|
...template,
|
|
107
|
+
background: 1,
|
|
108
|
+
backgroundHover: 2,
|
|
109
|
+
backgroundPress: 1,
|
|
110
|
+
backgroundFocus: 1,
|
|
111
|
+
backgroundStrong: 2,
|
|
107
112
|
...lightShadows
|
|
108
113
|
};
|
|
109
114
|
const darkTemplate = { ...template, ...darkShadows };
|
|
@@ -148,7 +153,6 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
148
153
|
const colorPalette = Object.values(colorSet[color]);
|
|
149
154
|
const first6 = colorPalette.slice(0, 6);
|
|
150
155
|
const last5 = colorPalette.slice(colorPalette.length - 5);
|
|
151
|
-
const shadows = isLight ? lightShadows : darkShadows;
|
|
152
156
|
const palette = [
|
|
153
157
|
transparent(colorPalette[0]),
|
|
154
158
|
...first6,
|
|
@@ -156,10 +160,7 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
156
160
|
theme.color,
|
|
157
161
|
transparent(colorPalette[colorPalette.length - 1])
|
|
158
162
|
];
|
|
159
|
-
const colorTheme = createTheme(palette,
|
|
160
|
-
...template,
|
|
161
|
-
...shadows
|
|
162
|
-
});
|
|
163
|
+
const colorTheme = createTheme(palette, isLight ? lightTemplate : darkTemplate);
|
|
163
164
|
return [color, colorTheme];
|
|
164
165
|
})
|
|
165
166
|
);
|
package/dist/esm/themes.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/themes.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n addChildren,\n applyMask,\n createStrengthenMask,\n createTheme,\n createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n dark: [\n darkTransparent,\n '#090909',\n '#151515',\n '#191919',\n '#232323',\n '#282828',\n '#323232',\n '#424242',\n '#494949',\n '#545454',\n '#626262',\n '#a5a5a5',\n '#fff',\n lightTransparent,\n ],\n light: [\n lightTransparent,\n '#fff',\n '#f4f4f4',\n 'hsl(0, 0%, 99.0%)',\n 'hsl(0, 0%, 97.3%)',\n 'hsl(0, 0%, 95.1%)',\n 'hsl(0, 0%, 93.0%)',\n 'hsl(0, 0%, 90.9%)',\n 'hsl(0, 0%, 80.0%)',\n 'hsl(0, 0%, 56.1%)',\n 'hsl(0, 0%, 52.3%)',\n 'hsl(0, 0%, 43.5%)',\n 'hsl(0, 0%, 9.0%)',\n darkTransparent,\n ],\n}\n\nconst colorScale = {\n color1: 1,\n color2: 2,\n color3: 3,\n color4: 4,\n color5: 5,\n color6: 6,\n color7: 7,\n color8: 8,\n color9: 9,\n color10: 10,\n color11: 11,\n color12: 12,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n ...colorScale,\n shadowColor: 1,\n shadowColorHover: 1,\n shadowColorPress: 2,\n shadowColorFocus: 2,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n ...skip,\n // the background, color, etc keys here work like generics - they make it so you\n // can publish components for others to use without mandating a specific color scale\n // the @tamagui/button Button component looks for `$background`, so you set the\n // dark_red_Button theme to have a stronger background than the dark_red theme.\n background: 2,\n backgroundHover: 3,\n backgroundPress: 1,\n backgroundFocus: 2,\n backgroundStrong: 1,\n backgroundTransparent: 0,\n color: -1,\n colorHover: -2,\n colorPress: -1,\n colorFocus: -2,\n colorTransparent: -0,\n borderColor:
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import {\n addChildren,\n applyMask,\n createStrengthenMask,\n createTheme,\n createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n dark: [\n darkTransparent,\n '#090909',\n '#151515',\n '#191919',\n '#232323',\n '#282828',\n '#323232',\n '#424242',\n '#494949',\n '#545454',\n '#626262',\n '#a5a5a5',\n '#fff',\n lightTransparent,\n ],\n light: [\n lightTransparent,\n '#fff',\n '#f4f4f4',\n 'hsl(0, 0%, 99.0%)',\n 'hsl(0, 0%, 97.3%)',\n 'hsl(0, 0%, 95.1%)',\n 'hsl(0, 0%, 93.0%)',\n 'hsl(0, 0%, 90.9%)',\n 'hsl(0, 0%, 80.0%)',\n 'hsl(0, 0%, 56.1%)',\n 'hsl(0, 0%, 52.3%)',\n 'hsl(0, 0%, 43.5%)',\n 'hsl(0, 0%, 9.0%)',\n darkTransparent,\n ],\n}\n\nconst colorScale = {\n color1: 1,\n color2: 2,\n color3: 3,\n color4: 4,\n color5: 5,\n color6: 6,\n color7: 7,\n color8: 8,\n color9: 9,\n color10: 10,\n color11: 11,\n color12: 12,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n ...colorScale,\n shadowColor: 1,\n shadowColorHover: 1,\n shadowColorPress: 2,\n shadowColorFocus: 2,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n ...skip,\n // the background, color, etc keys here work like generics - they make it so you\n // can publish components for others to use without mandating a specific color scale\n // the @tamagui/button Button component looks for `$background`, so you set the\n // dark_red_Button theme to have a stronger background than the dark_red theme.\n background: 2,\n backgroundHover: 3,\n backgroundPress: 1,\n backgroundFocus: 2,\n backgroundStrong: 1,\n backgroundTransparent: 0,\n color: -1,\n colorHover: -2,\n colorPress: -1,\n colorFocus: -2,\n colorTransparent: -0,\n borderColor: 4,\n borderColorHover: 5,\n borderColorPress: 3,\n borderColorFocus: 4,\n placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.05)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.1)'\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 background: 1,\n backgroundHover: 2,\n backgroundPress: 1,\n backgroundFocus: 1,\n backgroundStrong: 2,\n ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate, {\n nonInheritedValues: lightColors,\n})\n\nconst dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })\n\ntype Theme = { [key in keyof typeof lightTemplate]: string }\n\nconst baseThemes: {\n light: Theme\n dark: Theme\n} = {\n light,\n dark,\n}\n\n// avoid transparent ends\nconst max = palettes.dark.length - 1\nconst masks = {\n weaker: createWeakenMask({\n by: 1,\n min: 1,\n max,\n }),\n stronger: createStrengthenMask({\n by: 1,\n min: 1,\n max,\n }),\n stronger2: createStrengthenMask({\n by: 2,\n min: 1,\n max,\n }),\n}\n\nconst allThemes = addChildren(baseThemes, (name, themeIn) => {\n const theme = themeIn as Theme\n const isLight = name === 'light'\n const inverseName = isLight ? 'dark' : 'light'\n const inverseTheme = baseThemes[inverseName]\n const transparent = (hsl: string, opacity = 0) =>\n hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)\n\n // setup colorThemes and their inverses\n const [colorThemes, inverseColorThemes] = [\n colorTokens[name],\n colorTokens[inverseName],\n ].map((colorSet) => {\n return Object.fromEntries(\n Object.keys(colorSet).map((color) => {\n const colorPalette = Object.values(colorSet[color as ColorName])\n // we want a much lighter text color by default so swap them around a bit\n const first6 = colorPalette.slice(0, 6)\n const last5 = colorPalette.slice(colorPalette.length - 5)\n const palette = [\n transparent(colorPalette[0]),\n ...first6,\n ...last5,\n theme.color,\n transparent(colorPalette[colorPalette.length - 1]),\n ]\n const colorTheme = createTheme(palette, isLight ? lightTemplate : darkTemplate)\n return [color, colorTheme]\n })\n ) as Record<ColorName, Theme>\n })\n\n const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {\n const inverse = inverseColorThemes[colorName]\n return {\n ...getAltThemes(colorTheme as any, inverse as any),\n ...getComponentThemes(colorTheme as any, inverse as any),\n }\n })\n\n return {\n ...getAltThemes(theme, inverseTheme),\n ...getComponentThemes(theme, inverseTheme),\n ...allColorThemes,\n }\n\n function getComponentThemes(theme: Theme, inverse: Theme) {\n const stronger1 = applyMask(theme, masks.stronger, { skip })\n const stronger2 = applyMask(stronger1, masks.stronger, { skip })\n const inverse1 = applyMask(inverse, masks.weaker, { skip })\n const inverse2 = applyMask(inverse1, masks.weaker, { skip })\n return {\n Button: stronger2,\n DrawerFrame: stronger1,\n SliderTrack: theme,\n SliderTrackActive: stronger2,\n SliderThumb: inverse1,\n Progress: stronger1,\n ProgressIndicator: inverse,\n Switch: stronger2,\n SwitchThumb: inverse2,\n TooltipArrow: stronger1,\n TooltipContent: stronger2,\n }\n }\n\n function getAltThemes(theme: Theme, inverse: Theme) {\n const alt1 = applyMask(theme, masks.weaker, { skip })\n const alt2 = applyMask(alt1, masks.weaker, { skip })\n const active = applyMask(theme, masks.stronger2, { skip })\n return addChildren({ alt1, alt2, active }, (name, theme) => {\n return getComponentThemes(theme as any, inverse)\n })\n }\n})\n\nexport const themes = {\n ...allThemes,\n // bring back the full type (the rest use a subset)\n light,\n dark,\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["theme", "name"]
|
|
7
7
|
}
|
package/dist/esm/themes.mjs
CHANGED
|
@@ -80,16 +80,16 @@ const template = {
|
|
|
80
80
|
colorPress: -1,
|
|
81
81
|
colorFocus: -2,
|
|
82
82
|
colorTransparent: -0,
|
|
83
|
-
borderColor:
|
|
84
|
-
borderColorHover:
|
|
85
|
-
borderColorPress:
|
|
86
|
-
borderColorFocus:
|
|
83
|
+
borderColor: 4,
|
|
84
|
+
borderColorHover: 5,
|
|
85
|
+
borderColorPress: 3,
|
|
86
|
+
borderColorFocus: 4,
|
|
87
87
|
placeholderColor: -4
|
|
88
88
|
};
|
|
89
|
-
const lightShadowColor = "rgba(0,0,0,0.
|
|
90
|
-
const lightShadowColorStrong = "rgba(0,0,0,0.
|
|
91
|
-
const darkShadowColor = "rgba(0,0,0,0.
|
|
92
|
-
const darkShadowColorStrong = "rgba(0,0,0,0.
|
|
89
|
+
const lightShadowColor = "rgba(0,0,0,0.05)";
|
|
90
|
+
const lightShadowColorStrong = "rgba(0,0,0,0.1)";
|
|
91
|
+
const darkShadowColor = "rgba(0,0,0,0.2)";
|
|
92
|
+
const darkShadowColorStrong = "rgba(0,0,0,0.3)";
|
|
93
93
|
const lightShadows = {
|
|
94
94
|
shadowColor: lightShadowColorStrong,
|
|
95
95
|
shadowColorHover: lightShadowColorStrong,
|
|
@@ -104,6 +104,11 @@ const darkShadows = {
|
|
|
104
104
|
};
|
|
105
105
|
const lightTemplate = {
|
|
106
106
|
...template,
|
|
107
|
+
background: 1,
|
|
108
|
+
backgroundHover: 2,
|
|
109
|
+
backgroundPress: 1,
|
|
110
|
+
backgroundFocus: 1,
|
|
111
|
+
backgroundStrong: 2,
|
|
107
112
|
...lightShadows
|
|
108
113
|
};
|
|
109
114
|
const darkTemplate = { ...template, ...darkShadows };
|
|
@@ -148,7 +153,6 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
148
153
|
const colorPalette = Object.values(colorSet[color]);
|
|
149
154
|
const first6 = colorPalette.slice(0, 6);
|
|
150
155
|
const last5 = colorPalette.slice(colorPalette.length - 5);
|
|
151
|
-
const shadows = isLight ? lightShadows : darkShadows;
|
|
152
156
|
const palette = [
|
|
153
157
|
transparent(colorPalette[0]),
|
|
154
158
|
...first6,
|
|
@@ -156,10 +160,7 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
156
160
|
theme.color,
|
|
157
161
|
transparent(colorPalette[colorPalette.length - 1])
|
|
158
162
|
];
|
|
159
|
-
const colorTheme = createTheme(palette,
|
|
160
|
-
...template,
|
|
161
|
-
...shadows
|
|
162
|
-
});
|
|
163
|
+
const colorTheme = createTheme(palette, isLight ? lightTemplate : darkTemplate);
|
|
163
164
|
return [color, colorTheme];
|
|
164
165
|
})
|
|
165
166
|
);
|
package/dist/esm/themes.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/themes.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n addChildren,\n applyMask,\n createStrengthenMask,\n createTheme,\n createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n dark: [\n darkTransparent,\n '#090909',\n '#151515',\n '#191919',\n '#232323',\n '#282828',\n '#323232',\n '#424242',\n '#494949',\n '#545454',\n '#626262',\n '#a5a5a5',\n '#fff',\n lightTransparent,\n ],\n light: [\n lightTransparent,\n '#fff',\n '#f4f4f4',\n 'hsl(0, 0%, 99.0%)',\n 'hsl(0, 0%, 97.3%)',\n 'hsl(0, 0%, 95.1%)',\n 'hsl(0, 0%, 93.0%)',\n 'hsl(0, 0%, 90.9%)',\n 'hsl(0, 0%, 80.0%)',\n 'hsl(0, 0%, 56.1%)',\n 'hsl(0, 0%, 52.3%)',\n 'hsl(0, 0%, 43.5%)',\n 'hsl(0, 0%, 9.0%)',\n darkTransparent,\n ],\n}\n\nconst colorScale = {\n color1: 1,\n color2: 2,\n color3: 3,\n color4: 4,\n color5: 5,\n color6: 6,\n color7: 7,\n color8: 8,\n color9: 9,\n color10: 10,\n color11: 11,\n color12: 12,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n ...colorScale,\n shadowColor: 1,\n shadowColorHover: 1,\n shadowColorPress: 2,\n shadowColorFocus: 2,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n ...skip,\n // the background, color, etc keys here work like generics - they make it so you\n // can publish components for others to use without mandating a specific color scale\n // the @tamagui/button Button component looks for `$background`, so you set the\n // dark_red_Button theme to have a stronger background than the dark_red theme.\n background: 2,\n backgroundHover: 3,\n backgroundPress: 1,\n backgroundFocus: 2,\n backgroundStrong: 1,\n backgroundTransparent: 0,\n color: -1,\n colorHover: -2,\n colorPress: -1,\n colorFocus: -2,\n colorTransparent: -0,\n borderColor:
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import {\n addChildren,\n applyMask,\n createStrengthenMask,\n createTheme,\n createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n dark: [\n darkTransparent,\n '#090909',\n '#151515',\n '#191919',\n '#232323',\n '#282828',\n '#323232',\n '#424242',\n '#494949',\n '#545454',\n '#626262',\n '#a5a5a5',\n '#fff',\n lightTransparent,\n ],\n light: [\n lightTransparent,\n '#fff',\n '#f4f4f4',\n 'hsl(0, 0%, 99.0%)',\n 'hsl(0, 0%, 97.3%)',\n 'hsl(0, 0%, 95.1%)',\n 'hsl(0, 0%, 93.0%)',\n 'hsl(0, 0%, 90.9%)',\n 'hsl(0, 0%, 80.0%)',\n 'hsl(0, 0%, 56.1%)',\n 'hsl(0, 0%, 52.3%)',\n 'hsl(0, 0%, 43.5%)',\n 'hsl(0, 0%, 9.0%)',\n darkTransparent,\n ],\n}\n\nconst colorScale = {\n color1: 1,\n color2: 2,\n color3: 3,\n color4: 4,\n color5: 5,\n color6: 6,\n color7: 7,\n color8: 8,\n color9: 9,\n color10: 10,\n color11: 11,\n color12: 12,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n ...colorScale,\n shadowColor: 1,\n shadowColorHover: 1,\n shadowColorPress: 2,\n shadowColorFocus: 2,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n ...skip,\n // the background, color, etc keys here work like generics - they make it so you\n // can publish components for others to use without mandating a specific color scale\n // the @tamagui/button Button component looks for `$background`, so you set the\n // dark_red_Button theme to have a stronger background than the dark_red theme.\n background: 2,\n backgroundHover: 3,\n backgroundPress: 1,\n backgroundFocus: 2,\n backgroundStrong: 1,\n backgroundTransparent: 0,\n color: -1,\n colorHover: -2,\n colorPress: -1,\n colorFocus: -2,\n colorTransparent: -0,\n borderColor: 4,\n borderColorHover: 5,\n borderColorPress: 3,\n borderColorFocus: 4,\n placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.05)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.1)'\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 background: 1,\n backgroundHover: 2,\n backgroundPress: 1,\n backgroundFocus: 1,\n backgroundStrong: 2,\n ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate, {\n nonInheritedValues: lightColors,\n})\n\nconst dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })\n\ntype Theme = { [key in keyof typeof lightTemplate]: string }\n\nconst baseThemes: {\n light: Theme\n dark: Theme\n} = {\n light,\n dark,\n}\n\n// avoid transparent ends\nconst max = palettes.dark.length - 1\nconst masks = {\n weaker: createWeakenMask({\n by: 1,\n min: 1,\n max,\n }),\n stronger: createStrengthenMask({\n by: 1,\n min: 1,\n max,\n }),\n stronger2: createStrengthenMask({\n by: 2,\n min: 1,\n max,\n }),\n}\n\nconst allThemes = addChildren(baseThemes, (name, themeIn) => {\n const theme = themeIn as Theme\n const isLight = name === 'light'\n const inverseName = isLight ? 'dark' : 'light'\n const inverseTheme = baseThemes[inverseName]\n const transparent = (hsl: string, opacity = 0) =>\n hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)\n\n // setup colorThemes and their inverses\n const [colorThemes, inverseColorThemes] = [\n colorTokens[name],\n colorTokens[inverseName],\n ].map((colorSet) => {\n return Object.fromEntries(\n Object.keys(colorSet).map((color) => {\n const colorPalette = Object.values(colorSet[color as ColorName])\n // we want a much lighter text color by default so swap them around a bit\n const first6 = colorPalette.slice(0, 6)\n const last5 = colorPalette.slice(colorPalette.length - 5)\n const palette = [\n transparent(colorPalette[0]),\n ...first6,\n ...last5,\n theme.color,\n transparent(colorPalette[colorPalette.length - 1]),\n ]\n const colorTheme = createTheme(palette, isLight ? lightTemplate : darkTemplate)\n return [color, colorTheme]\n })\n ) as Record<ColorName, Theme>\n })\n\n const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {\n const inverse = inverseColorThemes[colorName]\n return {\n ...getAltThemes(colorTheme as any, inverse as any),\n ...getComponentThemes(colorTheme as any, inverse as any),\n }\n })\n\n return {\n ...getAltThemes(theme, inverseTheme),\n ...getComponentThemes(theme, inverseTheme),\n ...allColorThemes,\n }\n\n function getComponentThemes(theme: Theme, inverse: Theme) {\n const stronger1 = applyMask(theme, masks.stronger, { skip })\n const stronger2 = applyMask(stronger1, masks.stronger, { skip })\n const inverse1 = applyMask(inverse, masks.weaker, { skip })\n const inverse2 = applyMask(inverse1, masks.weaker, { skip })\n return {\n Button: stronger2,\n DrawerFrame: stronger1,\n SliderTrack: theme,\n SliderTrackActive: stronger2,\n SliderThumb: inverse1,\n Progress: stronger1,\n ProgressIndicator: inverse,\n Switch: stronger2,\n SwitchThumb: inverse2,\n TooltipArrow: stronger1,\n TooltipContent: stronger2,\n }\n }\n\n function getAltThemes(theme: Theme, inverse: Theme) {\n const alt1 = applyMask(theme, masks.weaker, { skip })\n const alt2 = applyMask(alt1, masks.weaker, { skip })\n const active = applyMask(theme, masks.stronger2, { skip })\n return addChildren({ alt1, alt2, active }, (name, theme) => {\n return getComponentThemes(theme as any, inverse)\n })\n }\n})\n\nexport const themes = {\n ...allThemes,\n // bring back the full type (the rest use a subset)\n light,\n dark,\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["theme", "name"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/themes",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.3",
|
|
4
4
|
"types": "./types/index.d.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -32,13 +32,13 @@
|
|
|
32
32
|
}
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@tamagui/colors": "^1.5.
|
|
36
|
-
"@tamagui/core": "^1.5.
|
|
37
|
-
"@tamagui/create-theme": "^1.5.
|
|
38
|
-
"@tamagui/create-themes": "^1.5.
|
|
35
|
+
"@tamagui/colors": "^1.5.3",
|
|
36
|
+
"@tamagui/core": "^1.5.3",
|
|
37
|
+
"@tamagui/create-theme": "^1.5.3",
|
|
38
|
+
"@tamagui/create-themes": "^1.5.3"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@tamagui/build": "^1.5.
|
|
41
|
+
"@tamagui/build": "^1.5.3"
|
|
42
42
|
},
|
|
43
43
|
"publishConfig": {
|
|
44
44
|
"access": "public"
|
package/src/themes.tsx
CHANGED
|
@@ -92,17 +92,17 @@ const template = {
|
|
|
92
92
|
colorPress: -1,
|
|
93
93
|
colorFocus: -2,
|
|
94
94
|
colorTransparent: -0,
|
|
95
|
-
borderColor:
|
|
96
|
-
borderColorHover:
|
|
97
|
-
borderColorPress:
|
|
98
|
-
borderColorFocus:
|
|
95
|
+
borderColor: 4,
|
|
96
|
+
borderColorHover: 5,
|
|
97
|
+
borderColorPress: 3,
|
|
98
|
+
borderColorFocus: 4,
|
|
99
99
|
placeholderColor: -4,
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
-
const lightShadowColor = 'rgba(0,0,0,0.
|
|
103
|
-
const lightShadowColorStrong = 'rgba(0,0,0,0.
|
|
104
|
-
const darkShadowColor = 'rgba(0,0,0,0.
|
|
105
|
-
const darkShadowColorStrong = 'rgba(0,0,0,0.
|
|
102
|
+
const lightShadowColor = 'rgba(0,0,0,0.05)'
|
|
103
|
+
const lightShadowColorStrong = 'rgba(0,0,0,0.1)'
|
|
104
|
+
const darkShadowColor = 'rgba(0,0,0,0.2)'
|
|
105
|
+
const darkShadowColorStrong = 'rgba(0,0,0,0.3)'
|
|
106
106
|
|
|
107
107
|
const lightShadows = {
|
|
108
108
|
shadowColor: lightShadowColorStrong,
|
|
@@ -120,6 +120,11 @@ const darkShadows = {
|
|
|
120
120
|
|
|
121
121
|
const lightTemplate = {
|
|
122
122
|
...template,
|
|
123
|
+
background: 1,
|
|
124
|
+
backgroundHover: 2,
|
|
125
|
+
backgroundPress: 1,
|
|
126
|
+
backgroundFocus: 1,
|
|
127
|
+
backgroundStrong: 2,
|
|
123
128
|
...lightShadows,
|
|
124
129
|
}
|
|
125
130
|
|
|
@@ -180,7 +185,6 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
180
185
|
// we want a much lighter text color by default so swap them around a bit
|
|
181
186
|
const first6 = colorPalette.slice(0, 6)
|
|
182
187
|
const last5 = colorPalette.slice(colorPalette.length - 5)
|
|
183
|
-
const shadows = isLight ? lightShadows : darkShadows
|
|
184
188
|
const palette = [
|
|
185
189
|
transparent(colorPalette[0]),
|
|
186
190
|
...first6,
|
|
@@ -188,10 +192,7 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
|
|
|
188
192
|
theme.color,
|
|
189
193
|
transparent(colorPalette[colorPalette.length - 1]),
|
|
190
194
|
]
|
|
191
|
-
const colorTheme = createTheme(palette,
|
|
192
|
-
...template,
|
|
193
|
-
...shadows,
|
|
194
|
-
})
|
|
195
|
+
const colorTheme = createTheme(palette, isLight ? lightTemplate : darkTemplate)
|
|
195
196
|
return [color, colorTheme]
|
|
196
197
|
})
|
|
197
198
|
) as Record<ColorName, Theme>
|
package/types/themes.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.tsx"],"names":[],"mappings":"AAwHA,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.tsx"],"names":[],"mappings":"AAwHA,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQlB,CAAA;AAUD,KAAK,KAAK,GAAG;KAAG,GAAG,IAAI,MAAM,OAAO,aAAa,GAAG,MAAM;CAAE,CAAA;AA0G5D,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKlB,CAAA"}
|