@mindlogic-ai/logician-ui 3.1.0-alpha.8 → 3.1.0

package/src/hooks/useHasHover.ts

@@ -0,0 +1,32 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Returns whether the primary pointing device is capable of hovering
+ * (i.e. a mouse/trackpad rather than a touchscreen).
+ *
+ * Useful for components that rely on hover interactions on desktop but need a
+ * tap/click affordance on touch devices, where hover events never fire.
+ *
+ * Defaults to `true` so server-rendered markup matches the most common
+ * (desktop) case, then resolves to the real value after mount.
+ */
+export const useHasHover = () => {
+  const [hasHover, setHasHover] = useState(true);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+
+    const mql = window.matchMedia('(hover: hover)');
+    const update = () => setHasHover(mql.matches);
+
+    update();
+    mql.addEventListener('change', update);
+    return () => mql.removeEventListener('change', update);
+  }, []);
+
+  return hasHover;
+};
+
+export default useHasHover;

package/src/index.ts

@@ -102,6 +102,7 @@ export {
 } from './components/Typography';
 
 // Hooks
+export { useHasHover } from './hooks/useHasHover';
 export type { LanguageContextValue } from './hooks/useLanguage';
 export { LanguageContext, useLanguage } from './hooks/useLanguage';
 

package/src/theme/SemanticTokens.mdx

@@ -34,7 +34,7 @@ primitive depending on the active color mode.
 Two payoffs:
 
 1. **Dark mode for free.** Add `color="fg.default"` and it's `gray.1300` in
-   light and `gray.50` in dark — no `useColorMode`, no conditionals.
+   light and a light neutral in dark — no `useColorMode`, no conditionals.
 2. **Intent, not value.** `border.subtle` always reads as "a low-emphasis
    divider," whatever the mode. The intent is encoded once, in the theme.
 
@@ -49,21 +49,38 @@ have no semantic meaning.
 These cover text, surfaces, and borders — the bulk of any UI. Each flips
 between a light and a dark value.
 
+> **Dark neutrals are desaturated.** The `Dark` columns below name the `gray`
+> step each token mirrors, but in dark mode every neutral actually resolves to a
+> _halved-saturation_ counterpart of that step (the blue-tinted `gray` ramp is
+> right for light surfaces but muddy as a dark one). Light values are exactly the
+> named `gray` step. You never reference the desaturated values directly — use
+> the tokens.
+
 ### Foreground — `fg.*` (text & icons)
 
 | Token | Light | Dark | Use for |
 | --- | --- | --- | --- |
-| `fg.default` | `gray.1300` | `gray.200` | Primary text, headings, icons |
-| `fg.muted` | `gray.900` | `gray.300` | Secondary text, captions, supporting icons |
-| `fg.subtle` | `gray.700` | `gray.600` | Tertiary text, placeholders, disabled-ish labels |
+| `fg.emphasized` | `gray.1300` | `gray.200` | Headings, titles, key figures, strong emphasis |
+| `fg.default` | `gray.1000` | `gray.300` | Primary **body** text |
+| `fg.muted` | `gray.900` | `gray.400` | Secondary text, captions, supporting icons |
+| `fg.subtle` | `gray.700` | `gray.600`† | Tertiary text, placeholders, icons |
 | `fg.inverse` | `gray.0` | `gray.1400` | Text on an **inverse** surface (e.g. tooltip) |
 
+† `fg.subtle`'s dark value is bumped one step lighter than the straight mirror so
+helper/secondary text clears WCAG AA 4.5:1 on `bg.muted`.
+
+> `fg.default` is the body weight; `fg.emphasized` is the strongest step (the
+> near-black `gray.1300` `fg.default` used to be). Reach for `emphasized` only
+> when you want maximum contrast — headings, key numbers.
+
 ### Background — `bg.*` (surfaces & fills)
 
 | Token | Light | Dark | Use for |
 | --- | --- | --- | --- |
 | `bg.canvas` | `gray.0` | `gray.1500` | App/page background |
 | `bg.surface` | `white` | `gray.1400` | Raised surface — cards, popovers, menus, modals |
+| `bg.raised` | `white` | `gray.1100` | Strongly-raised neutral — one level above `surface` (e.g. a selected segment); tops the dark ramp so it reads as lifted |
+| `bg.sunken` | `gray.50` | `gray.1500` | Sunken page wash for list/overview surfaces, so `bg.surface` cards read as raised above it |
 | `bg.subtle` | `gray.50` | `gray.1300` | Subtle fill, hover background, secondary surface |
 | `bg.muted` | `gray.100` | `gray.1200` | Muted fill, tertiary surface, neutral chips |
 | `bg.inverse` | `gray.1300` | `gray.50` | High-contrast/inverse surface (flips with mode) |
@@ -86,6 +103,30 @@ between a light and a dark value.
 </Box>
 ```
 
+### `slate.*` — foundational mode-aware neutral family
+
+`slate.0`–`slate.1500` is a **first-class neutral palette**, sitting alongside
+the raw `gray.*` primitives but **mode-aware**: `slate.N` is `gray.N` in light
+and the desaturated counterpart in dark, so one token holds the same tonal level
+in both modes (`slate.300` is a light divider in light and the matching dark
+divider in dark — no `_dark={{…}}` at the call site). It lives under
+`semanticTokens` only because Chakra requires that for the `_dark` flip;
+conceptually it's a **foundation** (a tonal scale), not a **role**.
+
+```tsx
+// Use a role token when one matches the intent (carries semantics + AA tuning):
+<Text color="fg.muted" />
+
+// Reach for slate when you need a specific neutral step no role names — the
+// mode-aware equivalent of dropping to a raw gray.N:
+<Box borderColor="slate.300" bg="slate.50" />
+```
+
+> `slate` and the role tokens (`fg`/`bg`/`border`) are **distinct ramps** —
+> `slate` is a mechanical light↔dark mirror, while the roles carry hand-tuned
+> dark values (AA bumps, hierarchy). They share light values but **diverge in
+> dark**, so they are not drop-in interchangeable. Pick by intent, not by value.
+
 ---
 
 ## The brand tokens
@@ -110,6 +151,18 @@ flips in dark mode:
 In dark mode these steps lighten so they keep contrast on dark surfaces — e.g.
 `primary.main` is `blue.500` in light and lifts to `blue.300` in dark.
 
+### Solid brand fills — `primary.fill` / `primary.fillStrong`
+
+For a **solid blue surface with white text/icons on top** (modal headers, hero
+banners, brand badges), use `primary.fill` (or `primary.fillStrong` for a deeper
+shade) rather than `primary.main`. The `*.main`/`*.dark` steps lighten in dark —
+right for foreground, but too light to carry white text as a fill — so the
+`fill*` tokens stay deep blue in both modes.
+
+```tsx
+<ModalHeader bg="primary.fill" color="white">Upgrade</ModalHeader>
+```
+
 ---
 
 ## Migration cheat-sheet
@@ -119,9 +172,10 @@ the nearest semantic token:
 
 | Was (primitive) | Use (semantic) |
 | --- | --- |
-| `gray.1000`–`gray.1500` as text | `fg.default` |
-| `gray.800`–`gray.900` as text | `fg.muted` |
-| `gray.500`–`gray.700` as text/icon | `fg.subtle` |
+| `gray.1200`–`gray.1500` as heading/strong text | `fg.emphasized` |
+| `gray.1000`–`gray.1100` as body text | `fg.default` |
+| `gray.900` as secondary text | `fg.muted` |
+| `gray.500`–`gray.800` as tertiary text/icon | `fg.subtle` |
 | `white` / `gray.0` surface | `bg.surface` / `bg.canvas` |
 | `gray.50` / `gray.100` fill | `bg.subtle` / `bg.muted` |
 | `gray.200` / `gray.300` border | `border.subtle` / `border.default` |

package/src/theme/colors.ts

@@ -60,6 +60,37 @@
  * <Badge bgColor="success.lightest" color="success.dark" />
  * ```
  */
+/**
+ * Halved-saturation counterpart of each primitive `gray.N` — same hue and
+ * lightness, HSL saturation cut by ~50% (e.g. `gray.1300` #1E2433 @ 26% →
+ * #23262E @ 13%). The blue-tinted `gray` ramp reads as the right neutral in
+ * light mode but turns muddy/over-chromatic as a dark surface, so every
+ * dark-mode neutral below (`slate.*`, and the `_dark` of `bg`/`fg`/`border`)
+ * resolves to this desaturated mirror instead of the raw `gray` step. Light
+ * mode is untouched — it keeps referencing `{colors.gray.*}` verbatim.
+ *
+ * Single source of truth: change a dark neutral here, not at each token.
+ */
+const desaturatedGray = {
+  0: '#FEFEFF',
+  50: '#F8F9FB',
+  100: '#F2F4F7',
+  200: '#E5E8EC',
+  300: '#D2D5DB',
+  400: '#B6BAC3',
+  500: '#A2A6B1',
+  600: '#8E939F',
+  700: '#7C818D',
+  800: '#6A6F7C',
+  900: '#595E6B',
+  1000: '#4A4E5A',
+  1100: '#3C404B',
+  1200: '#30343C',
+  1300: '#23262E',
+  1400: '#181A20',
+  1500: '#0E1014',
+} as const;
+
 export const semanticTokens = {
   colors: {
     /**
@@ -97,6 +128,18 @@ export const semanticTokens = {
       darker: {
         value: { base: '{colors.blue.900}', _dark: '{colors.blue.100}' },
       }, // high-contrast text
+      // Solid brand-blue *fills* for surfaces with white text/icons on top
+      // (modal headers, hero/banner gradients, brand badges). `primary.main`/
+      // `primary.dark` lighten ~2 stops in dark — right for foreground, too
+      // light as a fill — so these stay a deep blue in dark instead. `base`
+      // repeats the old main/dark values, so light is unchanged. Bare accents
+      // (dots, progress bars) keep `primary.main`.
+      fill: {
+        value: { base: '{colors.blue.500}', _dark: '{colors.blue.700}' },
+      },
+      fillStrong: {
+        value: { base: '{colors.blue.700}', _dark: '{colors.blue.800}' },
+      },
     },
 
     /**
@@ -234,6 +277,77 @@ export const semanticTokens = {
       },
     },
 
+    /**
+     * `slate.*` — the foundational **mode-aware neutral family**.
+     *
+     * A first-class neutral palette alongside the raw `gray.*` primitives, but
+     * mode-aware: each `slate.N` resolves to `gray.N` in light and to the
+     * desaturated counterpart of the *mirrored* step in dark, so a single token
+     * carries the same tonal level in both modes (e.g. `slate.300` is a light
+     * divider in light and the equivalent dark divider in dark — no `_dark={{…}}`
+     * at the call site). It lives under `semanticTokens` only because Chakra
+     * requires that for the `_dark` flip; conceptually it is a *foundation*
+     * (a tonal scale), not a *role*.
+     *
+     * When to use which:
+     * - Prefer the **role tokens** (`fg`/`bg`/`border`) when one matches the
+     *   intent — they carry semantics and AA-tuned dark values.
+     * - Reach for **`slate.N`** when you need a specific neutral tonal step that
+     *   no role names (mirroring how you'd otherwise drop to a raw `gray.N`, but
+     *   keeping the dark flip). `slate` and the role tokens are *distinct* ramps
+     *   (slate is a mechanical mirror; roles are hand-tuned), so they are not
+     *   interchangeable in dark mode.
+     *
+     * `600`/`700` are lifted off the straight mirror (#8E939F/#7C818D) so the
+     * secondary/muted text they most often carry clears WCAG AA 4.5:1 on the
+     * dark canvas/surface — the straight mirrors measured ~3.0–3.9 there.
+     */
+    slate: {
+      0: { value: { base: '{colors.gray.0}', _dark: desaturatedGray[1500] } },
+      50: { value: { base: '{colors.gray.50}', _dark: desaturatedGray[1400] } },
+      100: {
+        value: { base: '{colors.gray.100}', _dark: desaturatedGray[1300] },
+      },
+      200: {
+        value: { base: '{colors.gray.200}', _dark: desaturatedGray[1200] },
+      },
+      300: {
+        value: { base: '{colors.gray.300}', _dark: desaturatedGray[1100] },
+      },
+      400: {
+        value: { base: '{colors.gray.400}', _dark: desaturatedGray[1000] },
+      },
+      500: {
+        value: { base: '{colors.gray.500}', _dark: desaturatedGray[900] },
+      },
+      600: { value: { base: '{colors.gray.600}', _dark: '#898E99' } },
+      700: { value: { base: '{colors.gray.700}', _dark: '#8D919D' } },
+      800: {
+        value: { base: '{colors.gray.800}', _dark: desaturatedGray[600] },
+      },
+      900: {
+        value: { base: '{colors.gray.900}', _dark: desaturatedGray[500] },
+      },
+      1000: {
+        value: { base: '{colors.gray.1000}', _dark: desaturatedGray[400] },
+      },
+      1100: {
+        value: { base: '{colors.gray.1100}', _dark: desaturatedGray[300] },
+      },
+      1200: {
+        value: { base: '{colors.gray.1200}', _dark: desaturatedGray[200] },
+      },
+      1300: {
+        value: { base: '{colors.gray.1300}', _dark: desaturatedGray[100] },
+      },
+      1400: {
+        value: { base: '{colors.gray.1400}', _dark: desaturatedGray[50] },
+      },
+      1500: {
+        value: { base: '{colors.gray.1500}', _dark: desaturatedGray[0] },
+      },
+    },
+
     /**
      * Neutral background tokens — map onto the gray.0–1500 scale.
      * Use for: page/canvas, raised surfaces (cards, menus), subtle/muted fills,
@@ -246,27 +360,55 @@ export const semanticTokens = {
      * - inverse: high-contrast surface (flips to light in dark mode)
      */
     bg: {
+      // Chakra's own global css paints `html { background: bg }` — the *plain*
+      // `bg` token, not `bg.canvas` — so this is the actual page background
+      // wherever no component paints over it. `_light` is pure white (Chakra's
+      // value, so light is untouched); `_dark` rejoins our neutral floor instead
+      // of Chakra's off-palette black.
+      DEFAULT: {
+        value: { _light: '{colors.white}', _dark: desaturatedGray[1500] },
+      },
       canvas: {
-        value: { base: '{colors.gray.0}', _dark: '{colors.gray.1500}' },
+        value: { base: '{colors.gray.0}', _dark: desaturatedGray[1500] },
       },
       surface: {
-        value: { base: '{colors.white}', _dark: '{colors.gray.1400}' },
+        value: { base: '{colors.white}', _dark: desaturatedGray[1400] },
+      },
+      // Strongly-raised neutral surface — one level above `surface` (e.g. the
+      // selected thumb of a SegmentedControl). In dark this is the *lightest*
+      // neutral bg token so a raised element reads as lifted toward the light,
+      // not recessed. (The `bg.*` dark ramp is otherwise compressed such that
+      // `surface` sits below `subtle`/`muted`; `raised` deliberately tops the
+      // scale so "raised" has a token that behaves correctly in dark.)
+      // NB: named `raised`, not Chakra's `emphasized` — that default token name
+      // cannot be overridden via semanticTokens in this setup (it keeps
+      // resolving to Chakra's own gray.200), whereas a fresh name is honoured.
+      raised: {
+        value: { base: '{colors.white}', _dark: desaturatedGray[1100] },
       },
       subtle: {
-        value: { base: '{colors.gray.50}', _dark: '{colors.gray.1300}' },
+        value: { base: '{colors.gray.50}', _dark: desaturatedGray[1300] },
       },
       muted: {
-        value: { base: '{colors.gray.100}', _dark: '{colors.gray.1200}' },
+        value: { base: '{colors.gray.100}', _dark: desaturatedGray[1200] },
       },
       inverse: {
-        value: { base: '{colors.gray.1300}', _dark: '{colors.gray.50}' },
+        value: { base: '{colors.gray.1300}', _dark: desaturatedGray[50] },
+      },
+      // Sunken page wash for list/overview surfaces: a gray floor in light so
+      // `bg.surface` cards read as raised above it. In dark the `bg.*` ramp is
+      // compressed (`subtle` sits *lighter* than `surface`), which would invert
+      // that elevation — so the dark value drops to the canvas floor instead.
+      // Component-level fills (hover, chips, inner blocks) keep using `bg.subtle`.
+      sunken: {
+        value: { base: '{colors.gray.50}', _dark: desaturatedGray[1500] },
       },
       // Override Chakra's default `bg.panel` (whose `_dark` resolves to Chakra's
       // own gray.950 = #111111, off our slate palette). Light value is white —
       // identical to Chakra's default — so this only realigns dark overlay
       // surfaces (Menu / Modal / Popover / Toast) onto our gray scale.
       panel: {
-        value: { base: '{colors.white}', _dark: '{colors.gray.1400}' },
+        value: { base: '{colors.white}', _dark: desaturatedGray[1400] },
       },
       /**
        * Row/selection state tints. Use these for selected rows,
@@ -300,26 +442,42 @@ export const semanticTokens = {
      * - inverse: text on inverse surfaces (flips with mode)
      */
     fg: {
+      // Plain `fg` is Chakra's html-level text color (`html { color: fg }`).
+      // `_light` repeats Chakra's value (black); `_dark` rejoins our desaturated
+      // neutral so legacy html-level text tracks `fg.default`.
+      DEFAULT: {
+        value: { _light: '{colors.black}', _dark: desaturatedGray[50] },
+      },
+      // Strongest text — headings, titles, key figures, emphasis. This is the
+      // near-black step that `fg.default` used to be; `default` is now re-pegged
+      // to a lighter body weight (see below), so reach for `emphasized` when you
+      // specifically want maximum contrast.
+      emphasized: {
+        value: { base: '{colors.gray.1300}', _dark: desaturatedGray[200] },
+      },
       default: {
-        // _dark is gray.200 (not gray.50): near-white text on the dark canvas
-        // ran ~18:1 — brighter than the light baseline (~15:1) and close to pure
-        // white, which causes glare/halation. gray.200 matches the light
-        // contrast (~15.4:1) while staying AAA.
-        value: { base: '{colors.gray.1300}', _dark: '{colors.gray.200}' },
+        // Primary *body* text. Re-pegged from gray.1300 → gray.1000: near-black
+        // (gray.1300, ~14:1 on white) is unusually heavy for running copy, and
+        // real product usage clustered well below it. gray.1000 (~9:1) is a
+        // comfortable AAA body weight; the old near-black step lives on as
+        // `fg.emphasized`. _dark drops one step from emphasized for hierarchy.
+        value: { base: '{colors.gray.1000}', _dark: desaturatedGray[300] },
       },
       muted: {
-        // _dark lifts gray.400 → gray.300: secondary text read as too dim on the
-        // dark canvas next to fg.default (gray.200). gray.300 sits one step under
-        // default — restoring the light-mode hierarchy gap — while staying well
-        // clear of AA (~12.8:1 on bg.canvas, ~11.7:1 on bg.surface). Light value
-        // (gray.900) is unchanged.
-        value: { base: '{colors.gray.900}', _dark: '{colors.gray.300}' },
+        // Secondary text. _dark sits one step below `default` (~9.5:1 on the dark
+        // canvas) to keep the default→muted hierarchy gap. Light value (gray.900)
+        // is unchanged.
+        value: { base: '{colors.gray.900}', _dark: desaturatedGray[400] },
       },
       subtle: {
-        value: { base: '{colors.gray.700}', _dark: '{colors.gray.600}' },
+        // Tertiary / placeholder / icon text. _dark a11y-bumped from the straight
+        // mirror (desaturatedGray[600] #8E939F, ~4.06:1 on bg.muted) to #989DA9
+        // (~4.6:1) so it clears AA while staying below fg.muted. Light value
+        // (gray.700) is unchanged.
+        value: { base: '{colors.gray.700}', _dark: '#989DA9' },
       },
       inverse: {
-        value: { base: '{colors.gray.0}', _dark: '{colors.gray.1400}' },
+        value: { base: '{colors.gray.0}', _dark: desaturatedGray[1400] },
       },
     },
 
@@ -331,14 +489,21 @@ export const semanticTokens = {
      * - strong: high-emphasis borders, focus outlines on neutral
      */
     border: {
+      // Plain `border` feeds Chakra's `--global-color-border` (the implicit
+      // default border color). Not a text color, so its `_dark` takes the
+      // straight halved-saturation mirror (no a11y bump). `_light` repeats
+      // Chakra's value so light is untouched.
+      DEFAULT: {
+        value: { _light: '{colors.gray.200}', _dark: desaturatedGray[800] },
+      },
       default: {
-        value: { base: '{colors.gray.300}', _dark: '{colors.gray.1100}' },
+        value: { base: '{colors.gray.300}', _dark: desaturatedGray[1100] },
       },
       subtle: {
-        value: { base: '{colors.gray.200}', _dark: '{colors.gray.1300}' },
+        value: { base: '{colors.gray.200}', _dark: desaturatedGray[1300] },
       },
       strong: {
-        value: { base: '{colors.gray.500}', _dark: '{colors.gray.900}' },
+        value: { base: '{colors.gray.500}', _dark: desaturatedGray[900] },
       },
     },
   },
@@ -352,22 +517,47 @@ export const semanticTokens = {
  * by reviewers. It is intentionally hand-maintained alongside `semanticTokens`
  * so a rename here is a visible, reviewable diff.
  *
- * Note: `bg.panel` is deliberately omitted — it is an internal realignment of a
- * Chakra default (for overlay surfaces), not part of the public migration
- * contract. App code should use `bg.surface`/`bg.canvas`.
+ * Note: `bg.panel` and the bare `bg`/`fg`/`border` DEFAULT tokens are
+ * deliberately omitted — they are internal realignments of Chakra defaults
+ * (overlay surfaces and html-level globals), not part of the public migration
+ * contract. App code should use `bg.surface`/`bg.canvas`, `fg.default`, etc.
  */
 export type SemanticColorToken =
   | `bg.${
       | 'canvas'
       | 'surface'
+      | 'raised'
       | 'subtle'
       | 'muted'
+      | 'sunken'
       | 'inverse'
       | 'selected'
       | 'highlighted'}`
   | 'bg.invalid.subtle'
-  | `fg.${'default' | 'muted' | 'subtle' | 'inverse'}`
+  | `fg.${'emphasized' | 'default' | 'muted' | 'subtle' | 'inverse'}`
   | `border.${'default' | 'subtle' | 'strong'}`
+  // `slate.*` — foundational mode-aware neutral family (a tonal scale, not a
+  // role). Prefer a `fg`/`bg`/`border` role token when one fits; reach for
+  // `slate.N` when you need a specific neutral step no role names.
+  | `slate.${
+      | 0
+      | 50
+      | 100
+      | 200
+      | 300
+      | 400
+      | 500
+      | 600
+      | 700
+      | 800
+      | 900
+      | 1000
+      | 1100
+      | 1200
+      | 1300
+      | 1400
+      | 1500}`
+  | `primary.${'fill' | 'fillStrong'}`
   | `${'primary' | 'secondary' | 'danger' | 'success' | 'warning'}.${
       | 'lightest'
       | 'extralight'

package/src/theme/global.ts

@@ -20,8 +20,8 @@ export const globalCss = defineGlobalStyles({
   // Dark mode body fallbacks. Only activates under the `.dark` class set by the
   // color-mode provider, so light-mode rendering is byte-for-byte identical.
   '.dark': {
-    '--chakra-colors-chakra-body-text': '#E2E6F0', // gray.200 - Primary text (dark); softened from gray.50 to avoid near-white glare (matches fg.default)
-    '--chakra-colors-chakra-body-bg': '#0B0E17', // gray.1500 - Background (dark)
+    '--chakra-colors-chakra-body-text': '#E5E8EC', // desaturated gray.200 - Primary text (dark); matches fg.default's _dark
+    '--chakra-colors-chakra-body-bg': '#0E1014', // desaturated gray.1500 - Background (dark); matches bg.canvas's _dark
   },
 
   html: {
@@ -49,6 +49,35 @@ export const globalCss = defineGlobalStyles({
   "body[data-lang='es']": {
     fontFamily: inter.style.fontFamily,
   },
+
+  // Global scrollbar styling. Without this, scrollbars fall back to the raw
+  // browser chrome — a bright, square, high-contrast track that stands out
+  // badly in dark mode. A thin, transparent-track, rounded thumb (mode-aware
+  // via the `slate` ramp) is unobtrusive in both modes. Components that opt out
+  // (e.g. hidden scrollbars) still override locally.
+  '*': {
+    scrollbarWidth: 'thin',
+    scrollbarColor: 'var(--chakra-colors-slate-300) transparent',
+  },
+  '::-webkit-scrollbar': {
+    width: '10px',
+    height: '10px',
+  },
+  '::-webkit-scrollbar-track': {
+    background: 'transparent',
+  },
+  '::-webkit-scrollbar-thumb': {
+    backgroundColor: 'var(--chakra-colors-slate-300)',
+    borderRadius: '9999px',
+    border: '2px solid transparent',
+    backgroundClip: 'content-box',
+  },
+  '::-webkit-scrollbar-thumb:hover': {
+    backgroundColor: 'var(--chakra-colors-slate-400)',
+  },
+  '::-webkit-scrollbar-corner': {
+    background: 'transparent',
+  },
 });
 
 // Legacy export for backwards compatibility