(waffle) hide the waffle if not fr theme

show waffe only on fr theme
This commit is contained in:
Eléonore Voisin
2026-02-16 17:37:06 +01:00
parent 224e6f83fd
commit 96a2963adf
6 changed files with 59 additions and 31 deletions
+1
View File
@@ -10,6 +10,7 @@ and this project adheres to
### Added
- ✨(waffle) hide the waffle if not fr theme
- ✨(front) allow pasting an attachment from clipboard
### Changed
@@ -145,10 +145,8 @@ export const commonGlobals = {
export const whiteLabelGlobals = {
colors: {
'logo-1-light': '#4844AD',
'logo-2-light': '#4844AD',
'logo-1-dark': '#BEC5F0',
'logo-2-dark': '#BEC5F0',
'logo-1': '#4844AD',
'logo-2': '#4844AD',
'brand-050': '#EEF1FA',
'brand-100': '#DDE2F5',
'brand-150': '#CED3F1',
@@ -1,8 +1,8 @@
:root {
--c--globals--colors--logo-1-light: #4844ad;
--c--globals--colors--logo-2-light: #4844ad;
--c--globals--colors--logo-1-dark: #bec5f0;
--c--globals--colors--logo-2-dark: #bec5f0;
--c--globals--colors--logo-1-light: #377fdb;
--c--globals--colors--logo-2-light: #377fdb;
--c--globals--colors--logo-1-dark: #c1d6f2;
--c--globals--colors--logo-2-dark: #c1d6f2;
--c--globals--colors--brand-050: #eef1fa;
--c--globals--colors--brand-100: #dde2f5;
--c--globals--colors--brand-150: #ced3f1;
@@ -332,6 +332,8 @@
--c--globals--colors--white-900: #f8f8f9e5;
--c--globals--colors--white-950: #f8f8f9f2;
--c--globals--colors--white-975: #f8f8f9f9;
--c--globals--colors--logo-1: #4844ad;
--c--globals--colors--logo-2: #4844ad;
--c--globals--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0);
--c--globals--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1);
--c--globals--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
@@ -893,10 +895,10 @@
}
.cunningham-theme--dark {
--c--globals--colors--logo-1-light: #4844ad;
--c--globals--colors--logo-2-light: #4844ad;
--c--globals--colors--logo-1-dark: #bec5f0;
--c--globals--colors--logo-2-dark: #bec5f0;
--c--globals--colors--logo-1-light: #377fdb;
--c--globals--colors--logo-2-light: #377fdb;
--c--globals--colors--logo-1-dark: #c1d6f2;
--c--globals--colors--logo-2-dark: #c1d6f2;
--c--globals--colors--brand-050: #eef1fa;
--c--globals--colors--brand-100: #dde2f5;
--c--globals--colors--brand-150: #ced3f1;
@@ -1226,6 +1228,8 @@
--c--globals--colors--white-900: #f8f8f9e5;
--c--globals--colors--white-950: #f8f8f9f2;
--c--globals--colors--white-975: #f8f8f9f9;
--c--globals--colors--logo-1: #4844ad;
--c--globals--colors--logo-2: #4844ad;
--c--globals--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0);
--c--globals--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1);
--c--globals--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
@@ -4854,6 +4858,14 @@
color: var(--c--globals--colors--white-975);
}
.clr-logo-1 {
color: var(--c--globals--colors--logo-1);
}
.clr-logo-2 {
color: var(--c--globals--colors--logo-2);
}
.bg-logo-1-light {
background-color: var(--c--globals--colors--logo-1-light);
}
@@ -6186,6 +6198,14 @@
background-color: var(--c--globals--colors--white-975);
}
.bg-logo-1 {
background-color: var(--c--globals--colors--logo-1);
}
.bg-logo-2 {
background-color: var(--c--globals--colors--logo-2);
}
.bg-surface-primary {
background-color: var(--c--contextuals--background--surface--primary);
}
@@ -3,10 +3,10 @@ export const tokens = {
default: {
globals: {
colors: {
'logo-1-light': '#4844AD',
'logo-2-light': '#4844AD',
'logo-1-dark': '#BEC5F0',
'logo-2-dark': '#BEC5F0',
'logo-1-light': '#377FDB',
'logo-2-light': '#377FDB',
'logo-1-dark': '#C1D6F2',
'logo-2-dark': '#C1D6F2',
'brand-050': '#EEF1FA',
'brand-100': '#DDE2F5',
'brand-150': '#CED3F1',
@@ -336,6 +336,8 @@ export const tokens = {
'white-900': '#F8F8F9E5',
'white-950': '#F8F8F9F2',
'white-975': '#F8F8F9F9',
'logo-1': '#4844AD',
'logo-2': '#4844AD',
},
transitions: {
'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)',
@@ -547,8 +549,8 @@ export const tokens = {
},
},
content: {
logo1: '#4844AD',
logo2: '#4844AD',
logo1: '#377FDB',
logo2: '#377FDB',
semantic: {
contextual: { primary: '#F8F8F9F2' },
overlay: { primary: '#F8F8F9F2' },
@@ -681,10 +683,10 @@ export const tokens = {
dark: {
globals: {
colors: {
'logo-1-light': '#4844AD',
'logo-2-light': '#4844AD',
'logo-1-dark': '#BEC5F0',
'logo-2-dark': '#BEC5F0',
'logo-1-light': '#377FDB',
'logo-2-light': '#377FDB',
'logo-1-dark': '#C1D6F2',
'logo-2-dark': '#C1D6F2',
'brand-050': '#EEF1FA',
'brand-100': '#DDE2F5',
'brand-150': '#CED3F1',
@@ -1014,6 +1016,8 @@ export const tokens = {
'white-900': '#F8F8F9E5',
'white-950': '#F8F8F9F2',
'white-975': '#F8F8F9F9',
'logo-1': '#4844AD',
'logo-2': '#4844AD',
},
transitions: {
'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)',
@@ -1225,8 +1229,8 @@ export const tokens = {
},
},
content: {
logo1: '#BEC5F0',
logo2: '#BEC5F0',
logo1: '#C1D6F2',
logo2: '#C1D6F2',
semantic: {
contextual: { primary: '#1B1B23D9' },
overlay: { primary: '#1B1B23D9' },
@@ -1876,8 +1880,8 @@ export const tokens = {
},
},
content: {
logo1: '#4844AD',
logo2: '#4844AD',
logo1: '#377FDB',
logo2: '#377FDB',
semantic: {
contextual: { primary: '#F8F8F9F2' },
overlay: { primary: '#F8F8F9F2' },
@@ -2527,8 +2531,8 @@ export const tokens = {
},
},
content: {
logo1: '#BEC5F0',
logo2: '#BEC5F0',
logo1: '#C1D6F2',
logo2: '#C1D6F2',
semantic: {
contextual: { primary: '#1B1B23D9' },
overlay: { primary: '#1B1B23D9' },
@@ -24,7 +24,10 @@ import { LaGaufre } from './LaGaufre';
export const Header = () => {
const { t } = useTranslation();
const { spacingsTokens, colorsTokens } = useCunninghamTheme();
const { spacingsTokens, colorsTokens, componentTokens } =
useCunninghamTheme();
const showLaGaufre =
(componentTokens as Record<string, unknown>)['la-gaufre'] === true;
const { isDesktop } = useResponsiveStore();
const { setPanelOpen } = useChatPreferencesStore();
const { isAtTop } = useChatScroll();
@@ -95,7 +98,7 @@ export const Header = () => {
>
<ButtonLogin />
<LanguagePicker />
<LaGaufre />
{showLaGaufre && <LaGaufre />}
</Box>
)}
</Box>
@@ -26,6 +26,8 @@ export const HomeHeader = () => {
const logo = (componentTokens as Record<string, unknown>).logo as
| { src: string; alt: string; widthHeader: string; widthFooter: string }
| undefined;
const showLaGaufre =
(componentTokens as Record<string, unknown>)['la-gaufre'] === true;
return (
<Box
@@ -79,7 +81,7 @@ export const HomeHeader = () => {
<Box $direction="row" $gap="1rem" $align="center">
<ButtonLogin />
<LanguagePicker />
<LaGaufre />
{showLaGaufre && <LaGaufre />}
</Box>
)}
</Box>