path: root/resources/src/mediawiki.less/mediawiki.skin.defaults.less

// This file is the central place where we declare
// which variables are part of the "mediawiki.skin.variables.less"
// API that core and extensions can use in their style modules.
// This includes all of the Codex design tokens, as well as some additional variables.
//
// The initial values are intended merely as fallback to allow
// forward and backward compatibility to allow new variables
// to be defined without breaking existing implementations by
// skins.
//
// @since 1.36
// Add `@since` line above every added variable (block) per MediaWiki version.
//
// == Instructions for skins ==
//
// In skin.json, add:
//    "SkinLessImportPaths": {
//        "skinname": "resources/mediawiki.less"
//    }
//
// Create a file called resources/mediawiki.less/mediawiki.skin.variables.less, which starts with:
//    @import 'mediawiki.skin.default.less';
// then import the Codex theme for this skin, e.g.:
//    @import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui.less';
// followed by any overrides for these variables, e.g.:
//    @min-width-breakpoint-desktop: 1234px;

// Make all Codex mixins available when mediawiki.skin.variables.less is imported
@import 'mediawiki.skin.codex/mixins/codex-public-mixins.less';

// Skin variables that are not Codex tokens:

// Form input labels for buttons, dropdowns, but also text input values.
// Note that there are binary inputs in skins like Vector, that receive a different treatment
// with name `*-input-binary`.
@line-height-label: 1.6;

// Colors
@color-link: #0645ad;
@color-link--visited: #0b0080;
@color-link--active: #faa700;
// Link colors for new or missing articles, also known as “Red links”.
// https://www.wikidata.org/wiki/Q13417974#sitelinks-wikipedia
@color-link-new: @color-link-red;
@color-link-new--visited: @color-link-red--visited;
@color-link-external: #36b;
@color-link-external--visited: #636; // See T5112.
@color-link-external--active: #b63;

// ----- Neutral values for Codex tokens: -----
// @since 1.41
// We don't import any of the existing Codex themes here. Instead, we provide neutral, unbranded
// values for every Codex token. Skins can override these individually, or they can override them
// en masse by importing a Codex theme. In the future, these values should be migrated into
// Codex as its base theme, once Codex has a proper theming system that allows for this (T296689).

@font-size-base: 1em;
@font-size-x-small: 0.75em;
@font-size-small: 0.875em;
@font-size-medium: 1em;
@font-size-large: 1.125em;
@font-size-x-large: 1.25em;
@font-size-xx-large: 1.5em;
@font-size-xxx-large: 1.75em;
@accent-color-base: #0645ad;
@background-color-base: #fff;
@background-color-base-fixed: #fff;
@background-color-content-added: #afb6e9;
@background-color-content-removed: #fc3;
@background-color-interactive: #eee;
@background-color-interactive--hover: #dadde3;
@background-color-interactive--active: #c8ccd1;
@background-color-interactive-subtle: #f9f9f9;
@background-color-interactive-subtle--hover: #eaecf0;
@background-color-interactive-subtle--active: #dadde3;
@background-color-inverted: #000;
@background-color-disabled: #ccc;
@background-color-disabled-subtle: #eee;
@background-color-progressive: #0645ad;
@background-color-progressive--hover: #447ff5;
@background-color-progressive--active: #2a4b8d;
@background-color-progressive--focus: #0645ad;
@background-color-progressive-subtle: #eaf3ff;
@background-color-progressive-subtle--hover: #dce3f9;
@background-color-progressive-subtle--active: #cbd6f6;
@background-color-destructive: #d03;
@background-color-destructive--hover: #ff4242;
@background-color-destructive--active: #b32424;
@background-color-destructive--focus: #d03;
@background-color-destructive-subtle: #fee7e6;
@background-color-destructive-subtle--hover: #ffdad3;
@background-color-destructive-subtle--active: #ffc8bd;
@background-color-error: #d73333;
@background-color-error--hover: #ff4242;
@background-color-error--active: #b32424;
@background-color-error-subtle: #fee7e6;
@background-color-error-subtle--hover: #ffdad3;
@background-color-error-subtle--active: #ffc8bd;
@background-color-warning-subtle: #fef6e7;
@background-color-success-subtle: #d5fdf4;
@background-color-notice-subtle: #eee;
@background-color-backdrop-light: rgba( 255, 255, 255, 0.65 );
@background-color-backdrop-dark: rgba( 0, 0, 0, 0.65 );
@background-color-transparent: rgba( 255, 255, 255, 0 );
@background-color-neutral: #eaecf0;
@background-color-neutral-subtle: #f8f9fa;
@background-color-button-quiet--hover: rgba( 0, 24, 73, 0.027 );
@background-color-button-quiet--active: rgba( 0, 24, 73, 0.082 );
@background-color-input-binary--checked: #0645ad;
@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 );
@color-base: #222;
@color-base-fixed: #222;
@color-base--hover: #444;
@color-emphasized: #000;
@color-subtle: #555;
@color-placeholder: #767676;
@color-disabled: #767676;
@color-inverted: #fff;
@color-inverted-fixed: #fff;
@color-progressive: #0645ad;
@color-progressive--hover: #447ff5;
@color-progressive--active: #2a4b8d;
@color-progressive--focus: #0645ad;
@color-destructive: #d03;
@color-destructive--hover: #ff4242;
@color-destructive--active: #b32424;
@color-destructive--focus: #d03;
@color-destructive--visited: #6b4ba1;
@color-destructive--visited--hover: #534fa3;
@color-destructive--visited--active: #353262;
@color-visited: #6b4ba1;
@color-visited--hover: #534fa3;
@color-visited--active: #353262;
@color-error: #d03;
@color-error--hover: #9f3526;
@color-error--active: #612419;
@color-warning: #edab00;
@color-success: #14866d;
@color-notice: #222;
@color-link-red: #d03;
@color-link-red--hover: #ff4242;
@color-link-red--active: #b32424;
@color-link-red--focus: #d03;
@color-link-red--visited: #a55858;
@color-link-red--visited--hover: #854848;
@color-link-red--visited--active: #512e2e;
@color-content-added: #096450;
@color-content-removed: #b32424;
@color-icon-error: #f54739;
@color-icon-warning: #ab7f2a;
@color-icon-success: #099979;
@color-icon-notice: #72777d;
@color-disabled-emphasized: #a2a9b1;
@opacity-base: 1;
@opacity-medium: 0.67;
@opacity-low: 0.33;
@opacity-transparent: 0;
@filter-invert-icon: 0;
@filter-invert-primary-button-icon: 1;
@opacity-icon-base: 0.87;
@opacity-icon-base--hover: 0.74;
@opacity-icon-base--selected: 1;
@opacity-icon-base--disabled: 0.51;
@opacity-icon-placeholder: 0.51;
@opacity-icon-subtle: 0.67;
@background-position-base: center;
@z-index-bottom: -100; // Use descriptive `z-index` tokens for layout purposes.
@z-index-base: 0;
@z-index-above-content: 1;
@z-index-toolbar: 2;
@z-index-dropdown: 50;
@z-index-sticky: 100;
@z-index-fixed: 200;
@z-index-off-canvas-backdrop: 300;
@z-index-off-canvas: 350;
@z-index-overlay-backdrop: 400;
@z-index-overlay: 450;
@z-index-popover: 700;
@z-index-tooltip: 800;
@z-index-toast-notification: 900;
@z-index-top: 9999;
@z-index-stacking-0: 0; // Use stacking-specific z-index tokens inside components to layer individual elements.
@z-index-stacking-1: 1;
@z-index-stacking-2: 2;
@z-index-stacking-3: 3;
@box-sizing-base: border-box;
@min-size-icon-x-small: 12px;
@min-size-icon-small: 16px;
@min-size-icon-medium: 20px;
@min-size-search-figure: 40px;
@min-height-text-area: 64px;
@min-height-table-header: 64px;
@min-height-table-footer: 64px;
@min-size-interactive-pointer: 32px;
@min-size-interactive-touch: 44px;
@min-size-input-binary: 20px;
@min-size-toggle-switch-grip: 20px;
@size-0: 0;
@size-6: 0.0625em;
@size-12: 0.125em;
@size-25: 0.25em;
@size-50: 0.5em;
@size-75: 0.75em;
@size-100: 1em;
@size-125: 1.25em;
@size-150: 1.5em;
@size-200: 2em;
@size-250: 2.5em;
@size-275: 2.75em;
@size-300: 3em;
@size-400: 4em;
@size-800: 8em;
@size-1600: 16em;
@size-2400: 24em;
@size-2800: 28em;
@size-3200: 32em;
@size-4000: 40em;
@size-5600: 56em;
@size-absolute-1: 1px;
@size-absolute-9999: 9999px;
@size-third: 33.33%;
@size-half: 50%;
@size-full: 100%;
@size-double: 200%;
@size-content-min: min-content;
@size-content-fit: fit-content;
@size-content-max: max-content;
// stylelint-disable-next-line plugin/no-unsupported-browser-features
@size-viewport-width-full: 100vw;
// stylelint-disable-next-line plugin/no-unsupported-browser-features
@size-viewport-height-full: 100vh;
@size-icon-x-small: 0.75em;
@size-icon-small: 1em;
@size-icon-medium: 1.25em;
@size-search-figure: 2.5em;
@min-width-medium: 256px;
@min-width-breakpoint-mobile: 320px;
@min-width-breakpoint-tablet: 640px;
@min-width-breakpoint-desktop: 1120px;
@min-width-breakpoint-desktop-wide: 1680px;
@min-width-toggle-switch: 48px;
@max-width-base: none;
// `max-width-breakpoint-*` values are set to the next min-width breakpoint minus 1px.
// For cross-browser support and standards alignment Less calculations and not `calc()` is used.
// CSS standard doesn't specify complex values for media queries.
// See https://www.w3.org/TR/mediaqueries-4/#mq-features
// These have to be wrapped in parentheses, otherwise the Less calculation breaks (T367103)
@max-width-breakpoint-mobile: ( @min-width-breakpoint-tablet - 1px );
@max-width-breakpoint-tablet: ( @min-width-breakpoint-desktop - 1px );
@max-width-breakpoint-desktop: ( @min-width-breakpoint-desktop-wide - 1px );
@max-width-button: 28em;
@position-offset-border-width-base: -1px;
@spacing-0: 0;
@spacing-12: 2px;
@spacing-25: 4px;
@spacing-30: 5px;
@spacing-35: 6px;
@spacing-50: 8px;
@spacing-75: 12px;
@spacing-100: 16px;
@spacing-125: 20px;
@spacing-150: 24px;
@spacing-200: 32px;
@spacing-250: 40px;
@spacing-300: 48px;
@spacing-400: 64px;
@spacing-half: 50%;
@spacing-full: 100%;
@spacing-horizontal-button: 11px;
@spacing-horizontal-button-icon-only: 5px;
@spacing-horizontal-button-large: 15px;
@spacing-horizontal-input-text-two-end-icons: calc( @spacing-50 * 2 + @size-icon-small );
@spacing-start-typeahead-search-figure: 12px;
@spacing-start-typeahead-search-icon: 22px;
@spacing-typeahead-search-focus-addition: 24px;
@border-width-base: 1px;
@border-width-thick: 2px;
@border-width-input-radio--checked: 6px;
@border-style-base: solid;
@border-style-dashed: dashed;
@border-color-base: #aaa;
@border-color-content-added: #afb6e9;
@border-color-content-removed: #fc3;
@border-color-interactive: #767676;
@border-color-interactive--hover: #27292d;
@border-color-interactive--active: #202122;
@border-color-subtle: #ccc;
@border-color-muted: #eee;
@border-color-disabled: #ccc;
@border-color-inverted: #fff;
@border-color-progressive: #0645ad;
@border-color-progressive--hover: #447ff5;
@border-color-progressive--active: #2a4b8d;
@border-color-progressive--focus: #0645ad;
@border-color-destructive: #d03;
@border-color-destructive--hover: #ff4242;
@border-color-destructive--active: #b32424;
@border-color-destructive--focus: #d03;
@border-color-error: #d03;
@border-color-error--hover: #ff4242;
@border-color-error--active: #bf3c2c;
@border-color-warning: #edab00;
@border-color-success: #14866d;
@border-color-notice: #aaa;
@border-color-transparent: transparent;
@border-color-divider: #aaa;
@border-color-input--hover: #767676;
@border-color-input-binary: #767676;
@border-color-input-binary--hover: #447ff5;
@border-color-input-binary--active: #2a4b8d;
@border-color-input-binary--focus: #0645ad;
@border-color-input-binary--checked: #0645ad;
@border-base: @border-width-base @border-style-base @border-color-base;
@border-subtle: @border-width-base @border-style-base @border-color-subtle;
@border-progressive: @border-width-base @border-style-base @border-color-progressive;
@border-destructive: @border-width-base @border-style-base @border-color-destructive;
@border-radius-base: 0;
@border-radius-sharp: 0;
@border-radius-pill: 9999px;
@border-radius-circle: 50%;
// Inset & outset directionalities only used as general `box-shadow` token (see further below) constructors:
@box-shadow-inset-small: inset 0 0 0 1px;
@box-shadow-inset-medium: inset 0 0 0 2px;
@box-shadow-inset-medium-vertical: inset 0 -2px 0 0;
@box-shadow-outset-small: 0 0 0 1px;
@box-shadow-outset-small-bottom: 0 1px 0 0;
@box-shadow-outset-small-top: 0 -1px 0 0;
@box-shadow-outset-small-start: -1px 0 0 0;
@box-shadow-outset-medium-below: 0 4px 4px 0;
@box-shadow-outset-medium-around: 0 0 8px 0;
@box-shadow-outset-large-below: 0 4px 8px 0;
@box-shadow-outset-large-around: 0 0 16px 0;
@box-shadow-color-base: #000;
@box-shadow-color-progressive--active: #2a4b8d;
@box-shadow-color-progressive--focus: #0645ad;
@box-shadow-color-progressive-selected: #0645ad;
@box-shadow-color-progressive-selected--hover: #447ff5;
@box-shadow-color-progressive-selected--active: #2a4b8d;
@box-shadow-color-destructive--focus: #d03;
@box-shadow-color-inverted: #fff;
@box-shadow-color-alpha-base: rgba( 0, 0, 0, 0.1 );
@box-shadow-color-transparent: transparent;
@box-shadow-small: @box-shadow-outset-small @box-shadow-color-base;
@box-shadow-small-top: @box-shadow-outset-small-top @box-shadow-color-base;
@box-shadow-small-bottom: @box-shadow-outset-small-bottom @box-shadow-color-base;
@box-shadow-medium: @box-shadow-outset-medium-below @box-shadow-color-alpha-base, @box-shadow-outset-medium-around @box-shadow-color-alpha-base;
@box-shadow-large: @box-shadow-outset-large-below @box-shadow-color-alpha-base, @box-shadow-outset-large-around @box-shadow-color-alpha-base;
@outline-base--focus: 1px solid transparent;
@outline-color-progressive--focus: #0645ad; // Use in places where no more customized focus styles are provided, for example on generic `:focus`.
@font-family-base: sans-serif;
@font-family-system-sans: 'Arial', sans-serif;
@font-family-sans--fallback: sans-serif;
@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif;
@font-family-serif--fallback: serif;
@font-family-monospace: 'Courier New', monospace;
@font-family-monospace--fallback: monospace, monospace;
@font-family-heading-main: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif;
@font-weight-hairline: 100;
@font-weight-light: 300;
@font-weight-normal: 400;
@font-weight-semi-bold: 600;
@font-weight-bold: 700;
@line-height-xxx-small: 1.25;
@line-height-xx-small: 1.375;
@line-height-small: 1.6;
@line-height-medium: 1.6;
@text-decoration-none: none;
@text-decoration-line-through: line-through;
@text-decoration-underline: underline;
@text-overflow-clip: clip;
@text-overflow-ellipsis: ellipsis;
@tab-size-base: 4;
@transform-progress-indicator-spinner-start: rotate( -45deg );
@transform-progress-indicator-spinner-end: rotate( 315deg );
@transition-duration-base: 100ms;
@transition-duration-medium: 250ms;
@transition-timing-function-system: ease;
@transition-timing-function-user: ease-out;
@transition-property-base: background-color, color, border-color, box-shadow;
@transition-property-fade: opacity;
@transition-property-icon: color;
@transition-property-icon-css-only: background-color;
@transition-property-toggle-switch-grip: background-color, border-color, left;
@animation-delay-none: 0ms;
@animation-delay-medium: -150ms;
@animation-delay-slow: -333ms;
@animation-duration-fast: 1000ms;
@animation-duration-medium: 1500ms;
@animation-duration-slow: 2000ms;
@animation-timing-function-base: linear;
@animation-timing-function-bouncing: ease-in-out;
@animation-iteration-count-base: infinite;
@cursor-base: default;
@cursor-base--disabled: default;
@cursor-base--hover: pointer;
@cursor-grab: grab;
@cursor-grabbing: grabbing;
@cursor-help: help;
@cursor-move: move;
@cursor-not-allowed: not-allowed;
@cursor-resize-nesw: nesw-resize;
@cursor-resize-nwse: nwse-resize;
@cursor-text: text;
@cursor-zoom-in: zoom-in;
@cursor-zoom-out: zoom-out;
@unit-absolute: px;
@unit-relative: em;
// stylelint-disable-next-line function-url-quotes
@background-image-input-checkbox--checked: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="%23fff" d="M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z"/></svg>' );
@background-size-search-figure: cover;
@mix-blend-mode-base: normal;
@mix-blend-mode-blend: multiply;

// Deprecated Codex tokens
// Since v1.20.2
@size-tooltip: max-content;
@box-shadow-drop-small: 0 1px 1px rgba( 0, 0, 0, 0.2 );
@box-shadow-drop-medium: 0 2px 2px 0 rgba( 0, 0, 0, 0.2 );
@box-shadow-drop-xx-large: 0 20px 48px 0 rgba( 0, 0, 0, 0.2 );

// Neutral values for deprecated Codex tokens
@color-base--subtle: #767676; // @deprecated - do not use!
@font-family-sans: @font-family-sans--fallback;
@line-height-x-small: 1.42;