StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-11 16:48:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(pref): ✨ extend font-size adjustments to all text

Browse source 
- Move font size calucation from LESS to CSS variables
- Move font size variables to tokens.less
This commit is contained in:
alistair3149 2024-07-05 13:39:37 -04:00
parent 07090c800d
commit b53381ed12
No known key found for this signature in database
3 changed files with 61 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
resources/skins.citizen.styles/common/cssvariables.less
View file

@ -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;
}

8
resources/skins.citizen.styles/common/features.less
View file

@ -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;
}
}

57
resources/skins.citizen.styles/tokens.less
View file

@ -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 )';
}
}