diff options
author | Roan Kattouw <roan.kattouw@gmail.com> | 2024-04-30 16:59:52 -0700 |
---|---|---|
committer | Jdlrobson <jrobson@wikimedia.org> | 2024-05-01 00:28:52 +0000 |
commit | 0d0fc5292ab5e836041d3f2130d54877adac1a19 (patch) | |
tree | d1b797fc1b78a35330981ef62b8775a8b9a2b290 /resources/lib/codex-design-tokens | |
parent | 67a28b0a4f0076ec662a1ab61de1c20144f05288 (diff) | |
download | mediawikicore-0d0fc5292ab5e836041d3f2130d54877adac1a19.tar.gz mediawikicore-0d0fc5292ab5e836041d3f2130d54877adac1a19.zip |
Delete holdover files from the previous Codex versions
These were not yet deleted by I1f54bf4f144eaec6ed317c04bd0c851c2f01b42c
to allow MinervaNeue to be updated first.
Bug: T363712
Depends-On: I1a3c5194013f8f4523098458db45ce867fdfd8c9
Change-Id: Ic6aa3aea7767f1d7f28dfd8efbc81bf8b30d1dab
Diffstat (limited to 'resources/lib/codex-design-tokens')
3 files changed, 0 insertions, 484 deletions
diff --git a/resources/lib/codex-design-tokens/theme-codex-wikimedia-experimental.css b/resources/lib/codex-design-tokens/theme-codex-wikimedia-experimental.css deleted file mode 100644 index 47a9ac13b03d..000000000000 --- a/resources/lib/codex-design-tokens/theme-codex-wikimedia-experimental.css +++ /dev/null @@ -1,119 +0,0 @@ -/** - * Codex Design Tokens v1.4.0 - * Design System for Wikimedia - * See https://doc.wikimedia.org/codex/latest/design-tokens/overview.html - * - * This is an experimental stylesheet not intended for production use. - */ - -:root { - --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-inverted-fixed: #fff; /* The same as color-inverted in light mode, but does not change in dark mode. Use this for things that should be white in both modes. */ - --color-progressive: #36c; /* 'Progressive' Color and states */ - --color-progressive--hover: #447ff5; - --color-progressive--active: #2a4b8d; - --color-progressive--focus: #36c; - --color-destructive: #d73333; /* 'Destructive' Color and states */ - --color-destructive--hover: #ff4242; - --color-destructive--active: #b32424; - --color-destructive--focus: #36c; - --color-visited: #6b4ba1; /* 'Visited' color. In combination with progressive. Used for default links. */ - --color-error: #d73333; - --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-base--subtle: #72777d; - --color-link-red: #d73333; /* Red ('new') Link color and states */ - --color-link-red--hover: #ff4242; - --color-link-red--active: #b32424; - --color-link-red--focus: #36c; - --color-link-red--visited: #a55858; - --filter-invert-icon: 0; - --filter-invert-primary-button-icon: 1; - --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: #36c; - --box-shadow-color-inverted: #fff; - --box-shadow-color-transparent: transparent; - --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: #d73333; - --background-color-destructive--hover: #ff4242; - --background-color-destructive--active: #b32424; - --background-color-destructive--focus: #36c; - --background-color-destructive-subtle: #fee7e6; - --background-color-error: #d73333; - --background-color-error--hover: #ff4242; - --background-color-error--active: #b32424; - --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-base: #fff; /* Background Colors for static elements (for page layout, sections, etc.) from here on. */ - --background-color-base-fixed: #fff; /* The same as background-color-base in light mode, but does not change in dark mode. Use this for things that should be white in both modes. */ - --background-color-neutral: #eaecf0; - --background-color-neutral-subtle: #f8f9fa; - --background-color-transparent: transparent; - --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: #36c; - --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 ); - --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; - --border-color-base: #a2a9b1; - --border-color-interactive: #72777d; - --border-color-disabled: #c8ccd1; - --border-color-subtle: #c8ccd1; - --border-color-muted: #eaecf0; - --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: #d73333; - --border-color-destructive--hover: #ff4242; - --border-color-destructive--active: #b32424; - --border-color-destructive--focus: #36c; - --border-color-error: #b32424; - --border-color-error--hover: #ff4242; - --border-color-warning: #a66200; - --border-color-success: #096450; - --border-color-notice: #54595d; - --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-base: 1px solid #a2a9b1; - --border-subtle: 1px solid #c8ccd1; - --border-progressive: 1px solid #36c; - --border-destructive: 1px solid #d73333; - --outline-color-progressive--focus: #36c; /* Use in places where no more customized focus styles are provided, for example on generic `:focus`. */ -} diff --git a/resources/lib/codex-design-tokens/theme-codex-wikimedia-experimental.less b/resources/lib/codex-design-tokens/theme-codex-wikimedia-experimental.less deleted file mode 100644 index 93df3530aa3b..000000000000 --- a/resources/lib/codex-design-tokens/theme-codex-wikimedia-experimental.less +++ /dev/null @@ -1,307 +0,0 @@ -/** - * Codex Design Tokens v1.4.0 - * Design System for Wikimedia - * See https://doc.wikimedia.org/codex/latest/design-tokens/overview.html - * - * This is an experimental stylesheet not intended for production use. - */ - -@color-base: var( --color-base ); -@color-base--hover: var( --color-base--hover ); // Aimed to be replaced by `color.gray600` in future. -@color-emphasized: var( --color-emphasized ); -@color-subtle: var( --color-subtle ); -@color-placeholder: var( --color-placeholder ); -@color-disabled: var( --color-disabled ); -@color-inverted: var( --color-inverted ); -@color-inverted-fixed: var( --color-inverted-fixed ); // The same as color-inverted in light mode, but does not change in dark mode. Use this for things that should be white in both modes. -@color-progressive: var( --color-progressive ); // 'Progressive' Color and states -@color-progressive--hover: var( --color-progressive--hover ); -@color-progressive--active: var( --color-progressive--active ); -@color-progressive--focus: var( --color-progressive--focus ); -@color-destructive: var( --color-destructive ); // 'Destructive' Color and states -@color-destructive--hover: var( --color-destructive--hover ); -@color-destructive--active: var( --color-destructive--active ); -@color-destructive--focus: var( --color-destructive--focus ); -@color-visited: var( --color-visited ); // 'Visited' color. In combination with progressive. Used for default links. -@color-error: var( --color-error ); -@color-warning: var( --color-warning ); // Note, this is only meant for warning icon for contrast reasons. -@color-success: var( --color-success ); // Note, this needs to use a tone darker than Red and Yellow for contrast reasons with background White. -@color-notice: var( --color-notice ); -@color-base--subtle: var( --color-base--subtle ); -@color-link-red: var( --color-link-red ); // Red ('new') Link color and states -@color-link-red--hover: var( --color-link-red--hover ); -@color-link-red--active: var( --color-link-red--active ); -@color-link-red--focus: var( --color-link-red--focus ); -@color-link-red--visited: var( --color-link-red--visited ); -@opacity-base: 1; -@opacity-medium: 0.65; -@opacity-low: 0.3; -@opacity-transparent: 0; -@filter-invert-icon: var( --filter-invert-icon ); -@filter-invert-primary-button-icon: var( --filter-invert-primary-button-icon ); -@background-position-base: center; -@background-size-search-figure: cover; // Use in TypeaheadSearch and Thumbnail components for the thumb container. -@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-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; -@size-0: 0; -@size-6: 0.0625rem; -@size-12: 0.125rem; -@size-25: 0.25rem; -@size-50: 0.5rem; -@size-75: 0.75rem; -@size-100: 1rem; -@size-125: 1.25rem; -@size-150: 1.5rem; -@size-200: 2rem; -@size-250: 2.5rem; -@size-275: 2.75rem; -@size-300: 3rem; -@size-400: 4rem; -@size-800: 8rem; -@size-1600: 16rem; -@size-2400: 24rem; -@size-2800: 28rem; -@size-3200: 32rem; -@size-4000: 40rem; -@size-5600: 56rem; -@size-viewport-width-full: 100vw; -@size-viewport-height-full: 100vh; -@size-absolute-1: 1px; -@size-absolute-9999: 9999px; -@size-third: 33.33%; -@size-half: 50%; -@size-full: 100%; -@size-double: 200%; -@size-search-figure: 2.5rem; // Alias for use in TypeaheadSearch and Thumbnail components for the same purpose and for better code readability. -@size-icon-x-small: 0.75rem; -@size-icon-small: 1rem; -@size-icon-medium: 1.25rem; -@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: 28rem; // Note, that this is a slight amendment from WikimediaUI Base from `28.75em` = `460px` to `448px` – `dimension.2800` -@border-style-base: solid; -@border-style-dashed: dashed; -@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-xx-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: var( --box-shadow-color-base ); -@box-shadow-color-progressive--active: var( --box-shadow-color-progressive--active ); -@box-shadow-color-progressive--focus: var( --box-shadow-color-progressive--focus ); -@box-shadow-color-progressive-selected: var( --box-shadow-color-progressive-selected ); -@box-shadow-color-progressive-selected--hover: var( --box-shadow-color-progressive-selected--hover ); -@box-shadow-color-progressive-selected--active: var( --box-shadow-color-progressive-selected--active ); -@box-shadow-color-destructive--focus: var( --box-shadow-color-destructive--focus ); -@box-shadow-color-inverted: var( --box-shadow-color-inverted ); -@box-shadow-color-transparent: var( --box-shadow-color-transparent ); -@font-family-sans: 'Helvetica Neue', 'Helvetica', 'Liberation Sans', 'Arial', sans-serif; -@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif; -@font-family-monospace: 'Menlo', 'Consolas', 'Liberation Mono', 'Fira Code', 'Courier New', monospace; -@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--fallback: serif; -@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-size-x-small: 0.75rem; // `x` stands for extra. In this case extra small. -@font-size-small: 0.875rem; -@font-size-medium: 1rem; -@font-size-large: 1.125rem; -@font-size-x-large: 1.25rem; -@font-size-xx-large: 1.5rem; -@font-size-xxx-large: 1.75rem; -@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-x-small: 1.4285714; -@line-height-small: 1.5714285; -@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; -@transition-duration-base: 100ms; -@transition-duration-medium: 250ms; -@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, transform; -@transition-timing-function-system: ease; -@transition-timing-function-user: ease-out; -@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; -@accent-color-base: #36c; -@background-color-interactive: var( --background-color-interactive ); -@background-color-interactive-subtle: var( --background-color-interactive-subtle ); -@background-color-disabled: var( --background-color-disabled ); // Components like Buttons, Checkboxes, Radios, ProgressBars…. -@background-color-disabled-subtle: var( --background-color-disabled-subtle ); // Components like TextInputs, Selects…. -@background-color-progressive: var( --background-color-progressive ); -@background-color-progressive--hover: var( --background-color-progressive--hover ); -@background-color-progressive--active: var( --background-color-progressive--active ); -@background-color-progressive--focus: var( --background-color-progressive--focus ); -@background-color-progressive-subtle: var( --background-color-progressive-subtle ); -@background-color-destructive: var( --background-color-destructive ); -@background-color-destructive--hover: var( --background-color-destructive--hover ); -@background-color-destructive--active: var( --background-color-destructive--active ); -@background-color-destructive--focus: var( --background-color-destructive--focus ); -@background-color-destructive-subtle: var( --background-color-destructive-subtle ); -@background-color-error: var( --background-color-error ); -@background-color-error--hover: var( --background-color-error--hover ); -@background-color-error--active: var( --background-color-error--active ); -@background-color-error-subtle: var( --background-color-error-subtle ); -@background-color-warning-subtle: var( --background-color-warning-subtle ); -@background-color-success-subtle: var( --background-color-success-subtle ); -@background-color-notice-subtle: var( --background-color-notice-subtle ); -@background-color-backdrop-light: var( --background-color-backdrop-light ); // 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: var( --background-color-backdrop-dark ); -@background-color-base: var( --background-color-base ); // Background Colors for static elements (for page layout, sections, etc.) from here on. -@background-color-base-fixed: var( --background-color-base-fixed ); // The same as background-color-base in light mode, but does not change in dark mode. Use this for things that should be white in both modes. -@background-color-neutral: var( --background-color-neutral ); -@background-color-neutral-subtle: var( --background-color-neutral-subtle ); -@background-color-transparent: var( --background-color-transparent ); -@background-color-button-quiet--hover: var( --background-color-button-quiet--hover ); -@background-color-button-quiet--active: var( --background-color-button-quiet--active ); -@background-color-input-binary--checked: var( --background-color-input-binary--checked ); -@background-color-tab-list-item-framed--hover: var( --background-color-tab-list-item-framed--hover ); -@background-color-tab-list-item-framed--active: var( --background-color-tab-list-item-framed--active ); -@opacity-icon-base: var( --opacity-icon-base ); -@opacity-icon-base--hover: var( --opacity-icon-base--hover ); -@opacity-icon-base--selected: var( --opacity-icon-base--selected ); -@opacity-icon-base--disabled: var( --opacity-icon-base--disabled ); -@opacity-icon-placeholder: var( --opacity-icon-placeholder ); -@opacity-icon-subtle: var( --opacity-icon-subtle ); -@min-size-interactive-pointer: 32px; -@min-size-interactive-touch: 44px; -@min-size-search-figure: 40px; // Alias for use in TypeaheadSearch and Thumbnail components for the same purpose and for better code readability. -@min-size-icon-x-small: 12px; -@min-size-icon-small: 16px; -@min-size-icon-medium: 20px; -@min-size-input-binary: 20px; -@min-size-toggle-switch-grip: 20px; -@min-width-medium: 256px; -@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. -@min-width-toggle-switch: 48px; -@width-breakpoint-mobile: 320px; -@width-breakpoint-tablet: 720px; -@width-breakpoint-desktop: 1000px; -@position-offset-border-width-base: -1px; -@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%; -@spacing-horizontal-button: 12px - 1px; // Padding should equal 12px of spacing minus the width of the border -@spacing-horizontal-button-icon-only: 6px - 1px; // Padding should equal 6px of spacing minus the width of the border -@spacing-horizontal-button-large: 16px - 1px; // Padding should equal 16px of spacing minus the width of the border -@spacing-horizontal-input-text-two-end-icons: calc( 8px * 2 + 1rem ); // Rely on `calc()` to make token output usable in all formats. When there are two end icons, (i.e. a clear icon and an end icon), we need to double the horizontal padding and account for the size of the extra icon. This token can be used to calculate the horizontal position of the clear icon and the padding-end of the text input. -@spacing-start-typeahead-search-figure: 12px; // The amount of space between the TypeaheadSearch figure's parent component and the TypeaheadSearch figure (input icon container, search result thumbnail, and footer icon container). We want this space to be uniform so that the figures vertically line up nicely. We use the same horizontal padding as the MenuItem. -@spacing-start-typeahead-search-icon: calc( 12px + ( 40px - 20px ) / 2 ); // The padding required for the icon to center align with the menu item thumbnail. We calculate the difference in size and add it to the expected spacing. -@spacing-typeahead-search-focus-addition: calc( ( 12px + 40px ) - ( 20px + 8px ) ); // The amount the width of the input increases when it is focused to allow for the extra spacing around the search figures. The caret position should remain static. This calculates the padding-left of the input when expanded minus the padding-left of the input when not expanded. (Note that both padding values actually include `@spacing-50` as well, but it was left out of the calculation for simplicity's sake.) -@border-width-base: 1px; -@border-width-thick: 2px; -@border-width-input-radio--checked: 6px; -@border-color-base: var( --border-color-base ); -@border-color-interactive: var( --border-color-interactive ); -@border-color-disabled: var( --border-color-disabled ); -@border-color-subtle: var( --border-color-subtle ); -@border-color-muted: var( --border-color-muted ); -@border-color-inverted: var( --border-color-inverted ); -@border-color-progressive: var( --border-color-progressive ); -@border-color-progressive--hover: var( --border-color-progressive--hover ); -@border-color-progressive--active: var( --border-color-progressive--active ); -@border-color-progressive--focus: var( --border-color-progressive--focus ); -@border-color-destructive: var( --border-color-destructive ); -@border-color-destructive--hover: var( --border-color-destructive--hover ); -@border-color-destructive--active: var( --border-color-destructive--active ); -@border-color-destructive--focus: var( --border-color-destructive--focus ); -@border-color-error: var( --border-color-error ); -@border-color-error--hover: var( --border-color-error--hover ); -@border-color-warning: var( --border-color-warning ); -@border-color-success: var( --border-color-success ); -@border-color-notice: var( --border-color-notice ); -@border-color-transparent: var( --border-color-transparent ); -@border-color-divider: var( --border-color-divider ); -@border-color-input--hover: var( --border-color-input--hover ); -@border-color-input-binary: var( --border-color-input-binary ); -@border-color-input-binary--hover: var( --border-color-input-binary--hover ); -@border-color-input-binary--active: var( --border-color-input-binary--active ); -@border-color-input-binary--focus: var( --border-color-input-binary--focus ); -@border-color-input-binary--checked: var( --border-color-input-binary--checked ); -@border-base: var( --border-base ); -@border-subtle: var( --border-subtle ); -@border-progressive: var( --border-progressive ); -@border-destructive: var( --border-destructive ); -@border-radius-base: 2px; -@border-radius-sharp: 0; -@border-radius-pill: 9999px; -@border-radius-circle: 50%; // Use `50%` for circle or ellipsis. See https://stackoverflow.com/a/29966500 -@outline-base--focus: 1px solid transparent; // Enable Windows high contrast mode on certain widgets, that have default outlines overridden. -@outline-color-progressive--focus: var( --outline-color-progressive--focus ); // Use in places where no more customized focus styles are provided, for example on generic `:focus`. -@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>' ); -@min-height-text-area: 64px; -@min-height-table-header: 64px; -@min-height-table-footer: 64px;
\ No newline at end of file diff --git a/resources/lib/codex-design-tokens/theme-codex-wikimedia-mode-dark.less b/resources/lib/codex-design-tokens/theme-codex-wikimedia-mode-dark.less deleted file mode 100644 index 0d420a8ea1b5..000000000000 --- a/resources/lib/codex-design-tokens/theme-codex-wikimedia-mode-dark.less +++ /dev/null @@ -1,58 +0,0 @@ -/** - * Codex Design Tokens v1.4.0 - * Design System for Wikimedia - * See https://doc.wikimedia.org/codex/latest/design-tokens/overview.html - * - * This is an experimental stylesheet not intended for production use. - */ - -.cdx-mode-dark() { - --color-base: #f8f9fa; - --color-base--hover: #fff; /* Aimed to be replaced by `color.gray600` in future. */ - --color-emphasized: #fff; - --color-subtle: #eaecf0; - --color-placeholder: #c8ccd1; - --color-inverted: #101418; - --color-progressive: #6d8af2; /* 'Progressive' Color and states */ - --color-progressive--hover: #afb6e9; - --color-progressive--active: #c2d1f0; - --color-destructive: #ff4242; /* 'Destructive' Color and states */ - --color-destructive--hover: #ef8174; - --color-destructive--active: #f8a397; - --color-visited: #977dbd; /* 'Visited' color. In combination with progressive. Used for default links. */ - --color-error: #ff4242; - --color-warning: #fc3; /* Note, this is only meant for warning icon for contrast reasons. */ - --color-success: #00af89; /* Note, this needs to use a tone darker than Red and Yellow for contrast reasons with background White. */ - --color-notice: #f8f9fa; - --box-shadow-color-base: #fff; - --box-shadow-color-inverted: #000; - --background-color-interactive: #27292d; - --background-color-interactive-subtle: #202122; - --background-color-disabled: #54595d; /* Components like Buttons, Checkboxes, Radios, ProgressBars…. */ - --background-color-disabled-subtle: #404244; /* Components like TextInputs, Selects…. */ - --background-color-progressive-subtle: #1d2a42; - --background-color-destructive-subtle: #421211; - --background-color-error: #ff4242; - --background-color-error--hover: #ef8174; - --background-color-error--active: #f8a397; - --background-color-error-subtle: #421211; - --background-color-warning-subtle: #301d00; - --background-color-success-subtle: #00261e; - --background-color-notice-subtle: #202122; - --background-color-backdrop-light: rgba( 0, 0, 0, 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( 255, 255, 255, 0.65 ); - --background-color-base: #101418; /* Background Colors for static elements (for page layout, sections, etc.) from here on. */ - --background-color-neutral: #27292d; - --background-color-neutral-subtle: #202122; - --border-color-base: #72777d; - --border-color-interactive: #a2a9b1; - --border-color-disabled: #54595d; - --border-color-subtle: #54595d; - --border-color-muted: #404244; - --border-color-inverted: #101418; - --border-color-error: #ff4242; - --border-color-error--hover: #ef8174; - --border-color-warning: #fc3; - --border-color-success: #00af89; - --border-color-notice: #c8ccd1; -} |