@kilivi/payloadcms-theme-management 0.1.6 → 0.1.8
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/components/ServerThemeInjector.d.ts +1 -1
- package/dist/components/ServerThemeInjector.d.ts.map +1 -1
- package/dist/components/{ServerThemeInjector.jsx → ServerThemeInjector.js} +47 -34
- package/dist/components/ServerThemeInjector.js.map +1 -0
- package/dist/components/ThemePreview.js +318 -0
- package/dist/components/ThemePreview.js.map +1 -0
- package/dist/components/typographyPreviewUtils.js +12 -17
- package/dist/components/typographyPreviewUtils.js.map +1 -1
- package/dist/constants/themeFonts.js +94 -24
- package/dist/constants/themeFonts.js.map +1 -1
- package/dist/fields/ColorPickerField.js +332 -0
- package/dist/fields/ColorPickerField.js.map +1 -0
- package/dist/fields/RadiusField.js +174 -0
- package/dist/fields/RadiusField.js.map +1 -0
- package/dist/fields/ThemeColorPickerField.js +163 -0
- package/dist/fields/ThemeColorPickerField.js.map +1 -0
- package/dist/fields/ThemePreviewField.js +558 -0
- package/dist/fields/ThemePreviewField.js.map +1 -0
- package/dist/fields/ThemeTokenSelectField.js +209 -0
- package/dist/fields/ThemeTokenSelectField.js.map +1 -0
- package/dist/fields/colorModeFields.js +167 -73
- package/dist/fields/colorModeFields.js.map +1 -1
- package/dist/fields/themeConfigurationField.d.ts +1 -1
- package/dist/fields/themeConfigurationField.d.ts.map +1 -1
- package/dist/fields/themeConfigurationField.js +224 -131
- package/dist/fields/themeConfigurationField.js.map +1 -1
- package/dist/index.d.ts +17 -16
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +52 -52
- package/dist/index.js.map +1 -1
- package/dist/payload-types.js +2 -2
- package/dist/payload-types.js.map +1 -1
- package/dist/plugin.d.ts +1 -2
- package/dist/plugin.d.ts.map +1 -1
- package/dist/plugin.js +2 -1
- package/dist/plugin.js.map +1 -1
- package/dist/presets.js +66 -65
- package/dist/presets.js.map +1 -1
- package/dist/providers/Theme/index.d.ts +1 -1
- package/dist/providers/Theme/index.d.ts.map +1 -1
- package/dist/providers/Theme/{index.jsx → index.js} +61 -31
- package/dist/providers/Theme/index.js.map +1 -0
- package/dist/providers/Theme/shared.d.ts +1 -1
- package/dist/providers/Theme/shared.d.ts.map +1 -1
- package/dist/providers/Theme/shared.js +34 -9
- package/dist/providers/Theme/shared.js.map +1 -1
- package/dist/providers/Theme/themeConfig.d.ts +1 -1
- package/dist/providers/Theme/themeConfig.d.ts.map +1 -1
- package/dist/providers/Theme/themeConfig.js +37 -36
- package/dist/providers/Theme/themeConfig.js.map +1 -1
- package/dist/providers/Theme/types.js +15 -13
- package/dist/providers/Theme/types.js.map +1 -1
- package/dist/server.d.ts +2 -2
- package/dist/server.d.ts.map +1 -1
- package/dist/server.js +3 -2
- package/dist/server.js.map +1 -1
- package/dist/types.d.ts +2 -2
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js +2 -1
- package/dist/types.js.map +1 -1
- package/dist/utils/resolveThemeConfiguration.d.ts +3 -3
- package/dist/utils/resolveThemeConfiguration.d.ts.map +1 -1
- package/dist/utils/resolveThemeConfiguration.js +53 -34
- package/dist/utils/resolveThemeConfiguration.js.map +1 -1
- package/dist/utils/themeAssets.d.ts +1 -1
- package/dist/utils/themeAssets.d.ts.map +1 -1
- package/dist/utils/themeAssets.js +4 -4
- package/dist/utils/themeAssets.js.map +1 -1
- package/dist/utils/themeColors.js +95 -41
- package/dist/utils/themeColors.js.map +1 -1
- package/dist/utils/themeUtils.d.ts +2 -2
- package/dist/utils/themeUtils.d.ts.map +1 -1
- package/dist/utils/themeUtils.js +32 -47
- package/dist/utils/themeUtils.js.map +1 -1
- package/package.json +13 -5
- package/dist/components/ServerThemeInjector.jsx.map +0 -1
- package/dist/components/ThemePreview.jsx +0 -231
- package/dist/components/ThemePreview.jsx.map +0 -1
- package/dist/fields/ColorPickerField.jsx +0 -205
- package/dist/fields/ColorPickerField.jsx.map +0 -1
- package/dist/fields/RadiusField.jsx +0 -123
- package/dist/fields/RadiusField.jsx.map +0 -1
- package/dist/fields/ThemeColorPickerField.jsx +0 -110
- package/dist/fields/ThemeColorPickerField.jsx.map +0 -1
- package/dist/fields/ThemePreviewField.jsx +0 -420
- package/dist/fields/ThemePreviewField.jsx.map +0 -1
- package/dist/fields/ThemeTokenSelectField.jsx +0 -151
- package/dist/fields/ThemeTokenSelectField.jsx.map +0 -1
- package/dist/providers/Theme/index.jsx.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { Mode, ThemeOption, ThemeDefaults } from './types';
|
|
1
|
+
import type { Mode, ThemeOption, ThemeDefaults } from './types.js';
|
|
2
2
|
export declare const themeLocalStorageKey = "payload-theme";
|
|
3
3
|
export declare const modeLocalStorageKey = "payload-theme-mode";
|
|
4
4
|
export declare const defaultTheme: ThemeDefaults;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/providers/Theme/shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/providers/Theme/shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAElE,eAAO,MAAM,oBAAoB,kBAAkB,CAAA;AACnD,eAAO,MAAM,mBAAmB,uBAAuB,CAAA;AAEvD,eAAO,MAAM,YAAY,EAAa,aAAa,CAAA;AACnD,eAAO,MAAM,WAAW,EAAa,IAAI,CAAA;AAEzC,eAAO,MAAM,YAAY,EASpB,WAAW,EAAE,CAAA;AAElB,eAAO,MAAM,yBAAyB,QAAO,IAAI,GAAG,IAUnD,CAAA"}
|
|
@@ -3,16 +3,40 @@ export const modeLocalStorageKey = 'payload-theme-mode';
|
|
|
3
3
|
export const defaultTheme = 'cool';
|
|
4
4
|
export const defaultMode = 'auto';
|
|
5
5
|
export const themeOptions = [
|
|
6
|
-
{
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
{
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
6
|
+
{
|
|
7
|
+
label: 'Cool & Professional',
|
|
8
|
+
value: 'cool'
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
label: 'Modern Brutalism',
|
|
12
|
+
value: 'brutal'
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
label: 'Neon Cyberpunk',
|
|
16
|
+
value: 'neon'
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
label: 'Dealership',
|
|
20
|
+
value: 'dealership'
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
label: 'Solar',
|
|
24
|
+
value: 'solar'
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
label: 'Real Estate Blue',
|
|
28
|
+
value: 'real-estate'
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
label: 'Real Estate Gold',
|
|
32
|
+
value: 'real-estate-gold'
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
label: 'Real Estate Neutral',
|
|
36
|
+
value: 'real-estate-neutral'
|
|
37
|
+
}
|
|
14
38
|
];
|
|
15
|
-
export const getImplicitModePreference = ()
|
|
39
|
+
export const getImplicitModePreference = ()=>{
|
|
16
40
|
const mediaQuery = '(prefers-color-scheme: dark)';
|
|
17
41
|
const mql = window.matchMedia(mediaQuery);
|
|
18
42
|
const hasImplicitPreference = typeof mql.matches === 'boolean';
|
|
@@ -21,4 +45,5 @@ export const getImplicitModePreference = () => {
|
|
|
21
45
|
}
|
|
22
46
|
return null;
|
|
23
47
|
};
|
|
48
|
+
|
|
24
49
|
//# sourceMappingURL=shared.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../src/providers/Theme/shared.ts"],"sourcesContent":["import type { Mode, ThemeOption, ThemeDefaults } from './types.js'\n\nexport const themeLocalStorageKey = 'payload-theme'\nexport const modeLocalStorageKey = 'payload-theme-mode'\n\nexport const defaultTheme = 'cool' as ThemeDefaults\nexport const defaultMode = 'auto' as Mode\n\nexport const themeOptions = [\n { label: 'Cool & Professional', value: 'cool' },\n { label: 'Modern Brutalism', value: 'brutal' },\n { label: 'Neon Cyberpunk', value: 'neon' },\n { label: 'Dealership', value: 'dealership' },\n { label: 'Solar', value: 'solar' },\n { label: 'Real Estate Blue', value: 'real-estate' },\n { label: 'Real Estate Gold', value: 'real-estate-gold' },\n { label: 'Real Estate Neutral', value: 'real-estate-neutral' },\n] as ThemeOption[]\n\nexport const getImplicitModePreference = (): Mode | null => {\n const mediaQuery = '(prefers-color-scheme: dark)'\n const mql = window.matchMedia(mediaQuery)\n const hasImplicitPreference = typeof mql.matches === 'boolean'\n\n if (hasImplicitPreference) {\n return mql.matches ? 'dark' : 'light'\n }\n\n return null\n}\n"],"names":["themeLocalStorageKey","modeLocalStorageKey","defaultTheme","defaultMode","themeOptions","label","value","getImplicitModePreference","mediaQuery","mql","window","matchMedia","hasImplicitPreference","matches"],"mappings":"AAEA,OAAO,MAAMA,uBAAuB,gBAAe;AACnD,OAAO,MAAMC,sBAAsB,qBAAoB;AAEvD,OAAO,MAAMC,eAAe,OAAuB;AACnD,OAAO,MAAMC,cAAc,OAAc;AAEzC,OAAO,MAAMC,eAAe;IAC1B;QAAEC,OAAO;QAAuBC,OAAO;IAAO;IAC9C;QAAED,OAAO;QAAoBC,OAAO;IAAS;IAC7C;QAAED,OAAO;QAAkBC,OAAO;IAAO;IACzC;QAAED,OAAO;QAAcC,OAAO;IAAa;IAC3C;QAAED,OAAO;QAASC,OAAO;IAAQ;IACjC;QAAED,OAAO;QAAoBC,OAAO;IAAc;IAClD;QAAED,OAAO;QAAoBC,OAAO;IAAmB;IACvD;QAAED,OAAO;QAAuBC,OAAO;IAAsB;CAC9D,CAAiB;AAElB,OAAO,MAAMC,4BAA4B;IACvC,MAAMC,aAAa;IACnB,MAAMC,MAAMC,OAAOC,UAAU,CAACH;IAC9B,MAAMI,wBAAwB,OAAOH,IAAII,OAAO,KAAK;IAErD,IAAID,uBAAuB;QACzB,OAAOH,IAAII,OAAO,GAAG,SAAS;IAChC;IAEA,OAAO;AACT,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themeConfig.d.ts","sourceRoot":"","sources":["../../../src/providers/Theme/themeConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"themeConfig.d.ts","sourceRoot":"","sources":["../../../src/providers/Theme/themeConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE5D,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,aAAa,EAAE,WAAW,CAyG3D,CAAA;AAED,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DtB,CAAA;AAEV,wBAAgB,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,WAAW,CAEhE;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,OAAO,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAE7E"}
|
|
@@ -8,9 +8,9 @@ export const themeConfigs = {
|
|
|
8
8
|
colors: {
|
|
9
9
|
primary: 'hsl(221 83% 53%)',
|
|
10
10
|
background: 'hsl(0 0% 100%)',
|
|
11
|
-
accent: 'hsl(210 40% 95%)'
|
|
12
|
-
}
|
|
13
|
-
}
|
|
11
|
+
accent: 'hsl(210 40% 95%)'
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
14
|
},
|
|
15
15
|
brutal: {
|
|
16
16
|
name: 'brutal',
|
|
@@ -21,9 +21,9 @@ export const themeConfigs = {
|
|
|
21
21
|
colors: {
|
|
22
22
|
primary: 'hsl(0 0% 0%)',
|
|
23
23
|
background: 'hsl(0 0% 100%)',
|
|
24
|
-
accent: 'hsl(0 72% 51%)'
|
|
25
|
-
}
|
|
26
|
-
}
|
|
24
|
+
accent: 'hsl(0 72% 51%)'
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
27
|
},
|
|
28
28
|
neon: {
|
|
29
29
|
name: 'neon',
|
|
@@ -34,9 +34,9 @@ export const themeConfigs = {
|
|
|
34
34
|
colors: {
|
|
35
35
|
primary: 'hsl(263 90% 51%)',
|
|
36
36
|
background: 'hsl(230 25% 5%)',
|
|
37
|
-
accent: 'hsl(180 100% 50%)'
|
|
38
|
-
}
|
|
39
|
-
}
|
|
37
|
+
accent: 'hsl(180 100% 50%)'
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
40
|
},
|
|
41
41
|
solar: {
|
|
42
42
|
name: 'solar',
|
|
@@ -47,9 +47,9 @@ export const themeConfigs = {
|
|
|
47
47
|
colors: {
|
|
48
48
|
primary: 'hsl(20 90% 45%)',
|
|
49
49
|
background: 'hsl(40 30% 95%)',
|
|
50
|
-
accent: 'hsl(40 100% 50%)'
|
|
51
|
-
}
|
|
52
|
-
}
|
|
50
|
+
accent: 'hsl(40 100% 50%)'
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
53
|
},
|
|
54
54
|
dealership: {
|
|
55
55
|
name: 'dealership',
|
|
@@ -60,9 +60,9 @@ export const themeConfigs = {
|
|
|
60
60
|
colors: {
|
|
61
61
|
primary: 'hsl(225 25% 25%)',
|
|
62
62
|
background: 'hsl(0 0% 98%)',
|
|
63
|
-
accent: 'hsl(15 85% 55%)'
|
|
64
|
-
}
|
|
65
|
-
}
|
|
63
|
+
accent: 'hsl(15 85% 55%)'
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
66
|
},
|
|
67
67
|
'real-estate': {
|
|
68
68
|
name: 'real-estate',
|
|
@@ -73,9 +73,9 @@ export const themeConfigs = {
|
|
|
73
73
|
colors: {
|
|
74
74
|
primary: 'hsl(220 90% 48%)',
|
|
75
75
|
background: 'hsl(220 40% 98.5%)',
|
|
76
|
-
accent: 'hsl(210 85% 55%)'
|
|
77
|
-
}
|
|
78
|
-
}
|
|
76
|
+
accent: 'hsl(210 85% 55%)'
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
79
|
},
|
|
80
80
|
'real-estate-gold': {
|
|
81
81
|
name: 'real-estate-gold',
|
|
@@ -86,9 +86,9 @@ export const themeConfigs = {
|
|
|
86
86
|
colors: {
|
|
87
87
|
primary: 'hsl(38 75% 45%)',
|
|
88
88
|
background: 'hsl(45 25% 97%)',
|
|
89
|
-
accent: 'hsl(42 85% 55%)'
|
|
90
|
-
}
|
|
91
|
-
}
|
|
89
|
+
accent: 'hsl(42 85% 55%)'
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
92
|
},
|
|
93
93
|
'real-estate-neutral': {
|
|
94
94
|
name: 'real-estate-neutral',
|
|
@@ -99,10 +99,10 @@ export const themeConfigs = {
|
|
|
99
99
|
colors: {
|
|
100
100
|
primary: 'hsl(25 35% 25%)',
|
|
101
101
|
background: 'hsl(30 8% 98%)',
|
|
102
|
-
accent: 'hsl(35 25% 45%)'
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
}
|
|
102
|
+
accent: 'hsl(35 25% 45%)'
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
106
|
};
|
|
107
107
|
export const borderRadiusPresets = {
|
|
108
108
|
none: {
|
|
@@ -114,8 +114,8 @@ export const borderRadiusPresets = {
|
|
|
114
114
|
'--radius-default': '0',
|
|
115
115
|
'--radius-medium': '0',
|
|
116
116
|
'--radius-large': '0',
|
|
117
|
-
'--radius-xl': '0'
|
|
118
|
-
}
|
|
117
|
+
'--radius-xl': '0'
|
|
118
|
+
}
|
|
119
119
|
},
|
|
120
120
|
small: {
|
|
121
121
|
label: 'Small',
|
|
@@ -126,8 +126,8 @@ export const borderRadiusPresets = {
|
|
|
126
126
|
'--radius-default': '0.375rem',
|
|
127
127
|
'--radius-medium': '0.5rem',
|
|
128
128
|
'--radius-large': '0.75rem',
|
|
129
|
-
'--radius-xl': '1rem'
|
|
130
|
-
}
|
|
129
|
+
'--radius-xl': '1rem'
|
|
130
|
+
}
|
|
131
131
|
},
|
|
132
132
|
medium: {
|
|
133
133
|
label: 'Medium',
|
|
@@ -138,8 +138,8 @@ export const borderRadiusPresets = {
|
|
|
138
138
|
'--radius-default': '0.75rem',
|
|
139
139
|
'--radius-medium': '1rem',
|
|
140
140
|
'--radius-large': '1.5rem',
|
|
141
|
-
'--radius-xl': '2rem'
|
|
142
|
-
}
|
|
141
|
+
'--radius-xl': '2rem'
|
|
142
|
+
}
|
|
143
143
|
},
|
|
144
144
|
large: {
|
|
145
145
|
label: 'Large',
|
|
@@ -150,8 +150,8 @@ export const borderRadiusPresets = {
|
|
|
150
150
|
'--radius-default': '1rem',
|
|
151
151
|
'--radius-medium': '1.5rem',
|
|
152
152
|
'--radius-large': '2rem',
|
|
153
|
-
'--radius-xl': '2.5rem'
|
|
154
|
-
}
|
|
153
|
+
'--radius-xl': '2.5rem'
|
|
154
|
+
}
|
|
155
155
|
},
|
|
156
156
|
xl: {
|
|
157
157
|
label: 'Extra Large',
|
|
@@ -162,9 +162,9 @@ export const borderRadiusPresets = {
|
|
|
162
162
|
'--radius-default': '1.5rem',
|
|
163
163
|
'--radius-medium': '2rem',
|
|
164
164
|
'--radius-large': '2.5rem',
|
|
165
|
-
'--radius-xl': '3rem'
|
|
166
|
-
}
|
|
167
|
-
}
|
|
165
|
+
'--radius-xl': '3rem'
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
168
|
};
|
|
169
169
|
export function getThemeConfig(theme) {
|
|
170
170
|
return themeConfigs[theme];
|
|
@@ -172,4 +172,5 @@ export function getThemeConfig(theme) {
|
|
|
172
172
|
export function getBorderRadiusConfig(preset) {
|
|
173
173
|
return borderRadiusPresets[preset];
|
|
174
174
|
}
|
|
175
|
+
|
|
175
176
|
//# sourceMappingURL=themeConfig.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../src/providers/Theme/themeConfig.ts"],"sourcesContent":["import type { ThemeConfig, ThemeDefaults } from './types.js'\n\nexport const themeConfigs: Record<ThemeDefaults, ThemeConfig> = {\n cool: {\n name: 'cool',\n label: 'Cool & Professional',\n borderRadius: 'medium',\n cssFile: '/themes/cool.css',\n preview: {\n colors: {\n primary: 'hsl(221 83% 53%)',\n background: 'hsl(0 0% 100%)',\n accent: 'hsl(210 40% 95%)',\n },\n },\n },\n brutal: {\n name: 'brutal',\n label: 'Modern Brutalism',\n borderRadius: 'none',\n cssFile: '/themes/brutal.css',\n preview: {\n colors: {\n primary: 'hsl(0 0% 0%)',\n background: 'hsl(0 0% 100%)',\n accent: 'hsl(0 72% 51%)',\n },\n },\n },\n neon: {\n name: 'neon',\n label: 'Neon Cyberpunk',\n borderRadius: 'medium',\n cssFile: '/themes/neon.css',\n preview: {\n colors: {\n primary: 'hsl(263 90% 51%)',\n background: 'hsl(230 25% 5%)',\n accent: 'hsl(180 100% 50%)',\n },\n },\n },\n solar: {\n name: 'solar',\n label: 'Solar',\n borderRadius: 'large',\n cssFile: '/themes/solar.css',\n preview: {\n colors: {\n primary: 'hsl(20 90% 45%)',\n background: 'hsl(40 30% 95%)',\n accent: 'hsl(40 100% 50%)',\n },\n },\n },\n dealership: {\n name: 'dealership',\n label: 'Dealership',\n borderRadius: 'medium',\n cssFile: '/themes/dealership.css',\n preview: {\n colors: {\n primary: 'hsl(225 25% 25%)',\n background: 'hsl(0 0% 98%)',\n accent: 'hsl(15 85% 55%)',\n },\n },\n },\n 'real-estate': {\n name: 'real-estate',\n label: 'Real Estate Blue',\n borderRadius: 'large',\n cssFile: '/themes/real-estate.css',\n preview: {\n colors: {\n primary: 'hsl(220 90% 48%)',\n background: 'hsl(220 40% 98.5%)',\n accent: 'hsl(210 85% 55%)',\n },\n },\n },\n 'real-estate-gold': {\n name: 'real-estate-gold',\n label: 'Real Estate Gold',\n borderRadius: 'large',\n cssFile: '/themes/real-estate-gold.css',\n preview: {\n colors: {\n primary: 'hsl(38 75% 45%)',\n background: 'hsl(45 25% 97%)',\n accent: 'hsl(42 85% 55%)',\n },\n },\n },\n 'real-estate-neutral': {\n name: 'real-estate-neutral',\n label: 'Real Estate Neutral',\n borderRadius: 'large',\n cssFile: '/themes/real-estate-neutral.css',\n preview: {\n colors: {\n primary: 'hsl(25 35% 25%)',\n background: 'hsl(30 8% 98%)',\n accent: 'hsl(35 25% 45%)',\n },\n },\n },\n}\n\nexport const borderRadiusPresets = {\n none: {\n label: 'None',\n value: 'none',\n css: {\n '--radius-xs': '0',\n '--radius-small': '0',\n '--radius-default': '0',\n '--radius-medium': '0',\n '--radius-large': '0',\n '--radius-xl': '0',\n },\n },\n small: {\n label: 'Small',\n value: 'small',\n css: {\n '--radius-xs': '0.125rem',\n '--radius-small': '0.25rem',\n '--radius-default': '0.375rem',\n '--radius-medium': '0.5rem',\n '--radius-large': '0.75rem',\n '--radius-xl': '1rem',\n },\n },\n medium: {\n label: 'Medium',\n value: 'medium',\n css: {\n '--radius-xs': '0.25rem',\n '--radius-small': '0.5rem',\n '--radius-default': '0.75rem',\n '--radius-medium': '1rem',\n '--radius-large': '1.5rem',\n '--radius-xl': '2rem',\n },\n },\n large: {\n label: 'Large',\n value: 'large',\n css: {\n '--radius-xs': '0.5rem',\n '--radius-small': '0.75rem',\n '--radius-default': '1rem',\n '--radius-medium': '1.5rem',\n '--radius-large': '2rem',\n '--radius-xl': '2.5rem',\n },\n },\n xl: {\n label: 'Extra Large',\n value: 'xl',\n css: {\n '--radius-xs': '0.75rem',\n '--radius-small': '1rem',\n '--radius-default': '1.5rem',\n '--radius-medium': '2rem',\n '--radius-large': '2.5rem',\n '--radius-xl': '3rem',\n },\n },\n} as const\n\nexport function getThemeConfig(theme: ThemeDefaults): ThemeConfig {\n return themeConfigs[theme]\n}\n\nexport function getBorderRadiusConfig(preset: keyof typeof borderRadiusPresets) {\n return borderRadiusPresets[preset]\n}\n"],"names":["themeConfigs","cool","name","label","borderRadius","cssFile","preview","colors","primary","background","accent","brutal","neon","solar","dealership","borderRadiusPresets","none","value","css","small","medium","large","xl","getThemeConfig","theme","getBorderRadiusConfig","preset"],"mappings":"AAEA,OAAO,MAAMA,eAAmD;IAC9DC,MAAM;QACJC,MAAM;QACNC,OAAO;QACPC,cAAc;QACdC,SAAS;QACTC,SAAS;YACPC,QAAQ;gBACNC,SAAS;gBACTC,YAAY;gBACZC,QAAQ;YACV;QACF;IACF;IACAC,QAAQ;QACNT,MAAM;QACNC,OAAO;QACPC,cAAc;QACdC,SAAS;QACTC,SAAS;YACPC,QAAQ;gBACNC,SAAS;gBACTC,YAAY;gBACZC,QAAQ;YACV;QACF;IACF;IACAE,MAAM;QACJV,MAAM;QACNC,OAAO;QACPC,cAAc;QACdC,SAAS;QACTC,SAAS;YACPC,QAAQ;gBACNC,SAAS;gBACTC,YAAY;gBACZC,QAAQ;YACV;QACF;IACF;IACAG,OAAO;QACLX,MAAM;QACNC,OAAO;QACPC,cAAc;QACdC,SAAS;QACTC,SAAS;YACPC,QAAQ;gBACNC,SAAS;gBACTC,YAAY;gBACZC,QAAQ;YACV;QACF;IACF;IACAI,YAAY;QACVZ,MAAM;QACNC,OAAO;QACPC,cAAc;QACdC,SAAS;QACTC,SAAS;YACPC,QAAQ;gBACNC,SAAS;gBACTC,YAAY;gBACZC,QAAQ;YACV;QACF;IACF;IACA,eAAe;QACbR,MAAM;QACNC,OAAO;QACPC,cAAc;QACdC,SAAS;QACTC,SAAS;YACPC,QAAQ;gBACNC,SAAS;gBACTC,YAAY;gBACZC,QAAQ;YACV;QACF;IACF;IACA,oBAAoB;QAClBR,MAAM;QACNC,OAAO;QACPC,cAAc;QACdC,SAAS;QACTC,SAAS;YACPC,QAAQ;gBACNC,SAAS;gBACTC,YAAY;gBACZC,QAAQ;YACV;QACF;IACF;IACA,uBAAuB;QACrBR,MAAM;QACNC,OAAO;QACPC,cAAc;QACdC,SAAS;QACTC,SAAS;YACPC,QAAQ;gBACNC,SAAS;gBACTC,YAAY;gBACZC,QAAQ;YACV;QACF;IACF;AACF,EAAC;AAED,OAAO,MAAMK,sBAAsB;IACjCC,MAAM;QACJb,OAAO;QACPc,OAAO;QACPC,KAAK;YACH,eAAe;YACf,kBAAkB;YAClB,oBAAoB;YACpB,mBAAmB;YACnB,kBAAkB;YAClB,eAAe;QACjB;IACF;IACAC,OAAO;QACLhB,OAAO;QACPc,OAAO;QACPC,KAAK;YACH,eAAe;YACf,kBAAkB;YAClB,oBAAoB;YACpB,mBAAmB;YACnB,kBAAkB;YAClB,eAAe;QACjB;IACF;IACAE,QAAQ;QACNjB,OAAO;QACPc,OAAO;QACPC,KAAK;YACH,eAAe;YACf,kBAAkB;YAClB,oBAAoB;YACpB,mBAAmB;YACnB,kBAAkB;YAClB,eAAe;QACjB;IACF;IACAG,OAAO;QACLlB,OAAO;QACPc,OAAO;QACPC,KAAK;YACH,eAAe;YACf,kBAAkB;YAClB,oBAAoB;YACpB,mBAAmB;YACnB,kBAAkB;YAClB,eAAe;QACjB;IACF;IACAI,IAAI;QACFnB,OAAO;QACPc,OAAO;QACPC,KAAK;YACH,eAAe;YACf,kBAAkB;YAClB,oBAAoB;YACpB,mBAAmB;YACnB,kBAAkB;YAClB,eAAe;QACjB;IACF;AACF,EAAU;AAEV,OAAO,SAASK,eAAeC,KAAoB;IACjD,OAAOxB,YAAY,CAACwB,MAAM;AAC5B;AAEA,OAAO,SAASC,sBAAsBC,MAAwC;IAC5E,OAAOX,mBAAmB,CAACW,OAAO;AACpC"}
|
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
export function themeIsValid(string) {
|
|
2
|
-
return string
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
].includes(string)
|
|
13
|
-
: false;
|
|
2
|
+
return string ? [
|
|
3
|
+
'cool',
|
|
4
|
+
'brutal',
|
|
5
|
+
'neon',
|
|
6
|
+
'solar',
|
|
7
|
+
'dealership',
|
|
8
|
+
'real-estate',
|
|
9
|
+
'real-estate-gold',
|
|
10
|
+
'real-estate-neutral'
|
|
11
|
+
].includes(string) : false;
|
|
14
12
|
}
|
|
15
13
|
export function modeIsValid(string) {
|
|
16
|
-
return string ? [
|
|
14
|
+
return string ? [
|
|
15
|
+
'dark',
|
|
16
|
+
'light'
|
|
17
|
+
].includes(string) : false;
|
|
17
18
|
}
|
|
19
|
+
|
|
18
20
|
//# sourceMappingURL=types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../src/providers/Theme/types.ts"],"sourcesContent":["export type ThemeDefaults =\n | 'cool'\n | 'brutal'\n | 'neon'\n | 'solar'\n | 'dealership'\n | 'real-estate'\n | 'real-estate-gold'\n | 'real-estate-neutral';\n\nexport type Mode = 'dark' | 'light' | 'auto';\n\nexport type BorderRadiusPreset = 'none' | 'small' | 'medium' | 'large' | 'xl';\n\nexport type FontScalePreset = 'small' | 'medium' | 'large' | 'xl';\n\nexport type SpacingPreset = 'compact' | 'medium' | 'spacious';\n\nexport type AnimationLevelPreset = 'none' | 'reduced' | 'medium' | 'high';\n\nexport type ColorModePreset = 'auto' | 'light' | 'dark';\n\nexport interface ThemeConfig {\n name: string;\n label: string;\n borderRadius: BorderRadiusPreset;\n cssFile: string;\n preview?: {\n colors: {\n primary: string;\n background: string;\n accent: string;\n };\n };\n}\n\nexport interface ThemeContextType {\n // Theme management\n theme?: ThemeDefaults | null;\n setTheme?: (theme: ThemeDefaults) => void; // Add setTheme for enhanced functionality\n refreshTheme: () => void; // Refresh theme (now handled server-side)\n\n // Color mode\n mode?: Mode | null;\n setMode: (mode: Mode | null) => void;\n isColorModeToggleAllowed?: boolean; // Whether admin allows color mode changes\n\n // Design controls\n borderRadius?: BorderRadiusPreset;\n setBorderRadius?: (radius: BorderRadiusPreset) => void;\n fontScale?: FontScalePreset;\n setFontScale?: (scale: FontScalePreset) => void;\n spacing?: SpacingPreset;\n setSpacing?: (spacing: SpacingPreset) => void;\n animationLevel?: AnimationLevelPreset;\n setAnimationLevel?: (level: AnimationLevelPreset) => void;\n\n // Theme loading\n preloadTheme?: (theme: ThemeDefaults) => Promise<boolean>;\n isThemeLoaded?: (theme: ThemeDefaults) => boolean;\n\n // Enhanced configuration\n themeConfig?: any; // Enhanced theme configuration from plugin\n}\n\nexport interface ThemeOption {\n label: string;\n value: ThemeDefaults;\n config?: ThemeConfig;\n}\n\nexport function themeIsValid(string: null | string): string is ThemeDefaults {\n return string\n ? [\n 'cool',\n 'brutal',\n 'neon',\n 'solar',\n 'dealership',\n 'real-estate',\n 'real-estate-gold',\n 'real-estate-neutral',\n ].includes(string)\n : false;\n}\n\nexport function modeIsValid(string: null | string): string is Mode {\n return string ? ['dark', 'light'].includes(string) : false;\n}\n"],"names":["themeIsValid","string","includes","modeIsValid"],"mappings":"AAuEA,OAAO,SAASA,aAAaC,MAAqB;IAChD,OAAOA,SACH;QACE;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACD,CAACC,QAAQ,CAACD,UACX;AACN;AAEA,OAAO,SAASE,YAAYF,MAAqB;IAC/C,OAAOA,SAAS;QAAC;QAAQ;KAAQ,CAACC,QAAQ,CAACD,UAAU;AACvD"}
|
package/dist/server.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { ServerThemeInjector } from './components/ServerThemeInjector';
|
|
2
|
-
export { createFallbackCriticalCSS, generateThemePreloadLinks, getThemeCriticalCSS, getThemeCSSPath, } from './utils/themeAssets';
|
|
1
|
+
export { ServerThemeInjector } from './components/ServerThemeInjector.js';
|
|
2
|
+
export { createFallbackCriticalCSS, generateThemePreloadLinks, getThemeCriticalCSS, getThemeCSSPath, } from './utils/themeAssets.js';
|
|
3
3
|
//# sourceMappingURL=server.d.ts.map
|
package/dist/server.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAA;AAEzE,OAAO,EACL,yBAAyB,EACzB,yBAAyB,EACzB,mBAAmB,EACnB,eAAe,GAChB,MAAM,wBAAwB,CAAA"}
|
package/dist/server.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
export { ServerThemeInjector } from './components/ServerThemeInjector';
|
|
2
|
-
export { createFallbackCriticalCSS, generateThemePreloadLinks, getThemeCriticalCSS, getThemeCSSPath
|
|
1
|
+
export { ServerThemeInjector } from './components/ServerThemeInjector.js';
|
|
2
|
+
export { createFallbackCriticalCSS, generateThemePreloadLinks, getThemeCriticalCSS, getThemeCSSPath } from './utils/themeAssets.js';
|
|
3
|
+
|
|
3
4
|
//# sourceMappingURL=server.js.map
|
package/dist/server.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../src/server.ts"],"sourcesContent":["export { ServerThemeInjector } from './components/ServerThemeInjector.js'\n\nexport {\n createFallbackCriticalCSS,\n generateThemePreloadLinks,\n getThemeCriticalCSS,\n getThemeCSSPath,\n} from './utils/themeAssets.js'\n"],"names":["ServerThemeInjector","createFallbackCriticalCSS","generateThemePreloadLinks","getThemeCriticalCSS","getThemeCSSPath"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,sCAAqC;AAEzE,SACEC,yBAAyB,EACzBC,yBAAyB,EACzBC,mBAAmB,EACnBC,eAAe,QACV,yBAAwB"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { ThemePreset } from './presets';
|
|
2
|
-
export interface
|
|
1
|
+
import type { ThemePreset } from './presets.js';
|
|
2
|
+
export interface ThemeManagementPluginOptions {
|
|
3
3
|
/** Whether the plugin should register itself */
|
|
4
4
|
enabled?: boolean;
|
|
5
5
|
/** Collection slug that stores site-level settings (default: `site-settings`) */
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE/C,MAAM,WAAW,4BAA4B;IAC5C,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,yCAAyC;IACzC,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;IAC5B,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gEAAgE;IAChE,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,+BAA+B;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,gDAAgD;IAChD,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,uDAAuD;IACvD,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,kDAAkD;IAClD,aAAa,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,8BAA8B;IAC9C,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,0DAA0D;IAC1D,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,8BAA8B;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;CACvD"}
|
package/dist/types.js
CHANGED
package/dist/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { ThemePreset } from './presets.js'\n\nexport interface ThemeManagementPluginOptions {\n\t/** Whether the plugin should register itself */\n\tenabled?: boolean\n\t/** Collection slug that stores site-level settings (default: `site-settings`) */\n\ttargetCollection?: string\n\t/** Theme presets available to editors */\n\tthemePresets?: ThemePreset[]\n\t/** Default preset name when no value is stored */\n\tdefaultTheme?: string\n\t/** Allow editors to toggle between light / dark / auto modes */\n\tincludeColorModeToggle?: boolean\n\t/** Expose custom CSS editor */\n\tincludeCustomCSS?: boolean\n\t/** Reserved for future use, keeps API parity */\n\tincludeBrandIdentity?: boolean\n\t/** Enable advanced controls such as animation level */\n\tenableAdvancedFeatures?: boolean\n\t/** Log helpful messages during config mutation */\n\tenableLogging?: boolean\n}\n\nexport interface FetchThemeConfigurationOptions {\n\t/** Optional tenant identifier if your project is multi-tenant */\n\ttenantSlug?: string\n\t/** Collection slug override (default: `site-settings`) */\n\tcollectionSlug?: string\n\t/** Depth parameter passed to Payload REST API */\n\tdepth?: number\n\t/** Locale parameter passed to Payload REST API */\n\tlocale?: string\n\t/** Include draft documents */\n\tdraft?: boolean\n\t/** Extra query parameters to append to the request */\n\tqueryParams?: Record<string, string | number | boolean>\n}\n\n"],"names":[],"mappings":"AAuBA,WAaC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { SiteSetting } from '
|
|
2
|
-
import type { Mode, ThemeDefaults } from '
|
|
3
|
-
import type { ThemeTypographyPreset } from '../presets';
|
|
1
|
+
import type { SiteSetting } from '../payload-types.js';
|
|
2
|
+
import type { Mode, ThemeDefaults } from '../providers/Theme/types.js';
|
|
3
|
+
import type { ThemeTypographyPreset } from '../presets.js';
|
|
4
4
|
interface ThemeTypographyOverride {
|
|
5
5
|
bodyFont?: string | null;
|
|
6
6
|
headingFont?: string | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resolveThemeConfiguration.d.ts","sourceRoot":"","sources":["../../src/utils/resolveThemeConfiguration.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"resolveThemeConfiguration.d.ts","sourceRoot":"","sources":["../../src/utils/resolveThemeConfiguration.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAEtE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAG1D,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC3B;AAED,KAAK,sBAAsB,GAAG,WAAW,CAAC,oBAAoB,CAAC,GAAG;IAChE,UAAU,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAA;CAC5C,CAAA;AAED,QAAA,MAAM,oBAAoB,qDAAsD,CAAA;AAIhF,QAAA,MAAM,iBAAiB,uCAAwC,CAAA;AAC/D,QAAA,MAAM,cAAc,4CAA6C,CAAA;AACjE,QAAA,MAAM,sBAAsB,gDAAiD,CAAA;AAM7E,KAAK,kBAAkB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC/D,KAAK,eAAe,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AACzD,KAAK,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AACpD,KAAK,oBAAoB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAA;AAInE,KAAK,uBAAuB,GAAG,WAAW,CAAC,sBAAsB,CAAC,WAAW,CAAC,CAAC,CAAA;AAO/E,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,aAAa,CAAA;IACpB,SAAS,EAAE,IAAI,CAAA;IACf,oBAAoB,EAAE,OAAO,CAAA;IAC7B,YAAY,EAAE,kBAAkB,CAAA;IAChC,SAAS,EAAE,eAAe,CAAA;IAC1B,OAAO,EAAE,aAAa,CAAA;IACtB,cAAc,EAAE,oBAAoB,CAAA;IACpC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,uBAAuB,CAAA;IACnC,QAAQ,CAAC,EAAE,uBAAuB,CAAA;IAClC,UAAU,EAAE,qBAAqB,GAAG,IAAI,CAAA;CACzC;AAED,eAAO,MAAM,2BAA2B,EAAE,0BAYzC,CAAA;AA4CD,wBAAgB,yBAAyB,CACvC,kBAAkB,CAAC,EAAE,sBAAsB,GAAG,IAAI,GACjD,0BAA0B,CA0D5B"}
|
|
@@ -1,19 +1,42 @@
|
|
|
1
|
-
import { FONT_VALUE_TO_CSS } from '
|
|
2
|
-
import { themeIsValid } from '
|
|
3
|
-
import { defaultThemePresets } from '../presets';
|
|
4
|
-
const BORDER_RADIUS_VALUES = [
|
|
1
|
+
import { FONT_VALUE_TO_CSS } from '../constants/themeFonts.js';
|
|
2
|
+
import { themeIsValid } from '../providers/Theme/types.js';
|
|
3
|
+
import { defaultThemePresets } from '../presets.js';
|
|
4
|
+
const BORDER_RADIUS_VALUES = [
|
|
5
|
+
'none',
|
|
6
|
+
'small',
|
|
7
|
+
'medium',
|
|
8
|
+
'large',
|
|
9
|
+
'xl'
|
|
10
|
+
];
|
|
5
11
|
const LEGACY_BORDER_RADIUS_ALIASES = {
|
|
6
|
-
full: 'xl'
|
|
12
|
+
full: 'xl'
|
|
7
13
|
};
|
|
8
|
-
const FONT_SCALE_VALUES = [
|
|
9
|
-
|
|
10
|
-
|
|
14
|
+
const FONT_SCALE_VALUES = [
|
|
15
|
+
'small',
|
|
16
|
+
'medium',
|
|
17
|
+
'large'
|
|
18
|
+
];
|
|
19
|
+
const SPACING_VALUES = [
|
|
20
|
+
'compact',
|
|
21
|
+
'medium',
|
|
22
|
+
'spacious'
|
|
23
|
+
];
|
|
24
|
+
const ANIMATION_LEVEL_VALUES = [
|
|
25
|
+
'none',
|
|
26
|
+
'reduced',
|
|
27
|
+
'medium',
|
|
28
|
+
'high'
|
|
29
|
+
];
|
|
11
30
|
const LEGACY_ANIMATION_ALIASES = {
|
|
12
|
-
full: 'high'
|
|
31
|
+
full: 'high'
|
|
13
32
|
};
|
|
14
|
-
const MODE_VALUES = [
|
|
33
|
+
const MODE_VALUES = [
|
|
34
|
+
'auto',
|
|
35
|
+
'light',
|
|
36
|
+
'dark'
|
|
37
|
+
];
|
|
15
38
|
const DEFAULT_THEME_NAME = 'cool';
|
|
16
|
-
const DEFAULT_THEME_PRESET = defaultThemePresets.find((preset)
|
|
39
|
+
const DEFAULT_THEME_PRESET = defaultThemePresets.find((preset)=>preset.name === DEFAULT_THEME_NAME);
|
|
17
40
|
export const DEFAULT_THEME_CONFIGURATION = {
|
|
18
41
|
theme: DEFAULT_THEME_NAME,
|
|
19
42
|
colorMode: 'auto',
|
|
@@ -25,7 +48,7 @@ export const DEFAULT_THEME_CONFIGURATION = {
|
|
|
25
48
|
customCSS: null,
|
|
26
49
|
lightMode: DEFAULT_THEME_PRESET?.lightMode,
|
|
27
50
|
darkMode: DEFAULT_THEME_PRESET?.darkMode,
|
|
28
|
-
typography: DEFAULT_THEME_PRESET?.typography ?? null
|
|
51
|
+
typography: DEFAULT_THEME_PRESET?.typography ?? null
|
|
29
52
|
};
|
|
30
53
|
function resolveBorderRadius(value) {
|
|
31
54
|
if (typeof value === 'string') {
|
|
@@ -64,24 +87,16 @@ export function resolveThemeConfiguration(themeConfiguration) {
|
|
|
64
87
|
if (!themeConfiguration) {
|
|
65
88
|
return DEFAULT_THEME_CONFIGURATION;
|
|
66
89
|
}
|
|
67
|
-
const { theme, colorMode, allowColorModeToggle, borderRadius, fontScale, spacing, animationLevel, customCSS, lightMode, darkMode, typography
|
|
68
|
-
const resolvedTheme = typeof theme === 'string' && themeIsValid(theme)
|
|
69
|
-
|
|
70
|
-
: DEFAULT_THEME_CONFIGURATION.theme;
|
|
71
|
-
const resolvedMode = isMode(colorMode)
|
|
72
|
-
? colorMode
|
|
73
|
-
: DEFAULT_THEME_CONFIGURATION.colorMode;
|
|
90
|
+
const { theme, colorMode, allowColorModeToggle, borderRadius, fontScale, spacing, animationLevel, customCSS, lightMode, darkMode, typography } = themeConfiguration;
|
|
91
|
+
const resolvedTheme = typeof theme === 'string' && themeIsValid(theme) ? theme : DEFAULT_THEME_CONFIGURATION.theme;
|
|
92
|
+
const resolvedMode = isMode(colorMode) ? colorMode : DEFAULT_THEME_CONFIGURATION.colorMode;
|
|
74
93
|
const resolvedBorderRadius = resolveBorderRadius(borderRadius);
|
|
75
|
-
const resolvedFontScale = isFontScale(fontScale)
|
|
76
|
-
? fontScale
|
|
77
|
-
: DEFAULT_THEME_CONFIGURATION.fontScale;
|
|
94
|
+
const resolvedFontScale = isFontScale(fontScale) ? fontScale : DEFAULT_THEME_CONFIGURATION.fontScale;
|
|
78
95
|
const resolvedSpacing = isSpacing(spacing) ? spacing : DEFAULT_THEME_CONFIGURATION.spacing;
|
|
79
96
|
const resolvedAnimationLevel = resolveAnimationLevel(animationLevel);
|
|
80
|
-
const resolvedAllowToggle = typeof allowColorModeToggle === 'boolean'
|
|
81
|
-
? allowColorModeToggle
|
|
82
|
-
: DEFAULT_THEME_CONFIGURATION.allowColorModeToggle;
|
|
97
|
+
const resolvedAllowToggle = typeof allowColorModeToggle === 'boolean' ? allowColorModeToggle : DEFAULT_THEME_CONFIGURATION.allowColorModeToggle;
|
|
83
98
|
const resolvedCustomCSS = typeof customCSS === 'string' ? customCSS : null;
|
|
84
|
-
const preset = defaultThemePresets.find((candidate)
|
|
99
|
+
const preset = defaultThemePresets.find((candidate)=>candidate.name === resolvedTheme);
|
|
85
100
|
const baseLightMode = preset?.lightMode ?? DEFAULT_THEME_CONFIGURATION.lightMode;
|
|
86
101
|
const baseDarkMode = preset?.darkMode ?? DEFAULT_THEME_CONFIGURATION.darkMode;
|
|
87
102
|
const resolvedLightMode = mergeColorModes(baseLightMode, lightMode);
|
|
@@ -98,24 +113,23 @@ export function resolveThemeConfiguration(themeConfiguration) {
|
|
|
98
113
|
customCSS: resolvedCustomCSS,
|
|
99
114
|
lightMode: resolvedLightMode,
|
|
100
115
|
darkMode: resolvedDarkMode,
|
|
101
|
-
typography: resolvedTypography
|
|
116
|
+
typography: resolvedTypography
|
|
102
117
|
};
|
|
103
118
|
}
|
|
104
119
|
function mergeColorModes(base, overrides) {
|
|
105
120
|
const merged = {};
|
|
106
121
|
if (base) {
|
|
107
|
-
Object.entries(base).forEach(([key, value])
|
|
122
|
+
Object.entries(base).forEach(([key, value])=>{
|
|
108
123
|
if (typeof value === 'string' && value.trim().length > 0) {
|
|
109
124
|
merged[key] = value;
|
|
110
125
|
}
|
|
111
126
|
});
|
|
112
127
|
}
|
|
113
128
|
if (overrides) {
|
|
114
|
-
Object.entries(overrides).forEach(([key, value])
|
|
129
|
+
Object.entries(overrides).forEach(([key, value])=>{
|
|
115
130
|
if (typeof value === 'string' && value.trim().length > 0) {
|
|
116
131
|
merged[key] = value;
|
|
117
|
-
}
|
|
118
|
-
else if (value === null) {
|
|
132
|
+
} else if (value === null) {
|
|
119
133
|
delete merged[key];
|
|
120
134
|
}
|
|
121
135
|
});
|
|
@@ -131,8 +145,12 @@ function mergeTypography(base, overrides) {
|
|
|
131
145
|
headingFamily: base?.headingFamily ?? 'var(--font-geist-sans)',
|
|
132
146
|
baseFontSize: base?.baseFontSize ?? '16px',
|
|
133
147
|
lineHeight: base?.lineHeight ?? '1.6',
|
|
134
|
-
fontWeights: {
|
|
135
|
-
|
|
148
|
+
fontWeights: {
|
|
149
|
+
...base?.fontWeights ?? {}
|
|
150
|
+
},
|
|
151
|
+
letterSpacing: {
|
|
152
|
+
...base?.letterSpacing ?? {}
|
|
153
|
+
}
|
|
136
154
|
};
|
|
137
155
|
if (overrides) {
|
|
138
156
|
const resolvedBodyFont = resolveFontSelection(overrides.bodyFont, overrides.bodyFontCustom, base?.fontFamily);
|
|
@@ -158,9 +176,10 @@ function resolveFontSelection(selection, custom, fallback) {
|
|
|
158
176
|
}
|
|
159
177
|
if (selection === 'custom') {
|
|
160
178
|
const trimmed = custom?.trim();
|
|
161
|
-
return trimmed && trimmed.length > 0 ? trimmed :
|
|
179
|
+
return trimmed && trimmed.length > 0 ? trimmed : fallback ?? null;
|
|
162
180
|
}
|
|
163
181
|
const mapped = FONT_VALUE_TO_CSS[selection];
|
|
164
182
|
return mapped ?? fallback ?? null;
|
|
165
183
|
}
|
|
184
|
+
|
|
166
185
|
//# sourceMappingURL=resolveThemeConfiguration.js.map
|