feat(frontend): update Cunningham theme tokens and font imports

2026-03-06 11:54:37 +00:00
parent ee2462310f
commit 05ffba14fd
4 changed files with 55 additions and 12 deletions
--- a/src/frontend/apps/impress/cunningham.ts
+++ b/src/frontend/apps/impress/cunningham.ts
@@ -4,21 +4,21 @@ import {
  whiteLabelGlobals,
 } from '@gouvfr-lasuite/ui-kit';

+const spacing = {
+  '0': '0rem',
+  none: '0rem',
+  auto: 'auto',
+  bx: '2.2rem',
+  full: '100%',
+  '3xs': '0.25rem',
+  '2xs': '0.375rem',
+};
+
 const themeWhiteLabelLight = getUIKitThemesFromGlobals(whiteLabelGlobals, {
  prefix: 'default',
  variants: ['light'],
  overrides: {
-    globals: {
-      spacing: {
-        '0': '0rem',
-        none: '0rem',
-        auto: 'auto',
-        bx: '2.2rem',
-        full: '100%',
-        '3xs': '0.25rem',
-        '2xs': '0.375rem',
-      },
-    },
+    globals: { spacing },
  },
 });

@@ -45,10 +45,51 @@ const themesDSFR = {
  dsfr: themesDSFRLight['dsfr-light'],
 };

+// O Estúdio — warm amber/gold on dark.
+const themeEstudioDark = getUIKitThemesFromGlobals(whiteLabelGlobals, {
+  prefix: 'estudio',
+  variants: ['dark'],
+  overrides: {
+    globals: {
+      spacing,
+      colors: {
+        // Amber/gold brand palette — replaces the default purple/blue.
+        'brand-050': '#fffbeb',
+        'brand-100': '#fef3c7',
+        'brand-200': '#fde68a',
+        'brand-300': '#fcd34d',
+        'brand-400': '#fbbf24',
+        'brand-500': '#f59e0b',
+        'brand-600': '#d97706',
+        'brand-700': '#b45309',
+        'brand-800': '#92400e',
+        'brand-900': '#78350f',
+        'brand-950': '#451a03',
+        // Logo gradient colours used by ui-kit header components.
+        'logo-1-light': '#f59e0b',
+        'logo-2-light': '#d97706',
+        'logo-1-dark': '#fcd34d',
+        'logo-2-dark': '#fbbf24',
+      },
+      font: {
+        families: {
+          base: 'Ysabeau Variable, Inter, Roboto Flex Variable, sans-serif',
+          accent: 'Ysabeau Variable, Inter, Roboto Flex Variable, sans-serif',
+        },
+      },
+    },
+  },
+});
+
+const themeEstudio = {
+  estudio: themeEstudioDark['estudio-dark'],
+};
+
 const docsTokens = {
  themes: {
    ...themeDefault,
    ...themesDSFR,
+    ...themeEstudio,
  },
 };

--- a/src/frontend/apps/impress/package.json
+++ b/src/frontend/apps/impress/package.json
@@ -34,6 +34,7 @@
    "@emoji-mart/data": "1.2.1",
    "@emoji-mart/react": "1.1.1",
    "@fontsource-variable/inter": "5.2.8",
+    "@fontsource-variable/ysabeau": "^5.0.0",
    "@fontsource-variable/material-symbols-outlined": "5.2.35",
    "@fontsource/material-icons": "5.2.7",
    "@gouvfr-lasuite/cunningham-react": "4.2.0",
--- a/src/frontend/apps/impress/src/pages/_document.tsx
+++ b/src/frontend/apps/impress/src/pages/_document.tsx
@@ -20,7 +20,7 @@ class MyDocument extends Document<{ locale: string }> {
  render() {
    return (
      <Html lang={this.props.locale}>
-        <Head />
+        <Head></Head>
        <body>
          <Main />
          <NextScript />
--- a/src/frontend/apps/impress/src/pages/globals.css
+++ b/src/frontend/apps/impress/src/pages/globals.css
@@ -1,3 +1,4 @@
+@import '@fontsource-variable/ysabeau';
@import url('../cunningham/cunningham-style.css');
@import url('@fontsource/material-icons');
@import url('@fontsource/material-icons-outlined');