@tamagui/theme-builder 1.79.19 → 1.80.0

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 (63) hide show
  1. package/dist/cjs/ThemeBuilder.js +4 -1
  2. package/dist/cjs/ThemeBuilder.js.map +1 -1
  3. package/dist/cjs/ThemeBuilder.native.js +4 -1
  4. package/dist/cjs/ThemeBuilder.native.js.map +1 -1
  5. package/dist/cjs/buildMask.js +1 -1
  6. package/dist/cjs/buildMask.js.map +1 -1
  7. package/dist/cjs/buildMask.native.js +1 -1
  8. package/dist/cjs/buildMask.native.js.map +1 -1
  9. package/dist/cjs/buildThemeSuite.js +230 -245
  10. package/dist/cjs/buildThemeSuite.js.map +2 -2
  11. package/dist/cjs/buildThemeSuite.native.js +230 -245
  12. package/dist/cjs/buildThemeSuite.native.js.map +2 -2
  13. package/dist/cjs/buildThemeSuiteScales.js.map +1 -1
  14. package/dist/cjs/buildThemeSuiteScales.native.js.map +1 -1
  15. package/dist/cjs/index.js +1 -11
  16. package/dist/cjs/index.js.map +1 -1
  17. package/dist/cjs/index.native.js +1 -11
  18. package/dist/cjs/index.native.js.map +1 -1
  19. package/dist/cjs/masks.js +0 -142
  20. package/dist/cjs/masks.js.map +2 -2
  21. package/dist/cjs/masks.native.js +0 -142
  22. package/dist/cjs/masks.native.js.map +2 -2
  23. package/dist/esm/ThemeBuilder.js +4 -1
  24. package/dist/esm/ThemeBuilder.js.map +1 -1
  25. package/dist/esm/ThemeBuilder.native.js +4 -1
  26. package/dist/esm/ThemeBuilder.native.js.map +1 -1
  27. package/dist/esm/buildMask.js +1 -1
  28. package/dist/esm/buildMask.js.map +1 -1
  29. package/dist/esm/buildMask.native.js +1 -1
  30. package/dist/esm/buildMask.native.js.map +1 -1
  31. package/dist/esm/buildThemeSuite.js +227 -248
  32. package/dist/esm/buildThemeSuite.js.map +2 -2
  33. package/dist/esm/buildThemeSuite.native.js +227 -248
  34. package/dist/esm/buildThemeSuite.native.js.map +2 -2
  35. package/dist/esm/buildThemeSuiteScales.js.map +1 -1
  36. package/dist/esm/buildThemeSuiteScales.native.js.map +1 -1
  37. package/dist/esm/index.js +0 -5
  38. package/dist/esm/index.js.map +1 -1
  39. package/dist/esm/index.native.js +0 -5
  40. package/dist/esm/index.native.js.map +1 -1
  41. package/dist/esm/masks.js +0 -129
  42. package/dist/esm/masks.js.map +2 -2
  43. package/dist/esm/masks.native.js +0 -129
  44. package/dist/esm/masks.native.js.map +2 -2
  45. package/package.json +3 -3
  46. package/src/ThemeBuilder.ts +15 -8
  47. package/src/index.ts +0 -7
  48. package/types/ThemeBuilder.d.ts +5 -1
  49. package/types/ThemeBuilder.d.ts.map +1 -1
  50. package/types/buildMask.d.ts.map +1 -1
  51. package/types/buildThemeSuite.d.ts +4 -1639
  52. package/types/buildThemeSuite.d.ts.map +1 -1
  53. package/types/buildThemeSuiteScales.d.ts.map +1 -1
  54. package/types/index.d.ts +0 -5
  55. package/types/index.d.ts.map +1 -1
  56. package/types/types.d.ts +13 -8
  57. package/types/types.d.ts.map +1 -1
  58. package/src/buildMask.ts +0 -63
  59. package/src/buildThemeSuite.ts +0 -384
  60. package/src/buildThemeSuitePalettes.ts +0 -164
  61. package/src/buildThemeSuiteScales.ts +0 -254
  62. package/src/masks.ts +0 -147
  63. package/src/types.ts +0 -102
@@ -1 +1 @@
1
- {"version":3,"file":"buildThemeSuite.d.ts","sourceRoot":"","sources":["../src/buildThemeSuite.ts"],"names":[],"mappings":"AAWA,OAAO,EAA8B,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAiB1E,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiW7E;AAED,MAAM,MAAM,qBAAqB,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA"}
1
+ {"version":3,"file":"buildThemeSuite.d.ts","sourceRoot":"","sources":["../src/buildThemeSuite.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,YAAY,EAAsB,MAAM,gBAAgB,CAAA;AACjE,OAAO,EAGL,oBAAoB,EAGrB,MAAM,SAAS,CAAA;AAEhB,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB;;EAE1D;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,SAAiC,EACjC,QAAQ,EACR,eAAe,GAChB,EAAE,oBAAoB,qBAwFtB;AA4KD,MAAM,MAAM,qBAAqB,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"buildThemeSuiteScales.d.ts","sourceRoot":"","sources":["../src/buildThemeSuiteScales.ts"],"names":[],"mappings":"AAEA,OAAO,EAAc,aAAa,EAAE,MAAM,SAAS,CAAA;AAsCnD,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,IAAI;IAC/D,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,CAAC,CAAA;IACf,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;QACpB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;KACpB,CAAA;IACD,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;QACpB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;KACpB,CAAA;CACF,CAAA;AAED,wBAAgB,cAAc,CAAC,IAAI,SAAS,aAAa,EACvD,CAAC,EAAE,IAAI,GACN,CAAC,OAAO,UAAU,CAAC,CAAC,IAAI,CAAC,CAE3B;AAOD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoJqB,CAAA"}
1
+ {"version":3,"file":"buildThemeSuiteScales.d.ts","sourceRoot":"","sources":["../src/buildThemeSuiteScales.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAEvC,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,IAAI;IAC/D,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,CAAC,CAAA;IACf,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;QACpB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;KACpB,CAAA;IACD,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;QACpB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;KACpB,CAAA;CACF,CAAA;AAED,wBAAgB,cAAc,CAAC,IAAI,SAAS,aAAa,EACvD,CAAC,EAAE,IAAI,GACN,CAAC,OAAO,UAAU,CAAC,CAAC,IAAI,CAAC,CAE3B;AAOD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoJqB,CAAA"}
package/types/index.d.ts CHANGED
@@ -1,8 +1,3 @@
1
1
  export * from './ThemeBuilder';
2
2
  export * from '@tamagui/create-theme';
3
- export * from './buildMask';
4
- export * from './types';
5
- export * from './buildThemeSuite';
6
- export * from './buildThemeSuitePalettes';
7
- export * from './buildThemeSuiteScales';
8
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AAGvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AACzC,cAAc,yBAAyB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA"}
package/types/types.d.ts CHANGED
@@ -1,14 +1,15 @@
1
- import { MaskOptions, Template } from '@tamagui/create-theme';
1
+ import { MaskOptions, PaletteDefinitions, Template } from '@tamagui/create-theme';
2
2
  export type SubTheme = BuildTheme | BuildThemeMask;
3
+ export type Templates = Record<string, Template> & {
4
+ base: Template;
5
+ accentLight?: Template;
6
+ accentDark?: Template;
7
+ };
3
8
  export type BuildThemeSuiteProps = {
4
- baseTheme: BuildTheme;
9
+ palettes: PaletteDefinitions;
5
10
  subThemes?: SubTheme[];
6
- componentMask?: MaskOptions;
7
- templates?: {
8
- base: Template;
9
- accentLight: Template;
10
- accentDark: Template;
11
- };
11
+ componentThemes?: SubTheme[];
12
+ templates?: Templates;
12
13
  };
13
14
  export type BuildThemeSuitePalettes = {
14
15
  light: string[];
@@ -51,6 +52,9 @@ export type BuildTheme = BuildThemeBase & {
51
52
  export type BuildMask = {
52
53
  id: string;
53
54
  } & ({
55
+ type: 'override';
56
+ override: Record<string, number>;
57
+ } | {
54
58
  type: 'strengthen';
55
59
  strength: number;
56
60
  } | {
@@ -68,5 +72,6 @@ export type BuildMask = {
68
72
  export type BuildThemeMask = BuildThemeBase & {
69
73
  type: 'mask';
70
74
  masks: BuildMask[];
75
+ maskOptions?: MaskOptions;
71
76
  };
72
77
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE7D,MAAM,MAAM,QAAQ,GAAG,UAAU,GAAG,cAAc,CAAA;AAElD,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,UAAU,CAAA;IACrB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAA;IACtB,aAAa,CAAC,EAAE,WAAW,CAAA;IAC3B,SAAS,CAAC,EAAE;QACV,IAAI,EAAE,QAAQ,CAAA;QACd,WAAW,EAAE,QAAQ,CAAA;QACrB,UAAU,EAAE,QAAQ,CAAA;KACrB,CAAA;CACF,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,OAAO,GACP,SAAS,GACT,aAAa,GACb,eAAe,GACf,QAAQ,GACR,QAAQ,GACR,qBAAqB,GACrB,MAAM,GACN,aAAa,GACb,QAAQ,CAAA;AAEZ,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,MAAM,CAAA;QACZ,IAAI,CAAC,EAAE,OAAO,CAAA;QACd,QAAQ,CAAC,EAAE,OAAO,CAAA;KACnB,CAAA;IACD,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,MAAM,CAAA;QACZ,IAAI,CAAC,EAAE,OAAO,CAAA;QACd,QAAQ,CAAC,EAAE,OAAO,CAAA;KACnB,CAAA;IACD,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,MAAM,CAAA;KACb,CAAA;CACF,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG;IACxC,IAAI,EAAE,OAAO,CAAA;IAEb,KAAK,EAAE,aAAa,CAAA;IAEpB,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAE3B,QAAQ,CAAC,EAAE,QAAQ,CAAA;IAEnB,MAAM,CAAC,EAAE,UAAU,CAAA;CACpB,CAAA;AAGD,MAAM,MAAM,SAAS,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,GAAG,CACrC;IACE,IAAI,EAAE,YAAY,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;CACjB,GACD;IACE,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;CACjB,GACD;IACE,IAAI,EAAE,SAAS,CAAA;CAChB,GACD;IACE,IAAI,EAAE,kBAAkB,CAAA;IACxB,QAAQ,EAAE,MAAM,CAAA;CACjB,GACD;IACE,IAAI,EAAE,cAAc,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;CACjB,CACJ,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG;IAC5C,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,SAAS,EAAE,CAAA;CACnB,CAAA"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
package/src/buildMask.ts DELETED
@@ -1,63 +0,0 @@
1
- import {
2
- CreateMask,
3
- combineMasks,
4
- createInverseMask,
5
- createMask,
6
- createSoftenMask,
7
- createStrengthenMask,
8
- skipMask,
9
- } from '@tamagui/create-theme'
10
-
11
- import { BuildMask } from './types'
12
-
13
- // helper function for generating a custom mask given an object
14
- // pulled out from studio, not really a "user facing" API yet
15
-
16
- export function buildMask(masks: BuildMask[]) {
17
- return combineMasks(
18
- ...masks.map((mask) => {
19
- if (mask.type === 'inverse') {
20
- return createInverseMask()
21
- }
22
- if (mask.type === 'soften') {
23
- return createSoftenMask({ strength: mask.strength || 0 })
24
- }
25
- if (mask.type === 'strengthen') {
26
- return createStrengthenMask({ strength: mask.strength || 0 })
27
- }
28
- if (mask.type === 'softenBorder') {
29
- return createMask((template, options) => {
30
- const plain = skipMask.mask(template, options)
31
- const softer = createSoftenMask({ strength: mask.strength }).mask(
32
- template,
33
- options
34
- )
35
- return {
36
- ...plain,
37
- borderColor: softer.borderColor,
38
- borderColorHover: softer.borderColorHover,
39
- borderColorPress: softer.borderColorPress,
40
- borderColorFocus: softer.borderColorFocus,
41
- }
42
- })
43
- }
44
- if (mask.type === 'strengthenBorder') {
45
- return createMask((template, options) => {
46
- const plain = skipMask.mask(template, options)
47
- const softer = createSoftenMask({ strength: mask.strength }).mask(
48
- template,
49
- options
50
- )
51
- return {
52
- ...plain,
53
- borderColor: softer.borderColor,
54
- borderColorHover: softer.borderColorHover,
55
- borderColorPress: softer.borderColorPress,
56
- borderColorFocus: softer.borderColorFocus,
57
- }
58
- })
59
- }
60
- return {} as CreateMask
61
- })
62
- )
63
- }
@@ -1,384 +0,0 @@
1
- import {
2
- MaskOptions,
3
- ThemeDefinitions,
4
- createMask,
5
- createSoftenMask,
6
- } from '@tamagui/create-theme'
7
-
8
- import { buildMask } from './buildMask'
9
- import { getThemeSuitePalettes } from './buildThemeSuitePalettes'
10
- import { masks as defaultMasks, maskOptions } from './masks'
11
- import { createThemeBuilder } from './ThemeBuilder'
12
- import { BuildTheme, BuildThemeMask, BuildThemeSuiteProps } from './types'
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
-
29
- export function buildThemeSuite({ baseTheme, subThemes }: BuildThemeSuiteProps) {
30
- const theme = baseTheme
31
-
32
- const maskThemes = (subThemes || []).filter(
33
- (x) => x.type === 'mask'
34
- ) as BuildThemeMask[]
35
-
36
- const nonMaskSubThemes = (subThemes || []).filter(
37
- (x) => x.type !== 'mask'
38
- ) as BuildTheme[]
39
-
40
- const customMasks = Object.fromEntries(
41
- maskThemes.map((maskTheme) => {
42
- return [maskTheme.name, buildMask(maskTheme.masks)]
43
- })
44
- )
45
-
46
- // base palletes need to add in sub theme palettes if customized
47
- const basePalettes = getThemeSuitePalettes(theme)
48
- const subThemePalettes = Object.fromEntries(
49
- nonMaskSubThemes.flatMap((t) => {
50
- const palettes = getThemeSuitePalettes(t)
51
- return [
52
- [`${t.name}PaletteLight`, palettes.light],
53
- [`${t.name}PaletteDark`, palettes.dark],
54
- ]
55
- })
56
- )
57
-
58
- const max = basePalettes.dark.length - 1
59
- const min = 1
60
-
61
- const componentMask = {
62
- ...maskOptions.component,
63
- max,
64
- min,
65
- overrideSwap: {
66
- accentBackground: 0,
67
- accentColor: -0,
68
- },
69
- overrideShift: {
70
- ...maskOptions.component.override,
71
- },
72
- skip: {
73
- ...maskOptions.component.skip,
74
- },
75
- } satisfies MaskOptions
76
-
77
- const customMaskOptions = {
78
- alt: {
79
- ...maskOptions.alt,
80
- max,
81
- min,
82
- overrideSwap: {
83
- accentBackground: 0,
84
- accentColor: -0,
85
- },
86
- overrideShift: {
87
- ...maskOptions.alt.override,
88
- },
89
- skip: {
90
- ...maskOptions.alt.skip,
91
- },
92
- },
93
- component: componentMask,
94
- componentInverse: {
95
- ...componentMask,
96
- },
97
- } satisfies Record<string, MaskOptions>
98
-
99
- const baseTemplate = {
100
- accentBackground: 0,
101
- accentColor: -0,
102
-
103
- background0: 1,
104
- background025: 2,
105
- background05: 3,
106
- background075: 4,
107
-
108
- color0: -4,
109
- color025: -3,
110
- color05: -2,
111
- color075: -1,
112
-
113
- background: 5,
114
- backgroundHover: 6,
115
- backgroundPress: 7,
116
- backgroundFocus: 8,
117
-
118
- color: -5,
119
- colorHover: -6,
120
- colorPress: -5,
121
- colorFocus: -6,
122
-
123
- placeholderColor: -6,
124
-
125
- borderColor: 7,
126
- borderColorHover: 8,
127
- borderColorFocus: 9,
128
- borderColorPress: 8,
129
- }
130
-
131
- function createTemplates() {
132
- const template = {
133
- color1: 5,
134
- color2: 6,
135
- color3: 7,
136
- color4: 8,
137
- color5: 9,
138
- color6: 10,
139
- color7: 11,
140
- color8: 12,
141
- color9: 13,
142
- color10: 14,
143
- color11: 15,
144
- color12: 16,
145
- ...baseTemplate,
146
- }
147
-
148
- return {
149
- base: template,
150
- active: {
151
- ...template,
152
- background: namedTemplateSlots.strongBackground,
153
- backgroundHover: namedTemplateSlots.hoverStrongBackground,
154
- backgroundPress: namedTemplateSlots.hoverBorder,
155
- backgroundFocus: namedTemplateSlots.strongBackground,
156
- },
157
- }
158
- }
159
-
160
- const templates = createTemplates()
161
-
162
- function getComponentThemeDefinitions() {
163
- const overlayThemes = {
164
- light: {
165
- background: 'rgba(0,0,0,0.5)',
166
- },
167
- dark: {
168
- background: 'rgba(0,0,0,0.9)',
169
- },
170
- }
171
-
172
- const overlayThemeDefinitions = [
173
- {
174
- parent: 'light',
175
- theme: overlayThemes.light,
176
- },
177
- {
178
- parent: 'dark',
179
- theme: overlayThemes.dark,
180
- },
181
- ]
182
-
183
- const componentTheme = [
184
- {
185
- parent: 'light_accent',
186
- template: 'active',
187
- palette: 'lightAccent',
188
- },
189
-
190
- {
191
- parent: 'dark_accent',
192
- template: 'active',
193
- palette: 'darkAccent',
194
- },
195
-
196
- {
197
- parent: 'light',
198
- mask: 'soften2',
199
- ...customMaskOptions.component,
200
- },
201
-
202
- {
203
- parent: 'dark',
204
- mask: 'soften2',
205
- ...customMaskOptions.component,
206
- },
207
- ]
208
-
209
- const componentThemeDefinitions = {
210
- Card: {
211
- mask: 'soften',
212
- ...customMaskOptions.component,
213
- },
214
-
215
- Button: componentTheme,
216
-
217
- Checkbox: {
218
- mask: 'softenBorder2',
219
- ...customMaskOptions.component,
220
- },
221
-
222
- Switch: componentTheme,
223
-
224
- SwitchThumb: {
225
- mask: 'inverse',
226
- ...customMaskOptions.componentInverse,
227
- },
228
-
229
- TooltipContent: {
230
- mask: 'soften2',
231
- ...customMaskOptions.component,
232
- },
233
-
234
- DrawerFrame: {
235
- mask: 'soften',
236
- ...customMaskOptions.component,
237
- },
238
-
239
- Progress: {
240
- mask: 'soften',
241
- ...customMaskOptions.component,
242
- },
243
-
244
- RadioGroupItem: {
245
- mask: 'softenBorder2',
246
- ...customMaskOptions.component,
247
- },
248
-
249
- TooltipArrow: {
250
- mask: 'soften',
251
- ...customMaskOptions.component,
252
- },
253
-
254
- SliderTrackActive: {
255
- mask: 'inverseSoften',
256
- ...customMaskOptions.component,
257
- },
258
-
259
- SliderTrack: {
260
- mask: 'soften2',
261
- ...customMaskOptions.component,
262
- },
263
-
264
- SliderThumb: {
265
- mask: 'inverse',
266
- ...customMaskOptions.componentInverse,
267
- },
268
-
269
- Tooltip: {
270
- mask: 'inverse',
271
- ...customMaskOptions.component,
272
- },
273
-
274
- ProgressIndicator: {
275
- mask: 'inverse',
276
- ...customMaskOptions.componentInverse,
277
- },
278
-
279
- SheetOverlay: overlayThemeDefinitions,
280
- DialogOverlay: overlayThemeDefinitions,
281
- ModalOverlay: overlayThemeDefinitions,
282
-
283
- Input: {
284
- mask: 'softenBorder2',
285
- ...customMaskOptions.component,
286
- },
287
-
288
- TextArea: {
289
- mask: 'softenBorder2',
290
- ...customMaskOptions.component,
291
- },
292
- } satisfies ThemeDefinitions<keyof typeof defaultMasks>
293
-
294
- return componentThemeDefinitions
295
- }
296
-
297
- const builder = createThemeBuilder()
298
- .addPalettes({
299
- ...basePalettes,
300
- ...subThemePalettes,
301
- })
302
- .addMasks({
303
- ...defaultMasks,
304
- soften3Border2: createMask((template, options) => {
305
- const softer2 = createSoftenMask({ strength: 3 }).mask(template, options)
306
- const softer1 = createSoftenMask({ strength: 2 }).mask(template, options)
307
- return {
308
- ...softer2,
309
- borderColor: softer1.borderColor,
310
- borderColorHover: softer1.borderColorHover,
311
- borderColorPress: softer1.borderColorPress,
312
- borderColorFocus: softer1.borderColorFocus,
313
- }
314
- }),
315
- ...customMasks,
316
- })
317
- .addTemplates(templates)
318
- .addThemes({
319
- light: {
320
- template: 'base',
321
- palette: 'light',
322
- },
323
- dark: {
324
- template: 'base',
325
- palette: 'dark',
326
- },
327
- })
328
- .addChildThemes(
329
- Object.fromEntries([
330
- ...maskThemes.map((theme) => {
331
- return [
332
- theme.name,
333
- {
334
- mask: theme.name,
335
- },
336
- ]
337
- }),
338
- ...nonMaskSubThemes.flatMap((theme) => {
339
- return [
340
- [
341
- theme.name,
342
- [
343
- {
344
- parent: 'dark',
345
- template: 'base',
346
- palette: `${theme.name}PaletteDark`,
347
- },
348
- {
349
- parent: 'light',
350
- template: 'base',
351
- palette: `${theme.name}PaletteLight`,
352
- },
353
- ],
354
- ],
355
- ]
356
- }),
357
- ])
358
- )
359
- .addChildThemes(
360
- basePalettes.lightAccent
361
- ? {
362
- accent: [
363
- {
364
- parent: 'light',
365
- template: 'base',
366
- palette: 'lightAccent',
367
- },
368
- {
369
- parent: 'dark',
370
- template: 'base',
371
- palette: 'darkAccent',
372
- },
373
- ],
374
- }
375
- : {}
376
- )
377
- .addChildThemes(getComponentThemeDefinitions())
378
-
379
- const built = builder.build()
380
-
381
- return built
382
- }
383
-
384
- export type BuildBaseThemesResult = ReturnType<typeof buildThemeSuite>
@@ -1,164 +0,0 @@
1
- import { hsla, parseToHsla } from 'color2k'
2
-
3
- import { BuildTheme, BuildThemeSuitePalettes } from './types'
4
-
5
- /**
6
- * palette generally is:
7
- *
8
- * [constrastBackground, backgroundTransparent, ...background, ...foreground, foregroundTransparent, accentForeground]
9
- */
10
-
11
- const paletteSize = 12
12
-
13
- const generateColorPalette = ({
14
- theme,
15
- scheme,
16
- forAccent,
17
- }: {
18
- theme: BuildTheme
19
- scheme: 'light' | 'dark'
20
- forAccent?: boolean
21
- }) => {
22
- const baseTheme = forAccent ? theme.accent || theme : theme
23
- const { anchors } = baseTheme
24
-
25
- let palette: string[] = []
26
-
27
- const add = (h: number, s: number, l: number) => {
28
- palette.push(hsla(h, s, l, 1))
29
- }
30
-
31
- const numAnchors = Object.keys(anchors).length
32
-
33
- for (const [anchorIndex, anchor] of anchors.entries()) {
34
- const [h, s, l] = [anchor.hue[scheme], anchor.sat[scheme], anchor.lum[scheme]]
35
-
36
- if (anchorIndex !== 0) {
37
- const lastAnchor = anchors[anchorIndex - 1]
38
- const steps = anchor.index - lastAnchor.index
39
-
40
- const lastHue = lastAnchor.hue[scheme]
41
- const lastSat = lastAnchor.sat[scheme]
42
- const lastLum = lastAnchor.lum[scheme]
43
-
44
- const stepHue = (lastHue - h) / steps
45
- const stepSat = (lastSat - s) / steps
46
- const stepLum = (lastLum - l) / steps
47
-
48
- // backfill:
49
- for (let step = lastAnchor.index + 1; step < anchor.index; step++) {
50
- const str = anchor.index - step
51
- add(h + stepHue * str, s + stepSat * str, l + stepLum * str)
52
- }
53
- }
54
-
55
- add(h, s, l)
56
-
57
- const isLastAnchor = anchorIndex === numAnchors - 1
58
- if (isLastAnchor && palette.length < paletteSize) {
59
- // forwardfill:
60
- for (let step = anchor.index + 1; step < paletteSize; step++) {
61
- add(h, s, l)
62
- }
63
- }
64
- }
65
-
66
- // if (strategy?.type === 'automatic') {
67
- // const hslas = {
68
- // background: parseToHsla(strategy.background),
69
- // foreground: parseToHsla(strategy.foreground),
70
- // }
71
-
72
- // palette = [
73
- // // backgrounds
74
- // ...new Array(10).fill(0).map((_, i) => {
75
- // const [h, s, l] = hslas.background
76
-
77
- // if (isDark) {
78
- // const str = 9 - i
79
- // const minLum = 0.05
80
- // const by = (l - minLum) / 10
81
-
82
- // return hsla(
83
- // h,
84
- // s,
85
- // // go to dark or light
86
- // l - by * str,
87
- // 1
88
- // )
89
- // } else {
90
- // const str = 9 - i
91
- // const maxLum = 0.95
92
- // const by = (maxLum - l) / 10
93
- // return hsla(h, s, l + by * str, 1)
94
- // }
95
- // }),
96
- // // colors
97
- // ...new Array(2).fill(0).map((_, i) => {
98
- // const [h, s, l] = hslas.foreground
99
- // return hsla(
100
- // h,
101
- // s,
102
- // // go to dark or light
103
- // l - (i === 0 ? 0.1 : 0) - (forAccent ? 1 - l : 0),
104
- // 1
105
- // )
106
- // }),
107
- // ]
108
- // } else {
109
- // const lumValues = isDark ? lumScale.dark : lumScale.light
110
- // palette = lumValues.map((lum, idx) => {
111
- // const sat = satScale[scheme][idx]
112
-
113
- // if (theme.hueColor && idx >= 10) {
114
- // return hsla(theme.hueColor, sat, lum, 1)
115
- // }
116
-
117
- // return hsla(hue, sat, lum, 1)
118
- // })
119
- // }
120
-
121
- // add transparent values
122
- const [background] = palette
123
- const foreground = palette[palette.length - 1]
124
-
125
- const transparentValues = [background, foreground].map((color) => {
126
- const [h, s, l] = parseToHsla(color)
127
- // fully transparent to partially
128
- return [
129
- hsla(h, s, l, 0),
130
- hsla(h, s, l, 0.25),
131
- hsla(h, s, l, 0.5),
132
- hsla(h, s, l, 0.75),
133
- ] as const
134
- })
135
- const reverseForeground = [...transparentValues[1]].reverse()
136
- palette = [...transparentValues[0], ...palette, ...reverseForeground]
137
-
138
- if (theme.accent) {
139
- const accentPalette = generateColorPalette({
140
- theme: theme.accent,
141
- scheme,
142
- })
143
-
144
- // unshift bg
145
- palette.unshift(accentPalette[5 + 8])
146
- // push color
147
- palette.push(accentPalette[accentPalette.length - 6])
148
- } else {
149
- // were keeping the palettes the same length with or without accent to avoid headache
150
- palette.unshift('rgba(0,0,0,0)')
151
- palette.push('rgba(0,0,0,0)')
152
- }
153
-
154
- return palette
155
- }
156
-
157
- export function getThemeSuitePalettes(theme: BuildTheme): BuildThemeSuitePalettes {
158
- return {
159
- light: generateColorPalette({ theme, scheme: 'light' }),
160
- lightAccent: generateColorPalette({ theme, scheme: 'light', forAccent: true }),
161
- dark: generateColorPalette({ theme, scheme: 'dark' }),
162
- darkAccent: generateColorPalette({ theme, scheme: 'dark', forAccent: true }),
163
- }
164
- }