@tamagui/theme-base 1.0.1-beta.21 → 1.0.1-beta.210
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/colorUtils.js +10 -10
- package/dist/cjs/colorUtils.js.map +1 -1
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/themes.js +36 -251
- package/dist/cjs/themes.js.map +2 -2
- package/dist/cjs/tokens.js +113 -30
- package/dist/cjs/tokens.js.map +2 -2
- package/dist/esm/colorUtils.js +10 -13
- package/dist/esm/colorUtils.js.map +1 -1
- package/dist/esm/index.js +0 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/themes.js +36 -241
- package/dist/esm/themes.js.map +2 -2
- package/dist/esm/tokens.js +122 -18
- package/dist/esm/tokens.js.map +2 -2
- package/package.json +17 -6
- package/src/colorUtils.tsx +42 -0
- package/src/index.tsx +3 -0
- package/src/themes.tsx +39 -0
- package/src/tokens.tsx +172 -0
- package/types/themes.d.ts +5936 -4486
- package/types/tokens.d.ts +867 -197
- package/dist/jsx/colorUtils.js +0 -42
- package/dist/jsx/index.js +0 -3
- package/dist/jsx/themes.js +0 -245
- package/dist/jsx/tokens.js +0 -45
- package/types/colorUtils.d.ts.map +0 -1
- package/types/index.d.ts.map +0 -1
- package/types/themes.d.ts.map +0 -1
- package/types/tokens.d.ts.map +0 -1
package/dist/cjs/tokens.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/tokens.tsx"],
|
|
4
|
-
"sourcesContent": ["import {
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import {\n blue,\n blueDark,\n gray,\n grayDark,\n green,\n greenDark,\n orange,\n orangeDark,\n pink,\n pinkDark,\n purple,\n purpleDark,\n red,\n redDark,\n yellow,\n yellowDark,\n} from '@tamagui/colors'\nimport { Variable, createTokens } from '@tamagui/core'\n\n// should roughly map to button/input etc height at each level\n// fonts should match that height/lineHeight at each stop\n// so these are really non-linear on purpose\n// why?\n// - at sizes <1, used for fine grained things (borders, smallest paddingY)\n// - so smallest padY should be roughly 1-4px so it can join with lineHeight\n// - at sizes >=1, have to consider \"pressability\" (jumps up)\n// - after that it should go upwards somewhat naturally\n// - H1 / headings top out at 10 naturally, so after 10 we can go upwards faster\n// but also one more wrinkle...\n// space is used in conjunction with size\n// i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)\nexport const size = {\n 0: 0,\n 0.25: 2,\n 0.5: 4,\n 0.75: 8,\n 1: 20,\n 1.5: 24,\n 2: 28,\n 2.5: 32,\n 3: 36,\n 3.5: 40,\n 4: 44,\n true: 44,\n 4.5: 48,\n 5: 52,\n 6: 64,\n 7: 74,\n 8: 84,\n 9: 94,\n 10: 104,\n 11: 124,\n 12: 144,\n 13: 164,\n 14: 184,\n 15: 204,\n 16: 224,\n 17: 224,\n 18: 244,\n 19: 264,\n 20: 284,\n}\n\ntype Sizes = typeof size\ntype SizeKeys = `${keyof Sizes}`\n\nconst spaces = Object.entries(size).map(([k, v]) => [\n k,\n Math.max(0, v <= 16 ? Math.round(v * 0.333) : Math.floor(v * 0.7 - 12)),\n])\n\nconst spacesNegative = spaces.map(([k, v]) => [`-${k}`, -v])\n\nexport const space: {\n [Key in `-${SizeKeys}` | SizeKeys]: Key extends keyof Sizes ? Sizes[Key] : number\n} = {\n ...Object.fromEntries(spaces),\n ...Object.fromEntries(spacesNegative),\n} as any\n\nexport const zIndex = {\n 0: 0,\n 1: 100,\n 2: 200,\n 3: 300,\n 4: 400,\n 5: 500,\n}\n\nexport const colorTokens = {\n light: {\n blue: blue,\n gray: gray,\n green: green,\n orange: orange,\n pink: pink,\n purple: purple,\n red: red,\n yellow: yellow,\n },\n dark: {\n blue: blueDark,\n gray: grayDark,\n green: greenDark,\n orange: orangeDark,\n pink: pinkDark,\n purple: purpleDark,\n red: redDark,\n yellow: yellowDark,\n },\n}\n\nexport const darkColors = {\n ...colorTokens.dark.blue,\n ...colorTokens.dark.gray,\n ...colorTokens.dark.green,\n ...colorTokens.dark.orange,\n ...colorTokens.dark.pink,\n ...colorTokens.dark.purple,\n ...colorTokens.dark.red,\n ...colorTokens.dark.yellow,\n}\n\nexport const lightColors = {\n ...colorTokens.light.blue,\n ...colorTokens.light.gray,\n ...colorTokens.light.green,\n ...colorTokens.light.orange,\n ...colorTokens.light.pink,\n ...colorTokens.light.purple,\n ...colorTokens.light.red,\n ...colorTokens.light.yellow,\n}\n\nexport const color = {\n ...postfixObjKeys(lightColors, 'Light'),\n ...postfixObjKeys(darkColors, 'Dark'),\n}\n\nfunction postfixObjKeys<A extends { [key: string]: Variable<string> | string }, B extends string>(\n obj: A,\n postfix: B\n): {\n [Key in `${keyof A extends string ? keyof A : never}${B}`]: Variable<string> | string\n} {\n return Object.fromEntries(Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])) as any\n}\n\nexport const radius = {\n 0: 0,\n 1: 3,\n 2: 5,\n 3: 7,\n 4: 9,\n 5: 10,\n 6: 16,\n 7: 19,\n 8: 22,\n 9: 26,\n 10: 34,\n 11: 42,\n 12: 50,\n}\n\nexport const tokens = createTokens({\n color,\n radius,\n zIndex,\n space,\n size,\n})\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/colorUtils.js
CHANGED
|
@@ -1,17 +1,14 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
1
|
import { getVariableValue } from "@tamagui/core";
|
|
4
|
-
const hexToRGBA =
|
|
5
|
-
var _a;
|
|
2
|
+
const hexToRGBA = (hex, alpha = 1) => {
|
|
6
3
|
if (!isValidHex(hex)) {
|
|
7
4
|
throw new Error("Invalid HEX");
|
|
8
5
|
}
|
|
9
6
|
const chunkSize = Math.floor((hex.length - 1) / 3);
|
|
10
7
|
const hexArr = getChunksFromString(hex.slice(1), chunkSize);
|
|
11
|
-
const [r, g, b, a] = (
|
|
8
|
+
const [r, g, b, a] = (hexArr == null ? void 0 : hexArr.map(convertHexUnitTo256)) ?? [];
|
|
12
9
|
return `rgba(${r}, ${g}, ${b}, ${getAlphaFloat(a, alpha)})`;
|
|
13
|
-
}
|
|
14
|
-
const setColorAlpha =
|
|
10
|
+
};
|
|
11
|
+
const setColorAlpha = (colorIn, alpha = 1) => {
|
|
15
12
|
let color = `${getVariableValue(colorIn)}`;
|
|
16
13
|
if (color.startsWith("hsl(")) {
|
|
17
14
|
return color.replace("hsl", "hsla").replace(")", `, ${alpha})`);
|
|
@@ -23,11 +20,11 @@ const setColorAlpha = /* @__PURE__ */ __name((colorIn, alpha = 1) => {
|
|
|
23
20
|
return color.replace("rgb", "rgba").replace(")", `, ${alpha})`);
|
|
24
21
|
}
|
|
25
22
|
return color;
|
|
26
|
-
}
|
|
27
|
-
const isValidHex =
|
|
28
|
-
const getChunksFromString =
|
|
29
|
-
const convertHexUnitTo256 =
|
|
30
|
-
const getAlphaFloat =
|
|
23
|
+
};
|
|
24
|
+
const isValidHex = (hex) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
|
|
25
|
+
const getChunksFromString = (st, chunkSize = 0) => st.match(new RegExp(`.{${chunkSize}}`, "g"));
|
|
26
|
+
const convertHexUnitTo256 = (hexStr) => parseInt(hexStr.repeat(2 / hexStr.length), 16);
|
|
27
|
+
const getAlphaFloat = (a, alpha = 1) => {
|
|
31
28
|
if (a !== void 0) {
|
|
32
29
|
return a / 255;
|
|
33
30
|
}
|
|
@@ -35,7 +32,7 @@ const getAlphaFloat = /* @__PURE__ */ __name((a, alpha = 1) => {
|
|
|
35
32
|
return 1;
|
|
36
33
|
}
|
|
37
34
|
return alpha;
|
|
38
|
-
}
|
|
35
|
+
};
|
|
39
36
|
export {
|
|
40
37
|
hexToRGBA,
|
|
41
38
|
setColorAlpha
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/colorUtils.tsx"],
|
|
4
4
|
"sourcesContent": ["import { Variable, getVariableValue } from '@tamagui/core'\n\nexport const hexToRGBA = (hex: string, alpha = 1) => {\n if (!isValidHex(hex)) {\n throw new Error('Invalid HEX')\n }\n const chunkSize = Math.floor((hex.length - 1) / 3)\n const hexArr = getChunksFromString(hex.slice(1), chunkSize)\n const [r, g, b, a] = hexArr?.map(convertHexUnitTo256) ?? []\n return `rgba(${r}, ${g}, ${b}, ${getAlphaFloat(a, alpha)})`\n}\n\nexport const setColorAlpha = (colorIn: string | Variable, alpha = 1) => {\n let color = `${getVariableValue(colorIn)}`\n if (color.startsWith('hsl(')) {\n return color.replace('hsl', 'hsla').replace(')', `, ${alpha})`)\n }\n if (color.startsWith('#')) {\n return hexToRGBA(color, alpha)\n }\n if (color.startsWith('rgb(')) {\n return color.replace('rgb', 'rgba').replace(')', `, ${alpha})`)\n }\n return color\n}\n\nconst isValidHex = (hex: string) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex)\n\nconst getChunksFromString = (st: string, chunkSize = 0) =>\n st.match(new RegExp(`.{${chunkSize}}`, 'g'))\n\nconst convertHexUnitTo256 = (hexStr: string) => parseInt(hexStr.repeat(2 / hexStr.length), 16)\n\nconst getAlphaFloat = (a: any, alpha = 1) => {\n if (a !== undefined) {\n return a / 255\n }\n if (typeof alpha != 'number' || alpha < 0 || alpha > 1) {\n return 1\n }\n return alpha\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA,SAAmB,wBAAwB;AAEpC,MAAM,YAAY,CAAC,KAAa,QAAQ,MAAM;AACnD,MAAI,CAAC,WAAW,GAAG,GAAG;AACpB,UAAM,IAAI,MAAM,aAAa;AAAA,EAC/B;AACA,QAAM,YAAY,KAAK,OAAO,IAAI,SAAS,KAAK,CAAC;AACjD,QAAM,SAAS,oBAAoB,IAAI,MAAM,CAAC,GAAG,SAAS;AAC1D,QAAM,CAAC,GAAG,GAAG,GAAG,CAAC,KAAI,iCAAQ,IAAI,yBAAwB,CAAC;AAC1D,SAAO,QAAQ,MAAM,MAAM,MAAM,cAAc,GAAG,KAAK;AACzD;AAEO,MAAM,gBAAgB,CAAC,SAA4B,QAAQ,MAAM;AACtE,MAAI,QAAQ,GAAG,iBAAiB,OAAO;AACvC,MAAI,MAAM,WAAW,MAAM,GAAG;AAC5B,WAAO,MAAM,QAAQ,OAAO,MAAM,EAAE,QAAQ,KAAK,KAAK,QAAQ;AAAA,EAChE;AACA,MAAI,MAAM,WAAW,GAAG,GAAG;AACzB,WAAO,UAAU,OAAO,KAAK;AAAA,EAC/B;AACA,MAAI,MAAM,WAAW,MAAM,GAAG;AAC5B,WAAO,MAAM,QAAQ,OAAO,MAAM,EAAE,QAAQ,KAAK,KAAK,QAAQ;AAAA,EAChE;AACA,SAAO;AACT;AAEA,MAAM,aAAa,CAAC,QAAgB,6BAA6B,KAAK,GAAG;AAEzE,MAAM,sBAAsB,CAAC,IAAY,YAAY,MACnD,GAAG,MAAM,IAAI,OAAO,KAAK,cAAc,GAAG,CAAC;AAE7C,MAAM,sBAAsB,CAAC,WAAmB,SAAS,OAAO,OAAO,IAAI,OAAO,MAAM,GAAG,EAAE;AAE7F,MAAM,gBAAgB,CAAC,GAAQ,QAAQ,MAAM;AAC3C,MAAI,MAAM,QAAW;AACnB,WAAO,IAAI;AAAA,EACb;AACA,MAAI,OAAO,SAAS,YAAY,QAAQ,KAAK,QAAQ,GAAG;AACtD,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
File without changes
|
package/dist/esm/index.js.map
CHANGED
package/dist/esm/themes.js
CHANGED
|
@@ -1,246 +1,41 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
isLight = true,
|
|
38
|
-
isBase = false,
|
|
39
|
-
colors = [...backgrounds].reverse(),
|
|
40
|
-
borderColors = isLight ? colors : backgrounds,
|
|
41
|
-
backgroundStrong,
|
|
42
|
-
offsets: offsetsProp
|
|
43
|
-
}) => {
|
|
44
|
-
var _a, _b, _c, _d;
|
|
45
|
-
const offsets = {
|
|
46
|
-
borderColor: (_b = (_a = offsetsProp == null ? void 0 : offsetsProp.borderColor) != null ? _a : offsetsProp == null ? void 0 : offsetsProp.background) != null ? _b : [0, 0, 0, 0],
|
|
47
|
-
background: (_c = offsetsProp == null ? void 0 : offsetsProp.background) != null ? _c : [0, 0, 0, 0],
|
|
48
|
-
color: (_d = offsetsProp == null ? void 0 : offsetsProp.color) != null ? _d : [0, 0, 0, 0]
|
|
49
|
-
};
|
|
50
|
-
const darkColors = isLight ? colors : backgrounds;
|
|
51
|
-
const lighterDir = isLight ? -1 : 1;
|
|
52
|
-
const darkerDir = -lighterDir;
|
|
53
|
-
const strongerDir = isLight ? darkerDir : lighterDir;
|
|
54
|
-
const softerDir = -strongerDir;
|
|
55
|
-
const get = /* @__PURE__ */ __name((arr, index, name = "background") => {
|
|
56
|
-
return arr[Math.max(0, Math.min(index + (offsets[name][str] || 0), arr.length - 1))];
|
|
57
|
-
}, "get");
|
|
58
|
-
const colorTranslucent = setColorAlpha(getVariableValue(get(colors, 0 + str, "color")), 0.5);
|
|
59
|
-
let theme = {
|
|
60
|
-
background: get(backgrounds, str),
|
|
61
|
-
backgroundStrong: backgroundStrong || get(backgrounds, str + strongerDir * 2),
|
|
62
|
-
backgroundSoft: get(backgrounds, str + softerDir * 2),
|
|
63
|
-
backgroundHover: get(backgrounds, str + lighterDir),
|
|
64
|
-
backgroundPress: get(backgrounds, str + darkerDir),
|
|
65
|
-
backgroundFocus: get(backgrounds, str + darkerDir * 2),
|
|
66
|
-
backgroundTransparent: color.grayA1,
|
|
67
|
-
color: get(colors, 0 + str, "color"),
|
|
68
|
-
colorHover: get(colors, 1 + str, "color"),
|
|
69
|
-
colorPress: get(colors, 2 + str, "color"),
|
|
70
|
-
colorFocus: get(colors, 3 + str, "color"),
|
|
71
|
-
colorTranslucent,
|
|
72
|
-
colorMid: colors[Math.floor(colors.length / 2)],
|
|
73
|
-
shadowColor: isLight ? color.grayA2 : color.grayA8,
|
|
74
|
-
shadowColorHover: darkColors[!isLight ? 1 : 8],
|
|
75
|
-
shadowColorPress: darkColors[!isLight ? 1 : 8],
|
|
76
|
-
shadowColorFocus: darkColors[!isLight ? 1 : 8],
|
|
77
|
-
borderColor: null,
|
|
78
|
-
borderColorHover: null,
|
|
79
|
-
borderColorPress: null,
|
|
80
|
-
borderColorFocus: null
|
|
81
|
-
};
|
|
82
|
-
if (isBase) {
|
|
83
|
-
Object.assign(theme, {
|
|
84
|
-
borderColor: isLight ? get(colors, 8 - str, "borderColor") : get(backgrounds, 2 + str, "borderColor"),
|
|
85
|
-
borderColorHover: isLight ? get(colors, 6 - str, "borderColor") : get(backgrounds, 3 + str, "borderColor"),
|
|
86
|
-
borderColorPress: isLight ? get(colors, 5 - str, "borderColor") : get(backgrounds, 1 + str, "borderColor"),
|
|
87
|
-
borderColorFocus: isLight ? get(colors, 4 - str, "borderColor") : get(backgrounds, 3 + str, "borderColor")
|
|
88
|
-
});
|
|
89
|
-
} else {
|
|
90
|
-
Object.assign(theme, {
|
|
91
|
-
borderColor: get(borderColors, 1 + strongerDir, "borderColor"),
|
|
92
|
-
borderColorHover: get(borderColors, 2 + strongerDir, "borderColor"),
|
|
93
|
-
borderColorPress: get(borderColors, 3 + strongerDir, "borderColor"),
|
|
94
|
-
borderColorFocus: get(borderColors, 4 + strongerDir, "borderColor")
|
|
95
|
-
});
|
|
96
|
-
}
|
|
97
|
-
return theme;
|
|
98
|
-
}, "createTheme");
|
|
99
|
-
const colorSchemes = [
|
|
100
|
-
{ name: "blue", colors: Colors.blue, darkColors: Colors.blueDark },
|
|
101
|
-
{ name: "gray", colors: Colors.gray, darkColors: Colors.grayDark },
|
|
102
|
-
{ name: "green", colors: Colors.green, darkColors: Colors.greenDark },
|
|
103
|
-
{ name: "indigo", colors: Colors.indigo, darkColors: Colors.indigoDark },
|
|
104
|
-
{ name: "orange", colors: Colors.orange, darkColors: Colors.orangeDark },
|
|
105
|
-
{ name: "pink", colors: Colors.pink, darkColors: Colors.pinkDark },
|
|
106
|
-
{ name: "purple", colors: Colors.purple, darkColors: Colors.purpleDark },
|
|
107
|
-
{ name: "red", colors: Colors.red, darkColors: Colors.redDark },
|
|
108
|
-
{ name: "violet", colors: Colors.violet, darkColors: Colors.violetDark },
|
|
109
|
-
{ name: "yellow", colors: Colors.yellow, darkColors: Colors.yellowDark },
|
|
110
|
-
{ name: "teal", colors: Colors.teal, darkColors: Colors.tealDark },
|
|
111
|
-
{ name: "lime", colors: Colors.lime, darkColors: Colors.limeDark },
|
|
112
|
-
{ name: "brown", colors: Colors.brown, darkColors: Colors.brownDark }
|
|
113
|
-
];
|
|
114
|
-
const lightGradient = [
|
|
115
|
-
"#fff",
|
|
116
|
-
"#f4f4f4",
|
|
117
|
-
color.gray1,
|
|
118
|
-
color.gray2,
|
|
119
|
-
color.gray3,
|
|
120
|
-
color.gray4,
|
|
121
|
-
color.gray5,
|
|
122
|
-
color.gray6,
|
|
123
|
-
color.gray7,
|
|
124
|
-
color.gray8,
|
|
125
|
-
color.gray9,
|
|
126
|
-
color.gray10,
|
|
127
|
-
color.gray11,
|
|
128
|
-
color.gray12
|
|
129
|
-
];
|
|
130
|
-
const darkGradient = [
|
|
131
|
-
"#111111",
|
|
132
|
-
"#151515",
|
|
133
|
-
"#191919",
|
|
134
|
-
"#232323",
|
|
135
|
-
"#282828",
|
|
136
|
-
"#323232",
|
|
137
|
-
"#383838",
|
|
138
|
-
"#424242",
|
|
139
|
-
"#494949",
|
|
140
|
-
"#545454",
|
|
141
|
-
"#626262",
|
|
142
|
-
"#777777"
|
|
143
|
-
];
|
|
144
|
-
const lightThemes = createThemesFrom("light", createTheme, {
|
|
145
|
-
backgrounds: lightGradient,
|
|
146
|
-
backgroundStrong: "#fcfcfc",
|
|
147
|
-
borderColors: lightGradient.slice(2),
|
|
148
|
-
isLight: true
|
|
1
|
+
import { createThemes } from "@tamagui/create-themes";
|
|
2
|
+
import { colorTokens } from "./tokens";
|
|
3
|
+
const themes = createThemes({
|
|
4
|
+
activeColor: "blue",
|
|
5
|
+
light: [
|
|
6
|
+
"#fff",
|
|
7
|
+
"#f4f4f4",
|
|
8
|
+
"hsl(0, 0%, 99.0%)",
|
|
9
|
+
"hsl(0, 0%, 97.3%)",
|
|
10
|
+
"hsl(0, 0%, 95.1%)",
|
|
11
|
+
"hsl(0, 0%, 93.0%)",
|
|
12
|
+
"hsl(0, 0%, 90.9%)",
|
|
13
|
+
"hsl(0, 0%, 88.7%)",
|
|
14
|
+
"hsl(0, 0%, 85.8%)",
|
|
15
|
+
"hsl(0, 0%, 78.0%)",
|
|
16
|
+
"hsl(0, 0%, 56.1%)",
|
|
17
|
+
"hsl(0, 0%, 52.3%)",
|
|
18
|
+
"hsl(0, 0%, 43.5%)",
|
|
19
|
+
"hsl(0, 0%, 9.0%)"
|
|
20
|
+
],
|
|
21
|
+
dark: [
|
|
22
|
+
"#111111",
|
|
23
|
+
"#151515",
|
|
24
|
+
"#191919",
|
|
25
|
+
"#232323",
|
|
26
|
+
"#282828",
|
|
27
|
+
"#323232",
|
|
28
|
+
"#383838",
|
|
29
|
+
"#424242",
|
|
30
|
+
"#494949",
|
|
31
|
+
"#545454",
|
|
32
|
+
"#626262",
|
|
33
|
+
"#777777"
|
|
34
|
+
],
|
|
35
|
+
colorsLight: colorTokens.light,
|
|
36
|
+
colorsDark: colorTokens.dark
|
|
149
37
|
});
|
|
150
|
-
const darkThemes = createThemesFrom("dark", createTheme, {
|
|
151
|
-
backgrounds: darkGradient,
|
|
152
|
-
colors: lightGradient.slice(2),
|
|
153
|
-
backgroundStrong: "#111",
|
|
154
|
-
isBase: true,
|
|
155
|
-
isLight: false,
|
|
156
|
-
shift: 1,
|
|
157
|
-
offsets: {
|
|
158
|
-
color: [0, 4, 5, 5, 5, 5]
|
|
159
|
-
}
|
|
160
|
-
});
|
|
161
|
-
const baseThemes = {
|
|
162
|
-
...lightThemes,
|
|
163
|
-
light: {
|
|
164
|
-
...allLightColors,
|
|
165
|
-
...lightThemes.light
|
|
166
|
-
},
|
|
167
|
-
light_active: makeActiveTheme(lightThemes.light),
|
|
168
|
-
light_Card: lightThemes.light,
|
|
169
|
-
light_DrawerFrame: lightThemes.light_alt1,
|
|
170
|
-
light_Button: lightThemes.light_alt1,
|
|
171
|
-
...darkThemes,
|
|
172
|
-
dark: {
|
|
173
|
-
...allDarkColors,
|
|
174
|
-
...darkThemes.dark
|
|
175
|
-
},
|
|
176
|
-
dark_active: makeActiveTheme(darkThemes.dark),
|
|
177
|
-
dark_Card: darkThemes.dark_alt1,
|
|
178
|
-
dark_DrawerFrame: darkThemes.dark_alt2,
|
|
179
|
-
dark_Button: darkThemes.dark_alt1
|
|
180
|
-
};
|
|
181
|
-
function makeActiveTheme(theme) {
|
|
182
|
-
const res = { ...theme };
|
|
183
|
-
res.backgroundHover = res.background;
|
|
184
|
-
res.colorHover = res.color;
|
|
185
|
-
res.backgroundPress = res.background;
|
|
186
|
-
res.colorPress = res.color;
|
|
187
|
-
return res;
|
|
188
|
-
}
|
|
189
|
-
__name(makeActiveTheme, "makeActiveTheme");
|
|
190
|
-
const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) => {
|
|
191
|
-
const [altLightThemes, altDarkThemes] = [
|
|
192
|
-
{ colors: darkColors, backgrounds: colors },
|
|
193
|
-
{ colors, backgrounds: darkColors }
|
|
194
|
-
].map((props, i) => {
|
|
195
|
-
const isLight = i === 0;
|
|
196
|
-
const [backgrounds, colors2] = [
|
|
197
|
-
Object.values(props.backgrounds),
|
|
198
|
-
Object.values(props.colors).slice(isLight ? 2 : 2)
|
|
199
|
-
];
|
|
200
|
-
const scheme = isLight ? "light" : "dark";
|
|
201
|
-
const shift = isLight ? 0 : 1;
|
|
202
|
-
if (!isLight) {
|
|
203
|
-
const [_, h, sp, lp] = backgrounds[0].match(/hsl\(([0-9\.]+), ([0-9\.]+)\%, ([0-9\.]+)\%\)/);
|
|
204
|
-
backgrounds.unshift(`hsl(${h}, ${sp}%, ${parseFloat(lp) / 2}%)`);
|
|
205
|
-
}
|
|
206
|
-
const themeWithAlts = createThemesFrom(name, createTheme, {
|
|
207
|
-
colors: colors2,
|
|
208
|
-
backgrounds,
|
|
209
|
-
borderColors: backgrounds,
|
|
210
|
-
isLight,
|
|
211
|
-
shift,
|
|
212
|
-
isBase: false,
|
|
213
|
-
offsets: {
|
|
214
|
-
background: isLight ? [1, 1, 1, 1, 1, 1] : null,
|
|
215
|
-
borderColor: isLight ? [2, 2, 2, 3, 2] : null,
|
|
216
|
-
color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1]
|
|
217
|
-
}
|
|
218
|
-
});
|
|
219
|
-
return Object.entries(themeWithAlts).map(([k, v]) => [`${scheme}_${k}`, v]);
|
|
220
|
-
});
|
|
221
|
-
const lightButtonTheme = altLightThemes[0];
|
|
222
|
-
const darkButtonTheme = altDarkThemes[0];
|
|
223
|
-
return [
|
|
224
|
-
...altLightThemes,
|
|
225
|
-
[`${lightButtonTheme[0]}_Button`, altLightThemes[2][1]],
|
|
226
|
-
[`${lightButtonTheme[0]}_Card`, altLightThemes[2][1]],
|
|
227
|
-
[`${lightButtonTheme[0]}_DrawerFrame`, altLightThemes[2][1]],
|
|
228
|
-
...altDarkThemes,
|
|
229
|
-
[`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]],
|
|
230
|
-
[`${darkButtonTheme[0]}_Card`, altDarkThemes[2][1]],
|
|
231
|
-
[`${darkButtonTheme[0]}_DrawerFrame`, altDarkThemes[2][1]]
|
|
232
|
-
];
|
|
233
|
-
});
|
|
234
|
-
const colorThemes = Object.fromEntries(colorThemeEntries);
|
|
235
|
-
const allThemes = {
|
|
236
|
-
...baseThemes,
|
|
237
|
-
...colorThemes
|
|
238
|
-
};
|
|
239
|
-
const themes = allThemes;
|
|
240
38
|
export {
|
|
241
|
-
colorSchemes,
|
|
242
|
-
darkGradient,
|
|
243
|
-
lightGradient,
|
|
244
39
|
themes
|
|
245
40
|
};
|
|
246
41
|
//# sourceMappingURL=themes.js.map
|
package/dist/esm/themes.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/themes.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as Colors from '@tamagui/colors'\nimport { allDarkColors, allLightColors } from '@tamagui/colors'\nimport { Variable, getVariableValue } from '@tamagui/core'\n\nimport { setColorAlpha } from './colorUtils'\nimport { color } from './tokens'\n\n// spaghetti ahead\n\ntype ThemeCreatorProps = {\n shift?: number\n backgrounds: (string | Variable)[]\n backgroundStrong?: string | Variable\n borderColors?: (string | Variable)[]\n colors?: (string | Variable)[]\n offsets?: {\n color?: number[] | null\n background?: number[] | null\n borderColor?: number[] | null\n }\n isLight?: boolean\n isBase?: boolean\n}\n\n// helpers\n\nconst alternates = [1, 2, 3, 4] as const\ntype AltKeys = 1 | 2 | 3 | 4 // one less for dark_darker\ntype AltName<Name extends string, Keys extends string | number> = `${Name}_alt${Keys}`\ntype ThemeCreator<A = any> = (str: number, props: ThemeCreatorProps) => A\n\nfunction createThemesFrom<Name extends string, GetTheme extends ThemeCreator = ThemeCreator>(\n name: Name,\n getTheme: GetTheme,\n props: ThemeCreatorProps\n): {\n [key in `${Name}_alt${AltKeys}` | `${Name}` | `${Name}_darker`]: GetTheme extends ThemeCreator<\n infer Theme\n >\n ? Theme\n : never\n} {\n const { shift = 0 } = props\n const theme = getTheme(0 + shift, props)\n let themeEntries: any[] = [[name, theme]]\n const altThemes: any[] = alternates.map((alt) => [\n `${name}_alt${alt}`,\n getTheme(alt + shift, props),\n ])\n const altButtonThemes: any[] = alternates.map((_, i) => {\n const [bName, bTheme] = [altThemes[i][0], (altThemes[i + 1] || altThemes[i])[1]]\n return [`${bName}_Button` as any, bTheme]\n })\n // add these after alts since we rely on positioning\n const darkerTheme = getTheme(Math.max(0, shift + (props.isLight ? 1 : -1)), props)\n const activeTheme = makeActiveTheme(theme)\n themeEntries = [\n ...themeEntries,\n ...altThemes,\n ...altButtonThemes,\n [`${name}_Button`, altThemes[0][1]],\n [`${name}_darker`, darkerTheme],\n [`${name}_active`, activeTheme],\n ]\n const themes = Object.fromEntries(themeEntries)\n // if (props.isLight) {\n // console.log('themes', themes)\n // }\n return themes as any\n}\n\nconst createTheme = (\n str = 1,\n {\n backgrounds,\n isLight = true,\n isBase = false,\n colors = [...backgrounds].reverse(),\n borderColors = isLight ? colors : backgrounds,\n backgroundStrong,\n offsets: offsetsProp,\n }: ThemeCreatorProps\n) => {\n const offsets = {\n borderColor: offsetsProp?.borderColor ?? offsetsProp?.background ?? [0, 0, 0, 0],\n background: offsetsProp?.background ?? [0, 0, 0, 0],\n color: offsetsProp?.color ?? [0, 0, 0, 0],\n }\n const darkColors = isLight ? colors : backgrounds\n const lighterDir = isLight ? -1 : 1\n const darkerDir = -lighterDir\n const strongerDir = isLight ? darkerDir : lighterDir\n const softerDir = -strongerDir\n const get = (arr: any[], index: number, name = 'background') => {\n return arr[Math.max(0, Math.min(index + (offsets[name][str] || 0), arr.length - 1))]\n }\n\n const colorTranslucent = setColorAlpha(getVariableValue(get(colors, 0 + str, 'color')), 0.5)\n\n let theme = {\n background: get(backgrounds, str),\n backgroundStrong: backgroundStrong || get(backgrounds, str + strongerDir * 2),\n backgroundSoft: get(backgrounds, str + softerDir * 2),\n backgroundHover: get(backgrounds, str + lighterDir),\n backgroundPress: get(backgrounds, str + darkerDir),\n backgroundFocus: get(backgrounds, str + darkerDir * 2),\n backgroundTransparent: color.grayA1,\n color: get(colors, 0 + str, 'color'),\n colorHover: get(colors, 1 + str, 'color'),\n colorPress: get(colors, 2 + str, 'color'),\n colorFocus: get(colors, 3 + str, 'color'),\n colorTranslucent,\n colorMid: colors[Math.floor(colors.length / 2)],\n shadowColor: isLight ? color.grayA2 : color.grayA8,\n shadowColorHover: darkColors[!isLight ? 1 : 8],\n shadowColorPress: darkColors[!isLight ? 1 : 8],\n shadowColorFocus: darkColors[!isLight ? 1 : 8],\n borderColor: null as any as string | Variable,\n borderColorHover: null as any as string | Variable,\n borderColorPress: null as any as string | Variable,\n borderColorFocus: null as any as string | Variable,\n }\n\n if (isBase) {\n Object.assign(theme, {\n borderColor: isLight\n ? get(colors, 8 - str, 'borderColor')\n : get(backgrounds, 2 + str, 'borderColor'),\n borderColorHover: isLight\n ? get(colors, 6 - str, 'borderColor')\n : get(backgrounds, 3 + str, 'borderColor'),\n borderColorPress: isLight\n ? get(colors, 5 - str, 'borderColor')\n : get(backgrounds, 1 + str, 'borderColor'),\n borderColorFocus: isLight\n ? get(colors, 4 - str, 'borderColor')\n : get(backgrounds, 3 + str, 'borderColor'),\n })\n } else {\n Object.assign(theme, {\n borderColor: get(borderColors, 1 + strongerDir, 'borderColor'),\n borderColorHover: get(borderColors, 2 + strongerDir, 'borderColor'),\n borderColorPress: get(borderColors, 3 + strongerDir, 'borderColor'),\n borderColorFocus: get(borderColors, 4 + strongerDir, 'borderColor'),\n })\n }\n\n return theme\n}\n\nexport const colorSchemes = [\n { name: 'blue', colors: Colors.blue, darkColors: Colors.blueDark },\n { name: 'gray', colors: Colors.gray, darkColors: Colors.grayDark },\n { name: 'green', colors: Colors.green, darkColors: Colors.greenDark },\n { name: 'indigo', colors: Colors.indigo, darkColors: Colors.indigoDark },\n { name: 'orange', colors: Colors.orange, darkColors: Colors.orangeDark },\n { name: 'pink', colors: Colors.pink, darkColors: Colors.pinkDark },\n { name: 'purple', colors: Colors.purple, darkColors: Colors.purpleDark },\n { name: 'red', colors: Colors.red, darkColors: Colors.redDark },\n { name: 'violet', colors: Colors.violet, darkColors: Colors.violetDark },\n { name: 'yellow', colors: Colors.yellow, darkColors: Colors.yellowDark },\n { name: 'teal', colors: Colors.teal, darkColors: Colors.tealDark },\n { name: 'lime', colors: Colors.lime, darkColors: Colors.limeDark },\n { name: 'brown', colors: Colors.brown, darkColors: Colors.brownDark },\n] as const\n\nexport type ColorNames = typeof colorSchemes[number]['name']\n\nexport const lightGradient = [\n '#fff',\n '#f4f4f4',\n color.gray1,\n color.gray2,\n color.gray3,\n color.gray4,\n color.gray5,\n color.gray6,\n color.gray7,\n color.gray8,\n color.gray9,\n color.gray10,\n color.gray11,\n color.gray12,\n]\n\nexport const darkGradient = [\n '#111111',\n '#151515',\n '#191919',\n '#232323',\n '#282828',\n '#323232',\n '#383838',\n '#424242',\n '#494949',\n '#545454',\n '#626262',\n '#777777',\n]\n\nconst lightThemes = createThemesFrom('light', createTheme, {\n backgrounds: lightGradient,\n // isBase: true,\n backgroundStrong: '#fcfcfc',\n borderColors: lightGradient.slice(2),\n isLight: true,\n})\n\nconst darkThemes = createThemesFrom('dark', createTheme, {\n backgrounds: darkGradient,\n colors: lightGradient.slice(2),\n backgroundStrong: '#111',\n isBase: true,\n isLight: false,\n shift: 1,\n offsets: {\n color: [0, 4, 5, 5, 5, 5],\n },\n})\n\nconst baseThemes = {\n // light\n ...lightThemes,\n light: {\n ...allLightColors,\n ...lightThemes.light,\n },\n light_active: makeActiveTheme(lightThemes.light),\n light_Card: lightThemes.light,\n light_DrawerFrame: lightThemes.light_alt1,\n light_Button: lightThemes.light_alt1,\n\n // dark\n ...darkThemes,\n dark: {\n ...allDarkColors,\n ...darkThemes.dark,\n },\n dark_active: makeActiveTheme(darkThemes.dark),\n dark_Card: darkThemes.dark_alt1,\n dark_DrawerFrame: darkThemes.dark_alt2,\n dark_Button: darkThemes.dark_alt1,\n}\n\nfunction makeActiveTheme(theme: any) {\n const res = { ...theme }\n res.backgroundHover = res.background\n res.colorHover = res.color\n res.backgroundPress = res.background\n res.colorPress = res.color\n return res\n}\n\ntype ColorThemeNames =\n | ColorNames\n | AltName<`light_${ColorNames}`, AltKeys>\n | AltName<`dark_${ColorNames}`, AltKeys>\n\nconst colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) => {\n const [altLightThemes, altDarkThemes] = [\n { colors: darkColors, backgrounds: colors },\n { colors, backgrounds: darkColors },\n ].map((props, i) => {\n const isLight = i === 0\n const [backgrounds, colors] = [\n Object.values(props.backgrounds),\n Object.values(props.colors).slice(isLight ? 2 : 2),\n ] as const\n\n const scheme = isLight ? 'light' : 'dark'\n const shift = isLight ? 0 : 1\n\n if (!isLight) {\n const [_, h, sp, lp] = backgrounds[0].match(/hsl\\(([0-9\\.]+), ([0-9\\.]+)\\%, ([0-9\\.]+)\\%\\)/)!\n backgrounds.unshift(`hsl(${h}, ${sp}%, ${parseFloat(lp) / 2}%)`)\n }\n\n const themeWithAlts = createThemesFrom(name, createTheme, {\n colors,\n backgrounds,\n borderColors: backgrounds,\n isLight,\n shift,\n isBase: false,\n offsets: {\n background: isLight ? [1, 1, 1, 1, 1, 1] : null,\n borderColor: isLight ? [2, 2, 2, 3, 2] : null,\n color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1],\n },\n })\n\n return Object.entries(themeWithAlts).map(([k, v]) => [`${scheme}_${k}`, v])\n })\n const lightButtonTheme = altLightThemes[0]\n const darkButtonTheme = altDarkThemes[0]\n return [\n ...altLightThemes,\n [`${lightButtonTheme[0]}_Button`, altLightThemes[2][1]],\n [`${lightButtonTheme[0]}_Card`, altLightThemes[2][1]],\n [`${lightButtonTheme[0]}_DrawerFrame`, altLightThemes[2][1]],\n ...altDarkThemes,\n [`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]],\n [`${darkButtonTheme[0]}_Card`, altDarkThemes[2][1]],\n [`${darkButtonTheme[0]}_DrawerFrame`, altDarkThemes[2][1]],\n ]\n})\n\ntype MyThemeBase = typeof baseThemes['light_alt1']\n\nconst colorThemes: {\n [key in ColorThemeNames]: MyThemeBase\n} = Object.fromEntries(colorThemeEntries) as any\n\nconst allThemes = {\n ...baseThemes,\n ...colorThemes,\n} as const\n\nexport const themes: {\n [key in keyof typeof allThemes]: typeof baseThemes['light']\n} = allThemes as any\n\n// TODO\n// export function createThemes(props: {\n// colors?:\n// | 'amber'\n// | 'blue'\n// | 'bronze'\n// | 'brown'\n// | 'crimson'\n// | 'cyan'\n// | 'gold'\n// | 'grass'\n// | 'gray'\n// | 'green'\n// | 'indigo'\n// | 'lime'\n// | 'mint'\n// | 'olive'\n// | 'orange'\n// | 'pink'\n// | 'plum'\n// | 'purple'\n// | 'mauve'\n// | 'red'\n// | 'sage'\n// | 'sand'\n// | 'sky'\n// | 'slate'\n// | 'teal'\n// | 'tomato'\n// | 'violet'\n// | 'yellow'\n// alternates?: number\n// }) {}\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { createThemes } from '@tamagui/create-themes'\n\nimport { colorTokens } from './tokens'\n\nexport const themes = createThemes<keyof typeof colorTokens.light>({\n activeColor: 'blue',\n light: [\n '#fff',\n '#f4f4f4',\n 'hsl(0, 0%, 99.0%)',\n 'hsl(0, 0%, 97.3%)',\n 'hsl(0, 0%, 95.1%)',\n 'hsl(0, 0%, 93.0%)',\n 'hsl(0, 0%, 90.9%)',\n 'hsl(0, 0%, 88.7%)',\n 'hsl(0, 0%, 85.8%)',\n 'hsl(0, 0%, 78.0%)',\n 'hsl(0, 0%, 56.1%)',\n 'hsl(0, 0%, 52.3%)',\n 'hsl(0, 0%, 43.5%)',\n 'hsl(0, 0%, 9.0%)',\n ],\n dark: [\n '#111111',\n '#151515',\n '#191919',\n '#232323',\n '#282828',\n '#323232',\n '#383838',\n '#424242',\n '#494949',\n '#545454',\n '#626262',\n '#777777',\n ],\n colorsLight: colorTokens.light,\n colorsDark: colorTokens.dark,\n})\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,oBAAoB;AAE7B,SAAS,mBAAmB;AAErB,MAAM,SAAS,aAA6C;AAAA,EACjE,aAAa;AAAA,EACb,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;AAAA,EACA,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,EACF;AAAA,EACA,aAAa,YAAY;AAAA,EACzB,YAAY,YAAY;AAC1B,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/tokens.js
CHANGED
|
@@ -1,14 +1,61 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import {
|
|
2
|
+
blue,
|
|
3
|
+
blueDark,
|
|
4
|
+
gray,
|
|
5
|
+
grayDark,
|
|
6
|
+
green,
|
|
7
|
+
greenDark,
|
|
8
|
+
orange,
|
|
9
|
+
orangeDark,
|
|
10
|
+
pink,
|
|
11
|
+
pinkDark,
|
|
12
|
+
purple,
|
|
13
|
+
purpleDark,
|
|
14
|
+
red,
|
|
15
|
+
redDark,
|
|
16
|
+
yellow,
|
|
17
|
+
yellowDark
|
|
18
|
+
} from "@tamagui/colors";
|
|
19
|
+
import { createTokens } from "@tamagui/core";
|
|
20
|
+
const size = {
|
|
21
|
+
0: 0,
|
|
22
|
+
0.25: 2,
|
|
23
|
+
0.5: 4,
|
|
24
|
+
0.75: 8,
|
|
25
|
+
1: 20,
|
|
26
|
+
1.5: 24,
|
|
27
|
+
2: 28,
|
|
28
|
+
2.5: 32,
|
|
29
|
+
3: 36,
|
|
30
|
+
3.5: 40,
|
|
31
|
+
4: 44,
|
|
32
|
+
true: 44,
|
|
33
|
+
4.5: 48,
|
|
34
|
+
5: 52,
|
|
35
|
+
6: 64,
|
|
36
|
+
7: 74,
|
|
37
|
+
8: 84,
|
|
38
|
+
9: 94,
|
|
39
|
+
10: 104,
|
|
40
|
+
11: 124,
|
|
41
|
+
12: 144,
|
|
42
|
+
13: 164,
|
|
43
|
+
14: 184,
|
|
44
|
+
15: 204,
|
|
45
|
+
16: 224,
|
|
46
|
+
17: 224,
|
|
47
|
+
18: 244,
|
|
48
|
+
19: 264,
|
|
49
|
+
20: 284
|
|
50
|
+
};
|
|
51
|
+
const spaces = Object.entries(size).map(([k, v]) => [
|
|
52
|
+
k,
|
|
53
|
+
Math.max(0, v <= 16 ? Math.round(v * 0.333) : Math.floor(v * 0.7 - 12))
|
|
54
|
+
]);
|
|
55
|
+
const spacesNegative = spaces.map(([k, v]) => [`-${k}`, -v]);
|
|
9
56
|
const space = {
|
|
10
|
-
...
|
|
11
|
-
...Object.fromEntries(
|
|
57
|
+
...Object.fromEntries(spaces),
|
|
58
|
+
...Object.fromEntries(spacesNegative)
|
|
12
59
|
};
|
|
13
60
|
const zIndex = {
|
|
14
61
|
0: 0,
|
|
@@ -18,10 +65,55 @@ const zIndex = {
|
|
|
18
65
|
4: 400,
|
|
19
66
|
5: 500
|
|
20
67
|
};
|
|
68
|
+
const colorTokens = {
|
|
69
|
+
light: {
|
|
70
|
+
blue,
|
|
71
|
+
gray,
|
|
72
|
+
green,
|
|
73
|
+
orange,
|
|
74
|
+
pink,
|
|
75
|
+
purple,
|
|
76
|
+
red,
|
|
77
|
+
yellow
|
|
78
|
+
},
|
|
79
|
+
dark: {
|
|
80
|
+
blue: blueDark,
|
|
81
|
+
gray: grayDark,
|
|
82
|
+
green: greenDark,
|
|
83
|
+
orange: orangeDark,
|
|
84
|
+
pink: pinkDark,
|
|
85
|
+
purple: purpleDark,
|
|
86
|
+
red: redDark,
|
|
87
|
+
yellow: yellowDark
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
const darkColors = {
|
|
91
|
+
...colorTokens.dark.blue,
|
|
92
|
+
...colorTokens.dark.gray,
|
|
93
|
+
...colorTokens.dark.green,
|
|
94
|
+
...colorTokens.dark.orange,
|
|
95
|
+
...colorTokens.dark.pink,
|
|
96
|
+
...colorTokens.dark.purple,
|
|
97
|
+
...colorTokens.dark.red,
|
|
98
|
+
...colorTokens.dark.yellow
|
|
99
|
+
};
|
|
100
|
+
const lightColors = {
|
|
101
|
+
...colorTokens.light.blue,
|
|
102
|
+
...colorTokens.light.gray,
|
|
103
|
+
...colorTokens.light.green,
|
|
104
|
+
...colorTokens.light.orange,
|
|
105
|
+
...colorTokens.light.pink,
|
|
106
|
+
...colorTokens.light.purple,
|
|
107
|
+
...colorTokens.light.red,
|
|
108
|
+
...colorTokens.light.yellow
|
|
109
|
+
};
|
|
21
110
|
const color = {
|
|
22
|
-
...
|
|
23
|
-
...
|
|
111
|
+
...postfixObjKeys(lightColors, "Light"),
|
|
112
|
+
...postfixObjKeys(darkColors, "Dark")
|
|
24
113
|
};
|
|
114
|
+
function postfixObjKeys(obj, postfix) {
|
|
115
|
+
return Object.fromEntries(Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v]));
|
|
116
|
+
}
|
|
25
117
|
const radius = {
|
|
26
118
|
0: 0,
|
|
27
119
|
1: 3,
|
|
@@ -29,18 +121,30 @@ const radius = {
|
|
|
29
121
|
3: 7,
|
|
30
122
|
4: 9,
|
|
31
123
|
5: 10,
|
|
32
|
-
6:
|
|
33
|
-
7:
|
|
34
|
-
8:
|
|
35
|
-
9:
|
|
124
|
+
6: 16,
|
|
125
|
+
7: 19,
|
|
126
|
+
8: 22,
|
|
127
|
+
9: 26,
|
|
128
|
+
10: 34,
|
|
129
|
+
11: 42,
|
|
130
|
+
12: 50
|
|
36
131
|
};
|
|
132
|
+
const tokens = createTokens({
|
|
133
|
+
color,
|
|
134
|
+
radius,
|
|
135
|
+
zIndex,
|
|
136
|
+
space,
|
|
137
|
+
size
|
|
138
|
+
});
|
|
37
139
|
export {
|
|
38
140
|
color,
|
|
39
|
-
|
|
141
|
+
colorTokens,
|
|
142
|
+
darkColors,
|
|
143
|
+
lightColors,
|
|
40
144
|
radius,
|
|
41
145
|
size,
|
|
42
|
-
sizeKeys,
|
|
43
146
|
space,
|
|
147
|
+
tokens,
|
|
44
148
|
zIndex
|
|
45
149
|
};
|
|
46
150
|
//# sourceMappingURL=tokens.js.map
|
package/dist/esm/tokens.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/tokens.tsx"],
|
|
4
|
-
"sourcesContent": ["import {
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import {\n blue,\n blueDark,\n gray,\n grayDark,\n green,\n greenDark,\n orange,\n orangeDark,\n pink,\n pinkDark,\n purple,\n purpleDark,\n red,\n redDark,\n yellow,\n yellowDark,\n} from '@tamagui/colors'\nimport { Variable, createTokens } from '@tamagui/core'\n\n// should roughly map to button/input etc height at each level\n// fonts should match that height/lineHeight at each stop\n// so these are really non-linear on purpose\n// why?\n// - at sizes <1, used for fine grained things (borders, smallest paddingY)\n// - so smallest padY should be roughly 1-4px so it can join with lineHeight\n// - at sizes >=1, have to consider \"pressability\" (jumps up)\n// - after that it should go upwards somewhat naturally\n// - H1 / headings top out at 10 naturally, so after 10 we can go upwards faster\n// but also one more wrinkle...\n// space is used in conjunction with size\n// i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)\nexport const size = {\n 0: 0,\n 0.25: 2,\n 0.5: 4,\n 0.75: 8,\n 1: 20,\n 1.5: 24,\n 2: 28,\n 2.5: 32,\n 3: 36,\n 3.5: 40,\n 4: 44,\n true: 44,\n 4.5: 48,\n 5: 52,\n 6: 64,\n 7: 74,\n 8: 84,\n 9: 94,\n 10: 104,\n 11: 124,\n 12: 144,\n 13: 164,\n 14: 184,\n 15: 204,\n 16: 224,\n 17: 224,\n 18: 244,\n 19: 264,\n 20: 284,\n}\n\ntype Sizes = typeof size\ntype SizeKeys = `${keyof Sizes}`\n\nconst spaces = Object.entries(size).map(([k, v]) => [\n k,\n Math.max(0, v <= 16 ? Math.round(v * 0.333) : Math.floor(v * 0.7 - 12)),\n])\n\nconst spacesNegative = spaces.map(([k, v]) => [`-${k}`, -v])\n\nexport const space: {\n [Key in `-${SizeKeys}` | SizeKeys]: Key extends keyof Sizes ? Sizes[Key] : number\n} = {\n ...Object.fromEntries(spaces),\n ...Object.fromEntries(spacesNegative),\n} as any\n\nexport const zIndex = {\n 0: 0,\n 1: 100,\n 2: 200,\n 3: 300,\n 4: 400,\n 5: 500,\n}\n\nexport const colorTokens = {\n light: {\n blue: blue,\n gray: gray,\n green: green,\n orange: orange,\n pink: pink,\n purple: purple,\n red: red,\n yellow: yellow,\n },\n dark: {\n blue: blueDark,\n gray: grayDark,\n green: greenDark,\n orange: orangeDark,\n pink: pinkDark,\n purple: purpleDark,\n red: redDark,\n yellow: yellowDark,\n },\n}\n\nexport const darkColors = {\n ...colorTokens.dark.blue,\n ...colorTokens.dark.gray,\n ...colorTokens.dark.green,\n ...colorTokens.dark.orange,\n ...colorTokens.dark.pink,\n ...colorTokens.dark.purple,\n ...colorTokens.dark.red,\n ...colorTokens.dark.yellow,\n}\n\nexport const lightColors = {\n ...colorTokens.light.blue,\n ...colorTokens.light.gray,\n ...colorTokens.light.green,\n ...colorTokens.light.orange,\n ...colorTokens.light.pink,\n ...colorTokens.light.purple,\n ...colorTokens.light.red,\n ...colorTokens.light.yellow,\n}\n\nexport const color = {\n ...postfixObjKeys(lightColors, 'Light'),\n ...postfixObjKeys(darkColors, 'Dark'),\n}\n\nfunction postfixObjKeys<A extends { [key: string]: Variable<string> | string }, B extends string>(\n obj: A,\n postfix: B\n): {\n [Key in `${keyof A extends string ? keyof A : never}${B}`]: Variable<string> | string\n} {\n return Object.fromEntries(Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])) as any\n}\n\nexport const radius = {\n 0: 0,\n 1: 3,\n 2: 5,\n 3: 7,\n 4: 9,\n 5: 10,\n 6: 16,\n 7: 19,\n 8: 22,\n 9: 26,\n 10: 34,\n 11: 42,\n 12: 50,\n}\n\nexport const tokens = createTokens({\n color,\n radius,\n zIndex,\n space,\n size,\n})\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|