Support on Dark Mode (#12)

* Initial support on Dark Mode * Update dependencies * Add more information to CONTRIBUTING.MD * Fix Vector 2022 width breakpoint change
wikimedia-gadgets · Jul 8, 2024 · 37d5f9d · 37d5f9d
1 parent b5c7986
commit 37d5f9d
Show file tree

Hide file tree

Showing 6 changed files with 3,091 additions and 2,375 deletions.
diff --git a/gadgets/variant-ally-dialog/package.json b/gadgets/variant-ally-dialog/package.json
@@ -13,10 +13,10 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.3",
     "autoprefixer": "^10.4.14",
-    "browserslist": "^4.21.10",
+    "browserslist": "^4.23.0",
     "less": "^4.1.3",
     "rollup-plugin-mediawiki-gadget": "^1.2.1",
-    "vite": "^5.0.13",
+    "vite": "^5.2.11",
     "vue-tsc": "^1.8.24"
   },
   "dependencies": {

diff --git a/gadgets/variant-ally-dialog/src/AppDev.vue b/gadgets/variant-ally-dialog/src/AppDev.vue
@@ -151,4 +151,6 @@ addEventListener(isMobile ? 'touchmove' : 'scroll', () => {
   </Teleport>
 </template>
 
-<style lang="less"></style>
+<style lang="less">
+@import './styles/dev-vars.less';
+</style>
diff --git a/gadgets/variant-ally-dialog/src/styles/dev-vars.less b/gadgets/variant-ally-dialog/src/styles/dev-vars.less
@@ -0,0 +1,210 @@
+// This file is only used for testing in development mode.
+// In release mode, it will use variables from the MediaWiki skin instead.
+
+:root {
+
+  // From https: //gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/5e1ad3087091dc51e6e7ccf8a0248b132fdba017/resources/lib/codex-design-tokens/theme-wikimedia-ui-root.css
+  @media (prefers-color-scheme: light) {
+    --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-destructive--visited: #a55858;
+    /* Red link 'Visited' color. Used for visited red 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-content-added: #36c;
+    --color-content-removed: #a66200;
+    --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-content-added: #6d8af2;
+    --background-color-content-removed: #ad822b;
+    --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-content-added: #6d8af2;
+    --border-color-content-removed: #ad822b;
+    --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`. */
+  }
+
+  // From https: //gerrit.wikimedia.org/g/mediawiki/core/+/5e1ad3087091dc51e6e7ccf8a0248b132fdba017/resources/lib/codex-design-tokens/theme-wikimedia-ui-mode-dark.css
+  @media (prefers-color-scheme: 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-destructive--visited: #b97876;
+    /* Red link 'Visited' color. Used for visited red 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;
+    --color-content-added: #6d8af2;
+    --color-content-removed: #ad822b;
+    --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: #1c2940;
+    --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-content-added: #36c;
+    --background-color-content-removed: #a66200;
+    --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;
+    --border-color-content-added: #36c;
+    --border-color-content-removed: #a66200;
+  }
+}
diff --git a/gadgets/variant-ally-dialog/src/styles/tokens.less b/gadgets/variant-ally-dialog/src/styles/tokens.less
@@ -1,41 +1,41 @@
 // Tokens from https://doc.wikimedia.org/codex/latest/design-tokens/overview.html
 
 /* Foreground colors */
-@color-base: #202122;
-@color-base--hover: #404244;
-@color-progressive: #36c;
-@color-progressive--hover: #447ff5;
-@color-progressive--active: #2a4b8d;
-@color-progressive--focus: #36c;
-@color-visited: #6b4ba1;
-@color-emphasized: #000;
-@color-inverted: #fff;
-@color-disabled: #72777d;
-@color-subtle: #54595d;
+@color-base: var(--color-base, #202122);
+@color-base--hover: var(--color-base--hover, #404244);
+@color-progressive: var(--color-progressive, #36c);
+@color-progressive--hover: var(--color-progressive--hover, #447ff5);
+@color-progressive--active: var(--color-progressive--active, #2a4b8d);
+@color-progressive--focus: var(--color-progressive--focus, #36c);
+@color-visited: var(--color-visited, #6b4ba1);
+@color-emphasized: var(--color-emphasized, #000);
+@color-inverted: var(--color-inverted, #fff);
+@color-disabled: var(--color-disabled, #72777d);
+@color-subtle: var(--color-subtle, #54595d);
 
 /* Background colors */
-@background-color-base: #fff;
-@background-color-transparent: rgba(255, 255, 255, 0);
-@background-color-disabled: #c8ccd1;
-@background-color-interactive: #eaecf0;
-@background-color-interactive-subtle: #f8f9fa;
-@background-color-progressive--active: #2a4b8d;
-@background-color-progressive-subtle: #eaf3ff;
-@background-color-button-quiet--active: rgba(0, 24, 73, 0.082);
-@background-color-button-quiet--hover: rgba(0, 24, 73, 0.027);
-@background-color-backdrop-light: rgba(255, 255, 255, 0.65);
-@background-color-backdrop-dark: rgba(0, 0, 0, 0.65);
-@background-color-disabled-subtle: #eaecf0;
+@background-color-base: var(--background-color-base, #fff);
+@background-color-transparent: var(--background-color-transparent, rgba(255, 255, 255, 0));
+@background-color-disabled: var(--background-color-disabled, #c8ccd1);
+@background-color-interactive: var(--background-color-interactive, #eaecf0);
+@background-color-interactive-subtle: var(--background-color-interactive-subtle, #f8f9fa);
+@background-color-progressive--active: var(--background-color-progressive--active, #2a4b8d);
+@background-color-progressive-subtle: var(--background-color-progressive-subtle, #eaf3ff);
+@background-color-button-quiet--active: var(--background-color-button-quiet--active, rgba(0, 24, 73, 0.082));
+@background-color-button-quiet--hover: var(--background-color-button-quiet--hover, rgba(0, 24, 73, 0.027));
+@background-color-backdrop-light: var(--background-color-backdrop-light, rgba(255, 255, 255, 0.65));
+@background-color-backdrop-dark: var(--background-color-backdrop-dark, rgba(0, 0, 0, 0.65));
+@background-color-disabled-subtle: var(--background-color-disabled-subtle, #eaecf0);
 
 /* Border colors */
-@border-color-base: #a2a9b1;
-@border-color-transparent: transparent;
-@border-color-progressive: #36c;
-@border-color-progressive--hover: #447ff5;
-@border-color-progressive--active: #2a4b8d;
-@border-color-progressive--focus: #36c;
-@border-color-interactive: #72777d;
-@border-color-disabled: #c8ccd1;
+@border-color-base: var(--border-color-base, #a2a9b1);
+@border-color-transparent: var(--border-color-transparent, transparent);
+@border-color-progressive: var(--border-color-progressive, #36c);
+@border-color-progressive--hover: var(--border-color-progressive--hover, #447ff5);
+@border-color-progressive--active: var(--border-color-progressive--active, #2a4b8d);
+@border-color-progressive--focus: var(--border-color-progressive--focus, #36c);
+@border-color-interactive: var(--border-color-interactive, #72777d);
+@border-color-disabled: var(--border-color-disabled, #c8ccd1);
 
 /* Border radius */
 @border-radius-base: 2px;
@@ -54,11 +54,11 @@
 /* Box shadows */
 @box-shadow-drop-small: 0 1px 1px rgba(0, 0, 0, 0.2);
 @box-shadow-drop-medium: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
-@box-shadow-progressive--focus: inset 0 0 0 1px #36c;
+@box-shadow-progressive--focus: inset 0 0 0 1px @box-shadow-color-progressive--focus;
 @box-shadow-inset-small: inset 0 0 0 1px;
 
 /* Box shadow colors */
-@box-shadow-color-progressive--focus: #36c;
+@box-shadow-color-progressive--focus: var(--box-shadow-color-progressive--focus, #36c);
 
 /* Box sizings */
 @box-sizing-base: border-box;

diff --git a/gadgets/variant-ally/package.json b/gadgets/variant-ally/package.json
@@ -10,13 +10,13 @@
     "test": "jest"
   },
   "devDependencies": {
-    "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-strip": "^3.0.2",
-    "@rollup/plugin-typescript": "^11.1.2",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-strip": "^3.0.4",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@types/jest": "^29.5.3",
     "jest": "^29.6.2",
-    "rollup": "^3.26.2",
-    "rollup-plugin-mediawiki-gadget": "^1.1.0",
+    "rollup": "^4.17.2",
+    "rollup-plugin-mediawiki-gadget": "^1.2.1",
     "ts-jest": "^29.1.1"
   }
 }