@tamagui/theme-base 1.0.0-beta.0.204
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/README.md +21 -0
- package/dist/cjs/colorUtils.js +65 -0
- package/dist/cjs/colorUtils.js.map +7 -0
- package/dist/cjs/index.js +20 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/themes.js +276 -0
- package/dist/cjs/themes.js.map +7 -0
- package/dist/cjs/tokens.js +82 -0
- package/dist/cjs/tokens.js.map +7 -0
- package/dist/esm/colorUtils.js +43 -0
- package/dist/esm/colorUtils.js.map +7 -0
- package/dist/esm/index.js +4 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/esm/themes.js +242 -0
- package/dist/esm/themes.js.map +7 -0
- package/dist/esm/tokens.js +46 -0
- package/dist/esm/tokens.js.map +7 -0
- package/dist/jsx/colorUtils.js +42 -0
- package/dist/jsx/index.js +3 -0
- package/dist/jsx/themes.js +241 -0
- package/dist/jsx/tokens.js +45 -0
- package/package.json +27 -0
- package/types/colorUtils.d.ts +4 -0
- package/types/colorUtils.d.ts.map +1 -0
- package/types/index.d.ts +4 -0
- package/types/index.d.ts.map +1 -0
- package/types/themes.d.ts +4503 -0
- package/types/themes.d.ts.map +1 -0
- package/types/tokens.d.ts +322 -0
- package/types/tokens.d.ts.map +1 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2020 Nate Wienert
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
```tsx
|
|
2
|
+
import '@tamagui/theme-base/inter.css' // web-fonts
|
|
3
|
+
import '@tamagui/theme-base/fira-code.css' // web-fonts
|
|
4
|
+
import { shorthands } from '@tamagui/shorthands'
|
|
5
|
+
import { themes, tokens } from '@tamagui/theme-base'
|
|
6
|
+
import { createTamagui } from 'tamagui'
|
|
7
|
+
|
|
8
|
+
export default createTamagui({
|
|
9
|
+
themes,
|
|
10
|
+
tokens,
|
|
11
|
+
shorthands,
|
|
12
|
+
})
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
For Fira Code:
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
.font_mono {
|
|
19
|
+
font-feature-settings:"liga","tnum","zero","ss01","locl","calt";
|
|
20
|
+
}
|
|
21
|
+
```
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var colorUtils_exports = {};
|
|
20
|
+
__export(colorUtils_exports, {
|
|
21
|
+
hexToRGBA: () => hexToRGBA,
|
|
22
|
+
setColorAlpha: () => setColorAlpha
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(colorUtils_exports);
|
|
25
|
+
var import_core = require("@tamagui/core");
|
|
26
|
+
const hexToRGBA = /* @__PURE__ */ __name((hex, alpha = 1) => {
|
|
27
|
+
if (!isValidHex(hex)) {
|
|
28
|
+
throw new Error("Invalid HEX");
|
|
29
|
+
}
|
|
30
|
+
const chunkSize = Math.floor((hex.length - 1) / 3);
|
|
31
|
+
const hexArr = getChunksFromString(hex.slice(1), chunkSize);
|
|
32
|
+
const [r, g, b, a] = (hexArr == null ? void 0 : hexArr.map(convertHexUnitTo256)) ?? [];
|
|
33
|
+
return `rgba(${r}, ${g}, ${b}, ${getAlphaFloat(a, alpha)})`;
|
|
34
|
+
}, "hexToRGBA");
|
|
35
|
+
const setColorAlpha = /* @__PURE__ */ __name((colorIn, alpha = 1) => {
|
|
36
|
+
let color = `${(0, import_core.getVariableValue)(colorIn)}`;
|
|
37
|
+
if (color.startsWith("hsl(")) {
|
|
38
|
+
return color.replace("hsl", "hsla").replace(")", `, ${alpha})`);
|
|
39
|
+
}
|
|
40
|
+
if (color.startsWith("#")) {
|
|
41
|
+
return hexToRGBA(color, alpha);
|
|
42
|
+
}
|
|
43
|
+
if (color.startsWith("rgb(")) {
|
|
44
|
+
return color.replace("rgb", "rgba").replace(")", `, ${alpha})`);
|
|
45
|
+
}
|
|
46
|
+
return color;
|
|
47
|
+
}, "setColorAlpha");
|
|
48
|
+
const isValidHex = /* @__PURE__ */ __name((hex) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex), "isValidHex");
|
|
49
|
+
const getChunksFromString = /* @__PURE__ */ __name((st, chunkSize = 0) => st.match(new RegExp(`.{${chunkSize}}`, "g")), "getChunksFromString");
|
|
50
|
+
const convertHexUnitTo256 = /* @__PURE__ */ __name((hexStr) => parseInt(hexStr.repeat(2 / hexStr.length), 16), "convertHexUnitTo256");
|
|
51
|
+
const getAlphaFloat = /* @__PURE__ */ __name((a, alpha = 1) => {
|
|
52
|
+
if (a !== void 0) {
|
|
53
|
+
return a / 255;
|
|
54
|
+
}
|
|
55
|
+
if (typeof alpha != "number" || alpha < 0 || alpha > 1) {
|
|
56
|
+
return 1;
|
|
57
|
+
}
|
|
58
|
+
return alpha;
|
|
59
|
+
}, "getAlphaFloat");
|
|
60
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
61
|
+
0 && (module.exports = {
|
|
62
|
+
hexToRGBA,
|
|
63
|
+
setColorAlpha
|
|
64
|
+
});
|
|
65
|
+
//# sourceMappingURL=colorUtils.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/colorUtils.tsx"],
|
|
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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA2C;AAEpC,MAAM,YAAY,wBAAC,KAAa,QAAQ,MAAM;AACnD,MAAI,CAAC,WAAW,GAAG,GAAG;AACpB,UAAM,IAAI,MAAM,aAAa;AAAA,EAC/B;AACA,QAAM,YAAY,KAAK,MAAO,KAAI,SAAS,KAAK,CAAC;AACjD,QAAM,SAAS,oBAAoB,IAAI,MAAM,CAAC,GAAG,SAAS;AAC1D,QAAM,CAAC,GAAG,GAAG,GAAG,KAAK,kCAAQ,IAAI,yBAAwB,CAAC;AAC1D,SAAO,QAAQ,MAAM,MAAM,MAAM,cAAc,GAAG,KAAK;AACzD,GARyB;AAUlB,MAAM,gBAAgB,wBAAC,SAA4B,QAAQ,MAAM;AACtE,MAAI,QAAQ,GAAG,kCAAiB,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,GAZ6B;AAc7B,MAAM,aAAa,wBAAC,QAAgB,6BAA6B,KAAK,GAAG,GAAtD;AAEnB,MAAM,sBAAsB,wBAAC,IAAY,YAAY,MACnD,GAAG,MAAM,IAAI,OAAO,KAAK,cAAc,GAAG,CAAC,GADjB;AAG5B,MAAM,sBAAsB,wBAAC,WAAmB,SAAS,OAAO,OAAO,IAAI,OAAO,MAAM,GAAG,EAAE,GAAjE;AAE5B,MAAM,gBAAgB,wBAAC,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,GARsB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __copyProps = (to, from, except, desc) => {
|
|
6
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
7
|
+
for (let key of __getOwnPropNames(from))
|
|
8
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
9
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
10
|
+
}
|
|
11
|
+
return to;
|
|
12
|
+
};
|
|
13
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
+
var src_exports = {};
|
|
16
|
+
module.exports = __toCommonJS(src_exports);
|
|
17
|
+
__reExport(src_exports, require("./themes"), module.exports);
|
|
18
|
+
__reExport(src_exports, require("./tokens"), module.exports);
|
|
19
|
+
__reExport(src_exports, require("@tamagui/colors"), module.exports);
|
|
20
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/index.tsx"],
|
|
4
|
+
"sourcesContent": ["export * from './themes'\nexport * from './tokens'\nexport * from '@tamagui/colors'\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,qBAAd;AACA,wBAAc,qBADd;AAEA,wBAAc,4BAFd;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,276 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
25
|
+
var __export = (target, all) => {
|
|
26
|
+
for (var name in all)
|
|
27
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
28
|
+
};
|
|
29
|
+
var __copyProps = (to, from, except, desc) => {
|
|
30
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
31
|
+
for (let key of __getOwnPropNames(from))
|
|
32
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
33
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
34
|
+
}
|
|
35
|
+
return to;
|
|
36
|
+
};
|
|
37
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
38
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
39
|
+
var themes_exports = {};
|
|
40
|
+
__export(themes_exports, {
|
|
41
|
+
colorSchemes: () => colorSchemes,
|
|
42
|
+
darkGradient: () => darkGradient,
|
|
43
|
+
lightGradient: () => lightGradient,
|
|
44
|
+
themes: () => themes
|
|
45
|
+
});
|
|
46
|
+
module.exports = __toCommonJS(themes_exports);
|
|
47
|
+
var Colors = __toESM(require("@tamagui/colors"));
|
|
48
|
+
var import_colors = require("@tamagui/colors");
|
|
49
|
+
var import_core = require("@tamagui/core");
|
|
50
|
+
var import_colorUtils = require("./colorUtils");
|
|
51
|
+
var import_tokens = require("./tokens");
|
|
52
|
+
const alternates = [1, 2, 3, 4];
|
|
53
|
+
function createThemesFrom(name, getTheme, props) {
|
|
54
|
+
const { shift = 0 } = props;
|
|
55
|
+
const theme = getTheme(0 + shift, props);
|
|
56
|
+
let themeEntries = [[name, theme]];
|
|
57
|
+
const altThemes = alternates.map((alt) => [
|
|
58
|
+
`${name}_alt${alt}`,
|
|
59
|
+
getTheme(alt + shift, props)
|
|
60
|
+
]);
|
|
61
|
+
const altButtonThemes = alternates.map((_, i) => {
|
|
62
|
+
const [bName, bTheme] = [altThemes[i][0], (altThemes[i + 1] || altThemes[i])[1]];
|
|
63
|
+
return [`${bName}_Button`, bTheme];
|
|
64
|
+
});
|
|
65
|
+
const darkerTheme = getTheme(Math.max(0, shift + (props.isLight ? 1 : -1)), props);
|
|
66
|
+
const activeTheme = makeActiveTheme(theme);
|
|
67
|
+
themeEntries = [
|
|
68
|
+
...themeEntries,
|
|
69
|
+
...altThemes,
|
|
70
|
+
...altButtonThemes,
|
|
71
|
+
[`${name}_Button`, altThemes[0][1]],
|
|
72
|
+
[`${name}_darker`, darkerTheme],
|
|
73
|
+
[`${name}_active`, activeTheme]
|
|
74
|
+
];
|
|
75
|
+
const themes2 = Object.fromEntries(themeEntries);
|
|
76
|
+
return themes2;
|
|
77
|
+
}
|
|
78
|
+
__name(createThemesFrom, "createThemesFrom");
|
|
79
|
+
const createTheme = /* @__PURE__ */ __name((str = 1, {
|
|
80
|
+
backgrounds,
|
|
81
|
+
isLight = true,
|
|
82
|
+
isBase = false,
|
|
83
|
+
colors = [...backgrounds].reverse(),
|
|
84
|
+
borderColors = isLight ? colors : backgrounds,
|
|
85
|
+
offsets: offsetsProp
|
|
86
|
+
}) => {
|
|
87
|
+
const offsets = {
|
|
88
|
+
borderColor: (offsetsProp == null ? void 0 : offsetsProp.borderColor) ?? (offsetsProp == null ? void 0 : offsetsProp.background) ?? [0, 0, 0, 0],
|
|
89
|
+
background: (offsetsProp == null ? void 0 : offsetsProp.background) ?? [0, 0, 0, 0],
|
|
90
|
+
color: (offsetsProp == null ? void 0 : offsetsProp.color) ?? [0, 0, 0, 0]
|
|
91
|
+
};
|
|
92
|
+
const darkColors = isLight ? colors : backgrounds;
|
|
93
|
+
const lighterDir = isLight ? -1 : 1;
|
|
94
|
+
const darkerDir = -lighterDir;
|
|
95
|
+
const strongerDir = isLight ? darkerDir : lighterDir;
|
|
96
|
+
const get = /* @__PURE__ */ __name((arr, index, name = "background") => {
|
|
97
|
+
return arr[Math.max(0, Math.min(index + (offsets[name][str] || 0), arr.length - 1))];
|
|
98
|
+
}, "get");
|
|
99
|
+
const colorTranslucent = (0, import_colorUtils.setColorAlpha)((0, import_core.getVariableValue)(get(colors, 0 + str, "color")), 0.5);
|
|
100
|
+
let theme = {
|
|
101
|
+
background: get(backgrounds, str),
|
|
102
|
+
backgroundStronger: get(backgrounds, str + strongerDir),
|
|
103
|
+
backgroundSoft: get(backgrounds, str + 3),
|
|
104
|
+
backgroundHover: get(backgrounds, str + lighterDir),
|
|
105
|
+
backgroundPress: get(backgrounds, str + darkerDir * 1),
|
|
106
|
+
backgroundFocus: get(backgrounds, str + darkerDir * 2),
|
|
107
|
+
backgroundTransparent: import_tokens.color.grayA1,
|
|
108
|
+
color: get(colors, 0 + str, "color"),
|
|
109
|
+
colorHover: get(colors, 1 + str, "color"),
|
|
110
|
+
colorPress: get(colors, 2 + str, "color"),
|
|
111
|
+
colorFocus: get(colors, 3 + str, "color"),
|
|
112
|
+
colorTranslucent,
|
|
113
|
+
colorMid: colors[Math.floor(colors.length / 2)],
|
|
114
|
+
shadowColor: isLight ? import_tokens.color.grayA3 : import_tokens.color.grayA8,
|
|
115
|
+
shadowColorHover: darkColors[!isLight ? 1 : 8],
|
|
116
|
+
shadowColorPress: darkColors[!isLight ? 1 : 8],
|
|
117
|
+
shadowColorFocus: darkColors[!isLight ? 1 : 8],
|
|
118
|
+
borderColor: null,
|
|
119
|
+
borderColorHover: null,
|
|
120
|
+
borderColorPress: null,
|
|
121
|
+
borderColorFocus: null
|
|
122
|
+
};
|
|
123
|
+
if (isBase) {
|
|
124
|
+
Object.assign(theme, {
|
|
125
|
+
borderColor: isLight ? get(colors, 8 - str, "borderColor") : get(backgrounds, 2 + str, "borderColor"),
|
|
126
|
+
borderColorHover: isLight ? get(colors, 6 - str, "borderColor") : get(backgrounds, 3 + str, "borderColor"),
|
|
127
|
+
borderColorPress: isLight ? get(colors, 5 - str, "borderColor") : get(backgrounds, 1 + str, "borderColor"),
|
|
128
|
+
borderColorFocus: isLight ? get(colors, 4 - str, "borderColor") : get(backgrounds, 3 + str, "borderColor")
|
|
129
|
+
});
|
|
130
|
+
} else {
|
|
131
|
+
Object.assign(theme, {
|
|
132
|
+
borderColor: get(borderColors, 1 + strongerDir, "borderColor"),
|
|
133
|
+
borderColorHover: get(borderColors, 2 + strongerDir, "borderColor"),
|
|
134
|
+
borderColorPress: get(borderColors, 3 + strongerDir, "borderColor"),
|
|
135
|
+
borderColorFocus: get(borderColors, 4 + strongerDir, "borderColor")
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
return theme;
|
|
139
|
+
}, "createTheme");
|
|
140
|
+
const colorSchemes = [
|
|
141
|
+
{ name: "blue", colors: Colors.blue, darkColors: Colors.blueDark },
|
|
142
|
+
{ name: "gray", colors: Colors.gray, darkColors: Colors.grayDark },
|
|
143
|
+
{ name: "green", colors: Colors.green, darkColors: Colors.greenDark },
|
|
144
|
+
{ name: "indigo", colors: Colors.indigo, darkColors: Colors.indigoDark },
|
|
145
|
+
{ name: "orange", colors: Colors.orange, darkColors: Colors.orangeDark },
|
|
146
|
+
{ name: "pink", colors: Colors.pink, darkColors: Colors.pinkDark },
|
|
147
|
+
{ name: "purple", colors: Colors.purple, darkColors: Colors.purpleDark },
|
|
148
|
+
{ name: "red", colors: Colors.red, darkColors: Colors.redDark },
|
|
149
|
+
{ name: "violet", colors: Colors.violet, darkColors: Colors.violetDark },
|
|
150
|
+
{ name: "yellow", colors: Colors.yellow, darkColors: Colors.yellowDark },
|
|
151
|
+
{ name: "teal", colors: Colors.teal, darkColors: Colors.tealDark },
|
|
152
|
+
{ name: "lime", colors: Colors.lime, darkColors: Colors.limeDark },
|
|
153
|
+
{ name: "brown", colors: Colors.brown, darkColors: Colors.brownDark }
|
|
154
|
+
];
|
|
155
|
+
const lightGradient = [
|
|
156
|
+
"#fff",
|
|
157
|
+
"#f4f4f4",
|
|
158
|
+
import_tokens.color.gray1,
|
|
159
|
+
import_tokens.color.gray2,
|
|
160
|
+
import_tokens.color.gray3,
|
|
161
|
+
import_tokens.color.gray4,
|
|
162
|
+
import_tokens.color.gray5,
|
|
163
|
+
import_tokens.color.gray6,
|
|
164
|
+
import_tokens.color.gray7,
|
|
165
|
+
import_tokens.color.gray8,
|
|
166
|
+
import_tokens.color.gray9,
|
|
167
|
+
import_tokens.color.gray10,
|
|
168
|
+
import_tokens.color.gray11,
|
|
169
|
+
import_tokens.color.gray12
|
|
170
|
+
];
|
|
171
|
+
const darkGradient = [
|
|
172
|
+
"#111111",
|
|
173
|
+
"#151515",
|
|
174
|
+
"#191919",
|
|
175
|
+
"#232323",
|
|
176
|
+
"#282828",
|
|
177
|
+
"#323232",
|
|
178
|
+
"#383838",
|
|
179
|
+
"#424242",
|
|
180
|
+
"#494949",
|
|
181
|
+
"#545454",
|
|
182
|
+
"#626262",
|
|
183
|
+
"#777777"
|
|
184
|
+
];
|
|
185
|
+
const lightThemes = createThemesFrom("light", createTheme, {
|
|
186
|
+
backgrounds: lightGradient,
|
|
187
|
+
borderColors: lightGradient.slice(2),
|
|
188
|
+
isLight: true
|
|
189
|
+
});
|
|
190
|
+
const darkThemes = createThemesFrom("dark", createTheme, {
|
|
191
|
+
backgrounds: darkGradient,
|
|
192
|
+
colors: lightGradient.slice(2),
|
|
193
|
+
isBase: true,
|
|
194
|
+
isLight: false,
|
|
195
|
+
shift: 1,
|
|
196
|
+
offsets: {
|
|
197
|
+
color: [0, 4, 5, 5, 5, 5]
|
|
198
|
+
}
|
|
199
|
+
});
|
|
200
|
+
const baseThemes = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, lightThemes), {
|
|
201
|
+
light: __spreadValues(__spreadValues({}, import_colors.allLightColors), lightThemes.light),
|
|
202
|
+
light_active: makeActiveTheme(lightThemes.light),
|
|
203
|
+
light_Card: lightThemes.light,
|
|
204
|
+
light_DrawerFrame: lightThemes.light_alt1,
|
|
205
|
+
light_Button: lightThemes.light_alt1
|
|
206
|
+
}), darkThemes), {
|
|
207
|
+
dark: __spreadValues(__spreadValues({}, import_colors.allDarkColors), darkThemes.dark),
|
|
208
|
+
dark_active: makeActiveTheme(darkThemes.dark),
|
|
209
|
+
dark_Card: darkThemes.dark_alt1,
|
|
210
|
+
dark_DrawerFrame: darkThemes.dark_alt2,
|
|
211
|
+
dark_Button: darkThemes.dark_alt1
|
|
212
|
+
});
|
|
213
|
+
function makeActiveTheme(theme) {
|
|
214
|
+
const res = __spreadValues({}, theme);
|
|
215
|
+
res.backgroundHover = res.background;
|
|
216
|
+
res.colorHover = res.color;
|
|
217
|
+
res.backgroundPress = res.background;
|
|
218
|
+
res.colorPress = res.color;
|
|
219
|
+
return res;
|
|
220
|
+
}
|
|
221
|
+
__name(makeActiveTheme, "makeActiveTheme");
|
|
222
|
+
const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) => {
|
|
223
|
+
const [altLightThemes, altDarkThemes] = [
|
|
224
|
+
{ colors: darkColors, backgrounds: colors },
|
|
225
|
+
{ colors, backgrounds: darkColors }
|
|
226
|
+
].map((props, i) => {
|
|
227
|
+
const isLight = i === 0;
|
|
228
|
+
const [backgrounds, colors2] = [
|
|
229
|
+
Object.values(props.backgrounds),
|
|
230
|
+
Object.values(props.colors).slice(isLight ? 2 : 2)
|
|
231
|
+
];
|
|
232
|
+
const scheme = isLight ? "light" : "dark";
|
|
233
|
+
const shift = isLight ? 0 : 1;
|
|
234
|
+
if (!isLight) {
|
|
235
|
+
const [_, h, sp, lp] = backgrounds[0].match(/hsl\(([0-9\.]+), ([0-9\.]+)\%, ([0-9\.]+)\%\)/);
|
|
236
|
+
backgrounds.unshift(`hsl(${h}, ${sp}%, ${parseFloat(lp) / 2}%)`);
|
|
237
|
+
}
|
|
238
|
+
const themeWithAlts = createThemesFrom(name, createTheme, {
|
|
239
|
+
colors: colors2,
|
|
240
|
+
backgrounds,
|
|
241
|
+
borderColors: backgrounds,
|
|
242
|
+
isLight,
|
|
243
|
+
shift,
|
|
244
|
+
isBase: false,
|
|
245
|
+
offsets: {
|
|
246
|
+
background: isLight ? [0, 0, 0, 0, 0, 0] : null,
|
|
247
|
+
borderColor: isLight ? [3, 3, 3, 3, 2] : null,
|
|
248
|
+
color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1]
|
|
249
|
+
}
|
|
250
|
+
});
|
|
251
|
+
return Object.entries(themeWithAlts).map(([k, v]) => [`${scheme}_${k}`, v]);
|
|
252
|
+
});
|
|
253
|
+
const lightButtonTheme = altLightThemes[0];
|
|
254
|
+
const darkButtonTheme = altDarkThemes[0];
|
|
255
|
+
return [
|
|
256
|
+
...altLightThemes,
|
|
257
|
+
[`${lightButtonTheme[0]}_Button`, altLightThemes[2][1]],
|
|
258
|
+
[`${lightButtonTheme[0]}_Card`, altLightThemes[2][1]],
|
|
259
|
+
[`${lightButtonTheme[0]}_DrawerFrame`, altLightThemes[2][1]],
|
|
260
|
+
...altDarkThemes,
|
|
261
|
+
[`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]],
|
|
262
|
+
[`${darkButtonTheme[0]}_Card`, altDarkThemes[2][1]],
|
|
263
|
+
[`${darkButtonTheme[0]}_DrawerFrame`, altDarkThemes[2][1]]
|
|
264
|
+
];
|
|
265
|
+
});
|
|
266
|
+
const colorThemes = Object.fromEntries(colorThemeEntries);
|
|
267
|
+
const allThemes = __spreadValues(__spreadValues({}, baseThemes), colorThemes);
|
|
268
|
+
const themes = allThemes;
|
|
269
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
270
|
+
0 && (module.exports = {
|
|
271
|
+
colorSchemes,
|
|
272
|
+
darkGradient,
|
|
273
|
+
lightGradient,
|
|
274
|
+
themes
|
|
275
|
+
});
|
|
276
|
+
//# sourceMappingURL=themes.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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 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 offsets: offsetsProp,\n }: ThemeCreatorProps\n) => {\n const offsets = {\n borderColor: offsetsProp?.borderColor ?? offsetsProp?.background ?? [0, 0, 0, 0],\n background: offsetsProp?.background ?? [0, 0, 0, 0],\n color: offsetsProp?.color ?? [0, 0, 0, 0],\n }\n const darkColors = isLight ? colors : backgrounds\n const lighterDir = isLight ? -1 : 1\n const darkerDir = -lighterDir\n const strongerDir = isLight ? darkerDir : lighterDir\n const get = (arr: any[], index: number, name = 'background') => {\n return arr[Math.max(0, Math.min(index + (offsets[name][str] || 0), arr.length - 1))]\n }\n\n const colorTranslucent = setColorAlpha(getVariableValue(get(colors, 0 + str, 'color')), 0.5)\n\n let theme = {\n background: get(backgrounds, str),\n backgroundStronger: get(backgrounds, str + strongerDir),\n backgroundSoft: get(backgrounds, str + 3),\n backgroundHover: get(backgrounds, str + lighterDir),\n backgroundPress: get(backgrounds, str + darkerDir * 1),\n backgroundFocus: get(backgrounds, str + darkerDir * 2),\n backgroundTransparent: color.grayA1,\n color: get(colors, 0 + str, 'color'),\n colorHover: get(colors, 1 + str, 'color'),\n colorPress: get(colors, 2 + str, 'color'),\n colorFocus: get(colors, 3 + str, 'color'),\n colorTranslucent,\n colorMid: colors[Math.floor(colors.length / 2)],\n shadowColor: isLight ? color.grayA3 : 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 borderColors: lightGradient.slice(2),\n isLight: true,\n})\n\nconst darkThemes = createThemesFrom('dark', createTheme, {\n backgrounds: darkGradient,\n colors: lightGradient.slice(2),\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 ? [0, 0, 0, 0, 0, 0] : null,\n borderColor: isLight ? [3, 3, 3, 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": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
20
|
+
var __export = (target, all) => {
|
|
21
|
+
for (var name in all)
|
|
22
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
23
|
+
};
|
|
24
|
+
var __copyProps = (to, from, except, desc) => {
|
|
25
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
26
|
+
for (let key of __getOwnPropNames(from))
|
|
27
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
28
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
29
|
+
}
|
|
30
|
+
return to;
|
|
31
|
+
};
|
|
32
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
33
|
+
var tokens_exports = {};
|
|
34
|
+
__export(tokens_exports, {
|
|
35
|
+
color: () => color,
|
|
36
|
+
getSizeAt: () => getSizeAt,
|
|
37
|
+
radius: () => radius,
|
|
38
|
+
size: () => size,
|
|
39
|
+
sizeKeys: () => sizeKeys,
|
|
40
|
+
space: () => space,
|
|
41
|
+
zIndex: () => zIndex
|
|
42
|
+
});
|
|
43
|
+
module.exports = __toCommonJS(tokens_exports);
|
|
44
|
+
var import_colors = require("@tamagui/colors");
|
|
45
|
+
const sizeKeys = ["true", "0", "0.25", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "4.5", "5", "5.5", "6", "6.5", "7", "7.5", "8", "9", "10", "11", "12", "13", "14"];
|
|
46
|
+
const getSizeAt = /* @__PURE__ */ __name((index) => index === 0 ? 0 : Math.round(Math.pow(1.6, index)) + Math.floor(3 * index), "getSizeAt");
|
|
47
|
+
const size = Object.fromEntries(sizeKeys.map((key) => {
|
|
48
|
+
return [key, getSizeAt(key === "true" ? 4 : +key)];
|
|
49
|
+
}));
|
|
50
|
+
const space = __spreadValues(__spreadValues({}, size), Object.fromEntries(Object.entries(size).map(([k, v]) => [`-${k}`, -v])));
|
|
51
|
+
const zIndex = {
|
|
52
|
+
0: 0,
|
|
53
|
+
1: 100,
|
|
54
|
+
2: 200,
|
|
55
|
+
3: 300,
|
|
56
|
+
4: 400,
|
|
57
|
+
5: 500
|
|
58
|
+
};
|
|
59
|
+
const color = __spreadValues(__spreadValues({}, import_colors.allLightColors), import_colors.darkColorsPostfixed);
|
|
60
|
+
const radius = {
|
|
61
|
+
0: 0,
|
|
62
|
+
1: 3,
|
|
63
|
+
2: 5,
|
|
64
|
+
3: 7,
|
|
65
|
+
4: 9,
|
|
66
|
+
5: 10,
|
|
67
|
+
6: 12,
|
|
68
|
+
7: 16,
|
|
69
|
+
8: 20,
|
|
70
|
+
9: 30
|
|
71
|
+
};
|
|
72
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
73
|
+
0 && (module.exports = {
|
|
74
|
+
color,
|
|
75
|
+
getSizeAt,
|
|
76
|
+
radius,
|
|
77
|
+
size,
|
|
78
|
+
sizeKeys,
|
|
79
|
+
space,
|
|
80
|
+
zIndex
|
|
81
|
+
});
|
|
82
|
+
//# sourceMappingURL=tokens.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/tokens.tsx"],
|
|
4
|
+
"sourcesContent": ["import { allLightColors, darkColorsPostfixed } from '@tamagui/colors'\n\n// acknowledge you need more granularity at the smaller sizes with .5s\n// prettier-ignore\nexport const sizeKeys = ['true', '0', '0.25', '0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4', '4.5', '5', '5.5', '6', '6.5', '7', '7.5', '8', '9', '10', '11', '12', '13', '14'] as const\n\n// slightly more than double every 2 indices apart\nexport const getSizeAt = (index: number) =>\n index === 0 ? 0 : Math.round(Math.pow(1.6, index)) + Math.floor(3 * index)\n\nexport const size: {\n [key in typeof sizeKeys[any]]: number\n} = Object.fromEntries(\n sizeKeys.map((key) => {\n return [key, getSizeAt(key === 'true' ? 4 : +key)]\n })\n) as any\n\ntype Sizes = typeof size\ntype SizeKeys = keyof Sizes\n\nexport const space: {\n [Key in `-${SizeKeys}` | SizeKeys]: Key extends keyof Sizes ? Sizes[Key] : number\n} = {\n ...size,\n ...Object.fromEntries(Object.entries(size).map(([k, v]) => [`-${k}`, -v])),\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 color = {\n ...allLightColors,\n ...darkColorsPostfixed,\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: 12,\n 7: 16,\n 8: 20,\n 9: 30,\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAoD;AAI7C,MAAM,WAAW,CAAC,QAAQ,KAAK,QAAQ,OAAO,KAAK,OAAO,KAAK,OAAO,KAAK,OAAO,KAAK,OAAO,KAAK,OAAO,KAAK,OAAO,KAAK,OAAO,KAAK,KAAK,MAAM,MAAM,MAAM,MAAM,IAAI;AAGxK,MAAM,YAAY,wBAAC,UACxB,UAAU,IAAI,IAAI,KAAK,MAAM,KAAK,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,KAAK,GADlD;AAGlB,MAAM,OAET,OAAO,YACT,SAAS,IAAI,CAAC,QAAQ;AACpB,SAAO,CAAC,KAAK,UAAU,QAAQ,SAAS,IAAI,CAAC,GAAG,CAAC;AACnD,CAAC,CACH;AAKO,MAAM,QAET,kCACC,OACA,OAAO,YAAY,OAAO,QAAQ,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;AAGpE,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,QAAQ,kCAChB,+BACA;AAGE,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import { getVariableValue } from "@tamagui/core";
|
|
4
|
+
const hexToRGBA = /* @__PURE__ */ __name((hex, alpha = 1) => {
|
|
5
|
+
var _a;
|
|
6
|
+
if (!isValidHex(hex)) {
|
|
7
|
+
throw new Error("Invalid HEX");
|
|
8
|
+
}
|
|
9
|
+
const chunkSize = Math.floor((hex.length - 1) / 3);
|
|
10
|
+
const hexArr = getChunksFromString(hex.slice(1), chunkSize);
|
|
11
|
+
const [r, g, b, a] = (_a = hexArr == null ? void 0 : hexArr.map(convertHexUnitTo256)) != null ? _a : [];
|
|
12
|
+
return `rgba(${r}, ${g}, ${b}, ${getAlphaFloat(a, alpha)})`;
|
|
13
|
+
}, "hexToRGBA");
|
|
14
|
+
const setColorAlpha = /* @__PURE__ */ __name((colorIn, alpha = 1) => {
|
|
15
|
+
let color = `${getVariableValue(colorIn)}`;
|
|
16
|
+
if (color.startsWith("hsl(")) {
|
|
17
|
+
return color.replace("hsl", "hsla").replace(")", `, ${alpha})`);
|
|
18
|
+
}
|
|
19
|
+
if (color.startsWith("#")) {
|
|
20
|
+
return hexToRGBA(color, alpha);
|
|
21
|
+
}
|
|
22
|
+
if (color.startsWith("rgb(")) {
|
|
23
|
+
return color.replace("rgb", "rgba").replace(")", `, ${alpha})`);
|
|
24
|
+
}
|
|
25
|
+
return color;
|
|
26
|
+
}, "setColorAlpha");
|
|
27
|
+
const isValidHex = /* @__PURE__ */ __name((hex) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex), "isValidHex");
|
|
28
|
+
const getChunksFromString = /* @__PURE__ */ __name((st, chunkSize = 0) => st.match(new RegExp(`.{${chunkSize}}`, "g")), "getChunksFromString");
|
|
29
|
+
const convertHexUnitTo256 = /* @__PURE__ */ __name((hexStr) => parseInt(hexStr.repeat(2 / hexStr.length), 16), "convertHexUnitTo256");
|
|
30
|
+
const getAlphaFloat = /* @__PURE__ */ __name((a, alpha = 1) => {
|
|
31
|
+
if (a !== void 0) {
|
|
32
|
+
return a / 255;
|
|
33
|
+
}
|
|
34
|
+
if (typeof alpha != "number" || alpha < 0 || alpha > 1) {
|
|
35
|
+
return 1;
|
|
36
|
+
}
|
|
37
|
+
return alpha;
|
|
38
|
+
}, "getAlphaFloat");
|
|
39
|
+
export {
|
|
40
|
+
hexToRGBA,
|
|
41
|
+
setColorAlpha
|
|
42
|
+
};
|
|
43
|
+
//# sourceMappingURL=colorUtils.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/colorUtils.tsx"],
|
|
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": ";;AAAA;AAEO,MAAM,YAAY,wBAAC,KAAa,QAAQ,MAAM;AAFrD;AAGE,MAAI,CAAC,WAAW,GAAG,GAAG;AACpB,UAAM,IAAI,MAAM,aAAa;AAAA,EAC/B;AACA,QAAM,YAAY,KAAK,MAAO,KAAI,SAAS,KAAK,CAAC;AACjD,QAAM,SAAS,oBAAoB,IAAI,MAAM,CAAC,GAAG,SAAS;AAC1D,QAAM,CAAC,GAAG,GAAG,GAAG,KAAK,uCAAQ,IAAI,yBAAZ,YAAoC,CAAC;AAC1D,SAAO,QAAQ,MAAM,MAAM,MAAM,cAAc,GAAG,KAAK;AACzD,GARyB;AAUlB,MAAM,gBAAgB,wBAAC,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,GAZ6B;AAc7B,MAAM,aAAa,wBAAC,QAAgB,6BAA6B,KAAK,GAAG,GAAtD;AAEnB,MAAM,sBAAsB,wBAAC,IAAY,YAAY,MACnD,GAAG,MAAM,IAAI,OAAO,KAAK,cAAc,GAAG,CAAC,GADjB;AAG5B,MAAM,sBAAsB,wBAAC,WAAmB,SAAS,OAAO,OAAO,IAAI,OAAO,MAAM,GAAG,EAAE,GAAjE;AAE5B,MAAM,gBAAgB,wBAAC,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,GARsB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|