diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts index eab62b2d..e1203394 100644 --- a/src/frontend/apps/impress/cunningham.ts +++ b/src/frontend/apps/impress/cunningham.ts @@ -5,24 +5,30 @@ const config = { colors: { 'card-border': '#ededed', 'primary-bg': '#FAFAFA', + 'primary-050': '#F5F5FE', 'primary-100': '#EDF5FA', 'primary-150': '#E5EEFA', + 'primary-950': '#1B1B35', 'info-150': '#E5EEFA', 'greyscale-000': '#fff', 'greyscale-1000': '#161616', }, font: { sizes: { + xs: '0.75rem', + sm: '0.875rem', + md: '1rem', + lg: '1.125rem', ml: '0.938rem', - xl: '1.50rem', + xl: '1.25rem', t: '0.6875rem', s: '0.75rem', - h1: '2.2rem', - h2: '1.7rem', - h3: '1.37rem', - h4: '1.15rem', - h5: '1rem', - h6: '0.87rem', + h1: '2rem', + h2: '1.75rem', + h3: '1.5rem', + h4: '1.375rem', + h5: '1.25rem', + h6: '1.125rem', }, weights: { thin: 100, @@ -195,7 +201,9 @@ const config = { color: 'var(--c--theme--colors--primary-text)', 'color-disabled': 'var(--c--theme--colors--greyscale-600)', 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)', }, }, @@ -214,18 +222,18 @@ const config = { dsfr: { theme: { colors: { - 'card-border': '#ededed', + 'card-border': '#E5E5E5', 'primary-text': '#000091', - 'primary-100': '#f5f5fe', + 'primary-100': '#ECECFE', 'primary-150': '#F4F4FD', - 'primary-200': '#ececfe', - 'primary-300': '#e3e3fd', - 'primary-400': '#cacafb', - 'primary-500': '#6a6af4', - 'primary-600': '#000091', + 'primary-200': '#E3E3FD', + 'primary-300': '#CACAFB', + 'primary-400': '#8585F6', + 'primary-500': '#6A6AF4', + 'primary-600': '#313178', 'primary-700': '#272747', - 'primary-800': '#21213f', - 'primary-900': '#1c1a36', + 'primary-800': '#000091', + 'primary-900': '#21213F', 'secondary-text': '#fff', 'secondary-100': '#fee9ea', 'secondary-200': '#fedfdf', diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css index 3250fca1..eb40fed5 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css +++ b/src/frontend/apps/impress/src/cunningham/cunningham-style.css @@ -351,6 +351,11 @@ input:-webkit-autofill:focus { background-color: transparent; } +.c__button--nano { + padding: 0 var(--c--theme--spacings--2xs) !important; + gap: var(--c--theme--spacings--2xs) !important; +} + .c__button--medium { padding: 0.9rem var(--c--theme--spacings--s); } @@ -442,6 +447,7 @@ input:-webkit-autofill:focus { } .c__button--tertiary { + background-color: var(--c--components--button--tertiary--background--color); color: var(--c--components--button--tertiary--color); border: none; } @@ -454,6 +460,13 @@ input:-webkit-autofill:focus { 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 { background-color: var( --c--components--button--tertiary--background--color-disabled diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css index 4aadd74d..a15bdb88 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css +++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css @@ -71,20 +71,26 @@ --c--theme--colors--danger-text: var(--c--theme--colors--greyscale-000); --c--theme--colors--card-border: #ededed; --c--theme--colors--primary-bg: #fafafa; + --c--theme--colors--primary-050: #f5f5fe; --c--theme--colors--primary-150: #e5eefa; + --c--theme--colors--primary-950: #1b1b35; --c--theme--colors--info-150: #e5eefa; --c--theme--colors--greyscale-1000: #161616; - --c--theme--font--sizes--h1: 2.2rem; - --c--theme--font--sizes--h2: 1.7rem; - --c--theme--font--sizes--h3: 1.37rem; - --c--theme--font--sizes--h4: 1.15rem; - --c--theme--font--sizes--h5: 1rem; - --c--theme--font--sizes--h6: 0.87rem; + --c--theme--font--sizes--h1: 2rem; + --c--theme--font--sizes--h2: 1.75rem; + --c--theme--font--sizes--h3: 1.5rem; + --c--theme--font--sizes--h4: 1.375rem; + --c--theme--font--sizes--h5: 1.25rem; + --c--theme--font--sizes--h6: 1.125rem; --c--theme--font--sizes--l: 1rem; --c--theme--font--sizes--m: 0.8125rem; --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--xl: 1.5rem; + --c--theme--font--sizes--xl: 1.25rem; --c--theme--font--sizes--t: 0.6875rem; --c--theme--font--weights--thin: 100; --c--theme--font--weights--light: 300; @@ -290,7 +296,13 @@ --c--components--button--tertiary--color-disabled: var( --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--theme--colors--primary-300 + ); + --c--components--button--tertiary--background--color-active: var( --c--theme--colors--primary-100 ); --c--components--button--tertiary--background--color-disabled: var( @@ -351,18 +363,18 @@ } .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-100: #f5f5fe; + --c--theme--colors--primary-100: #ececfe; --c--theme--colors--primary-150: #f4f4fd; - --c--theme--colors--primary-200: #ececfe; - --c--theme--colors--primary-300: #e3e3fd; - --c--theme--colors--primary-400: #cacafb; + --c--theme--colors--primary-200: #e3e3fd; + --c--theme--colors--primary-300: #cacafb; + --c--theme--colors--primary-400: #8585f6; --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-800: #21213f; - --c--theme--colors--primary-900: #1c1a36; + --c--theme--colors--primary-800: #000091; + --c--theme--colors--primary-900: #21213f; --c--theme--colors--secondary-text: #fff; --c--theme--colors--secondary-100: #fee9ea; --c--theme--colors--secondary-200: #fedfdf; @@ -832,10 +844,18 @@ color: var(--c--theme--colors--primary-bg); } +.clr-primary-050 { + color: var(--c--theme--colors--primary-050); +} + .clr-primary-150 { color: var(--c--theme--colors--primary-150); } +.clr-primary-950 { + color: var(--c--theme--colors--primary-950); +} + .clr-info-150 { color: var(--c--theme--colors--info-150); } @@ -1132,10 +1152,18 @@ background-color: var(--c--theme--colors--primary-bg); } +.bg-primary-050 { + background-color: var(--c--theme--colors--primary-050); +} + .bg-primary-150 { background-color: var(--c--theme--colors--primary-150); } +.bg-primary-950 { + background-color: var(--c--theme--colors--primary-950); +} + .bg-info-150 { background-color: var(--c--theme--colors--info-150); } @@ -1217,6 +1245,26 @@ 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 { font-size: var(--c--theme--font--sizes--ml); letter-spacing: var(--c--theme--font--letterspacings--ml); diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts index 31f2837f..e75ad694 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts +++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts @@ -75,23 +75,29 @@ export const tokens = { 'danger-text': '#fff', 'card-border': '#ededed', 'primary-bg': '#FAFAFA', + 'primary-050': '#F5F5FE', 'primary-150': '#E5EEFA', + 'primary-950': '#1B1B35', 'info-150': '#E5EEFA', 'greyscale-1000': '#161616', }, font: { sizes: { - h1: '2.2rem', - h2: '1.7rem', - h3: '1.37rem', - h4: '1.15rem', - h5: '1rem', - h6: '0.87rem', + h1: '2rem', + h2: '1.75rem', + h3: '1.5rem', + h4: '1.375rem', + h5: '1.25rem', + h6: '1.125rem', l: '1rem', m: '0.8125rem', s: '0.75rem', + xs: '0.75rem', + sm: '0.875rem', + md: '1rem', + lg: '1.125rem', ml: '0.938rem', - xl: '1.50rem', + xl: '1.25rem', t: '0.6875rem', }, weights: { @@ -285,7 +291,9 @@ export const tokens = { color: 'var(--c--theme--colors--primary-text)', 'color-disabled': 'var(--c--theme--colors--greyscale-600)', 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)', }, }, @@ -349,18 +357,18 @@ export const tokens = { dsfr: { theme: { colors: { - 'card-border': '#ededed', + 'card-border': '#E5E5E5', 'primary-text': '#000091', - 'primary-100': '#f5f5fe', + 'primary-100': '#ECECFE', 'primary-150': '#F4F4FD', - 'primary-200': '#ececfe', - 'primary-300': '#e3e3fd', - 'primary-400': '#cacafb', - 'primary-500': '#6a6af4', - 'primary-600': '#000091', + 'primary-200': '#E3E3FD', + 'primary-300': '#CACAFB', + 'primary-400': '#8585F6', + 'primary-500': '#6A6AF4', + 'primary-600': '#313178', 'primary-700': '#272747', - 'primary-800': '#21213f', - 'primary-900': '#1c1a36', + 'primary-800': '#000091', + 'primary-900': '#21213F', 'secondary-text': '#fff', 'secondary-100': '#fee9ea', 'secondary-200': '#fedfdf',