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

feat(tokens): ✨ simplify box shadow and align closer with Codex styles

Browse source 
- Remove excessive layers in smaller shadows
- Align small and medium shadow closer to Codex
- Rename some of the inner shadow CSS variables
This commit is contained in:
alistair3149 2024-10-19 01:15:31 -04:00
parent f4a8bd59a7
commit 951913458c
No known key found for this signature in database
2 changed files with 15 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -38,8 +38,8 @@
--border-color-subtle: rgba( 255, 255, 255, 0.02 ); --border-color-subtle: rgba( 255, 255, 255, 0.02 );
--border-color-interactive: rgba( 255, 255, 255, 0.08 ); --border-color-interactive: rgba( 255, 255, 255, 0.08 );
--surface-shadow: var( --color-primary__h ), 50%, 3%; --shadow-color: var( --color-primary__h ), 50%, 3%;
--shadow-strength: 0.8; --shadow-opacity: 0.08;
--filter-invert: invert( 1 ) hue-rotate( 180deg ); --filter-invert: invert( 1 ) hue-rotate( 180deg );
@ -63,7 +63,7 @@
--border-color-base: rgba( 255, 255, 255, 0.07 ); --border-color-base: rgba( 255, 255, 255, 0.07 );
--border-color-subtle: rgba( 255, 255, 255, 0.04 ); --border-color-subtle: rgba( 255, 255, 255, 0.04 );
--border-color-interactive: rgba( 255, 255, 255, 0.1 ); --border-color-interactive: rgba( 255, 255, 255, 0.1 );
--shadow-strength: 0.06; --shadow-opacity: 0.06;
} }
// T365102 invert class specifically for image related element // T365102 invert class specifically for image related element

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

@ -40,12 +40,6 @@
--color-link--active: ~'var( --color-progressive--active )'; --color-link--active: ~'var( --color-progressive--active )';
/* Box shadow */ /* Box shadow */
--box-shadow-border: var( --border-color-base ) 0 0 0 1px; --box-shadow-border: var( --border-color-base ) 0 0 0 1px;
// Based on https://web.dev/building-a-color-scheme/#rad-shadow
// TODO: Refactor this to support filter drop-shadow
// TODO: LESS compiler in MW 1.39 does not support multiline, switch to that in 1.43
--box-shadow-drop-small: ~'0 calc( var( --shadow-vertical-small ) * 0.028 ) 2.2px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .03 ) ), 0 calc( var( --shadow-vertical-small ) * 0.067 ) 5.3px hsla( var( --surface-shadow ), calc( var(--shadow-strength ) + .01 ) ), 0 calc( var( --shadow-vertical-small ) * 0.125 ) 10px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .02 ) ), 0 calc( var( --shadow-vertical-small ) * 0.223 ) 17.9px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .02 ) ), 0 calc( var( --shadow-vertical-small ) * 0.418 ) 33.4px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .03 ) ), 0 var( --shadow-vertical-small ) 80px hsla( var( --surface-shadow ), var( --shadow-strength ) )';
--box-shadow-drop-medium: ~'0 calc( var( --shadow-vertical-medium ) * 0.028 ) 2.2px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .03 ) ), 0 calc( var( --shadow-vertical-medium ) * 0.067 ) 5.3px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .01 ) ), 0 calc( var( --shadow-vertical-medium ) * 0.125 ) 10px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .02 ) ), 0 calc( var( --shadow-vertical-medium ) * 0.223 ) 17.9px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .02 ) ), 0 calc( var( --shadow-vertical-medium ) * 0.418 ) 33.4px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .03 ) ), 0 var( --shadow-vertical-medium ) 80px hsla( var( --surface-shadow ), var( --shadow-strength ) )';
--box-shadow-drop-xx-large: ~'0 calc( var( --shadow-vertical-xx-large ) * 0.028 ) 2.2px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .03 ) ), 0 calc( var( --shadow-vertical-xx-large ) * 0.067 ) 5.3px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .01 ) ), 0 calc( var( --shadow-vertical-xx-large ) * 0.125 ) 10px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .02 ) ), 0 calc( var( --shadow-vertical-xx-large ) * 0.223 ) 17.9px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .02 ) ), 0 calc( var( --shadow-vertical-xx-large ) * 0.418 ) 33.4px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .03 ) ), 0 var( --shadow-vertical-xx-large ) 80px hsla( var( --surface-shadow ), var( --shadow-strength ) )';
/* Font */ /* Font */
// Used as base unit to caluclate font-size // Used as base unit to caluclate font-size
--font-size-base: 1rem; --font-size-base: 1rem;
@ -61,12 +55,8 @@
--transition-timing-function-ease-out: cubic-bezier( 0.215, 0.61, 0.355, 1 ); --transition-timing-function-ease-out: cubic-bezier( 0.215, 0.61, 0.355, 1 );
// Hover and active states are calculated by a modifier of the lightness value in HSL (e.g. hover: +2%, active: -2%) // 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%; --delta-lightness-hover-state: 4%;
// Used to calculate box shadow --shadow-color: var( --color-primary__h ), 10%, 20%;
--shadow-strength: 0.02; --shadow-opacity: 0.034;
--shadow-vertical-small: 4px;
--shadow-vertical-medium: 16px;
--shadow-vertical-xx-large: 80px;
--surface-shadow: var( --color-primary__h ), 10%, 20%;
/** /**
* Codex Design Tokens but not included as CSS variables * Codex Design Tokens but not included as CSS variables
@ -77,6 +67,15 @@
--border-radius-sharp: 0; --border-radius-sharp: 0;
--border-radius-pill: 9999px; --border-radius-pill: 9999px;
--border-radius-circle: 50%; --border-radius-circle: 50%;
// TODO: Refactor this to support filter drop-shadow
// TODO: LESS compiler in MW 1.39 does not support multiline, switch to that in 1.43
// @see https://www.joshwcomeau.com/shadow-palette
--box-shadow-drop-small:
0.3px 0.5px 0.7px var( --box-shadow-color-base ),0.4px 0.8px 1px -1.2px var( --box-shadow-color-base ),1px 2px 2.5px -2.5px var( --box-shadow-color-base );
--box-shadow-drop-medium:
0.3px 0.5px 0.7px var( --box-shadow-color-base ),0.8px 1.6px 2px -0.8px var( --box-shadow-color-base ),2.1px 4.1px 5.2px -1.7px var( --box-shadow-color-base ),5px 10px 12.6px -2.5px var( --box-shadow-color-base );
--box-shadow-drop-xx-large:
0.3px 0.5px 0.7px var( --box-shadow-color-base ),1.5px 2.9px 3.7px -0.4px var( --box-shadow-color-base ),2.7px 5.4px 6.8px -0.7px var( --box-shadow-color-base ),4.5px 8.9px 11.2px -1.1px var( --box-shadow-color-base ),7.1px 14.3px 18px -1.4px var( --box-shadow-color-base ),11.2px 22.3px 28.1px -1.8px var( --box-shadow-color-base ),17px 33.9px 42.7px -2.1px var( --box-shadow-color-base ),25px 50px 62.9px -2.5px var( --box-shadow-color-base );
--font-size-x-small: ~'calc( var( --font-size-base ) * 0.75 )'; --font-size-x-small: ~'calc( var( --font-size-base ) * 0.75 )';
--font-size-small: ~'calc( var( --font-size-base ) * 0.875 )'; --font-size-small: ~'calc( var( --font-size-base ) * 0.875 )';
--font-size-medium: var( --font-size-base ); --font-size-medium: var( --font-size-base );
@ -118,7 +117,7 @@
--color-content-removed: var( --color-destructive ); --color-content-removed: var( --color-destructive );
--filter-invert-icon: 0; --filter-invert-icon: 0;
--filter-invert-primary-button-icon: 1; --filter-invert-primary-button-icon: 1;
--box-shadow-color-base: ~'hsla( var( --surface-shadow ), var( --shadow-strength ) )'; --box-shadow-color-base: ~'hsla( var( --shadow-color ), var( --shadow-opacity ) )';
--box-shadow-color-progressive--active: var( --color-progressive--active ); --box-shadow-color-progressive--active: var( --color-progressive--active );
--box-shadow-color-progressive--focus: var( --color-progressive ); --box-shadow-color-progressive--focus: var( --color-progressive );
--box-shadow-color-progressive-selected: var( --color-progressive ); --box-shadow-color-progressive-selected: var( --color-progressive );