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

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.

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};
-}