From 7bb6924292cf3d1d696adde55a75af92c409cbda Mon Sep 17 00:00:00 2001 From: Nathan Panchout Date: Mon, 27 Jan 2025 13:54:51 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20new=20color=20and?= =?UTF-8?q?=20font=20size=20tokens=20for=20Cunningham?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add 'primary-action' color token - Introduce alternative font size tokens (xl-alt, lg-alt, md-alt, sm-alt, xs-alt) - Update button border colors to use greyscale-300 --- src/frontend/apps/impress/cunningham.ts | 12 +++-- .../src/cunningham/cunningham-tokens.css | 45 +++++++++++++++++-- .../src/cunningham/cunningham-tokens.ts | 12 +++-- 3 files changed, 60 insertions(+), 9 deletions(-) diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts index a324b1700..633e2db94 100644 --- a/src/frontend/apps/impress/cunningham.ts +++ b/src/frontend/apps/impress/cunningham.ts @@ -5,6 +5,7 @@ const config = { colors: { 'card-border': '#ededed', 'primary-bg': '#FAFAFA', + 'primary-action': '#1212FF', 'primary-050': '#F5F5FE', 'primary-100': '#EDF5FA', 'primary-150': '#E5EEFA', @@ -59,6 +60,11 @@ const config = { h4: '1.375rem', h5: '1.25rem', h6: '1.125rem', + 'xl-alt': '5rem', + 'lg-alt': '4.5rem', + 'md-alt': '4rem', + 'sm-alt': '3.5rem', + 'xs-alt': '3rem', }, weights: { thin: 100, @@ -224,7 +230,7 @@ const config = { 'color-hover': 'var(--c--theme--colors--primary-700)', }, border: { - color: 'var(--c--theme--colors--primary-200)', + color: 'var(--c--theme--colors--greyscale-300)', }, }, tertiary: { @@ -379,8 +385,8 @@ const config = { 'color-active': '#EDEDED', }, border: { - color: 'var(--c--theme--colors--primary-600)', - 'color-hover': 'var(--c--theme--colors--primary-600)', + color: 'var(--c--theme--colors--greyscale-300)', + 'color-hover': 'var(--c--theme--colors--greyscale-300)', }, color: 'var(--c--theme--colors--primary-text)', }, diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css index 3357c29c6..c0572eb0e 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css +++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css @@ -71,6 +71,7 @@ --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-action: #1212ff; --c--theme--colors--primary-050: #f5f5fe; --c--theme--colors--primary-150: #e5eefa; --c--theme--colors--primary-950: #1b1b35; @@ -122,6 +123,11 @@ --c--theme--font--sizes--ml: 0.938rem; --c--theme--font--sizes--xl: 1.25rem; --c--theme--font--sizes--t: 0.6875rem; + --c--theme--font--sizes--xl-alt: 5rem; + --c--theme--font--sizes--lg-alt: 4.5rem; + --c--theme--font--sizes--md-alt: 4rem; + --c--theme--font--sizes--sm-alt: 3.5rem; + --c--theme--font--sizes--xs-alt: 3rem; --c--theme--font--weights--thin: 100; --c--theme--font--weights--light: 300; --c--theme--font--weights--regular: 400; @@ -316,7 +322,7 @@ --c--theme--colors--primary-700 ); --c--components--button--secondary--border--color: var( - --c--theme--colors--primary-200 + --c--theme--colors--greyscale-300 ); --c--components--button--tertiary--color: var( --c--theme--colors--primary-text @@ -501,10 +507,10 @@ --c--components--button--secondary--background--color-hover: #f6f6f6; --c--components--button--secondary--background--color-active: #ededed; --c--components--button--secondary--border--color: var( - --c--theme--colors--primary-600 + --c--theme--colors--greyscale-300 ); --c--components--button--secondary--border--color-hover: var( - --c--theme--colors--primary-600 + --c--theme--colors--greyscale-300 ); --c--components--button--secondary--color: var( --c--theme--colors--primary-text @@ -874,6 +880,10 @@ color: var(--c--theme--colors--primary-bg); } +.clr-primary-action { + color: var(--c--theme--colors--primary-action); +} + .clr-primary-050 { color: var(--c--theme--colors--primary-050); } @@ -1302,6 +1312,10 @@ background-color: var(--c--theme--colors--primary-bg); } +.bg-primary-action { + background-color: var(--c--theme--colors--primary-action); +} + .bg-primary-050 { background-color: var(--c--theme--colors--primary-050); } @@ -1550,6 +1564,31 @@ letter-spacing: var(--c--theme--font--letterspacings--t); } +.fs-xl-alt { + font-size: var(--c--theme--font--sizes--xl-alt); + letter-spacing: var(--c--theme--font--letterspacings--xl-alt); +} + +.fs-lg-alt { + font-size: var(--c--theme--font--sizes--lg-alt); + letter-spacing: var(--c--theme--font--letterspacings--lg-alt); +} + +.fs-md-alt { + font-size: var(--c--theme--font--sizes--md-alt); + letter-spacing: var(--c--theme--font--letterspacings--md-alt); +} + +.fs-sm-alt { + font-size: var(--c--theme--font--sizes--sm-alt); + letter-spacing: var(--c--theme--font--letterspacings--sm-alt); +} + +.fs-xs-alt { + font-size: var(--c--theme--font--sizes--xs-alt); + letter-spacing: var(--c--theme--font--letterspacings--xs-alt); +} + .f-base { font-family: var(--c--theme--font--families--base); } diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts index 521094f41..b63ef0bfc 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts +++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts @@ -75,6 +75,7 @@ export const tokens = { 'danger-text': '#fff', 'card-border': '#ededed', 'primary-bg': '#FAFAFA', + 'primary-action': '#1212FF', 'primary-050': '#F5F5FE', 'primary-150': '#E5EEFA', 'primary-950': '#1B1B35', @@ -129,6 +130,11 @@ export const tokens = { ml: '0.938rem', xl: '1.25rem', t: '0.6875rem', + 'xl-alt': '5rem', + 'lg-alt': '4.5rem', + 'md-alt': '4rem', + 'sm-alt': '3.5rem', + 'xs-alt': '3rem', }, weights: { thin: 100, @@ -315,7 +321,7 @@ export const tokens = { color: 'white', 'color-hover': 'var(--c--theme--colors--primary-700)', }, - border: { color: 'var(--c--theme--colors--primary-200)' }, + border: { color: 'var(--c--theme--colors--greyscale-300)' }, }, tertiary: { color: 'var(--c--theme--colors--primary-text)', @@ -502,8 +508,8 @@ export const tokens = { secondary: { background: { 'color-hover': '#F6F6F6', 'color-active': '#EDEDED' }, border: { - color: 'var(--c--theme--colors--primary-600)', - 'color-hover': 'var(--c--theme--colors--primary-600)', + color: 'var(--c--theme--colors--greyscale-300)', + 'color-hover': 'var(--c--theme--colors--greyscale-300)', }, color: 'var(--c--theme--colors--primary-text)', },