// DEPRECATED TOKENS
// Warning: the following token name is deprecated (Use `background-color-interactive` instead.)
@background-color-base--hover: #eaecf0;
// Warning: the following token name is deprecated (Use `background-color-progressive-subtle` instead.)
@background-color-base--active: #eaf3ff;
// Warning: the following token name is deprecated (Use `background-color-disabled-subtle` instead.)
@background-color-base--disabled: #eaecf0;
// Warning: the following token name is deprecated (Use `background-color-transparent` instead.)
@background-color-base--transparent: rgba( 255, 255, 255, 0 );
// Warning: the following token name is deprecated (Use `background-color-disabled` instead.)
@background-color-filled--disabled: #c8ccd1;
// Warning: the following token name is deprecated (Use `background-color-interactive-subtle` instead.)
@background-color-framed: #f8f9fa;
// Warning: the following token name is deprecated (Use `background-color-base` instead.)
@background-color-framed--hover: #fff;
// Warning: the following token name is deprecated (Use `background-color-interactive` with buttons' active state instead.)
@background-color-framed--active: #eaecf0;
// Warning: the following token name is deprecated (Use `background-color-error-subtle` instead.)
@background-color-error--framed: #fee7e6;
// Warning: the following token name is deprecated (Use `background-color-warning-subtle` instead.)
@background-color-warning--framed: #fef6e7;
// Warning: the following token name is deprecated (Use `background-color-success-subtle` instead.)
@background-color-success--framed: #d5fdf4;
// Warning: the following token name is deprecated (Use `background-color-notice-subtle` instead.)
@background-color-notice--framed: #eaecf0;
// Warning: the following token name is deprecated, use background-color-progressive instead. (Use `background-color-progressive` instead.)
@background-color-primary: #36c;
// Warning: the following token name is deprecated (No replacement for this token. Only used in non-Codex products and design decision is to need to rely on background for this state.)
@background-color-primary--hover: rgba( 51, 102, 204, 0.1 );
// Warning: the following token name is deprecated, use background-color-transparent instead. (Use `background-color-transparent` instead.)
@background-color-quiet: rgba( 255, 255, 255, 0 );
// Warning: the following token name is deprecated (Use `background-color-button-quiet--hover` instead.)
@background-color-quiet--hover: rgba( 0, 24, 73, 0.027 );
// Warning: the following token name is deprecated (Use `background-color-button-quiet--active` instead.)
@background-color-quiet--active: rgba( 0, 24, 73, 0.082 );
// Warning: the following token name is deprecated (Use `background-color-notice-subtle` instead.)
@background-color-message-notice: #eaecf0;
// Warning: the following token name is deprecated (Use `background-color-error-subtle` instead.)
@background-color-message-error: #fee7e6;
// Warning: the following token name is deprecated (Use `background-color-warning-subtle` instead.)
@background-color-message-warning: #fef6e7;
// Warning: the following token name is deprecated (Use `background-color-success-subtle` instead.)
@background-color-message-success: #d5fdf4;
// Warning: the following token name is deprecated (Former Tabs bar background color token. Use `background-color-interactive` instead.)
@background-color-tabs-framed: #eaecf0;
// Warning: the following token name is deprecated, use background-color-base instead. (Former Toolbar background color token. Use `background-color-base` instead.)
@background-color-toolbar: #fff;
// Warning: the following token name is deprecated (Former Toolbar tools background color token. Use `background-color-base` instead.)
@background-color-tool--hover: #eaecf0;
// Warning: the following token name is deprecated, use background-color-progressive instead. (Use `background-color-progressive` instead.)
@background-color-tool--active: #36c;
// Warning: the following token name is deprecated, use background-color-progressive--hover instead. (Use `background-color-progressive--hover` instead.)
@background-color-tool--active-hover: #447ff5;
// Warning: the following token name is deprecated (Use `color-emphasized` instead.)
@color-base--active: #000;
// Warning: the following token name is deprecated (Use `color-inverted` instead.)
@color-base--inverted: #fff;
// Warning: the following token name is deprecated (Use `color-emphasized` instead.)
@color-base--emphasized: #000;
// Warning: the following token name is deprecated (Use `color-subtle` instead. Note, that `color-subtle` is using `color.gray600` instead of `color.gray500` now.)
@color-base--subtle: #72777d;
// Warning: the following token name is deprecated (Use `color-disabled` instead.)
@color-base--disabled: #72777d;
// Warning: the following token name is deprecated (Use `color-inverted` instead.)
@color-filled--disabled: #fff;
// Warning: the following token name is deprecated (Use `color-subtle` instead.)
@color-accessory: #54595d;
// Warning: the following token name is deprecated, use color-progressive instead. (In use in many non-button applications as references in WikimediaUI Base. Note that we have to replace those before removing tokens group here.)
@color-primary: #36c;
// Warning: the following token name is deprecated, use color-progressive--hover instead.
@color-primary--hover: #447ff5;
// Warning: the following token name is deprecated, use color-progressive--active instead.
@color-primary--active: #2a4b8d;
// Warning: the following token name is deprecated, use color-progressive--focus instead.
@color-primary--focus: #36c;
// Warning: the following token name is deprecated, use opacity-icon-base--disabled instead. (Legacy opacity for icon disabled state in non-Codex products. Has only been used for icons despite the name. Replace by `opacity-icon-base--disabled`.)
@opacity-base--disabled: 0.51;
// Warning: the following token name is deprecated, use min-size-icon-medium instead.
@min-size-icon: 20px;
// Warning: the following token name is deprecated, use min-size-icon-x-small instead.
@min-size-indicator: 12px;
// Warning: the following token name is deprecated (Legacy size for use in non-Codex products. Only used in relative size in new Codex design token application.)
@size-base: 2em;
// Warning: the following token name is deprecated, use size-icon-medium instead.
@size-icon: 1.25em;
// Warning: the following token name is deprecated, use size-icon-x-small instead.
@size-indicator: 0.75em;
// Warning: the following token name is deprecated (Legacy breakpoint. Use `min-width`/`max-width` breakpoint token instead. A mobile device's screen width. Many older feature phones have screens smaller than this value.)
@width-breakpoint-mobile: 320px;
// Warning: the following token name is deprecated (Legacy breakpoint. Use `min-width`/`max-width` breakpoint token instead. A tablet device's screen width.)
@width-breakpoint-tablet: 720px;
// Warning: the following token name is deprecated (Legacy breakpoint. Use `min-width`/`max-width` breakpoint token instead. A desktop device's screen width.)
@width-breakpoint-desktop: 1000px;
// Warning: the following token name is deprecated (Legacy breakpoint. Use `min-width`/`max-width` breakpoint token instead. A wider desktop's screen width.)
@width-breakpoint-desktop-wide: 1200px;
// Warning: the following token name is deprecated (Legacy breakpoint. Use `min-width`/`max-width` breakpoint token instead. An extra wide desktop's screen width.)
@width-breakpoint-desktop-extrawide: 2000px;
// Warning: the following token name is deprecated (Legacy `border` token shorthand. Use sub-property tokens instead.)
@border-base: 1px solid #a2a9b1;
// Warning: the following token name is deprecated (Legacy `border` token shorthand. Use sub-property tokens instead.)
@border-error: 1px solid #d33;
// Warning: the following token name is deprecated (Legacy `border` token shorthand. Use sub-property tokens instead.)
@border-warning: 1px solid #edab00;
// Warning: the following token name is deprecated (Legacy `border` token shorthand. Use sub-property tokens instead.)
@border-success: 1px solid #14866d;
// Warning: the following token name is deprecated (Legacy `border` token shorthand. Use sub-property tokens instead.)
@border-notice: 1px solid #a2a9b1;
// Warning: the following token name is deprecated (Legacy `border-input-binary` for non-Codex products using WikimediaUI Base. Use sub-property tokens with `border-color-input-binary` instead.)
@border-input-binary: 1px solid #72777d;
// Warning: the following token name is deprecated (Use `border-color-base` instead.)
@border-color-base--hover: #a2a9b1;
// Warning: the following token name is deprecated (Use `border-color-interactive` instead.)
@border-color-base--active: #72777d;
// Warning: the following token name is deprecated (Use `border-color-progressive--focus` instead.)
@border-color-base--focus: #36c;
// Warning: the following token name is deprecated (Use `border-color-disabled` instead.)
@border-color-base--disabled: #c8ccd1;
// Warning: the following token name is deprecated (Use `border-color-inverted` instead.)
@border-color-filled--disabled: #fff;
// Warning: the following token name is deprecated (Use `border-color-base` instead.)
@border-color-neutral: #a2a9b1;
// Warning: the following token name is deprecated (Use `border-color-base` instead.)
@border-color-neutral--hover: #a2a9b1;
// Warning: the following token name is deprecated (Use `border-color-interactive` instead.)
@border-color-neutral--active: #72777d;
// Warning: the following token name is deprecated (Use `border-color-progressive--focus` instead.)
@border-color-neutral--focus: #36c;
// Warning: the following token name is deprecated, use color-inverted instead. (Use `border-color-inverted` instead.)
@border-color-inset--focus: #fff;
// Warning: the following token name is deprecated, use border-color-progressive instead.
@border-color-primary: #36c;
// Warning: the following token name is deprecated, use border-color-progressive--hover instead.
@border-color-primary--hover: #447ff5;
// Warning: the following token name is deprecated, use border-color-progressive--active instead.
@border-color-primary--active: #2a4b8d;
// Warning: the following token name is deprecated, use border-color-progressive--focus instead.
@border-color-primary--focus: #36c;
// Warning: the following token name is deprecated (Use `spacing-25 spacing-75` instead.)
@padding-base: 4px 12px;
// Warning: the following token name is deprecated (Use `spacing-75` instead.)
@padding-horizontal-base: 12px;
// Warning: the following token name is deprecated (Legacy padding for use in non-Codex products. Use `spacing-50` instead.)
@padding-horizontal-input-text: 8px;
// Warning: the following token name is deprecated (Use `spacing-25` instead.)
@padding-vertical-base: 4px;
// Warning: the following token name is deprecated (Legacy padding for use in non-Codex products.)
@padding-vertical-menu: calc( 4px + 1px ); // Note, that we need to rely on `calc()` for cross-stylesheet format output. Not perfectly aligned to current basic browser support.
// Warning: the following token name is deprecated (Legacy padding for use in non-Codex products. Use `spacing-25 spacing-50` instead.)
@padding-input-text: 4px 8px;
// Warning: the following token name is deprecated (Legacy `box-shadow` token shorthand. Apply single category tokens instead.)
@box-shadow-progressive--active: inset 0 0 0 1px #2a4b8d;
// Warning: the following token name is deprecated (Legacy `box-shadow` token shorthand. Apply single category tokens instead.)
@box-shadow-progressive--focus: inset 0 0 0 1px #36c;
// Warning: the following token name is deprecated (Legacy `box-shadow` token shorthand. Apply single category tokens instead.)
@box-shadow-destructive--focus: inset 0 0 0 1px #d33;
// Warning: the following token name is deprecated (Legacy `box-shadow` token shorthand. Apply single category tokens instead.)
@box-shadow-inverted: inset 0 0 0 2px #fff;
// Warning: the following token name is deprecated (Legacy `box-shadow` token shorthand. Apply single category tokens instead.)
@box-shadow-progressive-filled--focus: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
// Warning: the following token name is deprecated (Legacy `box-shadow` token shorthand. Apply single category tokens instead.)
@box-shadow-destructive-filled--focus: inset 0 0 0 1px #d33, inset 0 0 0 2px #fff;
// Warning: the following token name is deprecated (Legacy value. Only used in non-Codex products.)
@box-shadow-base: inset 0 0 0 1px transparent;
// Warning: the following token name is deprecated (Legacy value. Only used in non-Codex products.)
@box-shadow-base--active: inset 0 0 0 1px #2a4b8d;
// Warning: the following token name is deprecated (Legacy value. Only used in non-Codex products.)
@box-shadow-base--focus: inset 0 0 0 1px #36c;
// Warning: the following token name is deprecated (Legacy value. Only used in non-Codex products.)
@box-shadow-filled--disabled: inset 0 0 0 1px #fff;
// Warning: the following token name is deprecated (Legacy value. Only used in non-Codex products.)
@box-shadow-primary--focus: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
// Warning: the following token name is deprecated, use box-shadow-drop-small instead.
@box-shadow-card: 0 1px 1px rgba( 0, 0, 0, 0.2 );
// Warning: the following token name is deprecated, use box-shadow-drop-medium instead.
@box-shadow-dialog: 0 2px 2px 0 rgba( 0, 0, 0, 0.2 );
// Warning: the following token name is deprecated, use box-shadow-drop-medium instead.
@box-shadow-menu: 0 2px 2px 0 rgba( 0, 0, 0, 0.2 );
// Warning: the following token name is deprecated, use box-shadow-drop-small instead.
@box-shadow-progress-bar: 0 1px 1px rgba( 0, 0, 0, 0.2 );
// Warning: the following token name is deprecated (Use `font-family-sans--fallback` instead. See T247166.)
@font-family-sans: 'Helvetica Neue', 'Helvetica', 'Liberation Sans', 'Arial', sans-serif;
// Warning: the following token name is deprecated (Legacy line-height. Use `line-height-small` instead.)
@line-height-x-small: 1.4285714;
// Warning: the following token name is deprecated (Legacy `line-height` for use in non-Codex products. Use `line-height-medium` instead.)
@line-height-base: 1.6;
// Warning: the following token name is deprecated (Legacy `line-height` for headings in non-Codex products. Use `line-height-xx-small` instead.)
@line-height-heading: 1.3;
// Warning: the following token name is deprecated (Legacy `transition` for icon states in non-Codex products.)
@transition-base: 100ms;