@doneisbetter/gds-theme 3.0.1 → 3.0.3
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/chunk-G42DZXE5.mjs +233 -0
- package/dist/{chunk-TAPLA36E.mjs → chunk-OMSQVRZK.mjs} +288 -0
- package/dist/client.d.mts +34 -3
- package/dist/client.d.ts +34 -3
- package/dist/client.js +436 -3
- package/dist/client.mjs +12 -2
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +436 -3
- package/dist/index.mjs +12 -2
- package/dist/server.d.mts +38 -1
- package/dist/server.d.ts +38 -1
- package/dist/server.js +291 -0
- package/dist/server.mjs +7 -1
- package/package.json +1 -1
- package/styles.css +233 -0
- package/dist/chunk-7B3MG4NV.mjs +0 -88
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
import {
|
|
2
|
+
applyGdsFontLane,
|
|
3
|
+
gdsTheme,
|
|
4
|
+
getGdsFontLanes,
|
|
5
|
+
getGdsThemePresets,
|
|
6
|
+
getGdsVibeThemeCssVariables,
|
|
7
|
+
resolveGdsThemePreset
|
|
8
|
+
} from "./chunk-OMSQVRZK.mjs";
|
|
9
|
+
|
|
10
|
+
// src/theme-runtime.ts
|
|
11
|
+
import { useCallback, useEffect, useState } from "react";
|
|
12
|
+
var defaultStorageKey = "gds-theme-preset-selection";
|
|
13
|
+
function isThemePresetId(value) {
|
|
14
|
+
return typeof value === "string" && getGdsThemePresets().some((preset) => preset.id === value);
|
|
15
|
+
}
|
|
16
|
+
function isFontLaneId(value) {
|
|
17
|
+
return typeof value === "string" && getGdsFontLanes().some((lane) => lane.id === value);
|
|
18
|
+
}
|
|
19
|
+
function isScheme(value) {
|
|
20
|
+
return value === "light" || value === "dark" || value === "auto";
|
|
21
|
+
}
|
|
22
|
+
function resolveEffectiveScheme(preset, colorScheme) {
|
|
23
|
+
if (preset === "dark-public" || preset === "neon-night") {
|
|
24
|
+
return "dark";
|
|
25
|
+
}
|
|
26
|
+
return colorScheme;
|
|
27
|
+
}
|
|
28
|
+
function createGdsThemePresetSelection(stored = {}) {
|
|
29
|
+
const preset = isThemePresetId(stored.preset) ? stored.preset : "default";
|
|
30
|
+
const requestedColorScheme = isScheme(stored.colorScheme) ? stored.colorScheme : "light";
|
|
31
|
+
const colorScheme = resolveEffectiveScheme(preset, requestedColorScheme);
|
|
32
|
+
const fontLane = isFontLaneId(stored.fontLane) ? stored.fontLane : "inter";
|
|
33
|
+
const brandPrimary = typeof stored.brandPrimary === "string" ? stored.brandPrimary : "blue";
|
|
34
|
+
const brandFlatSurfaces = typeof stored.brandFlatSurfaces === "boolean" ? stored.brandFlatSurfaces : true;
|
|
35
|
+
const brandEditorialSerif = typeof stored.brandEditorialSerif === "boolean" ? stored.brandEditorialSerif : false;
|
|
36
|
+
const runtimeKey = `${preset}-${colorScheme}-${brandPrimary}-${brandFlatSurfaces}-${brandEditorialSerif}-${fontLane}`;
|
|
37
|
+
return {
|
|
38
|
+
preset,
|
|
39
|
+
colorScheme,
|
|
40
|
+
theme: applyGdsFontLane(resolveGdsThemePreset(preset, {
|
|
41
|
+
brandPrimary,
|
|
42
|
+
brandFlatSurfaces,
|
|
43
|
+
brandEditorialSerif
|
|
44
|
+
}), fontLane),
|
|
45
|
+
fontLane,
|
|
46
|
+
runtimeKey,
|
|
47
|
+
brandPrimary,
|
|
48
|
+
brandFlatSurfaces,
|
|
49
|
+
brandEditorialSerif
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
function readStoredSelection(storageKey, initialSelection) {
|
|
53
|
+
if (typeof window === "undefined") {
|
|
54
|
+
return createGdsThemePresetSelection(initialSelection);
|
|
55
|
+
}
|
|
56
|
+
try {
|
|
57
|
+
const stored = window.localStorage.getItem(storageKey);
|
|
58
|
+
return createGdsThemePresetSelection(stored ? JSON.parse(stored) : initialSelection);
|
|
59
|
+
} catch {
|
|
60
|
+
return createGdsThemePresetSelection(initialSelection);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
function persistSelection(storageKey, selection) {
|
|
64
|
+
if (typeof window === "undefined") {
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
const stored = {
|
|
68
|
+
preset: selection.preset,
|
|
69
|
+
colorScheme: selection.colorScheme,
|
|
70
|
+
fontLane: selection.fontLane,
|
|
71
|
+
runtimeKey: selection.runtimeKey,
|
|
72
|
+
brandPrimary: selection.brandPrimary,
|
|
73
|
+
brandFlatSurfaces: selection.brandFlatSurfaces,
|
|
74
|
+
brandEditorialSerif: selection.brandEditorialSerif
|
|
75
|
+
};
|
|
76
|
+
try {
|
|
77
|
+
window.localStorage.setItem(storageKey, JSON.stringify(stored));
|
|
78
|
+
} catch {
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
function resolveDocumentScheme(selection) {
|
|
82
|
+
if (selection.colorScheme !== "auto") {
|
|
83
|
+
return selection.colorScheme;
|
|
84
|
+
}
|
|
85
|
+
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
86
|
+
}
|
|
87
|
+
function applyDocumentRuntime(selection) {
|
|
88
|
+
const documentScheme = resolveDocumentScheme(selection);
|
|
89
|
+
const vibeVariables = getGdsVibeThemeCssVariables(selection.preset, documentScheme);
|
|
90
|
+
document.documentElement.setAttribute("data-mantine-color-scheme", documentScheme);
|
|
91
|
+
document.documentElement.setAttribute("data-gds-theme-preset", selection.preset);
|
|
92
|
+
document.documentElement.setAttribute("data-gds-theme-runtime", selection.runtimeKey ?? `${selection.preset}-${selection.colorScheme}`);
|
|
93
|
+
document.documentElement.setAttribute("data-gds-font-lane", selection.fontLane);
|
|
94
|
+
Object.entries(vibeVariables).forEach(([property, value]) => {
|
|
95
|
+
document.documentElement.style.setProperty(property, value);
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
function useGdsThemePresetState({
|
|
99
|
+
storageKey = defaultStorageKey,
|
|
100
|
+
initialSelection,
|
|
101
|
+
applyToDocument = true
|
|
102
|
+
} = {}) {
|
|
103
|
+
const [selection, setSelection] = useState(() => readStoredSelection(storageKey, initialSelection));
|
|
104
|
+
useEffect(() => {
|
|
105
|
+
if (applyToDocument) {
|
|
106
|
+
applyDocumentRuntime(selection);
|
|
107
|
+
}
|
|
108
|
+
persistSelection(storageKey, selection);
|
|
109
|
+
if (!applyToDocument || selection.colorScheme !== "auto") {
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
113
|
+
const handleChange = () => applyDocumentRuntime(selection);
|
|
114
|
+
mediaQuery.addEventListener("change", handleChange);
|
|
115
|
+
return () => {
|
|
116
|
+
mediaQuery.removeEventListener("change", handleChange);
|
|
117
|
+
};
|
|
118
|
+
}, [applyToDocument, selection, storageKey]);
|
|
119
|
+
const setRuntimeSelection = useCallback((nextSelection) => {
|
|
120
|
+
setSelection(createGdsThemePresetSelection(nextSelection));
|
|
121
|
+
}, []);
|
|
122
|
+
const setPreset = useCallback((preset) => {
|
|
123
|
+
setSelection((current) => createGdsThemePresetSelection({ ...current, preset }));
|
|
124
|
+
}, []);
|
|
125
|
+
const setScheme = useCallback((colorScheme) => {
|
|
126
|
+
setSelection((current) => createGdsThemePresetSelection({ ...current, colorScheme }));
|
|
127
|
+
}, []);
|
|
128
|
+
const setFontLane = useCallback((fontLane) => {
|
|
129
|
+
setSelection((current) => createGdsThemePresetSelection({ ...current, fontLane }));
|
|
130
|
+
}, []);
|
|
131
|
+
const setBrandOptions = useCallback((options) => {
|
|
132
|
+
setSelection((current) => createGdsThemePresetSelection({ ...current, ...options }));
|
|
133
|
+
}, []);
|
|
134
|
+
const reset = useCallback(() => {
|
|
135
|
+
setSelection(createGdsThemePresetSelection(initialSelection));
|
|
136
|
+
}, [initialSelection]);
|
|
137
|
+
return {
|
|
138
|
+
selection,
|
|
139
|
+
setSelection: setRuntimeSelection,
|
|
140
|
+
setPreset,
|
|
141
|
+
setScheme,
|
|
142
|
+
setFontLane,
|
|
143
|
+
setBrandOptions,
|
|
144
|
+
reset
|
|
145
|
+
};
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
// src/i18n.ts
|
|
149
|
+
import { createContext, useContext } from "react";
|
|
150
|
+
var GdsI18nContext = createContext({
|
|
151
|
+
locale: "en",
|
|
152
|
+
messages: {}
|
|
153
|
+
});
|
|
154
|
+
function useGdsTranslation() {
|
|
155
|
+
const { messages, locale } = useContext(GdsI18nContext);
|
|
156
|
+
return {
|
|
157
|
+
t: (id, defaultMessage) => messages[id] || defaultMessage,
|
|
158
|
+
locale
|
|
159
|
+
};
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
// src/GdsProvider.tsx
|
|
163
|
+
import { MantineProvider, DirectionProvider, Box } from "@mantine/core";
|
|
164
|
+
import { ModalsProvider } from "@mantine/modals";
|
|
165
|
+
import { Notifications } from "@mantine/notifications";
|
|
166
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
167
|
+
function GdsProvider({
|
|
168
|
+
children,
|
|
169
|
+
locale = "en",
|
|
170
|
+
messages = {},
|
|
171
|
+
theme = gdsTheme,
|
|
172
|
+
defaultColorScheme = "light",
|
|
173
|
+
forceColorScheme
|
|
174
|
+
}) {
|
|
175
|
+
const isRtl = ["ar", "he"].includes(locale);
|
|
176
|
+
const dir = isRtl ? "rtl" : "ltr";
|
|
177
|
+
return /* @__PURE__ */ jsx(DirectionProvider, { initialDirection: dir, children: /* @__PURE__ */ jsx(GdsI18nContext.Provider, { value: { locale, messages }, children: /* @__PURE__ */ jsx(
|
|
178
|
+
MantineProvider,
|
|
179
|
+
{
|
|
180
|
+
theme,
|
|
181
|
+
withCssVariables: true,
|
|
182
|
+
withGlobalClasses: true,
|
|
183
|
+
defaultColorScheme,
|
|
184
|
+
forceColorScheme,
|
|
185
|
+
children: /* @__PURE__ */ jsx(ModalsProvider, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
186
|
+
/* @__PURE__ */ jsx(Notifications, {}),
|
|
187
|
+
/* @__PURE__ */ jsx(
|
|
188
|
+
Box,
|
|
189
|
+
{
|
|
190
|
+
dir,
|
|
191
|
+
mih: "100vh",
|
|
192
|
+
h: "100%",
|
|
193
|
+
bg: "var(--mantine-color-body)",
|
|
194
|
+
c: "var(--mantine-color-text)",
|
|
195
|
+
style: { transition: "background-color 120ms ease, color 120ms ease" },
|
|
196
|
+
children
|
|
197
|
+
}
|
|
198
|
+
)
|
|
199
|
+
] }) })
|
|
200
|
+
}
|
|
201
|
+
) }) });
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
// src/notifications.ts
|
|
205
|
+
import { notifications } from "@mantine/notifications";
|
|
206
|
+
var toneColorMap = {
|
|
207
|
+
success: "teal",
|
|
208
|
+
error: "red",
|
|
209
|
+
warning: "yellow",
|
|
210
|
+
info: "blue",
|
|
211
|
+
neutral: "gray"
|
|
212
|
+
};
|
|
213
|
+
function showGdsNotification({
|
|
214
|
+
message,
|
|
215
|
+
title,
|
|
216
|
+
tone = "info",
|
|
217
|
+
autoClose
|
|
218
|
+
}) {
|
|
219
|
+
notifications.show({
|
|
220
|
+
message,
|
|
221
|
+
title,
|
|
222
|
+
color: toneColorMap[tone],
|
|
223
|
+
autoClose
|
|
224
|
+
});
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
export {
|
|
228
|
+
createGdsThemePresetSelection,
|
|
229
|
+
useGdsThemePresetState,
|
|
230
|
+
useGdsTranslation,
|
|
231
|
+
GdsProvider,
|
|
232
|
+
showGdsNotification
|
|
233
|
+
};
|
|
@@ -307,6 +307,291 @@ function resolveGdsThemePreset(id, options) {
|
|
|
307
307
|
}
|
|
308
308
|
}
|
|
309
309
|
|
|
310
|
+
// src/vibe-themes.ts
|
|
311
|
+
var neutralVibe = {
|
|
312
|
+
id: "default",
|
|
313
|
+
label: "Default runtime theme",
|
|
314
|
+
primary: "#7c3aed",
|
|
315
|
+
accent: "#06b6d4",
|
|
316
|
+
glow: "rgba(124, 58, 237, 0.2)",
|
|
317
|
+
canvasLight: "#f8fafc",
|
|
318
|
+
canvasDark: "#0f172a",
|
|
319
|
+
shellLight: "rgba(255, 255, 255, 0.82)",
|
|
320
|
+
shellDark: "rgba(15, 23, 42, 0.84)",
|
|
321
|
+
surfaceLight: "rgba(255, 255, 255, 0.9)",
|
|
322
|
+
surfaceDark: "rgba(30, 41, 59, 0.82)",
|
|
323
|
+
borderLight: "rgba(124, 58, 237, 0.22)",
|
|
324
|
+
borderDark: "rgba(167, 139, 250, 0.28)",
|
|
325
|
+
textLight: "#111827",
|
|
326
|
+
textDark: "#f8fafc",
|
|
327
|
+
mutedLight: "#64748b",
|
|
328
|
+
mutedDark: "#cbd5e1",
|
|
329
|
+
gradient: "radial-gradient(circle at 18% 12%, rgba(124, 58, 237, 0.18), transparent 28%), radial-gradient(circle at 82% 8%, rgba(6, 182, 212, 0.16), transparent 30%)",
|
|
330
|
+
hero: "linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(6, 182, 212, 0.12))"
|
|
331
|
+
};
|
|
332
|
+
var vibeThemes = {
|
|
333
|
+
default: neutralVibe,
|
|
334
|
+
"dark-public": {
|
|
335
|
+
...neutralVibe,
|
|
336
|
+
id: "dark-public",
|
|
337
|
+
label: "Dark public theme",
|
|
338
|
+
primary: "#8b5cf6",
|
|
339
|
+
accent: "#22d3ee",
|
|
340
|
+
canvasLight: "#f5f3ff",
|
|
341
|
+
canvasDark: "#050816",
|
|
342
|
+
shellDark: "rgba(8, 13, 32, 0.88)",
|
|
343
|
+
surfaceDark: "rgba(18, 24, 52, 0.86)",
|
|
344
|
+
gradient: "radial-gradient(circle at 20% 12%, rgba(139, 92, 246, 0.34), transparent 30%), radial-gradient(circle at 82% 16%, rgba(34, 211, 238, 0.2), transparent 28%)",
|
|
345
|
+
hero: "linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(34, 211, 238, 0.14))"
|
|
346
|
+
},
|
|
347
|
+
"flat-surface": {
|
|
348
|
+
...neutralVibe,
|
|
349
|
+
id: "flat-surface",
|
|
350
|
+
label: "Flat surface theme",
|
|
351
|
+
primary: "#2563eb",
|
|
352
|
+
accent: "#14b8a6",
|
|
353
|
+
canvasLight: "#f8fafc",
|
|
354
|
+
canvasDark: "#111827",
|
|
355
|
+
shellLight: "rgba(248, 250, 252, 0.94)",
|
|
356
|
+
surfaceLight: "rgba(255, 255, 255, 0.94)",
|
|
357
|
+
gradient: "linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(20, 184, 166, 0.08))",
|
|
358
|
+
hero: "linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(20, 184, 166, 0.1))"
|
|
359
|
+
},
|
|
360
|
+
editorial: {
|
|
361
|
+
...neutralVibe,
|
|
362
|
+
id: "editorial",
|
|
363
|
+
label: "Editorial serif theme",
|
|
364
|
+
primary: "#9a3412",
|
|
365
|
+
accent: "#be123c",
|
|
366
|
+
canvasLight: "#fff7ed",
|
|
367
|
+
canvasDark: "#1c1917",
|
|
368
|
+
shellLight: "rgba(255, 247, 237, 0.9)",
|
|
369
|
+
surfaceLight: "rgba(255, 251, 247, 0.92)",
|
|
370
|
+
borderLight: "rgba(154, 52, 18, 0.22)",
|
|
371
|
+
gradient: "radial-gradient(circle at 12% 12%, rgba(251, 146, 60, 0.22), transparent 28%), radial-gradient(circle at 84% 10%, rgba(190, 18, 60, 0.12), transparent 28%)",
|
|
372
|
+
hero: "linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(190, 18, 60, 0.12))"
|
|
373
|
+
},
|
|
374
|
+
brand: {
|
|
375
|
+
...neutralVibe,
|
|
376
|
+
id: "brand",
|
|
377
|
+
label: "Brand theme generator"
|
|
378
|
+
},
|
|
379
|
+
sunset: {
|
|
380
|
+
...neutralVibe,
|
|
381
|
+
id: "sunset",
|
|
382
|
+
label: "Sunset pulse",
|
|
383
|
+
primary: "#f97316",
|
|
384
|
+
accent: "#ec4899",
|
|
385
|
+
glow: "rgba(249, 115, 22, 0.3)",
|
|
386
|
+
canvasLight: "#fff7ed",
|
|
387
|
+
canvasDark: "#211106",
|
|
388
|
+
shellLight: "rgba(255, 247, 237, 0.9)",
|
|
389
|
+
shellDark: "rgba(44, 18, 10, 0.88)",
|
|
390
|
+
surfaceLight: "rgba(255, 250, 245, 0.9)",
|
|
391
|
+
surfaceDark: "rgba(68, 24, 12, 0.78)",
|
|
392
|
+
borderLight: "rgba(249, 115, 22, 0.3)",
|
|
393
|
+
borderDark: "rgba(251, 146, 60, 0.36)",
|
|
394
|
+
gradient: "radial-gradient(circle at 14% 8%, rgba(251, 146, 60, 0.38), transparent 28%), radial-gradient(circle at 88% 18%, rgba(236, 72, 153, 0.32), transparent 32%), linear-gradient(135deg, rgba(255, 247, 237, 0.96), rgba(253, 242, 248, 0.86))",
|
|
395
|
+
hero: "linear-gradient(135deg, rgba(249, 115, 22, 0.26), rgba(236, 72, 153, 0.22))"
|
|
396
|
+
},
|
|
397
|
+
oceanic: {
|
|
398
|
+
...neutralVibe,
|
|
399
|
+
id: "oceanic",
|
|
400
|
+
label: "Oceanic wave",
|
|
401
|
+
primary: "#0891b2",
|
|
402
|
+
accent: "#2563eb",
|
|
403
|
+
glow: "rgba(8, 145, 178, 0.28)",
|
|
404
|
+
canvasLight: "#ecfeff",
|
|
405
|
+
canvasDark: "#04131f",
|
|
406
|
+
shellLight: "rgba(236, 254, 255, 0.88)",
|
|
407
|
+
shellDark: "rgba(5, 26, 44, 0.88)",
|
|
408
|
+
surfaceLight: "rgba(248, 253, 255, 0.9)",
|
|
409
|
+
surfaceDark: "rgba(8, 47, 73, 0.78)",
|
|
410
|
+
borderLight: "rgba(8, 145, 178, 0.28)",
|
|
411
|
+
borderDark: "rgba(103, 232, 249, 0.28)",
|
|
412
|
+
gradient: "radial-gradient(circle at 18% 8%, rgba(34, 211, 238, 0.32), transparent 30%), radial-gradient(circle at 86% 14%, rgba(37, 99, 235, 0.28), transparent 32%), linear-gradient(135deg, rgba(236, 254, 255, 0.96), rgba(239, 246, 255, 0.9))",
|
|
413
|
+
hero: "linear-gradient(135deg, rgba(8, 145, 178, 0.24), rgba(37, 99, 235, 0.2))"
|
|
414
|
+
},
|
|
415
|
+
forest: {
|
|
416
|
+
...neutralVibe,
|
|
417
|
+
id: "forest",
|
|
418
|
+
label: "Forest signal",
|
|
419
|
+
primary: "#16a34a",
|
|
420
|
+
accent: "#84cc16",
|
|
421
|
+
glow: "rgba(22, 163, 74, 0.28)",
|
|
422
|
+
canvasLight: "#f0fdf4",
|
|
423
|
+
canvasDark: "#06180d",
|
|
424
|
+
shellLight: "rgba(240, 253, 244, 0.9)",
|
|
425
|
+
shellDark: "rgba(8, 35, 19, 0.88)",
|
|
426
|
+
surfaceLight: "rgba(250, 255, 251, 0.9)",
|
|
427
|
+
surfaceDark: "rgba(20, 83, 45, 0.72)",
|
|
428
|
+
borderLight: "rgba(22, 163, 74, 0.26)",
|
|
429
|
+
borderDark: "rgba(134, 239, 172, 0.28)",
|
|
430
|
+
gradient: "radial-gradient(circle at 18% 10%, rgba(34, 197, 94, 0.28), transparent 28%), radial-gradient(circle at 84% 14%, rgba(132, 204, 22, 0.24), transparent 30%)",
|
|
431
|
+
hero: "linear-gradient(135deg, rgba(22, 163, 74, 0.22), rgba(132, 204, 22, 0.18))"
|
|
432
|
+
},
|
|
433
|
+
ruby: {
|
|
434
|
+
...neutralVibe,
|
|
435
|
+
id: "ruby",
|
|
436
|
+
label: "Ruby spark",
|
|
437
|
+
primary: "#e11d48",
|
|
438
|
+
accent: "#f97316",
|
|
439
|
+
canvasLight: "#fff1f2",
|
|
440
|
+
canvasDark: "#22050c",
|
|
441
|
+
shellLight: "rgba(255, 241, 242, 0.9)",
|
|
442
|
+
shellDark: "rgba(50, 8, 18, 0.88)",
|
|
443
|
+
surfaceDark: "rgba(76, 20, 32, 0.76)",
|
|
444
|
+
borderLight: "rgba(225, 29, 72, 0.28)",
|
|
445
|
+
gradient: "radial-gradient(circle at 18% 8%, rgba(225, 29, 72, 0.32), transparent 28%), radial-gradient(circle at 86% 18%, rgba(249, 115, 22, 0.22), transparent 30%)",
|
|
446
|
+
hero: "linear-gradient(135deg, rgba(225, 29, 72, 0.24), rgba(249, 115, 22, 0.18))"
|
|
447
|
+
},
|
|
448
|
+
amber: {
|
|
449
|
+
...neutralVibe,
|
|
450
|
+
id: "amber",
|
|
451
|
+
label: "Amber glow",
|
|
452
|
+
primary: "#d97706",
|
|
453
|
+
accent: "#eab308",
|
|
454
|
+
canvasLight: "#fffbeb",
|
|
455
|
+
canvasDark: "#1f1604",
|
|
456
|
+
shellLight: "rgba(255, 251, 235, 0.9)",
|
|
457
|
+
shellDark: "rgba(41, 29, 6, 0.88)",
|
|
458
|
+
surfaceDark: "rgba(69, 46, 10, 0.76)",
|
|
459
|
+
borderLight: "rgba(217, 119, 6, 0.28)",
|
|
460
|
+
gradient: "radial-gradient(circle at 14% 10%, rgba(251, 191, 36, 0.34), transparent 30%), radial-gradient(circle at 84% 12%, rgba(217, 119, 6, 0.22), transparent 28%)",
|
|
461
|
+
hero: "linear-gradient(135deg, rgba(217, 119, 6, 0.22), rgba(234, 179, 8, 0.2))"
|
|
462
|
+
},
|
|
463
|
+
"neon-night": {
|
|
464
|
+
...neutralVibe,
|
|
465
|
+
id: "neon-night",
|
|
466
|
+
label: "Neon night",
|
|
467
|
+
primary: "#84cc16",
|
|
468
|
+
accent: "#22d3ee",
|
|
469
|
+
glow: "rgba(132, 204, 22, 0.34)",
|
|
470
|
+
canvasLight: "#f7fee7",
|
|
471
|
+
canvasDark: "#030712",
|
|
472
|
+
shellLight: "rgba(247, 254, 231, 0.88)",
|
|
473
|
+
shellDark: "rgba(5, 12, 24, 0.9)",
|
|
474
|
+
surfaceDark: "rgba(12, 23, 36, 0.86)",
|
|
475
|
+
borderLight: "rgba(132, 204, 22, 0.3)",
|
|
476
|
+
borderDark: "rgba(190, 242, 100, 0.34)",
|
|
477
|
+
gradient: "radial-gradient(circle at 16% 8%, rgba(132, 204, 22, 0.36), transparent 26%), radial-gradient(circle at 86% 12%, rgba(34, 211, 238, 0.28), transparent 30%), linear-gradient(135deg, rgba(3, 7, 18, 0.96), rgba(8, 47, 73, 0.74))",
|
|
478
|
+
hero: "linear-gradient(135deg, rgba(132, 204, 22, 0.28), rgba(34, 211, 238, 0.18))"
|
|
479
|
+
},
|
|
480
|
+
skyline: {
|
|
481
|
+
...neutralVibe,
|
|
482
|
+
id: "skyline",
|
|
483
|
+
label: "Skyline indigo",
|
|
484
|
+
primary: "#4f46e5",
|
|
485
|
+
accent: "#0ea5e9",
|
|
486
|
+
canvasLight: "#eef2ff",
|
|
487
|
+
canvasDark: "#0b1026",
|
|
488
|
+
shellLight: "rgba(238, 242, 255, 0.9)",
|
|
489
|
+
shellDark: "rgba(13, 20, 52, 0.88)",
|
|
490
|
+
surfaceDark: "rgba(30, 41, 86, 0.78)",
|
|
491
|
+
borderLight: "rgba(79, 70, 229, 0.28)",
|
|
492
|
+
gradient: "radial-gradient(circle at 18% 8%, rgba(79, 70, 229, 0.32), transparent 28%), radial-gradient(circle at 84% 12%, rgba(14, 165, 233, 0.28), transparent 30%)",
|
|
493
|
+
hero: "linear-gradient(135deg, rgba(79, 70, 229, 0.24), rgba(14, 165, 233, 0.18))"
|
|
494
|
+
},
|
|
495
|
+
aurora: {
|
|
496
|
+
...neutralVibe,
|
|
497
|
+
id: "aurora",
|
|
498
|
+
label: "Aurora teal",
|
|
499
|
+
primary: "#0d9488",
|
|
500
|
+
accent: "#a3e635",
|
|
501
|
+
canvasLight: "#f0fdfa",
|
|
502
|
+
canvasDark: "#04211f",
|
|
503
|
+
shellLight: "rgba(240, 253, 250, 0.9)",
|
|
504
|
+
shellDark: "rgba(5, 44, 42, 0.88)",
|
|
505
|
+
surfaceDark: "rgba(19, 78, 74, 0.76)",
|
|
506
|
+
borderLight: "rgba(13, 148, 136, 0.28)",
|
|
507
|
+
gradient: "radial-gradient(circle at 16% 8%, rgba(45, 212, 191, 0.32), transparent 28%), radial-gradient(circle at 84% 14%, rgba(163, 230, 53, 0.22), transparent 30%)",
|
|
508
|
+
hero: "linear-gradient(135deg, rgba(13, 148, 136, 0.24), rgba(163, 230, 53, 0.16))"
|
|
509
|
+
},
|
|
510
|
+
coral: {
|
|
511
|
+
...neutralVibe,
|
|
512
|
+
id: "coral",
|
|
513
|
+
label: "Coral bloom",
|
|
514
|
+
primary: "#db2777",
|
|
515
|
+
accent: "#fb7185",
|
|
516
|
+
canvasLight: "#fdf2f8",
|
|
517
|
+
canvasDark: "#251021",
|
|
518
|
+
shellLight: "rgba(253, 242, 248, 0.9)",
|
|
519
|
+
shellDark: "rgba(50, 18, 43, 0.88)",
|
|
520
|
+
surfaceDark: "rgba(80, 28, 66, 0.76)",
|
|
521
|
+
borderLight: "rgba(219, 39, 119, 0.28)",
|
|
522
|
+
gradient: "radial-gradient(circle at 16% 8%, rgba(219, 39, 119, 0.3), transparent 28%), radial-gradient(circle at 84% 14%, rgba(251, 113, 133, 0.24), transparent 30%)",
|
|
523
|
+
hero: "linear-gradient(135deg, rgba(219, 39, 119, 0.22), rgba(251, 113, 133, 0.18))"
|
|
524
|
+
},
|
|
525
|
+
mint: {
|
|
526
|
+
...neutralVibe,
|
|
527
|
+
id: "mint",
|
|
528
|
+
label: "Mint circuit",
|
|
529
|
+
primary: "#059669",
|
|
530
|
+
accent: "#14b8a6",
|
|
531
|
+
canvasLight: "#ecfdf5",
|
|
532
|
+
canvasDark: "#031c16",
|
|
533
|
+
shellLight: "rgba(236, 253, 245, 0.9)",
|
|
534
|
+
shellDark: "rgba(5, 42, 34, 0.88)",
|
|
535
|
+
surfaceDark: "rgba(6, 78, 59, 0.74)",
|
|
536
|
+
borderLight: "rgba(5, 150, 105, 0.28)",
|
|
537
|
+
gradient: "radial-gradient(circle at 16% 8%, rgba(16, 185, 129, 0.3), transparent 28%), radial-gradient(circle at 84% 14%, rgba(20, 184, 166, 0.22), transparent 30%)",
|
|
538
|
+
hero: "linear-gradient(135deg, rgba(5, 150, 105, 0.24), rgba(20, 184, 166, 0.16))"
|
|
539
|
+
},
|
|
540
|
+
orchid: {
|
|
541
|
+
...neutralVibe,
|
|
542
|
+
id: "orchid",
|
|
543
|
+
label: "Orchid signal",
|
|
544
|
+
primary: "#9333ea",
|
|
545
|
+
accent: "#ec4899",
|
|
546
|
+
canvasLight: "#faf5ff",
|
|
547
|
+
canvasDark: "#1d0b2f",
|
|
548
|
+
shellLight: "rgba(250, 245, 255, 0.9)",
|
|
549
|
+
shellDark: "rgba(39, 15, 63, 0.88)",
|
|
550
|
+
surfaceDark: "rgba(59, 25, 94, 0.78)",
|
|
551
|
+
borderLight: "rgba(147, 51, 234, 0.28)",
|
|
552
|
+
gradient: "radial-gradient(circle at 16% 8%, rgba(147, 51, 234, 0.32), transparent 28%), radial-gradient(circle at 84% 14%, rgba(236, 72, 153, 0.24), transparent 30%)",
|
|
553
|
+
hero: "linear-gradient(135deg, rgba(147, 51, 234, 0.24), rgba(236, 72, 153, 0.18))"
|
|
554
|
+
},
|
|
555
|
+
royal: {
|
|
556
|
+
...neutralVibe,
|
|
557
|
+
id: "royal",
|
|
558
|
+
label: "Royal violet",
|
|
559
|
+
primary: "#7c3aed",
|
|
560
|
+
accent: "#06b6d4",
|
|
561
|
+
canvasLight: "#f5f3ff",
|
|
562
|
+
canvasDark: "#100a2d",
|
|
563
|
+
shellLight: "rgba(245, 243, 255, 0.9)",
|
|
564
|
+
shellDark: "rgba(21, 13, 59, 0.88)",
|
|
565
|
+
surfaceDark: "rgba(46, 26, 104, 0.78)",
|
|
566
|
+
borderLight: "rgba(124, 58, 237, 0.3)",
|
|
567
|
+
gradient: "radial-gradient(circle at 15% 9%, rgba(124, 58, 237, 0.34), transparent 28%), radial-gradient(circle at 82% 12%, rgba(6, 182, 212, 0.28), transparent 30%), radial-gradient(circle at 92% 72%, rgba(236, 72, 153, 0.2), transparent 26%)",
|
|
568
|
+
hero: "linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(6, 182, 212, 0.18), rgba(236, 72, 153, 0.18))"
|
|
569
|
+
}
|
|
570
|
+
};
|
|
571
|
+
function getGdsVibeThemes() {
|
|
572
|
+
return Object.values(vibeThemes);
|
|
573
|
+
}
|
|
574
|
+
function resolveGdsVibeTheme(id) {
|
|
575
|
+
return vibeThemes[id] ?? neutralVibe;
|
|
576
|
+
}
|
|
577
|
+
function getGdsVibeThemeCssVariables(id, colorScheme) {
|
|
578
|
+
const vibe = resolveGdsVibeTheme(id);
|
|
579
|
+
const dark = colorScheme === "dark";
|
|
580
|
+
return {
|
|
581
|
+
"--gds-vibe-primary": vibe.primary,
|
|
582
|
+
"--gds-vibe-accent": vibe.accent,
|
|
583
|
+
"--gds-vibe-glow": vibe.glow,
|
|
584
|
+
"--gds-vibe-canvas": dark ? vibe.canvasDark : vibe.canvasLight,
|
|
585
|
+
"--gds-vibe-shell": dark ? vibe.shellDark : vibe.shellLight,
|
|
586
|
+
"--gds-vibe-surface": dark ? vibe.surfaceDark : vibe.surfaceLight,
|
|
587
|
+
"--gds-vibe-border": dark ? vibe.borderDark : vibe.borderLight,
|
|
588
|
+
"--gds-vibe-text": dark ? vibe.textDark : vibe.textLight,
|
|
589
|
+
"--gds-vibe-muted": dark ? vibe.mutedDark : vibe.mutedLight,
|
|
590
|
+
"--gds-vibe-gradient": vibe.gradient,
|
|
591
|
+
"--gds-vibe-hero": vibe.hero
|
|
592
|
+
};
|
|
593
|
+
}
|
|
594
|
+
|
|
310
595
|
// src/font-lanes.ts
|
|
311
596
|
import { mergeThemeOverrides as mergeThemeOverrides2 } from "@mantine/core";
|
|
312
597
|
var lanes = [
|
|
@@ -348,6 +633,9 @@ export {
|
|
|
348
633
|
withGdsMotion,
|
|
349
634
|
getGdsThemePresets,
|
|
350
635
|
resolveGdsThemePreset,
|
|
636
|
+
getGdsVibeThemes,
|
|
637
|
+
resolveGdsVibeTheme,
|
|
638
|
+
getGdsVibeThemeCssVariables,
|
|
351
639
|
getGdsFontLanes,
|
|
352
640
|
resolveGdsFontLane,
|
|
353
641
|
applyGdsFontLane
|
package/dist/client.d.mts
CHANGED
|
@@ -1,7 +1,38 @@
|
|
|
1
|
-
|
|
1
|
+
import { GdsThemePresetId, GdsFontLaneId } from './server.mjs';
|
|
2
|
+
export { GdsFontLane, GdsThemePreset, GdsVibeTheme, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, getGdsVibeThemeCssVariables, getGdsVibeThemes, resolveGdsFontLane, resolveGdsThemePreset, resolveGdsVibeTheme, withGdsMotion } from './server.mjs';
|
|
3
|
+
import { MantineThemeOverride } from '@mantine/core';
|
|
2
4
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
5
|
import React from 'react';
|
|
4
|
-
|
|
6
|
+
|
|
7
|
+
type GdsThemeScheme = 'light' | 'dark' | 'auto';
|
|
8
|
+
interface GdsStoredThemePresetState {
|
|
9
|
+
preset: GdsThemePresetId;
|
|
10
|
+
colorScheme: GdsThemeScheme;
|
|
11
|
+
fontLane: GdsFontLaneId;
|
|
12
|
+
runtimeKey?: string;
|
|
13
|
+
brandPrimary?: string;
|
|
14
|
+
brandFlatSurfaces?: boolean;
|
|
15
|
+
brandEditorialSerif?: boolean;
|
|
16
|
+
}
|
|
17
|
+
interface GdsThemePresetSelection extends GdsStoredThemePresetState {
|
|
18
|
+
theme: MantineThemeOverride;
|
|
19
|
+
}
|
|
20
|
+
interface UseGdsThemePresetStateOptions {
|
|
21
|
+
storageKey?: string;
|
|
22
|
+
initialSelection?: Partial<GdsStoredThemePresetState>;
|
|
23
|
+
applyToDocument?: boolean;
|
|
24
|
+
}
|
|
25
|
+
interface UseGdsThemePresetStateResult {
|
|
26
|
+
selection: GdsThemePresetSelection;
|
|
27
|
+
setSelection: (selection: Partial<GdsStoredThemePresetState>) => void;
|
|
28
|
+
setPreset: (preset: GdsThemePresetId) => void;
|
|
29
|
+
setScheme: (scheme: GdsThemeScheme) => void;
|
|
30
|
+
setFontLane: (fontLane: GdsFontLaneId) => void;
|
|
31
|
+
setBrandOptions: (options: Pick<GdsStoredThemePresetState, 'brandPrimary' | 'brandFlatSurfaces' | 'brandEditorialSerif'>) => void;
|
|
32
|
+
reset: () => void;
|
|
33
|
+
}
|
|
34
|
+
declare function createGdsThemePresetSelection(stored?: Partial<GdsStoredThemePresetState>): GdsThemePresetSelection;
|
|
35
|
+
declare function useGdsThemePresetState({ storageKey, initialSelection, applyToDocument, }?: UseGdsThemePresetStateOptions): UseGdsThemePresetStateResult;
|
|
5
36
|
|
|
6
37
|
interface GdsProviderProps {
|
|
7
38
|
children: React.ReactNode;
|
|
@@ -36,4 +67,4 @@ interface GdsNotificationOptions {
|
|
|
36
67
|
}
|
|
37
68
|
declare function showGdsNotification({ message, title, tone, autoClose, }: GdsNotificationOptions): void;
|
|
38
69
|
|
|
39
|
-
export { type GdsNotificationOptions, type GdsNotificationTone, GdsProvider, type GdsProviderProps, showGdsNotification, useGdsTranslation };
|
|
70
|
+
export { GdsFontLaneId, type GdsNotificationOptions, type GdsNotificationTone, GdsProvider, type GdsProviderProps, type GdsStoredThemePresetState, GdsThemePresetId, type GdsThemePresetSelection, type GdsThemeScheme, type UseGdsThemePresetStateOptions, type UseGdsThemePresetStateResult, createGdsThemePresetSelection, showGdsNotification, useGdsThemePresetState, useGdsTranslation };
|
package/dist/client.d.ts
CHANGED
|
@@ -1,7 +1,38 @@
|
|
|
1
|
-
|
|
1
|
+
import { GdsThemePresetId, GdsFontLaneId } from './server.js';
|
|
2
|
+
export { GdsFontLane, GdsThemePreset, GdsVibeTheme, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, getGdsVibeThemeCssVariables, getGdsVibeThemes, resolveGdsFontLane, resolveGdsThemePreset, resolveGdsVibeTheme, withGdsMotion } from './server.js';
|
|
3
|
+
import { MantineThemeOverride } from '@mantine/core';
|
|
2
4
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
5
|
import React from 'react';
|
|
4
|
-
|
|
6
|
+
|
|
7
|
+
type GdsThemeScheme = 'light' | 'dark' | 'auto';
|
|
8
|
+
interface GdsStoredThemePresetState {
|
|
9
|
+
preset: GdsThemePresetId;
|
|
10
|
+
colorScheme: GdsThemeScheme;
|
|
11
|
+
fontLane: GdsFontLaneId;
|
|
12
|
+
runtimeKey?: string;
|
|
13
|
+
brandPrimary?: string;
|
|
14
|
+
brandFlatSurfaces?: boolean;
|
|
15
|
+
brandEditorialSerif?: boolean;
|
|
16
|
+
}
|
|
17
|
+
interface GdsThemePresetSelection extends GdsStoredThemePresetState {
|
|
18
|
+
theme: MantineThemeOverride;
|
|
19
|
+
}
|
|
20
|
+
interface UseGdsThemePresetStateOptions {
|
|
21
|
+
storageKey?: string;
|
|
22
|
+
initialSelection?: Partial<GdsStoredThemePresetState>;
|
|
23
|
+
applyToDocument?: boolean;
|
|
24
|
+
}
|
|
25
|
+
interface UseGdsThemePresetStateResult {
|
|
26
|
+
selection: GdsThemePresetSelection;
|
|
27
|
+
setSelection: (selection: Partial<GdsStoredThemePresetState>) => void;
|
|
28
|
+
setPreset: (preset: GdsThemePresetId) => void;
|
|
29
|
+
setScheme: (scheme: GdsThemeScheme) => void;
|
|
30
|
+
setFontLane: (fontLane: GdsFontLaneId) => void;
|
|
31
|
+
setBrandOptions: (options: Pick<GdsStoredThemePresetState, 'brandPrimary' | 'brandFlatSurfaces' | 'brandEditorialSerif'>) => void;
|
|
32
|
+
reset: () => void;
|
|
33
|
+
}
|
|
34
|
+
declare function createGdsThemePresetSelection(stored?: Partial<GdsStoredThemePresetState>): GdsThemePresetSelection;
|
|
35
|
+
declare function useGdsThemePresetState({ storageKey, initialSelection, applyToDocument, }?: UseGdsThemePresetStateOptions): UseGdsThemePresetStateResult;
|
|
5
36
|
|
|
6
37
|
interface GdsProviderProps {
|
|
7
38
|
children: React.ReactNode;
|
|
@@ -36,4 +67,4 @@ interface GdsNotificationOptions {
|
|
|
36
67
|
}
|
|
37
68
|
declare function showGdsNotification({ message, title, tone, autoClose, }: GdsNotificationOptions): void;
|
|
38
69
|
|
|
39
|
-
export { type GdsNotificationOptions, type GdsNotificationTone, GdsProvider, type GdsProviderProps, showGdsNotification, useGdsTranslation };
|
|
70
|
+
export { GdsFontLaneId, type GdsNotificationOptions, type GdsNotificationTone, GdsProvider, type GdsProviderProps, type GdsStoredThemePresetState, GdsThemePresetId, type GdsThemePresetSelection, type GdsThemeScheme, type UseGdsThemePresetStateOptions, type UseGdsThemePresetStateResult, createGdsThemePresetSelection, showGdsNotification, useGdsThemePresetState, useGdsTranslation };
|