@doneisbetter/gds-theme 3.0.0 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-QTH2PIZY.mjs → chunk-7B3MG4NV.mjs} +28 -6
- package/dist/chunk-TAPLA36E.mjs +354 -0
- package/dist/client.d.mts +3 -2
- package/dist/client.d.ts +3 -2
- package/dist/client.js +170 -10
- package/dist/client.mjs +12 -2
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +170 -10
- package/dist/index.mjs +12 -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-Z5I7D255.mjs +0 -221
package/dist/client.js
CHANGED
|
@@ -21,12 +21,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
21
21
|
var client_exports = {};
|
|
22
22
|
__export(client_exports, {
|
|
23
23
|
GdsProvider: () => GdsProvider,
|
|
24
|
+
applyGdsFontLane: () => applyGdsFontLane,
|
|
24
25
|
createPublicBrandTheme: () => createPublicBrandTheme,
|
|
25
26
|
extendGdsTheme: () => extendGdsTheme,
|
|
26
27
|
gdsDarkPublicTheme: () => gdsDarkPublicTheme,
|
|
27
28
|
gdsEditorialPublicTheme: () => gdsEditorialPublicTheme,
|
|
28
29
|
gdsFlatSurfaceTheme: () => gdsFlatSurfaceTheme,
|
|
29
30
|
gdsTheme: () => gdsTheme,
|
|
31
|
+
getGdsFontLanes: () => getGdsFontLanes,
|
|
32
|
+
getGdsThemePresets: () => getGdsThemePresets,
|
|
33
|
+
resolveGdsFontLane: () => resolveGdsFontLane,
|
|
34
|
+
resolveGdsThemePreset: () => resolveGdsThemePreset,
|
|
30
35
|
showGdsNotification: () => showGdsNotification,
|
|
31
36
|
useGdsTranslation: () => useGdsTranslation,
|
|
32
37
|
withGdsMotion: () => withGdsMotion
|
|
@@ -70,7 +75,7 @@ var baseTheme = (0, import_core.mergeMantineTheme)(import_core.DEFAULT_THEME, (0
|
|
|
70
75
|
},
|
|
71
76
|
styles: {
|
|
72
77
|
root: {
|
|
73
|
-
|
|
78
|
+
background: "var(--mantine-color-body)"
|
|
74
79
|
}
|
|
75
80
|
}
|
|
76
81
|
},
|
|
@@ -105,14 +110,14 @@ var gdsDarkPublicTheme = extendGdsTheme({
|
|
|
105
110
|
AppShell: {
|
|
106
111
|
styles: {
|
|
107
112
|
main: {
|
|
108
|
-
|
|
113
|
+
background: "var(--mantine-color-dark-8)"
|
|
109
114
|
}
|
|
110
115
|
}
|
|
111
116
|
},
|
|
112
117
|
Card: {
|
|
113
118
|
styles: {
|
|
114
119
|
root: {
|
|
115
|
-
|
|
120
|
+
background: "var(--mantine-color-dark-7)",
|
|
116
121
|
borderColor: "var(--mantine-color-dark-4)"
|
|
117
122
|
}
|
|
118
123
|
}
|
|
@@ -120,7 +125,7 @@ var gdsDarkPublicTheme = extendGdsTheme({
|
|
|
120
125
|
Paper: {
|
|
121
126
|
styles: {
|
|
122
127
|
root: {
|
|
123
|
-
|
|
128
|
+
background: "var(--mantine-color-dark-7)",
|
|
124
129
|
borderColor: "var(--mantine-color-dark-4)"
|
|
125
130
|
}
|
|
126
131
|
}
|
|
@@ -245,8 +250,136 @@ function withGdsMotion(overrides = {}) {
|
|
|
245
250
|
);
|
|
246
251
|
}
|
|
247
252
|
|
|
248
|
-
// src/
|
|
253
|
+
// src/theme-presets.ts
|
|
254
|
+
function createVibrantPresetTheme(primaryColor, options = {}) {
|
|
255
|
+
const darkSurface = options.darkForward ? `color-mix(in srgb, var(--mantine-color-${primaryColor}-9) 18%, var(--mantine-color-dark-8))` : "var(--mantine-color-dark-8)";
|
|
256
|
+
return extendGdsTheme({
|
|
257
|
+
primaryColor,
|
|
258
|
+
components: {
|
|
259
|
+
AppShell: {
|
|
260
|
+
styles: {
|
|
261
|
+
main: {
|
|
262
|
+
background: `light-dark(color-mix(in srgb, var(--mantine-color-${primaryColor}-0) 58%, var(--mantine-color-white)), ${darkSurface})`
|
|
263
|
+
},
|
|
264
|
+
header: {
|
|
265
|
+
background: `light-dark(color-mix(in srgb, var(--mantine-color-${primaryColor}-0) 68%, var(--mantine-color-white)), var(--mantine-color-dark-8))`,
|
|
266
|
+
borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-5))`
|
|
267
|
+
},
|
|
268
|
+
navbar: {
|
|
269
|
+
background: `light-dark(color-mix(in srgb, var(--mantine-color-${primaryColor}-0) 48%, var(--mantine-color-white)), var(--mantine-color-dark-8))`,
|
|
270
|
+
borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-5))`
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
},
|
|
274
|
+
Card: {
|
|
275
|
+
styles: {
|
|
276
|
+
root: {
|
|
277
|
+
background: `light-dark(var(--mantine-color-white), color-mix(in srgb, var(--mantine-color-${primaryColor}-9) 10%, var(--mantine-color-dark-7)))`,
|
|
278
|
+
borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-4))`
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
},
|
|
282
|
+
Paper: {
|
|
283
|
+
styles: {
|
|
284
|
+
root: {
|
|
285
|
+
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)))`,
|
|
286
|
+
borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-4))`
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
});
|
|
292
|
+
}
|
|
293
|
+
var customPresetThemes = {
|
|
294
|
+
sunset: createVibrantPresetTheme("orange"),
|
|
295
|
+
oceanic: createVibrantPresetTheme("cyan"),
|
|
296
|
+
forest: createVibrantPresetTheme("green"),
|
|
297
|
+
ruby: createVibrantPresetTheme("red"),
|
|
298
|
+
amber: createVibrantPresetTheme("yellow"),
|
|
299
|
+
"neon-night": createVibrantPresetTheme("lime", { darkForward: true }),
|
|
300
|
+
skyline: createVibrantPresetTheme("indigo"),
|
|
301
|
+
aurora: createVibrantPresetTheme("teal"),
|
|
302
|
+
coral: createVibrantPresetTheme("pink"),
|
|
303
|
+
mint: createVibrantPresetTheme("lime"),
|
|
304
|
+
orchid: createVibrantPresetTheme("grape"),
|
|
305
|
+
royal: createVibrantPresetTheme("violet")
|
|
306
|
+
};
|
|
307
|
+
var themePresetCatalog = [
|
|
308
|
+
{ id: "default", label: "Default runtime theme", description: "Balanced, neutral baseline lane.", runtimeLane: "gdsTheme" },
|
|
309
|
+
{ id: "dark-public", label: "Dark public theme", description: "Dark-first public lane.", runtimeLane: "gdsDarkPublicTheme" },
|
|
310
|
+
{ id: "flat-surface", label: "Flat surface theme", description: "Lower-elevation operational lane.", runtimeLane: "gdsFlatSurfaceTheme" },
|
|
311
|
+
{ id: "editorial", label: "Editorial serif theme", description: "Reading-first, serif headline lane.", runtimeLane: "gdsEditorialPublicTheme" },
|
|
312
|
+
{ id: "brand", label: "Brand theme generator", description: "Governed brand composition lane.", runtimeLane: "createPublicBrandTheme(...)" },
|
|
313
|
+
{ id: "sunset", label: "Sunset pulse", description: "Warm orange-magenta vibrant lane.", runtimeLane: "resolveGdsThemePreset(sunset)" },
|
|
314
|
+
{ id: "oceanic", label: "Oceanic wave", description: "Cool cyan-blue vibrant lane.", runtimeLane: "resolveGdsThemePreset(oceanic)" },
|
|
315
|
+
{ id: "forest", label: "Forest signal", description: "Natural emerald-driven vibrant lane.", runtimeLane: "resolveGdsThemePreset(forest)" },
|
|
316
|
+
{ id: "ruby", label: "Ruby spark", description: "Bold red high-contrast lane.", runtimeLane: "resolveGdsThemePreset(ruby)" },
|
|
317
|
+
{ id: "amber", label: "Amber glow", description: "Golden yellow energetic lane.", runtimeLane: "resolveGdsThemePreset(amber)" },
|
|
318
|
+
{ id: "neon-night", label: "Neon night", description: "Lime-accented dark-forward lane.", runtimeLane: "resolveGdsThemePreset(neon-night)" },
|
|
319
|
+
{ id: "skyline", label: "Skyline indigo", description: "Indigo technology-forward lane.", runtimeLane: "resolveGdsThemePreset(skyline)" },
|
|
320
|
+
{ id: "aurora", label: "Aurora teal", description: "Fresh teal-cyan app lane for optimistic product surfaces.", runtimeLane: "resolveGdsThemePreset(aurora)" },
|
|
321
|
+
{ id: "coral", label: "Coral bloom", description: "Expressive pink-coral lane for creator, commerce, and social products.", runtimeLane: "resolveGdsThemePreset(coral)" },
|
|
322
|
+
{ id: "mint", label: "Mint circuit", description: "Clean green-mint lane for health, learning, and growth products.", runtimeLane: "resolveGdsThemePreset(mint)" },
|
|
323
|
+
{ id: "orchid", label: "Orchid signal", description: "Purple-grape lane for editorial, culture, and premium tools.", runtimeLane: "resolveGdsThemePreset(orchid)" },
|
|
324
|
+
{ id: "royal", label: "Royal violet", description: "Confident violet lane for SaaS dashboards and professional apps.", runtimeLane: "resolveGdsThemePreset(royal)" }
|
|
325
|
+
];
|
|
326
|
+
function getGdsThemePresets() {
|
|
327
|
+
return themePresetCatalog;
|
|
328
|
+
}
|
|
329
|
+
function resolveGdsThemePreset(id, options) {
|
|
330
|
+
switch (id) {
|
|
331
|
+
case "default":
|
|
332
|
+
return gdsTheme;
|
|
333
|
+
case "dark-public":
|
|
334
|
+
return gdsDarkPublicTheme;
|
|
335
|
+
case "flat-surface":
|
|
336
|
+
return gdsFlatSurfaceTheme;
|
|
337
|
+
case "editorial":
|
|
338
|
+
return gdsEditorialPublicTheme;
|
|
339
|
+
case "brand":
|
|
340
|
+
return createPublicBrandTheme({
|
|
341
|
+
editorialSerif: options?.brandEditorialSerif ?? false,
|
|
342
|
+
flatSurfaces: options?.brandFlatSurfaces ?? true,
|
|
343
|
+
overrides: { primaryColor: options?.brandPrimary ?? "blue" }
|
|
344
|
+
});
|
|
345
|
+
default:
|
|
346
|
+
return customPresetThemes[id] ?? gdsTheme;
|
|
347
|
+
}
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
// src/font-lanes.ts
|
|
249
351
|
var import_core2 = require("@mantine/core");
|
|
352
|
+
var lanes = [
|
|
353
|
+
{ id: "inter", label: "Inter", body: "Inter, system-ui, sans-serif", heading: "Inter, system-ui, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
|
|
354
|
+
{ id: "manrope", label: "Manrope", body: "Manrope, system-ui, sans-serif", heading: "Manrope, system-ui, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
|
|
355
|
+
{ 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" },
|
|
356
|
+
{ 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" },
|
|
357
|
+
{ 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" },
|
|
358
|
+
{ 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" },
|
|
359
|
+
{ 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" },
|
|
360
|
+
{ 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" },
|
|
361
|
+
{ id: "instrument-serif", label: "Instrument Serif", body: "Inter, system-ui, sans-serif", heading: '"Instrument Serif", Georgia, serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
|
|
362
|
+
{ 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" }
|
|
363
|
+
];
|
|
364
|
+
function getGdsFontLanes() {
|
|
365
|
+
return lanes;
|
|
366
|
+
}
|
|
367
|
+
function resolveGdsFontLane(id) {
|
|
368
|
+
return lanes.find((lane) => lane.id === id) ?? lanes[0];
|
|
369
|
+
}
|
|
370
|
+
function applyGdsFontLane(theme, laneId) {
|
|
371
|
+
const lane = resolveGdsFontLane(laneId);
|
|
372
|
+
return (0, import_core2.mergeThemeOverrides)(theme, {
|
|
373
|
+
fontFamily: lane.body,
|
|
374
|
+
fontFamilyMonospace: lane.mono,
|
|
375
|
+
headings: {
|
|
376
|
+
fontFamily: lane.heading
|
|
377
|
+
}
|
|
378
|
+
});
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
// src/GdsProvider.tsx
|
|
382
|
+
var import_core3 = require("@mantine/core");
|
|
250
383
|
var import_modals = require("@mantine/modals");
|
|
251
384
|
var import_notifications = require("@mantine/notifications");
|
|
252
385
|
|
|
@@ -271,14 +404,36 @@ function GdsProvider({
|
|
|
271
404
|
locale = "en",
|
|
272
405
|
messages = {},
|
|
273
406
|
theme = gdsTheme,
|
|
274
|
-
defaultColorScheme = "light"
|
|
407
|
+
defaultColorScheme = "light",
|
|
408
|
+
forceColorScheme
|
|
275
409
|
}) {
|
|
276
410
|
const isRtl = ["ar", "he"].includes(locale);
|
|
277
411
|
const dir = isRtl ? "rtl" : "ltr";
|
|
278
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
412
|
+
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)(
|
|
413
|
+
import_core3.MantineProvider,
|
|
414
|
+
{
|
|
415
|
+
theme,
|
|
416
|
+
withCssVariables: true,
|
|
417
|
+
withGlobalClasses: true,
|
|
418
|
+
defaultColorScheme,
|
|
419
|
+
forceColorScheme,
|
|
420
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_modals.ModalsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
421
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_notifications.Notifications, {}),
|
|
422
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
423
|
+
import_core3.Box,
|
|
424
|
+
{
|
|
425
|
+
dir,
|
|
426
|
+
mih: "100vh",
|
|
427
|
+
h: "100%",
|
|
428
|
+
bg: "var(--mantine-color-body)",
|
|
429
|
+
c: "var(--mantine-color-text)",
|
|
430
|
+
style: { transition: "background-color 120ms ease, color 120ms ease" },
|
|
431
|
+
children
|
|
432
|
+
}
|
|
433
|
+
)
|
|
434
|
+
] }) })
|
|
435
|
+
}
|
|
436
|
+
) }) });
|
|
282
437
|
}
|
|
283
438
|
|
|
284
439
|
// src/notifications.ts
|
|
@@ -306,12 +461,17 @@ function showGdsNotification({
|
|
|
306
461
|
// Annotate the CommonJS export names for ESM import in node:
|
|
307
462
|
0 && (module.exports = {
|
|
308
463
|
GdsProvider,
|
|
464
|
+
applyGdsFontLane,
|
|
309
465
|
createPublicBrandTheme,
|
|
310
466
|
extendGdsTheme,
|
|
311
467
|
gdsDarkPublicTheme,
|
|
312
468
|
gdsEditorialPublicTheme,
|
|
313
469
|
gdsFlatSurfaceTheme,
|
|
314
470
|
gdsTheme,
|
|
471
|
+
getGdsFontLanes,
|
|
472
|
+
getGdsThemePresets,
|
|
473
|
+
resolveGdsFontLane,
|
|
474
|
+
resolveGdsThemePreset,
|
|
315
475
|
showGdsNotification,
|
|
316
476
|
useGdsTranslation,
|
|
317
477
|
withGdsMotion
|
package/dist/client.mjs
CHANGED
|
@@ -2,24 +2,34 @@ import {
|
|
|
2
2
|
GdsProvider,
|
|
3
3
|
showGdsNotification,
|
|
4
4
|
useGdsTranslation
|
|
5
|
-
} from "./chunk-
|
|
5
|
+
} from "./chunk-7B3MG4NV.mjs";
|
|
6
6
|
import {
|
|
7
|
+
applyGdsFontLane,
|
|
7
8
|
createPublicBrandTheme,
|
|
8
9
|
extendGdsTheme,
|
|
9
10
|
gdsDarkPublicTheme,
|
|
10
11
|
gdsEditorialPublicTheme,
|
|
11
12
|
gdsFlatSurfaceTheme,
|
|
12
13
|
gdsTheme,
|
|
14
|
+
getGdsFontLanes,
|
|
15
|
+
getGdsThemePresets,
|
|
16
|
+
resolveGdsFontLane,
|
|
17
|
+
resolveGdsThemePreset,
|
|
13
18
|
withGdsMotion
|
|
14
|
-
} from "./chunk-
|
|
19
|
+
} from "./chunk-TAPLA36E.mjs";
|
|
15
20
|
export {
|
|
16
21
|
GdsProvider,
|
|
22
|
+
applyGdsFontLane,
|
|
17
23
|
createPublicBrandTheme,
|
|
18
24
|
extendGdsTheme,
|
|
19
25
|
gdsDarkPublicTheme,
|
|
20
26
|
gdsEditorialPublicTheme,
|
|
21
27
|
gdsFlatSurfaceTheme,
|
|
22
28
|
gdsTheme,
|
|
29
|
+
getGdsFontLanes,
|
|
30
|
+
getGdsThemePresets,
|
|
31
|
+
resolveGdsFontLane,
|
|
32
|
+
resolveGdsThemePreset,
|
|
23
33
|
showGdsNotification,
|
|
24
34
|
useGdsTranslation,
|
|
25
35
|
withGdsMotion
|
package/dist/index.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, withGdsMotion } from './server.mjs';
|
|
1
|
+
export { GdsFontLane, GdsFontLaneId, GdsThemePreset, GdsThemePresetId, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, resolveGdsFontLane, resolveGdsThemePreset, withGdsMotion } from './server.mjs';
|
|
2
2
|
export { GdsNotificationOptions, GdsNotificationTone, GdsProvider, GdsProviderProps, showGdsNotification, useGdsTranslation } from './client.mjs';
|
|
3
3
|
import '@mantine/core';
|
|
4
4
|
import 'react/jsx-runtime';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, withGdsMotion } from './server.js';
|
|
1
|
+
export { GdsFontLane, GdsFontLaneId, GdsThemePreset, GdsThemePresetId, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, resolveGdsFontLane, resolveGdsThemePreset, withGdsMotion } from './server.js';
|
|
2
2
|
export { GdsNotificationOptions, GdsNotificationTone, GdsProvider, GdsProviderProps, showGdsNotification, useGdsTranslation } from './client.js';
|
|
3
3
|
import '@mantine/core';
|
|
4
4
|
import 'react/jsx-runtime';
|
package/dist/index.js
CHANGED
|
@@ -21,12 +21,17 @@ 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,
|
|
24
25
|
createPublicBrandTheme: () => createPublicBrandTheme,
|
|
25
26
|
extendGdsTheme: () => extendGdsTheme,
|
|
26
27
|
gdsDarkPublicTheme: () => gdsDarkPublicTheme,
|
|
27
28
|
gdsEditorialPublicTheme: () => gdsEditorialPublicTheme,
|
|
28
29
|
gdsFlatSurfaceTheme: () => gdsFlatSurfaceTheme,
|
|
29
30
|
gdsTheme: () => gdsTheme,
|
|
31
|
+
getGdsFontLanes: () => getGdsFontLanes,
|
|
32
|
+
getGdsThemePresets: () => getGdsThemePresets,
|
|
33
|
+
resolveGdsFontLane: () => resolveGdsFontLane,
|
|
34
|
+
resolveGdsThemePreset: () => resolveGdsThemePreset,
|
|
30
35
|
showGdsNotification: () => showGdsNotification,
|
|
31
36
|
useGdsTranslation: () => useGdsTranslation,
|
|
32
37
|
withGdsMotion: () => withGdsMotion
|
|
@@ -70,7 +75,7 @@ var baseTheme = (0, import_core.mergeMantineTheme)(import_core.DEFAULT_THEME, (0
|
|
|
70
75
|
},
|
|
71
76
|
styles: {
|
|
72
77
|
root: {
|
|
73
|
-
|
|
78
|
+
background: "var(--mantine-color-body)"
|
|
74
79
|
}
|
|
75
80
|
}
|
|
76
81
|
},
|
|
@@ -105,14 +110,14 @@ var gdsDarkPublicTheme = extendGdsTheme({
|
|
|
105
110
|
AppShell: {
|
|
106
111
|
styles: {
|
|
107
112
|
main: {
|
|
108
|
-
|
|
113
|
+
background: "var(--mantine-color-dark-8)"
|
|
109
114
|
}
|
|
110
115
|
}
|
|
111
116
|
},
|
|
112
117
|
Card: {
|
|
113
118
|
styles: {
|
|
114
119
|
root: {
|
|
115
|
-
|
|
120
|
+
background: "var(--mantine-color-dark-7)",
|
|
116
121
|
borderColor: "var(--mantine-color-dark-4)"
|
|
117
122
|
}
|
|
118
123
|
}
|
|
@@ -120,7 +125,7 @@ var gdsDarkPublicTheme = extendGdsTheme({
|
|
|
120
125
|
Paper: {
|
|
121
126
|
styles: {
|
|
122
127
|
root: {
|
|
123
|
-
|
|
128
|
+
background: "var(--mantine-color-dark-7)",
|
|
124
129
|
borderColor: "var(--mantine-color-dark-4)"
|
|
125
130
|
}
|
|
126
131
|
}
|
|
@@ -245,8 +250,136 @@ function withGdsMotion(overrides = {}) {
|
|
|
245
250
|
);
|
|
246
251
|
}
|
|
247
252
|
|
|
248
|
-
// src/
|
|
253
|
+
// src/theme-presets.ts
|
|
254
|
+
function createVibrantPresetTheme(primaryColor, options = {}) {
|
|
255
|
+
const darkSurface = options.darkForward ? `color-mix(in srgb, var(--mantine-color-${primaryColor}-9) 18%, var(--mantine-color-dark-8))` : "var(--mantine-color-dark-8)";
|
|
256
|
+
return extendGdsTheme({
|
|
257
|
+
primaryColor,
|
|
258
|
+
components: {
|
|
259
|
+
AppShell: {
|
|
260
|
+
styles: {
|
|
261
|
+
main: {
|
|
262
|
+
background: `light-dark(color-mix(in srgb, var(--mantine-color-${primaryColor}-0) 58%, var(--mantine-color-white)), ${darkSurface})`
|
|
263
|
+
},
|
|
264
|
+
header: {
|
|
265
|
+
background: `light-dark(color-mix(in srgb, var(--mantine-color-${primaryColor}-0) 68%, var(--mantine-color-white)), var(--mantine-color-dark-8))`,
|
|
266
|
+
borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-5))`
|
|
267
|
+
},
|
|
268
|
+
navbar: {
|
|
269
|
+
background: `light-dark(color-mix(in srgb, var(--mantine-color-${primaryColor}-0) 48%, var(--mantine-color-white)), var(--mantine-color-dark-8))`,
|
|
270
|
+
borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-5))`
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
},
|
|
274
|
+
Card: {
|
|
275
|
+
styles: {
|
|
276
|
+
root: {
|
|
277
|
+
background: `light-dark(var(--mantine-color-white), color-mix(in srgb, var(--mantine-color-${primaryColor}-9) 10%, var(--mantine-color-dark-7)))`,
|
|
278
|
+
borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-4))`
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
},
|
|
282
|
+
Paper: {
|
|
283
|
+
styles: {
|
|
284
|
+
root: {
|
|
285
|
+
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)))`,
|
|
286
|
+
borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-4))`
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
});
|
|
292
|
+
}
|
|
293
|
+
var customPresetThemes = {
|
|
294
|
+
sunset: createVibrantPresetTheme("orange"),
|
|
295
|
+
oceanic: createVibrantPresetTheme("cyan"),
|
|
296
|
+
forest: createVibrantPresetTheme("green"),
|
|
297
|
+
ruby: createVibrantPresetTheme("red"),
|
|
298
|
+
amber: createVibrantPresetTheme("yellow"),
|
|
299
|
+
"neon-night": createVibrantPresetTheme("lime", { darkForward: true }),
|
|
300
|
+
skyline: createVibrantPresetTheme("indigo"),
|
|
301
|
+
aurora: createVibrantPresetTheme("teal"),
|
|
302
|
+
coral: createVibrantPresetTheme("pink"),
|
|
303
|
+
mint: createVibrantPresetTheme("lime"),
|
|
304
|
+
orchid: createVibrantPresetTheme("grape"),
|
|
305
|
+
royal: createVibrantPresetTheme("violet")
|
|
306
|
+
};
|
|
307
|
+
var themePresetCatalog = [
|
|
308
|
+
{ id: "default", label: "Default runtime theme", description: "Balanced, neutral baseline lane.", runtimeLane: "gdsTheme" },
|
|
309
|
+
{ id: "dark-public", label: "Dark public theme", description: "Dark-first public lane.", runtimeLane: "gdsDarkPublicTheme" },
|
|
310
|
+
{ id: "flat-surface", label: "Flat surface theme", description: "Lower-elevation operational lane.", runtimeLane: "gdsFlatSurfaceTheme" },
|
|
311
|
+
{ id: "editorial", label: "Editorial serif theme", description: "Reading-first, serif headline lane.", runtimeLane: "gdsEditorialPublicTheme" },
|
|
312
|
+
{ id: "brand", label: "Brand theme generator", description: "Governed brand composition lane.", runtimeLane: "createPublicBrandTheme(...)" },
|
|
313
|
+
{ id: "sunset", label: "Sunset pulse", description: "Warm orange-magenta vibrant lane.", runtimeLane: "resolveGdsThemePreset(sunset)" },
|
|
314
|
+
{ id: "oceanic", label: "Oceanic wave", description: "Cool cyan-blue vibrant lane.", runtimeLane: "resolveGdsThemePreset(oceanic)" },
|
|
315
|
+
{ id: "forest", label: "Forest signal", description: "Natural emerald-driven vibrant lane.", runtimeLane: "resolveGdsThemePreset(forest)" },
|
|
316
|
+
{ id: "ruby", label: "Ruby spark", description: "Bold red high-contrast lane.", runtimeLane: "resolveGdsThemePreset(ruby)" },
|
|
317
|
+
{ id: "amber", label: "Amber glow", description: "Golden yellow energetic lane.", runtimeLane: "resolveGdsThemePreset(amber)" },
|
|
318
|
+
{ id: "neon-night", label: "Neon night", description: "Lime-accented dark-forward lane.", runtimeLane: "resolveGdsThemePreset(neon-night)" },
|
|
319
|
+
{ id: "skyline", label: "Skyline indigo", description: "Indigo technology-forward lane.", runtimeLane: "resolveGdsThemePreset(skyline)" },
|
|
320
|
+
{ id: "aurora", label: "Aurora teal", description: "Fresh teal-cyan app lane for optimistic product surfaces.", runtimeLane: "resolveGdsThemePreset(aurora)" },
|
|
321
|
+
{ id: "coral", label: "Coral bloom", description: "Expressive pink-coral lane for creator, commerce, and social products.", runtimeLane: "resolveGdsThemePreset(coral)" },
|
|
322
|
+
{ id: "mint", label: "Mint circuit", description: "Clean green-mint lane for health, learning, and growth products.", runtimeLane: "resolveGdsThemePreset(mint)" },
|
|
323
|
+
{ id: "orchid", label: "Orchid signal", description: "Purple-grape lane for editorial, culture, and premium tools.", runtimeLane: "resolveGdsThemePreset(orchid)" },
|
|
324
|
+
{ id: "royal", label: "Royal violet", description: "Confident violet lane for SaaS dashboards and professional apps.", runtimeLane: "resolveGdsThemePreset(royal)" }
|
|
325
|
+
];
|
|
326
|
+
function getGdsThemePresets() {
|
|
327
|
+
return themePresetCatalog;
|
|
328
|
+
}
|
|
329
|
+
function resolveGdsThemePreset(id, options) {
|
|
330
|
+
switch (id) {
|
|
331
|
+
case "default":
|
|
332
|
+
return gdsTheme;
|
|
333
|
+
case "dark-public":
|
|
334
|
+
return gdsDarkPublicTheme;
|
|
335
|
+
case "flat-surface":
|
|
336
|
+
return gdsFlatSurfaceTheme;
|
|
337
|
+
case "editorial":
|
|
338
|
+
return gdsEditorialPublicTheme;
|
|
339
|
+
case "brand":
|
|
340
|
+
return createPublicBrandTheme({
|
|
341
|
+
editorialSerif: options?.brandEditorialSerif ?? false,
|
|
342
|
+
flatSurfaces: options?.brandFlatSurfaces ?? true,
|
|
343
|
+
overrides: { primaryColor: options?.brandPrimary ?? "blue" }
|
|
344
|
+
});
|
|
345
|
+
default:
|
|
346
|
+
return customPresetThemes[id] ?? gdsTheme;
|
|
347
|
+
}
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
// src/font-lanes.ts
|
|
249
351
|
var import_core2 = require("@mantine/core");
|
|
352
|
+
var lanes = [
|
|
353
|
+
{ id: "inter", label: "Inter", body: "Inter, system-ui, sans-serif", heading: "Inter, system-ui, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
|
|
354
|
+
{ id: "manrope", label: "Manrope", body: "Manrope, system-ui, sans-serif", heading: "Manrope, system-ui, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
|
|
355
|
+
{ 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" },
|
|
356
|
+
{ 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" },
|
|
357
|
+
{ 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" },
|
|
358
|
+
{ 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" },
|
|
359
|
+
{ 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" },
|
|
360
|
+
{ 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" },
|
|
361
|
+
{ id: "instrument-serif", label: "Instrument Serif", body: "Inter, system-ui, sans-serif", heading: '"Instrument Serif", Georgia, serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
|
|
362
|
+
{ 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" }
|
|
363
|
+
];
|
|
364
|
+
function getGdsFontLanes() {
|
|
365
|
+
return lanes;
|
|
366
|
+
}
|
|
367
|
+
function resolveGdsFontLane(id) {
|
|
368
|
+
return lanes.find((lane) => lane.id === id) ?? lanes[0];
|
|
369
|
+
}
|
|
370
|
+
function applyGdsFontLane(theme, laneId) {
|
|
371
|
+
const lane = resolveGdsFontLane(laneId);
|
|
372
|
+
return (0, import_core2.mergeThemeOverrides)(theme, {
|
|
373
|
+
fontFamily: lane.body,
|
|
374
|
+
fontFamilyMonospace: lane.mono,
|
|
375
|
+
headings: {
|
|
376
|
+
fontFamily: lane.heading
|
|
377
|
+
}
|
|
378
|
+
});
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
// src/GdsProvider.tsx
|
|
382
|
+
var import_core3 = require("@mantine/core");
|
|
250
383
|
var import_modals = require("@mantine/modals");
|
|
251
384
|
var import_notifications = require("@mantine/notifications");
|
|
252
385
|
|
|
@@ -271,14 +404,36 @@ function GdsProvider({
|
|
|
271
404
|
locale = "en",
|
|
272
405
|
messages = {},
|
|
273
406
|
theme = gdsTheme,
|
|
274
|
-
defaultColorScheme = "light"
|
|
407
|
+
defaultColorScheme = "light",
|
|
408
|
+
forceColorScheme
|
|
275
409
|
}) {
|
|
276
410
|
const isRtl = ["ar", "he"].includes(locale);
|
|
277
411
|
const dir = isRtl ? "rtl" : "ltr";
|
|
278
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
412
|
+
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)(
|
|
413
|
+
import_core3.MantineProvider,
|
|
414
|
+
{
|
|
415
|
+
theme,
|
|
416
|
+
withCssVariables: true,
|
|
417
|
+
withGlobalClasses: true,
|
|
418
|
+
defaultColorScheme,
|
|
419
|
+
forceColorScheme,
|
|
420
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_modals.ModalsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
421
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_notifications.Notifications, {}),
|
|
422
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
423
|
+
import_core3.Box,
|
|
424
|
+
{
|
|
425
|
+
dir,
|
|
426
|
+
mih: "100vh",
|
|
427
|
+
h: "100%",
|
|
428
|
+
bg: "var(--mantine-color-body)",
|
|
429
|
+
c: "var(--mantine-color-text)",
|
|
430
|
+
style: { transition: "background-color 120ms ease, color 120ms ease" },
|
|
431
|
+
children
|
|
432
|
+
}
|
|
433
|
+
)
|
|
434
|
+
] }) })
|
|
435
|
+
}
|
|
436
|
+
) }) });
|
|
282
437
|
}
|
|
283
438
|
|
|
284
439
|
// src/notifications.ts
|
|
@@ -306,12 +461,17 @@ function showGdsNotification({
|
|
|
306
461
|
// Annotate the CommonJS export names for ESM import in node:
|
|
307
462
|
0 && (module.exports = {
|
|
308
463
|
GdsProvider,
|
|
464
|
+
applyGdsFontLane,
|
|
309
465
|
createPublicBrandTheme,
|
|
310
466
|
extendGdsTheme,
|
|
311
467
|
gdsDarkPublicTheme,
|
|
312
468
|
gdsEditorialPublicTheme,
|
|
313
469
|
gdsFlatSurfaceTheme,
|
|
314
470
|
gdsTheme,
|
|
471
|
+
getGdsFontLanes,
|
|
472
|
+
getGdsThemePresets,
|
|
473
|
+
resolveGdsFontLane,
|
|
474
|
+
resolveGdsThemePreset,
|
|
315
475
|
showGdsNotification,
|
|
316
476
|
useGdsTranslation,
|
|
317
477
|
withGdsMotion
|
package/dist/index.mjs
CHANGED
|
@@ -2,24 +2,34 @@ import {
|
|
|
2
2
|
GdsProvider,
|
|
3
3
|
showGdsNotification,
|
|
4
4
|
useGdsTranslation
|
|
5
|
-
} from "./chunk-
|
|
5
|
+
} from "./chunk-7B3MG4NV.mjs";
|
|
6
6
|
import {
|
|
7
|
+
applyGdsFontLane,
|
|
7
8
|
createPublicBrandTheme,
|
|
8
9
|
extendGdsTheme,
|
|
9
10
|
gdsDarkPublicTheme,
|
|
10
11
|
gdsEditorialPublicTheme,
|
|
11
12
|
gdsFlatSurfaceTheme,
|
|
12
13
|
gdsTheme,
|
|
14
|
+
getGdsFontLanes,
|
|
15
|
+
getGdsThemePresets,
|
|
16
|
+
resolveGdsFontLane,
|
|
17
|
+
resolveGdsThemePreset,
|
|
13
18
|
withGdsMotion
|
|
14
|
-
} from "./chunk-
|
|
19
|
+
} from "./chunk-TAPLA36E.mjs";
|
|
15
20
|
export {
|
|
16
21
|
GdsProvider,
|
|
22
|
+
applyGdsFontLane,
|
|
17
23
|
createPublicBrandTheme,
|
|
18
24
|
extendGdsTheme,
|
|
19
25
|
gdsDarkPublicTheme,
|
|
20
26
|
gdsEditorialPublicTheme,
|
|
21
27
|
gdsFlatSurfaceTheme,
|
|
22
28
|
gdsTheme,
|
|
29
|
+
getGdsFontLanes,
|
|
30
|
+
getGdsThemePresets,
|
|
31
|
+
resolveGdsFontLane,
|
|
32
|
+
resolveGdsThemePreset,
|
|
23
33
|
showGdsNotification,
|
|
24
34
|
useGdsTranslation,
|
|
25
35
|
withGdsMotion
|
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 };
|