@tamagui/theme-base 1.0.0-beta.179 → 1.0.0-beta.181
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 +5 -0
- package/dist/cjs/firaFont.js +20 -17
- package/dist/cjs/firaFont.js.map +2 -2
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/silkscreenFont.js +54 -0
- package/dist/cjs/silkscreenFont.js.map +7 -0
- package/dist/cjs/themes.js +46 -25
- package/dist/cjs/themes.js.map +2 -2
- package/dist/cjs/tokens.js +41 -48
- package/dist/cjs/tokens.js.map +2 -2
- package/dist/esm/firaFont.js +20 -17
- package/dist/esm/firaFont.js.map +2 -2
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/silkscreenFont.js +35 -0
- package/dist/esm/silkscreenFont.js.map +7 -0
- package/dist/esm/themes.js +40 -26
- package/dist/esm/themes.js.map +2 -2
- package/dist/esm/tokens.js +38 -54
- package/dist/esm/tokens.js.map +2 -2
- package/dist/jsx/firaFont.js +20 -17
- package/dist/jsx/index.js +1 -1
- package/dist/jsx/silkscreenFont.js +34 -0
- package/dist/jsx/themes.js +40 -26
- package/dist/jsx/tokens.js +38 -54
- package/package.json +5 -5
- package/types/firaFont.d.ts +19 -0
- package/types/firaFont.d.ts.map +1 -1
- package/types/index.d.ts +1 -1
- package/types/index.d.ts.map +1 -1
- package/types/{interFont.d.ts → silkscreenFont.d.ts} +4 -13
- package/types/silkscreenFont.d.ts.map +1 -0
- package/types/themes.d.ts +4142 -152
- package/types/themes.d.ts.map +1 -1
- package/types/tokens.d.ts +320 -455
- package/types/tokens.d.ts.map +1 -1
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/silkscreenFont.tsx"],
|
|
4
|
+
"sourcesContent": ["import { createFont } from '@tamagui/core'\n\nconst size = {\n 1: 10,\n 2: 11,\n 3: 12,\n 4: 13,\n 5: 14,\n 6: 16,\n 7: 20,\n 8: 22,\n 9: 30,\n 10: 42,\n 11: 52,\n 12: 62,\n 13: 72,\n 14: 92,\n 15: 114,\n 16: 124,\n}\n\nexport const silkscreenFont = createFont({\n family: 'Silkscreen, Fira Code, Monaco, Consolas, Ubuntu Mono, monospace',\n size,\n lineHeight: Object.fromEntries(\n Object.entries(size).map(([k, v]) => [k, v * 1.75])\n ) as typeof size,\n weight: {\n 4: '300',\n },\n letterSpacing: {\n 4: 1,\n 6: 3,\n },\n})\n"],
|
|
5
|
+
"mappings": "AAAA;AAEA,MAAM,OAAO;AAAA,EACX,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,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,MAAM,iBAAiB,WAAW;AAAA,EACvC,QAAQ;AAAA,EACR;AAAA,EACA,YAAY,OAAO,YACjB,OAAO,QAAQ,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,IAAI,IAAI,CAAC,CACpD;AAAA,EACA,QAAQ;AAAA,IACN,GAAG;AAAA,EACL;AAAA,EACA,eAAe;AAAA,IACb,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/esm/themes.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
3
|
import * as Colors from "@tamagui/colors";
|
|
4
|
+
import { allDarkColors, allLightColors } from "@tamagui/colors";
|
|
4
5
|
import { getVariableValue } from "@tamagui/core";
|
|
5
|
-
import { allDarkColors, allLightColors } from "./colors";
|
|
6
6
|
import { setColorAlpha } from "./colorUtils";
|
|
7
|
-
import {
|
|
7
|
+
import { color } from "./tokens";
|
|
8
8
|
const alternates = [1, 2, 3, 4];
|
|
9
9
|
function createThemesFrom(name, getTheme, props) {
|
|
10
10
|
const { shift = 0 } = props;
|
|
@@ -59,7 +59,7 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
|
|
|
59
59
|
backgroundHover: get(backgrounds, str + lighterDir),
|
|
60
60
|
backgroundPress: get(backgrounds, str + darkerDir * 1),
|
|
61
61
|
backgroundFocus: get(backgrounds, str + darkerDir * 2),
|
|
62
|
-
backgroundTransparent:
|
|
62
|
+
backgroundTransparent: color.grayA1,
|
|
63
63
|
borderColor: isLight ? get(colors, 8 - str, "borderColor") : get(backgrounds, 2 + str, "borderColor"),
|
|
64
64
|
borderColorHover: isLight ? get(colors, 6 - str, "borderColor") : get(backgrounds, 3 + str, "borderColor"),
|
|
65
65
|
borderColorPress: isLight ? get(colors, 5 - str, "borderColor") : get(backgrounds, 1 + str, "borderColor"),
|
|
@@ -70,7 +70,7 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
|
|
|
70
70
|
colorFocus: get(colors, 3 + str, "color"),
|
|
71
71
|
colorTranslucent,
|
|
72
72
|
colorMid: colors[Math.floor(colors.length / 2)],
|
|
73
|
-
shadowColor: isLight ?
|
|
73
|
+
shadowColor: isLight ? color.grayA3 : color.grayA8,
|
|
74
74
|
shadowColorHover: darkColors[!isLight ? 1 : 8],
|
|
75
75
|
shadowColorPress: darkColors[!isLight ? 1 : 8],
|
|
76
76
|
shadowColorFocus: darkColors[!isLight ? 1 : 8]
|
|
@@ -94,32 +94,32 @@ const colorSchemes = [
|
|
|
94
94
|
const lightGradient = [
|
|
95
95
|
"#fff",
|
|
96
96
|
"#f4f4f4",
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
97
|
+
color.gray1,
|
|
98
|
+
color.gray2,
|
|
99
|
+
color.gray3,
|
|
100
|
+
color.gray4,
|
|
101
|
+
color.gray5,
|
|
102
|
+
color.gray6,
|
|
103
|
+
color.gray7,
|
|
104
|
+
color.gray8,
|
|
105
|
+
color.gray9,
|
|
106
|
+
color.gray10,
|
|
107
|
+
color.gray11,
|
|
108
|
+
color.gray12
|
|
109
109
|
];
|
|
110
110
|
const darkGradient = [
|
|
111
|
-
"#0f0f0f",
|
|
112
111
|
"#111111",
|
|
113
|
-
"#
|
|
112
|
+
"#151515",
|
|
114
113
|
"#191919",
|
|
115
|
-
"#
|
|
116
|
-
"#
|
|
114
|
+
"#232323",
|
|
115
|
+
"#282828",
|
|
117
116
|
"#323232",
|
|
118
117
|
"#383838",
|
|
119
118
|
"#424242",
|
|
120
119
|
"#494949",
|
|
121
120
|
"#545454",
|
|
122
|
-
"#626262"
|
|
121
|
+
"#626262",
|
|
122
|
+
"#777777"
|
|
123
123
|
];
|
|
124
124
|
const lightThemes = createThemesFrom("light", createTheme, {
|
|
125
125
|
backgrounds: lightGradient,
|
|
@@ -127,11 +127,11 @@ const lightThemes = createThemesFrom("light", createTheme, {
|
|
|
127
127
|
});
|
|
128
128
|
const darkThemes = createThemesFrom("dark", createTheme, {
|
|
129
129
|
backgrounds: darkGradient,
|
|
130
|
-
colors: lightGradient,
|
|
130
|
+
colors: lightGradient.slice(1),
|
|
131
131
|
isLight: false,
|
|
132
132
|
shift: 1,
|
|
133
133
|
offsets: {
|
|
134
|
-
color: [0,
|
|
134
|
+
color: [0, 4, 5, 5, 5, 5]
|
|
135
135
|
}
|
|
136
136
|
});
|
|
137
137
|
const baseThemes = {
|
|
@@ -142,6 +142,7 @@ const baseThemes = {
|
|
|
142
142
|
},
|
|
143
143
|
light_active: makeActiveTheme(lightThemes.light),
|
|
144
144
|
light_Card: lightThemes.light,
|
|
145
|
+
light_Drawer: lightThemes.light_alt1,
|
|
145
146
|
light_Button: lightThemes.light_alt1,
|
|
146
147
|
...darkThemes,
|
|
147
148
|
dark: {
|
|
@@ -150,6 +151,7 @@ const baseThemes = {
|
|
|
150
151
|
},
|
|
151
152
|
dark_active: makeActiveTheme(darkThemes.dark),
|
|
152
153
|
dark_Card: darkThemes.dark_alt1,
|
|
154
|
+
dark_Drawer: darkThemes.dark_alt2,
|
|
153
155
|
dark_Button: darkThemes.dark_alt1
|
|
154
156
|
};
|
|
155
157
|
function makeActiveTheme(theme) {
|
|
@@ -162,16 +164,24 @@ function makeActiveTheme(theme) {
|
|
|
162
164
|
}
|
|
163
165
|
__name(makeActiveTheme, "makeActiveTheme");
|
|
164
166
|
const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) => {
|
|
165
|
-
const [altLightThemes, altDarkThemes] = [
|
|
167
|
+
const [altLightThemes, altDarkThemes] = [
|
|
168
|
+
{ colors: darkColors, backgrounds: colors },
|
|
169
|
+
{ colors, backgrounds: darkColors }
|
|
170
|
+
].map((props, i) => {
|
|
166
171
|
const isLight = i === 0;
|
|
172
|
+
const [backgrounds, colors2] = [
|
|
173
|
+
Object.values(props.backgrounds),
|
|
174
|
+
Object.values(props.colors).slice(isLight ? 0 : 2)
|
|
175
|
+
];
|
|
176
|
+
console.log("wut", i, name, backgrounds, colors2);
|
|
167
177
|
const scheme = isLight ? "light" : "dark";
|
|
168
178
|
const shift = isLight ? 0 : 1;
|
|
169
|
-
let backgrounds = Object.values(colors2);
|
|
170
179
|
if (!isLight) {
|
|
171
180
|
const [_, h, sp, lp] = backgrounds[0].match(/hsl\(([0-9\.]+), ([0-9\.]+)\%, ([0-9\.]+)\%\)/);
|
|
172
181
|
backgrounds.unshift(`hsl(${h}, ${sp}%, ${parseFloat(lp) / 2}%)`);
|
|
173
182
|
}
|
|
174
183
|
const themeWithAlts = createThemesFrom(name, createTheme, {
|
|
184
|
+
colors: colors2,
|
|
175
185
|
backgrounds,
|
|
176
186
|
isLight,
|
|
177
187
|
shift,
|
|
@@ -189,8 +199,12 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) =>
|
|
|
189
199
|
return [
|
|
190
200
|
...altLightThemes,
|
|
191
201
|
[`${lightButtonTheme[0]}_Button`, altLightThemes[2][1]],
|
|
202
|
+
[`${lightButtonTheme[0]}_Card`, altLightThemes[2][1]],
|
|
203
|
+
[`${lightButtonTheme[0]}_Drawer`, altLightThemes[2][1]],
|
|
192
204
|
...altDarkThemes,
|
|
193
|
-
[`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]]
|
|
205
|
+
[`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]],
|
|
206
|
+
[`${darkButtonTheme[0]}_Card`, altDarkThemes[2][1]],
|
|
207
|
+
[`${darkButtonTheme[0]}_Drawer`, altDarkThemes[2][1]]
|
|
194
208
|
];
|
|
195
209
|
});
|
|
196
210
|
const transparent = {
|
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 { Variable, getVariableValue } from '@tamagui/core'\n\nimport { allDarkColors, allLightColors } from './colors'\nimport { setColorAlpha } from './colorUtils'\nimport { tokens } from './tokens'\n\ntype ThemeCreatorProps = {\n shift?: number\n backgrounds: (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: ThemeCreator = (\n str = 1,\n {\n backgrounds,\n isLight = true,\n // isBase = false,\n colors = [...backgrounds].reverse(),\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 return {\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: tokens.color.grayA1,\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 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 ? tokens.color.grayA3 : tokens.color.grayA8,\n shadowColorHover: darkColors[!isLight ? 1 : 8],\n shadowColorPress: darkColors[!isLight ? 1 : 8],\n shadowColorFocus: darkColors[!isLight ? 1 : 8],\n }\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 tokens.color.gray1,\n tokens.color.gray2,\n tokens.color.gray3,\n tokens.color.gray4,\n tokens.color.gray5,\n tokens.color.gray6,\n tokens.color.gray7,\n tokens.color.gray8,\n tokens.color.gray9,\n tokens.color.gray10,\n tokens.color.gray11,\n tokens.color.gray12,\n]\n\nexport const darkGradient = [\n '#0f0f0f',\n '#111111',\n '#141414',\n '#191919',\n '#242424',\n '#292929',\n '#323232',\n '#383838',\n '#424242',\n '#494949',\n '#545454',\n '#626262',\n]\n\nconst lightThemes = createThemesFrom('light', createTheme, {\n backgrounds: lightGradient,\n isLight: true,\n})\n\nconst darkThemes = createThemesFrom('dark', createTheme, {\n backgrounds: darkGradient,\n colors: lightGradient,\n isLight: false,\n shift: 1,\n offsets: {\n color: [0, 6, 7, 7, 7, 7],\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_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_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] = [colors, darkColors].map((colors, i) => {\n const isLight = i === 0\n const scheme = isLight ? 'light' : 'dark'\n const shift = isLight ? 0 : 1\n\n let backgrounds = Object.values(colors) as any[]\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 backgrounds,\n isLight,\n shift,\n isBase: false,\n offsets: {\n background: isLight ? [1, 1, 1, 0, 0, 0] : null,\n borderColor: isLight ? [0, 1, 1, 2, 2, -2] : null,\n color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1],\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 ...altDarkThemes,\n [`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]],\n ]\n})\n\nconst transparent = {\n background: 'transparent',\n backgroundSoft: 'transparent',\n backgroundHover: 'transparent',\n backgroundPress: 'transparent',\n backgroundFocus: 'transparent',\n backgroundTransparent: 'transparent',\n shadowColor: 'transparent',\n shadowColorHover: 'transparent',\n shadowColorPress: 'transparent',\n shadowColorFocus: 'transparent',\n}\n\ntype MyThemeBase = typeof baseThemes['light_alt1']\n\n// @ts-ignore\nconst dark_outline: MyThemeBase = {\n ...baseThemes.dark,\n borderColor: '#fff',\n ...transparent,\n}\n\n// @ts-ignore\nconst light_outline: MyThemeBase = {\n ...baseThemes.light,\n borderColor: '#000',\n ...transparent,\n}\n\nconst colorThemes: {\n [key in ColorThemeNames]: MyThemeBase\n} = Object.fromEntries(colorThemeEntries) as any\n\nconst allThemes = {\n ...baseThemes,\n ...colorThemes,\n dark_outline,\n light_outline,\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": ";;AAAA;AACA;AAEA;AACA;
|
|
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\ntype ThemeCreatorProps = {\n shift?: number\n backgrounds: (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 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 return {\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 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 // colorStronger: get(colors, str + strongerDir),\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 }\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 isLight: true,\n})\n\nconst darkThemes = createThemesFrom('dark', createTheme, {\n backgrounds: darkGradient,\n colors: lightGradient.slice(1),\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_Drawer: 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_Drawer: 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 ? 0 : 2),\n ] as const\n\n console.log('wut', i, name, backgrounds, colors)\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 isLight,\n shift,\n isBase: false,\n offsets: {\n background: isLight ? [1, 1, 1, 0, 0, 0] : null,\n borderColor: isLight ? [0, 1, 1, 2, 2, -2] : null,\n color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1],\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]}_Drawer`, altLightThemes[2][1]],\n ...altDarkThemes,\n [`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]],\n [`${darkButtonTheme[0]}_Card`, altDarkThemes[2][1]],\n [`${darkButtonTheme[0]}_Drawer`, altDarkThemes[2][1]],\n ]\n})\n\nconst transparent = {\n background: 'transparent',\n backgroundSoft: 'transparent',\n backgroundHover: 'transparent',\n backgroundPress: 'transparent',\n backgroundFocus: 'transparent',\n backgroundTransparent: 'transparent',\n shadowColor: 'transparent',\n shadowColorHover: 'transparent',\n shadowColorPress: 'transparent',\n shadowColorFocus: 'transparent',\n}\n\ntype MyThemeBase = typeof baseThemes['light_alt1']\n\n// @ts-ignore\nconst dark_outline: MyThemeBase = {\n ...baseThemes.dark,\n borderColor: '#fff',\n ...transparent,\n}\n\n// @ts-ignore\nconst light_outline: MyThemeBase = {\n ...baseThemes.light,\n borderColor: '#000',\n ...transparent,\n}\n\nconst colorThemes: {\n [key in ColorThemeNames]: MyThemeBase\n} = Object.fromEntries(colorThemeEntries) as any\n\nconst allThemes = {\n ...baseThemes,\n ...colorThemes,\n dark_outline,\n light_outline,\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
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/tokens.js
CHANGED
|
@@ -1,62 +1,46 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
1: 6,
|
|
10
|
-
2: 10,
|
|
11
|
-
3: 15,
|
|
12
|
-
4: 20,
|
|
13
|
-
5: 25,
|
|
14
|
-
6: 30,
|
|
15
|
-
7: 40,
|
|
16
|
-
8: 50,
|
|
17
|
-
9: 65,
|
|
18
|
-
10: 75,
|
|
19
|
-
11: 85,
|
|
20
|
-
12: 100
|
|
21
|
-
};
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import { allLightColors, darkColorsPostfixed } from "@tamagui/colors";
|
|
4
|
+
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"];
|
|
5
|
+
const getSizeAt = /* @__PURE__ */ __name((index) => index === 0 ? 0 : Math.round(Math.pow(1.6, index)) + Math.floor(3 * index), "getSizeAt");
|
|
6
|
+
const size = Object.fromEntries(sizeKeys.map((key) => {
|
|
7
|
+
return [key, getSizeAt(key === "true" ? 4 : +key)];
|
|
8
|
+
}));
|
|
22
9
|
const space = {
|
|
23
10
|
...size,
|
|
24
11
|
...Object.fromEntries(Object.entries(size).map(([k, v]) => [`-${k}`, -v]))
|
|
25
12
|
};
|
|
26
|
-
const
|
|
13
|
+
const zIndex = {
|
|
14
|
+
0: 0,
|
|
15
|
+
1: 100,
|
|
16
|
+
2: 200,
|
|
17
|
+
3: 300,
|
|
18
|
+
4: 400,
|
|
19
|
+
5: 500
|
|
20
|
+
};
|
|
21
|
+
const color = {
|
|
22
|
+
...allLightColors,
|
|
23
|
+
...darkColorsPostfixed
|
|
24
|
+
};
|
|
25
|
+
const radius = {
|
|
26
|
+
0: 0,
|
|
27
|
+
1: 3,
|
|
28
|
+
2: 5,
|
|
29
|
+
3: 7,
|
|
30
|
+
4: 9,
|
|
31
|
+
5: 10,
|
|
32
|
+
6: 12,
|
|
33
|
+
7: 16,
|
|
34
|
+
8: 20,
|
|
35
|
+
9: 30
|
|
36
|
+
};
|
|
37
|
+
export {
|
|
38
|
+
color,
|
|
39
|
+
getSizeAt,
|
|
40
|
+
radius,
|
|
27
41
|
size,
|
|
42
|
+
sizeKeys,
|
|
28
43
|
space,
|
|
29
|
-
|
|
30
|
-
title: interFont,
|
|
31
|
-
body: interFont,
|
|
32
|
-
mono: firaFont
|
|
33
|
-
},
|
|
34
|
-
zIndex: {
|
|
35
|
-
0: 0,
|
|
36
|
-
1: 100,
|
|
37
|
-
2: 200,
|
|
38
|
-
3: 300,
|
|
39
|
-
4: 400,
|
|
40
|
-
5: 500
|
|
41
|
-
},
|
|
42
|
-
color: {
|
|
43
|
-
...allLightColors,
|
|
44
|
-
...darkColorsPostfixed
|
|
45
|
-
},
|
|
46
|
-
radius: {
|
|
47
|
-
0: 0,
|
|
48
|
-
1: 3,
|
|
49
|
-
2: 5,
|
|
50
|
-
3: 7,
|
|
51
|
-
4: 9,
|
|
52
|
-
5: 10,
|
|
53
|
-
6: 12,
|
|
54
|
-
7: 16,
|
|
55
|
-
8: 20,
|
|
56
|
-
9: 30
|
|
57
|
-
}
|
|
58
|
-
});
|
|
59
|
-
export {
|
|
60
|
-
tokens
|
|
44
|
+
zIndex
|
|
61
45
|
};
|
|
62
46
|
//# 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": "AAAA;
|
|
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;AAIO,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;AAAA,KACC;AAAA,KACA,OAAO,YAAY,OAAO,QAAQ,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;AAC3E;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,QAAQ;AAAA,KAChB;AAAA,KACA;AACL;AAEO,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
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/firaFont.js
CHANGED
|
@@ -1,23 +1,26 @@
|
|
|
1
1
|
import { createFont } from "@tamagui/core";
|
|
2
|
+
const size = {
|
|
3
|
+
1: 10,
|
|
4
|
+
2: 11,
|
|
5
|
+
3: 12,
|
|
6
|
+
4: 13,
|
|
7
|
+
5: 14,
|
|
8
|
+
6: 16,
|
|
9
|
+
7: 20,
|
|
10
|
+
8: 22,
|
|
11
|
+
9: 30,
|
|
12
|
+
10: 42,
|
|
13
|
+
11: 52,
|
|
14
|
+
12: 62,
|
|
15
|
+
13: 72,
|
|
16
|
+
14: 92,
|
|
17
|
+
15: 114,
|
|
18
|
+
16: 124
|
|
19
|
+
};
|
|
2
20
|
const firaFont = createFont({
|
|
3
21
|
family: "Fira Code, Monaco, Consolas, Ubuntu Mono, monospace",
|
|
4
|
-
size
|
|
5
|
-
|
|
6
|
-
2: 11,
|
|
7
|
-
3: 12,
|
|
8
|
-
4: 13,
|
|
9
|
-
5: 15,
|
|
10
|
-
6: 16,
|
|
11
|
-
7: 17
|
|
12
|
-
},
|
|
13
|
-
lineHeight: {
|
|
14
|
-
1: 15,
|
|
15
|
-
2: 18,
|
|
16
|
-
3: 19,
|
|
17
|
-
4: 20,
|
|
18
|
-
5: 22,
|
|
19
|
-
6: 24
|
|
20
|
-
},
|
|
22
|
+
size,
|
|
23
|
+
lineHeight: Object.fromEntries(Object.entries(size).map(([k, v]) => [k, v * 1.75])),
|
|
21
24
|
weight: {
|
|
22
25
|
4: "300",
|
|
23
26
|
6: "700"
|
package/dist/jsx/index.js
CHANGED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { createFont } from "@tamagui/core";
|
|
2
|
+
const size = {
|
|
3
|
+
1: 10,
|
|
4
|
+
2: 11,
|
|
5
|
+
3: 12,
|
|
6
|
+
4: 13,
|
|
7
|
+
5: 14,
|
|
8
|
+
6: 16,
|
|
9
|
+
7: 20,
|
|
10
|
+
8: 22,
|
|
11
|
+
9: 30,
|
|
12
|
+
10: 42,
|
|
13
|
+
11: 52,
|
|
14
|
+
12: 62,
|
|
15
|
+
13: 72,
|
|
16
|
+
14: 92,
|
|
17
|
+
15: 114,
|
|
18
|
+
16: 124
|
|
19
|
+
};
|
|
20
|
+
const silkscreenFont = createFont({
|
|
21
|
+
family: "Silkscreen, Fira Code, Monaco, Consolas, Ubuntu Mono, monospace",
|
|
22
|
+
size,
|
|
23
|
+
lineHeight: Object.fromEntries(Object.entries(size).map(([k, v]) => [k, v * 1.75])),
|
|
24
|
+
weight: {
|
|
25
|
+
4: "300"
|
|
26
|
+
},
|
|
27
|
+
letterSpacing: {
|
|
28
|
+
4: 1,
|
|
29
|
+
6: 3
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
export {
|
|
33
|
+
silkscreenFont
|
|
34
|
+
};
|
package/dist/jsx/themes.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
3
|
import * as Colors from "@tamagui/colors";
|
|
4
|
+
import { allDarkColors, allLightColors } from "@tamagui/colors";
|
|
4
5
|
import { getVariableValue } from "@tamagui/core";
|
|
5
|
-
import { allDarkColors, allLightColors } from "./colors";
|
|
6
6
|
import { setColorAlpha } from "./colorUtils";
|
|
7
|
-
import {
|
|
7
|
+
import { color } from "./tokens";
|
|
8
8
|
const alternates = [1, 2, 3, 4];
|
|
9
9
|
function createThemesFrom(name, getTheme, props) {
|
|
10
10
|
const { shift = 0 } = props;
|
|
@@ -59,7 +59,7 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
|
|
|
59
59
|
backgroundHover: get(backgrounds, str + lighterDir),
|
|
60
60
|
backgroundPress: get(backgrounds, str + darkerDir * 1),
|
|
61
61
|
backgroundFocus: get(backgrounds, str + darkerDir * 2),
|
|
62
|
-
backgroundTransparent:
|
|
62
|
+
backgroundTransparent: color.grayA1,
|
|
63
63
|
borderColor: isLight ? get(colors, 8 - str, "borderColor") : get(backgrounds, 2 + str, "borderColor"),
|
|
64
64
|
borderColorHover: isLight ? get(colors, 6 - str, "borderColor") : get(backgrounds, 3 + str, "borderColor"),
|
|
65
65
|
borderColorPress: isLight ? get(colors, 5 - str, "borderColor") : get(backgrounds, 1 + str, "borderColor"),
|
|
@@ -70,7 +70,7 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
|
|
|
70
70
|
colorFocus: get(colors, 3 + str, "color"),
|
|
71
71
|
colorTranslucent,
|
|
72
72
|
colorMid: colors[Math.floor(colors.length / 2)],
|
|
73
|
-
shadowColor: isLight ?
|
|
73
|
+
shadowColor: isLight ? color.grayA3 : color.grayA8,
|
|
74
74
|
shadowColorHover: darkColors[!isLight ? 1 : 8],
|
|
75
75
|
shadowColorPress: darkColors[!isLight ? 1 : 8],
|
|
76
76
|
shadowColorFocus: darkColors[!isLight ? 1 : 8]
|
|
@@ -94,32 +94,32 @@ const colorSchemes = [
|
|
|
94
94
|
const lightGradient = [
|
|
95
95
|
"#fff",
|
|
96
96
|
"#f4f4f4",
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
97
|
+
color.gray1,
|
|
98
|
+
color.gray2,
|
|
99
|
+
color.gray3,
|
|
100
|
+
color.gray4,
|
|
101
|
+
color.gray5,
|
|
102
|
+
color.gray6,
|
|
103
|
+
color.gray7,
|
|
104
|
+
color.gray8,
|
|
105
|
+
color.gray9,
|
|
106
|
+
color.gray10,
|
|
107
|
+
color.gray11,
|
|
108
|
+
color.gray12
|
|
109
109
|
];
|
|
110
110
|
const darkGradient = [
|
|
111
|
-
"#0f0f0f",
|
|
112
111
|
"#111111",
|
|
113
|
-
"#
|
|
112
|
+
"#151515",
|
|
114
113
|
"#191919",
|
|
115
|
-
"#
|
|
116
|
-
"#
|
|
114
|
+
"#232323",
|
|
115
|
+
"#282828",
|
|
117
116
|
"#323232",
|
|
118
117
|
"#383838",
|
|
119
118
|
"#424242",
|
|
120
119
|
"#494949",
|
|
121
120
|
"#545454",
|
|
122
|
-
"#626262"
|
|
121
|
+
"#626262",
|
|
122
|
+
"#777777"
|
|
123
123
|
];
|
|
124
124
|
const lightThemes = createThemesFrom("light", createTheme, {
|
|
125
125
|
backgrounds: lightGradient,
|
|
@@ -127,11 +127,11 @@ const lightThemes = createThemesFrom("light", createTheme, {
|
|
|
127
127
|
});
|
|
128
128
|
const darkThemes = createThemesFrom("dark", createTheme, {
|
|
129
129
|
backgrounds: darkGradient,
|
|
130
|
-
colors: lightGradient,
|
|
130
|
+
colors: lightGradient.slice(1),
|
|
131
131
|
isLight: false,
|
|
132
132
|
shift: 1,
|
|
133
133
|
offsets: {
|
|
134
|
-
color: [0,
|
|
134
|
+
color: [0, 4, 5, 5, 5, 5]
|
|
135
135
|
}
|
|
136
136
|
});
|
|
137
137
|
const baseThemes = {
|
|
@@ -142,6 +142,7 @@ const baseThemes = {
|
|
|
142
142
|
},
|
|
143
143
|
light_active: makeActiveTheme(lightThemes.light),
|
|
144
144
|
light_Card: lightThemes.light,
|
|
145
|
+
light_Drawer: lightThemes.light_alt1,
|
|
145
146
|
light_Button: lightThemes.light_alt1,
|
|
146
147
|
...darkThemes,
|
|
147
148
|
dark: {
|
|
@@ -150,6 +151,7 @@ const baseThemes = {
|
|
|
150
151
|
},
|
|
151
152
|
dark_active: makeActiveTheme(darkThemes.dark),
|
|
152
153
|
dark_Card: darkThemes.dark_alt1,
|
|
154
|
+
dark_Drawer: darkThemes.dark_alt2,
|
|
153
155
|
dark_Button: darkThemes.dark_alt1
|
|
154
156
|
};
|
|
155
157
|
function makeActiveTheme(theme) {
|
|
@@ -162,16 +164,24 @@ function makeActiveTheme(theme) {
|
|
|
162
164
|
}
|
|
163
165
|
__name(makeActiveTheme, "makeActiveTheme");
|
|
164
166
|
const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) => {
|
|
165
|
-
const [altLightThemes, altDarkThemes] = [
|
|
167
|
+
const [altLightThemes, altDarkThemes] = [
|
|
168
|
+
{ colors: darkColors, backgrounds: colors },
|
|
169
|
+
{ colors, backgrounds: darkColors }
|
|
170
|
+
].map((props, i) => {
|
|
166
171
|
const isLight = i === 0;
|
|
172
|
+
const [backgrounds, colors2] = [
|
|
173
|
+
Object.values(props.backgrounds),
|
|
174
|
+
Object.values(props.colors).slice(isLight ? 0 : 2)
|
|
175
|
+
];
|
|
176
|
+
console.log("wut", i, name, backgrounds, colors2);
|
|
167
177
|
const scheme = isLight ? "light" : "dark";
|
|
168
178
|
const shift = isLight ? 0 : 1;
|
|
169
|
-
let backgrounds = Object.values(colors2);
|
|
170
179
|
if (!isLight) {
|
|
171
180
|
const [_, h, sp, lp] = backgrounds[0].match(/hsl\(([0-9\.]+), ([0-9\.]+)\%, ([0-9\.]+)\%\)/);
|
|
172
181
|
backgrounds.unshift(`hsl(${h}, ${sp}%, ${parseFloat(lp) / 2}%)`);
|
|
173
182
|
}
|
|
174
183
|
const themeWithAlts = createThemesFrom(name, createTheme, {
|
|
184
|
+
colors: colors2,
|
|
175
185
|
backgrounds,
|
|
176
186
|
isLight,
|
|
177
187
|
shift,
|
|
@@ -189,8 +199,12 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) =>
|
|
|
189
199
|
return [
|
|
190
200
|
...altLightThemes,
|
|
191
201
|
[`${lightButtonTheme[0]}_Button`, altLightThemes[2][1]],
|
|
202
|
+
[`${lightButtonTheme[0]}_Card`, altLightThemes[2][1]],
|
|
203
|
+
[`${lightButtonTheme[0]}_Drawer`, altLightThemes[2][1]],
|
|
192
204
|
...altDarkThemes,
|
|
193
|
-
[`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]]
|
|
205
|
+
[`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]],
|
|
206
|
+
[`${darkButtonTheme[0]}_Card`, altDarkThemes[2][1]],
|
|
207
|
+
[`${darkButtonTheme[0]}_Drawer`, altDarkThemes[2][1]]
|
|
194
208
|
];
|
|
195
209
|
});
|
|
196
210
|
const transparent = {
|