StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-26 23:32:25 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Citizen/resources/variables.less
alistair3149 fc47692421
feat(core): ✨ rename border-color variables and increase contrast 
Align variable names with Codex
2024-04-19 15:20:59 -04:00

269 lines
9.7 KiB
Plaintext
Raw Blame History

/*
* Citizen
*
* All LESS variables used in the skin must be defined here
* Use CSS variables from cssvariables.less is preferrable
* Only import this stylesheet when LESS variables is nessecary
*
* Related files:
* - Citizen CSS variables: skins.citizen.styles/common/cssvariables.less
* - Override MW skin default variables: mediawiki.less/mediawiki.skin.variables.less
*
*/
/* Imports */
/*
* MediaWiki mixins
* @see https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.less/mediawiki.mixins.less
*/
@import 'mediawiki.mixins';
/*
* MediaWiki skin variables
* mediawiki.less/mediawiki.skin.variables.less
* @see https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.less/mediawiki.skin.defaults.less
*/
@import 'mediawiki.skin.variables.less';
/* == Spacing == */
@space-unit: 1rem;
@line-height-xs: 1.25;
@line-height-sm: 1.375;
@line-height-md: 1.6;
/* == Fonts == */
/*
* --font-family-citizen-base-xx are default fonts prioritized by Citizen.
* --font-family-language-xx are language-specific fonts from language RL module.
* It is empty by default but populated by Citizen language modules such as the CJK one.
*/
// Citizen sans-serif fonts
@font-family-base: var( --font-family-citizen-base ), var( --font-family-language-base ), system-ui, -apple-system, sans-serif;
// Citizen serif fonts
@font-family-serif: var( --font-family-citizen-serif ), var( --font-family-language-serif ), 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif;
// Citizen monospace fonts
@font-family-monospace: var( --font-family-citizen-monospace ), var( --font-family-language-monospace ), 'Menlo', 'Consolas', 'Liberation Mono', 'Fira Code', 'Courier New', monospace;
/* == Colors == */
/* Base theme */
@color-primary__h: 220;
@color-primary__s: 60%;
@color-primary__l: 50%;
/*
* Syntax highlight colors
* Based on Material Theme Lighter
* https://material-theme.site
*/
@color-syntax-red: #e53935;
@color-syntax-orange: #f76d47;
@color-syntax-yellow: #e2931d;
@color-syntax-green: #91b859;
@color-syntax-cyan: #39adb5;
@color-syntax-blue: #6182b8;
@color-syntax-paleblue: #8796b0;
@color-syntax-purple: #9c3eda;
@color-syntax-brown: #916b53;
@color-syntax-pink: #ff5370;
@color-syntax-violet: #945eb8;
@color-syntax-grey: #90a4ae;
/*
* Syntax highlight colors
* Based on Material Theme Palenight
* https://material-theme.site
*/
@color-syntax-red-dark: #f07178;
@color-syntax-orange-dark: #f78c6c;
@color-syntax-yellow-dark: #ffcb6b;
@color-syntax-green-dark: #c3e88d;
@color-syntax-cyan-dark: #89ddff;
@color-syntax-blue-dark: #82aaff;
@color-syntax-paleblue-dark: #b2ccd6;
@color-syntax-purple-dark: #c792ea;
@color-syntax-brown-dark: #916b53;
@color-syntax-pink-dark: #ff9cac;
@color-syntax-violet-dark: #bb80b3;
@color-syntax-grey-dark: #676E95;
/**
* Based WikimediaUI (`wmui`) color palette
* See https://design.wikimedia.org/style-guide/visual-style_colors.html
* Don't use those variables directly, instead define your vars
* referring to them as applied further below.
*/
// @color-base0: #000; // = HSB 0°, 0%, 0%
@color-base10: #202122; // = HSB 210°, 6%, 13%
@color-base20: #54595d; // = HSB 207°, 10%, 36%; WCAG 2.0 level AAA 7.09:1 contrast ratio on `#fff`
@color-base30: #72777d; // = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff`
@color-base50: #a2a9b1; // = HSB 212°, 8%, 69%
@color-base70: #c8ccd1; // = HSB 213°, 4%, 82%
@color-base80: #eaecf0; // = HSB 220°, 3%, 94%
@color-base90: #f8f9fa; // = HSB 210°, 1%, 98%
@color-base100: #fff; // = HSB 0°, 0%, 100%
@color-accent30: #2a4b8d; // = HSB 220°, 70%, 55%
@color-accent50: #36c; // = HSB 220°, 75%, 80%
@color-accent90: #eaf3ff; // = HSB 214°, 8%, 100%
@color-red30: #b32424; // = HSB 360°, 80%, 70%
@color-red50: #d33; // = HSB 360°, 77%, 87%
@color-red90: #fee7e6; // = HSB 3°, 9%, 100%
@color-yellow30: #ac6600; // = HSB 36°, 100%, 67%
@color-yellow50: #fc3; // = HSB 45°, 80%, 100%
@color-yellow90: #fef6e7; // = HSB 39°, 9%, 100%
@color-green30: #14866d; // = HSB 167°, 85%, 53%
@color-green50: #00af89; // = HSB 167°, 100%, 69%
@color-green90: #d5fdf4; // = HSB 166°, 16%, 99%
@color-accent50--lighten: #5b84d6;
@color-red50--lighten: #e35b5b;
@color-accent-30--darken: #26437f;
@background-color-overlay: rgba( 255, 255, 255, 0.95 ); //base100 95% opacity
@background-color-overlay--lighter: rgba( 255, 255, 255, 0.6 );
@background-color-icon: rgba( 0, 0, 0, 0.6 );
@background-color-icon--hover: rgba( 0, 0, 0, 0.8 );
@background-color-icon--active: rgba( 0, 0, 0, 1 );
@background-color-quiet: transparent;
@background-color-quiet--hover: rgba( 0, 0, 0, 0.07 );
@background-color-quiet--active: rgba( 0, 0, 0, 0.09 );
@background-color-primary--hover: @color-accent90;
@background-color-primary--active: rgba( 41, 98, 204, 0.1 );
/* Foreground colors */
/* color-base is deprecated */
@color-base: @color-base20;
@color-base--emphasized: @color-base10;
@color-base--subtle: @color-base30;
@color-primary: @color-accent50;
@color-primary--hover: @color-accent50--lighten;
@color-primary--active: @color-accent30;
@color-destructive: @color-red50;
@color-destructive--hover: @color-red50--lighten;
@color-destructive--active: @color-red30;
@color-warning: @color-yellow50;
@color-success: @color-green50;
@color-text-error: @color-red50;
@color-text-warning: @color-yellow30;
@color-text-success: @color-green30;
@color-link: @color-accent50;
@color-link--hover: @color-accent50--lighten;
@color-link--active: @color-accent30;
@color-link-new: @color-red50;
@color-link-new--hover: @color-red50--lighten;
@color-link-new--active: @color-red30;
/* Opacity */
@opacity-base--disabled: 0.3;
@opacity-icon-base: 0.6;
@opacity-icon-base--hover: 0.8;
@opacity-icon-base--active: 1;
/* Z-Index */
// @z-index-base: 0; - WMUI
@z-index-page-header: 11;
@z-index-site-header: 91;
@z-index-overlay: 101; // WMUI
/* == Box model properties == */
/* `--*size` variables are used for `*width` & `*height` properties. */
@size-icon: 1.25rem;
// Not in the header section it is also used outside of header
@header-size: 3.5rem;
// 67.5rem at 16px font size
// We use px because it would be frustrating if max-width changes with font size
@width-layout: 1080px;
// TODO: Revise this number, fixed value isn't great but we need it for b
@width-toc: 240px;
/* Paddings */
@padding-page: 16px;
/* Border */
/* Border radius */
@border-radius--small: 4px;
@border-radius--medium: @border-radius--small * 2;
@border-radius--large: @border-radius--small * 3;
@border-radius--pill: 9999px;
@border-radius--circle: 100%;
/* Transitions */
@transition-hover: 150ms cubic-bezier( 0.215,0.61,0.355,1 );
@transition-menu: 250ms ease;
/* Shadow */
/* Box shadow */
// 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))';
@dark-background-color-icon: rgba( 255, 255, 255, 0.6 );
@dark-background-color-icon--hover: rgba( 255, 255, 255, 0.8 );
@dark-background-color-icon--active: rgba( 255, 255, 255, 0.4 );
// @dark-background-color-quiet: transparent;
@dark-background-color-quiet--hover: rgba( 255, 255, 255, 0.07 );
@dark-background-color-quiet--active: rgba( 255, 255, 255, 0.03 );
@dark-background-color-primary--hover: @color-accent30;
@dark-background-color-primary--active: @color-accent-30--darken;
@dark-color-text-error: @color-red50--lighten;
@dark-color-text-warning: @color-yellow50;
@dark-color-text-success: @color-green50;
@dark-color-link: @color-accent50--lighten;
@dark-color-link--hover: @color-accent90;
@dark-color-link--active: @color-accent30;
@dark-color-link-new: @color-red50--lighten;
@dark-color-link-new--hover: @color-red90;
@dark-color-link-new--active: @color-red30;
/* Opacity */
// @dark-opacity-icon-base: 0.4;
// @dark-opacity-icon-base--hover: 0.6;
@dark-opacity-icon-base--active: 0.4;
/*
* Framework
*/
@html-font-size: 100%;
@icon-size: 1.125rem; // 18px, TODO: Replace this var
@icon-box-size: @icon-size + @icon-margin * 2;
@icon-margin: 3px;
/*
* Legacy colors
*
* They are used by the SMW skinstyles and a few MW UI stuff.
* Those styles should be updated to the new standard.
* After that we can remove all theses LESS variables.
*/
@dark-bg-10: #1d2129;
@dark-bg-20: #22262d;
@dark-bg-30: #24272f;
@dark-bg-40: #2b2f36;
@dark-bg-50: #33363d;
@dark-bg-60: #34383f;
/*
* Used by Math and WikiHiero for recolor
* TODO: Figure out a way to do recolor with CSS variable
* e.g. If the primary color is changed on wiki, it won't be reflected here.
*/
@dark-color-base: hsl( @color-primary__h, 25%, 80% );
@dark-color-base--emphasized: hsl( @color-primary__h, 80%, 95% );
@dark-color-base--subtle: hsl( @color-primary__h, 25%, 65% );
Reference in a new issue View git blame Copy permalink