@doneisbetter/gds-theme 3.0.0 → 3.0.2
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-E55P7FOX.mjs +226 -0
- package/dist/chunk-TAPLA36E.mjs +354 -0
- package/dist/client.d.mts +36 -4
- package/dist/client.d.ts +36 -4
- package/dist/client.js +309 -13
- package/dist/client.mjs +16 -2
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +309 -13
- package/dist/index.mjs +16 -2
- package/dist/server.d.mts +27 -1
- package/dist/server.d.ts +27 -1
- package/dist/server.js +142 -4
- package/dist/server.mjs +11 -1
- package/package.json +1 -1
- package/styles.css +1 -0
- package/dist/chunk-QTH2PIZY.mjs +0 -66
- package/dist/chunk-Z5I7D255.mjs +0 -221
package/dist/index.js
CHANGED
|
@@ -21,13 +21,20 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
21
21
|
var index_exports = {};
|
|
22
22
|
__export(index_exports, {
|
|
23
23
|
GdsProvider: () => GdsProvider,
|
|
24
|
+
applyGdsFontLane: () => applyGdsFontLane,
|
|
25
|
+
createGdsThemePresetSelection: () => createGdsThemePresetSelection,
|
|
24
26
|
createPublicBrandTheme: () => createPublicBrandTheme,
|
|
25
27
|
extendGdsTheme: () => extendGdsTheme,
|
|
26
28
|
gdsDarkPublicTheme: () => gdsDarkPublicTheme,
|
|
27
29
|
gdsEditorialPublicTheme: () => gdsEditorialPublicTheme,
|
|
28
30
|
gdsFlatSurfaceTheme: () => gdsFlatSurfaceTheme,
|
|
29
31
|
gdsTheme: () => gdsTheme,
|
|
32
|
+
getGdsFontLanes: () => getGdsFontLanes,
|
|
33
|
+
getGdsThemePresets: () => getGdsThemePresets,
|
|
34
|
+
resolveGdsFontLane: () => resolveGdsFontLane,
|
|
35
|
+
resolveGdsThemePreset: () => resolveGdsThemePreset,
|
|
30
36
|
showGdsNotification: () => showGdsNotification,
|
|
37
|
+
useGdsThemePresetState: () => useGdsThemePresetState,
|
|
31
38
|
useGdsTranslation: () => useGdsTranslation,
|
|
32
39
|
withGdsMotion: () => withGdsMotion
|
|
33
40
|
});
|
|
@@ -70,7 +77,7 @@ var baseTheme = (0, import_core.mergeMantineTheme)(import_core.DEFAULT_THEME, (0
|
|
|
70
77
|
},
|
|
71
78
|
styles: {
|
|
72
79
|
root: {
|
|
73
|
-
|
|
80
|
+
background: "var(--mantine-color-body)"
|
|
74
81
|
}
|
|
75
82
|
}
|
|
76
83
|
},
|
|
@@ -105,14 +112,14 @@ var gdsDarkPublicTheme = extendGdsTheme({
|
|
|
105
112
|
AppShell: {
|
|
106
113
|
styles: {
|
|
107
114
|
main: {
|
|
108
|
-
|
|
115
|
+
background: "var(--mantine-color-dark-8)"
|
|
109
116
|
}
|
|
110
117
|
}
|
|
111
118
|
},
|
|
112
119
|
Card: {
|
|
113
120
|
styles: {
|
|
114
121
|
root: {
|
|
115
|
-
|
|
122
|
+
background: "var(--mantine-color-dark-7)",
|
|
116
123
|
borderColor: "var(--mantine-color-dark-4)"
|
|
117
124
|
}
|
|
118
125
|
}
|
|
@@ -120,7 +127,7 @@ var gdsDarkPublicTheme = extendGdsTheme({
|
|
|
120
127
|
Paper: {
|
|
121
128
|
styles: {
|
|
122
129
|
root: {
|
|
123
|
-
|
|
130
|
+
background: "var(--mantine-color-dark-7)",
|
|
124
131
|
borderColor: "var(--mantine-color-dark-4)"
|
|
125
132
|
}
|
|
126
133
|
}
|
|
@@ -245,19 +252,279 @@ function withGdsMotion(overrides = {}) {
|
|
|
245
252
|
);
|
|
246
253
|
}
|
|
247
254
|
|
|
248
|
-
// src/
|
|
255
|
+
// src/theme-presets.ts
|
|
256
|
+
function createVibrantPresetTheme(primaryColor, options = {}) {
|
|
257
|
+
const darkSurface = options.darkForward ? `color-mix(in srgb, var(--mantine-color-${primaryColor}-9) 18%, var(--mantine-color-dark-8))` : "var(--mantine-color-dark-8)";
|
|
258
|
+
return extendGdsTheme({
|
|
259
|
+
primaryColor,
|
|
260
|
+
components: {
|
|
261
|
+
AppShell: {
|
|
262
|
+
styles: {
|
|
263
|
+
main: {
|
|
264
|
+
background: `light-dark(color-mix(in srgb, var(--mantine-color-${primaryColor}-0) 58%, var(--mantine-color-white)), ${darkSurface})`
|
|
265
|
+
},
|
|
266
|
+
header: {
|
|
267
|
+
background: `light-dark(color-mix(in srgb, var(--mantine-color-${primaryColor}-0) 68%, var(--mantine-color-white)), var(--mantine-color-dark-8))`,
|
|
268
|
+
borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-5))`
|
|
269
|
+
},
|
|
270
|
+
navbar: {
|
|
271
|
+
background: `light-dark(color-mix(in srgb, var(--mantine-color-${primaryColor}-0) 48%, var(--mantine-color-white)), var(--mantine-color-dark-8))`,
|
|
272
|
+
borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-5))`
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
},
|
|
276
|
+
Card: {
|
|
277
|
+
styles: {
|
|
278
|
+
root: {
|
|
279
|
+
background: `light-dark(var(--mantine-color-white), color-mix(in srgb, var(--mantine-color-${primaryColor}-9) 10%, var(--mantine-color-dark-7)))`,
|
|
280
|
+
borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-4))`
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
},
|
|
284
|
+
Paper: {
|
|
285
|
+
styles: {
|
|
286
|
+
root: {
|
|
287
|
+
background: `light-dark(color-mix(in srgb, var(--mantine-color-${primaryColor}-0) 16%, var(--mantine-color-white)), color-mix(in srgb, var(--mantine-color-${primaryColor}-9) 8%, var(--mantine-color-dark-7)))`,
|
|
288
|
+
borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-4))`
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
});
|
|
294
|
+
}
|
|
295
|
+
var customPresetThemes = {
|
|
296
|
+
sunset: createVibrantPresetTheme("orange"),
|
|
297
|
+
oceanic: createVibrantPresetTheme("cyan"),
|
|
298
|
+
forest: createVibrantPresetTheme("green"),
|
|
299
|
+
ruby: createVibrantPresetTheme("red"),
|
|
300
|
+
amber: createVibrantPresetTheme("yellow"),
|
|
301
|
+
"neon-night": createVibrantPresetTheme("lime", { darkForward: true }),
|
|
302
|
+
skyline: createVibrantPresetTheme("indigo"),
|
|
303
|
+
aurora: createVibrantPresetTheme("teal"),
|
|
304
|
+
coral: createVibrantPresetTheme("pink"),
|
|
305
|
+
mint: createVibrantPresetTheme("lime"),
|
|
306
|
+
orchid: createVibrantPresetTheme("grape"),
|
|
307
|
+
royal: createVibrantPresetTheme("violet")
|
|
308
|
+
};
|
|
309
|
+
var themePresetCatalog = [
|
|
310
|
+
{ id: "default", label: "Default runtime theme", description: "Balanced, neutral baseline lane.", runtimeLane: "gdsTheme" },
|
|
311
|
+
{ id: "dark-public", label: "Dark public theme", description: "Dark-first public lane.", runtimeLane: "gdsDarkPublicTheme" },
|
|
312
|
+
{ id: "flat-surface", label: "Flat surface theme", description: "Lower-elevation operational lane.", runtimeLane: "gdsFlatSurfaceTheme" },
|
|
313
|
+
{ id: "editorial", label: "Editorial serif theme", description: "Reading-first, serif headline lane.", runtimeLane: "gdsEditorialPublicTheme" },
|
|
314
|
+
{ id: "brand", label: "Brand theme generator", description: "Governed brand composition lane.", runtimeLane: "createPublicBrandTheme(...)" },
|
|
315
|
+
{ id: "sunset", label: "Sunset pulse", description: "Warm orange-magenta vibrant lane.", runtimeLane: "resolveGdsThemePreset(sunset)" },
|
|
316
|
+
{ id: "oceanic", label: "Oceanic wave", description: "Cool cyan-blue vibrant lane.", runtimeLane: "resolveGdsThemePreset(oceanic)" },
|
|
317
|
+
{ id: "forest", label: "Forest signal", description: "Natural emerald-driven vibrant lane.", runtimeLane: "resolveGdsThemePreset(forest)" },
|
|
318
|
+
{ id: "ruby", label: "Ruby spark", description: "Bold red high-contrast lane.", runtimeLane: "resolveGdsThemePreset(ruby)" },
|
|
319
|
+
{ id: "amber", label: "Amber glow", description: "Golden yellow energetic lane.", runtimeLane: "resolveGdsThemePreset(amber)" },
|
|
320
|
+
{ id: "neon-night", label: "Neon night", description: "Lime-accented dark-forward lane.", runtimeLane: "resolveGdsThemePreset(neon-night)" },
|
|
321
|
+
{ id: "skyline", label: "Skyline indigo", description: "Indigo technology-forward lane.", runtimeLane: "resolveGdsThemePreset(skyline)" },
|
|
322
|
+
{ id: "aurora", label: "Aurora teal", description: "Fresh teal-cyan app lane for optimistic product surfaces.", runtimeLane: "resolveGdsThemePreset(aurora)" },
|
|
323
|
+
{ id: "coral", label: "Coral bloom", description: "Expressive pink-coral lane for creator, commerce, and social products.", runtimeLane: "resolveGdsThemePreset(coral)" },
|
|
324
|
+
{ id: "mint", label: "Mint circuit", description: "Clean green-mint lane for health, learning, and growth products.", runtimeLane: "resolveGdsThemePreset(mint)" },
|
|
325
|
+
{ id: "orchid", label: "Orchid signal", description: "Purple-grape lane for editorial, culture, and premium tools.", runtimeLane: "resolveGdsThemePreset(orchid)" },
|
|
326
|
+
{ id: "royal", label: "Royal violet", description: "Confident violet lane for SaaS dashboards and professional apps.", runtimeLane: "resolveGdsThemePreset(royal)" }
|
|
327
|
+
];
|
|
328
|
+
function getGdsThemePresets() {
|
|
329
|
+
return themePresetCatalog;
|
|
330
|
+
}
|
|
331
|
+
function resolveGdsThemePreset(id, options) {
|
|
332
|
+
switch (id) {
|
|
333
|
+
case "default":
|
|
334
|
+
return gdsTheme;
|
|
335
|
+
case "dark-public":
|
|
336
|
+
return gdsDarkPublicTheme;
|
|
337
|
+
case "flat-surface":
|
|
338
|
+
return gdsFlatSurfaceTheme;
|
|
339
|
+
case "editorial":
|
|
340
|
+
return gdsEditorialPublicTheme;
|
|
341
|
+
case "brand":
|
|
342
|
+
return createPublicBrandTheme({
|
|
343
|
+
editorialSerif: options?.brandEditorialSerif ?? false,
|
|
344
|
+
flatSurfaces: options?.brandFlatSurfaces ?? true,
|
|
345
|
+
overrides: { primaryColor: options?.brandPrimary ?? "blue" }
|
|
346
|
+
});
|
|
347
|
+
default:
|
|
348
|
+
return customPresetThemes[id] ?? gdsTheme;
|
|
349
|
+
}
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
// src/font-lanes.ts
|
|
249
353
|
var import_core2 = require("@mantine/core");
|
|
354
|
+
var lanes = [
|
|
355
|
+
{ id: "inter", label: "Inter", body: "Inter, system-ui, sans-serif", heading: "Inter, system-ui, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
|
|
356
|
+
{ id: "manrope", label: "Manrope", body: "Manrope, system-ui, sans-serif", heading: "Manrope, system-ui, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
|
|
357
|
+
{ id: "space-grotesk", label: "Space Grotesk", body: '"Space Grotesk", Inter, system-ui, sans-serif', heading: '"Space Grotesk", Inter, system-ui, sans-serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
|
|
358
|
+
{ id: "plus-jakarta", label: "Plus Jakarta Sans", body: '"Plus Jakarta Sans", Inter, system-ui, sans-serif', heading: '"Plus Jakarta Sans", Inter, system-ui, sans-serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
|
|
359
|
+
{ id: "nunito", label: "Nunito", body: "Nunito, Inter, system-ui, sans-serif", heading: "Nunito, Inter, system-ui, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
|
|
360
|
+
{ id: "work-sans", label: "Work Sans", body: '"Work Sans", Inter, system-ui, sans-serif', heading: '"Work Sans", Inter, system-ui, sans-serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
|
|
361
|
+
{ id: "barlow", label: "Barlow", body: "Barlow, Inter, system-ui, sans-serif", heading: "Barlow, Inter, system-ui, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
|
|
362
|
+
{ id: "dm-sans", label: "DM Sans", body: '"DM Sans", Inter, system-ui, sans-serif', heading: '"DM Sans", Inter, system-ui, sans-serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
|
|
363
|
+
{ id: "instrument-serif", label: "Instrument Serif", body: "Inter, system-ui, sans-serif", heading: '"Instrument Serif", Georgia, serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
|
|
364
|
+
{ id: "source-serif", label: "Source Serif", body: '"Source Serif 4", Georgia, serif', heading: '"Source Serif 4", Georgia, serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" }
|
|
365
|
+
];
|
|
366
|
+
function getGdsFontLanes() {
|
|
367
|
+
return lanes;
|
|
368
|
+
}
|
|
369
|
+
function resolveGdsFontLane(id) {
|
|
370
|
+
return lanes.find((lane) => lane.id === id) ?? lanes[0];
|
|
371
|
+
}
|
|
372
|
+
function applyGdsFontLane(theme, laneId) {
|
|
373
|
+
const lane = resolveGdsFontLane(laneId);
|
|
374
|
+
return (0, import_core2.mergeThemeOverrides)(theme, {
|
|
375
|
+
fontFamily: lane.body,
|
|
376
|
+
fontFamilyMonospace: lane.mono,
|
|
377
|
+
headings: {
|
|
378
|
+
fontFamily: lane.heading
|
|
379
|
+
}
|
|
380
|
+
});
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
// src/theme-runtime.ts
|
|
384
|
+
var import_react = require("react");
|
|
385
|
+
var defaultStorageKey = "gds-theme-preset-selection";
|
|
386
|
+
function isThemePresetId(value) {
|
|
387
|
+
return typeof value === "string" && getGdsThemePresets().some((preset) => preset.id === value);
|
|
388
|
+
}
|
|
389
|
+
function isFontLaneId(value) {
|
|
390
|
+
return typeof value === "string" && getGdsFontLanes().some((lane) => lane.id === value);
|
|
391
|
+
}
|
|
392
|
+
function isScheme(value) {
|
|
393
|
+
return value === "light" || value === "dark" || value === "auto";
|
|
394
|
+
}
|
|
395
|
+
function resolveEffectiveScheme(preset, colorScheme) {
|
|
396
|
+
if (preset === "dark-public" || preset === "neon-night") {
|
|
397
|
+
return "dark";
|
|
398
|
+
}
|
|
399
|
+
return colorScheme;
|
|
400
|
+
}
|
|
401
|
+
function createGdsThemePresetSelection(stored = {}) {
|
|
402
|
+
const preset = isThemePresetId(stored.preset) ? stored.preset : "default";
|
|
403
|
+
const requestedColorScheme = isScheme(stored.colorScheme) ? stored.colorScheme : "light";
|
|
404
|
+
const colorScheme = resolveEffectiveScheme(preset, requestedColorScheme);
|
|
405
|
+
const fontLane = isFontLaneId(stored.fontLane) ? stored.fontLane : "inter";
|
|
406
|
+
const brandPrimary = typeof stored.brandPrimary === "string" ? stored.brandPrimary : "blue";
|
|
407
|
+
const brandFlatSurfaces = typeof stored.brandFlatSurfaces === "boolean" ? stored.brandFlatSurfaces : true;
|
|
408
|
+
const brandEditorialSerif = typeof stored.brandEditorialSerif === "boolean" ? stored.brandEditorialSerif : false;
|
|
409
|
+
const runtimeKey = `${preset}-${colorScheme}-${brandPrimary}-${brandFlatSurfaces}-${brandEditorialSerif}-${fontLane}`;
|
|
410
|
+
return {
|
|
411
|
+
preset,
|
|
412
|
+
colorScheme,
|
|
413
|
+
theme: applyGdsFontLane(resolveGdsThemePreset(preset, {
|
|
414
|
+
brandPrimary,
|
|
415
|
+
brandFlatSurfaces,
|
|
416
|
+
brandEditorialSerif
|
|
417
|
+
}), fontLane),
|
|
418
|
+
fontLane,
|
|
419
|
+
runtimeKey,
|
|
420
|
+
brandPrimary,
|
|
421
|
+
brandFlatSurfaces,
|
|
422
|
+
brandEditorialSerif
|
|
423
|
+
};
|
|
424
|
+
}
|
|
425
|
+
function readStoredSelection(storageKey, initialSelection) {
|
|
426
|
+
if (typeof window === "undefined") {
|
|
427
|
+
return createGdsThemePresetSelection(initialSelection);
|
|
428
|
+
}
|
|
429
|
+
try {
|
|
430
|
+
const stored = window.localStorage.getItem(storageKey);
|
|
431
|
+
return createGdsThemePresetSelection(stored ? JSON.parse(stored) : initialSelection);
|
|
432
|
+
} catch {
|
|
433
|
+
return createGdsThemePresetSelection(initialSelection);
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
function persistSelection(storageKey, selection) {
|
|
437
|
+
if (typeof window === "undefined") {
|
|
438
|
+
return;
|
|
439
|
+
}
|
|
440
|
+
const stored = {
|
|
441
|
+
preset: selection.preset,
|
|
442
|
+
colorScheme: selection.colorScheme,
|
|
443
|
+
fontLane: selection.fontLane,
|
|
444
|
+
runtimeKey: selection.runtimeKey,
|
|
445
|
+
brandPrimary: selection.brandPrimary,
|
|
446
|
+
brandFlatSurfaces: selection.brandFlatSurfaces,
|
|
447
|
+
brandEditorialSerif: selection.brandEditorialSerif
|
|
448
|
+
};
|
|
449
|
+
try {
|
|
450
|
+
window.localStorage.setItem(storageKey, JSON.stringify(stored));
|
|
451
|
+
} catch {
|
|
452
|
+
}
|
|
453
|
+
}
|
|
454
|
+
function resolveDocumentScheme(selection) {
|
|
455
|
+
if (selection.colorScheme !== "auto") {
|
|
456
|
+
return selection.colorScheme;
|
|
457
|
+
}
|
|
458
|
+
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
459
|
+
}
|
|
460
|
+
function applyDocumentRuntime(selection) {
|
|
461
|
+
document.documentElement.setAttribute("data-mantine-color-scheme", resolveDocumentScheme(selection));
|
|
462
|
+
document.documentElement.setAttribute("data-gds-theme-runtime", selection.runtimeKey ?? `${selection.preset}-${selection.colorScheme}`);
|
|
463
|
+
document.documentElement.setAttribute("data-gds-font-lane", selection.fontLane);
|
|
464
|
+
}
|
|
465
|
+
function useGdsThemePresetState({
|
|
466
|
+
storageKey = defaultStorageKey,
|
|
467
|
+
initialSelection,
|
|
468
|
+
applyToDocument = true
|
|
469
|
+
} = {}) {
|
|
470
|
+
const [selection, setSelection] = (0, import_react.useState)(() => readStoredSelection(storageKey, initialSelection));
|
|
471
|
+
(0, import_react.useEffect)(() => {
|
|
472
|
+
if (applyToDocument) {
|
|
473
|
+
applyDocumentRuntime(selection);
|
|
474
|
+
}
|
|
475
|
+
persistSelection(storageKey, selection);
|
|
476
|
+
if (!applyToDocument || selection.colorScheme !== "auto") {
|
|
477
|
+
return;
|
|
478
|
+
}
|
|
479
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
480
|
+
const handleChange = () => applyDocumentRuntime(selection);
|
|
481
|
+
mediaQuery.addEventListener("change", handleChange);
|
|
482
|
+
return () => {
|
|
483
|
+
mediaQuery.removeEventListener("change", handleChange);
|
|
484
|
+
};
|
|
485
|
+
}, [applyToDocument, selection, storageKey]);
|
|
486
|
+
const setRuntimeSelection = (0, import_react.useCallback)((nextSelection) => {
|
|
487
|
+
setSelection(createGdsThemePresetSelection(nextSelection));
|
|
488
|
+
}, []);
|
|
489
|
+
const setPreset = (0, import_react.useCallback)((preset) => {
|
|
490
|
+
setSelection((current) => createGdsThemePresetSelection({ ...current, preset }));
|
|
491
|
+
}, []);
|
|
492
|
+
const setScheme = (0, import_react.useCallback)((colorScheme) => {
|
|
493
|
+
setSelection((current) => createGdsThemePresetSelection({ ...current, colorScheme }));
|
|
494
|
+
}, []);
|
|
495
|
+
const setFontLane = (0, import_react.useCallback)((fontLane) => {
|
|
496
|
+
setSelection((current) => createGdsThemePresetSelection({ ...current, fontLane }));
|
|
497
|
+
}, []);
|
|
498
|
+
const setBrandOptions = (0, import_react.useCallback)((options) => {
|
|
499
|
+
setSelection((current) => createGdsThemePresetSelection({ ...current, ...options }));
|
|
500
|
+
}, []);
|
|
501
|
+
const reset = (0, import_react.useCallback)(() => {
|
|
502
|
+
setSelection(createGdsThemePresetSelection(initialSelection));
|
|
503
|
+
}, [initialSelection]);
|
|
504
|
+
return {
|
|
505
|
+
selection,
|
|
506
|
+
setSelection: setRuntimeSelection,
|
|
507
|
+
setPreset,
|
|
508
|
+
setScheme,
|
|
509
|
+
setFontLane,
|
|
510
|
+
setBrandOptions,
|
|
511
|
+
reset
|
|
512
|
+
};
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
// src/GdsProvider.tsx
|
|
516
|
+
var import_core3 = require("@mantine/core");
|
|
250
517
|
var import_modals = require("@mantine/modals");
|
|
251
518
|
var import_notifications = require("@mantine/notifications");
|
|
252
519
|
|
|
253
520
|
// src/i18n.ts
|
|
254
|
-
var
|
|
255
|
-
var GdsI18nContext = (0,
|
|
521
|
+
var import_react2 = require("react");
|
|
522
|
+
var GdsI18nContext = (0, import_react2.createContext)({
|
|
256
523
|
locale: "en",
|
|
257
524
|
messages: {}
|
|
258
525
|
});
|
|
259
526
|
function useGdsTranslation() {
|
|
260
|
-
const { messages, locale } = (0,
|
|
527
|
+
const { messages, locale } = (0, import_react2.useContext)(GdsI18nContext);
|
|
261
528
|
return {
|
|
262
529
|
t: (id, defaultMessage) => messages[id] || defaultMessage,
|
|
263
530
|
locale
|
|
@@ -271,14 +538,36 @@ function GdsProvider({
|
|
|
271
538
|
locale = "en",
|
|
272
539
|
messages = {},
|
|
273
540
|
theme = gdsTheme,
|
|
274
|
-
defaultColorScheme = "light"
|
|
541
|
+
defaultColorScheme = "light",
|
|
542
|
+
forceColorScheme
|
|
275
543
|
}) {
|
|
276
544
|
const isRtl = ["ar", "he"].includes(locale);
|
|
277
545
|
const dir = isRtl ? "rtl" : "ltr";
|
|
278
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
546
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core3.DirectionProvider, { initialDirection: dir, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GdsI18nContext.Provider, { value: { locale, messages }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
547
|
+
import_core3.MantineProvider,
|
|
548
|
+
{
|
|
549
|
+
theme,
|
|
550
|
+
withCssVariables: true,
|
|
551
|
+
withGlobalClasses: true,
|
|
552
|
+
defaultColorScheme,
|
|
553
|
+
forceColorScheme,
|
|
554
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_modals.ModalsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
555
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_notifications.Notifications, {}),
|
|
556
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
557
|
+
import_core3.Box,
|
|
558
|
+
{
|
|
559
|
+
dir,
|
|
560
|
+
mih: "100vh",
|
|
561
|
+
h: "100%",
|
|
562
|
+
bg: "var(--mantine-color-body)",
|
|
563
|
+
c: "var(--mantine-color-text)",
|
|
564
|
+
style: { transition: "background-color 120ms ease, color 120ms ease" },
|
|
565
|
+
children
|
|
566
|
+
}
|
|
567
|
+
)
|
|
568
|
+
] }) })
|
|
569
|
+
}
|
|
570
|
+
) }) });
|
|
282
571
|
}
|
|
283
572
|
|
|
284
573
|
// src/notifications.ts
|
|
@@ -306,13 +595,20 @@ function showGdsNotification({
|
|
|
306
595
|
// Annotate the CommonJS export names for ESM import in node:
|
|
307
596
|
0 && (module.exports = {
|
|
308
597
|
GdsProvider,
|
|
598
|
+
applyGdsFontLane,
|
|
599
|
+
createGdsThemePresetSelection,
|
|
309
600
|
createPublicBrandTheme,
|
|
310
601
|
extendGdsTheme,
|
|
311
602
|
gdsDarkPublicTheme,
|
|
312
603
|
gdsEditorialPublicTheme,
|
|
313
604
|
gdsFlatSurfaceTheme,
|
|
314
605
|
gdsTheme,
|
|
606
|
+
getGdsFontLanes,
|
|
607
|
+
getGdsThemePresets,
|
|
608
|
+
resolveGdsFontLane,
|
|
609
|
+
resolveGdsThemePreset,
|
|
315
610
|
showGdsNotification,
|
|
611
|
+
useGdsThemePresetState,
|
|
316
612
|
useGdsTranslation,
|
|
317
613
|
withGdsMotion
|
|
318
614
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -1,26 +1,40 @@
|
|
|
1
1
|
import {
|
|
2
2
|
GdsProvider,
|
|
3
|
+
createGdsThemePresetSelection,
|
|
3
4
|
showGdsNotification,
|
|
5
|
+
useGdsThemePresetState,
|
|
4
6
|
useGdsTranslation
|
|
5
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-E55P7FOX.mjs";
|
|
6
8
|
import {
|
|
9
|
+
applyGdsFontLane,
|
|
7
10
|
createPublicBrandTheme,
|
|
8
11
|
extendGdsTheme,
|
|
9
12
|
gdsDarkPublicTheme,
|
|
10
13
|
gdsEditorialPublicTheme,
|
|
11
14
|
gdsFlatSurfaceTheme,
|
|
12
15
|
gdsTheme,
|
|
16
|
+
getGdsFontLanes,
|
|
17
|
+
getGdsThemePresets,
|
|
18
|
+
resolveGdsFontLane,
|
|
19
|
+
resolveGdsThemePreset,
|
|
13
20
|
withGdsMotion
|
|
14
|
-
} from "./chunk-
|
|
21
|
+
} from "./chunk-TAPLA36E.mjs";
|
|
15
22
|
export {
|
|
16
23
|
GdsProvider,
|
|
24
|
+
applyGdsFontLane,
|
|
25
|
+
createGdsThemePresetSelection,
|
|
17
26
|
createPublicBrandTheme,
|
|
18
27
|
extendGdsTheme,
|
|
19
28
|
gdsDarkPublicTheme,
|
|
20
29
|
gdsEditorialPublicTheme,
|
|
21
30
|
gdsFlatSurfaceTheme,
|
|
22
31
|
gdsTheme,
|
|
32
|
+
getGdsFontLanes,
|
|
33
|
+
getGdsThemePresets,
|
|
34
|
+
resolveGdsFontLane,
|
|
35
|
+
resolveGdsThemePreset,
|
|
23
36
|
showGdsNotification,
|
|
37
|
+
useGdsThemePresetState,
|
|
24
38
|
useGdsTranslation,
|
|
25
39
|
withGdsMotion
|
|
26
40
|
};
|
package/dist/server.d.mts
CHANGED
|
@@ -19,4 +19,30 @@ declare function createPublicBrandTheme({ editorialSerif, flatSurfaces, override
|
|
|
19
19
|
declare function extendGdsTheme(overrides?: MantineThemeOverride): MantineTheme;
|
|
20
20
|
declare function withGdsMotion(overrides?: MantineThemeOverride): MantineTheme;
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
type GdsThemePresetId = 'default' | 'dark-public' | 'flat-surface' | 'editorial' | 'brand' | 'sunset' | 'oceanic' | 'forest' | 'ruby' | 'amber' | 'neon-night' | 'skyline' | 'aurora' | 'coral' | 'mint' | 'orchid' | 'royal';
|
|
23
|
+
interface GdsThemePreset {
|
|
24
|
+
id: GdsThemePresetId;
|
|
25
|
+
label: string;
|
|
26
|
+
description: string;
|
|
27
|
+
runtimeLane: string;
|
|
28
|
+
}
|
|
29
|
+
declare function getGdsThemePresets(): GdsThemePreset[];
|
|
30
|
+
declare function resolveGdsThemePreset(id: GdsThemePresetId, options?: {
|
|
31
|
+
brandPrimary?: string;
|
|
32
|
+
brandFlatSurfaces?: boolean;
|
|
33
|
+
brandEditorialSerif?: boolean;
|
|
34
|
+
}): MantineThemeOverride;
|
|
35
|
+
|
|
36
|
+
type GdsFontLaneId = 'inter' | 'manrope' | 'space-grotesk' | 'plus-jakarta' | 'nunito' | 'work-sans' | 'barlow' | 'dm-sans' | 'instrument-serif' | 'source-serif';
|
|
37
|
+
interface GdsFontLane {
|
|
38
|
+
id: GdsFontLaneId;
|
|
39
|
+
label: string;
|
|
40
|
+
body: string;
|
|
41
|
+
heading: string;
|
|
42
|
+
mono: string;
|
|
43
|
+
}
|
|
44
|
+
declare function getGdsFontLanes(): GdsFontLane[];
|
|
45
|
+
declare function resolveGdsFontLane(id: GdsFontLaneId): GdsFontLane;
|
|
46
|
+
declare function applyGdsFontLane(theme: MantineThemeOverride, laneId: GdsFontLaneId): MantineThemeOverride;
|
|
47
|
+
|
|
48
|
+
export { type GdsFontLane, type GdsFontLaneId, type GdsThemePreset, type GdsThemePresetId, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, resolveGdsFontLane, resolveGdsThemePreset, withGdsMotion };
|
package/dist/server.d.ts
CHANGED
|
@@ -19,4 +19,30 @@ declare function createPublicBrandTheme({ editorialSerif, flatSurfaces, override
|
|
|
19
19
|
declare function extendGdsTheme(overrides?: MantineThemeOverride): MantineTheme;
|
|
20
20
|
declare function withGdsMotion(overrides?: MantineThemeOverride): MantineTheme;
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
type GdsThemePresetId = 'default' | 'dark-public' | 'flat-surface' | 'editorial' | 'brand' | 'sunset' | 'oceanic' | 'forest' | 'ruby' | 'amber' | 'neon-night' | 'skyline' | 'aurora' | 'coral' | 'mint' | 'orchid' | 'royal';
|
|
23
|
+
interface GdsThemePreset {
|
|
24
|
+
id: GdsThemePresetId;
|
|
25
|
+
label: string;
|
|
26
|
+
description: string;
|
|
27
|
+
runtimeLane: string;
|
|
28
|
+
}
|
|
29
|
+
declare function getGdsThemePresets(): GdsThemePreset[];
|
|
30
|
+
declare function resolveGdsThemePreset(id: GdsThemePresetId, options?: {
|
|
31
|
+
brandPrimary?: string;
|
|
32
|
+
brandFlatSurfaces?: boolean;
|
|
33
|
+
brandEditorialSerif?: boolean;
|
|
34
|
+
}): MantineThemeOverride;
|
|
35
|
+
|
|
36
|
+
type GdsFontLaneId = 'inter' | 'manrope' | 'space-grotesk' | 'plus-jakarta' | 'nunito' | 'work-sans' | 'barlow' | 'dm-sans' | 'instrument-serif' | 'source-serif';
|
|
37
|
+
interface GdsFontLane {
|
|
38
|
+
id: GdsFontLaneId;
|
|
39
|
+
label: string;
|
|
40
|
+
body: string;
|
|
41
|
+
heading: string;
|
|
42
|
+
mono: string;
|
|
43
|
+
}
|
|
44
|
+
declare function getGdsFontLanes(): GdsFontLane[];
|
|
45
|
+
declare function resolveGdsFontLane(id: GdsFontLaneId): GdsFontLane;
|
|
46
|
+
declare function applyGdsFontLane(theme: MantineThemeOverride, laneId: GdsFontLaneId): MantineThemeOverride;
|
|
47
|
+
|
|
48
|
+
export { type GdsFontLane, type GdsFontLaneId, type GdsThemePreset, type GdsThemePresetId, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, resolveGdsFontLane, resolveGdsThemePreset, withGdsMotion };
|