@tamagui/themes 3.0.0-beta.1169.1 → 3.0.0-beta.1177.1

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.
Files changed (34) hide show
  1. package/dist/cjs/builder.cjs +71 -35
  2. package/dist/cjs/builder.native.cjs +71 -35
  3. package/dist/cjs/builder.native.js +71 -35
  4. package/dist/cjs/builder.native.js.map +1 -1
  5. package/dist/cjs/generated.cjs +731 -822
  6. package/dist/cjs/generated.native.cjs +731 -822
  7. package/dist/cjs/generated.native.js +731 -822
  8. package/dist/cjs/generated.native.js.map +1 -1
  9. package/dist/cjs/tokens.cjs +14 -0
  10. package/dist/cjs/tokens.native.cjs +14 -0
  11. package/dist/cjs/tokens.native.js +14 -0
  12. package/dist/cjs/tokens.native.js.map +1 -1
  13. package/dist/esm/builder.mjs +71 -35
  14. package/dist/esm/builder.mjs.map +1 -1
  15. package/dist/esm/builder.native.js +71 -35
  16. package/dist/esm/builder.native.js.map +1 -1
  17. package/dist/esm/generated.mjs +731 -822
  18. package/dist/esm/generated.mjs.map +1 -1
  19. package/dist/esm/generated.native.js +731 -822
  20. package/dist/esm/generated.native.js.map +1 -1
  21. package/dist/esm/tokens.mjs +14 -0
  22. package/dist/esm/tokens.mjs.map +1 -1
  23. package/dist/esm/tokens.native.js +14 -0
  24. package/dist/esm/tokens.native.js.map +1 -1
  25. package/package.json +4 -4
  26. package/src/builder.ts +72 -40
  27. package/src/generated.ts +751 -860
  28. package/src/tokens.ts +25 -0
  29. package/types/builder.d.ts +194 -96
  30. package/types/builder.d.ts.map +1 -1
  31. package/types/generated.d.ts +1 -1
  32. package/types/generated.d.ts.map +1 -1
  33. package/types/tokens.d.ts +22 -22
  34. package/types/tokens.d.ts.map +1 -1
package/dist/cjs/builder.cjs CHANGED
@@ -95,10 +95,10 @@ const semanticThemeKeys = [
95
95
  "accent-color"
96
96
  ];
97
97
  const light = {
98
- background: "white",
99
- "background-hover": 50,
100
- "background-press": "white",
101
- "background-focus": 50,
98
+ background: 50,
99
+ "background-hover": "white",
100
+ "background-press": 100,
101
+ "background-focus": "white",
102
102
  "border-color": 200,
103
103
  "border-color-hover": 300,
104
104
  "border-color-press": 200,
@@ -117,7 +117,7 @@ const dark = {
117
117
  ...light,
118
118
  background: 950,
119
119
  "background-hover": 900,
120
- "background-press": 950,
120
+ "background-press": "black",
121
121
  "background-focus": 900,
122
122
  "border-color": 800,
123
123
  "border-color-hover": 700,
@@ -132,7 +132,7 @@ const dark = {
132
132
  const boldLight = {
133
133
  background: 600,
134
134
  "background-hover": 500,
135
- "background-press": 600,
135
+ "background-press": 700,
136
136
  "background-focus": 500,
137
137
  "border-color": 700,
138
138
  "border-color-hover": 600,
@@ -152,7 +152,7 @@ const boldDark = {
152
152
  ...boldLight,
153
153
  background: 500,
154
154
  "background-hover": 400,
155
- "background-press": 500,
155
+ "background-press": 600,
156
156
  "background-focus": 400,
157
157
  "border-color": 600,
158
158
  "border-color-hover": 500,
@@ -163,7 +163,7 @@ const boldDark = {
163
163
  const tintLight = {
164
164
  background: 100,
165
165
  "background-hover": 50,
166
- "background-press": 100,
166
+ "background-press": 200,
167
167
  "background-focus": 50,
168
168
  "border-color": 300,
169
169
  "border-color-hover": 400,
@@ -183,7 +183,7 @@ const tintDark = {
183
183
  ...tintLight,
184
184
  background: 900,
185
185
  "background-hover": 800,
186
- "background-press": 900,
186
+ "background-press": 950,
187
187
  "background-focus": 800,
188
188
  "border-color": 700,
189
189
  "border-color-hover": 600,
@@ -212,47 +212,84 @@ function raise(scale, steps) {
212
212
  return [key, ladder[Math.max(0, Math.min(ladder.length - 1, index + steps))]];
213
213
  }));
214
214
  }
215
+ const levelSteps = [
216
+ 0,
217
+ 1,
218
+ 2,
219
+ 3
220
+ ];
221
+ const tintSteps = [
222
+ 0,
223
+ 1,
224
+ 2,
225
+ 2
226
+ ];
227
+ const tintType = {
228
+ light: [
229
+ 700,
230
+ 800,
231
+ 900,
232
+ 900
233
+ ],
234
+ dark: [
235
+ 200,
236
+ 100,
237
+ 50,
238
+ 50
239
+ ]
240
+ };
241
+ function tintLevel(scale, scheme, level) {
242
+ const steps = scheme === "light" ? tintSteps[level - 1] : -tintSteps[level - 1];
243
+ const color = tintType[scheme][level - 1];
244
+ return {
245
+ ...raise(scale, steps),
246
+ color,
247
+ "color-hover": color,
248
+ "color-press": color,
249
+ "color-focus": color
250
+ };
251
+ }
215
252
  const scales = {
216
253
  normal: {
217
254
  light: {
218
255
  1: light,
219
- 2: raise(light, 1),
220
- 3: raise(light, 2),
221
- 4: raise(light, 3)
256
+ 2: raise(light, levelSteps[1]),
257
+ 3: raise(light, levelSteps[2]),
258
+ 4: raise(light, levelSteps[3])
222
259
  },
223
260
  dark: {
224
261
  1: dark,
225
- 2: raise(dark, -1),
226
- 3: raise(dark, -2),
227
- 4: raise(dark, -3)
262
+ 2: raise(dark, -levelSteps[1]),
263
+ 3: raise(dark, -levelSteps[2]),
264
+ 4: raise(dark, -levelSteps[3])
228
265
  }
229
266
  },
230
267
  bold: {
231
268
  light: {
232
269
  1: boldLight,
233
- 2: raise(boldLight, -1),
234
- 3: raise(boldLight, -2),
235
- 4: raise(boldLight, -3)
270
+ 2: boldLight,
271
+ 3: boldLight,
272
+ 4: boldLight
236
273
  },
237
274
  dark: {
238
275
  1: boldDark,
239
- 2: raise(boldDark, 1),
240
- 3: raise(boldDark, 2),
241
- 4: raise(boldDark, 3)
276
+ 2: boldDark,
277
+ 3: boldDark,
278
+ 4: boldDark
242
279
  }
243
280
  },
244
281
  tint: {
245
282
  light: {
246
283
  1: tintLight,
247
- 2: raise(tintLight, -1),
248
- 3: raise(tintLight, 1),
249
- 4: raise(tintLight, 2)
284
+ 2: tintLevel(tintLight, "light", 2),
285
+ 3: tintLevel(tintLight, "light", 3),
286
+ 4: tintLevel(tintLight, "light", 4)
250
287
  },
251
288
  dark: {
252
289
  1: tintDark,
253
- 2: raise(tintDark, 1),
254
- 3: raise(tintDark, -1),
255
- 4: raise(tintDark, -2)
290
+ 2: tintLevel(tintDark, "dark", 2),
291
+ 3: tintLevel(tintDark, "dark", 3),
292
+ 4: tintLevel(tintDark, "dark", 4)
256
293
  }
257
294
  }
258
295
  };
@@ -304,23 +341,22 @@ function levels(max = 4) {
304
341
  const tree = {
305
342
  light: {
306
343
  scheme: "light",
307
- palette: "gray"
344
+ palette: "mauve"
308
345
  },
309
346
  dark: {
310
347
  scheme: "dark",
311
- palette: "gray"
348
+ palette: "mauve"
312
349
  },
313
350
  children: {
314
351
  ...levels(),
315
352
  accent: {
316
353
  palette: "brand",
317
354
  treatment: "tint",
318
- children: levels()
355
+ children: levels(3)
319
356
  },
320
357
  brand: {
321
358
  palette: "brand",
322
- treatment: "bold",
323
- children: levels()
359
+ treatment: "bold"
324
360
  },
325
361
  inverse: ({ parent }) => ({
326
362
  scheme: parent.scheme === "light" ? "dark" : "light",
@@ -329,17 +365,17 @@ const tree = {
329
365
  red: {
330
366
  palette: "red",
331
367
  treatment: "tint",
332
- children: levels(2)
368
+ children: levels(3)
333
369
  },
334
370
  yellow: {
335
371
  palette: "yellow",
336
372
  treatment: "tint",
337
- children: levels(2)
373
+ children: levels(3)
338
374
  },
339
375
  green: {
340
376
  palette: "green",
341
377
  treatment: "tint",
342
- children: levels(2)
378
+ children: levels(3)
343
379
  }
344
380
  }
345
381
  };
package/dist/cjs/builder.native.cjs CHANGED
@@ -97,10 +97,10 @@ var semanticThemeKeys = [
97
97
  "accent-color"
98
98
  ];
99
99
  var light = {
100
- background: "white",
101
- "background-hover": 50,
102
- "background-press": "white",
103
- "background-focus": 50,
100
+ background: 50,
101
+ "background-hover": "white",
102
+ "background-press": 100,
103
+ "background-focus": "white",
104
104
  "border-color": 200,
105
105
  "border-color-hover": 300,
106
106
  "border-color-press": 200,
@@ -119,7 +119,7 @@ var dark = {
119
119
  ...light,
120
120
  background: 950,
121
121
  "background-hover": 900,
122
- "background-press": 950,
122
+ "background-press": "black",
123
123
  "background-focus": 900,
124
124
  "border-color": 800,
125
125
  "border-color-hover": 700,
@@ -134,7 +134,7 @@ var dark = {
134
134
  var boldLight = {
135
135
  background: 600,
136
136
  "background-hover": 500,
137
- "background-press": 600,
137
+ "background-press": 700,
138
138
  "background-focus": 500,
139
139
  "border-color": 700,
140
140
  "border-color-hover": 600,
@@ -154,7 +154,7 @@ var boldDark = {
154
154
  ...boldLight,
155
155
  background: 500,
156
156
  "background-hover": 400,
157
- "background-press": 500,
157
+ "background-press": 600,
158
158
  "background-focus": 400,
159
159
  "border-color": 600,
160
160
  "border-color-hover": 500,
@@ -165,7 +165,7 @@ var boldDark = {
165
165
  var tintLight = {
166
166
  background: 100,
167
167
  "background-hover": 50,
168
- "background-press": 100,
168
+ "background-press": 200,
169
169
  "background-focus": 50,
170
170
  "border-color": 300,
171
171
  "border-color-hover": 400,
@@ -185,7 +185,7 @@ var tintDark = {
185
185
  ...tintLight,
186
186
  background: 900,
187
187
  "background-hover": 800,
188
- "background-press": 900,
188
+ "background-press": 950,
189
189
  "background-focus": 800,
190
190
  "border-color": 700,
191
191
  "border-color-hover": 600,
@@ -215,47 +215,84 @@ function raise(scale, steps) {
215
215
  return [key, ladder[Math.max(0, Math.min(ladder.length - 1, index + steps))]];
216
216
  }));
217
217
  }
218
+ var levelSteps = [
219
+ 0,
220
+ 1,
221
+ 2,
222
+ 3
223
+ ];
224
+ var tintSteps = [
225
+ 0,
226
+ 1,
227
+ 2,
228
+ 2
229
+ ];
230
+ var tintType = {
231
+ light: [
232
+ 700,
233
+ 800,
234
+ 900,
235
+ 900
236
+ ],
237
+ dark: [
238
+ 200,
239
+ 100,
240
+ 50,
241
+ 50
242
+ ]
243
+ };
244
+ function tintLevel(scale, scheme, level) {
245
+ var steps = scheme === "light" ? tintSteps[level - 1] : -tintSteps[level - 1];
246
+ var color = tintType[scheme][level - 1];
247
+ return {
248
+ ...raise(scale, steps),
249
+ color,
250
+ "color-hover": color,
251
+ "color-press": color,
252
+ "color-focus": color
253
+ };
254
+ }
218
255
  var scales = {
219
256
  normal: {
220
257
  light: {
221
258
  1: light,
222
- 2: raise(light, 1),
223
- 3: raise(light, 2),
224
- 4: raise(light, 3)
259
+ 2: raise(light, levelSteps[1]),
260
+ 3: raise(light, levelSteps[2]),
261
+ 4: raise(light, levelSteps[3])
225
262
  },
226
263
  dark: {
227
264
  1: dark,
228
- 2: raise(dark, -1),
229
- 3: raise(dark, -2),
230
- 4: raise(dark, -3)
265
+ 2: raise(dark, -levelSteps[1]),
266
+ 3: raise(dark, -levelSteps[2]),
267
+ 4: raise(dark, -levelSteps[3])
231
268
  }
232
269
  },
233
270
  bold: {
234
271
  light: {
235
272
  1: boldLight,
236
- 2: raise(boldLight, -1),
237
- 3: raise(boldLight, -2),
238
- 4: raise(boldLight, -3)
273
+ 2: boldLight,
274
+ 3: boldLight,
275
+ 4: boldLight
239
276
  },
240
277
  dark: {
241
278
  1: boldDark,
242
- 2: raise(boldDark, 1),
243
- 3: raise(boldDark, 2),
244
- 4: raise(boldDark, 3)
279
+ 2: boldDark,
280
+ 3: boldDark,
281
+ 4: boldDark
245
282
  }
246
283
  },
247
284
  tint: {
248
285
  light: {
249
286
  1: tintLight,
250
- 2: raise(tintLight, -1),
251
- 3: raise(tintLight, 1),
252
- 4: raise(tintLight, 2)
287
+ 2: tintLevel(tintLight, "light", 2),
288
+ 3: tintLevel(tintLight, "light", 3),
289
+ 4: tintLevel(tintLight, "light", 4)
253
290
  },
254
291
  dark: {
255
292
  1: tintDark,
256
- 2: raise(tintDark, 1),
257
- 3: raise(tintDark, -1),
258
- 4: raise(tintDark, -2)
293
+ 2: tintLevel(tintDark, "dark", 2),
294
+ 3: tintLevel(tintDark, "dark", 3),
295
+ 4: tintLevel(tintDark, "dark", 4)
259
296
  }
260
297
  }
261
298
  };
@@ -319,23 +356,22 @@ function levels() {
319
356
  var tree = {
320
357
  light: {
321
358
  scheme: "light",
322
- palette: "gray"
359
+ palette: "mauve"
323
360
  },
324
361
  dark: {
325
362
  scheme: "dark",
326
- palette: "gray"
363
+ palette: "mauve"
327
364
  },
328
365
  children: {
329
366
  ...levels(),
330
367
  accent: {
331
368
  palette: "brand",
332
369
  treatment: "tint",
333
- children: levels()
370
+ children: levels(3)
334
371
  },
335
372
  brand: {
336
373
  palette: "brand",
337
- treatment: "bold",
338
- children: levels()
374
+ treatment: "bold"
339
375
  },
340
376
  inverse: function(param) {
341
377
  var { parent } = param;
@@ -347,17 +383,17 @@ var tree = {
347
383
  red: {
348
384
  palette: "red",
349
385
  treatment: "tint",
350
- children: levels(2)
386
+ children: levels(3)
351
387
  },
352
388
  yellow: {
353
389
  palette: "yellow",
354
390
  treatment: "tint",
355
- children: levels(2)
391
+ children: levels(3)
356
392
  },
357
393
  green: {
358
394
  palette: "green",
359
395
  treatment: "tint",
360
- children: levels(2)
396
+ children: levels(3)
361
397
  }
362
398
  }
363
399
  };
package/dist/cjs/builder.native.js CHANGED
@@ -97,10 +97,10 @@ var semanticThemeKeys = [
97
97
  "accent-color"
98
98
  ];
99
99
  var light = {
100
- background: "white",
101
- "background-hover": 50,
102
- "background-press": "white",
103
- "background-focus": 50,
100
+ background: 50,
101
+ "background-hover": "white",
102
+ "background-press": 100,
103
+ "background-focus": "white",
104
104
  "border-color": 200,
105
105
  "border-color-hover": 300,
106
106
  "border-color-press": 200,
@@ -119,7 +119,7 @@ var dark = {
119
119
  ...light,
120
120
  background: 950,
121
121
  "background-hover": 900,
122
- "background-press": 950,
122
+ "background-press": "black",
123
123
  "background-focus": 900,
124
124
  "border-color": 800,
125
125
  "border-color-hover": 700,
@@ -134,7 +134,7 @@ var dark = {
134
134
  var boldLight = {
135
135
  background: 600,
136
136
  "background-hover": 500,
137
- "background-press": 600,
137
+ "background-press": 700,
138
138
  "background-focus": 500,
139
139
  "border-color": 700,
140
140
  "border-color-hover": 600,
@@ -154,7 +154,7 @@ var boldDark = {
154
154
  ...boldLight,
155
155
  background: 500,
156
156
  "background-hover": 400,
157
- "background-press": 500,
157
+ "background-press": 600,
158
158
  "background-focus": 400,
159
159
  "border-color": 600,
160
160
  "border-color-hover": 500,
@@ -165,7 +165,7 @@ var boldDark = {
165
165
  var tintLight = {
166
166
  background: 100,
167
167
  "background-hover": 50,
168
- "background-press": 100,
168
+ "background-press": 200,
169
169
  "background-focus": 50,
170
170
  "border-color": 300,
171
171
  "border-color-hover": 400,
@@ -185,7 +185,7 @@ var tintDark = {
185
185
  ...tintLight,
186
186
  background: 900,
187
187
  "background-hover": 800,
188
- "background-press": 900,
188
+ "background-press": 950,
189
189
  "background-focus": 800,
190
190
  "border-color": 700,
191
191
  "border-color-hover": 600,
@@ -215,47 +215,84 @@ function raise(scale, steps) {
215
215
  return [key, ladder[Math.max(0, Math.min(ladder.length - 1, index + steps))]];
216
216
  }));
217
217
  }
218
+ var levelSteps = [
219
+ 0,
220
+ 1,
221
+ 2,
222
+ 3
223
+ ];
224
+ var tintSteps = [
225
+ 0,
226
+ 1,
227
+ 2,
228
+ 2
229
+ ];
230
+ var tintType = {
231
+ light: [
232
+ 700,
233
+ 800,
234
+ 900,
235
+ 900
236
+ ],
237
+ dark: [
238
+ 200,
239
+ 100,
240
+ 50,
241
+ 50
242
+ ]
243
+ };
244
+ function tintLevel(scale, scheme, level) {
245
+ var steps = scheme === "light" ? tintSteps[level - 1] : -tintSteps[level - 1];
246
+ var color = tintType[scheme][level - 1];
247
+ return {
248
+ ...raise(scale, steps),
249
+ color,
250
+ "color-hover": color,
251
+ "color-press": color,
252
+ "color-focus": color
253
+ };
254
+ }
218
255
  var scales = {
219
256
  normal: {
220
257
  light: {
221
258
  1: light,
222
- 2: raise(light, 1),
223
- 3: raise(light, 2),
224
- 4: raise(light, 3)
259
+ 2: raise(light, levelSteps[1]),
260
+ 3: raise(light, levelSteps[2]),
261
+ 4: raise(light, levelSteps[3])
225
262
  },
226
263
  dark: {
227
264
  1: dark,
228
- 2: raise(dark, -1),
229
- 3: raise(dark, -2),
230
- 4: raise(dark, -3)
265
+ 2: raise(dark, -levelSteps[1]),
266
+ 3: raise(dark, -levelSteps[2]),
267
+ 4: raise(dark, -levelSteps[3])
231
268
  }
232
269
  },
233
270
  bold: {
234
271
  light: {
235
272
  1: boldLight,
236
- 2: raise(boldLight, -1),
237
- 3: raise(boldLight, -2),
238
- 4: raise(boldLight, -3)
273
+ 2: boldLight,
274
+ 3: boldLight,
275
+ 4: boldLight
239
276
  },
240
277
  dark: {
241
278
  1: boldDark,
242
- 2: raise(boldDark, 1),
243
- 3: raise(boldDark, 2),
244
- 4: raise(boldDark, 3)
279
+ 2: boldDark,
280
+ 3: boldDark,
281
+ 4: boldDark
245
282
  }
246
283
  },
247
284
  tint: {
248
285
  light: {
249
286
  1: tintLight,
250
- 2: raise(tintLight, -1),
251
- 3: raise(tintLight, 1),
252
- 4: raise(tintLight, 2)
287
+ 2: tintLevel(tintLight, "light", 2),
288
+ 3: tintLevel(tintLight, "light", 3),
289
+ 4: tintLevel(tintLight, "light", 4)
253
290
  },
254
291
  dark: {
255
292
  1: tintDark,
256
- 2: raise(tintDark, 1),
257
- 3: raise(tintDark, -1),
258
- 4: raise(tintDark, -2)
293
+ 2: tintLevel(tintDark, "dark", 2),
294
+ 3: tintLevel(tintDark, "dark", 3),
295
+ 4: tintLevel(tintDark, "dark", 4)
259
296
  }
260
297
  }
261
298
  };
@@ -319,23 +356,22 @@ function levels() {
319
356
  var tree = {
320
357
  light: {
321
358
  scheme: "light",
322
- palette: "gray"
359
+ palette: "mauve"
323
360
  },
324
361
  dark: {
325
362
  scheme: "dark",
326
- palette: "gray"
363
+ palette: "mauve"
327
364
  },
328
365
  children: {
329
366
  ...levels(),
330
367
  accent: {
331
368
  palette: "brand",
332
369
  treatment: "tint",
333
- children: levels()
370
+ children: levels(3)
334
371
  },
335
372
  brand: {
336
373
  palette: "brand",
337
- treatment: "bold",
338
- children: levels()
374
+ treatment: "bold"
339
375
  },
340
376
  inverse: function(param) {
341
377
  var { parent } = param;
@@ -347,17 +383,17 @@ var tree = {
347
383
  red: {
348
384
  palette: "red",
349
385
  treatment: "tint",
350
- children: levels(2)
386
+ children: levels(3)
351
387
  },
352
388
  yellow: {
353
389
  palette: "yellow",
354
390
  treatment: "tint",
355
- children: levels(2)
391
+ children: levels(3)
356
392
  },
357
393
  green: {
358
394
  palette: "green",
359
395
  treatment: "tint",
360
- children: levels(2)
396
+ children: levels(3)
361
397
  }
362
398
  }
363
399
  };