@tamagui/themes 1.88.13 → 1.89.0-1706360676826
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/LICENSE +21 -0
- package/dist/cjs/masks.js.map +1 -1
- package/dist/cjs/masks.native.js.map +1 -1
- package/dist/cjs/themes-old.js.map +1 -1
- package/dist/cjs/themes-old.native.js.map +1 -1
- package/dist/cjs/tokens.js.map +1 -1
- package/dist/cjs/tokens.native.js.map +1 -1
- package/dist/cjs/v2-themes.js.map +1 -1
- package/dist/cjs/v2-themes.native.js.map +1 -1
- package/dist/esm/componentThemeDefinitions.mjs +99 -0
- package/dist/esm/generated-new.mjs +1994 -0
- package/dist/esm/generated-v2.mjs +1918 -0
- package/dist/esm/helpers.mjs +8 -0
- package/dist/esm/index.mjs +8 -0
- package/dist/esm/masks.js.map +1 -1
- package/dist/esm/masks.mjs +90 -0
- package/dist/esm/masks.native.js.map +1 -1
- package/dist/esm/palettes.mjs +28 -0
- package/dist/esm/shadows.mjs +19 -0
- package/dist/esm/templates.mjs +93 -0
- package/dist/esm/themes-new.mjs +62 -0
- package/dist/esm/themes-old.js.map +1 -1
- package/dist/esm/themes-old.mjs +260 -0
- package/dist/esm/themes-old.native.js.map +1 -1
- package/dist/esm/themes.mjs +2 -0
- package/dist/esm/tokens.js.map +1 -1
- package/dist/esm/tokens.mjs +123 -0
- package/dist/esm/tokens.native.js.map +1 -1
- package/dist/esm/v2-themes.js.map +1 -1
- package/dist/esm/v2-themes.mjs +437 -0
- package/dist/esm/v2-themes.native.js.map +1 -1
- package/dist/esm/v2.mjs +12 -0
- package/package.json +7 -7
- package/src/componentThemeDefinitions.tsx +2 -2
- package/src/masks.tsx +1 -1
- package/src/templates.tsx +1 -1
- package/src/themes-old.tsx +1 -1
- package/src/tokens.tsx +2 -1
- package/src/v2-themes.ts +4 -2
- package/types/tokens.d.ts +1 -1
- package/types/tokens.d.ts.map +1 -1
- package/types/v2-themes.d.ts +1 -1
- package/types/v2-themes.d.ts.map +1 -1
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export * from "./themes.mjs";
|
|
2
|
+
export * from "./tokens.mjs";
|
|
3
|
+
export * from "./masks.mjs";
|
|
4
|
+
export * from "./componentThemeDefinitions.mjs";
|
|
5
|
+
export * from "./palettes.mjs";
|
|
6
|
+
export * from "@tamagui/colors";
|
|
7
|
+
export * from "./templates.mjs";
|
|
8
|
+
export * from "./shadows.mjs";
|
package/dist/esm/masks.js.map
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/masks.tsx"],
|
|
4
|
-
"mappings": "
|
|
4
|
+
"mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,QAAQ;AAAA,EACnB,UAAU,mBAAmB;AAAA,EAC7B,QAAQ,iBAAiB;AAAA,EACzB,SAAS,iBAAiB,EAAE,UAAU,EAAE,CAAC;AAAA,EACzC,SAAS,iBAAiB,EAAE,UAAU,EAAE,CAAC;AAAA,EACzC,YAAY,qBAAqB;AAAA,EACjC,SAAS,kBAAkB;AAAA,EAC3B,eAAe,aAAa,kBAAkB,GAAG,iBAAiB,EAAE,UAAU,EAAE,CAAC,CAAC;AAAA,EAClF,gBAAgB,aAAa,kBAAkB,GAAG,iBAAiB,EAAE,UAAU,EAAE,CAAC,CAAC;AAAA,EACnF,gBAAgB,aAAa,kBAAkB,GAAG,iBAAiB,EAAE,UAAU,EAAE,CAAC,CAAC;AAAA,EACnF,oBAAoB;AAAA,IAClB,kBAAkB;AAAA,IAClB,qBAAqB,EAAE,UAAU,EAAE,CAAC;AAAA,EACtC;AAAA,EACA,2BAA2B,WAAW,CAAC,UAAU,YAAY;AAC3D,UAAM,WAAW,qBAAqB,EAAE,KAAK,UAAU,OAAO,GACxD,SAAS,iBAAiB,EAAE,KAAK,UAAU,OAAO;AACxD,WAAO;AAAA,MACL,GAAG;AAAA,MACH,aAAa,OAAO;AAAA,MACpB,kBAAkB,OAAO;AAAA,MACzB,kBAAkB,OAAO;AAAA,MACzB,kBAAkB,OAAO;AAAA,IAC3B;AAAA,EACF,CAAC;AAAA,EACD,gBAAgB,WAAW,CAAC,UAAU,YAAY;AAChD,UAAM,UAAU,iBAAiB,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,UAAU,OAAO,GAClE,UAAU,iBAAiB,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,UAAU,OAAO;AACxE,WAAO;AAAA,MACL,GAAG;AAAA,MACH,aAAa,QAAQ;AAAA,MACrB,kBAAkB,QAAQ;AAAA,MAC1B,kBAAkB,QAAQ;AAAA,MAC1B,kBAAkB,QAAQ;AAAA,IAC5B;AAAA,EACF,CAAC;AAAA,EACD,mBAAmB,WAAW,CAAC,UAAU,YAAY;AACnD,UAAM,aAAa,iBAAiB,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,UAAU,OAAO;AAE3E,WAAO;AAAA,MACL,GAFc,iBAAiB,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,UAAU,OAAO;AAAA,MAGtE,aAAa,WAAW;AAAA,MACxB,kBAAkB,WAAW;AAAA,MAC7B,kBAAkB,WAAW;AAAA,MAC7B,kBAAkB,WAAW;AAAA,IAC/B;AAAA,EACF,CAAC;AAAA,EACD,cAAc,WAAW,CAAC,UAAU,YAAY;AAC9C,UAAM,QAAQ,SAAS,KAAK,UAAU,OAAO,GACvC,SAAS,iBAAiB,EAAE,KAAK,UAAU,OAAO;AACxD,WAAO;AAAA,MACL,GAAG;AAAA,MACH,aAAa,OAAO;AAAA,MACpB,kBAAkB,OAAO;AAAA,MACzB,kBAAkB,OAAO;AAAA,MACzB,kBAAkB,OAAO;AAAA,IAC3B;AAAA,EACF,CAAC;AAAA,EACD,eAAe,WAAW,CAAC,UAAU,YAAY;AAC/C,UAAM,QAAQ,SAAS,KAAK,UAAU,OAAO,GACvC,SAAS,iBAAiB,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,UAAU,OAAO;AACvE,WAAO;AAAA,MACL,GAAG;AAAA,MACH,aAAa,OAAO;AAAA,MACpB,kBAAkB,OAAO;AAAA,MACzB,kBAAkB,OAAO;AAAA,MACzB,kBAAkB,OAAO;AAAA,IAC3B;AAAA,EACF,CAAC;AACH;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { combineMasks, createIdentityMask, createInverseMask, createMask, createSoftenMask, createStrengthenMask, skipMask } from "@tamagui/create-theme";
|
|
2
|
+
const masks = {
|
|
3
|
+
identity: createIdentityMask(),
|
|
4
|
+
soften: createSoftenMask(),
|
|
5
|
+
soften2: createSoftenMask({
|
|
6
|
+
strength: 2
|
|
7
|
+
}),
|
|
8
|
+
soften3: createSoftenMask({
|
|
9
|
+
strength: 3
|
|
10
|
+
}),
|
|
11
|
+
strengthen: createStrengthenMask(),
|
|
12
|
+
inverse: createInverseMask(),
|
|
13
|
+
inverseSoften: combineMasks(createInverseMask(), createSoftenMask({
|
|
14
|
+
strength: 2
|
|
15
|
+
})),
|
|
16
|
+
inverseSoften2: combineMasks(createInverseMask(), createSoftenMask({
|
|
17
|
+
strength: 3
|
|
18
|
+
})),
|
|
19
|
+
inverseSoften3: combineMasks(createInverseMask(), createSoftenMask({
|
|
20
|
+
strength: 4
|
|
21
|
+
})),
|
|
22
|
+
inverseStrengthen2: combineMasks(createInverseMask(), createStrengthenMask({
|
|
23
|
+
strength: 2
|
|
24
|
+
})),
|
|
25
|
+
strengthenButSoftenBorder: createMask((template, options) => {
|
|
26
|
+
const stronger = createStrengthenMask().mask(template, options),
|
|
27
|
+
softer = createSoftenMask().mask(template, options);
|
|
28
|
+
return {
|
|
29
|
+
...stronger,
|
|
30
|
+
borderColor: softer.borderColor,
|
|
31
|
+
borderColorHover: softer.borderColorHover,
|
|
32
|
+
borderColorPress: softer.borderColorPress,
|
|
33
|
+
borderColorFocus: softer.borderColorFocus
|
|
34
|
+
};
|
|
35
|
+
}),
|
|
36
|
+
soften2Border1: createMask((template, options) => {
|
|
37
|
+
const softer2 = createSoftenMask({
|
|
38
|
+
strength: 2
|
|
39
|
+
}).mask(template, options),
|
|
40
|
+
softer1 = createSoftenMask({
|
|
41
|
+
strength: 1
|
|
42
|
+
}).mask(template, options);
|
|
43
|
+
return {
|
|
44
|
+
...softer2,
|
|
45
|
+
borderColor: softer1.borderColor,
|
|
46
|
+
borderColorHover: softer1.borderColorHover,
|
|
47
|
+
borderColorPress: softer1.borderColorPress,
|
|
48
|
+
borderColorFocus: softer1.borderColorFocus
|
|
49
|
+
};
|
|
50
|
+
}),
|
|
51
|
+
soften3FlatBorder: createMask((template, options) => {
|
|
52
|
+
const borderMask = createSoftenMask({
|
|
53
|
+
strength: 2
|
|
54
|
+
}).mask(template, options);
|
|
55
|
+
return {
|
|
56
|
+
...createSoftenMask({
|
|
57
|
+
strength: 3
|
|
58
|
+
}).mask(template, options),
|
|
59
|
+
borderColor: borderMask.borderColor,
|
|
60
|
+
borderColorHover: borderMask.borderColorHover,
|
|
61
|
+
borderColorPress: borderMask.borderColorPress,
|
|
62
|
+
borderColorFocus: borderMask.borderColorFocus
|
|
63
|
+
};
|
|
64
|
+
}),
|
|
65
|
+
softenBorder: createMask((template, options) => {
|
|
66
|
+
const plain = skipMask.mask(template, options),
|
|
67
|
+
softer = createSoftenMask().mask(template, options);
|
|
68
|
+
return {
|
|
69
|
+
...plain,
|
|
70
|
+
borderColor: softer.borderColor,
|
|
71
|
+
borderColorHover: softer.borderColorHover,
|
|
72
|
+
borderColorPress: softer.borderColorPress,
|
|
73
|
+
borderColorFocus: softer.borderColorFocus
|
|
74
|
+
};
|
|
75
|
+
}),
|
|
76
|
+
softenBorder2: createMask((template, options) => {
|
|
77
|
+
const plain = skipMask.mask(template, options),
|
|
78
|
+
softer = createSoftenMask({
|
|
79
|
+
strength: 2
|
|
80
|
+
}).mask(template, options);
|
|
81
|
+
return {
|
|
82
|
+
...plain,
|
|
83
|
+
borderColor: softer.borderColor,
|
|
84
|
+
borderColorHover: softer.borderColorHover,
|
|
85
|
+
borderColorPress: softer.borderColorPress,
|
|
86
|
+
borderColorFocus: softer.borderColorFocus
|
|
87
|
+
};
|
|
88
|
+
})
|
|
89
|
+
};
|
|
90
|
+
export { masks };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/masks.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,0BAQO;AAEA,MAAM,QAAQ;AAAA,EACnB,cAAU,wCAAmB;AAAA,EAC7B,YAAQ,sCAAiB;AAAA,EACzB,aAAS,sCAAiB,EAAE,UAAU,EAAE,CAAC;AAAA,EACzC,aAAS,sCAAiB,EAAE,UAAU,EAAE,CAAC;AAAA,EACzC,gBAAY,0CAAqB;AAAA,EACjC,aAAS,uCAAkB;AAAA,EAC3B,mBAAe,sCAAa,uCAAkB,OAAG,sCAAiB,EAAE,UAAU,EAAE,CAAC,CAAC;AAAA,EAClF,oBAAgB,sCAAa,uCAAkB,OAAG,sCAAiB,EAAE,UAAU,EAAE,CAAC,CAAC;AAAA,EACnF,oBAAgB,sCAAa,uCAAkB,OAAG,sCAAiB,EAAE,UAAU,EAAE,CAAC,CAAC;AAAA,EACnF,wBAAoB;AAAA,QAClB,uCAAkB;AAAA,QAClB,0CAAqB,EAAE,UAAU,EAAE,CAAC;AAAA,EACtC;AAAA,EACA,+BAA2B,gCAAW,CAAC,UAAU,YAAY;AAC3D,UAAM,eAAW,0CAAqB,EAAE,KAAK,UAAU,OAAO,GACxD,aAAS,sCAAiB,EAAE,KAAK,UAAU,OAAO;AACxD,WAAO;AAAA,MACL,GAAG;AAAA,MACH,aAAa,OAAO;AAAA,MACpB,kBAAkB,OAAO;AAAA,MACzB,kBAAkB,OAAO;AAAA,MACzB,kBAAkB,OAAO;AAAA,IAC3B;AAAA,EACF,CAAC;AAAA,EACD,oBAAgB,gCAAW,CAAC,UAAU,YAAY;AAChD,UAAM,cAAU,sCAAiB,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,UAAU,OAAO,GAClE,cAAU,sCAAiB,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,UAAU,OAAO;AACxE,WAAO;AAAA,MACL,GAAG;AAAA,MACH,aAAa,QAAQ;AAAA,MACrB,kBAAkB,QAAQ;AAAA,MAC1B,kBAAkB,QAAQ;AAAA,MAC1B,kBAAkB,QAAQ;AAAA,IAC5B;AAAA,EACF,CAAC;AAAA,EACD,uBAAmB,gCAAW,CAAC,UAAU,YAAY;AACnD,UAAM,iBAAa,sCAAiB,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,UAAU,OAAO;AAE3E,WAAO;AAAA,MACL,OAFc,sCAAiB,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,UAAU,OAAO;AAAA,MAGtE,aAAa,WAAW;AAAA,MACxB,kBAAkB,WAAW;AAAA,MAC7B,kBAAkB,WAAW;AAAA,MAC7B,kBAAkB,WAAW;AAAA,IAC/B;AAAA,EACF,CAAC;AAAA,EACD,kBAAc,gCAAW,CAAC,UAAU,YAAY;AAC9C,UAAM,QAAQ,6BAAS,KAAK,UAAU,OAAO,GACvC,aAAS,sCAAiB,EAAE,KAAK,UAAU,OAAO;AACxD,WAAO;AAAA,MACL,GAAG;AAAA,MACH,aAAa,OAAO;AAAA,MACpB,kBAAkB,OAAO;AAAA,MACzB,kBAAkB,OAAO;AAAA,MACzB,kBAAkB,OAAO;AAAA,IAC3B;AAAA,EACF,CAAC;AAAA,EACD,mBAAe,gCAAW,CAAC,UAAU,YAAY;AAC/C,UAAM,QAAQ,6BAAS,KAAK,UAAU,OAAO,GACvC,aAAS,sCAAiB,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,UAAU,OAAO;AACvE,WAAO;AAAA,MACL,GAAG;AAAA,MACH,aAAa,OAAO;AAAA,MACpB,kBAAkB,OAAO;AAAA,MACzB,kBAAkB,OAAO;AAAA,MACzB,kBAAkB,OAAO;AAAA,IAC3B;AAAA,EACF,CAAC;AACH;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { objectFromEntries, objectKeys } from "./helpers.mjs";
|
|
2
|
+
import { colorTokens } from "./tokens.mjs";
|
|
3
|
+
const palettes = (() => {
|
|
4
|
+
const lightTransparent = "rgba(255,255,255,0)",
|
|
5
|
+
darkTransparent = "rgba(10,10,10,0)",
|
|
6
|
+
transparent = (hsl, opacity = 0) => hsl.replace("%)", `%, ${opacity})`).replace("hsl(", "hsla("),
|
|
7
|
+
getColorPalette = (colors, color = colors[0]) => {
|
|
8
|
+
const colorPalette = Object.values(colors),
|
|
9
|
+
[head, tail] = [colorPalette.slice(0, 6), colorPalette.slice(colorPalette.length - 5)];
|
|
10
|
+
return [transparent(colorPalette[0]), ...head, ...tail, color, transparent(colorPalette[colorPalette.length - 1])];
|
|
11
|
+
},
|
|
12
|
+
lightColor = "hsl(0, 0%, 9.0%)",
|
|
13
|
+
lightPalette = [lightTransparent, "#fff", "#f8f8f8", "hsl(0, 0%, 96.3%)", "hsl(0, 0%, 94.1%)", "hsl(0, 0%, 92.0%)", "hsl(0, 0%, 90.0%)", "hsl(0, 0%, 88.5%)", "hsl(0, 0%, 81.0%)", "hsl(0, 0%, 56.1%)", "hsl(0, 0%, 50.3%)", "hsl(0, 0%, 42.5%)", lightColor, darkTransparent],
|
|
14
|
+
darkColor = "#fff",
|
|
15
|
+
darkPalette = [darkTransparent, "#050505", "#151515", "#191919", "#232323", "#282828", "#323232", "#424242", "#494949", "#545454", "#626262", "#a5a5a5", darkColor, lightTransparent],
|
|
16
|
+
lightPalettes = objectFromEntries(objectKeys(colorTokens.light).map(key => [`light_${key}`, getColorPalette(colorTokens.light[key], lightColor)])),
|
|
17
|
+
darkPalettes = objectFromEntries(objectKeys(colorTokens.dark).map(key => [`dark_${key}`, getColorPalette(colorTokens.dark[key], darkColor)])),
|
|
18
|
+
colorPalettes = {
|
|
19
|
+
...lightPalettes,
|
|
20
|
+
...darkPalettes
|
|
21
|
+
};
|
|
22
|
+
return {
|
|
23
|
+
light: lightPalette,
|
|
24
|
+
dark: darkPalette,
|
|
25
|
+
...colorPalettes
|
|
26
|
+
};
|
|
27
|
+
})();
|
|
28
|
+
export { palettes };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
const lightShadowColor = "rgba(0,0,0,0.04)",
|
|
2
|
+
lightShadowColorStrong = "rgba(0,0,0,0.085)",
|
|
3
|
+
darkShadowColor = "rgba(0,0,0,0.2)",
|
|
4
|
+
darkShadowColorStrong = "rgba(0,0,0,0.3)",
|
|
5
|
+
shadows = {
|
|
6
|
+
light: {
|
|
7
|
+
shadowColor: lightShadowColorStrong,
|
|
8
|
+
shadowColorHover: lightShadowColorStrong,
|
|
9
|
+
shadowColorPress: lightShadowColor,
|
|
10
|
+
shadowColorFocus: lightShadowColor
|
|
11
|
+
},
|
|
12
|
+
dark: {
|
|
13
|
+
shadowColor: darkShadowColorStrong,
|
|
14
|
+
shadowColorHover: darkShadowColorStrong,
|
|
15
|
+
shadowColorPress: darkShadowColor,
|
|
16
|
+
shadowColorFocus: darkShadowColor
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
export { shadows };
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { palettes } from "./palettes.mjs";
|
|
2
|
+
const templateColorsSpecific = {
|
|
3
|
+
color1: 1,
|
|
4
|
+
color2: 2,
|
|
5
|
+
color3: 3,
|
|
6
|
+
color4: 4,
|
|
7
|
+
color5: 5,
|
|
8
|
+
color6: 6,
|
|
9
|
+
color7: 7,
|
|
10
|
+
color8: 8,
|
|
11
|
+
color9: 9,
|
|
12
|
+
color10: 10,
|
|
13
|
+
color11: 11,
|
|
14
|
+
color12: 12
|
|
15
|
+
},
|
|
16
|
+
template = {
|
|
17
|
+
...templateColorsSpecific,
|
|
18
|
+
// the background, color, etc keys here work like generics - they make it so you
|
|
19
|
+
// can publish components for others to use without mandating a specific color scale
|
|
20
|
+
// the @tamagui/button Button component looks for `$background`, so you set the
|
|
21
|
+
// dark_red_Button theme to have a stronger background than the dark_red theme.
|
|
22
|
+
background: 2,
|
|
23
|
+
backgroundHover: 3,
|
|
24
|
+
backgroundPress: 4,
|
|
25
|
+
backgroundFocus: 5,
|
|
26
|
+
backgroundStrong: 1,
|
|
27
|
+
backgroundTransparent: 0,
|
|
28
|
+
color: -1,
|
|
29
|
+
colorHover: -2,
|
|
30
|
+
colorPress: -1,
|
|
31
|
+
colorFocus: -2,
|
|
32
|
+
colorTransparent: -0,
|
|
33
|
+
borderColor: 5,
|
|
34
|
+
borderColorHover: 6,
|
|
35
|
+
borderColorFocus: 4,
|
|
36
|
+
borderColorPress: 5,
|
|
37
|
+
placeholderColor: -4
|
|
38
|
+
},
|
|
39
|
+
templates = {
|
|
40
|
+
base: template,
|
|
41
|
+
colorLight: {
|
|
42
|
+
...template,
|
|
43
|
+
// light color themes are a bit less sensitive
|
|
44
|
+
borderColor: 4,
|
|
45
|
+
borderColorHover: 5,
|
|
46
|
+
borderColorFocus: 4,
|
|
47
|
+
borderColorPress: 4
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
shadows = {
|
|
51
|
+
shadowColor: 0,
|
|
52
|
+
shadowColorHover: 0,
|
|
53
|
+
shadowColorPress: 0,
|
|
54
|
+
shadowColorFocus: 0
|
|
55
|
+
},
|
|
56
|
+
colors = {
|
|
57
|
+
...shadows,
|
|
58
|
+
color: 0,
|
|
59
|
+
colorHover: 0,
|
|
60
|
+
colorFocus: 0,
|
|
61
|
+
colorPress: 0
|
|
62
|
+
},
|
|
63
|
+
baseMaskOptions = {
|
|
64
|
+
override: shadows,
|
|
65
|
+
skip: shadows,
|
|
66
|
+
// avoids the transparent ends
|
|
67
|
+
max: palettes.light.length - 2,
|
|
68
|
+
min: 1
|
|
69
|
+
},
|
|
70
|
+
skipShadowsAndSpecificColors = {
|
|
71
|
+
...shadows,
|
|
72
|
+
...templateColorsSpecific
|
|
73
|
+
},
|
|
74
|
+
maskOptions = {
|
|
75
|
+
component: {
|
|
76
|
+
...baseMaskOptions,
|
|
77
|
+
override: colors,
|
|
78
|
+
skip: skipShadowsAndSpecificColors
|
|
79
|
+
},
|
|
80
|
+
alt: {
|
|
81
|
+
...baseMaskOptions
|
|
82
|
+
},
|
|
83
|
+
button: {
|
|
84
|
+
...baseMaskOptions,
|
|
85
|
+
override: {
|
|
86
|
+
...colors,
|
|
87
|
+
borderColor: "transparent",
|
|
88
|
+
borderColorHover: "transparent"
|
|
89
|
+
},
|
|
90
|
+
skip: skipShadowsAndSpecificColors
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
export { maskOptions, templates };
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { createThemeBuilder } from "@tamagui/theme-builder";
|
|
2
|
+
import { componentThemeDefinitions } from "./componentThemeDefinitions.mjs";
|
|
3
|
+
import { masks } from "./masks.mjs";
|
|
4
|
+
import { palettes } from "./palettes.mjs";
|
|
5
|
+
import { shadows } from "./shadows.mjs";
|
|
6
|
+
import { maskOptions, templates } from "./templates.mjs";
|
|
7
|
+
import { darkColors, lightColors } from "./tokens.mjs";
|
|
8
|
+
const colorThemeDefinition = colorName => [{
|
|
9
|
+
parent: "light",
|
|
10
|
+
palette: colorName,
|
|
11
|
+
template: "colorLight"
|
|
12
|
+
}, {
|
|
13
|
+
parent: "dark",
|
|
14
|
+
palette: colorName,
|
|
15
|
+
template: "base"
|
|
16
|
+
}],
|
|
17
|
+
themesBuilder = createThemeBuilder().addPalettes(palettes).addTemplates(templates).addMasks(masks).addThemes({
|
|
18
|
+
light: {
|
|
19
|
+
template: "base",
|
|
20
|
+
palette: "light",
|
|
21
|
+
nonInheritedValues: {
|
|
22
|
+
...lightColors,
|
|
23
|
+
...shadows.light
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
dark: {
|
|
27
|
+
template: "base",
|
|
28
|
+
palette: "dark",
|
|
29
|
+
nonInheritedValues: {
|
|
30
|
+
...darkColors,
|
|
31
|
+
...shadows.dark
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}).addChildThemes({
|
|
35
|
+
orange: colorThemeDefinition("orange"),
|
|
36
|
+
yellow: colorThemeDefinition("yellow"),
|
|
37
|
+
green: colorThemeDefinition("green"),
|
|
38
|
+
blue: colorThemeDefinition("blue"),
|
|
39
|
+
purple: colorThemeDefinition("purple"),
|
|
40
|
+
pink: colorThemeDefinition("pink"),
|
|
41
|
+
red: colorThemeDefinition("red")
|
|
42
|
+
}).addChildThemes({
|
|
43
|
+
alt1: {
|
|
44
|
+
mask: "soften",
|
|
45
|
+
...maskOptions.alt
|
|
46
|
+
},
|
|
47
|
+
alt2: {
|
|
48
|
+
mask: "soften2",
|
|
49
|
+
...maskOptions.alt
|
|
50
|
+
},
|
|
51
|
+
active: {
|
|
52
|
+
mask: "soften3",
|
|
53
|
+
skip: {
|
|
54
|
+
color: 1
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}).addChildThemes(componentThemeDefinitions, {
|
|
58
|
+
// to save bundle size but make alt themes not work on components
|
|
59
|
+
// avoidNestingWithin: ['alt1', 'alt2'],
|
|
60
|
+
}),
|
|
61
|
+
themes = themesBuilder.build();
|
|
62
|
+
export { themes };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/themes-old.tsx"],
|
|
4
|
-
"mappings": "
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -0,0 +1,260 @@
|
|
|
1
|
+
import { addChildren, applyMask, createStrengthenMask, createTheme, createWeakenMask, skipMask } from "@tamagui/create-theme";
|
|
2
|
+
import { colorTokens, darkColors, lightColors } from "./tokens.mjs";
|
|
3
|
+
const lightTransparent = "rgba(255,255,255,0)",
|
|
4
|
+
darkTransparent = "rgba(10,10,10,0)",
|
|
5
|
+
palettes = {
|
|
6
|
+
dark: [darkTransparent, "#050505", "#151515", "#191919", "#232323", "#282828", "#323232", "#424242", "#494949", "#545454", "#626262", "#a5a5a5", "#fff", lightTransparent],
|
|
7
|
+
light: [lightTransparent, "#fff", "#f9f9f9", "hsl(0, 0%, 97.3%)", "hsl(0, 0%, 95.1%)", "hsl(0, 0%, 94.0%)", "hsl(0, 0%, 92.0%)", "hsl(0, 0%, 89.5%)", "hsl(0, 0%, 81.0%)", "hsl(0, 0%, 56.1%)", "hsl(0, 0%, 50.3%)", "hsl(0, 0%, 42.5%)", "hsl(0, 0%, 9.0%)", darkTransparent]
|
|
8
|
+
},
|
|
9
|
+
templateColors = {
|
|
10
|
+
color1: 1,
|
|
11
|
+
color2: 2,
|
|
12
|
+
color3: 3,
|
|
13
|
+
color4: 4,
|
|
14
|
+
color5: 5,
|
|
15
|
+
color6: 6,
|
|
16
|
+
color7: 7,
|
|
17
|
+
color8: 8,
|
|
18
|
+
color9: 9,
|
|
19
|
+
color10: 10,
|
|
20
|
+
color11: 11,
|
|
21
|
+
color12: 12
|
|
22
|
+
},
|
|
23
|
+
templateShadows = {
|
|
24
|
+
shadowColor: 1,
|
|
25
|
+
shadowColorHover: 1,
|
|
26
|
+
shadowColorPress: 2,
|
|
27
|
+
shadowColorFocus: 2
|
|
28
|
+
},
|
|
29
|
+
toSkip = {
|
|
30
|
+
...templateShadows
|
|
31
|
+
},
|
|
32
|
+
override = Object.fromEntries(Object.entries(toSkip).map(([k]) => [k, 0])),
|
|
33
|
+
overrideShadows = Object.fromEntries(Object.entries(templateShadows).map(([k]) => [k, 0])),
|
|
34
|
+
overrideWithColors = {
|
|
35
|
+
...override,
|
|
36
|
+
color: 0,
|
|
37
|
+
colorHover: 0,
|
|
38
|
+
colorFocus: 0,
|
|
39
|
+
colorPress: 0
|
|
40
|
+
},
|
|
41
|
+
template = {
|
|
42
|
+
...templateColors,
|
|
43
|
+
...toSkip,
|
|
44
|
+
// the background, color, etc keys here work like generics - they make it so you
|
|
45
|
+
// can publish components for others to use without mandating a specific color scale
|
|
46
|
+
// the @tamagui/button Button component looks for `$background`, so you set the
|
|
47
|
+
// dark_red_Button theme to have a stronger background than the dark_red theme.
|
|
48
|
+
background: 2,
|
|
49
|
+
backgroundHover: 3,
|
|
50
|
+
backgroundPress: 4,
|
|
51
|
+
backgroundFocus: 5,
|
|
52
|
+
backgroundStrong: 1,
|
|
53
|
+
backgroundTransparent: 0,
|
|
54
|
+
color: -1,
|
|
55
|
+
colorHover: -2,
|
|
56
|
+
colorPress: -1,
|
|
57
|
+
colorFocus: -2,
|
|
58
|
+
colorTransparent: -0,
|
|
59
|
+
borderColor: 4,
|
|
60
|
+
borderColorHover: 5,
|
|
61
|
+
borderColorPress: 3,
|
|
62
|
+
borderColorFocus: 4,
|
|
63
|
+
placeholderColor: -4
|
|
64
|
+
},
|
|
65
|
+
lightShadowColor = "rgba(0,0,0,0.02)",
|
|
66
|
+
lightShadowColorStrong = "rgba(0,0,0,0.066)",
|
|
67
|
+
darkShadowColor = "rgba(0,0,0,0.2)",
|
|
68
|
+
darkShadowColorStrong = "rgba(0,0,0,0.3)",
|
|
69
|
+
lightShadows = {
|
|
70
|
+
shadowColor: lightShadowColorStrong,
|
|
71
|
+
shadowColorHover: lightShadowColorStrong,
|
|
72
|
+
shadowColorPress: lightShadowColor,
|
|
73
|
+
shadowColorFocus: lightShadowColor
|
|
74
|
+
},
|
|
75
|
+
darkShadows = {
|
|
76
|
+
shadowColor: darkShadowColorStrong,
|
|
77
|
+
shadowColorHover: darkShadowColorStrong,
|
|
78
|
+
shadowColorPress: darkShadowColor,
|
|
79
|
+
shadowColorFocus: darkShadowColor
|
|
80
|
+
},
|
|
81
|
+
lightTemplate = {
|
|
82
|
+
...template,
|
|
83
|
+
background: 2,
|
|
84
|
+
backgroundHover: 3,
|
|
85
|
+
backgroundPress: 4,
|
|
86
|
+
// our light color palette is... a bit unique
|
|
87
|
+
borderColor: 6,
|
|
88
|
+
borderColorHover: 7,
|
|
89
|
+
borderColorFocus: 5,
|
|
90
|
+
borderColorPress: 6,
|
|
91
|
+
...lightShadows
|
|
92
|
+
},
|
|
93
|
+
darkTemplate = {
|
|
94
|
+
...template,
|
|
95
|
+
...darkShadows
|
|
96
|
+
},
|
|
97
|
+
light = createTheme(palettes.light, lightTemplate),
|
|
98
|
+
dark = createTheme(palettes.dark, darkTemplate),
|
|
99
|
+
baseThemes = {
|
|
100
|
+
light,
|
|
101
|
+
dark
|
|
102
|
+
},
|
|
103
|
+
masks = {
|
|
104
|
+
skip: skipMask,
|
|
105
|
+
weaker: createWeakenMask(),
|
|
106
|
+
stronger: createStrengthenMask()
|
|
107
|
+
},
|
|
108
|
+
maskOptions = {
|
|
109
|
+
override,
|
|
110
|
+
skip: toSkip,
|
|
111
|
+
// avoids the transparent ends
|
|
112
|
+
max: palettes.light.length - 2,
|
|
113
|
+
min: 1
|
|
114
|
+
},
|
|
115
|
+
transparent = (hsl, opacity = 0) => hsl.replace("%)", `%, ${opacity})`).replace("hsl(", "hsla("),
|
|
116
|
+
[lightColorThemes, darkColorThemes] = [colorTokens.light, colorTokens.dark].map((colorSet, i) => {
|
|
117
|
+
const isLight = i === 0,
|
|
118
|
+
theme = baseThemes[isLight ? "light" : "dark"];
|
|
119
|
+
return Object.fromEntries(Object.keys(colorSet).map(color => {
|
|
120
|
+
const colorPalette = Object.values(colorSet[color]),
|
|
121
|
+
[head, tail] = [colorPalette.slice(0, 6), colorPalette.slice(colorPalette.length - 5)],
|
|
122
|
+
palette = [transparent(colorPalette[0]), ...head, ...tail, theme.color, transparent(colorPalette[colorPalette.length - 1])],
|
|
123
|
+
colorTheme = createTheme(palette, isLight ? {
|
|
124
|
+
...lightTemplate,
|
|
125
|
+
// light color themes are a bit less sensitive
|
|
126
|
+
borderColor: 4,
|
|
127
|
+
borderColorHover: 5,
|
|
128
|
+
borderColorFocus: 4,
|
|
129
|
+
borderColorPress: 4
|
|
130
|
+
} : darkTemplate);
|
|
131
|
+
return [color, colorTheme];
|
|
132
|
+
}));
|
|
133
|
+
}),
|
|
134
|
+
allThemes = addChildren(baseThemes, (name, theme) => {
|
|
135
|
+
const isLight = name === "light",
|
|
136
|
+
inverseTheme = baseThemes[isLight ? "dark" : "light"],
|
|
137
|
+
colorThemes = isLight ? lightColorThemes : darkColorThemes,
|
|
138
|
+
inverseColorThemes = isLight ? darkColorThemes : lightColorThemes,
|
|
139
|
+
allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {
|
|
140
|
+
const inverse = inverseColorThemes[colorName];
|
|
141
|
+
return {
|
|
142
|
+
...getAltThemes({
|
|
143
|
+
theme: colorTheme,
|
|
144
|
+
inverse,
|
|
145
|
+
isLight
|
|
146
|
+
}),
|
|
147
|
+
...getComponentThemes(colorTheme, inverse, isLight)
|
|
148
|
+
};
|
|
149
|
+
});
|
|
150
|
+
return {
|
|
151
|
+
...{
|
|
152
|
+
...getAltThemes({
|
|
153
|
+
theme,
|
|
154
|
+
inverse: inverseTheme,
|
|
155
|
+
isLight
|
|
156
|
+
}),
|
|
157
|
+
...getComponentThemes(theme, inverseTheme, isLight)
|
|
158
|
+
},
|
|
159
|
+
...allColorThemes
|
|
160
|
+
};
|
|
161
|
+
});
|
|
162
|
+
function getAltThemes({
|
|
163
|
+
theme,
|
|
164
|
+
inverse,
|
|
165
|
+
isLight,
|
|
166
|
+
activeTheme
|
|
167
|
+
}) {
|
|
168
|
+
const maskOptionsAlt = {
|
|
169
|
+
...maskOptions,
|
|
170
|
+
override: overrideShadows
|
|
171
|
+
},
|
|
172
|
+
alt1 = applyMask(theme, masks.weaker, maskOptionsAlt),
|
|
173
|
+
alt2 = applyMask(alt1, masks.weaker, maskOptionsAlt),
|
|
174
|
+
active = activeTheme ?? (process.env.ACTIVE_THEME_INVERSE ? inverse : applyMask(theme, masks.weaker, {
|
|
175
|
+
...maskOptions,
|
|
176
|
+
strength: 3,
|
|
177
|
+
skip: {
|
|
178
|
+
...maskOptions.skip,
|
|
179
|
+
color: 1
|
|
180
|
+
}
|
|
181
|
+
}));
|
|
182
|
+
return addChildren({
|
|
183
|
+
alt1,
|
|
184
|
+
alt2,
|
|
185
|
+
active
|
|
186
|
+
}, (_, subTheme) => getComponentThemes(subTheme, subTheme === inverse ? theme : inverse, isLight));
|
|
187
|
+
}
|
|
188
|
+
function getComponentThemes(theme, inverse, isLight) {
|
|
189
|
+
const componentMaskOptions = {
|
|
190
|
+
...maskOptions,
|
|
191
|
+
override: overrideWithColors,
|
|
192
|
+
skip: {
|
|
193
|
+
...maskOptions.skip,
|
|
194
|
+
// skip colors too just for component sub themes
|
|
195
|
+
...templateColors
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
weaker1 = applyMask(theme, masks.weaker, componentMaskOptions),
|
|
199
|
+
base = applyMask(weaker1, masks.stronger, componentMaskOptions),
|
|
200
|
+
weaker2 = applyMask(weaker1, masks.weaker, componentMaskOptions),
|
|
201
|
+
stronger1 = applyMask(theme, masks.stronger, componentMaskOptions),
|
|
202
|
+
inverse1 = applyMask(inverse, masks.weaker, componentMaskOptions),
|
|
203
|
+
inverse2 = applyMask(inverse1, masks.weaker, componentMaskOptions),
|
|
204
|
+
strongerBorderLighterBackground = isLight ? {
|
|
205
|
+
...stronger1,
|
|
206
|
+
borderColor: weaker1.borderColor,
|
|
207
|
+
borderColorHover: weaker1.borderColorHover,
|
|
208
|
+
borderColorPress: weaker1.borderColorPress,
|
|
209
|
+
borderColorFocus: weaker1.borderColorFocus
|
|
210
|
+
} : {
|
|
211
|
+
...applyMask(theme, masks.skip, componentMaskOptions),
|
|
212
|
+
borderColor: weaker1.borderColor,
|
|
213
|
+
borderColorHover: weaker1.borderColorHover,
|
|
214
|
+
borderColorPress: weaker1.borderColorPress,
|
|
215
|
+
borderColorFocus: weaker1.borderColorFocus
|
|
216
|
+
},
|
|
217
|
+
overlayTheme = {
|
|
218
|
+
background: isLight ? "rgba(0,0,0,0.5)" : "rgba(0,0,0,0.9)"
|
|
219
|
+
},
|
|
220
|
+
weaker2WithoutBorder = {
|
|
221
|
+
...weaker2,
|
|
222
|
+
borderColor: "transparent",
|
|
223
|
+
borderColorHover: "transparent"
|
|
224
|
+
};
|
|
225
|
+
return {
|
|
226
|
+
ListItem: isLight ? stronger1 : base,
|
|
227
|
+
Card: weaker1,
|
|
228
|
+
Button: weaker2WithoutBorder,
|
|
229
|
+
Checkbox: weaker2,
|
|
230
|
+
DrawerFrame: weaker1,
|
|
231
|
+
SliderTrack: stronger1,
|
|
232
|
+
SliderTrackActive: weaker2,
|
|
233
|
+
SliderThumb: inverse1,
|
|
234
|
+
Progress: weaker1,
|
|
235
|
+
ProgressIndicator: inverse,
|
|
236
|
+
Switch: weaker2,
|
|
237
|
+
SwitchThumb: inverse2,
|
|
238
|
+
TooltipArrow: weaker1,
|
|
239
|
+
TooltipContent: weaker2,
|
|
240
|
+
Input: strongerBorderLighterBackground,
|
|
241
|
+
TextArea: strongerBorderLighterBackground,
|
|
242
|
+
Tooltip: inverse1,
|
|
243
|
+
// make overlays always dark
|
|
244
|
+
SheetOverlay: overlayTheme,
|
|
245
|
+
DialogOverlay: overlayTheme,
|
|
246
|
+
ModalOverlay: overlayTheme
|
|
247
|
+
};
|
|
248
|
+
}
|
|
249
|
+
const themes = {
|
|
250
|
+
...allThemes,
|
|
251
|
+
// bring back the full type, the rest use a subset to avoid clogging up ts,
|
|
252
|
+
// tamagui will be smart and use the top level themes as the type for useTheme() etc
|
|
253
|
+
light: createTheme(palettes.light, lightTemplate, {
|
|
254
|
+
nonInheritedValues: lightColors
|
|
255
|
+
}),
|
|
256
|
+
dark: createTheme(palettes.dark, darkTemplate, {
|
|
257
|
+
nonInheritedValues: darkColors
|
|
258
|
+
})
|
|
259
|
+
};
|
|
260
|
+
export { themes };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/themes-old.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|