@wpmoo/ui 1.0.0-rc.5 → 1.0.0-rc.7

package/scss/foundations/_backdrop.scss

@@ -0,0 +1,128 @@
+// Bootstrap owns the overlay lifecycle for Dialog / Alert Dialog (Modal) and
+// Sheet (Offcanvas). Moo only retunes the native backdrop appearance through a
+// shared token primitive, so every opening surface gets the same treatment
+// without component-specific backdrop selectors.
+//
+// Modal waits for the real `.modal-backdrop` transition before it starts the
+// dialog panel. Keep that lifecycle element visually inert and animate a
+// pseudo-element instead: the panel and visible blur/dim can then start from
+// the same Bootstrap motion token, while the native backdrop is still retained
+// long enough to fade the visual layer out on close. Use keyframe animation
+// rather than a pseudo-element transition: transitionend events from a pseudo
+// element bubble to its originating backdrop and would make Bootstrap wait for
+// the visual layer before showing the panel.
+@mixin moo-overlay-backdrop-appearance {
+  --#{$prefix}backdrop-opacity: var(--moo-overlay-backdrop-opacity, #{$moo-overlay-backdrop-opacity});
+  opacity: 1;
+  color: transparent;
+  background-color: transparent;
+
+  &.fade,
+  &.fade:not(.show) {
+    opacity: 1;
+  }
+
+  // Bootstrap reads this duration to decide when to reveal a Modal panel.
+  // Keep entry instant; the visual transition below belongs to ::before.
+  &.show {
+    transition: none;
+  }
+
+  // On close, Bootstrap keeps the lifecycle layer in the DOM for this token
+  // duration while ::before fades out. Color has no visible effect on the
+  // empty backdrop but supplies Bootstrap's native transition lifecycle
+  // without multiplying the pseudo-element's visual fade.
+  &.fade:not(.show) {
+    color: var(--bs-body-color, currentcolor);
+    transition: color var(--moo-overlay-motion-duration, #{$moo-overlay-motion-duration}) ease-out;
+  }
+
+  &::before {
+    position: absolute;
+    inset: 0;
+    content: "";
+    opacity: 0;
+    background-color: var(--moo-overlay-backdrop-bg, #{$moo-overlay-backdrop-bg});
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+    animation: moo-overlay-backdrop-exit var(--moo-overlay-motion-duration, #{$moo-overlay-motion-duration}) ease-out both;
+  }
+}
+
+@mixin moo-overlay-backdrop-shown {
+  // Bootstrap Modal routes opacity through --bs-backdrop-opacity, but
+  // Offcanvas 5.3 compiles the same state to a literal .5. Restate the shared
+  // token on both native show selectors so Dialog and Sheet dim equally.
+  &::before {
+    animation: moo-overlay-backdrop-enter var(--moo-overlay-motion-duration, #{$moo-overlay-motion-duration}) ease-out both;
+  }
+}
+
+@mixin moo-overlay-backdrop-reduced-motion {
+  transition: none;
+
+  &::before {
+    animation: none;
+  }
+}
+
+@keyframes moo-overlay-backdrop-enter {
+  from {
+    opacity: 0;
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+  }
+
+  to {
+    opacity: var(--moo-overlay-backdrop-opacity, #{$moo-overlay-backdrop-opacity});
+    -webkit-backdrop-filter: var(--moo-overlay-backdrop-filter, #{$moo-overlay-backdrop-filter});
+    backdrop-filter: var(--moo-overlay-backdrop-filter, #{$moo-overlay-backdrop-filter});
+  }
+}
+
+@keyframes moo-overlay-backdrop-exit {
+  from {
+    opacity: var(--moo-overlay-backdrop-opacity, #{$moo-overlay-backdrop-opacity});
+    -webkit-backdrop-filter: var(--moo-overlay-backdrop-filter, #{$moo-overlay-backdrop-filter});
+    backdrop-filter: var(--moo-overlay-backdrop-filter, #{$moo-overlay-backdrop-filter});
+  }
+
+  to {
+    opacity: 0;
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+  }
+}
+
+.modal-backdrop,
+.offcanvas-backdrop {
+  @include moo-overlay-backdrop-appearance;
+}
+
+.modal-backdrop.show,
+.offcanvas-backdrop.show {
+  @include moo-overlay-backdrop-shown;
+}
+
+// Backdrops that are portaled into a resolved owner still need to outrank
+// Bootstrap's scoped `.fade` and `.show` rules. Entry points include this
+// mixin inside their single native Moo scope; the global rules above remain
+// available for hosts that intentionally keep Bootstrap's body-level portal.
+@mixin moo-overlay-backdrop-scoped {
+  .modal-backdrop,
+  .offcanvas-backdrop {
+    @include moo-overlay-backdrop-appearance;
+  }
+
+  .modal-backdrop.show,
+  .offcanvas-backdrop.show {
+    @include moo-overlay-backdrop-shown;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal-backdrop,
+  .offcanvas-backdrop {
+    @include moo-overlay-backdrop-reduced-motion;
+  }
+}

package/scss/foundations/_scope.scss

@@ -0,0 +1,5 @@
+@scope (.moo-ui) to (:where(.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"])) {
+  @import "../components";
+  @import "../themes/forms";
+  @include moo-overlay-backdrop-scoped;
+}

package/scss/mixins/_banner.scss

@@ -0,0 +1,3 @@
+@import "bootstrap/scss/mixins/banner";
+
+@include bsBanner("");

package/scss/moo-core.scss

@@ -4,9 +4,7 @@
  * Includes Bootstrap 5.3.3 component output
  * SPDX-License-Identifier: MIT
  */
-$enable-dark-mode: false;
-$moo-spinner-animation-name: moo-spinner-rotate;
-
+@import "settings/options";
 @import "bootstrap/scss/functions";
 @import "settings";
 @import "bootstrap/scss/variables";
@@ -14,34 +12,8 @@ $moo-spinner-animation-name: moo-spinner-rotate;
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
-@import "themes/scoped_core";
-@import "foundations/core_global_primitives";
-
-.moo-ui {
-  @include moo-core-scales;
-  @include moo-core-shared;
-  @include moo-core-light;
-}
-
-:where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) {
-  @include moo-core-dark;
-}
-
-.moo-ui[data-bs-theme="light"] {
-  @include moo-core-light;
-}
-
-.moo-ui[data-bs-theme="dark"] {
-  @include moo-core-dark;
-}
-
-.moo-ui[dir="rtl"] {
-  direction: rtl;
-}
-
-@scope (.moo-ui) {
-  @import "components";
-}
-
-@import "foundations/core_state_layer";
-@import "foundations/overlay_backdrop";
+@import "themes/theme";
+@import "foundations/globals";
+@import "foundations/backdrop";
+@import "themes/root";
+@import "foundations/scope";

package/scss/moo-ui.scss

@@ -1,7 +1,5 @@
 @import "settings";
-
-@import "bootstrap/scss/mixins/banner";
-@include bsBanner("");
+@import "mixins/banner";
 
 // Bootstrap configuration
 @import "bootstrap/scss/functions";
@@ -10,10 +8,12 @@
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
+@import "themes/theme";
 
 // Bootstrap layout and standalone-only components
 @import "bootstrap/scss/root";
-@import "themes/standalone_root";
+@import "themes/root";
+@import "themes/standalone";
 @import "bootstrap/scss/reboot";
 @import "bootstrap/scss/type";
 @import "bootstrap/scss/images";
@@ -46,5 +46,5 @@
 @import "bootstrap/scss/utilities/api";
 
 @import "utilities/scroll_fade_primitives";
-@import "components";
-@import "foundations/overlay_backdrop";
+@import "foundations/backdrop";
+@import "foundations/scope";

package/scss/settings/_bootstrap_overrides.scss

@@ -4,6 +4,10 @@ $btn-box-shadow: none !default;
 $btn-focus-box-shadow: none !default;
 $btn-active-box-shadow: none !default;
 
+// Keep Bootstrap's CSS Grid utility layer available alongside the Flexbox
+// grid so native .grid and .g-col-* markup works in Moo UI hosts.
+$enable-cssgrid: true !default;
+
 // Bootstrap validation icons are background images injected by the native
 // validation mixin. Reference-style invalid fields use border/ring + error text
 // without a trailing status glyph, so disable the Bootstrap icon branch at the

package/scss/settings/_component_variables.scss

@@ -305,9 +305,14 @@ $moo-form-focus-ring-color: var(--moo-ring) !default;
 // backdrops. Bootstrap exposes separate .modal-backdrop and
 // .offcanvas-backdrop selectors; Moo keeps their visual treatment aligned via
 // one token set instead of per-component backdrop rules.
+// Bootstrap defaults both native panels to .3s; retain that default while
+// exposing one runtime duration token for the panel and its backdrop.
+$moo-overlay-motion-duration: .3s !default;
+$modal-transition: transform var(--moo-overlay-motion-duration, #{$moo-overlay-motion-duration}) ease-out !default;
+$offcanvas-transition-duration: var(--moo-overlay-motion-duration, #{$moo-overlay-motion-duration}) !default;
 $moo-overlay-backdrop-opacity: 1 !default;
 $moo-overlay-backdrop-bg: color-mix(in srgb, #0a0a0a 10%, transparent) !default;
-$moo-overlay-backdrop-filter: blur(8px) !default;
+$moo-overlay-backdrop-filter: blur(6px) !default;
 
 // A quieter elevation scale and the extra radius step, applied UI-wide through
 // Bootstrap's own scales so every component consumes one shared primitive.
@@ -400,6 +405,10 @@ $moo-datatable-bulk-actions-backdrop-blur: 8px !default;
 // chrome. Keep the default component position unchanged while giving host
 // surfaces a scoped override hook.
 $moo-datatable-bulk-actions-bottom: 1rem !default;
+// Bootstrap's table surface is opaque by default and has no context-aware
+// Card composition knob, so card-contained tables consume this scoped Sass
+// setting instead of hardcoding their transparent surface in the partial.
+$moo-table-contained-bg: transparent !default;
 // Bootstrap has no Data Table layout/card primitive, so these scoped knobs
 // describe the generated table/card frames without becoming global widths.
 $moo-datatable-min-width: 48rem !default;
@@ -409,6 +418,9 @@ $moo-datatable-card-label-width: 7rem !default;
 // Sticky row-action cells need just enough opaque surface for the trigger;
 // this fade prevents the pinned cell from reading as a dominant blank column.
 $moo-datatable-actions-cell-fade-width: 1.25rem !default;
+// Bootstrap has no Data Table action-cell surface token; keep this scoped
+// knob aligned with the native body surface and override it for Card context.
+$moo-datatable-actions-cell-bg: var(--bs-body-bg) !default;
 // Bootstrap has no Data Table frame-header or layout-toggle row primitive, so
 // these scoped knobs align Moo's table/card header controls to Bootstrap inputs.
 $moo-datatable-frame-header-min-height: 2.78125rem !default;

package/scss/settings/_options.scss

@@ -0,0 +1,2 @@
+$enable-dark-mode: false;
+$moo-spinner-animation-name: moo-spinner-rotate;

package/scss/settings/_palette.scss

@@ -112,7 +112,7 @@ $moo-sidebar-dark: #1c1c1f !default;
 $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
+// here so themes/_theme.scss can emit Bootstrap's root contract without
 // hardcoded consumer-side literals.
 $body-tertiary-color: #a1a1aa !default;
 $body-tertiary-bg: $light !default;

package/scss/themes/_forms.scss

@@ -0,0 +1,15 @@
+:scope[data-bs-theme="light"] .form-select {
+  --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
+}
+
+:scope[data-bs-theme="dark"] .form-select {
+  --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
+}
+
+:scope[data-bs-theme="light"] .form-switch .form-check-input:not(:checked):not(:focus) {
+  --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+}
+
+:scope[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked):not(:focus) {
+  --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
+}

package/scss/themes/_root.scss

@@ -0,0 +1,16 @@
+.moo-ui[data-bs-theme] {
+  @include moo-core-scales;
+  @include moo-core-shared;
+}
+
+.moo-ui[data-bs-theme="light"] {
+  @include moo-core-light;
+}
+
+.moo-ui[data-bs-theme="dark"] {
+  @include moo-core-dark;
+}
+
+.moo-ui[data-bs-theme][dir="rtl"] {
+  direction: rtl;
+}

package/scss/themes/_standalone.scss

@@ -0,0 +1,5 @@
+// A complete document places its resolved owner directly inside body. The
+// owner, rather than body, supplies the viewport-sized foreground surface.
+body > .moo-ui[data-bs-theme] {
+  min-block-size: 100dvh;
+}

package/scss/themes/{_scoped_core.scss → _theme.scss}

@@ -77,6 +77,7 @@ $moo-theme-colors-border-subtle-dark: (
 }
 
 @mixin moo-core-shared {
+  --moo-overlay-motion-duration: #{$moo-overlay-motion-duration};
   --moo-overlay-backdrop-opacity: #{$moo-overlay-backdrop-opacity};
   --moo-overlay-backdrop-bg: #{$moo-overlay-backdrop-bg};
   --moo-overlay-backdrop-filter: #{$moo-overlay-backdrop-filter};

package/scss/foundations/_core_state_layer.scss

@@ -1,25 +0,0 @@
-:where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-select,
-.moo-ui[data-bs-theme="dark"] .form-select {
-  --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
-}
-
-:where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-switch .form-check-input:not(:checked):not(:focus),
-.moo-ui[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked):not(:focus) {
-  --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
-}
-
-:where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-switch .form-check-input:checked,
-.moo-ui[data-bs-theme="dark"] .form-switch .form-check-input:checked {
-  --#{$prefix}form-switch-bg: #{escape-svg($moo-switch-checked-bg-image-dark)};
-
-  background-color: var(--moo-primary);
-  border-color: var(--moo-primary);
-  filter: none;
-}
-
-:where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-switch .form-check-input:focus:active:not(:checked),
-:where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-switch .form-check-input:focus:not(:focus-visible):not(:checked),
-.moo-ui[data-bs-theme="dark"] .form-switch .form-check-input:focus:active:not(:checked),
-.moo-ui[data-bs-theme="dark"] .form-switch .form-check-input:focus:not(:focus-visible):not(:checked) {
-  --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
-}

package/scss/foundations/_overlay_backdrop.scss

@@ -1,19 +0,0 @@
-// Bootstrap owns the overlay lifecycle for Dialog / Alert Dialog (Modal) and
-// Sheet (Offcanvas). Moo only retunes the native backdrop appearance through a
-// shared token primitive, so every opening surface gets the same treatment
-// without component-specific backdrop selectors.
-.modal-backdrop,
-.offcanvas-backdrop {
-  --#{$prefix}backdrop-opacity: var(--moo-overlay-backdrop-opacity, #{$moo-overlay-backdrop-opacity});
-  background-color: var(--moo-overlay-backdrop-bg, #{$moo-overlay-backdrop-bg});
-  -webkit-backdrop-filter: var(--moo-overlay-backdrop-filter, #{$moo-overlay-backdrop-filter});
-  backdrop-filter: var(--moo-overlay-backdrop-filter, #{$moo-overlay-backdrop-filter});
-}
-
-.modal-backdrop.show,
-.offcanvas-backdrop.show {
-  // Bootstrap Modal routes opacity through --bs-backdrop-opacity, but
-  // Offcanvas 5.3 compiles the same state to a literal .5. Restate the shared
-  // token on both native show selectors so Dialog and Sheet dim equally.
-  opacity: var(--moo-overlay-backdrop-opacity, #{$moo-overlay-backdrop-opacity});
-}

package/scss/themes/_standalone_root.scss

@@ -1,119 +0,0 @@
-: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-border-color: var(--moo-border);
-  --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-border-color: var(--moo-border);
-  --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};
-}