@wpmoo/ui 1.0.0-rc.2 → 1.0.0-rc.4

package/scss/settings/_palette.scss

@@ -0,0 +1,132 @@
+$white: #fff !default;
+$black: #0a0a0a !default;
+
+$headings-font-weight: 600 !default;
+$lead-font-size: 1.125rem !default;
+$lead-font-weight: 400 !default;
+// Bootstrap's stock display scale (5rem down to 2.5rem) at font-weight 300
+// reads as oversized, airy marketing type -- far past this reference's
+// headline sizing. Calmer sizes at $headings-font-weight keep Display
+// headings feeling like the rest of the type scale instead of a jump to a
+// different visual language.
+$display-font-sizes: (
+  1: 3.5rem,
+  2: 3rem,
+  3: 2.5rem,
+  4: 2.25rem,
+  5: 1.875rem,
+  6: 1.5rem
+) !default;
+$display-font-weight: $headings-font-weight !default;
+
+// Moo's runtime palette is emitted by both the standalone :root build and the
+// scoped Odoo core build. Keep values centralized here so the two entrypoints
+// cannot drift while still using their own selector ownership.
+$moo-surface: $body-bg !default;
+$moo-muted-surface: $secondary !default;
+$moo-border: $border-color !default;
+$moo-primary: $primary !default;
+$moo-primary-foreground: $light !default;
+$moo-foreground: $body-color !default;
+$moo-muted-foreground: #71717a !default;
+// The reference derives --ring as a lighter tint of --primary (same hue,
+// lightened toward the surface) instead of a fixed literal, so a
+// brand-color change updates the ring automatically instead of needing a
+// matching manual edit. $primary here is itself a near-neutral dark tone,
+// so this naturally lands close to a neutral mid-gray -- the reference's
+// own default Neutral theme's ring (#a1a1a1 light / #737373 dark) -- while
+// staying derived rather than a hardcoded copy of those numbers.
+$moo-ring: color-mix(in srgb, $white 60%, $primary) !default;
+// The reference's --destructive token drives destructive text and alpha
+// surfaces. The public $danger default matches the light token; dark mode uses
+// the matching reference dark token below.
+$moo-destructive: $danger !default;
+$moo-destructive-surface: color-mix(in srgb, $moo-destructive 3%, transparent) !default;
+$moo-destructive-surface-hover: color-mix(in srgb, $moo-destructive 6%, transparent) !default;
+$moo-destructive-foreground: $moo-destructive !default;
+$moo-form-invalid-border-color: $moo-destructive !default;
+$moo-form-invalid-ring-color: color-mix(in srgb, $moo-destructive 20%, transparent) !default;
+// Warning and success derive from Bootstrap's $warning/$success palette
+// variables, following the same alpha-surface pattern as destructive.
+$moo-warning: $warning !default;
+$moo-warning-surface: color-mix(in srgb, $moo-warning 10%, transparent) !default;
+$moo-warning-surface-hover: color-mix(in srgb, $moo-warning 20%, transparent) !default;
+$moo-warning-foreground: $moo-warning !default;
+$moo-success: $success !default;
+$moo-success-surface: color-mix(in srgb, $moo-success 10%, transparent) !default;
+$moo-success-surface-hover: color-mix(in srgb, $moo-success 20%, transparent) !default;
+$moo-success-foreground: $moo-success !default;
+$moo-info: $info !default;
+$moo-info-surface: color-mix(in srgb, $moo-info 10%, transparent) !default;
+$moo-info-surface-hover: color-mix(in srgb, $moo-info 20%, transparent) !default;
+$moo-info-foreground: $moo-info !default;
+$moo-sidebar: $light !default;
+$moo-chart-1: #52525b !default;
+$moo-chart-2: #71717a !default;
+$moo-chart-3: #a1a1aa !default;
+$moo-chart-4: #3f3f46 !default;
+$moo-chart-5: #27272a !default;
+// $black (#0a0a0a), not $dark (#18181b, zinc-900) -- the reference's own
+// dark-mode --background is #0a0a0a exactly, and $black already carried
+// that value without being wired to this token.
+$moo-surface-dark: $black !default;
+$moo-muted-surface-dark: #27272a !default;
+$moo-border-dark: #3f3f46 !default;
+$moo-primary-dark: $moo-border !default;
+$moo-primary-foreground-dark: $dark !default;
+$moo-foreground-dark: $light !default;
+$moo-muted-foreground-dark: #a1a1aa !default;
+// Same derivation as $moo-ring above, at a lower white weight -- dark
+// surfaces need a darker-than-light-mode ring to read as mid-tone against a
+// dark background instead of a near-white glow.
+$moo-ring-dark: color-mix(in srgb, $white 40%, $primary) !default;
+// Reference dark --destructive token.
+$moo-destructive-dark: #ff6467 !default;
+$moo-destructive-surface-dark: color-mix(in srgb, $moo-destructive-dark 20%, transparent) !default;
+$moo-destructive-surface-hover-dark: color-mix(in srgb, $moo-destructive-dark 30%, transparent) !default;
+$moo-destructive-foreground-dark: $moo-destructive-dark !default;
+$moo-form-invalid-border-color-dark: color-mix(in srgb, $moo-destructive-dark 50%, transparent) !default;
+$moo-form-invalid-ring-color-dark: color-mix(in srgb, $moo-destructive-dark 40%, transparent) !default;
+// Dark-mode warning/success: lighter tints of the public config base hues,
+// mixed toward $light so they stay readable on dark surfaces. Everything
+// derives from public config variables only.
+$moo-warning-dark: color-mix(in srgb, $light 60%, $warning) !default;
+$moo-warning-surface-dark: color-mix(in srgb, $moo-warning-dark 20%, transparent) !default;
+$moo-warning-surface-hover-dark: color-mix(in srgb, $moo-warning-dark 30%, transparent) !default;
+$moo-warning-foreground-dark: $moo-warning-dark !default;
+$moo-success-dark: color-mix(in srgb, $light 60%, $success) !default;
+$moo-success-surface-dark: color-mix(in srgb, $moo-success-dark 20%, transparent) !default;
+$moo-success-surface-hover-dark: color-mix(in srgb, $moo-success-dark 30%, transparent) !default;
+$moo-success-foreground-dark: $moo-success-dark !default;
+$moo-info-dark: color-mix(in srgb, $light 60%, $info) !default;
+$moo-info-surface-dark: color-mix(in srgb, $moo-info-dark 20%, transparent) !default;
+$moo-info-surface-hover-dark: color-mix(in srgb, $moo-info-dark 30%, transparent) !default;
+$moo-info-foreground-dark: $moo-info-dark !default;
+$moo-sidebar-dark: #1c1c1f !default;
+// Dark-mode input background: a translucent tint that gives form controls a
+// distinct surface against the page background. Light mode stays transparent
+// (the default), but dark mode needs this subtle depth cue so inputs don't
+// rely on border alone for definition. Mixed from muted-surface-dark toward
+// the surface color so it reads as "slightly lighter than the page" without
+// introducing a new hardcoded color.
+$moo-input-bg-dark: color-mix(in srgb, $moo-muted-surface-dark 50%, $moo-surface-dark) !default;
+
+// Bootstrap root variables consumed by the scoped core build. Define them
+// here so themes/_scoped_core.scss can emit Bootstrap's root contract without
+// hardcoded consumer-side literals.
+$body-tertiary-color: #a1a1aa !default;
+$body-tertiary-bg: $light !default;
+$code-color: #d63384 !default;
+$mark-bg: #fff3cd !default;
+$border-color-translucent: rgba(24, 24, 27, 0.175) !default;
+$body-tertiary-color-dark: $moo-muted-foreground !default;
+$body-tertiary-bg-dark: #202024 !default;
+$code-color-dark: #e685b5 !default;
+$mark-bg-dark: #664d03 !default;
+$border-color-translucent-dark: rgba(250, 250, 250, 0.15) !default;
+
+// Disabled foregrounds need to read quieter than secondary prose and icons.
+// Bootstrap's tertiary color is the closest native semantic for that state,
+// so expose it through a Moo token for components without a Bootstrap knob.
+$moo-disabled-foreground: $body-tertiary-color !default;
+$moo-disabled-foreground-dark: $body-tertiary-color-dark !default;

package/scss/themes/_scoped_core.scss

@@ -0,0 +1,239 @@
+$moo-theme-colors-text-dark: (
+  "primary": $primary-text-emphasis-dark,
+  "secondary": $secondary-text-emphasis-dark,
+  "success": $success-text-emphasis-dark,
+  "info": $info-text-emphasis-dark,
+  "warning": $warning-text-emphasis-dark,
+  "danger": $danger-text-emphasis-dark,
+  "light": $light-text-emphasis-dark,
+  "dark": $dark-text-emphasis-dark,
+) !default;
+
+$moo-theme-colors-bg-subtle-dark: (
+  "primary": $primary-bg-subtle-dark,
+  "secondary": $secondary-bg-subtle-dark,
+  "success": $success-bg-subtle-dark,
+  "info": $info-bg-subtle-dark,
+  "warning": $warning-bg-subtle-dark,
+  "danger": $danger-bg-subtle-dark,
+  "light": $light-bg-subtle-dark,
+  "dark": $dark-bg-subtle-dark,
+) !default;
+
+$moo-theme-colors-border-subtle-dark: (
+  "primary": $primary-border-subtle-dark,
+  "secondary": $secondary-border-subtle-dark,
+  "success": $success-border-subtle-dark,
+  "info": $info-border-subtle-dark,
+  "warning": $warning-border-subtle-dark,
+  "danger": $danger-border-subtle-dark,
+  "light": $light-border-subtle-dark,
+  "dark": $dark-border-subtle-dark,
+) !default;
+
+@mixin moo-core-scales {
+  @each $color, $value in $colors {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $grays {
+    --#{$prefix}gray-#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-rgb {
+    --#{$prefix}#{$color}-rgb: #{$value};
+  }
+
+  --#{$prefix}white-rgb: #{to-rgb($white)};
+  --#{$prefix}black-rgb: #{to-rgb($black)};
+  --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
+  --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
+  --#{$prefix}gradient: #{$gradient};
+  --#{$prefix}body-font-family: #{inspect($font-family-base)};
+  @include rfs($font-size-base, --#{$prefix}body-font-size);
+  --#{$prefix}body-font-weight: #{$font-weight-base};
+  --#{$prefix}body-line-height: #{$line-height-base};
+  --#{$prefix}link-decoration: #{$link-decoration};
+  --#{$prefix}border-width: #{$border-width};
+  --#{$prefix}border-style: #{$border-style};
+  --#{$prefix}border-radius: #{$border-radius};
+  --#{$prefix}border-radius-sm: #{$border-radius-sm};
+  --#{$prefix}border-radius-lg: #{$border-radius-lg};
+  --#{$prefix}border-radius-xl: #{$border-radius-xl};
+  --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
+  --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl);
+  --#{$prefix}border-radius-pill: #{$border-radius-pill};
+  --#{$prefix}box-shadow: #{$box-shadow};
+  --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
+  --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
+  --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
+  --#{$prefix}focus-ring-width: #{$focus-ring-width};
+  --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
+  --#{$prefix}focus-ring-color: var(--moo-ring);
+}
+
+@mixin moo-core-shared {
+  --moo-overlay-backdrop-opacity: #{$moo-overlay-backdrop-opacity};
+  --moo-overlay-backdrop-bg: #{$moo-overlay-backdrop-bg};
+  --moo-overlay-backdrop-filter: #{$moo-overlay-backdrop-filter};
+  --moo-input-group-border-radius: #{$moo-input-group-border-radius};
+  --moo-disabled-control-opacity: #{$moo-disabled-control-opacity};
+  --moo-sidebar-foreground: var(--moo-foreground);
+  --moo-sidebar-accent: var(--moo-muted-surface);
+  --moo-sidebar-border: var(--moo-border);
+  --moo-chart-1: #{$moo-chart-1};
+  --moo-chart-2: #{$moo-chart-2};
+  --moo-chart-3: #{$moo-chart-3};
+  --moo-chart-4: #{$moo-chart-4};
+  --moo-chart-5: #{$moo-chart-5};
+}
+
+@mixin moo-core-light {
+  color-scheme: light;
+  color: var(--#{$prefix}body-color);
+  background-color: var(--#{$prefix}body-bg);
+  --moo-surface: #{$moo-surface};
+  --moo-muted-surface: #{$moo-muted-surface};
+  --moo-border: #{$moo-border};
+  --moo-primary: #{$moo-primary};
+  --moo-primary-foreground: #{$moo-primary-foreground};
+  --moo-foreground: #{$moo-foreground};
+  --moo-muted-foreground: #{$moo-muted-foreground};
+  --moo-disabled-foreground: #{$moo-disabled-foreground};
+  --moo-ring: #{$moo-ring};
+  --moo-destructive: #{$moo-destructive};
+  --moo-destructive-surface: #{$moo-destructive-surface};
+  --moo-destructive-surface-hover: #{$moo-destructive-surface-hover};
+  --moo-destructive-foreground: #{$moo-destructive-foreground};
+  --moo-form-invalid-ring-color: #{$moo-form-invalid-ring-color};
+  --moo-warning: #{$moo-warning};
+  --moo-warning-surface: #{$moo-warning-surface};
+  --moo-warning-surface-hover: #{$moo-warning-surface-hover};
+  --moo-warning-foreground: #{$moo-warning-foreground};
+  --moo-success: #{$moo-success};
+  --moo-success-surface: #{$moo-success-surface};
+  --moo-success-surface-hover: #{$moo-success-surface-hover};
+  --moo-success-foreground: #{$moo-success-foreground};
+  --moo-info: #{$moo-info};
+  --moo-info-surface: #{$moo-info-surface};
+  --moo-info-surface-hover: #{$moo-info-surface-hover};
+  --moo-info-foreground: #{$moo-info-foreground};
+  --moo-sidebar: #{$moo-sidebar};
+  --#{$prefix}body-color: var(--moo-foreground);
+  --#{$prefix}body-color-rgb: #{to-rgb($moo-foreground)};
+  --#{$prefix}body-bg: var(--moo-surface);
+  --#{$prefix}body-bg-rgb: #{to-rgb($moo-surface)};
+  --#{$prefix}emphasis-color: var(--moo-foreground);
+  --#{$prefix}emphasis-color-rgb: #{to-rgb($moo-foreground)};
+  --#{$prefix}secondary-color: var(--moo-muted-foreground);
+  --#{$prefix}secondary-color-rgb: #{to-rgb($moo-muted-foreground)};
+  --#{$prefix}secondary-bg: var(--moo-muted-surface);
+  --#{$prefix}secondary-bg-rgb: #{to-rgb($moo-muted-surface)};
+  --#{$prefix}tertiary-color: #{$body-tertiary-color};
+  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
+  --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
+  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
+  --#{$prefix}heading-color: var(--moo-foreground);
+  --#{$prefix}link-color: var(--moo-foreground);
+  --#{$prefix}link-color-rgb: #{to-rgb($moo-foreground)};
+  --#{$prefix}link-hover-color: var(--moo-muted-foreground);
+  --#{$prefix}link-hover-color-rgb: #{to-rgb($moo-muted-foreground)};
+  --#{$prefix}code-color: #{$code-color};
+  --#{$prefix}highlight-color: var(--moo-foreground);
+  --#{$prefix}highlight-bg: #{$mark-bg};
+  --#{$prefix}border-color: var(--moo-border);
+  --#{$prefix}border-color-translucent: #{$border-color-translucent};
+  --#{$prefix}form-valid-color: #{$form-valid-color};
+  --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
+  --#{$prefix}form-invalid-color: var(--moo-destructive);
+  --#{$prefix}form-invalid-border-color: #{$moo-form-invalid-border-color};
+
+  @each $color, $value in $theme-colors-text {
+    --#{$prefix}#{$color}-text-emphasis: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-bg-subtle {
+    --#{$prefix}#{$color}-bg-subtle: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-border-subtle {
+    --#{$prefix}#{$color}-border-subtle: #{$value};
+  }
+}
+
+@mixin moo-core-dark {
+  color-scheme: dark;
+  color: var(--#{$prefix}body-color);
+  background-color: var(--#{$prefix}body-bg);
+  --moo-surface: #{$moo-surface-dark};
+  --moo-muted-surface: #{$moo-muted-surface-dark};
+  --moo-border: #{$moo-border-dark};
+  --moo-primary: #{$moo-primary-dark};
+  --moo-primary-foreground: #{$moo-primary-foreground-dark};
+  --moo-foreground: #{$moo-foreground-dark};
+  --moo-muted-foreground: #{$moo-muted-foreground-dark};
+  --moo-disabled-foreground: #{$moo-disabled-foreground-dark};
+  --moo-ring: #{$moo-ring-dark};
+  --moo-destructive: #{$moo-destructive-dark};
+  --moo-destructive-surface: #{$moo-destructive-surface-dark};
+  --moo-destructive-surface-hover: #{$moo-destructive-surface-hover-dark};
+  --moo-destructive-foreground: #{$moo-destructive-foreground-dark};
+  --moo-form-invalid-ring-color: #{$moo-form-invalid-ring-color-dark};
+  --moo-warning: #{$moo-warning-dark};
+  --moo-warning-surface: #{$moo-warning-surface-dark};
+  --moo-warning-surface-hover: #{$moo-warning-surface-hover-dark};
+  --moo-warning-foreground: #{$moo-warning-foreground-dark};
+  --moo-success: #{$moo-success-dark};
+  --moo-success-surface: #{$moo-success-surface-dark};
+  --moo-success-surface-hover: #{$moo-success-surface-hover-dark};
+  --moo-success-foreground: #{$moo-success-foreground-dark};
+  --moo-info: #{$moo-info-dark};
+  --moo-info-surface: #{$moo-info-surface-dark};
+  --moo-info-surface-hover: #{$moo-info-surface-hover-dark};
+  --moo-info-foreground: #{$moo-info-foreground-dark};
+  --moo-sidebar: #{$moo-sidebar-dark};
+  --#{$prefix}body-color: var(--moo-foreground);
+  --#{$prefix}body-color-rgb: #{to-rgb($moo-foreground-dark)};
+  --#{$prefix}body-bg: var(--moo-surface);
+  --#{$prefix}body-bg-rgb: #{to-rgb($moo-surface-dark)};
+  --#{$prefix}emphasis-color: var(--moo-foreground);
+  --#{$prefix}emphasis-color-rgb: #{to-rgb($moo-foreground-dark)};
+  --#{$prefix}secondary-color: var(--moo-muted-foreground);
+  --#{$prefix}secondary-color-rgb: #{to-rgb($moo-muted-foreground-dark)};
+  --#{$prefix}secondary-bg: var(--moo-muted-surface);
+  --#{$prefix}secondary-bg-rgb: #{to-rgb($moo-muted-surface-dark)};
+  --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
+  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+  --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+  --#{$prefix}heading-color: var(--moo-foreground);
+  --#{$prefix}link-color: var(--moo-foreground);
+  --#{$prefix}link-color-rgb: #{to-rgb($moo-foreground-dark)};
+  --#{$prefix}link-hover-color: var(--moo-muted-foreground);
+  --#{$prefix}link-hover-color-rgb: #{to-rgb($moo-muted-foreground-dark)};
+  --#{$prefix}code-color: #{$code-color-dark};
+  --#{$prefix}highlight-color: var(--moo-foreground);
+  --#{$prefix}highlight-bg: #{$mark-bg-dark};
+  --#{$prefix}border-color: var(--moo-border);
+  --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+  --#{$prefix}form-valid-color: #{$form-valid-color-dark};
+  --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
+  --#{$prefix}form-invalid-color: var(--moo-destructive);
+  --#{$prefix}form-invalid-border-color: #{$moo-form-invalid-border-color-dark};
+
+  @each $color, $value in $moo-theme-colors-text-dark {
+    --#{$prefix}#{$color}-text-emphasis: #{$value};
+  }
+
+  @each $color, $value in $moo-theme-colors-bg-subtle-dark {
+    --#{$prefix}#{$color}-bg-subtle: #{$value};
+  }
+
+  @each $color, $value in $moo-theme-colors-border-subtle-dark {
+    --#{$prefix}#{$color}-border-subtle: #{$value};
+  }
+}

package/scss/themes/_standalone_root.scss

@@ -0,0 +1,117 @@
+:root {
+  --moo-overlay-backdrop-opacity: #{$moo-overlay-backdrop-opacity};
+  --moo-overlay-backdrop-bg: #{$moo-overlay-backdrop-bg};
+  --moo-overlay-backdrop-filter: #{$moo-overlay-backdrop-filter};
+  --moo-input-group-border-radius: #{$moo-input-group-border-radius};
+  --moo-disabled-control-opacity: #{$moo-disabled-control-opacity};
+  --moo-sidebar-foreground: var(--moo-foreground);
+  --moo-sidebar-accent: var(--moo-muted-surface);
+  --moo-sidebar-border: var(--moo-border);
+  --moo-chart-1: #{$moo-chart-1};
+  --moo-chart-2: #{$moo-chart-2};
+  --moo-chart-3: #{$moo-chart-3};
+  --moo-chart-4: #{$moo-chart-4};
+  --moo-chart-5: #{$moo-chart-5};
+}
+
+:root,
+[data-bs-theme="light"] {
+  --moo-surface: #{$moo-surface};
+  --moo-muted-surface: #{$moo-muted-surface};
+  --moo-border: #{$moo-border};
+  --moo-primary: #{$moo-primary};
+  --moo-primary-foreground: #{$moo-primary-foreground};
+  --moo-foreground: #{$moo-foreground};
+  --moo-muted-foreground: #{$moo-muted-foreground};
+  --moo-disabled-foreground: #{$moo-disabled-foreground};
+  --moo-ring: #{$moo-ring};
+  --moo-destructive: #{$moo-destructive};
+  --moo-destructive-surface: #{$moo-destructive-surface};
+  --moo-destructive-surface-hover: #{$moo-destructive-surface-hover};
+  --moo-destructive-foreground: #{$moo-destructive-foreground};
+  --moo-form-invalid-ring-color: #{$moo-form-invalid-ring-color};
+  --moo-warning: #{$moo-warning};
+  --moo-warning-surface: #{$moo-warning-surface};
+  --moo-warning-surface-hover: #{$moo-warning-surface-hover};
+  --moo-warning-foreground: #{$moo-warning-foreground};
+  --moo-success: #{$moo-success};
+  --moo-success-surface: #{$moo-success-surface};
+  --moo-success-surface-hover: #{$moo-success-surface-hover};
+  --moo-success-foreground: #{$moo-success-foreground};
+  --moo-info: #{$moo-info};
+  --moo-info-surface: #{$moo-info-surface};
+  --moo-info-surface-hover: #{$moo-info-surface-hover};
+  --moo-info-foreground: #{$moo-info-foreground};
+  --moo-sidebar: #{$moo-sidebar};
+  --bs-body-color: var(--moo-foreground);
+  --bs-body-color-rgb: #{to-rgb($moo-foreground)};
+  --bs-heading-color: var(--moo-foreground);
+  --bs-secondary-color: var(--moo-muted-foreground);
+  // Bootstrap computes its own dark-mode --bs-body-bg/-secondary-bg/
+  // -tertiary-bg independently of this file (see vendor/bootstrap/scss/
+  // _root.scss's [data-bs-theme="dark"] block), the same way it did for the
+  // --bs-body-color trio above before this bridge existed. The scoped Odoo
+  // core build already ties every one of these to the shared --moo-*
+  // palette (scss/themes/_scoped_core.scss's moo-core-light/dark mixins);
+  // mirror that here so both entrypoints render the same background, not
+  // two independently-computed gray scales that happen to agree in light
+  // mode and diverge in dark (this is what caused the catalog shell's body
+  // background to sit only ~7 units of contrast from its own Kbd chips
+  // instead of the ~15 they're tuned for).
+  --bs-body-bg: var(--moo-surface);
+  --bs-body-bg-rgb: #{to-rgb($moo-surface)};
+  --bs-secondary-bg: var(--moo-muted-surface);
+  --bs-secondary-bg-rgb: #{to-rgb($moo-muted-surface)};
+  --bs-tertiary-bg: #{$body-tertiary-bg};
+  --bs-tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
+  --bs-tertiary-color: #{$body-tertiary-color};
+  --bs-tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
+  --bs-form-invalid-color: var(--moo-destructive);
+  --bs-form-invalid-border-color: #{$moo-form-invalid-border-color};
+}
+
+[data-bs-theme="dark"] {
+  --moo-surface: #{$moo-surface-dark};
+  --moo-muted-surface: #{$moo-muted-surface-dark};
+  --moo-border: #{$moo-border-dark};
+  --moo-primary: #{$moo-primary-dark};
+  --moo-primary-foreground: #{$moo-primary-foreground-dark};
+  --moo-foreground: #{$moo-foreground-dark};
+  --moo-muted-foreground: #{$moo-muted-foreground-dark};
+  --moo-disabled-foreground: #{$moo-disabled-foreground-dark};
+  --moo-ring: #{$moo-ring-dark};
+  --moo-destructive: #{$moo-destructive-dark};
+  --moo-destructive-surface: #{$moo-destructive-surface-dark};
+  --moo-destructive-surface-hover: #{$moo-destructive-surface-hover-dark};
+  --moo-destructive-foreground: #{$moo-destructive-foreground-dark};
+  --moo-form-invalid-ring-color: #{$moo-form-invalid-ring-color-dark};
+  --moo-warning: #{$moo-warning-dark};
+  --moo-warning-surface: #{$moo-warning-surface-dark};
+  --moo-warning-surface-hover: #{$moo-warning-surface-hover-dark};
+  --moo-warning-foreground: #{$moo-warning-foreground-dark};
+  --moo-success: #{$moo-success-dark};
+  --moo-success-surface: #{$moo-success-surface-dark};
+  --moo-success-surface-hover: #{$moo-success-surface-hover-dark};
+  --moo-success-foreground: #{$moo-success-foreground-dark};
+  --moo-info: #{$moo-info-dark};
+  --moo-info-surface: #{$moo-info-surface-dark};
+  --moo-info-surface-hover: #{$moo-info-surface-hover-dark};
+  --moo-info-foreground: #{$moo-info-foreground-dark};
+  --moo-sidebar: #{$moo-sidebar-dark};
+  --moo-input-bg: #{$moo-input-bg-dark};
+  --bs-body-color: var(--moo-foreground);
+  --bs-body-color-rgb: #{to-rgb($moo-foreground-dark)};
+  --bs-heading-color: var(--moo-foreground);
+  --bs-secondary-color: var(--moo-muted-foreground);
+  // See the light block's matching comment above.
+  --bs-body-bg: var(--moo-surface);
+  --bs-body-bg-rgb: #{to-rgb($moo-surface-dark)};
+  --bs-secondary-bg: var(--moo-muted-surface);
+  --bs-secondary-bg-rgb: #{to-rgb($moo-muted-surface-dark)};
+  --bs-tertiary-bg: #{$body-tertiary-bg-dark};
+  --bs-tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+  --bs-tertiary-color: #{$body-tertiary-color-dark};
+  --bs-tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+  --bs-form-invalid-color: var(--moo-destructive);
+  --bs-form-invalid-border-color: #{$moo-form-invalid-border-color-dark};
+}

package/scss/utilities/_scroll_fade.scss

@@ -0,0 +1,193 @@
+:where(
+  .scroll-fade,
+  .scroll-fade-y,
+  .scroll-fade-x,
+  .scroll-fade-t,
+  .scroll-fade-b,
+  .scroll-fade-l,
+  .scroll-fade-r,
+  .scroll-fade-s,
+  .scroll-fade-e
+) {
+  --scroll-fade-size: min(12%, 2.5rem);
+  --scroll-fade-reveal: 6rem;
+  --moo-scroll-fade-t-size: var(--scroll-fade-size);
+  --moo-scroll-fade-b-size: var(--scroll-fade-size);
+  --moo-scroll-fade-s-size: var(--scroll-fade-size);
+  --moo-scroll-fade-e-size: var(--scroll-fade-size);
+  --moo-scroll-fade-mask: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--moo-scroll-fade-t),
+    #000 calc(100% - var(--moo-scroll-fade-b)),
+    transparent 100%
+  );
+  mask-image: var(--moo-scroll-fade-mask);
+}
+
+.scroll-fade,
+.scroll-fade-y {
+  animation-name: moo-scroll-fade-reveal-t, moo-scroll-fade-reveal-b;
+  animation-duration: 1ms, 1ms;
+  animation-fill-mode: both, both;
+  animation-timing-function: linear, linear;
+  animation-timeline: scroll(self y), scroll(self y);
+  animation-range: 0 var(--scroll-fade-reveal), calc(100% - var(--scroll-fade-reveal)) 100%;
+}
+
+.scroll-fade-t {
+  animation-name: moo-scroll-fade-reveal-t;
+  animation-duration: 1ms;
+  animation-fill-mode: both;
+  animation-timing-function: linear;
+  animation-timeline: scroll(self y);
+  animation-range: 0 var(--scroll-fade-reveal);
+}
+
+.scroll-fade-b {
+  animation-name: moo-scroll-fade-reveal-b;
+  animation-duration: 1ms;
+  animation-fill-mode: both;
+  animation-timing-function: linear;
+  animation-timeline: scroll(self y);
+  animation-range: calc(100% - var(--scroll-fade-reveal)) 100%;
+}
+
+.scroll-fade-x,
+.scroll-fade-s,
+.scroll-fade-e {
+  --moo-scroll-fade-mask: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--moo-scroll-fade-s),
+    #000 calc(100% - var(--moo-scroll-fade-e)),
+    transparent 100%
+  );
+}
+
+.scroll-fade-x {
+  animation-name: moo-scroll-fade-reveal-s, moo-scroll-fade-reveal-e;
+  animation-duration: 1ms, 1ms;
+  animation-fill-mode: both, both;
+  animation-timing-function: linear, linear;
+  animation-timeline: scroll(self inline), scroll(self inline);
+  animation-range: 0 var(--scroll-fade-reveal), calc(100% - var(--scroll-fade-reveal)) 100%;
+}
+
+.scroll-fade-s {
+  animation-name: moo-scroll-fade-reveal-s;
+  animation-duration: 1ms;
+  animation-fill-mode: both;
+  animation-timing-function: linear;
+  animation-timeline: scroll(self inline);
+  animation-range: 0 var(--scroll-fade-reveal);
+}
+
+.scroll-fade-e {
+  animation-name: moo-scroll-fade-reveal-e;
+  animation-duration: 1ms;
+  animation-fill-mode: both;
+  animation-timing-function: linear;
+  animation-timeline: scroll(self inline);
+  animation-range: calc(100% - var(--scroll-fade-reveal)) 100%;
+}
+
+.scroll-fade-x:where([dir="rtl"], [dir="rtl"] *),
+.scroll-fade-s:where([dir="rtl"], [dir="rtl"] *),
+.scroll-fade-e:where([dir="rtl"], [dir="rtl"] *) {
+  --moo-scroll-fade-mask: linear-gradient(
+    to left,
+    transparent 0,
+    #000 var(--moo-scroll-fade-s),
+    #000 calc(100% - var(--moo-scroll-fade-e)),
+    transparent 100%
+  );
+}
+
+.scroll-fade-l,
+.scroll-fade-r {
+  --moo-scroll-fade-mask: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--moo-scroll-fade-s),
+    #000 calc(100% - var(--moo-scroll-fade-e)),
+    transparent 100%
+  );
+}
+
+.scroll-fade-l {
+  animation-name: moo-scroll-fade-reveal-s;
+  animation-duration: 1ms;
+  animation-fill-mode: both;
+  animation-timing-function: linear;
+  animation-timeline: scroll(self x);
+  animation-range: 0 var(--scroll-fade-reveal);
+}
+
+.scroll-fade-r {
+  animation-name: moo-scroll-fade-reveal-e;
+  animation-duration: 1ms;
+  animation-fill-mode: both;
+  animation-timing-function: linear;
+  animation-timeline: scroll(self x);
+  animation-range: calc(100% - var(--scroll-fade-reveal)) 100%;
+}
+
+.scroll-fade-none {
+  --moo-scroll-fade-mask: none;
+}
+
+.no-scrollbar {
+  scrollbar-width: none;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.scrollbar-thin {
+  --moo-scrollbar-thin-size: #{$moo-scrollbar-thin-size};
+  --moo-scrollbar-thin-thumb-bg: color-mix(in srgb, var(--bs-secondary-color) 28%, transparent);
+  --moo-scrollbar-thin-thumb-hover-bg: color-mix(in srgb, var(--bs-secondary-color) 45%, transparent);
+
+  scrollbar-color: var(--moo-scrollbar-thin-thumb-bg) transparent;
+  scrollbar-width: thin;
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  width: var(--moo-scrollbar-thin-size);
+  height: var(--moo-scrollbar-thin-size);
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  border-radius: var(--bs-border-radius-pill);
+  background-color: var(--moo-scrollbar-thin-thumb-bg);
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background-color: var(--moo-scrollbar-thin-thumb-hover-bg);
+}
+
+@supports not (animation-timeline: scroll()) {
+  .scroll-fade,
+  .scroll-fade-y {
+    --moo-scroll-fade-t: var(--moo-scroll-fade-t-size);
+    --moo-scroll-fade-b: var(--moo-scroll-fade-b-size);
+  }
+
+  .scroll-fade-x {
+    --moo-scroll-fade-s: var(--moo-scroll-fade-s-size);
+    --moo-scroll-fade-e: var(--moo-scroll-fade-e-size);
+  }
+
+  .scroll-fade-t { --moo-scroll-fade-t: var(--moo-scroll-fade-t-size); }
+  .scroll-fade-b { --moo-scroll-fade-b: var(--moo-scroll-fade-b-size); }
+  .scroll-fade-l,
+  .scroll-fade-s { --moo-scroll-fade-s: var(--moo-scroll-fade-s-size); }
+  .scroll-fade-r,
+  .scroll-fade-e { --moo-scroll-fade-e: var(--moo-scroll-fade-e-size); }
+}