styles: Replace 'mediawiki.ui/variables' call with skin variables
- Replacing 'mediawiki.ui/variables.less' `@import` with new Codex design tokens as external library. We're using the legacy values as UniversalLanguageSelector has been a desktop first extension and those values are also used by Vector skin. The values replaced are anyways only touching colors, borders or transitions which are the same in normal and legacy. These will be replaced by skin-aware 'mediawiki.skin.variables.less' standard with dependency of UniversalLanguageSelector upped to MW 1.42.0. - Replacing several static values with new Codex design token featuring skin variables, in categories `background-color`, `color`, `border-*`, `box-shadow`, `opacity` and `transition`. Note, that this change should result in same rendering of the extension, only properties that already have an equal token are replaced. Bug: T332541 Co-Authored-by: Volker E. <volker.e@wikimedia.org> Change-Id: Ic563fa84bf8e76fd62f14487924d7d6fd5c1a065
This commit is contained in:
Volker E
jenkins-bot
295
lib/codex-design-tokens/theme-wikimedia-ui-legacy.less
Normal file
295
lib/codex-design-tokens/theme-wikimedia-ui-legacy.less
Normal file
@@ -0,0 +1,295 @@
|
||||
|
||||
// Do not edit directly
|
||||
// Generated on Tue, 25 Apr 2023 19:52:09 GMT
|
||||
|
||||
@font-size-base: 14px;
|
||||
@font-size-x-small: 0.8571429em; // `x` stands for extra. In this case extra small.
|
||||
@font-size-small: 1em;
|
||||
@font-size-medium: 1.1428571em;
|
||||
@font-size-large: 1.2857143em;
|
||||
@font-size-x-large: 1.4285714em;
|
||||
@font-size-xx-large: 1.7142857em;
|
||||
@font-size-xxx-large: 2em;
|
||||
@accent-color-base: #36c;
|
||||
@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, 0.027 );
|
||||
@background-color-button-quiet--active: rgba( 0, 24, 73, 0.082 );
|
||||
@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;
|
||||
@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;
|
||||
@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;
|
||||
@min-size-base: 32px; // TODO: Deprecate key and change to `min-size-component`?
|
||||
@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-toggle-switch-grip: 20px;
|
||||
@size-0: 0;
|
||||
@size-6: 0.0714286em;
|
||||
@size-12: 0.1428571em;
|
||||
@size-25: 0.2857143em;
|
||||
@size-50: 0.5714286em;
|
||||
@size-75: 0.8571429em;
|
||||
@size-100: 1.1428571em;
|
||||
@size-125: 1.4285714em;
|
||||
@size-150: 1.7142857em;
|
||||
@size-200: 2.2857143em;
|
||||
@size-250: 2.8571429em;
|
||||
@size-275: 3.1428571em;
|
||||
@size-300: 3.4285714em;
|
||||
@size-400: 4.5714286em;
|
||||
@size-800: 9.1428571em;
|
||||
@size-1600: 18.2857143em;
|
||||
@size-2400: 27.4285714em;
|
||||
@size-2800: 32em;
|
||||
@size-3200: 36.5714286em;
|
||||
@size-5600: 64em;
|
||||
@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-search-figure: 2.8571429em; // Alias for use in TypeaheadSearch and Thumbnail components for the same purpose and for better code readability.
|
||||
@size-icon-x-small: 0.8571429em;
|
||||
@size-icon-small: 1.1428571em;
|
||||
@size-icon-medium: 1.4285714em;
|
||||
@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;
|
||||
@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: 32em; // 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: -0.2857143em;
|
||||
@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-input-text-two-end-icons: calc( 8px * 2 + 1.1428571em + 1px ); // 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-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: #b32424;
|
||||
@border-color-warning: #ac6600;
|
||||
@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 #d33;
|
||||
@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
|
||||
@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: #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;
|
||||
@text-overflow-clip: clip;
|
||||
@text-overflow-ellipsis: ellipsis;
|
||||
@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, transform;
|
||||
@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 (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 `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 min-width-breakpoint-mobile instead. (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 (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;
|
||||
17
package-lock.json
generated
17
package-lock.json
generated
@@ -5,6 +5,9 @@
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "UniversalLanguageSelector",
|
||||
"dependencies": {
|
||||
"@wikimedia/codex-design-tokens": "^0.9.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint-config-wikimedia": "0.24.0",
|
||||
"grunt": "1.6.1",
|
||||
@@ -355,6 +358,15 @@
|
||||
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@wikimedia/codex-design-tokens": {
|
||||
"version": "0.9.1",
|
||||
"resolved": "https://registry.npmjs.org/@wikimedia/codex-design-tokens/-/codex-design-tokens-0.9.1.tgz",
|
||||
"integrity": "sha512-VyMWv4qUXHwrFfMtkY0AfxWMHJH3Tti1Nc/DFn6ncL31LVmY66ki55eJu5J85fDu9Ni7r8vh/MSgU18tH43XSw==",
|
||||
"engines": {
|
||||
"node": ">=16",
|
||||
"npm": ">=7.21.0"
|
||||
}
|
||||
},
|
||||
"node_modules/abbrev": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
|
||||
@@ -4996,6 +5008,11 @@
|
||||
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
|
||||
"dev": true
|
||||
},
|
||||
"@wikimedia/codex-design-tokens": {
|
||||
"version": "0.9.1",
|
||||
"resolved": "https://registry.npmjs.org/@wikimedia/codex-design-tokens/-/codex-design-tokens-0.9.1.tgz",
|
||||
"integrity": "sha512-VyMWv4qUXHwrFfMtkY0AfxWMHJH3Tti1Nc/DFn6ncL31LVmY66ki55eJu5J85fDu9Ni7r8vh/MSgU18tH43XSw=="
|
||||
},
|
||||
"abbrev": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
"name": "UniversalLanguageSelector",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-lib": "./scripts/build.sh",
|
||||
"minify-svg": "svgo --config=.svgo.config.js --quiet --recursive --folder resources/images/",
|
||||
"test": "grunt test"
|
||||
},
|
||||
@@ -13,7 +14,8 @@
|
||||
"grunt-stylelint": "0.18.0",
|
||||
"postcss-less": "6.0.0",
|
||||
"stylelint-config-wikimedia": "0.14.0",
|
||||
"svgo": "2.8.0"
|
||||
"svgo": "2.8.0",
|
||||
"@wikimedia/codex-design-tokens": "0.9.1"
|
||||
},
|
||||
"eslintIgnore": [
|
||||
"lib/**",
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
// TODO: Replace with @import 'mediawiki.skin.variables.less'; with MW core LTS v1.42 dependency.
|
||||
@import '../../lib/codex-design-tokens/theme-wikimedia-ui-legacy.less';
|
||||
@import 'mediawiki.mixins';
|
||||
// All but `font-size` are WikimediaUI theme values and overwrite jquery.uls library.
|
||||
|
||||
// We need higher specificity due to loading order of LESS files and jquery.uls.
|
||||
.skin-vector {
|
||||
.uls-menu {
|
||||
border-color: #c8ccd1;
|
||||
box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
|
||||
border-color: @border-color-subtle;
|
||||
box-shadow: @box-shadow-drop-medium;
|
||||
// Not inherited from `.mw-body-content`, as we insert at `body`.
|
||||
font-size: 0.875em;
|
||||
// T295794 Account for Vector sticky header.
|
||||
@@ -13,23 +15,24 @@
|
||||
}
|
||||
|
||||
.uls-search {
|
||||
border-bottom-color: #c8ccd1;
|
||||
border-bottom-color: @border-color-subtle;
|
||||
}
|
||||
|
||||
.uls-search-label {
|
||||
opacity: 0.51;
|
||||
transition: opacity 250ms;
|
||||
opacity: @opacity-icon-placeholder;
|
||||
transition: opacity @transition-duration-medium;
|
||||
}
|
||||
|
||||
.uls-search-wrapper:hover .uls-search-label {
|
||||
opacity: 0.87;
|
||||
opacity: @opacity-icon-base;
|
||||
}
|
||||
|
||||
.uls-languagefilter,
|
||||
.uls-lcd-region-title {
|
||||
color: @color-subtle;
|
||||
}
|
||||
|
||||
.uls-filtersuggestion {
|
||||
color: #72777d;
|
||||
}
|
||||
|
||||
.uls-lcd-region-title {
|
||||
color: #54595d;
|
||||
color: @color-placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
// TODO: Replace with @import 'mediawiki.skin.variables.less'; with MW core LTS v1.42 dependency.
|
||||
@import '../../lib/codex-design-tokens/theme-wikimedia-ui-legacy.less';
|
||||
|
||||
.uls-menu.uls-language-actions-dialog {
|
||||
min-width: 248px;
|
||||
|
||||
.uls-language-actions-title {
|
||||
border-bottom: 1px solid #c8ccd1;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-subtle;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
// TODO: Replace with @import 'mediawiki.skin.variables.less'; with MW core LTS v1.42 dependency.
|
||||
@import '../../lib/codex-design-tokens/theme-wikimedia-ui-legacy.less';
|
||||
@import 'mediawiki.mixins';
|
||||
@import 'ext.uls.mixins.less';
|
||||
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
// TODO: Replace with @import 'mediawiki.skin.variables.less'; with MW core LTS v1.42 dependency.
|
||||
@import '../../lib/codex-design-tokens/theme-wikimedia-ui-legacy.less';
|
||||
@uls-dialog-width: 480px;
|
||||
|
||||
.uls-dialog {
|
||||
position: fixed;
|
||||
z-index: 500;
|
||||
display: none;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
background-color: @background-color-base;
|
||||
border: @border-width-base @border-style-base @border-color-subtle;
|
||||
border-color: rgba( 0, 0, 0, 0.2 );
|
||||
box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.2 );
|
||||
background-clip: padding-box;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
// TODO: Replace with @import 'mediawiki.skin.variables.less'; with MW core LTS v1.42 dependency.
|
||||
@import '../../lib/codex-design-tokens/theme-wikimedia-ui-legacy.less';
|
||||
@import 'mediawiki.mixins';
|
||||
|
||||
.uls-display-settings-tab-switcher {
|
||||
@@ -7,13 +9,13 @@
|
||||
.uls-button-group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0 0 0 0;
|
||||
padding: 0;
|
||||
left: -20px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.uls-sub-panel {
|
||||
border-top: 1px solid #eaecf0;
|
||||
border-top: @border-width-base @border-style-base #eaecf0;
|
||||
padding-top: 25px;
|
||||
top: -20px;
|
||||
position: relative;
|
||||
@@ -25,12 +27,12 @@
|
||||
}
|
||||
|
||||
.uls-font-item {
|
||||
border-bottom: 1px solid #eaecf0;
|
||||
border-bottom: @border-width-base @border-style-base #eaecf0;
|
||||
background: #f8f9fa;
|
||||
padding: 10px 0;
|
||||
|
||||
&:first-child {
|
||||
border-top: 1px solid #eaecf0;
|
||||
border-top: @border-width-base @border-style-base #eaecf0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,12 +45,12 @@
|
||||
/* stylelint-enable selector-max-id */
|
||||
|
||||
.uls-font-label {
|
||||
color: #54595d;
|
||||
color: @color-subtle;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.uls-font-label strong {
|
||||
color: #202122;
|
||||
color: @color-base;
|
||||
}
|
||||
|
||||
.uls-display-settings-anon-label {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
// TODO: Replace with @import 'mediawiki.skin.variables.less'; with MW core LTS v1.42 dependency.
|
||||
@import '../../lib/codex-design-tokens/theme-wikimedia-ui-legacy.less';
|
||||
@import 'mediawiki.mixins';
|
||||
|
||||
.imelabel {
|
||||
@@ -17,9 +19,9 @@
|
||||
|
||||
.uls-ime-menu-settings-item {
|
||||
background-color: #f8f9fa;
|
||||
color: #202122;
|
||||
border-top: 1px solid #c8ccd1;
|
||||
border-radius: 0 0 2px 2px;
|
||||
color: @color-base;
|
||||
border-top: @border-width-base @border-style-base @border-color-subtle;
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
margin-top: 6px;
|
||||
padding: 4px 2px;
|
||||
position: relative;
|
||||
@@ -37,7 +39,7 @@
|
||||
.uls-ime-more-settings-link {
|
||||
background: transparent url( ../images/cog.svg ) no-repeat center top;
|
||||
background-size: auto 14px;
|
||||
border-left: 1px solid #c8ccd1;
|
||||
border-left: @border-width-base @border-style-base @border-color-subtle;
|
||||
width: 22px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
@@ -46,8 +48,8 @@
|
||||
}
|
||||
|
||||
.uls-ime-menu-settings-item > a:hover {
|
||||
background-color: #f8f9fa;
|
||||
color: #000;
|
||||
background-color: @background-color-interactive-subtle;
|
||||
color: @color-emphasized;
|
||||
}
|
||||
|
||||
.uls-input-settings-imes-title:empty {
|
||||
@@ -56,7 +58,7 @@
|
||||
|
||||
.uls-input-settings-disable-info,
|
||||
.uls-input-settings-no-inputmethods {
|
||||
color: #54595d;
|
||||
color: @color-subtle;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 15px;
|
||||
font-size: 11pt;
|
||||
@@ -67,9 +69,9 @@
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 0;
|
||||
border-right: 8px solid transparent;
|
||||
border-left: 8px solid transparent;
|
||||
border-bottom: 8px solid #f8f9fa;
|
||||
border-right: 8px @border-style-base @border-color-transparent;
|
||||
border-left: 8px @border-style-base @border-color-transparent;
|
||||
border-bottom: 8px @border-style-base #f8f9fa;
|
||||
content: '';
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
@@ -99,7 +101,8 @@
|
||||
}
|
||||
|
||||
.uls-ime-notification-bubble .link {
|
||||
color: #36c;
|
||||
// TODO: Replace with `@color-link` with skin variables.
|
||||
color: @color-progressive;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -120,7 +123,7 @@
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 4px;
|
||||
opacity: 0.81;
|
||||
opacity: @opacity-icon-base;
|
||||
padding: 0;
|
||||
background: transparent url( ../images/help.svg ) no-repeat right center;
|
||||
background-size: 16px 16px;
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
/* stylelint-disable selector-max-id */
|
||||
// TODO: Replace with @import 'mediawiki.skin.variables.less'; with MW core LTS v1.42 dependency.
|
||||
@import '../../lib/codex-design-tokens/theme-wikimedia-ui-legacy.less';
|
||||
@import 'mediawiki.mixins';
|
||||
@import 'mediawiki.ui/variables.less';
|
||||
|
||||
/* stylelint-disable selector-max-id */
|
||||
#uls-settings-block {
|
||||
// set default background color to #fcfcfc, to match ULS-LCD background color (inside jquery.uls.lcd.ss)
|
||||
// TODO: There is no design token for this color. We should fix to use a design token here.
|
||||
@@ -21,8 +22,8 @@
|
||||
}
|
||||
|
||||
&.uls-settings-block--with-add-languages {
|
||||
background-color: @colorGray15;
|
||||
border-top: 1px solid @colorGray12;
|
||||
background-color: #f8f9fa;
|
||||
border-top: @border-width-base @border-style-base @border-color-subtle;
|
||||
}
|
||||
|
||||
> button {
|
||||
@@ -42,18 +43,18 @@
|
||||
}
|
||||
|
||||
&:not( .uls-settings-block--vector-2022 ) {
|
||||
background-color: @colorGray15;
|
||||
border-top: 1px solid @colorGray12;
|
||||
background-color: #f8f9fa;
|
||||
border-top: @border-width-base @border-style-base @border-color-subtle;
|
||||
padding-left: 10px;
|
||||
line-height: 1.2em;
|
||||
border-radius: 0 0 2px 2px;
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
|
||||
> button {
|
||||
background: left top transparent no-repeat;
|
||||
// Support: Safari 3.1-6.1 & Android browser 3-4.3
|
||||
// Don't support `background-size` values in `background` shorthand
|
||||
background-size: 20px auto;
|
||||
color: @colorGray5;
|
||||
color: @color-subtle;
|
||||
display: inline-block;
|
||||
margin: 8px 15px;
|
||||
border: 0;
|
||||
@@ -62,7 +63,8 @@
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @colorGray2;
|
||||
// TODO: This shouldn't be `@color-base`.
|
||||
color: #202122;
|
||||
}
|
||||
|
||||
&.display-settings-block {
|
||||
@@ -85,7 +87,7 @@
|
||||
|
||||
.uls-empty-state__header,
|
||||
.uls-empty-state__desc {
|
||||
color: @colorGray5;
|
||||
color: @color-subtle;
|
||||
}
|
||||
|
||||
.uls-language-action-items {
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
// TODO: Replace with @import 'mediawiki.skin.variables.less'; with MW core LTS v1.42 dependency.
|
||||
@import '../../lib/codex-design-tokens/theme-wikimedia-ui-legacy.less';
|
||||
@import 'mediawiki.mixins';
|
||||
|
||||
/* stylelint-disable selector-max-id */
|
||||
.uls-menu h3 {
|
||||
border-bottom: medium none;
|
||||
border-bottom: 0;
|
||||
font-size: 14pt;
|
||||
line-height: 1.5em;
|
||||
margin-bottom: 10px;
|
||||
@@ -18,7 +20,7 @@
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #000;
|
||||
color: @color-emphasized;
|
||||
font-size: 16pt;
|
||||
line-height: 20pt;
|
||||
margin-top: 0;
|
||||
@@ -33,9 +35,9 @@
|
||||
width: 100%;
|
||||
/* Using border instead of outline for focus (outline doesn't have enough space) */
|
||||
outline: 0;
|
||||
color: #202122;
|
||||
color: @color-base;
|
||||
padding: 5px 0 5px 42px;
|
||||
border: 1px solid transparent;
|
||||
border: @border-width-base @border-style-base @border-color-transparent;
|
||||
background: left 15px top 6px transparent no-repeat;
|
||||
background-size: 20px auto;
|
||||
cursor: pointer;
|
||||
@@ -48,12 +50,12 @@
|
||||
/* Active "tab" has thicker always visible left border. background-position
|
||||
* and padding must be tweaked to avoid the image from moving */
|
||||
&.active {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
color: @color-emphasized;
|
||||
padding-left: 40px;
|
||||
background-position: left 13px top 6px;
|
||||
border-left-width: 3px;
|
||||
border-left-color: #36c;
|
||||
border-left-color: @border-color-progressive;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -61,7 +63,7 @@
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #36c;
|
||||
border-color: @background-color-progressive--focus;
|
||||
}
|
||||
|
||||
.settings-title {
|
||||
@@ -69,12 +71,12 @@
|
||||
}
|
||||
|
||||
.settings-text {
|
||||
color: #54595d;
|
||||
color: @color-subtle;
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
&:hover .settings-text {
|
||||
color: #202122;
|
||||
color: @color-base;
|
||||
}
|
||||
|
||||
&.display-settings-block {
|
||||
@@ -88,13 +90,13 @@
|
||||
}
|
||||
|
||||
#languagesettings-settings-panel {
|
||||
background-color: @background-color-base;
|
||||
color: @color-base;
|
||||
padding: 0 15px;
|
||||
color: #202122;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#languagesettings-settings-panel h3 {
|
||||
color: #202122;
|
||||
color: @color-base;
|
||||
padding-top: 15px;
|
||||
margin-top: 1pt;
|
||||
line-height: 20pt;
|
||||
@@ -102,7 +104,7 @@
|
||||
}
|
||||
|
||||
#languagesettings-settings-panel h4 {
|
||||
color: #202122;
|
||||
color: @color-base;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
@@ -113,11 +115,11 @@
|
||||
}
|
||||
|
||||
.uls-language-settings-close-block {
|
||||
background: #fff;
|
||||
background: @background-color-base;
|
||||
}
|
||||
|
||||
.language-settings-buttons {
|
||||
border-top: 1px solid #eaecf0;
|
||||
border-top: @border-width-base @border-style-base #eaecf0;
|
||||
margin-top: 25px;
|
||||
padding: 15px;
|
||||
width: auto;
|
||||
@@ -130,15 +132,15 @@
|
||||
|
||||
.uls-ui-languages p,
|
||||
.checkbox {
|
||||
color: #54595d;
|
||||
color: @color-subtle;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
/* mediawiki.ui does not have a pressed state style. */
|
||||
#languagesettings-panels .mw-ui-pressed {
|
||||
background-color: #2a4b8d;
|
||||
color: #fff;
|
||||
border-color: #2a4b8d;
|
||||
background-color: @background-color-progressive--active;
|
||||
color: @color-inverted;
|
||||
border-color: @border-color-progressive--active;
|
||||
}
|
||||
|
||||
.checkbox input[ type='checkbox' ] {
|
||||
@@ -146,7 +148,7 @@
|
||||
}
|
||||
|
||||
.checkbox strong {
|
||||
color: #202122;
|
||||
color: @color-base;
|
||||
}
|
||||
|
||||
label.checkbox input[ type='checkbox' ] {
|
||||
|
||||
@@ -1,21 +1,23 @@
|
||||
// TODO: Replace with @import 'mediawiki.skin.variables.less'; with MW core LTS v1.42 dependency.
|
||||
@import '../../lib/codex-design-tokens/theme-wikimedia-ui-legacy.less';
|
||||
@import 'ext.uls.mixins.less';
|
||||
|
||||
/* Overrides to follow MediaWiki style */
|
||||
.uls-menu {
|
||||
border-radius: 2px;
|
||||
border-radius: @border-radius-base;
|
||||
/* Ensure base font size is same in different skins */
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
.uls-search,
|
||||
.uls-language-settings-close-block {
|
||||
border-top-right-radius: 2px;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: @border-radius-base;
|
||||
border-top-left-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
.uls-language-list {
|
||||
border-bottom-right-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: @border-radius-base;
|
||||
border-bottom-left-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
.uls-menu.callout {
|
||||
@@ -43,8 +45,8 @@
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
border-right: 1px solid #c8ccd1;
|
||||
opacity: 0.8;
|
||||
border-right: @border-width-base @border-style-base @border-color-subtle;
|
||||
opacity: @opacity-icon-base;
|
||||
}
|
||||
|
||||
.uls-icon-back:hover {
|
||||
@@ -54,13 +56,13 @@
|
||||
|
||||
.uls-menu .uls-no-results-view {
|
||||
.uls-no-found-more {
|
||||
background-color: #fff;
|
||||
background-color: @background-color-base;
|
||||
}
|
||||
|
||||
h3 {
|
||||
padding: 0 28px;
|
||||
margin: 0;
|
||||
color: #54595d;
|
||||
color: @color-subtle;
|
||||
font-size: 1em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
.caret() {
|
||||
&::before,
|
||||
&::after {
|
||||
border-top: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
border-top: 10px @border-style-base @border-color-transparent;
|
||||
border-bottom: 10px @border-style-base @border-color-transparent;
|
||||
display: inline-block;
|
||||
/* 17px aligns nicely with the size of the search row in language selection */
|
||||
top: 17px;
|
||||
@@ -15,14 +15,14 @@
|
||||
&.selector-right {
|
||||
&::before {
|
||||
/* @noflip */
|
||||
border-left: 10px solid #c8ccd1;
|
||||
border-left: 10px @border-style-base @border-color-subtle;
|
||||
/* @noflip */
|
||||
right: -11px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
/* @noflip */
|
||||
border-left: 10px solid #fff;
|
||||
border-left: 10px @border-style-base #fff;
|
||||
/* @noflip */
|
||||
right: -10px;
|
||||
}
|
||||
@@ -31,14 +31,14 @@
|
||||
&.selector-left {
|
||||
&::before {
|
||||
/* @noflip */
|
||||
border-right: 10px solid #c8ccd1;
|
||||
border-right: 10px @border-style-base @border-color-subtle;
|
||||
/* @noflip */
|
||||
left: -11px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
/* @noflip */
|
||||
border-right: 10px solid #fff;
|
||||
border-right: 10px @border-style-base #fff;
|
||||
/* @noflip */
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
/* stylelint-disable indentation, selector-max-id */
|
||||
// TODO: Replace with @import 'mediawiki.skin.variables.less'; with MW core LTS v1.42 dependency.
|
||||
@import '../../lib/codex-design-tokens/theme-wikimedia-ui-legacy.less';
|
||||
@import 'mediawiki.mixins';
|
||||
|
||||
// Similar to from Vector's 'personalMenu.less' file.
|
||||
@@ -26,6 +27,7 @@
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
/* stylelint-disable indentation, selector-max-id */
|
||||
#pt-uls {
|
||||
padding-top: 0 !important; // stylelint-disable-line declaration-no-important
|
||||
|
||||
@@ -48,7 +50,7 @@
|
||||
padding-top: @padding-top-menu-uls-icon;
|
||||
padding-left: @padding-left-menu-uls-icon;
|
||||
// Equals `#555`, closest to `#54595d` on background-color `#fff`.
|
||||
opacity: 0.67;
|
||||
opacity: @opacity-icon-subtle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
5
scripts/build.sh
Executable file
5
scripts/build.sh
Executable file
@@ -0,0 +1,5 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
set -e
|
||||
|
||||
cp -v node_modules/@wikimedia/codex-design-tokens/theme-wikimedia-ui-legacy.less lib/codex-design-tokens/theme-wikimedia-ui-legacy.less
|
||||
Reference in New Issue
Block a user