@infonomic/uikit 3.8.0 → 3.9.0

package/src/styles/base/spacing.css

@@ -1,21 +1,24 @@
 @layer infonomic-base {
   :root {
-    /* ========================================
-       SPACING SYSTEM (8px grid)
-    ======================================== */
-    --spacing-0: 0px;
-    --spacing-1: 4px;
-    --spacing-2: 8px;
-    --spacing-3: 12px;
-    --spacing-4: 16px;
-    --spacing-5: 20px;
-    --spacing-6: 24px;
-    --spacing-8: 32px;
-    --spacing-10: 40px;
-    --spacing-12: 48px;
-    --spacing-16: 64px;
-    --spacing-20: 80px;
-    --spacing-24: 96px;
-    --spacing-32: 128px;
+  --spacing-0: 0;
+  --spacing-2: 0.125rem;
+  --spacing-4: 0.25rem;
+  --spacing-6: 0.375rem;
+  --spacing-8: 0.5rem;
+  --spacing-12: 0.75rem;
+  --spacing-16: 1rem;
+  --spacing-20: 1.25rem;
+  --spacing-24: 1.5rem;
+  --spacing-28: 1.75rem;
+  --spacing-32: 2rem;
+  --spacing-36: 2.25rem;
+  --spacing-40: 2.5rem;
+  --spacing-44: 2.75rem;
+  --spacing-48: 3rem;
+  --spacing-64: 4rem;
+  --spacing-80: 5rem;
+  --spacing-96: 6rem;
+  --spacing-112: 7rem;
+  --spacing-128: 8rem;
   }
 }

package/src/styles/functional/borders.css

@@ -0,0 +1,23 @@
+/**
+ * BORDER FUNCTIONAL TOKENS
+ * 
+ * Semantic tokens for borders, including colors and potentially
+ * widths, styles, and radii in the future.
+ */
+
+@layer infonomic-functional {
+  :root {
+    --border-color: var(--gray-100);
+  }
+
+  /* Dark mode */
+  .dark,
+  [data-theme="dark"] {
+    --border-color: var(--canvas-600);
+  }
+
+  /* Force light mode (local override) */
+  .not-dark {
+    --border-color: var(--gray-100);
+  }
+}

package/src/styles/functional/colors.css

@@ -26,28 +26,28 @@
        ----------------------------------------------------------------- */
     
     /* Fill tokens - for solid backgrounds (filled variant) */
-    --fill-primary-strong: var(--primary-600);
-    --fill-primary-strong-hover: oklch(from var(--primary-600) calc(l * 0.9) c h);
-    --fill-primary-strong-disabled: oklch(from var(--primary-600) calc(l * 1.1) calc(c * 0.85) h);
+    --fill-primary-strong: var(--primary-500);
+    --fill-primary-strong-hover: oklch(from var(--primary-500) calc(l * 0.9) c h);
+    --fill-primary-strong-disabled: oklch(from var(--primary-500) calc(l * 1.1) calc(c * 0.85) h);
     
     /* Weak fill - for subtle backgrounds (outlined hover states) */
-    --fill-primary-weak: oklch(from var(--primary-600) calc(l * 2.15) calc(c * 0.2) h);
+    --fill-primary-weak: oklch(from var(--primary-500) calc(l * 2.04) calc(c * 0.2) h);
     --fill-primary-weak-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
     
     /* Text tokens - for foreground colors */
     --text-on-primary: white; /* Text on primary fill */
     --text-on-primary-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
-    --text-primary-strong: var(--primary-700); /* Primary-colored text (outlined, text variants) */
-    --text-primary-weak: oklch(from var(--primary-600) calc(l * 0.7) c h); /* Muted primary text */
-    --text-primary-disabled: oklch(from var(--primary-700) calc(l * 1.5) calc(c * 0.5) h);
+    --text-primary-strong: var(--primary-600); /* Primary-colored text (outlined, text variants) */
+    --text-primary-weak: oklch(from var(--primary-500) calc(l * 0.7) c h); /* Muted primary text */
+    --text-primary-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
     
     /* Stroke tokens - for borders */
-    --stroke-primary: var(--primary-700);
-    --stroke-primary-hover: oklch(from var(--primary-700) calc(l * 0.85) c h);
-    --stroke-primary-disabled: oklch(from var(--primary-700) calc(l * 1.5) calc(c * 0.8) h);
+    --stroke-primary: var(--primary-600);
+    --stroke-primary-hover: oklch(from var(--primary-600) calc(l * 0.85) c h);
+    --stroke-primary-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.8) h);
     
     /* Ring tokens - for focus states */
-    --ring-primary: var(--primary-600);
+    --ring-primary: var(--primary-500);
     
     /* Gradient tokens */
     --gradient-primary-start: var(--primary-500);
@@ -210,53 +210,38 @@
     --gradient-danger-end: var(--red-700);
     --gradient-danger-foreground: white;
     --gradient-danger-disabled: oklch(from var(--red-700) calc(l * 1.2) calc(c * 0.85) h);
-
-    /* SURFACE TOKENS (for panels, dropdowns, menus, lists)
-       ----------------------------------------------------------------- */
-    
-    /* Panel/container backgrounds */
-    --surface-panel: var(--canvas-25);
-    --surface-panel-elevated: white; /* For dropdowns/popovers with shadow */
-    --surface-panel-border: var(--border-color);
-    
-    /* Item backgrounds (default transparent, inherits panel) */
-    --surface-item: transparent;
-    --surface-item-hover: var(--canvas-50);
-    --surface-item-active: var(--canvas-100);
-    
-    /* Item text colors */
-    --surface-item-text: var(--text);
-    --surface-item-text-hover: var(--text);
-    --surface-item-text-active: var(--text);
-    --surface-item-text-disabled: var(--gray-400);
-
-    /* Panel scrollers */
-    --surface-panel-scrollbar: var(--gray-50);
-    --surface-panel-scrollbar-thumb: var(--primary-100);
     
   }
 
-  /* ===================================================================
-     DARK MODE
-     =================================================================== */
-  .dark {
+  
+  /* 🌙 Dark via `.dark` class or [data-theme="dark"] attribute. 
+   * We rely on the consuming application to detect a user's 
+   * preferred color scheme - either by header or cookie, and to set 
+   * a root html class accordingly (for now), which unfortunately means
+   * relying on either a server-side render or JS to set the theme
+   * on initial load.
+   */
+  .dark,
+  [data-theme="dark"],
+  [data-theme="dark"] ::backdrop
+  {
     /* PRIMARY INTENT TOKENS (Dark Mode)
        ----------------------------------------------------------------- */
     
     /* Fill tokens */
-    --fill-primary-strong: var(--primary-600);
-    --fill-primary-strong-hover: oklch(from var(--primary-600) calc(l * 0.9) c h);
-    --fill-primary-strong-disabled: oklch(from var(--primary-600) calc(l * 0.85) calc(c * 0.85) h);
+    --fill-primary-strong: var(--primary-500);
+    --fill-primary-strong-hover: oklch(from var(--primary-500) calc(l * 0.9) c h);
+    --fill-primary-strong-disabled: oklch(from var(--primary-500) calc(l * 0.85) calc(c * 0.85) h);
     
     /* Weak fill - adjusted for dark backgrounds */
-    --fill-primary-weak: oklch(from var(--primary-600) calc(l * 0.45) calc(c * 0.1) h);
+    --fill-primary-weak: oklch(from var(--primary-500) calc(l * 0.45) calc(c * 0.1) h);
     --fill-primary-weak-hover: var(--canvas-800);
     
     /* Text tokens */
     --text-on-primary: white; /* Same as light mode */
     --text-on-primary-disabled: oklch(from white calc(l * 0.85) calc(c * 0.85) h);
     --text-primary-strong: var(--primary-100); /* Lighter for dark backgrounds */
-    --text-primary-weak: var(--primary-600); /* Used for text variant */
+    --text-primary-weak: var(--primary-500); /* Used for text variant */
     --text-primary-disabled: oklch(from var(--primary-100) calc(l * 0.8) calc(c * 0.8) h);
     
     /* Stroke tokens */
@@ -265,7 +250,7 @@
     --stroke-primary-disabled: oklch(from var(--primary-500) calc(l * 0.8) calc(c * 0.8) h);
     
     /* Ring tokens */
-    --ring-primary: var(--primary-600);
+    --ring-primary: var(--primary-500);
     
     /* Gradient tokens */
     --gradient-primary-start: var(--primary-500);
@@ -424,70 +409,42 @@
     --gradient-danger-foreground: white;
     --gradient-danger-disabled: oklch(from var(--red-700) calc(l * 0.85) calc(c * 0.85) h);
 
-    /* SURFACE TOKENS (Dark Mode)
-       ----------------------------------------------------------------- */
-    
-    /* Panel/container backgrounds - slightly elevated from canvas-900 base */
-    --surface-panel: var(--canvas-800);
-    --surface-panel-elevated: var(--canvas-800);
-    --surface-panel-border: var(--border-color);
-    
-    /* Item backgrounds - lighter than panel for hover/active */
-    --surface-item: transparent;
-    --surface-item-hover: var(--canvas-700);
-    --surface-item-active: var(--canvas-600);
-    
-    /* Item text colors */
-    --surface-item-text: var(--text);
-    --surface-item-text-hover: var(--text);
-    --surface-item-text-active: var(--text);
-    --surface-item-text-disabled: var(--gray-500);
-
-    /* Panel scrollers */
-    --surface-panel-scrollbar: var(--canvas-700);
-    --surface-panel-scrollbar-thumb: var(--primary-400);
   }
 
   /* ===================================================================
-     .NOT-DARK OVERRIDE
-  }
-
-  /* .not-dark override: Forces light mode tokens by re-declaring :root values.
-  * This duplication is intentional - it ensures .not-dark always wins over .dark
-  * regardless of DOM order, without needing complex :not() selectors.
-  * Alternative approaches (revert-layer, :not() patterns) would be more fragile.
+   * .NOT-DARK OVERRIDE
+   * .not-dark override: Forces light mode tokens by re-declaring :root values.
+   * This duplication is intentional - it ensures .not-dark always wins over .dark
+   * regardless of DOM order, without needing complex :not() selectors.
+   * Alternative approaches (revert-layer, :not() patterns) would be more fragile.
   */
-
-  /* ===================================================================
-     .NOT-DARK OVERRIDE
-     Forces light mode tokens regardless of parent .dark class
-     =================================================================== */
   .not-dark {
     /* PRIMARY INTENT TOKENS (Force Light Mode)
        ----------------------------------------------------------------- */
     
-    /* Fill tokens - identical to :root light mode */
-    --fill-primary-strong: var(--primary-600);
-    --fill-primary-strong-hover: oklch(from var(--primary-600) calc(l * 0.9) c h);
-    --fill-primary-strong-disabled: oklch(from var(--primary-600) calc(l * 1.1) calc(c * 0.85) h);
+    /* Fill tokens - for solid backgrounds (filled variant) */
+    --fill-primary-strong: var(--primary-500);
+    --fill-primary-strong-hover: oklch(from var(--primary-500) calc(l * 0.9) c h);
+    --fill-primary-strong-disabled: oklch(from var(--primary-500) calc(l * 1.1) calc(c * 0.85) h);
     
-    --fill-primary-weak: oklch(from var(--primary-600) calc(l * 2.15) calc(c * 0.2) h);
+    /* Weak fill - for subtle backgrounds (outlined hover states) */
+    --fill-primary-weak: oklch(from var(--primary-500) calc(l * 2.04) calc(c * 0.2) h);
     --fill-primary-weak-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
     
-    /* Text tokens */
-    --text-on-primary: white;
+    /* Text tokens - for foreground colors */
+    --text-on-primary: white; /* Text on primary fill */
     --text-on-primary-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
-    --text-primary-strong: var(--primary-700);
-    --text-primary-weak: oklch(from var(--primary-600) calc(l * 0.7) c h);
-    --text-primary-disabled: oklch(from var(--primary-700) calc(l * 1.5) calc(c * 0.5) h);
+    --text-primary-strong: var(--primary-600); /* Primary-colored text (outlined, text variants) */
+    --text-primary-weak: oklch(from var(--primary-500) calc(l * 0.7) c h); /* Muted primary text */
+    --text-primary-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
     
-    /* Stroke tokens */
-    --stroke-primary: var(--primary-700);
-    --stroke-primary-hover: oklch(from var(--primary-700) calc(l * 0.85) c h);
-    --stroke-primary-disabled: oklch(from var(--primary-700) calc(l * 1.5) calc(c * 0.8) h);
+    /* Stroke tokens - for borders */
+    --stroke-primary: var(--primary-600);
+    --stroke-primary-hover: oklch(from var(--primary-600) calc(l * 0.85) c h);
+    --stroke-primary-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.8) h);
     
-    /* Ring tokens */
-    --ring-primary: var(--primary-600);
+    /* Ring tokens - for focus states */
+    --ring-primary: var(--primary-500);
     
     /* Gradient tokens */
     --gradient-primary-start: var(--primary-500);

package/src/styles/functional/functional.css

@@ -1,2 +1,5 @@
 @import "./colors.css";
+@import "./surfaces.css";
+@import "./typography.css";
+@import "./borders.css";
 @import "./grid-flex.css";

package/src/styles/functional/grid-flex.css

@@ -26,19 +26,19 @@
        GAP SYSTEM (For Grid & Flexbox)
     ======================================== */
     --gap-0: var(--spacing-0);
-    --gap-1: var(--spacing-1);
-    --gap-2: var(--spacing-2);
-    --gap-3: var(--spacing-3);
-    --gap-4: var(--spacing-4);
-    --gap-5: var(--spacing-5);
+    --gap-1: var(--spacing-4);
+    --gap-2: var(--spacing-8);
+    --gap-3: var(--spacing-12);
+    --gap-4: var(--spacing-16);
+    --gap-5: var(--spacing-20);
     --gap-6: var(--spacing-6);
     --gap-8: var(--spacing-8);
-    --gap-10: var(--spacing-10);
-    --gap-12: var(--spacing-12);
-    --gap-16: var(--spacing-16);
-    --gap-20: var(--spacing-20);
-    --gap-24: var(--spacing-24);
-    --gap-32: var(--spacing-32);
+    --gap-10: var(--spacing-40);
+    --gap-12: var(--spacing-48);
+    --gap-16: var(--spacing-64);
+    --gap-20: var(--spacing-80);
+    --gap-24: var(--spacing-96);
+    --gap-32: var(--spacing-128);
 
     /* ========================================
        FLEXBOX HELPERS

package/src/styles/functional/surfaces.css

@@ -0,0 +1,115 @@
+/**
+ * SURFACE FUNCTIONAL TOKENS
+ * 
+ * Semantic tokens for surfaces, backgrounds, shadows, and depth.
+ * These tokens define the canvas on which content sits.
+ */
+
+@layer infonomic-functional {
+  :root {
+    --background: var(--canvas-25);
+    --foreground: var(--gray-900);
+    --shadow: var(--shadow-md);
+    --loader-color: var(--fill-primary-strong);
+
+    /* SURFACE TOKENS (for panels, dropdowns, menus, lists)
+       ----------------------------------------------------------------- */
+    
+    /* Panel/container backgrounds */
+    --surface-panel: var(--canvas-25);
+    --surface-panel-elevated: white; /* For dropdowns/popovers with shadow */
+    --surface-panel-border: var(--border-color);
+    
+    /* Item backgrounds (default transparent, inherits panel) */
+    --surface-item: transparent;
+    --surface-item-hover: var(--canvas-50);
+    --surface-item-active: var(--canvas-100);
+    
+    /* Item text colors */
+    --surface-item-text: var(--text);
+    --surface-item-text-hover: var(--text);
+    --surface-item-text-active: var(--text);
+    --surface-item-text-disabled: var(--gray-400);
+
+    /* Panel scrollers */
+    --surface-panel-scrollbar: var(--gray-50);
+    --surface-panel-scrollbar-thumb: var(--primary-100);
+  }
+
+  /* 🌙 Dark via `.dark` class or [data-theme="dark"] attribute. 
+   * We rely on the consuming application to detect a user's 
+   * preferred color scheme - either by header or cookie, and to set 
+   * a root html class accordingly (for now), which unfortunately means
+   * relying on either a server-side render or JS to set the theme
+   * on initial load.
+   */
+  .dark,
+  [data-theme="dark"],
+  [data-theme="dark"] ::backdrop 
+  {
+    --background: var(--canvas-900);
+    --foreground: var(--gray-50);
+    --shadow: var(--shadow-lg);
+    --loader-color: var(--fill-primary-strong);
+
+    /* SURFACE TOKENS (Dark Mode)
+       ----------------------------------------------------------------- */
+    
+    /* Panel/container backgrounds - slightly elevated from canvas-900 base */
+    --surface-panel: var(--canvas-800);
+    --surface-panel-elevated: var(--canvas-800);
+    --surface-panel-border: var(--border-color);
+    
+    /* Item backgrounds - lighter than panel for hover/active */
+    --surface-item: transparent;
+    --surface-item-hover: var(--canvas-700);
+    --surface-item-active: var(--canvas-600);
+    
+    /* Item text colors */
+    --surface-item-text: var(--text);
+    --surface-item-text-hover: var(--text);
+    --surface-item-text-active: var(--text);
+    --surface-item-text-disabled: var(--gray-500);
+
+    /* Panel scrollers */
+    --surface-panel-scrollbar: var(--canvas-700);
+    --surface-panel-scrollbar-thumb: var(--primary-400);
+  }
+
+  /* ===================================================================
+   * .NOT-DARK OVERRIDE
+   * .not-dark override: Forces light mode tokens by re-declaring :root values.
+   * This duplication is intentional - it ensures .not-dark always wins over .dark
+   * regardless of DOM order, without needing complex :not() selectors.
+   * Alternative approaches (revert-layer, :not() patterns) would be more fragile.
+  */
+  .not-dark {
+    --background: var(--canvas-25);
+    --foreground: var(--gray-900);
+    --shadow: var(--shadow-md);
+    --loader-color: var(--fill-primary-strong);
+
+    /* SURFACE TOKENS (for panels, dropdowns, menus, lists)
+       ----------------------------------------------------------------- */
+    
+    /* Panel/container backgrounds */
+    --surface-panel: var(--canvas-25);
+    --surface-panel-elevated: white; /* For dropdowns/popovers with shadow */
+    --surface-panel-border: var(--border-color);
+    
+    /* Item backgrounds (default transparent, inherits panel) */
+    --surface-item: transparent;
+    --surface-item-hover: var(--canvas-50);
+    --surface-item-active: var(--canvas-100);
+    
+    /* Item text colors */
+    --surface-item-text: var(--text);
+    --surface-item-text-hover: var(--text);
+    --surface-item-text-active: var(--text);
+    --surface-item-text-disabled: var(--gray-400);
+
+    /* Panel scrollers */
+    --surface-panel-scrollbar: var(--gray-50);
+    --surface-panel-scrollbar-thumb: var(--primary-100);
+  }
+}

package/src/styles/functional/typography.css

@@ -0,0 +1,44 @@
+/**
+ * TYPOGRAPHY FUNCTIONAL TOKENS
+ * 
+ * Semantic tokens for text colors and typography-related variables.
+ * Separate from typography.css in the typography/ directory which defines
+ * actual typographic styles and scales.
+ */
+
+@layer infonomic-functional {
+  :root {
+    --text: var(--gray-900);
+    --headings: var(--primary-700);
+    --muted: oklch(from var(--foreground) calc(l * 2) c h);
+  }
+
+  /* 🌙 Dark via `.dark` class or [data-theme="dark"] attribute. 
+   * We rely on the consuming application to detect a user's 
+   * preferred color scheme - either by header or cookie, and to set 
+   * a root html class accordingly (for now), which unfortunately means
+   * relying on either a server-side render or JS to set the theme
+   * on initial load.
+   */
+  .dark,
+  [data-theme="dark"],
+  [data-theme="dark"] ::backdrop 
+  {
+    --text: var(--gray-50);
+    --headings: var(--gray-50);
+    --muted: oklch(from var(--foreground) calc(l * 0.75) c h);
+  }
+
+  /* ===================================================================
+   * .NOT-DARK OVERRIDE
+   * .not-dark override: Forces light mode tokens by re-declaring :root values.
+   * This duplication is intentional - it ensures .not-dark always wins over .dark
+   * regardless of DOM order, without needing complex :not() selectors.
+   * Alternative approaches (revert-layer, :not() patterns) would be more fragile.
+  */
+  .not-dark {
+    --text: var(--gray-900);
+    --headings: var(--primary-800);
+    --muted: oklch(from var(--foreground) calc(l * 2) c h);
+  }
+}

package/src/styles/theme/autofill.css

@@ -32,10 +32,10 @@ select:-webkit-autofill:focus, select:autofill:focus {
     background-color: rgb(250, 217, 167) !important;
   }
 
-  /* 🌙 Dark via `.dark` class. We rely on the 
-   * consuming application to detect a user's preferred
-   * color scheme - either by header or cookie. and set
-   * a root html class accordingly
+  /* 🌙 Dark via `.dark` class or [data-theme="dark"] attribute. 
+   * We rely on the consuming application to detect a user's preferred
+   * color scheme - either by header or cookie, and set a root html
+   * class or data attribute accordingly.
    */
 
   .dark input:autofill,
@@ -46,7 +46,16 @@ select:-webkit-autofill:focus, select:autofill:focus {
   .dark textarea:autofill:focus,
   .dark select:autofill,
   .dark select:autofill:hover,
-  .dark select:autofill:focus {
+  .dark select:autofill:focus,
+  [data-theme="dark"] input:autofill,
+  [data-theme="dark"] input:autofill:hover,
+  [data-theme="dark"] input:autofill:focus,
+  [data-theme="dark"] textarea:autofill,
+  [data-theme="dark"] textarea:autofill:hover,
+  [data-theme="dark"] textarea:autofill:focus,
+  [data-theme="dark"] select:autofill,
+  [data-theme="dark"] select:autofill:hover,
+  [data-theme="dark"] select:autofill:focus {
     border: 1px solid var(--theme-600) !important;
     -webkit-text-fill-color: white !important;
     -webkit-box-shadow: 0 0 0px 1000px var(--theme-600) inset !important;

package/src/styles/theme/defaults.css

@@ -0,0 +1,75 @@
+/**
+ * HTML ELEMENT DEFAULTS
+ * 
+ * Opinionated starter styles for HTML elements to provide sensible defaults
+ * for new installations. These live in the infonomic-theme layer and are
+ * easily overridden by consuming applications.
+ */
+
+@layer infonomic-theme {
+  html {
+    font-size: 1rem;
+    color: var(--text);
+  }
+
+  /* Redeclared here to change the specificity and scope of --prose-body */
+  html .not-dark {
+    color: var(--text);
+  }
+
+  /* Default (light mode) */
+  ::selection {
+    background-color: var(--theme-600);
+    color: white;
+  }
+
+  /* Dark mode */
+  .dark ::selection,
+  [data-theme="dark"] ::selection {
+    background-color: var(--theme-200);
+    color: var(--gray-900);
+  }
+
+  /* Headings */
+  h1 {
+    font-size: 1.75rem;
+    font-weight: 600;
+    line-height: 1.125;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 1.125;
+  }
+
+  h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    line-height: 1.1;
+  }
+
+  h4 {
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.1;
+  }
+
+  /* External link indicator */
+  .external-link::after {
+    content: "";
+    display: inline-block;
+    background-image: url("/external-link-light.svg");
+    background-repeat: no-repeat;
+    background-position: 20% 50%;
+    background-size: 65% auto;
+    width: 1.1rem;
+    height: 1.1rem;
+    margin-right: -5px;
+  }
+
+  .dark .external-link::after,
+  [data-theme="dark"] .external-link::after {
+    background-image: url("/external-link-dark.svg");
+  }
+}

package/src/styles/theme/scrollers.css

@@ -5,7 +5,8 @@
   }
 
   /* rgb(44, 47, 86) = theme secondary 900  */
-  :root.dark {
+  :root.dark,
+  :root[data-theme="dark"] {
     --scroll-bar-thumb: var(--canvas-700);
     --scroll-bar-track: var(--canvas-900);
   }
@@ -39,7 +40,8 @@
     --scroll-bar-track: var(--scroll-bar-track);
   }
 
-  .dark .component--scroller {
+  .dark .component--scroller,
+  [data-theme="dark"] .component--scroller {
     --scroll-bar-thumb: var(--scroll-bar-thumb);
     --scroll-bar-track: var(--scroll-bar-track);
   }