From b53381ed12c6d460735dbf0bac768db48383b270 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Fri, 5 Jul 2024 13:39:37 -0400 Subject: [PATCH] =?UTF-8?q?feat(pref):=20=E2=9C=A8=20extend=20font-size=20?= =?UTF-8?q?adjustments=20to=20all=20text?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Move font size calucation from LESS to CSS variables - Move font size variables to tokens.less --- .../common/cssvariables.less | 16 ------ .../skins.citizen.styles/common/features.less | 8 +-- resources/skins.citizen.styles/tokens.less | 57 +++++++++++++++++++ 3 files changed, 61 insertions(+), 20 deletions(-) diff --git a/resources/skins.citizen.styles/common/cssvariables.less b/resources/skins.citizen.styles/common/cssvariables.less index be5b8291..90cf10be 100644 --- a/resources/skins.citizen.styles/common/cssvariables.less +++ b/resources/skins.citizen.styles/common/cssvariables.less @@ -42,14 +42,6 @@ --font-family-language-serif: ''; --font-family-language-monospace: ''; - --font-size-x-small: 0.75rem; - --font-size-small: 0.875rem; - --font-size-medium: 1rem; - --font-size-large: 1rem; - --font-size-x-large: 1.125rem; - --font-size-xx-large: 1.375rem; - --font-size-xxx-large: 1.75rem; - --font-weight-normal: 400; --font-weight-medium: ~'calc( var( --font-weight-normal ) + 100)'; --font-weight-semibold: ~'calc( var( --font-weight-normal ) + 200)'; @@ -134,14 +126,6 @@ a { } @media ( min-width: @min-width-breakpoint-tablet ) { - :root { - --font-size-x-small: 0.8125rem; - --font-size-large: 1.125rem; - --font-size-x-large: 1.25rem; - --font-size-xx-large: 1.5rem; - --font-size-xxx-large: 2rem; - } - html { --padding-page: @padding-page * 1.5; } diff --git a/resources/skins.citizen.styles/common/features.less b/resources/skins.citizen.styles/common/features.less index 0343d0bf..5b07fe34 100644 --- a/resources/skins.citizen.styles/common/features.less +++ b/resources/skins.citizen.styles/common/features.less @@ -96,14 +96,14 @@ } .citizen-feature-custom-font-size-clientpref-small { - .citizen-body { - font-size: var( --font-size-small ); + :root& { + --font-size-base: 0.875rem; } } .citizen-feature-custom-font-size-clientpref-large { - .citizen-body { - font-size: var( --font-size-large ); + :root& { + --font-size-base: 1.125rem; } } diff --git a/resources/skins.citizen.styles/tokens.less b/resources/skins.citizen.styles/tokens.less index b3168e26..85d57f3d 100644 --- a/resources/skins.citizen.styles/tokens.less +++ b/resources/skins.citizen.styles/tokens.less @@ -2,6 +2,47 @@ * TODO: Deprecate duplicating non-Codex CSS variables into Codex equivalent */ :root { + /** + * Citizen Design Tokens + * TODO: Refactor cssvariables.less into this and features.less + */ + --border-radius-medium: ~'calc( var( --border-radius-base ) * 2 )'; + --border-radius-large: ~'calc( var( --border-radius-base ) * 3 )'; + /* Progressive color */ + --color-primary__h: @color-primary__h; + --color-primary__s: @color-primary__s; + --color-primary__l: @color-primary__l; + --color-inverted-primary: #fff; + /* Surface color */ + --color-surface-0__s: 30%; + --color-surface-0__l: 96%; + --color-surface-1__s: 40%; + --color-surface-1__l: 94%; + --color-surface-2__s: 30%; + --color-surface-2__l: 92%; + --color-surface-3__s: 20%; + --color-surface-3__l: 90%; + --color-surface-4__s: 10%; + --color-surface-4__l: 88%; + --color-surface-0: ~'hsl( var( --color-primary__h ), var( --color-surface-0__s ), var( --color-surface-0__l ) )'; + --color-surface-1: ~'hsl( var( --color-primary__h ), var( --color-surface-1__s ), var( --color-surface-1__l ) )'; + --color-surface-2: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), var( --color-surface-2__l ) )'; + --color-surface-2--hover: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), calc( var( --color-surface-2__l ) + var( --delta-lightness-hover-state ) ) )'; + --color-surface-2--active: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), calc( var( --color-surface-2__l ) - var( --delta-lightness-hover-state ) ) )'; + --color-surface-3: ~'hsl( var( --color-primary__h ), var( --color-surface-3__s ), var( --color-surface-3__l ) )'; + --color-surface-4: ~'hsl( var( --color-primary__h ), var( --color-surface-4__s ), var( --color-surface-4__l ) )'; + --background-color-icon: ~'rgba( 0, 0, 0, var( --opacity-icon-base ) )'; + --background-color-icon--hover: ~'rgba( 0, 0, 0, var( --opacity-icon-base--hover ) )'; + --background-color-icon--active: ~'rgba( 0, 0, 0, var( --opacity-icon-base--active ) )'; + /* Font */ + // Used as base unit to caluclate font-size + --font-size-base: 1rem; + // Hover and active states are calculated by a modifier of the lightness value in HSL (e.g. hover: +2%, active: -2%) + --delta-lightness-hover-state: 4%; + // Used to calculate box shadow + --shadow-strength: 0.02; + --surface-shadow: var( --color-primary__h ), 10%, 20%; + /** * Codex Design Tokens but not included as CSS variables */ @@ -9,6 +50,13 @@ --border-radius-sharp: 0; --border-radius-pill: 9999px; --border-radius-circle: 50%; + --font-size-x-small: ~'calc( var( --font-size-base ) * 0.75 )'; + --font-size-small: ~'calc( var( --font-size-base ) * 0.875 )'; + --font-size-medium: var( --font-size-base ); + --font-size-large: ~'calc( var( --font-size-base ) * 1.125 )'; + --font-size-x-large: ~'calc( var( --font-size-base ) * 1.25 )'; + --font-size-xx-large: ~'calc( var( --font-size-base ) * 1.375 )'; + --font-size-xxx-large: ~'calc( var( --font-size-base ) * 1.75 )'; /** * Codex Design Tokens v1.8.0 @@ -198,3 +246,12 @@ --color-text-success: var( --color-success ); --opacity-icon-base--active: var( --opacity-icon-base--selected ); } + +@media ( min-width: @min-width-breakpoint-tablet ) { + :root { + --font-size-x-small: ~'calc( var( --font-size-base ) * 0.8125 )'; + --font-size-x-large: ~'calc( var( --font-size-base ) * 1.375 )'; + --font-size-xx-large: ~'calc( var( --font-size-base ) * 1.5 )'; + --font-size-xxx-large: ~'calc( var( --font-size-base ) * 2 )'; + } +}