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

🔧(frontend) update cunningham configuration

Browse Source 
- update primary colors,and spacing.
- update tertiary button
This commit is contained in:
Nathan Panchout
2024-11-19 16:07:30 +01:00
committed by Anthony LC
parent 68a390ef59
commit b9c66c7c2a
4 changed files with 126 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/frontend/apps/impress/cunningham.ts
View File

@@ -5,24 +5,30 @@ const config = {
colors: { colors: {
'card-border': '#ededed', 'card-border': '#ededed',
'primary-bg': '#FAFAFA', 'primary-bg': '#FAFAFA',
'primary-050': '#F5F5FE',
'primary-100': '#EDF5FA', 'primary-100': '#EDF5FA',
'primary-150': '#E5EEFA', 'primary-150': '#E5EEFA',
'primary-950': '#1B1B35',
'info-150': '#E5EEFA', 'info-150': '#E5EEFA',
'greyscale-000': '#fff', 'greyscale-000': '#fff',
'greyscale-1000': '#161616', 'greyscale-1000': '#161616',
}, },
font: { font: {
sizes: { sizes: {
xs: '0.75rem',
sm: '0.875rem',
md: '1rem',
lg: '1.125rem',
ml: '0.938rem', ml: '0.938rem',
xl: '1.50rem', xl: '1.25rem',
t: '0.6875rem', t: '0.6875rem',
s: '0.75rem', s: '0.75rem',
h1: '2.2rem', h1: '2rem',
h2: '1.7rem', h2: '1.75rem',
h3: '1.37rem', h3: '1.5rem',
h4: '1.15rem', h4: '1.375rem',
h5: '1rem', h5: '1.25rem',
h6: '0.87rem', h6: '1.125rem',
}, },
weights: { weights: {
thin: 100, thin: 100,
@@ -195,7 +201,9 @@ const config = {
color: 'var(--c--theme--colors--primary-text)', color: 'var(--c--theme--colors--primary-text)',
'color-disabled': 'var(--c--theme--colors--greyscale-600)', 'color-disabled': 'var(--c--theme--colors--greyscale-600)',
background: { background: {
'color-hover': 'var(--c--theme--colors--primary-100)', color: 'var(--c--theme--colors--primary-100)',
'color-hover': 'var(--c--theme--colors--primary-300)',
'color-active': 'var(--c--theme--colors--primary-100)',
'color-disabled': 'var(--c--theme--colors--greyscale-200)', 'color-disabled': 'var(--c--theme--colors--greyscale-200)',
}, },
}, },
@@ -214,18 +222,18 @@ const config = {
dsfr: { dsfr: {
theme: { theme: {
colors: { colors: {
'card-border': '#ededed', 'card-border': '#E5E5E5',
'primary-text': '#000091', 'primary-text': '#000091',
'primary-100': '#f5f5fe', 'primary-100': '#ECECFE',
'primary-150': '#F4F4FD', 'primary-150': '#F4F4FD',
'primary-200': '#ececfe', 'primary-200': '#E3E3FD',
'primary-300': '#e3e3fd', 'primary-300': '#CACAFB',
'primary-400': '#cacafb', 'primary-400': '#8585F6',
'primary-500': '#6a6af4', 'primary-500': '#6A6AF4',
'primary-600': '#000091', 'primary-600': '#313178',
'primary-700': '#272747', 'primary-700': '#272747',
'primary-800': '#21213f', 'primary-800': '#000091',
'primary-900': '#1c1a36', 'primary-900': '#21213F',
'secondary-text': '#fff', 'secondary-text': '#fff',
'secondary-100': '#fee9ea', 'secondary-100': '#fee9ea',
'secondary-200': '#fedfdf', 'secondary-200': '#fedfdf',

13
src/frontend/apps/impress/src/cunningham/cunningham-style.css
View File

@@ -351,6 +351,11 @@ input:-webkit-autofill:focus {
background-color: transparent; background-color: transparent;
} }
.c__button--nano {
padding: 0 var(--c--theme--spacings--2xs) !important;
gap: var(--c--theme--spacings--2xs) !important;
}
.c__button--medium { .c__button--medium {
padding: 0.9rem var(--c--theme--spacings--s); padding: 0.9rem var(--c--theme--spacings--s);
} }
@@ -442,6 +447,7 @@ input:-webkit-autofill:focus {
} }
.c__button--tertiary { .c__button--tertiary {
background-color: var(--c--components--button--tertiary--background--color);
color: var(--c--components--button--tertiary--color); color: var(--c--components--button--tertiary--color);
border: none; border: none;
} }
@@ -454,6 +460,13 @@ input:-webkit-autofill:focus {
color: var(--c--components--button--tertiary--color); color: var(--c--components--button--tertiary--color);
} }
.c__button--tertiary:active {
background-color: var(
--c--components--button--tertiary--background--color-active
);
color: var(--c--components--button--tertiary--color-active);
}
.c__button--tertiary:disabled { .c__button--tertiary:disabled {
background-color: var( background-color: var(
--c--components--button--tertiary--background--color-disabled --c--components--button--tertiary--background--color-disabled

78
src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
View File

@@ -71,20 +71,26 @@
--c--theme--colors--danger-text: var(--c--theme--colors--greyscale-000); --c--theme--colors--danger-text: var(--c--theme--colors--greyscale-000);
--c--theme--colors--card-border: #ededed; --c--theme--colors--card-border: #ededed;
--c--theme--colors--primary-bg: #fafafa; --c--theme--colors--primary-bg: #fafafa;
--c--theme--colors--primary-050: #f5f5fe;
--c--theme--colors--primary-150: #e5eefa; --c--theme--colors--primary-150: #e5eefa;
--c--theme--colors--primary-950: #1b1b35;
--c--theme--colors--info-150: #e5eefa; --c--theme--colors--info-150: #e5eefa;
--c--theme--colors--greyscale-1000: #161616; --c--theme--colors--greyscale-1000: #161616;
--c--theme--font--sizes--h1: 2.2rem; --c--theme--font--sizes--h1: 2rem;
--c--theme--font--sizes--h2: 1.7rem; --c--theme--font--sizes--h2: 1.75rem;
--c--theme--font--sizes--h3: 1.37rem; --c--theme--font--sizes--h3: 1.5rem;
--c--theme--font--sizes--h4: 1.15rem; --c--theme--font--sizes--h4: 1.375rem;
--c--theme--font--sizes--h5: 1rem; --c--theme--font--sizes--h5: 1.25rem;
--c--theme--font--sizes--h6: 0.87rem; --c--theme--font--sizes--h6: 1.125rem;
--c--theme--font--sizes--l: 1rem; --c--theme--font--sizes--l: 1rem;
--c--theme--font--sizes--m: 0.8125rem; --c--theme--font--sizes--m: 0.8125rem;
--c--theme--font--sizes--s: 0.75rem; --c--theme--font--sizes--s: 0.75rem;
--c--theme--font--sizes--xs: 0.75rem;
--c--theme--font--sizes--sm: 0.875rem;
--c--theme--font--sizes--md: 1rem;
--c--theme--font--sizes--lg: 1.125rem;
--c--theme--font--sizes--ml: 0.938rem; --c--theme--font--sizes--ml: 0.938rem;
--c--theme--font--sizes--xl: 1.5rem; --c--theme--font--sizes--xl: 1.25rem;
--c--theme--font--sizes--t: 0.6875rem; --c--theme--font--sizes--t: 0.6875rem;
--c--theme--font--weights--thin: 100; --c--theme--font--weights--thin: 100;
--c--theme--font--weights--light: 300; --c--theme--font--weights--light: 300;
@@ -290,7 +296,13 @@
--c--components--button--tertiary--color-disabled: var( --c--components--button--tertiary--color-disabled: var(
--c--theme--colors--greyscale-600 --c--theme--colors--greyscale-600
); );
--c--components--button--tertiary--background--color: var(
--c--theme--colors--primary-100
);
--c--components--button--tertiary--background--color-hover: var( --c--components--button--tertiary--background--color-hover: var(
--c--theme--colors--primary-300
);
--c--components--button--tertiary--background--color-active: var(
--c--theme--colors--primary-100 --c--theme--colors--primary-100
); );
--c--components--button--tertiary--background--color-disabled: var( --c--components--button--tertiary--background--color-disabled: var(
@@ -351,18 +363,18 @@
} }
.cunningham-theme--dsfr { .cunningham-theme--dsfr {
--c--theme--colors--card-border: #ededed; --c--theme--colors--card-border: #e5e5e5;
--c--theme--colors--primary-text: #000091; --c--theme--colors--primary-text: #000091;
--c--theme--colors--primary-100: #f5f5fe; --c--theme--colors--primary-100: #ececfe;
--c--theme--colors--primary-150: #f4f4fd; --c--theme--colors--primary-150: #f4f4fd;
--c--theme--colors--primary-200: #ececfe; --c--theme--colors--primary-200: #e3e3fd;
--c--theme--colors--primary-300: #e3e3fd; --c--theme--colors--primary-300: #cacafb;
--c--theme--colors--primary-400: #cacafb; --c--theme--colors--primary-400: #8585f6;
--c--theme--colors--primary-500: #6a6af4; --c--theme--colors--primary-500: #6a6af4;
--c--theme--colors--primary-600: #000091; --c--theme--colors--primary-600: #313178;
--c--theme--colors--primary-700: #272747; --c--theme--colors--primary-700: #272747;
--c--theme--colors--primary-800: #21213f; --c--theme--colors--primary-800: #000091;
--c--theme--colors--primary-900: #1c1a36; --c--theme--colors--primary-900: #21213f;
--c--theme--colors--secondary-text: #fff; --c--theme--colors--secondary-text: #fff;
--c--theme--colors--secondary-100: #fee9ea; --c--theme--colors--secondary-100: #fee9ea;
--c--theme--colors--secondary-200: #fedfdf; --c--theme--colors--secondary-200: #fedfdf;
@@ -832,10 +844,18 @@
color: var(--c--theme--colors--primary-bg); color: var(--c--theme--colors--primary-bg);
} }
.clr-primary-050 {
color: var(--c--theme--colors--primary-050);
}
.clr-primary-150 { .clr-primary-150 {
color: var(--c--theme--colors--primary-150); color: var(--c--theme--colors--primary-150);
} }
.clr-primary-950 {
color: var(--c--theme--colors--primary-950);
}
.clr-info-150 { .clr-info-150 {
color: var(--c--theme--colors--info-150); color: var(--c--theme--colors--info-150);
} }
@@ -1132,10 +1152,18 @@
background-color: var(--c--theme--colors--primary-bg); background-color: var(--c--theme--colors--primary-bg);
} }
.bg-primary-050 {
background-color: var(--c--theme--colors--primary-050);
}
.bg-primary-150 { .bg-primary-150 {
background-color: var(--c--theme--colors--primary-150); background-color: var(--c--theme--colors--primary-150);
} }
.bg-primary-950 {
background-color: var(--c--theme--colors--primary-950);
}
.bg-info-150 { .bg-info-150 {
background-color: var(--c--theme--colors--info-150); background-color: var(--c--theme--colors--info-150);
} }
@@ -1217,6 +1245,26 @@
letter-spacing: var(--c--theme--font--letterspacings--s); letter-spacing: var(--c--theme--font--letterspacings--s);
} }
.fs-xs {
font-size: var(--c--theme--font--sizes--xs);
letter-spacing: var(--c--theme--font--letterspacings--xs);
}
.fs-sm {
font-size: var(--c--theme--font--sizes--sm);
letter-spacing: var(--c--theme--font--letterspacings--sm);
}
.fs-md {
font-size: var(--c--theme--font--sizes--md);
letter-spacing: var(--c--theme--font--letterspacings--md);
}
.fs-lg {
font-size: var(--c--theme--font--sizes--lg);
letter-spacing: var(--c--theme--font--letterspacings--lg);
}
.fs-ml { .fs-ml {
font-size: var(--c--theme--font--sizes--ml); font-size: var(--c--theme--font--sizes--ml);
letter-spacing: var(--c--theme--font--letterspacings--ml); letter-spacing: var(--c--theme--font--letterspacings--ml);

42
src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
View File

@@ -75,23 +75,29 @@ export const tokens = {
'danger-text': '#fff', 'danger-text': '#fff',
'card-border': '#ededed', 'card-border': '#ededed',
'primary-bg': '#FAFAFA', 'primary-bg': '#FAFAFA',
'primary-050': '#F5F5FE',
'primary-150': '#E5EEFA', 'primary-150': '#E5EEFA',
'primary-950': '#1B1B35',
'info-150': '#E5EEFA', 'info-150': '#E5EEFA',
'greyscale-1000': '#161616', 'greyscale-1000': '#161616',
}, },
font: { font: {
sizes: { sizes: {
h1: '2.2rem', h1: '2rem',
h2: '1.7rem', h2: '1.75rem',
h3: '1.37rem', h3: '1.5rem',
h4: '1.15rem', h4: '1.375rem',
h5: '1rem', h5: '1.25rem',
h6: '0.87rem', h6: '1.125rem',
l: '1rem', l: '1rem',
m: '0.8125rem', m: '0.8125rem',
s: '0.75rem', s: '0.75rem',
xs: '0.75rem',
sm: '0.875rem',
md: '1rem',
lg: '1.125rem',
ml: '0.938rem', ml: '0.938rem',
xl: '1.50rem', xl: '1.25rem',
t: '0.6875rem', t: '0.6875rem',
}, },
weights: { weights: {
@@ -285,7 +291,9 @@ export const tokens = {
color: 'var(--c--theme--colors--primary-text)', color: 'var(--c--theme--colors--primary-text)',
'color-disabled': 'var(--c--theme--colors--greyscale-600)', 'color-disabled': 'var(--c--theme--colors--greyscale-600)',
background: { background: {
'color-hover': 'var(--c--theme--colors--primary-100)', color: 'var(--c--theme--colors--primary-100)',
'color-hover': 'var(--c--theme--colors--primary-300)',
'color-active': 'var(--c--theme--colors--primary-100)',
'color-disabled': 'var(--c--theme--colors--greyscale-200)', 'color-disabled': 'var(--c--theme--colors--greyscale-200)',
}, },
}, },
@@ -349,18 +357,18 @@ export const tokens = {
dsfr: { dsfr: {
theme: { theme: {
colors: { colors: {
'card-border': '#ededed', 'card-border': '#E5E5E5',
'primary-text': '#000091', 'primary-text': '#000091',
'primary-100': '#f5f5fe', 'primary-100': '#ECECFE',
'primary-150': '#F4F4FD', 'primary-150': '#F4F4FD',
'primary-200': '#ececfe', 'primary-200': '#E3E3FD',
'primary-300': '#e3e3fd', 'primary-300': '#CACAFB',
'primary-400': '#cacafb', 'primary-400': '#8585F6',
'primary-500': '#6a6af4', 'primary-500': '#6A6AF4',
'primary-600': '#000091', 'primary-600': '#313178',
'primary-700': '#272747', 'primary-700': '#272747',
'primary-800': '#21213f', 'primary-800': '#000091',
'primary-900': '#1c1a36', 'primary-900': '#21213F',
'secondary-text': '#fff', 'secondary-text': '#fff',
'secondary-100': '#fee9ea', 'secondary-100': '#fee9ea',
'secondary-200': '#fedfdf', 'secondary-200': '#fedfdf',