style(glossary): dark mode

[runnabro]

	Fix RM-XYZ

🧰 Changes

Dark mode for Glossary tooltips

🧬 QA & Testing

• Broken on production.
• Working in this PR app.

[github-actions]

A review app has been launched for this PR!

🔍 Inspect the app: https://dashboard.heroku.com/apps/markdown-pr-599

🧭 Take it for a spin: https://markdown-pr-599.herokuapp.com/

• Redeployed on Wed Oct 19: a84d368 fix(glossaryitem): actually apply styles
• Shut down on Thu Oct 20: Since this PR is closed, its review app has been cleaned up. 🧽

[runnabro]

@kevinports I'm getting some errors when I test this locally…any advice?

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

So far I've tried a clean install in both repos before linking

[runnabro]

Whoop, it worked! You can test by:

1. https://markdown-pr-599.herokuapp.com/?lazy-images=true#tableOfContentsTests
2. Copy/paste our usual vars:

:root {
  --color-bg-page: var(--white);
  --color-bg-page-rgb: var(--white-rgb);
  --color-text-default: var(--gray20);
  --color-text-muted: var(--gray30);
  --color-text-minimum: var(--gray40);
  --color-text-minimum-hover: var(--gray30);
  --color-text-minimum-icon: rgba(99,114,136,0.6);
  --color-border-default: rgba(0,0,0,0.1);
  --color-skeleton: var(--gray90);
  --color-input-background: var(--white);
  --color-input-text: var(--gray20);
  --color-input-border: #e5e5e5;
  --color-input-border-hover: #ccc;
  --color-input-border-active: var(--blue);
  --color-input-border-focus: rgba(17,140,253,0.25);
  --color-input-placeholder: var(--gray60);
  --black: #000;
  --blue: #118cfd;
  --blue-rgb: 17,140,253;
  --chalk: #c6cbd3;
  --graphite: #4f5a66;
  --green: #12ca93;
  --green-rgb: 18,202,147;
  --ivory: #f0f0f0;
  --light-gray: #f8f8f8;
  --minimum-gray: #637288;
  --purple: #8470be;
  --red: #e95f6a;
  --red-rgb: 233,95,106;
  --shale: #939eae;
  --slate: #384248;
  --white: #fff;
  --off-white: #fdfdfd;
  --yellow: #f7c543;
  --yellow-rgb: 247,197,67;
  --border-width: 1px;
  --border-radius: 5px;
  --border-radius-lg: calc(var(--border-radius) * 1.5);
  --box-shadow-menu-dark: 0 1px 3px rgba(0, 0, 0, 0.025), 0 2px 6px rgba(0, 0, 0, 0.025), 0 5px 10px rgba(0, 0, 0, 0.05);
  --box-shadow-menu-light: 0 5px 10px rgba(0, 0, 0, .05), 0 2px 6px rgba(0, 0, 0,.025), 0 1px 3px rgba(0, 0, 0, .025);
  --box-shadow-pill: inset 0 1px 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 2px 0 rgba(0, 0, 0, .2), 0 1px 2px 0 rgba(0, 0, 0, .05);
  --box-shadow-request: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 2px rgba(0, 0, 0, .1);
  --box-shadow-status: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 2px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .1);
  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  --font-family-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --font-weight-normal: 400;
  --font-weight: 500;
  --font-weight-bold: 600;
  --button-xs: 20px;
  --button-sm: 30px;
  --button-md: 40px;
  --button-lg: 50px;
  --icon-sm: 12px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --transition-fast: .15s;
  --transition-slow: .3s;
  --transition-timing: cubic-bezier(0.16, 1, 0.3, 1);
  --header-logo-height: 24px;
  --container: 1100px;
  --container-lg: 1440px;
  --hub-main-max-width: 800px;
  --hub-playground-width: 480px;
  --hub-sidebar-width: 280px;
  --hub-toc-width: 280px;
  --param-form-width: 140px;
  --dash-container-md: 1100px;
  --dash-container-lg: 1260px;
  --xxl: 120px;
  --xl: 80px;
  --lg: 40px;
  --md: 20px;
  --sm: 10px;
  --xs: 5px;
  --blue0: #002077;
  --blue10: #003290;
  --blue20: #0047aa;
  --blue30: #005dc5;
  --blue40: #0074e1;
  --blue50: #118cfd;
  --blue60: #619efe;
  --blue70: #8ab0ff;
  --blue80: #abc3ff;
  --blue90: #c8d7ff;
  --blue100: #e4ebff;
  --green0: #002e02;
  --green10: #00491f;
  --green20: #00683a;
  --green30: #008756;
  --green40: #00a874;
  --green50: #12ca93;
  --green60: #59d4a4;
  --green70: #81ddb6;
  --green80: #a3e6c8;
  --green90: #c3efda;
  --green100: #e1f7ec;
  --gray0: #12181b;
  --gray10: #242e34;
  --gray15: #303b42;
  --gray20: #384248;
  --gray30: #4f5a66;
  --gray40: #637288;
  --gray50: #7b889b;
  --gray60: #939eae;
  --gray70: #adb4c1;
  --gray80: #c6cbd3;
  --gray90: #f0f0f0;
  --gray100: #f8f8f8;
  --gray10-rgb: 36,46,52;
  --gray15-rgb: 48,59,66;
  --gray20-rgb: 48,59,66;
  --purple0: #110e4d;
  --purple10: #2a1f63;
  --purple20: #403278;
  --purple30: #56468f;
  --purple40: #6d5ba6;
  --purple50: #8470be;
  --purple60: #9987c9;
  --purple70: #ae9ed4;
  --purple80: #c2b5df;
  --purple90: #d6cdea;
  --purple100: #ebe6f4;
  --red0: #570000;
  --red10: #730014;
  --red20: #900027;
  --red30: #ad273c;
  --red40: #cb4452;
  --red50: #e95f6a;
  --red60: #f17c81;
  --red70: #f79799;
  --red80: #fcb1b2;
  --red90: #ffcbcb;
  --red100: #ffe5e5;
  --yellow0: #3e1d00;
  --yellow10: #5a3c00;
  --yellow20: #7d5b00;
  --yellow30: #a57d00;
  --yellow40: #cda017;
  --yellow50: #f7c543;
  --yellow60: #fcce66;
  --yellow70: #ffd885;
  --yellow80: #ffe1a4;
  --yellow90: #ffebc2;
  --yellow100: #fff5e0;
  --brown: #7a461c;
  --coral: #ff758c;
  --fuchsia: #cf66c3;
  --gold: #9d8714;
  --indigo: #6b7ede;
  --lavender: #abc3ff;
  --lime: #9ace5a;
  --olive: #837400;
  --orange: #fe8e4f;
  --pink: #e15ca5;
  --teal: #00b6e6;
  --tiffany: #00beaa;
  --blue-pastel: #a8edff;
  --green-pastel: #9bfff6;
  --orange-pastel: #f5bc90;
  --purple-pastel: #e8d0ff;
  --red-pastel: #ffc4c9;
  --yellow-pastel: #ffffa7;
  --white-rgb: 255,255,255;
  --lightGray: var(--light-gray);
  --minimumGray: var(--minimum-gray)
}

[data-color-mode='dark'] {
  --color-bg-page: var(--gray10);
  --color-bg-page-rgb: var(--gray10-rgb);
  --color-text-default: var(--white);
  --color-text-muted: var(--gray80);
  --color-text-minimum: var(--gray70);
  --color-text-minimum-hover: var(--gray80);
  --color-text-minimum-icon: rgba(173,180,193,0.6);
  --color-border-default: rgba(255,255,255,0.075);
  --color-skeleton: var(--gray20);
  --color-input-background: var(--gray20);
  --color-input-text: white;
  --color-input-border: #4c555a;
  --color-input-border-hover: #60686d
}

@media (prefers-color-scheme: dark) {
  [data-color-mode='auto'] {
    --color-bg-page: var(--gray10);
    --color-bg-page-rgb: var(--gray10-rgb);
    --color-text-default: var(--white);
    --color-text-muted: var(--gray80);
    --color-text-minimum: var(--gray70);
    --color-text-minimum-hover: var(--gray80);
    --color-text-minimum-icon: rgba(173,180,193,0.6);
    --color-border-default: rgba(255,255,255,0.075);
    --color-skeleton: var(--gray20);
    --color-input-background: var(--gray20);
    --color-input-text: white;
    --color-input-border: #4c555a;
    --color-input-border-hover: #60686d
  }
}

3. Add data-color-mode="dark" attribute to the HTML tag via the inspector

[rafegoldberg]

This PR was released!

🚀 Changes included in v6.53.1