@tamagui/theme-builder 1.79.9 → 1.79.10
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/buildThemeSuite.js +21 -2
- package/dist/cjs/buildThemeSuite.js.map +1 -1
- package/dist/cjs/buildThemeSuite.native.js +21 -2
- package/dist/cjs/buildThemeSuite.native.js.map +1 -1
- package/dist/cjs/buildThemeSuitePalettes.js +46 -11
- package/dist/cjs/buildThemeSuitePalettes.js.map +2 -2
- package/dist/cjs/buildThemeSuitePalettes.native.js +46 -11
- package/dist/cjs/buildThemeSuitePalettes.native.js.map +2 -2
- package/dist/cjs/buildThemeSuiteScales.js +35 -60
- package/dist/cjs/buildThemeSuiteScales.js.map +1 -1
- package/dist/cjs/buildThemeSuiteScales.native.js +35 -61
- package/dist/cjs/buildThemeSuiteScales.native.js.map +2 -2
- package/dist/esm/buildThemeSuite.js +21 -2
- package/dist/esm/buildThemeSuite.js.map +1 -1
- package/dist/esm/buildThemeSuite.native.js +21 -2
- package/dist/esm/buildThemeSuite.native.js.map +1 -1
- package/dist/esm/buildThemeSuitePalettes.js +46 -12
- package/dist/esm/buildThemeSuitePalettes.js.map +2 -2
- package/dist/esm/buildThemeSuitePalettes.native.js +46 -12
- package/dist/esm/buildThemeSuitePalettes.native.js.map +2 -2
- package/dist/esm/buildThemeSuiteScales.js +34 -58
- package/dist/esm/buildThemeSuiteScales.js.map +1 -1
- package/dist/esm/buildThemeSuiteScales.native.js +34 -59
- package/dist/esm/buildThemeSuiteScales.native.js.map +2 -2
- package/package.json +3 -3
- package/src/buildThemeSuite.ts +25 -3
- package/src/buildThemeSuitePalettes.ts +74 -34
- package/src/buildThemeSuiteScales.ts +78 -76
- package/src/types.ts +30 -6
- package/types/buildThemeSuite.d.ts.map +1 -1
- package/types/buildThemeSuitePalettes.d.ts.map +1 -1
- package/types/buildThemeSuiteScales.d.ts +129 -10
- package/types/buildThemeSuiteScales.d.ts.map +1 -1
- package/types/types.d.ts +22 -6
- package/types/types.d.ts.map +1 -1
|
@@ -1,54 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
const [h, s, l] = parseToHsla(color), isColorLight = l > 0.5, oppositeLightness = l > 0.5 ? 1 - l : 0.5 + l, oppositeLightnessColor = toHex(hsla(h, s, oppositeLightness, 1)), foreground = isDarkMode ? color : oppositeLightnessColor;
|
|
4
|
-
return {
|
|
5
|
-
foreground,
|
|
6
|
-
foregroundLightness: foreground === color ? l : oppositeLightness,
|
|
7
|
-
background: foreground === color ? oppositeLightnessColor : color,
|
|
8
|
-
backgroundLightness: foreground !== color ? l : oppositeLightness
|
|
9
|
-
};
|
|
1
|
+
function getScalePreset(a) {
|
|
2
|
+
return scaleTypes[a];
|
|
10
3
|
}
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
if (!baseColor)
|
|
15
|
-
return base;
|
|
16
|
-
const [h, s, l] = parseToHsla(baseColor);
|
|
17
|
-
if (scale === "automatic") {
|
|
18
|
-
let getScale = function(bgL, fgL) {
|
|
19
|
-
const stepSize = (fgL - bgL) / scaleLen;
|
|
20
|
-
return arr.map((_, i) => bgL + i * stepSize);
|
|
21
|
-
};
|
|
22
|
-
const lightColors = getColorForegroundBackground(baseColor, !1), darkColors = getColorForegroundBackground(baseColor, !0), scaleLen = 12, arr = new Array(scaleLen).fill(0);
|
|
23
|
-
return {
|
|
24
|
-
...base,
|
|
25
|
-
lumScale: {
|
|
26
|
-
light: getScale(lightColors.backgroundLightness, lightColors.foregroundLightness),
|
|
27
|
-
dark: getScale(darkColors.backgroundLightness, darkColors.foregroundLightness)
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
|
-
return {
|
|
32
|
-
...base,
|
|
33
|
-
lumScale: {
|
|
34
|
-
light: adjustScale(theme, base.lumScale.light, l, !0),
|
|
35
|
-
dark: adjustScale(theme, base.lumScale.dark, 1 - l)
|
|
36
|
-
},
|
|
37
|
-
...base.satScale && {
|
|
38
|
-
satScale: {
|
|
39
|
-
light: adjustScale(theme, base.satScale.light, s, !0),
|
|
40
|
-
dark: adjustScale(theme, base.satScale.dark, s)
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
};
|
|
4
|
+
const fullSatScale = {
|
|
5
|
+
light: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
6
|
+
dark: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
|
|
44
7
|
}, scaleTypes = {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
lumScale: {
|
|
49
|
-
light: [],
|
|
50
|
-
dark: []
|
|
51
|
-
}
|
|
8
|
+
custom: {
|
|
9
|
+
name: "Custom",
|
|
10
|
+
createdFrom: "custom"
|
|
52
11
|
},
|
|
53
12
|
radix: {
|
|
54
13
|
name: "Radius",
|
|
@@ -120,6 +79,10 @@ const getThemeSuiteScale = (theme, accent) => {
|
|
|
120
79
|
0.56,
|
|
121
80
|
0.61
|
|
122
81
|
]
|
|
82
|
+
},
|
|
83
|
+
satScale: {
|
|
84
|
+
light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
|
|
85
|
+
dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2]
|
|
123
86
|
}
|
|
124
87
|
},
|
|
125
88
|
"radius-bright": {
|
|
@@ -128,6 +91,10 @@ const getThemeSuiteScale = (theme, accent) => {
|
|
|
128
91
|
lumScale: {
|
|
129
92
|
light: [1, 0.954, 0.94, 0.9, 0.85, 0.804, 0.747, 0.659, 0.541, 0.453, 0.27, 0.086],
|
|
130
93
|
dark: [0, 0.1, 0.16, 0.2, 0.24, 0.36, 0.42, 0.46, 0.5, 0.54, 0.84, 0.97]
|
|
94
|
+
},
|
|
95
|
+
satScale: {
|
|
96
|
+
light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
|
|
97
|
+
dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2]
|
|
131
98
|
}
|
|
132
99
|
},
|
|
133
100
|
"radius-bold": {
|
|
@@ -136,6 +103,10 @@ const getThemeSuiteScale = (theme, accent) => {
|
|
|
136
103
|
lumScale: {
|
|
137
104
|
light: [1, 0.9, 0.885, 0.82, 0.77, 0.54, 0.32, 0.25, 0.16, 0.12, 0.075, 0],
|
|
138
105
|
dark: [0, 0.13, 0.2, 0.24, 0.3, 0.34, 0.45, 0.55, 0.65, 0.885, 0.9, 1]
|
|
106
|
+
},
|
|
107
|
+
satScale: {
|
|
108
|
+
light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
|
|
109
|
+
dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2]
|
|
139
110
|
}
|
|
140
111
|
},
|
|
141
112
|
linear: {
|
|
@@ -144,6 +115,10 @@ const getThemeSuiteScale = (theme, accent) => {
|
|
|
144
115
|
lumScale: {
|
|
145
116
|
light: [1, 0.925, 0.9, 0.85, 0.75, 0.6, 0.4, 0.3, 0.25, 0.15, 0.125, 0],
|
|
146
117
|
dark: [0, 0.075, 0.125, 0.15, 0.25, 0.4, 0.6, 0.75, 0.85, 0.9, 0.925, 1]
|
|
118
|
+
},
|
|
119
|
+
satScale: {
|
|
120
|
+
light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
|
|
121
|
+
dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2]
|
|
147
122
|
}
|
|
148
123
|
},
|
|
149
124
|
neon: {
|
|
@@ -178,6 +153,10 @@ const getThemeSuiteScale = (theme, accent) => {
|
|
|
178
153
|
0.61,
|
|
179
154
|
0.93
|
|
180
155
|
]
|
|
156
|
+
},
|
|
157
|
+
satScale: {
|
|
158
|
+
light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
|
|
159
|
+
dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2]
|
|
181
160
|
}
|
|
182
161
|
},
|
|
183
162
|
"neon-bright": {
|
|
@@ -186,6 +165,10 @@ const getThemeSuiteScale = (theme, accent) => {
|
|
|
186
165
|
lumScale: {
|
|
187
166
|
light: [0.45, 0.475, 0.5, 0.525, 0.55, 0.575, 0.6, 0.625, 0.65, 0.2, 0.1, 0],
|
|
188
167
|
dark: [0.45, 0.475, 0.5, 0.525, 0.55, 0.575, 0.6, 0.625, 0.65, 0.2, 0.1, 0]
|
|
168
|
+
},
|
|
169
|
+
satScale: {
|
|
170
|
+
light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
|
|
171
|
+
dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2]
|
|
189
172
|
}
|
|
190
173
|
},
|
|
191
174
|
"neon-c": {
|
|
@@ -195,10 +178,7 @@ const getThemeSuiteScale = (theme, accent) => {
|
|
|
195
178
|
light: [0.45, 0.475, 0.5, 0.525, 0.55, 0.575, 0.6, 0.625, 0.65, 0.2, 0.1, 0],
|
|
196
179
|
dark: [0.45, 0.475, 0.5, 0.525, 0.55, 0.575, 0.6, 0.625, 0.65, 0.2, 0.1, 0]
|
|
197
180
|
},
|
|
198
|
-
satScale:
|
|
199
|
-
light: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
200
|
-
dark: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
|
|
201
|
-
}
|
|
181
|
+
satScale: fullSatScale
|
|
202
182
|
},
|
|
203
183
|
pastel: {
|
|
204
184
|
name: "Pastel",
|
|
@@ -250,13 +230,9 @@ const getThemeSuiteScale = (theme, accent) => {
|
|
|
250
230
|
dark: [0.6, 0.5, 0.4, 0.35, 0.3, 0.3, 0.3, 0.3, 0.4, 0.35, 0.25, 0.15]
|
|
251
231
|
}
|
|
252
232
|
}
|
|
253
|
-
}, adjustScale = (theme, scale, userVal, isLight = !1) => {
|
|
254
|
-
const scaleMin = scale.reduce((acc, cur) => Math.min(cur, acc), 1 / 0), scaleMax = scale.reduce((acc, cur) => Math.max(cur, acc), 0);
|
|
255
|
-
return scaleMin === scaleMax ? scale.map(() => userVal) : scale.map((val, i) => userVal > 0.5 ? val + (userVal - 0.5) * (1 - val) : val * (1 / (1.5 - userVal)));
|
|
256
233
|
};
|
|
257
234
|
export {
|
|
258
|
-
|
|
259
|
-
getThemeSuiteScale,
|
|
235
|
+
getScalePreset,
|
|
260
236
|
scaleTypes
|
|
261
237
|
};
|
|
262
238
|
//# sourceMappingURL=buildThemeSuiteScales.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/buildThemeSuiteScales.ts"],
|
|
4
|
-
"mappings": "
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -1,55 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
const [h, s, l] = parseToHsla(color), isColorLight = l > 0.5, oppositeLightness = l > 0.5 ? 1 - l : 0.5 + l, oppositeLightnessColor = toHex(hsla(h, s, oppositeLightness, 1)), foreground = isDarkMode ? color : oppositeLightnessColor;
|
|
4
|
-
return {
|
|
5
|
-
foreground,
|
|
6
|
-
foregroundLightness: foreground === color ? l : oppositeLightness,
|
|
7
|
-
background: foreground === color ? oppositeLightnessColor : color,
|
|
8
|
-
backgroundLightness: foreground !== color ? l : oppositeLightness
|
|
9
|
-
};
|
|
1
|
+
function getScalePreset(a) {
|
|
2
|
+
return scaleTypes[a];
|
|
10
3
|
}
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
if (!baseColor)
|
|
15
|
-
return base;
|
|
16
|
-
const [h, s, l] = parseToHsla(baseColor);
|
|
17
|
-
if (scale === "automatic") {
|
|
18
|
-
let getScale2 = function(bgL, fgL) {
|
|
19
|
-
const stepSize = (fgL - bgL) / scaleLen;
|
|
20
|
-
return arr.map((_, i) => bgL + i * stepSize);
|
|
21
|
-
};
|
|
22
|
-
var getScale = getScale2;
|
|
23
|
-
const lightColors = getColorForegroundBackground(baseColor, !1), darkColors = getColorForegroundBackground(baseColor, !0), scaleLen = 12, arr = new Array(scaleLen).fill(0);
|
|
24
|
-
return {
|
|
25
|
-
...base,
|
|
26
|
-
lumScale: {
|
|
27
|
-
light: getScale2(lightColors.backgroundLightness, lightColors.foregroundLightness),
|
|
28
|
-
dark: getScale2(darkColors.backgroundLightness, darkColors.foregroundLightness)
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
return {
|
|
33
|
-
...base,
|
|
34
|
-
lumScale: {
|
|
35
|
-
light: adjustScale(theme, base.lumScale.light, l, !0),
|
|
36
|
-
dark: adjustScale(theme, base.lumScale.dark, 1 - l)
|
|
37
|
-
},
|
|
38
|
-
...base.satScale && {
|
|
39
|
-
satScale: {
|
|
40
|
-
light: adjustScale(theme, base.satScale.light, s, !0),
|
|
41
|
-
dark: adjustScale(theme, base.satScale.dark, s)
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
};
|
|
4
|
+
const fullSatScale = {
|
|
5
|
+
light: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
6
|
+
dark: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
|
|
45
7
|
}, scaleTypes = {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
lumScale: {
|
|
50
|
-
light: [],
|
|
51
|
-
dark: []
|
|
52
|
-
}
|
|
8
|
+
custom: {
|
|
9
|
+
name: "Custom",
|
|
10
|
+
createdFrom: "custom"
|
|
53
11
|
},
|
|
54
12
|
radix: {
|
|
55
13
|
name: "Radius",
|
|
@@ -121,6 +79,10 @@ const getThemeSuiteScale = (theme, accent) => {
|
|
|
121
79
|
0.56,
|
|
122
80
|
0.61
|
|
123
81
|
]
|
|
82
|
+
},
|
|
83
|
+
satScale: {
|
|
84
|
+
light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
|
|
85
|
+
dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2]
|
|
124
86
|
}
|
|
125
87
|
},
|
|
126
88
|
"radius-bright": {
|
|
@@ -129,6 +91,10 @@ const getThemeSuiteScale = (theme, accent) => {
|
|
|
129
91
|
lumScale: {
|
|
130
92
|
light: [1, 0.954, 0.94, 0.9, 0.85, 0.804, 0.747, 0.659, 0.541, 0.453, 0.27, 0.086],
|
|
131
93
|
dark: [0, 0.1, 0.16, 0.2, 0.24, 0.36, 0.42, 0.46, 0.5, 0.54, 0.84, 0.97]
|
|
94
|
+
},
|
|
95
|
+
satScale: {
|
|
96
|
+
light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
|
|
97
|
+
dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2]
|
|
132
98
|
}
|
|
133
99
|
},
|
|
134
100
|
"radius-bold": {
|
|
@@ -137,6 +103,10 @@ const getThemeSuiteScale = (theme, accent) => {
|
|
|
137
103
|
lumScale: {
|
|
138
104
|
light: [1, 0.9, 0.885, 0.82, 0.77, 0.54, 0.32, 0.25, 0.16, 0.12, 0.075, 0],
|
|
139
105
|
dark: [0, 0.13, 0.2, 0.24, 0.3, 0.34, 0.45, 0.55, 0.65, 0.885, 0.9, 1]
|
|
106
|
+
},
|
|
107
|
+
satScale: {
|
|
108
|
+
light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
|
|
109
|
+
dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2]
|
|
140
110
|
}
|
|
141
111
|
},
|
|
142
112
|
linear: {
|
|
@@ -145,6 +115,10 @@ const getThemeSuiteScale = (theme, accent) => {
|
|
|
145
115
|
lumScale: {
|
|
146
116
|
light: [1, 0.925, 0.9, 0.85, 0.75, 0.6, 0.4, 0.3, 0.25, 0.15, 0.125, 0],
|
|
147
117
|
dark: [0, 0.075, 0.125, 0.15, 0.25, 0.4, 0.6, 0.75, 0.85, 0.9, 0.925, 1]
|
|
118
|
+
},
|
|
119
|
+
satScale: {
|
|
120
|
+
light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
|
|
121
|
+
dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2]
|
|
148
122
|
}
|
|
149
123
|
},
|
|
150
124
|
neon: {
|
|
@@ -179,6 +153,10 @@ const getThemeSuiteScale = (theme, accent) => {
|
|
|
179
153
|
0.61,
|
|
180
154
|
0.93
|
|
181
155
|
]
|
|
156
|
+
},
|
|
157
|
+
satScale: {
|
|
158
|
+
light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
|
|
159
|
+
dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2]
|
|
182
160
|
}
|
|
183
161
|
},
|
|
184
162
|
"neon-bright": {
|
|
@@ -187,6 +165,10 @@ const getThemeSuiteScale = (theme, accent) => {
|
|
|
187
165
|
lumScale: {
|
|
188
166
|
light: [0.45, 0.475, 0.5, 0.525, 0.55, 0.575, 0.6, 0.625, 0.65, 0.2, 0.1, 0],
|
|
189
167
|
dark: [0.45, 0.475, 0.5, 0.525, 0.55, 0.575, 0.6, 0.625, 0.65, 0.2, 0.1, 0]
|
|
168
|
+
},
|
|
169
|
+
satScale: {
|
|
170
|
+
light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
|
|
171
|
+
dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2]
|
|
190
172
|
}
|
|
191
173
|
},
|
|
192
174
|
"neon-c": {
|
|
@@ -196,10 +178,7 @@ const getThemeSuiteScale = (theme, accent) => {
|
|
|
196
178
|
light: [0.45, 0.475, 0.5, 0.525, 0.55, 0.575, 0.6, 0.625, 0.65, 0.2, 0.1, 0],
|
|
197
179
|
dark: [0.45, 0.475, 0.5, 0.525, 0.55, 0.575, 0.6, 0.625, 0.65, 0.2, 0.1, 0]
|
|
198
180
|
},
|
|
199
|
-
satScale:
|
|
200
|
-
light: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
201
|
-
dark: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
|
|
202
|
-
}
|
|
181
|
+
satScale: fullSatScale
|
|
203
182
|
},
|
|
204
183
|
pastel: {
|
|
205
184
|
name: "Pastel",
|
|
@@ -251,13 +230,9 @@ const getThemeSuiteScale = (theme, accent) => {
|
|
|
251
230
|
dark: [0.6, 0.5, 0.4, 0.35, 0.3, 0.3, 0.3, 0.3, 0.4, 0.35, 0.25, 0.15]
|
|
252
231
|
}
|
|
253
232
|
}
|
|
254
|
-
}, adjustScale = (theme, scale, userVal, isLight = !1) => {
|
|
255
|
-
const scaleMin = scale.reduce((acc, cur) => Math.min(cur, acc), 1 / 0), scaleMax = scale.reduce((acc, cur) => Math.max(cur, acc), 0);
|
|
256
|
-
return scaleMin === scaleMax ? scale.map(() => userVal) : scale.map((val, i) => userVal > 0.5 ? val + (userVal - 0.5) * (1 - val) : val * (1 / (1.5 - userVal)));
|
|
257
233
|
};
|
|
258
234
|
export {
|
|
259
|
-
|
|
260
|
-
getThemeSuiteScale,
|
|
235
|
+
getScalePreset,
|
|
261
236
|
scaleTypes
|
|
262
237
|
};
|
|
263
238
|
//# sourceMappingURL=buildThemeSuiteScales.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/buildThemeSuiteScales.ts"],
|
|
4
|
-
"mappings": "
|
|
5
|
-
"names": [
|
|
4
|
+
"mappings": "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",
|
|
5
|
+
"names": []
|
|
6
6
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/theme-builder",
|
|
3
|
-
"version": "1.79.
|
|
3
|
+
"version": "1.79.10",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"types": "./types/index.d.ts",
|
|
6
6
|
"main": "dist/cjs",
|
|
@@ -27,11 +27,11 @@
|
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@tamagui/create-theme": "1.79.
|
|
30
|
+
"@tamagui/create-theme": "1.79.10",
|
|
31
31
|
"color2k": "^2.0.2"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@tamagui/build": "1.79.
|
|
34
|
+
"@tamagui/build": "1.79.10"
|
|
35
35
|
},
|
|
36
36
|
"publishConfig": {
|
|
37
37
|
"access": "public"
|
package/src/buildThemeSuite.ts
CHANGED
|
@@ -11,6 +11,21 @@ import { getThemeSuitePalettes } from './buildThemeSuitePalettes'
|
|
|
11
11
|
import { createThemeBuilder } from './ThemeBuilder'
|
|
12
12
|
import { BuildThemeMask, BuildThemeSuiteProps } from './types'
|
|
13
13
|
|
|
14
|
+
// its offset by some transparent values etc
|
|
15
|
+
const basePaletteOffset = 5
|
|
16
|
+
const namedTemplateSlots = {
|
|
17
|
+
background: basePaletteOffset,
|
|
18
|
+
subtleBackground: basePaletteOffset + 1,
|
|
19
|
+
uiBackground: basePaletteOffset + 2,
|
|
20
|
+
hoverUIBackround: basePaletteOffset + 3,
|
|
21
|
+
activeUIBackround: basePaletteOffset + 4,
|
|
22
|
+
subtleBorder: basePaletteOffset + 5,
|
|
23
|
+
strongBorder: basePaletteOffset + 6,
|
|
24
|
+
hoverBorder: basePaletteOffset + 7,
|
|
25
|
+
strongBackground: basePaletteOffset + 8,
|
|
26
|
+
hoverStrongBackground: basePaletteOffset + 9,
|
|
27
|
+
}
|
|
28
|
+
|
|
14
29
|
export function buildThemeSuite({ baseTheme, subThemes }: BuildThemeSuiteProps) {
|
|
15
30
|
const theme = baseTheme
|
|
16
31
|
|
|
@@ -25,7 +40,7 @@ export function buildThemeSuite({ baseTheme, subThemes }: BuildThemeSuiteProps)
|
|
|
25
40
|
)
|
|
26
41
|
|
|
27
42
|
// base palletes need to add in sub theme palettes if customized
|
|
28
|
-
const palettes = getThemeSuitePalettes(theme
|
|
43
|
+
const palettes = getThemeSuitePalettes(theme)
|
|
29
44
|
|
|
30
45
|
const max = palettes.dark.length - 1
|
|
31
46
|
const min = 1
|
|
@@ -149,6 +164,13 @@ export function buildThemeSuite({ baseTheme, subThemes }: BuildThemeSuiteProps)
|
|
|
149
164
|
|
|
150
165
|
return {
|
|
151
166
|
base: template,
|
|
167
|
+
active: {
|
|
168
|
+
...template,
|
|
169
|
+
background: namedTemplateSlots.strongBackground,
|
|
170
|
+
backgroundHover: namedTemplateSlots.hoverStrongBackground,
|
|
171
|
+
backgroundPress: namedTemplateSlots.hoverBorder,
|
|
172
|
+
backgroundFocus: namedTemplateSlots.strongBackground,
|
|
173
|
+
},
|
|
152
174
|
accentLight: template,
|
|
153
175
|
accentDark: template,
|
|
154
176
|
}
|
|
@@ -180,13 +202,13 @@ export function buildThemeSuite({ baseTheme, subThemes }: BuildThemeSuiteProps)
|
|
|
180
202
|
const componentTheme = [
|
|
181
203
|
{
|
|
182
204
|
parent: 'light_accent',
|
|
183
|
-
template: '
|
|
205
|
+
template: 'active',
|
|
184
206
|
palette: 'lightAccent',
|
|
185
207
|
},
|
|
186
208
|
|
|
187
209
|
{
|
|
188
210
|
parent: 'dark_accent',
|
|
189
|
-
template: '
|
|
211
|
+
template: 'active',
|
|
190
212
|
palette: 'darkAccent',
|
|
191
213
|
},
|
|
192
214
|
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { hsla, parseToHsla, toHex } from 'color2k'
|
|
2
2
|
|
|
3
|
-
import { getThemeSuiteScale } from './buildThemeSuiteScales'
|
|
4
3
|
import { BuildTheme, BuildThemeSuitePalettes } from './types'
|
|
5
4
|
|
|
6
5
|
/**
|
|
@@ -18,27 +17,69 @@ const generateColorPalette = ({
|
|
|
18
17
|
scheme: 'light' | 'dark'
|
|
19
18
|
forAccent?: boolean
|
|
20
19
|
}) => {
|
|
21
|
-
|
|
20
|
+
const baseTheme = forAccent ? theme.accent || theme : theme
|
|
22
21
|
|
|
23
|
-
const
|
|
24
|
-
const scale = forAccent ? theme.accentScale || theme.scale : theme.scale
|
|
25
|
-
|
|
26
|
-
const { lumScale, satScale } = getThemeSuiteScale(theme, forAccent)
|
|
27
|
-
const [hue, sat, lum] = parseToHsla(color)
|
|
22
|
+
const { hue, lumScale, satScale, strategy } = baseTheme
|
|
28
23
|
const isDark = scheme === 'dark'
|
|
29
24
|
|
|
30
|
-
|
|
25
|
+
let palette: string[]
|
|
26
|
+
|
|
27
|
+
if (strategy?.type === 'automatic') {
|
|
28
|
+
const hslas = {
|
|
29
|
+
background: parseToHsla(strategy.background),
|
|
30
|
+
foreground: parseToHsla(strategy.foreground),
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
palette = [
|
|
34
|
+
// backgrounds
|
|
35
|
+
...new Array(10).fill(0).map((_, i) => {
|
|
36
|
+
const [h, s, l] = hslas.background
|
|
37
|
+
|
|
38
|
+
if (isDark) {
|
|
39
|
+
const str = 9 - i
|
|
40
|
+
const minLum = 0.05
|
|
41
|
+
const by = (l - minLum) / 10
|
|
42
|
+
|
|
43
|
+
return hsla(
|
|
44
|
+
h,
|
|
45
|
+
s,
|
|
46
|
+
// go to dark or light
|
|
47
|
+
l - by * str,
|
|
48
|
+
1
|
|
49
|
+
)
|
|
50
|
+
} else {
|
|
51
|
+
const str = 9 - i
|
|
52
|
+
const maxLum = 0.95
|
|
53
|
+
const by = (maxLum - l) / 10
|
|
54
|
+
return hsla(h, s, l + by * str, 1)
|
|
55
|
+
}
|
|
56
|
+
}),
|
|
57
|
+
// colors
|
|
58
|
+
...new Array(2).fill(0).map((_, i) => {
|
|
59
|
+
const [h, s, l] = hslas.foreground
|
|
60
|
+
return hsla(
|
|
61
|
+
h,
|
|
62
|
+
s,
|
|
63
|
+
// go to dark or light
|
|
64
|
+
l - (i === 0 ? 0.1 : 0),
|
|
65
|
+
1
|
|
66
|
+
)
|
|
67
|
+
}),
|
|
68
|
+
]
|
|
69
|
+
} else {
|
|
70
|
+
const lumValues = isDark ? lumScale.dark : lumScale.light
|
|
71
|
+
palette = lumValues.map((lum, idx) => {
|
|
72
|
+
const sat = satScale[scheme][idx]
|
|
31
73
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
if (satScale) {
|
|
35
|
-
return hsla(hue, satScale[scheme][idx], lum, 1)
|
|
74
|
+
if (theme.hueColor && idx >= 10) {
|
|
75
|
+
return hsla(theme.hueColor, sat, lum, 1)
|
|
36
76
|
}
|
|
77
|
+
|
|
37
78
|
return hsla(hue, sat, lum, 1)
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
})
|
|
79
|
+
})
|
|
80
|
+
}
|
|
41
81
|
|
|
82
|
+
// add transparent values
|
|
42
83
|
const [background] = palette
|
|
43
84
|
const foreground = palette[palette.length - 1]
|
|
44
85
|
|
|
@@ -55,28 +96,27 @@ const generateColorPalette = ({
|
|
|
55
96
|
const reverseForeground = [...transparentValues[1]].reverse()
|
|
56
97
|
palette = [...transparentValues[0], ...palette, ...reverseForeground]
|
|
57
98
|
|
|
58
|
-
if (theme.accent) {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
const isAccentLight = accentLum > 0.5
|
|
99
|
+
// if (theme.accent) {
|
|
100
|
+
// const accentHsla = parseToHsla(theme.accent)
|
|
101
|
+
// const accentLum = accentHsla[2]
|
|
102
|
+
// const isAccentLight = accentLum > 0.5
|
|
63
103
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
104
|
+
// const oppositeLightnessAccent = isAccentLight
|
|
105
|
+
// ? toHex(hsla(accentHsla[0], accentHsla[1], 1 - accentLum, 1))
|
|
106
|
+
// : theme.accent
|
|
67
107
|
|
|
68
|
-
|
|
69
|
-
|
|
108
|
+
// const fg = isAccentLight && !isDark ? oppositeLightnessAccent : theme.accent
|
|
109
|
+
// const bg = fg === theme.accent ? oppositeLightnessAccent : theme.accent
|
|
70
110
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
} else {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}
|
|
111
|
+
// // unshift bg
|
|
112
|
+
// palette.unshift(bg)
|
|
113
|
+
// // push color
|
|
114
|
+
// palette.push(fg)
|
|
115
|
+
// } else {
|
|
116
|
+
// were keeping the palettes the same length with or without accent to avoid headache
|
|
117
|
+
palette.unshift('rgba(0,0,0,0)')
|
|
118
|
+
palette.push('rgba(0,0,0,0)')
|
|
119
|
+
// }
|
|
80
120
|
|
|
81
121
|
return palette
|
|
82
122
|
}
|