@mattermost/compass-ui 0.1.0-alpha.2 → 0.1.0-alpha.20

package/README.md

@@ -8,17 +8,18 @@ Compass design system UI components for Mattermost products.
 npm install @mattermost/compass-ui
 ```
 
-Peer dependencies: `react`, `react-dom`, `@mattermost/compass-icons`, and optionally `simplebar-react`.
+Peer dependencies: `react`, `react-dom`, `@mattermost/compass-icons`, and `simplebar-react` (npm 7+ installs peers automatically).
 
 ## Usage
 
-Import styles once at your app entry:
+Import global styles once at your app entry:
 
 ```tsx
 import '@mattermost/compass-ui/styles';
-import '@mattermost/compass-ui/component-styles';
 ```
 
+Component CSS ships with each component import — no separate `component-styles` entry.
+
 Standalone hosts (Storybook, playground) also need theme presets and document chrome:
 
 ```tsx
@@ -30,15 +31,29 @@ Do not load `/styles/standalone` into Mattermost webapp (it already owns themes,
 Set a theme on `<html>` (standalone hosts):
 
 ```html
-<html data-theme="denim">
+<html data-theme="denim"></html>
 ```
 
-Import components:
+Import components from **subpaths** (one module graph per import — required for Jest and recommended for webpack):
 
 ```tsx
-import { Button } from '@mattermost/compass-ui';
+import { Button } from '@mattermost/compass-ui/components/button';
 ```
 
+The root barrel (`@mattermost/compass-ui`) remains for backwards compatibility but loads the full package.
+
+## Plugins and multiple copies
+
+The Mattermost webapp ships one copy of compass-ui and every plugin bundles its own, often at different versions, all on the same page. The package is built so that works:
+
+- **Bundle your own copy and import `@mattermost/compass-ui/styles`.** Every token is declared in a `compass-ui.*` cascade layer, so the stylesheet is safe to load more than once: unlayered host values with the same name (for example the webapp's `--radius-full: 50%` or `--elevation-*`) always win regardless of load order, and compass-only tokens such as `--spacing-xs` still resolve.
+- **Never import `@mattermost/compass-ui/styles/standalone` inside a host** such as the Mattermost webapp. Its theme presets override the user's theme.
+- **Keep your version close to the host's.** Versions up to `0.1.0-alpha.12` declare tokens unlayered; while one of those loads after the host's stylesheet, it can still override host values. Upgrading removes that.
+- **Tokens are additive-only.** Older copies stay on the page with newer ones, so a released token's name and value never change; new values get new tokens. The build snapshots every token (`tokens.snapshot.json`) and fails on removals or value changes. Use `--radius-pill` for pills; `--radius-full` is deprecated because the webapp defines it as `50%`.
+- **Don't wrap compass component CSS in cascade layers.** Hosts ship unlayered element rules (Bootstrap `button`, `input`) that would beat layered component styles. Only the token and vendor (SimpleBar) stylesheets are layered.
+
+Layer order, lowest priority first: `compass-ui.base`, `compass-ui.vendor`, `compass-ui.webapp-compat`, `compass-ui.tokens`, `compass-ui.themes`. The rationale lives in `src/styles/layers.scss`.
+
 ## Development
 
 From the monorepo root:
@@ -50,10 +65,13 @@ npm run storybook     # component catalog on :6006
 
 ## Package layout
 
-- `dist/index.js` / `dist/index.cjs` — component bundle (ESM + CJS)
-- `dist/compass-ui.css` — tokens and webapp-compat defaults (`./styles`)
-- `dist/compass-ui-standalone.css` — theme presets + CSS reset + `body` / heading chrome for standalone hosts (`./styles/standalone`)
-- `dist/index.css` — component CSS modules (injected at build; also available as `./component-styles`)
+- `dist/components/<name>/index.js` / `.cjs` — per-component subpaths (`@mattermost/compass-ui/components/<name>`)
+- `dist/hooks/<name>.js` / `.cjs` — hooks (`@mattermost/compass-ui/hooks/<name>`)
+- `dist/illustrations/<name>.js` / `.cjs` — brand SVG artwork (`@mattermost/compass-ui/illustrations/<name>`)
+- `dist/index.js` / `dist/index.cjs` — legacy root barrel (ESM + CJS)
+- `dist/compass-ui.css` — tokens and webapp-compat defaults, all in cascade layers (`./styles`)
+- `dist/compass-ui-standalone.css` — theme presets + CSS reset + `body` / heading chrome for standalone hosts, all in cascade layers (`./styles/standalone`)
+- `dist/components/<name>/*.css` — per-component CSS modules (side-effect imported with the component)
 
 ## Storybook
 

package/dist/compass-ui-standalone.css

@@ -1,269 +1,273 @@
-:root,
-[data-theme=denim] {
-  --sidebar-bg: var(--color-indigo-500);
-  --sidebar-bg-rgb: var(--color-indigo-500-rgb);
-  --sidebar-header-bg: #192a4d;
-  --sidebar-header-bg-rgb: 25, 42, 77;
-  --sidebar-teambar-bg: #162545;
-  --sidebar-teambar-bg-rgb: 22, 37, 69;
-  --sidebar-text: var(--color-neutral-0);
-  --sidebar-text-rgb: var(--color-neutral-0-rgb);
-  --sidebar-text-hover-bg: var(--color-indigo-400);
-  --sidebar-text-hover-bg-rgb: var(--color-indigo-400-rgb);
-  --sidebar-text-active-border: var(--color-blue-300);
-  --sidebar-text-active-border-rgb: var(--color-blue-300-rgb);
-  --sidebar-text-active-color: var(--color-neutral-0);
-  --sidebar-unread-text: var(--color-neutral-0);
-  --sidebar-header-text-color: var(--color-neutral-0);
-  --center-channel-bg: var(--color-neutral-0);
-  --center-channel-bg-rgb: var(--color-neutral-0-rgb);
-  --center-channel-color: var(--color-neutral-900);
-  --center-channel-color-rgb: var(--color-neutral-900-rgb);
-  --button-bg: var(--color-blue-500);
-  --button-bg-rgb: var(--color-blue-500-rgb);
-  --button-color: var(--color-neutral-0);
-  --button-color-rgb: var(--color-neutral-0-rgb);
-  --link-color: var(--color-blue-600);
-  --link-color-rgb: var(--color-blue-600-rgb);
-  --error-text: var(--color-red-400);
-  --error-text-color-rgb: var(--color-red-400-rgb);
-  --mention-bg: var(--color-neutral-0);
-  --mention-bg-rgb: var(--color-neutral-0-rgb);
-  --mention-color: var(--color-indigo-500);
-  --mention-color-rgb: var(--color-indigo-500-rgb);
-  --mention-highlight-bg: var(--color-yellow-200);
-  --mention-highlight-link: var(--color-neutral-1100);
-  --new-message-separator: var(--color-yellow-600);
-  --online-indicator: var(--color-green-500);
-  --away-indicator: var(--color-yellow-500);
-  --dnd-indicator: var(--color-red-400);
-  --calls-bg: var(--color-indigo-600);
-  --calls-bg-rgb: var(--color-indigo-600-rgb);
+@layer compass-ui.base, compass-ui.vendor, compass-ui.webapp-compat, compass-ui.tokens, compass-ui.themes;
+@layer compass-ui.themes {
+  :root,
+  [data-theme=denim] {
+    --sidebar-bg: var(--color-indigo-500);
+    --sidebar-bg-rgb: var(--color-indigo-500-rgb);
+    --sidebar-header-bg: #192a4d;
+    --sidebar-header-bg-rgb: 25, 42, 77;
+    --sidebar-teambar-bg: #162545;
+    --sidebar-teambar-bg-rgb: 22, 37, 69;
+    --sidebar-text: var(--color-neutral-0);
+    --sidebar-text-rgb: var(--color-neutral-0-rgb);
+    --sidebar-text-hover-bg: var(--color-indigo-400);
+    --sidebar-text-hover-bg-rgb: var(--color-indigo-400-rgb);
+    --sidebar-text-active-border: var(--color-blue-300);
+    --sidebar-text-active-border-rgb: var(--color-blue-300-rgb);
+    --sidebar-text-active-color: var(--color-neutral-0);
+    --sidebar-unread-text: var(--color-neutral-0);
+    --sidebar-header-text-color: var(--color-neutral-0);
+    --center-channel-bg: var(--color-neutral-0);
+    --center-channel-bg-rgb: var(--color-neutral-0-rgb);
+    --center-channel-color: var(--color-neutral-900);
+    --center-channel-color-rgb: var(--color-neutral-900-rgb);
+    --button-bg: var(--color-blue-500);
+    --button-bg-rgb: var(--color-blue-500-rgb);
+    --button-color: var(--color-neutral-0);
+    --button-color-rgb: var(--color-neutral-0-rgb);
+    --focus-ring-color: var(--button-bg);
+    --focus-ring-color-rgb: var(--button-bg-rgb);
+    --link-color: var(--color-blue-500);
+    --link-color-rgb: var(--color-blue-500-rgb);
+    --error-text: var(--color-red-400);
+    --error-text-color-rgb: var(--color-red-400-rgb);
+    --mention-bg: var(--color-neutral-0);
+    --mention-bg-rgb: var(--color-neutral-0-rgb);
+    --mention-color: var(--color-indigo-500);
+    --mention-color-rgb: var(--color-indigo-500-rgb);
+    --mention-highlight-bg: var(--color-yellow-200);
+    --mention-highlight-link: var(--color-neutral-1100);
+    --new-message-separator: var(--color-yellow-600);
+    --online-indicator: var(--color-green-500);
+    --away-indicator: var(--color-yellow-500);
+    --dnd-indicator: var(--color-red-400);
+    --calls-bg: var(--color-indigo-600);
+    --calls-bg-rgb: var(--color-indigo-600-rgb);
+  }
+  [data-theme=sapphire] {
+    --sidebar-bg: #1543a3;
+    --sidebar-bg-rgb: 21, 67, 163;
+    --sidebar-header-bg: #123b91;
+    --sidebar-header-bg-rgb: 18, 59, 145;
+    --sidebar-teambar-bg: #123582;
+    --sidebar-teambar-bg-rgb: 18, 53, 130;
+    --sidebar-text: var(--color-neutral-0);
+    --sidebar-text-rgb: var(--color-neutral-0-rgb);
+    --sidebar-text-hover-bg: #2a58ba;
+    --sidebar-text-hover-bg-rgb: 42, 88, 186;
+    --sidebar-text-active-border: var(--color-cyan-300);
+    --sidebar-text-active-border-rgb: var(--color-cyan-300-rgb);
+    --sidebar-text-active-color: var(--color-neutral-0);
+    --sidebar-unread-text: var(--color-neutral-0);
+    --sidebar-header-text-color: var(--color-neutral-0);
+    --center-channel-bg: var(--color-neutral-0);
+    --center-channel-bg-rgb: var(--color-neutral-0-rgb);
+    --center-channel-color: var(--color-neutral-900);
+    --center-channel-color-rgb: var(--color-neutral-900-rgb);
+    --button-bg: var(--color-blue-500);
+    --button-bg-rgb: var(--color-blue-500-rgb);
+    --button-color: var(--color-neutral-0);
+    --focus-ring-color: var(--button-bg);
+    --focus-ring-color-rgb: var(--button-bg-rgb);
+    --link-color: var(--color-blue-500);
+    --link-color-rgb: var(--color-blue-500-rgb);
+    --error-text: var(--color-red-300);
+    --error-text-color-rgb: var(--color-red-300-rgb);
+    --mention-bg: var(--color-neutral-0);
+    --mention-bg-rgb: var(--color-neutral-0-rgb);
+    --mention-color: #1543a3;
+    --mention-color-rgb: 21, 67, 163;
+    --mention-highlight-bg: var(--color-teal-200);
+    --mention-highlight-link: var(--color-teal-800);
+    --new-message-separator: var(--color-yellow-400);
+    --online-indicator: var(--color-green-500);
+    --away-indicator: var(--color-yellow-500);
+    --dnd-indicator: var(--color-red-400);
+    --calls-bg: #091d48;
+    --calls-bg-rgb: 9, 29, 72;
+  }
+  [data-theme=quartz] {
+    --sidebar-bg: var(--color-neutral-50);
+    --sidebar-bg-rgb: var(--color-neutral-50-rgb);
+    --sidebar-header-bg: #ebecef;
+    --sidebar-header-bg-rgb: 235, 236, 239;
+    --sidebar-teambar-bg: #e5e7eb;
+    --sidebar-teambar-bg-rgb: 229, 231, 235;
+    --sidebar-text: var(--color-neutral-1100);
+    --sidebar-text-rgb: var(--color-neutral-1100-rgb);
+    --sidebar-text-hover-bg: #e8eaed;
+    --sidebar-text-hover-bg-rgb: 232, 234, 237;
+    --sidebar-text-active-border: var(--color-cyan-500);
+    --sidebar-text-active-border-rgb: var(--color-cyan-500-rgb);
+    --sidebar-text-active-color: var(--color-neutral-1100);
+    --sidebar-unread-text: var(--color-neutral-1100);
+    --sidebar-header-text-color: var(--color-neutral-1100);
+    --center-channel-bg: var(--color-neutral-0);
+    --center-channel-bg-rgb: var(--color-neutral-0-rgb);
+    --center-channel-color: var(--color-neutral-900);
+    --center-channel-color-rgb: var(--color-neutral-900-rgb);
+    --button-bg: var(--color-blue-500);
+    --button-bg-rgb: var(--color-blue-500-rgb);
+    --button-color: var(--color-neutral-0);
+    --focus-ring-color: var(--button-bg);
+    --focus-ring-color-rgb: var(--button-bg-rgb);
+    --link-color: var(--color-blue-500);
+    --link-color-rgb: var(--color-blue-500-rgb);
+    --error-text: var(--color-red-400);
+    --error-text-color-rgb: var(--color-red-400-rgb);
+    --mention-bg: var(--color-blue-500);
+    --mention-bg-rgb: var(--color-blue-500-rgb);
+    --mention-color: var(--color-neutral-0);
+    --mention-color-rgb: var(--color-neutral-0-rgb);
+    --mention-highlight-bg: var(--color-teal-200);
+    --mention-highlight-link: var(--color-teal-800);
+    --new-message-separator: var(--color-teal-600);
+    --online-indicator: var(--color-green-500);
+    --away-indicator: var(--color-yellow-500);
+    --dnd-indicator: var(--color-red-400);
+    --calls-bg: var(--color-neutral-1050);
+    --calls-bg-rgb: var(--color-neutral-1050-rgb);
+  }
+  [data-theme=indigo] {
+    --sidebar-bg: #151e32;
+    --sidebar-bg-rgb: 21, 30, 50;
+    --sidebar-header-bg: #182339;
+    --sidebar-header-bg-rgb: 24, 35, 57;
+    --sidebar-teambar-bg: #1c2740;
+    --sidebar-teambar-bg-rgb: 28, 39, 64;
+    --sidebar-text: var(--color-neutral-0);
+    --sidebar-text-rgb: var(--color-neutral-0-rgb);
+    --sidebar-text-hover-bg: #222c3f;
+    --sidebar-text-hover-bg-rgb: 34, 44, 63;
+    --sidebar-text-active-border: #4a7ce8;
+    --sidebar-text-active-border-rgb: 74, 124, 232;
+    --sidebar-text-active-color: var(--color-neutral-0);
+    --sidebar-unread-text: var(--color-neutral-0);
+    --sidebar-header-text-color: var(--color-neutral-0);
+    --center-channel-bg: #111827;
+    --center-channel-bg-rgb: 17, 24, 39;
+    --center-channel-color: var(--color-neutral-150);
+    --center-channel-color-rgb: var(--color-neutral-150-rgb);
+    --button-bg: #4a7ce8;
+    --button-bg-rgb: 74, 124, 232;
+    --button-color: var(--color-neutral-0);
+    --focus-ring-color: var(--button-bg);
+    --focus-ring-color-rgb: var(--button-bg-rgb);
+    --link-color: var(--color-blue-300);
+    --link-color-rgb: var(--color-blue-300-rgb);
+    --error-text: var(--color-red-300);
+    --error-text-color-rgb: var(--color-red-300-rgb);
+    --mention-bg: #4a7ce8;
+    --mention-bg-rgb: 74, 124, 232;
+    --mention-color: var(--color-neutral-0);
+    --mention-color-rgb: var(--color-neutral-0-rgb);
+    --mention-highlight-bg: var(--color-blue-700);
+    --mention-highlight-link: var(--color-teal-100);
+    --new-message-separator: var(--color-yellow-400);
+    --online-indicator: var(--color-green-500);
+    --away-indicator: var(--color-yellow-500);
+    --dnd-indicator: var(--color-red-400);
+    --calls-bg: #222c3f;
+    --calls-bg-rgb: 34, 44, 63;
+  }
+  [data-theme=onyx] {
+    --sidebar-bg: #202228;
+    --sidebar-bg-rgb: 32, 34, 40;
+    --sidebar-header-bg: #24272d;
+    --sidebar-header-bg-rgb: 36, 39, 45;
+    --sidebar-teambar-bg: #292c33;
+    --sidebar-teambar-bg-rgb: 41, 44, 51;
+    --sidebar-text: var(--color-neutral-0);
+    --sidebar-text-rgb: var(--color-neutral-0-rgb);
+    --sidebar-text-hover-bg: #25262a;
+    --sidebar-text-hover-bg-rgb: 37, 38, 42;
+    --sidebar-text-active-border: #4a7ce8;
+    --sidebar-text-active-border-rgb: 74, 124, 232;
+    --sidebar-text-active-color: var(--color-neutral-0);
+    --sidebar-unread-text: var(--color-neutral-0);
+    --sidebar-header-text-color: var(--color-neutral-0);
+    --center-channel-bg: #191b1f;
+    --center-channel-bg-rgb: 25, 27, 31;
+    --center-channel-color: var(--color-neutral-150);
+    --center-channel-color-rgb: var(--color-neutral-150-rgb);
+    --button-bg: #4a7ce8;
+    --button-bg-rgb: 74, 124, 232;
+    --button-color: var(--color-neutral-0);
+    --focus-ring-color: var(--button-bg);
+    --focus-ring-color-rgb: var(--button-bg-rgb);
+    --link-color: var(--color-blue-300);
+    --link-color-rgb: var(--color-blue-300-rgb);
+    --error-text: var(--color-red-300);
+    --error-text-color-rgb: var(--color-red-300-rgb);
+    --mention-bg: #4a7ce8;
+    --mention-bg-rgb: 74, 124, 232;
+    --mention-color: var(--color-neutral-0);
+    --mention-color-rgb: var(--color-neutral-0-rgb);
+    --mention-highlight-bg: var(--color-teal-800);
+    --mention-highlight-link: var(--color-teal-100);
+    --new-message-separator: var(--color-yellow-400);
+    --online-indicator: var(--color-green-500);
+    --away-indicator: var(--color-yellow-500);
+    --dnd-indicator: var(--color-red-400);
+    --calls-bg: #24262d;
+    --calls-bg-rgb: 36, 38, 45;
+  }
 }
-
-[data-theme=sapphire] {
-  --sidebar-bg: #1543a3;
-  --sidebar-bg-rgb: 21, 67, 163;
-  --sidebar-header-bg: #123b91;
-  --sidebar-header-bg-rgb: 18, 59, 145;
-  --sidebar-teambar-bg: #123582;
-  --sidebar-teambar-bg-rgb: 18, 53, 130;
-  --sidebar-text: var(--color-neutral-0);
-  --sidebar-text-rgb: var(--color-neutral-0-rgb);
-  --sidebar-text-hover-bg: #2a58ba;
-  --sidebar-text-hover-bg-rgb: 42, 88, 186;
-  --sidebar-text-active-border: var(--color-cyan-300);
-  --sidebar-text-active-border-rgb: var(--color-cyan-300-rgb);
-  --sidebar-text-active-color: var(--color-neutral-0);
-  --sidebar-unread-text: var(--color-neutral-0);
-  --sidebar-header-text-color: var(--color-neutral-0);
-  --center-channel-bg: var(--color-neutral-0);
-  --center-channel-bg-rgb: var(--color-neutral-0-rgb);
-  --center-channel-color: var(--color-neutral-900);
-  --center-channel-color-rgb: var(--color-neutral-900-rgb);
-  --button-bg: var(--color-blue-500);
-  --button-bg-rgb: var(--color-blue-500-rgb);
-  --button-color: var(--color-neutral-0);
-  --link-color: var(--color-blue-600);
-  --link-color-rgb: var(--color-blue-600-rgb);
-  --error-text: var(--color-red-300);
-  --error-text-color-rgb: var(--color-red-300-rgb);
-  --mention-bg: var(--color-neutral-0);
-  --mention-bg-rgb: var(--color-neutral-0-rgb);
-  --mention-color: #1543a3;
-  --mention-color-rgb: 21, 67, 163;
-  --mention-highlight-bg: var(--color-teal-200);
-  --mention-highlight-link: var(--color-teal-800);
-  --new-message-separator: var(--color-yellow-400);
-  --online-indicator: var(--color-green-500);
-  --away-indicator: var(--color-yellow-500);
-  --dnd-indicator: var(--color-red-400);
-  --calls-bg: #091d48;
-  --calls-bg-rgb: 9, 29, 72;
+@layer compass-ui.base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+  html {
+    font-size: 100%;
+    -webkit-text-size-adjust: 100%;
+  }
+  img,
+  svg {
+    display: block;
+    max-width: 100%;
+  }
+  button {
+    cursor: pointer;
+    font-family: inherit;
+    border: none;
+    background: none;
+  }
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+  ul,
+  ol {
+    list-style: none;
+  }
+  input,
+  textarea,
+  select,
+  kbd {
+    font-family: inherit;
+    font-size: inherit;
+  }
 }
-
-[data-theme=quartz] {
-  --sidebar-bg: var(--color-neutral-50);
-  --sidebar-bg-rgb: var(--color-neutral-50-rgb);
-  --sidebar-header-bg: #ebecef;
-  --sidebar-header-bg-rgb: 235, 236, 239;
-  --sidebar-teambar-bg: #e5e7eb;
-  --sidebar-teambar-bg-rgb: 229, 231, 235;
-  --sidebar-text: var(--color-neutral-1100);
-  --sidebar-text-rgb: var(--color-neutral-1100-rgb);
-  --sidebar-text-hover-bg: #e8eaed;
-  --sidebar-text-hover-bg-rgb: 232, 234, 237;
-  --sidebar-text-active-border: var(--color-cyan-500);
-  --sidebar-text-active-border-rgb: var(--color-cyan-500-rgb);
-  --sidebar-text-active-color: var(--color-neutral-1100);
-  --sidebar-unread-text: var(--color-neutral-1100);
-  --sidebar-header-text-color: var(--color-neutral-1100);
-  --center-channel-bg: var(--color-neutral-0);
-  --center-channel-bg-rgb: var(--color-neutral-0-rgb);
-  --center-channel-color: var(--color-neutral-900);
-  --center-channel-color-rgb: var(--color-neutral-900-rgb);
-  --button-bg: var(--color-blue-500);
-  --button-bg-rgb: var(--color-blue-500-rgb);
-  --button-color: var(--color-neutral-0);
-  --link-color: var(--color-blue-600);
-  --link-color-rgb: var(--color-blue-600-rgb);
-  --error-text: var(--color-red-400);
-  --error-text-color-rgb: var(--color-red-400-rgb);
-  --mention-bg: var(--color-blue-500);
-  --mention-bg-rgb: var(--color-blue-500-rgb);
-  --mention-color: var(--color-neutral-0);
-  --mention-color-rgb: var(--color-neutral-0-rgb);
-  --mention-highlight-bg: var(--color-teal-200);
-  --mention-highlight-link: var(--color-teal-800);
-  --new-message-separator: var(--color-teal-600);
-  --online-indicator: var(--color-green-500);
-  --away-indicator: var(--color-yellow-500);
-  --dnd-indicator: var(--color-red-400);
-  --calls-bg: var(--color-neutral-1050);
-  --calls-bg-rgb: var(--color-neutral-1050-rgb);
-}
-
-[data-theme=indigo] {
-  --sidebar-bg: #151e32;
-  --sidebar-bg-rgb: 21, 30, 50;
-  --sidebar-header-bg: #182339;
-  --sidebar-header-bg-rgb: 24, 35, 57;
-  --sidebar-teambar-bg: #1c2740;
-  --sidebar-teambar-bg-rgb: 28, 39, 64;
-  --sidebar-text: var(--color-neutral-0);
-  --sidebar-text-rgb: var(--color-neutral-0-rgb);
-  --sidebar-text-hover-bg: #222c3f;
-  --sidebar-text-hover-bg-rgb: 34, 44, 63;
-  --sidebar-text-active-border: #4a7ce8;
-  --sidebar-text-active-border-rgb: 74, 124, 232;
-  --sidebar-text-active-color: var(--color-neutral-0);
-  --sidebar-unread-text: var(--color-neutral-0);
-  --sidebar-header-text-color: var(--color-neutral-0);
-  --center-channel-bg: #111827;
-  --center-channel-bg-rgb: 17, 24, 39;
-  --center-channel-color: var(--color-neutral-150);
-  --center-channel-color-rgb: var(--color-neutral-150-rgb);
-  --button-bg: #4a7ce8;
-  --button-bg-rgb: 74, 124, 232;
-  --button-color: var(--color-neutral-0);
-  --link-color: var(--color-blue-300);
-  --link-color-rgb: var(--color-blue-300-rgb);
-  --error-text: var(--color-red-300);
-  --error-text-color-rgb: var(--color-red-300-rgb);
-  --mention-bg: #4a7ce8;
-  --mention-bg-rgb: 74, 124, 232;
-  --mention-color: var(--color-neutral-0);
-  --mention-color-rgb: var(--color-neutral-0-rgb);
-  --mention-highlight-bg: var(--color-blue-700);
-  --mention-highlight-link: var(--color-teal-100);
-  --new-message-separator: var(--color-yellow-400);
-  --online-indicator: var(--color-green-500);
-  --away-indicator: var(--color-yellow-500);
-  --dnd-indicator: var(--color-red-400);
-  --calls-bg: #222c3f;
-  --calls-bg-rgb: 34, 44, 63;
-}
-
-[data-theme=onyx] {
-  --sidebar-bg: #202228;
-  --sidebar-bg-rgb: 32, 34, 40;
-  --sidebar-header-bg: #24272d;
-  --sidebar-header-bg-rgb: 36, 39, 45;
-  --sidebar-teambar-bg: #292c33;
-  --sidebar-teambar-bg-rgb: 41, 44, 51;
-  --sidebar-text: var(--color-neutral-0);
-  --sidebar-text-rgb: var(--color-neutral-0-rgb);
-  --sidebar-text-hover-bg: #25262a;
-  --sidebar-text-hover-bg-rgb: 37, 38, 42;
-  --sidebar-text-active-border: #4a7ce8;
-  --sidebar-text-active-border-rgb: 74, 124, 232;
-  --sidebar-text-active-color: var(--color-neutral-0);
-  --sidebar-unread-text: var(--color-neutral-0);
-  --sidebar-header-text-color: var(--color-neutral-0);
-  --center-channel-bg: #191b1f;
-  --center-channel-bg-rgb: 25, 27, 31;
-  --center-channel-color: var(--color-neutral-150);
-  --center-channel-color-rgb: var(--color-neutral-150-rgb);
-  --button-bg: #4a7ce8;
-  --button-bg-rgb: 74, 124, 232;
-  --button-color: var(--color-neutral-0);
-  --link-color: var(--color-blue-300);
-  --link-color-rgb: var(--color-blue-300-rgb);
-  --error-text: var(--color-red-300);
-  --error-text-color-rgb: var(--color-red-300-rgb);
-  --mention-bg: #4a7ce8;
-  --mention-bg-rgb: 74, 124, 232;
-  --mention-color: var(--color-neutral-0);
-  --mention-color-rgb: var(--color-neutral-0-rgb);
-  --mention-highlight-bg: var(--color-teal-800);
-  --mention-highlight-link: var(--color-teal-100);
-  --new-message-separator: var(--color-yellow-400);
-  --online-indicator: var(--color-green-500);
-  --away-indicator: var(--color-yellow-500);
-  --dnd-indicator: var(--color-red-400);
-  --calls-bg: #24262d;
-  --calls-bg-rgb: 36, 38, 45;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-size: 100%;
-  -webkit-text-size-adjust: 100%;
-}
-
-img,
-svg {
-  display: block;
-  max-width: 100%;
-}
-
-button {
-  cursor: pointer;
-  font-family: inherit;
-  border: none;
-  background: none;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-ul,
-ol {
-  list-style: none;
-}
-
-input,
-textarea,
-select,
-kbd {
-  font-family: inherit;
-  font-size: inherit;
-}
-
-body {
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-100);
-  line-height: var(--line-height-100);
-  color: var(--center-channel-color);
-  background-color: var(--center-channel-bg);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--font-family-heading);
+@layer compass-ui.base {
+  body {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-100);
+    line-height: var(--line-height-100);
+    color: var(--center-channel-color);
+    background-color: var(--center-channel-bg);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-family-heading);
+  }
 }