@import 'mediawiki.skin.variables.less';

/**
 * Deprecated variables
 *
 * All variables in this file and the importing of it are deprecated since MediaWiki v1.41.0.
 * They remain here for one version in order to get skins prepared
 * for the new skin variable architecture.
 *
 * Use Codex Design tokens provided by 'mediawiki.skin.variables.less' instead.
 * See https://www.mediawiki.org/wiki/Codex#Using_Codex_design_tokens and
 * https://doc.wikimedia.org/codex/latest/design-tokens/overview.html for more information
 * on design tokens.
 */

// Colors for use in mediawiki.ui

// All `@colorGray*` variables are only for reference.
// They will be replaced by WikimediaUI Base variables.
// Use semantic color names such as `@color-base` below.
// Darkest color.
// Used for headings and emphasized text. Use `@color-emphasized` instead.
@colorGray1: #000;
// Used as normal, running text color. Use `@color-base` instead.
@colorGray2: #202122;
// Used for hover state in interactive elements. Use `@color-base-hover` instead.
@colorGray4: #404244;
// Used for subtle, secondary text. Use `@color-subtle` instead.
@colorGray5: #54595d;
// Used for disabled text. Use `@color-disabled` instead.
@colorGray7: #72777d;
// Used for borders of interactive elements. Use `@border-color-base` instead.
@colorGray10: #a2a9b1;
// Used for background of disabled elements and subtle borders of interactive elements.
// Use `@background-color-disabled` and `@border-color-subtle` instead.
@colorGray12: #c8ccd1;
// Used for backgrounds of interactive and subtle disabled static elements.
// Use `@background-color-interactive`/@background-color-disabled-subtle instead.
@colorGray14: #eaecf0;
// Lightest gray color.
// Used for subtle backgrounds of interactive elements.
// Use `@background-color-interactive-subtle` instead.
@colorGray15: #f8f9fa;

// Colors
@background-color-quiet--hover: rgba( 0, 24, 73, 7/255 ); // = `@wmui-color-base90` on white.
@background-color-quiet--active: rgba( 0, 36, 73, 21/255 ); // = `@wmui-color-base80` on white.
@background-color-primary--hover: fade( #347bff, 20% );
@background-color-destructive--hover: fade( #d11d13, 20% );

// Messages
// Messages: Warning
@color-warning: @color-base--emphasized;

// UI colors
@background-color-input-binary--active: @color-primary--active;
@background-color-input-binary--checked: @color-primary;

// Border
@border-base: @border-width-base @border-style-base @border-color-base;

// Border colors
@border-color-base: #a2a9b1;
@border-color-base--focus: @color-primary--focus;
@border-color-input-binary--active: @color-primary--active;
@border-color-input-binary--checked: @color-primary;
@border-color-destructive: @color-destructive;
@border-color-destructive--focus: @border-color-destructive;

// Checked radio input `border-width`, in pixel as both the background and the dot are signals.
// Equal to OOUI.
@border-width-radio--checked: 6px;

// Box shadows
@box-shadow-base: inset 0 0 0 1px transparent;
@box-shadow-base--focus: inset 0 0 0 1px @color-primary--focus;
@box-shadow-primary--focus: inset 0 0 0 1px @color-primary--focus, inset 0 0 0 2px @color-base--inverted;
@box-shadow-input-binary--active: inset 0 0 0 1px @color-primary--active;
@box-shadow-destructive--focus: inset 0 0 0 1px @color-destructive, inset 0 0 0 2px @color-base--inverted;

// Icon related variables
@min-size-icon: 20px;
@size-icon: 1.5em;
@width-icon-gutter: 1em;

// Form input sizes, equal to OOUI at 14px base font-size
@size-input-binary: 1.5625em;

// Colors
@color-base: @colorGray2;
@color-base--hover: @colorGray4;
// Red50; for contextual use of a negative action of high severity
@color-destructive: #d33;
@color-destructive--hover: #ff4242;
@color-destructive--active: #b32424;
@color-destructive--focus: @color-destructive;

// Other UI colors
@color-placeholder: @colorGray7;

// Messages
// Messages: Error
// Use only for inlined messages, boxed messages require `@color-base--emphasized` for
// minimum contrast ratio.
@color-error: #d33;
@border-color-error: #b32424;
// Messages: Warning
@color-warning: @color-base--emphasized;
@border-color-warning: #ac6600;
// Messages: Success
@color-success: #14866d;
@border-color-success: #096450;
// Messages: Notice
@border-color-notice: #54595d;

// == All following variables carry same value, but a different key,
// and are replaced by Codex design tokens via 'mediawiki.skin.variables.less'.

// Colors
@color-base--active: @colorGray1; // To be replaced by `@color-emphasized`.
@color-base--emphasized: @colorGray1; // To be replaced by `@color-emphasized`.
@color-base--inverted: #fff; // To be replaced by `@color-inverted`.
@color-base--subtle: @colorGray7;
@color-base--disabled: @colorGray7; // To be replaced by `@color-disabled`.
// Accent50 Foundation Blue; for contextual use of a continuing action.
@color-primary: #36c; // To be replaced by `@color-progressive`.
@color-primary--hover: #447ff5; // To be replaced by `@color-progressive--hover`.
@color-primary--active: #2a4b8d; // To be replaced by `@color-progressive--active`.
@color-primary--focus: @color-primary; // To be replaced by `@color-progressive--focus`.
// Messages
// Messages: Error
@background-color-error: #fee7e6; // To be replaced by `@background-color-error-subtle`.
// Messages: Warning
@background-color-warning: #fef6e7; // To be replaced by `@background-color-warning-subtle`.
// Messages: Success
@background-color-success: #d5fdf4; // To be replaced by `@background-color-success-subtle`.

// Border colors
@border-color-base: #a2a9b1;