mediawiki-skins-Citizen/resources/variables.less
alistair3149 7dc0d14c70
feat: simplify background color variables in core styles
--background-color-dp-XX is soft depreciated, please use --color-surface-X instead
2021-07-25 19:16:05 -04:00

411 lines
14 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*
* Citizen - LESS variables
* https://starcitizen.tools
*/
// Import MediaWiki-supplied mixins
@import 'mediawiki.mixins';
/* == Breakpoints == */
/**
* Minimum available screen width at which a device can be considered a mobile device
* Many older feature phones have screens smaller than this value.
*/
@width-breakpoint-mobile: 320px;
/**
* Minimum available screen width at which a device can be considered a tablet
* The number is currently based on the device width of a Samsung Galaxy S5 mini and is low
* enough to cover iPad (768px).
*/
@width-breakpoint-tablet: 720px;
/* Minimum available screen width at which a device can be considered a desktop. */
@width-breakpoint-desktop: 1000px;
/* Wider desktop breakpoint */
@width-breakpoint-desktop-wide: 1300px;
/* Width when content center on pages with ToC */
@width-breakpoint-desktop-wider: @width-breakpoint-desktop + @width-toc * 2;
/* Extra wide desktop breakpoint */
@width-breakpoint-desktop-extrawide: 2000px;
/* == Colors == */
/* Base theme */
@color-surface-0: #fff;
@color-surface-1: #fff;
@color-surface-2: #f8f9fa;
@color-surface-3: #eaecf0;
@color-surface-4: #c8ccd1;
/* Dark theme */
@color-surface-0-dark: #131a21;
@color-surface-1-dark: #242a31;
@color-surface-2-dark: #282f35;
@color-surface-3-dark: #30363c;
@color-surface-4-dark: #363c42;
/**
* 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 colors */
@background-color-dp-00: @color-base100;
@background-color-dp-00--rgb: red(@background-color-dp-00), green(@background-color-dp-00), blue(@background-color-dp-00);
@background-color-dp-01: @color-base100;
@background-color-dp-02: @color-base100;
@background-color-dp-03: @color-base100;
@background-color-dp-04: @color-base100;
@background-color-dp-06: @color-base100;
@background-color-dp-08: @color-base100;
@background-color-dp-12: @color-base100;
@background-color-dp-16: @color-base100;
@background-color-dp-24: @color-base100;
@background-color-overlay: rgba( 255, 255, 255, 0.95 ); //base100 95% opacity
@background-color-overlay--lighter: rgba( 255, 255, 255, 0.6 );
@background-color-framed: @color-base90;
@background-color-framed--hover: @color-base100;
@background-color-framed--active: @color-base70;
@background-color-input: rgba( 255, 255, 255, 0.5 );
@background-color-icon: rgba( 0, 0, 0, 0.4 );
@background-color-icon--hover: rgba( 0, 0, 0, 0.6 );
@background-color-icon--active: rgba( 0, 0, 0, 0.8 );
@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 );
@background-color-destructive: @color-red90;
@background-color-warning: @color-yellow90;
@background-color-success: @color-green90;
/* Foreground colors */
@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-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.2;
@opacity-icon-base: 0.4;
@opacity-icon-base--hover: 0.6;
@opacity-icon-base--active: 0.8;
/* == Box model properties == */
/* `--*size` variables are used for `*width` & `*height` properties. */
@size-icon: 20px;
// Not in the header section it is also used outside of header
@height-header: 56px;
@width-layout: @width-breakpoint-desktop - 2 * @padding-page;
@width-toc: @width-breakpoint-desktop-wide - @width-breakpoint-desktop;
/* Paddings */
@padding-page: 20px;
/* Border */
/* Border colors */
@border-color-base: rgba( 0, 0, 0, 0.05 );
@border-color-base--lighter: rgba( 0, 0, 0, 0.02 );
@border-color-base--darker: rgba( 0, 0, 0, 0.08 );
// To blend better with OOUI styles
@border-color-input: @border-color-base;
@border-color-input--hover: rgba( 0, 0, 0, 0.4 );
/* Border radius */
@border-radius--small: 4px;
@border-radius--medium: @border-radius--small * 2;
@border-radius--large: @border-radius--small * 3;
/* Transitions */
@transition-color: color 500ms ease;
@transition-color-quick: color 200ms ease;
@transition-transform: transform 500ms cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-transform-quick: transform 200ms cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-width: width 500ms cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-width-quick: width 200ms cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-height: height 500ms cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-height-quick: height 200ms cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-margin: margin 500ms cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-margin-quick: margin 200ms cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-padding: padding 500ms cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-padding-quick: padding 200ms cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-background: background 500ms ease;
@transition-background-quick: background 200ms ease;
@transition-opacity: opacity 500ms ease;
@transition-opacity-quick: opacity 200ms ease;
@transition-border: border 500ms ease;
@transition-border-quick: border 200ms ease;
@transition-box-shadow: box-shadow 500ms ease;
@transition-box-shadow-quick: box-shadow 200ms ease;
@transition-border-color: border-color 500ms ease;
@transition-border-color-quick: border-color 200ms ease;
@transition-filter: filter 500ms ease;
@transition-filter-quick: filter 200ms ease;
/* Fonts */
/**
* Citizen font stack for sans-serif fonts
*
* `Roboto` Default font
* system-ui - System UI font stack
* `-apple-system` - Firefox fallback for System UI font stack
*/
@fonts: 'Roboto', system-ui, -apple-system, sans-serif;
/**
* Citizen serif font stack
*
* `Georgia` Windows, Mac
* `serif` (Generic) web font fallback
*/
@fonts-serif: Georgia, serif;
/**
* System font stack for monospace fonts
*
* `SFMono-Regular` - macOS 10.12+
* `Menlo` macOS 10.6+
* `Roboto Mono` - Android 4.0+
* `Consolas` Windows Vista & newer
* `Liberation Mono` Fedora, Ubuntu, … OFL licensed
* `'Courier New', monospace` (Generic) web font fallback
*/
@fonts-monospace: 'SFMono-Regular', 'Menlo', 'Roboto Mono', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
/**
* Dark theme color palette
* Background color is used instead of shadow to show elevation
* and hierarchy in dark theme
* See https://material.io/design/color/dark-theme.html#properties
*/
@dark-color-base0: #131a21; // Surface color
@dark-color-base10: #1f262c; // 5% white overlay
@dark-color-base20: #242a31; // 7% white overlay
@dark-color-base30: #262c32; // 8% white overlay
@dark-color-base40: #282f35; // 9% white overlay
@dark-color-base50: #2d3339; // 11% white overlay
@dark-color-base60: #30363c; // 12% white overlay
@dark-color-base70: #343a40; // 14% white overlay
@dark-color-base80: #363c42; // 15% white overlay
@dark-color-base90: #393f45; // 16% white overlay
/* Background colors */
@dark-background-color-dp-00: @dark-color-base0;
@dark-background-color-dp-00--rgb: red(@dark-background-color-dp-00), green(@dark-background-color-dp-00), blue(@dark-background-color-dp-00);
@dark-background-color-dp-01: @dark-color-base10;
@dark-background-color-dp-02: @dark-color-base20;
@dark-background-color-dp-03: @dark-color-base30;
@dark-background-color-dp-04: @dark-color-base40;
@dark-background-color-dp-06: @dark-color-base50;
@dark-background-color-dp-08: @dark-color-base60;
@dark-background-color-dp-12: @dark-color-base70;
@dark-background-color-dp-16: @dark-color-base80;
@dark-background-color-dp-24: @dark-color-base90;
@dark-background-color-overlay: rgba( 19, 26, 33, 0.95 );
@dark-background-color-overlay--lighter: rgba( 19, 26, 33, 0.6 );
@dark-background-color-framed: @dark-color-base10;
@dark-background-color-framed--hover: @dark-color-base30;
@dark-background-color-framed--active: @dark-color-base0;
@dark-background-color-input: rgba( 0, 0, 0, 0.5 );
@dark-background-color-icon: rgba( 255, 255, 255, 0.4 );
@dark-background-color-icon--hover: rgba( 255, 255, 255, 0.6 );
@dark-background-color-icon--active: rgba( 255, 255, 255, 0.2 );
// @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-background-color-destructive: @color-red30;
@dark-background-color-warning: @color-yellow30;
@dark-background-color-success: @color-green30;
/* Foreground colors */
@dark-color-base: rgba( 255, 255, 255, 0.6 );
@dark-color-base--emphasized: rgba( 255, 255, 255, 0.87 );
@dark-color-base--subtle: rgba( 255, 255, 255, 0.38 );
@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.2;
/* Border colors */
@dark-border-color-base: rgba( 255, 255, 255, 0.05 );
@dark-border-color-base--lighter: rgba( 255, 255, 255, 0.02 );
@dark-border-color-base--darker: rgba( 255, 255, 255, 0.08 );
@dark-border-color-input: @dark-border-color-base;
@dark-border-color-input--hover: rgba( 255, 255, 255, 0.5 );
/*
* Framework
*/
@html-font-size: 100%;
@margin-side: 20px;
@footer-width: 1290px;
@icon-size: 18px;
@icon-box-size: @icon-size + @icon-margin * 2;
@icon-margin: 3px;
@icon-padding: 15px;
@padding-menu-item: 10px 15px;
@padding-menu-item-big: 10px 20px;
@height-progress-bar: 2px;
/* Heade */
@margin-header-item: 8px;
/* Search bar */
@width-search-bar: 500px;
@height-search-bar: 42px;
/*
* Text hierarchy
*/
// Scaling for content text
@content-scaling: 0.625;
@toc-scaling: 0.75;
// Wikimedia scale - https://design.wikimedia.org/style-guide/visual-style_typography.html
@content-h1-size: 3.2rem * @content-scaling;
@content-h2-size: 2.4rem * @content-scaling;
@content-h3-size: 2rem * @content-scaling;
@content-h4-size: 1.8rem * @content-scaling;
@content-h5-size: 1.6rem * @content-scaling;
@content-h6-size: 1.6rem * @content-scaling;
@content-body-size: 1.6rem * @content-scaling;
@content-lead-paragraph-size: 1.8rem * @content-scaling;
@content-quote-primary-size: 2rem * @content-scaling;
@content-quote-secondary-size: 1.4rem * @content-scaling;
@content-caption-size: 1.3rem * @content-scaling;
@content-small-text-size: 1.3rem * @content-scaling;
@content-monospace-size: 1.4rem * @content-scaling;
@content-line-height: 1.6;
@content-margin-top: 0.8rem;
@ui-menu-text: 14px;
@ui-menu-text-big: 15px;
@ui-menu-header: 16px;
@footer-line-height: 1.4;
/*
* Legacy colors
* TODO: Replace all of them with the new variables
*/
// Wikimedia colors
@base-0: #000;
@base-10: #202122;
@base-20: #54595d;
@base-30: #72777d;
@base-50: #a2a9b1;
@base-70: #c8ccd1;
@base-80: #eaecf0;
@base-90: #f8f9fa;
@base-100: #fff;
@accent-10: #2a4b8d;
@accent-50: #36c;
@accent-90: #eaf3ff;
@red-30: #b32424;
@red-50: #d33;
@red-90: #fee7e6;
@green-30: #14866d;
@green-50: #00af89;
@green-90: #d5fdf4;
@yellow-30: #ac6600;
@yellow-50: #fc3;
@yellow-90: #fef6e7;
@color-footer-background-40: #0f1418;
@color-footer-background-50: #131a21;
@color-footer-background-60: #1a252d;
@color-footer-text: #979c9f;
@color-footer-link: #cfdee8;
@color-footer-link-active: @base-80;
// Dark mode colors
@dark-bg-0: #11151d;
@dark-bg-10: #1d2129;
@dark-bg-20: #22262d;
@dark-bg-30: #24272f;
@dark-bg-40: #2b2f36;
@dark-bg-50: #33363d;
@dark-bg-60: #34383f;
@dark-text-100: #e0e1e2;
@dark-text-90: #c1c2c5;
@dark-text-80: #a0a1a5;
@dark-text-70: #86888c;
@dark-text-60: #6c6e73;