From 17bcccac65e2f883b08524e3ed970f6067bd123c Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Wed, 23 Oct 2024 17:54:26 -0400 Subject: [PATCH] =?UTF-8?q?refactor(tokens):=20=E2=99=BB=EF=B8=8F=20integr?= =?UTF-8?q?ate=20cssvariables.less=20into=20tokens.less?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/cssvariables.less | 60 ------------------- resources/skins.citizen.styles/skin.less | 1 - resources/skins.citizen.styles/tokens.less | 48 +++++++++++++-- resources/variables.less | 4 +- 4 files changed, 45 insertions(+), 68 deletions(-) delete mode 100644 resources/skins.citizen.styles/common/cssvariables.less diff --git a/resources/skins.citizen.styles/common/cssvariables.less b/resources/skins.citizen.styles/common/cssvariables.less deleted file mode 100644 index d0515d9d..00000000 --- a/resources/skins.citizen.styles/common/cssvariables.less +++ /dev/null @@ -1,60 +0,0 @@ -/* - * Citizen - CSS variables - * https://starcitizen.tools - */ - -@import '../../variables.less'; - -/** - * Base theme - */ -:root { - /* Size */ - --size-icon: @size-icon; - --overflow-gradient-size: 2rem; -} - -html { - /* Size */ - --header-size: @header-size; - --header-card-maxheight: 80vh; - --width-layout: @width-layout; - --width-layout--extended: ~'calc( var( --width-layout ) * 1.5 )'; - --width-toc: @width-toc; - --toolbar-size: 2.5rem; - - /* Padding */ - --padding-page: @padding-page; -} - -:lang( ja ), -:lang( ko ), -:lang( zh ) { - /* CJK languages need increased line-height for readability */ - --line-height: 1.75; -} - -@media ( min-width: @min-width-breakpoint-tablet ) { - html { - --padding-page: ~'calc( @{padding-page} * 1.5 )'; - } -} - -@media ( min-width: @min-width-breakpoint-desktop ) { - html { - --padding-page: ~'calc( @{padding-page} * 2 )'; - --header-card-maxheight: ~'calc( 100vh - var( --space-sm ) * 2 )'; - } -} - -@media ( prefers-contrast: more ) { - :root { - --font-weight-normal: 500; - } -} - -@media ( prefers-contrast: less ) { - :root { - --font-weight-normal: 300; - } -} diff --git a/resources/skins.citizen.styles/skin.less b/resources/skins.citizen.styles/skin.less index 3b22da13..099c9ae9 100644 --- a/resources/skins.citizen.styles/skin.less +++ b/resources/skins.citizen.styles/skin.less @@ -6,7 +6,6 @@ // Common @import 'tokens.less'; @import 'fonts.less'; -@import 'common/cssvariables.less'; @import 'common/typography.less'; @import 'skinning/elements.less'; diff --git a/resources/skins.citizen.styles/tokens.less b/resources/skins.citizen.styles/tokens.less index a347e0f4..c2a05a59 100644 --- a/resources/skins.citizen.styles/tokens.less +++ b/resources/skins.citizen.styles/tokens.less @@ -4,7 +4,6 @@ :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 )'; @@ -83,10 +82,30 @@ --font-grade: 0; --line-height: 1.6; - /* Height */ + /* Size */ + /* TODO: Need to standardize the naming convention */ + /* TODO: Perhaps move some of these into a scoped element? */ + --size-icon: @size-icon; + // Height of the bottom toolbar used by page tools and ToC toggle + --toolbar-size: 2.5rem; // Used to offset sticky elements with sticky header // This is overriden by inline styles in the html element when sticky header is active --height-sticky-header: 0; + // Width or height of citizen-header, depending on the orientation + --header-size: @header-size; + // Max-height allowed for header card, 20vh is left for closing affordnance + --header-card-maxheight: 80vh; + // Width of the gradient in citizen-overflow + --overflow-gradient-size: 2rem; + // Width of the body content + --width-layout: @width-layout; + // Width of the body content when the page should be extended (e.g. special, category pages) + --width-layout--extended: ~'calc( var( --width-layout ) * 1.5 )'; + // Width of the table of contents + --width-toc: @width-toc; + // Side padding used for the page + // This is set in px to enforce safe area on a page + --padding-page: @padding-page; /* Spacing */ --space-unit: @space-unit; @@ -296,15 +315,34 @@ --line-height-xs: var( --line-height-xxx-small ); --line-height-sm: var( --line-height-xx-small ); --opacity-icon-base--active: var( --opacity-icon-base--selected ); -} -@media ( min-width: @min-width-breakpoint-tablet ) { - :root { + @media ( min-width: @min-width-breakpoint-tablet ) { --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 )'; + --padding-page: ~'calc( @{padding-page} * 1.5 )'; } + + @media ( min-width: @min-width-breakpoint-desktop ) { + --padding-page: ~'calc( @{padding-page} * 2 )'; + --header-card-maxheight: ~'calc( 100vh - var( --space-sm ) * 2 )'; + } + + @media ( prefers-contrast: more ) { + --font-weight-normal: 500; + } + + @media ( prefers-contrast: less ) { + --font-weight-normal: 300; + } +} + +/* CJK languages need increased line-height for readability */ +:lang( ja ), +:lang( ko ), +:lang( zh ) { + --line-height: 1.75; } // TODO: Update with implementation on T376559 when it is finalized diff --git a/resources/variables.less b/resources/variables.less index b9c8198d..4bd1c2bf 100644 --- a/resources/variables.less +++ b/resources/variables.less @@ -2,11 +2,11 @@ * Citizen * * All LESS variables used in the skin must be defined here - * Use CSS variables from cssvariables.less is preferrable + * Use CSS variables from tokens.less is preferrable * Only import this stylesheet when LESS variables is nessecary * * Related files: - * - Citizen CSS variables: skins.citizen.styles/common/cssvariables.less + * - Citizen tokens: skins.citizen.styles/tokens.less * - Override MW skin default variables: mediawiki.less/mediawiki.skin.variables.less * */