Jdrewniak has uploaded a new change for review. ( https://gerrit.wikimedia.org/r/383346 )
Change subject: Removing WikimediaUI Base variables in favor of NPM module ...................................................................... Removing WikimediaUI Base variables in favor of NPM module Removing the variables in _vars.css in favor of pulling them in from the WikimediaUI Base NPM repo. Bug: T172696 Change-Id: I99fe280ae6ae8b778897fe065f78ef38b63a6ee5 --- M dev/wikipedia.org/assets/postcss/_vars.css M dev/wikipedia.org/assets/postcss/style.css M package.json 3 files changed, 2 insertions(+), 148 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/wikimedia/portals refs/changes/46/383346/1 diff --git a/dev/wikipedia.org/assets/postcss/_vars.css b/dev/wikipedia.org/assets/postcss/_vars.css index 7019117..e995fda 100644 --- a/dev/wikipedia.org/assets/postcss/_vars.css +++ b/dev/wikipedia.org/assets/postcss/_vars.css @@ -1,153 +1,5 @@ :root { /** - * Excerpt of - * WikimediaUI base v0.7.1 - * Wikimedia Foundation user interface base variables - * - * https://phabricator.wikimedia.org/diffusion/WMUI/browse/master/wmui-base.css;v0.7.1 - */ - - /* stylelint-disable declaration-colon-space-after, max-empty-lines */ - /* Colors */ - /* WikimediaUI (WMUI) color palette */ - --wmui-color-base0: #000; /* = HSB 0°, 0%, 0% */ - --wmui-color-base10: #222; /* = HSB 0°, 0%, 13% */ - --wmui-color-base20: #54595d; /* = HSB 207°, 10%, 36%; WCAG 2.0 level AAA 7.09:1 contrast ratio on `#fff` */ - --wmui-color-base30: #72777d; /* = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff` */ - --wmui-color-base50: #a2a9b1; /* = HSB 212°, 8%, 69% */ - --wmui-color-base70: #c8ccd1; /* = HSB 213°, 4%, 82% */ - --wmui-color-base80: #eaecf0; /* = HSB 220°, 3%, 94% */ - --wmui-color-base90: #f8f9fa; /* = HSB 210°, 1%, 98% */ - --wmui-color-base100: #fff; /* = HSB 0°, 0%, 100% */ - - --wmui-color-accent30: #2a4b8d; /* = HSB 220°, 70%, 55% */ - --wmui-color-accent50: #36c; /* = HSB 220°, 75%, 80% */ - --wmui-color-accent90: #eaf3ff; /* = HSB 214°, 8%, 100% */ - - --wmui-color-red30: #b32424; /* = HSB 360°, 80%, 70% */ - --wmui-color-red50: #d33; /* = HSB 360°, 77%, 87% */ - --wmui-color-red90: #fee7e6; /* = HSB 3°, 9%, 100% */ - - --wmui-color-yellow30: #ac6600; /* = HSB 36°, 100%, 67% */ - --wmui-color-yellow50: #fc3; /* = HSB 45°, 80%, 100% */ - --wmui-color-yellow90: #fef6e7; /* = HSB 39°, 9%, 100% */ - - --wmui-color-green30: #14866d; /* = HSB 167°, 85%, 53% */ - --wmui-color-green50: #00af89; /* = HSB 167°, 100%, 69% */ - --wmui-color-green90: #d5fdf4; /* = HSB 166°, 16%, 99% */ - - /* Background Colors */ - --background-color-base: var( --wmui-color-base100 ); - --background-color-code: var( --wmui-color-base90 ); - /* 'Framed' UI elements (Framed Buttons, Dropdowns, ToggleSwitches...) */ - --background-color-framed: var( --wmui-color-base90 ); - --background-color-framed--hover: var( --wmui-color-base100 ); - --background-color-framed--active: var( --wmui-color-base70 ); - /* RGBA Colors include hex fallback on `#fff` for IE 6/7/8 */ - --background-color-highlight: rgba( 255, 182, 13, 0.4 ); - --background-color-highlight--fallback: #ffe29e; - - /* Foreground Colors */ - --color-base: var( --wmui-color-base10 ); - --color-base--hover: #444; - --color-base--active: var( --wmui-color-base0 ); - --color-base--inverted: var( --wmui-color-base100 ); - --color-base--emphasized: var( --color-base--active ); - --color-base--disabled: var( --wmui-color-base30 ); - --color-filled--disabled: var( --color-base--inverted ); - --color-placeholder: var( --wmui-color-base30 ); - /* Primary 'Progressive' Color, Background Color and states */ - --background-color-primary: var( --wmui-color-accent90 ); - --background-color-primary--hover: rgba( 41, 98, 204, 0.1 ); - --color-primary: var( --wmui-color-accent50 ); - --color-primary--hover: #447ff5; /* = `filter: brightness( 109% )` */ - --color-primary--active: var( --wmui-color-accent30 ); - --color-primary--focus: var( --wmui-color-accent50 ); - /* 'Destructive' Color, Background Color and states */ - --background-color-destructive: var( --wmui-color-red90 ); - --color-destructive: var( --wmui-color-red50 ); - --color-destructive--hover: #e53939; - --color-destructive--active: var( --wmui-color-red30 ); - --color-destructive--focus: var( --wmui-color-red50 ); - /* Secondary Color and states (links only) */ - --color-secondary: var( --wmui-color-green50 ); - --color-secondary--hover: #1c6665; - --color-secondary--active: var( --wmui-color-green30 ); - --color-secondary--focus: var( --wmui-color-green50 ); - - - /* Opacity */ - --opacity-base: 1; - --opacity-base--disabled: 0.51; /* = `#7d7d7d` on `background-color: #fff`; HSB 0°, 0%, 49% */ - - - /* Positioning */ - /* Z-Index */ - --z-index-base: 0; - - - /* Box Model properties */ - /* Max Widths */ - --max-width-button: 28.75em; /* = `460px` at `16px` base, see T95367 */ - --max-width-input-inline: 100%; - - /* Border */ - --border-base: var( --border-width-base ) solid var( --border-color-base ); - --border-dialog: var( --border-base ); - --border-menu: var( --border-base ); - /* Border Colors */ - --border-color-base: var( --wmui-color-base50 ); - --border-color-base--hover: var( --wmui-color-base50 ); - --border-color-base--active: var( --wmui-color-base30 ); - --border-color-base--disabled: var( --color-base--disabled ); - --border-color-filled-disabled: var( --color-filled--disabled ); - --border-color-primary--active: #859dcc; - --border-color-destructive--active: #b77c79; - --border-color-inset--focus: var( --color-base--inverted ); - --border-color-heading: var( --wmui-color-base70 ); - /* Border Widths */ - --border-width-base: 1px; - /* Border Radius */ - --border-radius-base: 2px; - - /* Box Shadows */ - --box-shadow-base--focus: inset 0 0 0 1px var( --wmui-color-accent50 ); - --box-shadow-inset--inverted: inset 0 0 0 1px var( --color-base--inverted ); - --box-shadow-filled--disabled: inset 0 0 0 1px var( --color-filled--disabled ); - --box-shadow-dialog: 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 ); - --box-shadow-menu: var( --box-shadow-dialog ); - - - /* Typography incl. print properties */ - /* Font Families */ - --font-family-base: var( --font-family-sans ); - --font-family-heading-main: var( --font-family-serif ); - --font-family-sans: 'Helvetica Neue', 'Helvetica', 'Nimbus Sans L', 'Arial', 'Liberation Sans', sans-serif; - --font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif; - /* Line Heights */ - --line-height-base: 1.6; - --line-height-heading: 1.25; - --text-decoration-link--hover: none; - /* Text Shadows */ - --text-shadow-base: 0 1px 1px var( --color-base--inverted ); /* 'coined' effect */ - --text-shadow-base--disabled: var( --text-shadow-base ); - - - /* Other Properties */ - /* Cursors */ - --cursor-base--disabled: default; - - - /* Animation & Transition */ - /* Transitions */ - --transition-base: var( --transition-duration-base ); - --transition-medium: var( --transition-duration-medium ); - /* Transitions > Durations */ - --transition-duration-base: 100ms; - --transition-duration-medium: 250ms; - - - /** * Portal specific variables */ --color-print--visited: #520; diff --git a/dev/wikipedia.org/assets/postcss/style.css b/dev/wikipedia.org/assets/postcss/style.css index f68a5b5..84868cc 100644 --- a/dev/wikipedia.org/assets/postcss/style.css +++ b/dev/wikipedia.org/assets/postcss/style.css @@ -1,4 +1,5 @@ /* ::: Base ::: */ +@import 'wikimedia-ui-base/wikimedia-ui-base.css'; @import '_vars.css'; @import '_base.css'; @import '_base-portal.css'; diff --git a/package.json b/package.json index 6be2599..83b6473 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "stylelint-config-wikimedia": "0.4.1", "sync-request": "^3.0.1", "underscore": "^1.8.3", + "wikimedia-ui-base": "^0.9.2", "yargs": "^6.3.0" } } -- To view, visit https://gerrit.wikimedia.org/r/383346 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I99fe280ae6ae8b778897fe065f78ef38b63a6ee5 Gerrit-PatchSet: 1 Gerrit-Project: wikimedia/portals Gerrit-Branch: master Gerrit-Owner: Jdrewniak <jdrewn...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits