414 lines
No EOL
24 KiB
Text
414 lines
No EOL
24 KiB
Text
|
||
// Do not edit directly
|
||
// Generated on Tue, 06 Dec 2022 18:47:38 GMT
|
||
|
||
@background-color-base: #fff;
|
||
@background-color-interactive: #eaecf0;
|
||
@background-color-interactive-subtle: #f8f9fa;
|
||
@background-color-disabled: #c8ccd1; // Components like Buttons, Checkboxes, Radios, ProgressBars….
|
||
@background-color-disabled-subtle: #eaecf0; // Components like TextInputs, Selects….
|
||
@background-color-progressive: #36c;
|
||
@background-color-progressive--hover: #447ff5;
|
||
@background-color-progressive--active: #2a4b8d;
|
||
@background-color-progressive--focus: #36c;
|
||
@background-color-progressive-subtle: #eaf3ff;
|
||
@background-color-destructive: #d33;
|
||
@background-color-destructive--hover: #ff4242;
|
||
@background-color-destructive--active: #b32424;
|
||
@background-color-destructive--focus: #d33;
|
||
@background-color-destructive-subtle: #fee7e6;
|
||
@background-color-error-subtle: #fee7e6;
|
||
@background-color-warning-subtle: #fef6e7;
|
||
@background-color-success-subtle: #d5fdf4;
|
||
@background-color-notice-subtle: #eaecf0;
|
||
@background-color-backdrop-light: rgba( 255, 255, 255, 0.65 ); // Backdrop is the term used by CSS Fullscreen API and is used to dim the background when a modal Dialog is open. Also known as overlay mask.
|
||
@background-color-backdrop-dark: rgba( 0, 0, 0, 0.65 );
|
||
@background-color-transparent: rgba( 255, 255, 255, 0 );
|
||
@background-color-button-quiet--hover: rgba( 0, 24, 73, calc( 7 / 255 ) );
|
||
@background-color-button-quiet--active: rgba( 0, 24, 73, calc( 21 / 255 ) );
|
||
@background-color-input-binary--checked: #36c;
|
||
@color-base: #202122;
|
||
@color-base--hover: #404244; // Aimed to be replaced by `color.gray600` in future.
|
||
@color-emphasized: #000;
|
||
@color-subtle: #54595d;
|
||
@color-placeholder: #72777d;
|
||
@color-disabled: #72777d;
|
||
@color-inverted: #fff;
|
||
@color-progressive: #36c; // 'Progressive' Color and states
|
||
@color-progressive--hover: #447ff5;
|
||
@color-progressive--active: #2a4b8d;
|
||
@color-progressive--focus: #36c;
|
||
@color-destructive: #d33; // 'Destructive' Color and states
|
||
@color-destructive--hover: #ff4242;
|
||
@color-destructive--active: #b32424;
|
||
@color-destructive--focus: #d33;
|
||
@color-visited: #6b4ba1; // 'Visited' color. In combination with progressive. Used for default links.
|
||
@color-error: #d33;
|
||
@color-warning: #edab00; // Note, this is only meant for warning icon for contrast reasons.
|
||
@color-success: #14866d; // Note, this needs to use a tone darker than Red and Yellow for contrast reasons with background White.
|
||
@color-notice: #202122;
|
||
@color-link-red: #d33; // Red ('new') Link color and states
|
||
@color-link-red--hover: #ff4242;
|
||
@color-link-red--active: #b32424;
|
||
@color-link-red--focus: #d33;
|
||
@color-link-red--visited: #a55858;
|
||
@opacity-base: 1;
|
||
@opacity-medium: 0.65;
|
||
@opacity-low: 0.30;
|
||
@opacity-transparent: 0;
|
||
@z-index-base: 0;
|
||
@z-index-overlay: 101;
|
||
@box-sizing-base: border-box;
|
||
@min-size-base: 32px; // TODO: Deprecate key and change to `min-size-component`?
|
||
@min-size-icon: 20px;
|
||
@size-0: 0;
|
||
@size-6: 1px;
|
||
@size-12: 2px;
|
||
@size-25: 4px;
|
||
@size-50: 8px;
|
||
@size-75: 12px;
|
||
@size-100: 16px;
|
||
@size-125: 20px;
|
||
@size-150: 24px;
|
||
@size-200: 32px;
|
||
@size-250: 40px;
|
||
@size-275: 44px;
|
||
@size-300: 48px;
|
||
@size-400: 64px;
|
||
@size-800: 128px;
|
||
@size-1600: 256px;
|
||
@size-2400: 384px;
|
||
@size-2800: 448px;
|
||
@size-3200: 512px;
|
||
@size-5600: 896px;
|
||
@size-absolute-1: 1px;
|
||
@size-absolute-9999: 9999px;
|
||
@size-third: 33.33%;
|
||
@size-half: 50%;
|
||
@size-full: 100%;
|
||
@size-double: 200%;
|
||
@size-viewport-width-full: 100vw;
|
||
@size-viewport-height-full: 100vh;
|
||
@size-icon: 20px; // TODO: This has to be a relative value, for accessibility reasons.
|
||
@size-indicator: 12px; // TODO: This has to be a relative value, for accessibility reasons.
|
||
@min-width-breakpoint-mobile: 320px; // A mobile device's minimum available screen width. Many older feature phones have screens smaller than this value.
|
||
@min-width-breakpoint-tablet: 640px; // A tablet device's minimum available screen width. Note: the size chosen is eager to be re-evaluated with Web team and Product Analytics.
|
||
@min-width-breakpoint-desktop: 1120px; // A desktop device's minimum available screen width.
|
||
@min-width-breakpoint-desktop-wide: 1680px; // A wider desktop's minimum available screen width.
|
||
@max-width-base: none;
|
||
@max-width-breakpoint-mobile: calc( 640px - 1px ); // A mobile device's maximum available screen width. Many older feature phones have screens smaller than this value.
|
||
@max-width-breakpoint-tablet: calc( 1120px - 1px ); // A tablet device's maximum available screen width. Note, the size chosen is eager to be re-evaluated with Web team and Product Analytics.
|
||
@max-width-breakpoint-desktop: calc( 1680px - 1px ); // A desktop device's maximum available screen width.
|
||
@max-width-button: 448px; // Note, that this is a slight amendment from WikimediaUI Base from `28.75em` = `460px` to `448px` – `dimension.2800`
|
||
@position-offset-border-width-base: -1px;
|
||
@position-offset-input-radio--focus: -4px; // TODO: This has to be a relative value, for design reasons.
|
||
@spacing-0: 0;
|
||
@spacing-12: 2px;
|
||
@spacing-25: 4px;
|
||
@spacing-30: 5px; // This token is an exception to the scale. Used as vertical `padding` in inputs and controls to achieve the default 32px component height.
|
||
@spacing-35: 6px; // This token is an exception to the scale. Used as `padding` of the ToggleSwitch component.
|
||
@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%; // From here on, spacing tokens which are used for positioning values.
|
||
@spacing-full: 100%;
|
||
@border-width-base: 1px;
|
||
@border-width-thick: 2px;
|
||
@border-style-base: solid;
|
||
@border-style-dashed: dashed;
|
||
@border-color-base: #a2a9b1;
|
||
@border-color-interactive: #72777d;
|
||
@border-color-subtle: #c8ccd1;
|
||
@border-color-disabled: #c8ccd1;
|
||
@border-color-inverted: #fff;
|
||
@border-color-progressive: #36c;
|
||
@border-color-progressive--hover: #447ff5;
|
||
@border-color-progressive--active: #2a4b8d;
|
||
@border-color-progressive--focus: #36c;
|
||
@border-color-destructive: #d33;
|
||
@border-color-destructive--hover: #ff4242;
|
||
@border-color-destructive--active: #b32424;
|
||
@border-color-destructive--focus: #d33;
|
||
@border-color-error: #d33;
|
||
@border-color-warning: #edab00;
|
||
@border-color-success: #14866d;
|
||
@border-color-notice: #a2a9b1;
|
||
@border-color-transparent: transparent;
|
||
@border-color-divider: #a2a9b1;
|
||
@border-color-input--hover: #72777d;
|
||
@border-color-input-binary: #72777d;
|
||
@border-color-input-binary--hover: #447ff5;
|
||
@border-color-input-binary--active: #2a4b8d;
|
||
@border-color-input-binary--focus: #36c;
|
||
@border-color-input-binary--checked: #36c;
|
||
@border-radius-base: 2px;
|
||
@border-radius-sharp: 0;
|
||
@border-radius-pill: 9999px;
|
||
@border-radius-circle: 100%;
|
||
@box-shadow-drop-small: 0 1px 1px rgba( 0, 0, 0, 0.2 ); // This features color as part of the theme token value.
|
||
@box-shadow-drop-medium: 0 2px 2px 0 rgba( 0, 0, 0, 0.2 ); // This features color as part of the theme token value.
|
||
@box-shadow-drop-extra-extra-large: 0 20px 48px 0 rgba( 0, 0, 0, 0.2 ); // This features color as part of the theme token value.
|
||
@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-top: 0 -1px 0 0;
|
||
@box-shadow-outset-small-start: -1px 0 0 0;
|
||
@box-shadow-color-base: #000;
|
||
@box-shadow-color-progressive--active: #2a4b8d;
|
||
@box-shadow-color-progressive--focus: #36c;
|
||
@box-shadow-color-progressive-selected: #36c;
|
||
@box-shadow-color-progressive-selected--hover: #447ff5;
|
||
@box-shadow-color-progressive-selected--active: #2a4b8d;
|
||
@box-shadow-color-destructive--focus: #d33;
|
||
@box-shadow-color-inverted: #fff;
|
||
@box-shadow-color-transparent: transparent;
|
||
@outline-base--focus: 1px solid transparent; // Enable Windows high contrast mode on certain widgets, that have default outlines overridden.
|
||
@font-family-base: sans-serif; // Reference Vector's default fallback sans instead of the deprecated value `font-family-sans` in WikimediaUI Base.
|
||
@font-family-system-sans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Inter', 'Helvetica', '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: 'Menlo', 'Consolas', 'Liberation Mono', 'Fira Code', 'Courier New', monospace;
|
||
@font-family-monospace--fallback: monospace, monospace;
|
||
@font-family-heading-main: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif; // Legacy value from WikimediaUI Base. Use for first heading special treatment.
|
||
@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; // `x` stands for extra. In this case extra-extra-extra small.
|
||
@line-height-xx-small: 1.375;
|
||
@line-height-small: 1.5714285;
|
||
@line-height-medium: 1.6;
|
||
@text-decoration-none: none;
|
||
@text-decoration-line-through: line-through;
|
||
@text-decoration-underline: underline;
|
||
@tab-size-base: 4;
|
||
@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-toggle-switch-grip: background-color, border-color, left;
|
||
@animation-delay-none: 0ms;
|
||
@animation-delay-medium: -160ms;
|
||
@animation-delay-slow: -330ms;
|
||
@animation-duration-medium: 1600ms;
|
||
@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;
|
||
|
||
// 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, calc( 7 / 255 ) );
|
||
// Warning: the following token name is deprecated (Use `background-color-button-quiet--active` instead.)
|
||
@background-color-quiet--active: rgba( 0, 24, 73, calc( 21 / 255 ) );
|
||
// 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 (Legacy opacity for icon states in non-Codex products.)
|
||
@opacity-icon-base: 0.87;
|
||
// Warning: the following token name is deprecated (Legacy opacity for icon states in non-Codex products.)
|
||
@opacity-icon-base--hover: 0.74;
|
||
// Warning: the following token name is deprecated (Legacy opacity for icon states in non-Codex products.)
|
||
@opacity-icon-base--selected: 1;
|
||
// Warning: the following token name is deprecated (Legacy opacity for icon states in non-Codex products. Has only been used for icons despite the name.)
|
||
@opacity-base--disabled: 0.51;
|
||
// Warning: the following token name is deprecated (Legacy opacity for icon states in non-Codex products.)
|
||
@opacity-icon-accessory: 0.67;
|
||
// 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: 32px;
|
||
// 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; |