studio/people
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄(app-desk) add DSFR theme to Cunningham

Browse Source 
In order to have the look and feel of the DSFR, we
create a DSFR theme to the Cunningham design system.
This commit is contained in:
Anthony LC
2024-01-18 13:06:08 +01:00
committed by Anthony LC
parent 97e7d99c02
commit e2618d0e11
20 changed files with 412 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/frontend/apps/desk/cunningham.ts
View File

@@ -88,11 +88,10 @@ const config = {
focus: 'var(--c--components--forms-select--border-radius)',
},
'font-size': 'var(--c--theme--font--sizes--ml)',
'menu-background-color': '#ffffff',
'item-background-color': {
hover: 'var(--c--theme--colors--primary-100)',
hover: 'var(--c--theme--colors--primary-300)',
},
'item-color': 'var(--c--theme--colors--primary-500)',
'value-color': 'var(--c--theme--colors--primary-500)',
},
'forms-switch': {
'accent-color': 'var(--c--theme--colors--primary-400)',
@@ -157,7 +156,7 @@ const config = {
},
},
tertiary: {
color: 'var(--c--theme--colors--primary-500)',
color: 'var(--c--theme--colors--primary-text)',
'color-disabled': 'var(--c--theme--colors--greyscale-600)',
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
@@ -173,6 +172,118 @@ const config = {
},
},
},
dsfr: {
theme: {
colors: {
'primary-text': '#000091',
'primary-100': '#f5f5fe',
'primary-200': '#ececfe',
'primary-300': '#e3e3fd',
'primary-400': '#cacafb',
'primary-500': '#6a6af4',
'primary-600': '#000091',
'primary-700': '#272747',
'primary-800': '#21213f',
'primary-900': '#1c1a36',
'secondary-text': '#FFFFFF',
'secondary-100': '#fee9ea',
'secondary-200': '#fedfdf',
'secondary-300': '#fdbfbf',
'secondary-400': '#e1020f',
'secondary-500': '#c91a1f',
'secondary-600': '#5e2b2b',
'secondary-700': '#3b2424',
'secondary-800': '#341f1f',
'secondary-900': '#2b1919',
'greyscale-000': '#cecece',
'greyscale-100': '#f6f6f6',
'greyscale-200': '#eeeeee',
'greyscale-300': '#e5e5e5',
'greyscale-400': '#dddddd',
'greyscale-500': '#cecece',
'greyscale-600': '#7b7b7b',
'greyscale-700': '#666666',
'greyscale-800': '#2a2a2a',
'greyscale-900': '#1e1e1e',
'success-text': '#1f8d49',
'success-100': '#dffee6',
'success-200': '#b8fec9',
'success-300': '#88fdaa',
'success-400': '#3bea7e',
'success-500': '#1f8d49',
'success-600': '#18753c',
'success-700': '#204129',
'success-800': '#1e2e22',
'success-900': '#19281d',
'info-text': '#0078f3',
'info-100': '#f4f6ff',
'info-200': '#e8edff',
'info-300': '#dde5ff',
'info-400': '#bdcdff',
'info-500': '#0078f3',
'info-600': '#0063cb',
'info-700': '#f4f6ff',
'info-800': '#222a3f',
'info-900': '#1d2437',
'warning-text': '#d64d00',
'warning-100': '#fff4f3',
'warning-200': '#ffe9e6',
'warning-300': '#ffded9',
'warning-400': '#ffbeb4',
'warning-500': '#d64d00',
'warning-600': '#b34000',
'warning-700': '#5e2c21',
'warning-800': '#3e241e',
'warning-900': '#361e19',
'danger-text': '#e1000f',
'danger-100': '#fef4f4',
'danger-200': '#fee9e9',
'danger-300': '#fddede',
'danger-400': '#fcbfbf',
'danger-500': '#e1000f',
'danger-600': '#c9191e',
'danger-700': '#642727',
'danger-800': '#412121',
'danger-900': '#3a1c1c',
},
font: {
families: {
accent: 'Marianne',
base: 'Marianne',
},
},
},
components: {
alert: {
'border-radius': '0',
},
button: {
'border-radius': '2px',
},
'forms-checkbox': {
'border-radius': '0',
},
'forms-switch': {
'handle-border-radius': '2px',
'rail-border-radius': '4px',
},
'forms-input': {
'border-radius': '0',
},
'forms-select': {
'border-radius': '0',
},
'forms-datepicker': {
'border-radius': '0',
},
'forms-textarea': {
'border-radius': '0',
},
'forms-fileuploader': {
'border-radius': '0',
},
},
},
},
};

28
src/frontend/apps/desk/src/app/layout.tsx
View File

@@ -1,13 +1,12 @@
'use client';
import { CunninghamProvider, Switch } from '@openfun/cunningham-react';
import { CunninghamProvider } from '@openfun/cunningham-react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { Inter } from 'next/font/google';
import { useState } from 'react';
import './globals.css';
const inter = Inter({ subsets: ['latin'] });
import './globals.css';
import { useCunninghamTheme } from '@/cunningham';
const queryClient = new QueryClient();
export default function RootLayout({
@@ -15,27 +14,14 @@ export default function RootLayout({
}: {
children: React.ReactNode;
}) {
const [themeDark, setThemeDark] = useState(false);
const { theme } = useCunninghamTheme();
return (
<html lang="en">
<body className={inter.className}>
<body>
<QueryClientProvider client={queryClient}>
<ReactQueryDevtools />
<CunninghamProvider theme={themeDark ? 'dark' : 'default'}>
<div
style={{
backgroundColor: themeDark ? '#555' : 'white',
}}
>
<Switch
label="Dark"
onChange={() => setThemeDark(!themeDark)}
checked={themeDark}
/>
{children}
</div>
</CunninghamProvider>
<CunninghamProvider theme={theme}>{children}</CunninghamProvider>
</QueryClientProvider>
</body>
</html>

BIN
src/frontend/apps/desk/src/assets/fonts/Marianne/Marianne-Bold.woff Normal file
View File

Binary file not shown.

BIN
src/frontend/apps/desk/src/assets/fonts/Marianne/Marianne-Bold_Italic.woff Normal file
View File

Binary file not shown.

BIN
src/frontend/apps/desk/src/assets/fonts/Marianne/Marianne-ExtraBold.woff Normal file
View File

Binary file not shown.

BIN
src/frontend/apps/desk/src/assets/fonts/Marianne/Marianne-ExtraBold_Italic.woff Normal file
View File

Binary file not shown.

BIN
src/frontend/apps/desk/src/assets/fonts/Marianne/Marianne-Light.woff Normal file
View File

Binary file not shown.

BIN
src/frontend/apps/desk/src/assets/fonts/Marianne/Marianne-Light_Italic.woff Normal file
View File

Binary file not shown.

BIN
src/frontend/apps/desk/src/assets/fonts/Marianne/Marianne-Medium.woff Normal file
View File

Binary file not shown.

BIN
src/frontend/apps/desk/src/assets/fonts/Marianne/Marianne-Medium_Italic.woff Normal file
View File

Binary file not shown.

BIN
src/frontend/apps/desk/src/assets/fonts/Marianne/Marianne-Regular.woff Normal file
View File

Binary file not shown.

BIN
src/frontend/apps/desk/src/assets/fonts/Marianne/Marianne-Regular_Italic.woff Normal file
View File

Binary file not shown.

BIN
src/frontend/apps/desk/src/assets/fonts/Marianne/Marianne-Thin.woff Normal file
View File

Binary file not shown.

BIN
src/frontend/apps/desk/src/assets/fonts/Marianne/Marianne-Thin_Italic.woff Normal file
View File

Binary file not shown.

77
src/frontend/apps/desk/src/assets/fonts/Marianne/Marianne-font.css Normal file
View File

@@ -0,0 +1,77 @@
@font-face {
font-family: Marianne;
src: url('Marianne-Thin.woff') format('truetype');
font-weight: 100;
}
@font-face {
font-family: Marianne;
src: url('Marianne-Thin_Italic.woff') format('truetype');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: Marianne;
src: url('Marianne-Light.woff') format('truetype');
font-weight: 300;
}
@font-face {
font-family: Marianne;
src: url('Marianne-Light_Italic.woff') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: Marianne;
src: url('Marianne-Regular.woff') format('truetype');
font-weight: 400;
}
@font-face {
font-family: Marianne;
src: url('Marianne-Regular_Italic.woff') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: Marianne;
src: url('Marianne-Medium.woff') format('truetype');
font-weight: 500;
}
@font-face {
font-family: Marianne;
src: url('Marianne-Medium_Italic.woff') format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: Marianne;
src: url('Marianne-Bold.woff') format('truetype');
font-weight: 700;
}
@font-face {
font-family: Marianne;
src: url('Marianne-Bold_Italic.woff') format('truetype');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: Marianne;
src: url('Marianne-ExtraBold.woff') format('truetype');
font-weight: 800;
}
@font-face {
font-family: Marianne;
src: url('Marianne-ExtraBold_Italic.woff') format('truetype');
font-weight: 800;
font-style: italic;
}

4
src/frontend/apps/desk/src/cunningham/cunningham-style.css
View File

@@ -3,12 +3,12 @@
@import url('@openfun/cunningham-react/fonts');
@import url('./cunningham-tokens.css');
@import url('./cunningham-custom-tokens.css');
@import url('../assets/fonts/Marianne/Marianne-font.css');
.c__input,
.c__field,
.c__select,
.c__datagrid,
.typo {
.c__datagrid {
font-family: var(--c--theme--font--families--base);
}

96
src/frontend/apps/desk/src/cunningham/cunningham-tokens.css
View File

@@ -171,14 +171,9 @@
--c--components--forms-select--border-radius
);
--c--components--forms-select--font-size: var(--c--theme--font--sizes--ml);
--c--components--forms-select--menu-background-color: #fff;
--c--components--forms-select--item-background-color--hover: var(
--c--theme--colors--primary-100
);
--c--components--forms-select--item-color: var(
--c--theme--colors--primary-500
);
--c--components--forms-select--value-color: var(
--c--theme--colors--primary-500
--c--theme--colors--primary-300
);
--c--components--forms-switch--accent-color: var(
--c--theme--colors--primary-400
@@ -253,7 +248,7 @@
--c--theme--colors--primary-200
);
--c--components--button--tertiary--color: var(
--c--theme--colors--primary-500
--c--theme--colors--primary-text
);
--c--components--button--tertiary--color-disabled: var(
--c--theme--colors--greyscale-600
@@ -317,6 +312,91 @@
--c--theme--colors--danger-900: #9d6666;
}
.cunningham-theme--dsfr {
--c--theme--colors--primary-text: #000091;
--c--theme--colors--primary-100: #f5f5fe;
--c--theme--colors--primary-200: #ececfe;
--c--theme--colors--primary-300: #e3e3fd;
--c--theme--colors--primary-400: #cacafb;
--c--theme--colors--primary-500: #6a6af4;
--c--theme--colors--primary-600: #000091;
--c--theme--colors--primary-700: #272747;
--c--theme--colors--primary-800: #21213f;
--c--theme--colors--primary-900: #1c1a36;
--c--theme--colors--secondary-text: #fff;
--c--theme--colors--secondary-100: #fee9ea;
--c--theme--colors--secondary-200: #fedfdf;
--c--theme--colors--secondary-300: #fdbfbf;
--c--theme--colors--secondary-400: #e1020f;
--c--theme--colors--secondary-500: #c91a1f;
--c--theme--colors--secondary-600: #5e2b2b;
--c--theme--colors--secondary-700: #3b2424;
--c--theme--colors--secondary-800: #341f1f;
--c--theme--colors--secondary-900: #2b1919;
--c--theme--colors--greyscale-000: #cecece;
--c--theme--colors--greyscale-100: #f6f6f6;
--c--theme--colors--greyscale-200: #eee;
--c--theme--colors--greyscale-300: #e5e5e5;
--c--theme--colors--greyscale-400: #ddd;
--c--theme--colors--greyscale-500: #cecece;
--c--theme--colors--greyscale-600: #7b7b7b;
--c--theme--colors--greyscale-700: #666;
--c--theme--colors--greyscale-800: #2a2a2a;
--c--theme--colors--greyscale-900: #1e1e1e;
--c--theme--colors--success-text: #1f8d49;
--c--theme--colors--success-100: #dffee6;
--c--theme--colors--success-200: #b8fec9;
--c--theme--colors--success-300: #88fdaa;
--c--theme--colors--success-400: #3bea7e;
--c--theme--colors--success-500: #1f8d49;
--c--theme--colors--success-600: #18753c;
--c--theme--colors--success-700: #204129;
--c--theme--colors--success-800: #1e2e22;
--c--theme--colors--success-900: #19281d;
--c--theme--colors--info-text: #0078f3;
--c--theme--colors--info-100: #f4f6ff;
--c--theme--colors--info-200: #e8edff;
--c--theme--colors--info-300: #dde5ff;
--c--theme--colors--info-400: #bdcdff;
--c--theme--colors--info-500: #0078f3;
--c--theme--colors--info-600: #0063cb;
--c--theme--colors--info-700: #f4f6ff;
--c--theme--colors--info-800: #222a3f;
--c--theme--colors--info-900: #1d2437;
--c--theme--colors--warning-text: #d64d00;
--c--theme--colors--warning-100: #fff4f3;
--c--theme--colors--warning-200: #ffe9e6;
--c--theme--colors--warning-300: #ffded9;
--c--theme--colors--warning-400: #ffbeb4;
--c--theme--colors--warning-500: #d64d00;
--c--theme--colors--warning-600: #b34000;
--c--theme--colors--warning-700: #5e2c21;
--c--theme--colors--warning-800: #3e241e;
--c--theme--colors--warning-900: #361e19;
--c--theme--colors--danger-text: #e1000f;
--c--theme--colors--danger-100: #fef4f4;
--c--theme--colors--danger-200: #fee9e9;
--c--theme--colors--danger-300: #fddede;
--c--theme--colors--danger-400: #fcbfbf;
--c--theme--colors--danger-500: #e1000f;
--c--theme--colors--danger-600: #c9191e;
--c--theme--colors--danger-700: #642727;
--c--theme--colors--danger-800: #412121;
--c--theme--colors--danger-900: #3a1c1c;
--c--theme--font--families--accent: marianne;
--c--theme--font--families--base: marianne;
--c--components--alert--border-radius: 0;
--c--components--button--border-radius: 2px;
--c--components--forms-checkbox--border-radius: 0;
--c--components--forms-switch--handle-border-radius: 2px;
--c--components--forms-switch--rail-border-radius: 4px;
--c--components--forms-input--border-radius: 0;
--c--components--forms-select--border-radius: 0;
--c--components--forms-datepicker--border-radius: 0;
--c--components--forms-textarea--border-radius: 0;
--c--components--forms-fileuploader--border-radius: 0;
}
.clr-secondary-text {
color: var(--c--theme--colors--secondary-text);
}

98
src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts
View File

@@ -191,11 +191,10 @@ export const tokens = {
focus: 'var(--c--components--forms-select--border-radius)',
},
'font-size': 'var(--c--theme--font--sizes--ml)',
'menu-background-color': '#ffffff',
'item-background-color': {
hover: 'var(--c--theme--colors--primary-100)',
hover: 'var(--c--theme--colors--primary-300)',
},
'item-color': 'var(--c--theme--colors--primary-500)',
'value-color': 'var(--c--theme--colors--primary-500)',
},
'forms-switch': {
'accent-color': 'var(--c--theme--colors--primary-400)',
@@ -256,7 +255,7 @@ export const tokens = {
border: { color: 'var(--c--theme--colors--primary-200)' },
},
tertiary: {
color: 'var(--c--theme--colors--primary-500)',
color: 'var(--c--theme--colors--primary-text)',
'color-disabled': 'var(--c--theme--colors--greyscale-600)',
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
@@ -319,5 +318,96 @@ export const tokens = {
},
},
},
dsfr: {
theme: {
colors: {
'primary-text': '#000091',
'primary-100': '#f5f5fe',
'primary-200': '#ececfe',
'primary-300': '#e3e3fd',
'primary-400': '#cacafb',
'primary-500': '#6a6af4',
'primary-600': '#000091',
'primary-700': '#272747',
'primary-800': '#21213f',
'primary-900': '#1c1a36',
'secondary-text': '#FFFFFF',
'secondary-100': '#fee9ea',
'secondary-200': '#fedfdf',
'secondary-300': '#fdbfbf',
'secondary-400': '#e1020f',
'secondary-500': '#c91a1f',
'secondary-600': '#5e2b2b',
'secondary-700': '#3b2424',
'secondary-800': '#341f1f',
'secondary-900': '#2b1919',
'greyscale-000': '#cecece',
'greyscale-100': '#f6f6f6',
'greyscale-200': '#eeeeee',
'greyscale-300': '#e5e5e5',
'greyscale-400': '#dddddd',
'greyscale-500': '#cecece',
'greyscale-600': '#7b7b7b',
'greyscale-700': '#666666',
'greyscale-800': '#2a2a2a',
'greyscale-900': '#1e1e1e',
'success-text': '#1f8d49',
'success-100': '#dffee6',
'success-200': '#b8fec9',
'success-300': '#88fdaa',
'success-400': '#3bea7e',
'success-500': '#1f8d49',
'success-600': '#18753c',
'success-700': '#204129',
'success-800': '#1e2e22',
'success-900': '#19281d',
'info-text': '#0078f3',
'info-100': '#f4f6ff',
'info-200': '#e8edff',
'info-300': '#dde5ff',
'info-400': '#bdcdff',
'info-500': '#0078f3',
'info-600': '#0063cb',
'info-700': '#f4f6ff',
'info-800': '#222a3f',
'info-900': '#1d2437',
'warning-text': '#d64d00',
'warning-100': '#fff4f3',
'warning-200': '#ffe9e6',
'warning-300': '#ffded9',
'warning-400': '#ffbeb4',
'warning-500': '#d64d00',
'warning-600': '#b34000',
'warning-700': '#5e2c21',
'warning-800': '#3e241e',
'warning-900': '#361e19',
'danger-text': '#e1000f',
'danger-100': '#fef4f4',
'danger-200': '#fee9e9',
'danger-300': '#fddede',
'danger-400': '#fcbfbf',
'danger-500': '#e1000f',
'danger-600': '#c9191e',
'danger-700': '#642727',
'danger-800': '#412121',
'danger-900': '#3a1c1c',
},
font: { families: { accent: 'Marianne', base: 'Marianne' } },
},
components: {
alert: { 'border-radius': '0' },
button: { 'border-radius': '2px' },
'forms-checkbox': { 'border-radius': '0' },
'forms-switch': {
'handle-border-radius': '2px',
'rail-border-radius': '4px',
},
'forms-input': { 'border-radius': '0' },
'forms-select': { 'border-radius': '0' },
'forms-datepicker': { 'border-radius': '0' },
'forms-textarea': { 'border-radius': '0' },
'forms-fileuploader': { 'border-radius': '0' },
},
},
},
};

7
src/frontend/apps/desk/src/cunningham/index.ts
View File

@@ -1,7 +1,4 @@
import { tokens } from './cunningham-tokens';
import useCunninghamTheme from './useCunninghamTheme';
const themeTokens = tokens.themes.default.theme;
const colorsTokens = tokens.themes.default.theme.colors;
const componentTokens = tokens.themes.default.components;
export { tokens, themeTokens, componentTokens, colorsTokens };
export { tokens, useCunninghamTheme };

27
src/frontend/apps/desk/src/cunningham/useCunninghamTheme.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { create } from 'zustand';
import { tokens } from './cunningham-tokens';
type ColorsTokens = typeof tokens.themes.default.theme.colors;
type ComponentTokens = typeof tokens.themes.default.components;
interface AuthStore {
theme: string;
setTheme: (theme: string) => void;
colorsTokens: () => ColorsTokens;
componentTokens: () => ComponentTokens;
}
const useCunninghamTheme = create<AuthStore>((set, get) => {
const currentTheme = () => tokens.themes[get().theme as 'default'];
return {
theme: 'dsfr',
colorsTokens: () => currentTheme().theme.colors,
componentTokens: () => currentTheme().components,
setTheme: (theme: string) => {
set({ theme });
},
};
});
export default useCunninghamTheme;