StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-28 16:21:11 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Citizen/resources/skins.citizen.styles/tokens.less
alistair3149 91619884ab
fix(core): 🐛 incorrect box-shadow values 
It seems that stylelint somehow wiped out the previous value.
2024-07-07 03:06:42 -04:00

226 lines
13 KiB
Plaintext
Raw Blame History

/**
* 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 ) )';
/* Box shadow */
--box-shadow-border: var( --border-color-base ) 0 0 0 1px inset;
// Based on https://web.dev/building-a-color-scheme/#rad-shadow
// TODO: Refactor this to support filter drop-shadow
--box-shadow-card: 0 2.8px 2.2px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 6.7px 5.3px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .01))', 0 12.5px 10px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 22.3px 17.9px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 41.8px 33.4px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 100px 80px -4px ~'hsla(var(--surface-shadow), var(--shadow-strength))';
--box-shadow-dialog: 0 2.8px 2.2px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 6.7px 5.3px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .01))', 0 12.5px 10px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 22.3px 17.9px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 41.8px 33.4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 100px 80px ~'hsla(var(--surface-shadow), var(--shadow-strength))';
/* 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
*/
--border-radius-base: 4px;
--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
* Design System for Wikimedia
* See https://doc.wikimedia.org/codex/latest/design-tokens/overview.html
*
* @see https://github.com/wikimedia/mediawiki/blob/master/resources/lib/codex-design-tokens/theme-wikimedia-ui-root.css
*/
--color-base: ~'hsl( var( --color-primary__h ), 30%, 20% )';
--color-base--hover: var( --color-subtle );
--color-emphasized: ~'hsl( var( --color-primary__h ), 85%, 5% )';
--color-subtle: ~'hsl( var( --color-primary__h ), 30%, 35% )';
--color-placeholder: var( --color-subtle );
--color-disabled: var( --color-subtle );
--color-inverted: #fff;
--color-inverted-fixed: #fff;
--color-progressive: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), var( --color-primary__l ) )';
--color-progressive--hover: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), calc( var( --color-primary__l ) + var( --delta-lightness-hover-state ) ) )';
--color-progressive--active: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), calc( var( --color-primary__l ) - var( --delta-lightness-hover-state ) ) )';
--color-progressive--focus: var( --color-progressive );
--color-destructive: #d60021;
--color-destructive--hover: #ef4444;
--color-destructive--active: #9c0015;
--color-destructive--focus: var( --color-progressive );
--color-visited: var( --color-link );
--color-destructive--visited: var( --color-destructive );
--color-error: var( --color-destructive );
--color-warning: #c77f00;
--color-success: #009768;
--color-notice: var( --color-base );
--color-content-added: var( --color-success );
--color-content-removed: var( --color-destructive );
--filter-invert-icon: 0;
--filter-invert-primary-button-icon: 1;
--box-shadow-color-base: ~'hsla( var( --surface-shadow ), var( --shadow-strength ) )';
--box-shadow-color-progressive--active: var( --color-progressive--active );
--box-shadow-color-progressive--focus: var( --color-progressive );
--box-shadow-color-progressive-selected: var( --color-progressive );
--box-shadow-color-progressive-selected--hover: var( --color-progressive--hover );
--box-shadow-color-progressive-selected--active: var( --color-progressive--active );
--box-shadow-color-destructive--focus: var( --color-progressive );
--box-shadow-color-inverted: #fff;
--box-shadow-color-transparent: transparent;
--background-color-interactive: var( --color-surface-2 );
--background-color-interactive-subtle: var( --color-surface-1 );
--background-color-disabled: var( --color-surface-3 );
--background-color-disabled-subtle: var( --color-surface-1 );
--background-color-progressive: var( --color-progressive );
--background-color-progressive--hover: var( --color-progressive--hover );
--background-color-progressive--active: var( --color-progressive--active );
--background-color-progressive--focus: var( --color-progressive );
--background-color-progressive-subtle: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 95% )';
--background-color-destructive: var( --color-destructive );
--background-color-destructive--hover: var( --color-destructive--hover );
--background-color-destructive--active: var( --color-destructive--active );
--background-color-destructive--focus: var( --color-progressive );
--background-color-destructive-subtle: #fee2e2;
--background-color-error: var( --color-destructive );
--background-color-error--hover: var( --color-destructive--hover );
--background-color-error--active: var( --color-destructive--active );
--background-color-error-subtle: var( --background-color-destructive-subtle );
--background-color-warning-subtle: #fef3c7;
--background-color-success-subtle: #d1fae5;
--background-color-notice-subtle: var( --color-surface-2 );
--background-color-content-added: var( --background-color-success-subtle );
--background-color-content-removed: var( --background-color-destructive-subtle );
--background-color-backdrop-light: ~'hsla( var( --color-primary__h ), var( --color-surface-0__s ), var( --color-surface-0__l ), 0.65 )';
--background-color-backdrop-dark: rgba( 0, 0, 0, 0.65 );
--background-color-base: var( --color-surface-0 );
/*
--background-color-base-fixed: #fff;
*/
--background-color-neutral: var( --color-surface-2 );
--background-color-neutral-subtle: var( --color-surface-1 );
--background-color-transparent: transparent;
/*
--background-color-inverted: #101418;
*/
--background-color-button-quiet--hover: rgba( 0, 0, 0, 0.07 );
--background-color-button-quiet--active: rgba( 0, 0, 0, 0.09 );
--background-color-input-binary--checked: var( --color-progressive );
/*
--background-color-tab-list-item-framed--hover: rgba(255, 255, 255, 0.3);
--background-color-tab-list-item-framed--active: rgba(255, 255, 255, 0.65);
*/
--opacity-icon-base: 0.6;
--opacity-icon-base--hover: 0.8;
--opacity-icon-base--selected: 1;
--opacity-icon-base--disabled: 0.3;
--opacity-icon-placeholder: 0.4;
--opacity-icon-subtle: 0.5;
--border-color-base: rgba( 0, 0, 0, 0.08 );
--border-color-interactive: rgba( 0, 0, 0, 0.11 );
--border-color-disabled: var( --border-color-subtle );
--border-color-subtle: rgba( 0, 0, 0, 0.05 );
--border-color-muted: var( --border-color-subtle );
--border-color-inverted: #fff;
--border-color-progressive: var( --color-progressive );
--border-color-progressive--hover: var( --color-progressive--hover );
--border-color-progressive--active: var( --color-progressive--active );
--border-color-progressive--focus: var( --color-progressive );
--border-color-destructive: var( --color-destructive );
--border-color-destructive--hover: var( --color-destructive--hover );
--border-color-destructive--active: var( --color-destructive--active );
--border-color-destructive--focus: var( --color-progressive );
--border-color-error: var( --border-color-base );
--border-color-error--hover: var( --border-color-base );
--border-color-warning: var( --border-color-base );
--border-color-success: var( --border-color-base );
--border-color-notice: var( --border-color-base );
--border-color-content-added: var( --border-color-base );
--border-color-content-removed: var( --border-color-base );
--border-color-transparent: transparent;
--border-color-divider: var( --border-color-base );
--outline-color-progressive--focus: var( --color-progressive );
--color-link-red: var( --color-destructive );
--color-link-red--hover: var( --color-destructive--hover );
--color-link-red--active: var( --color-destructive--active );
--color-link-red--focus: var( --color-destructive--focus );
--color-link-red--visited: var( --color-destructive--visited );
--border-color-input--hover: var( --border-color-interactive );
--border-color-input-binary: var( --border-color-interactive );
--border-color-input-binary--hover: var( --border-color-progressive--hover );
--border-color-input-binary--active: var( --border-color-progressive--active );
--border-color-input-binary--focus: var( --border-color-progressive--focus );
--border-color-input-binary--checked: var( --border-color-progressive );
/*
* DEPRECATED TOKENS
* This tokens will be hard-deprecated on next major version bump on Decemeber 2024
*/
--background-color-primary--hover: var( --background-color-progressive-subtle );
--background-color-primary--active: var( --background-color-progressive-subtle );
--background-color-overlay: var( --background-color-backdrop-light );
--background-color-overlay--lighter: var( --background-color-backdrop-light );
--background-color-quiet--hover: var( --background-color-button-quiet--hover );
--background-color-quiet--active: var( --background-color-button-quiet--active );
--border-radius--small: var( --border-radius-base );
--border-radius--medium: var( --border-radius-medium );
--border-radius--large: var( --border-radius-large );
--border-radius--pill: var( --border-radius-pill );
--color-base--emphasized: var( --color-emphasized );
--color-base--subtle: var( --color-subtle );
--color-primary: var( --color-progressive );
--color-primary--hover: var( --color-progressive--hover );
--color-primary--active: var( --color-progressive--active );
--color-text-error: var( --color-destructive );
--color-text-warning: var( --color-base );
--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 )';
}
}
Reference in a new issue View git blame Copy permalink