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

package/scss/components/sidebar/_inset.scss

@@ -1,59 +0,0 @@
-// Inset (content area) ---------------------------------------------------
-.sidebar-inset {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  min-width: 0;
-  background: var(--bs-body-bg);
-}
-
-.sidebar-inset__header {
-  position: sticky;
-  top: 0;
-  z-index: 20;
-  display: flex;
-  align-items: center;
-  gap: $spacer * 0.5;
-  height: $spacer * 4;
-  padding-inline: $spacer;
-  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
-  background: var(--bs-body-bg);
-}
-
-.sidebar-inset__content {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-// Inset variant: the sidebar itself stays flush; the main content becomes a
-// rounded, shadowed card with a gap around it, and the page background
-// switches to the sidebar's own surface color so the card reads as inset.
-// Collapsing to the icon rail restores the inline-start gap. Scoped to
-// desktop, matching how the mobile offcanvas drawer ignores variant.
-@include media-breakpoint-up(lg) {
-  .sidebar-wrapper:has(.sidebar[data-variant="inset"]) {
-    background: var(--moo-sidebar);
-  }
-
-  .sidebar-wrapper:has(.sidebar[data-variant="inset"]) .sidebar-inset {
-    margin: $spacer * 0.5;
-    margin-inline-start: 0;
-    border-radius: var(--bs-border-radius-xl);
-    box-shadow: var(--bs-box-shadow-sm);
-  }
-
-  .sidebar-wrapper[data-sidebar-state="collapsed"]:has(.sidebar[data-variant="inset"]) .sidebar-inset {
-    margin-inline-start: $spacer * 0.5;
-  }
-
-  // A right-side sidebar sits on the opposite edge, so the content card must
-  // flush against the end side instead of the start side.
-  .sidebar-wrapper:has(.sidebar[data-variant="inset"][data-side="right"]) .sidebar-inset {
-    margin-inline-start: $spacer * 0.5;
-    margin-inline-end: 0;
-  }
-
-  .sidebar-wrapper[data-sidebar-state="collapsed"]:has(.sidebar[data-variant="inset"][data-side="right"]) .sidebar-inset {
-    margin-inline-end: $spacer * 0.5;
-  }
-}

package/scss/components/sidebar/_layout.scss

@@ -1,176 +0,0 @@
-// Bootstrap has no native sidebar, so this owned sidebar selector namespace
-// styles the app-shell primitive (same precedent as the avatar component).
-// Geometry rides the $moo-sidebar-* Sass knobs; every color consumes a
-// runtime --moo-* token.
-
-.sidebar-wrapper {
-  --moo-sidebar-width: #{$moo-sidebar-width};
-  --moo-sidebar-width-icon: #{$moo-sidebar-width-icon};
-  display: flex;
-  width: 100%;
-  min-height: 100svh;
-}
-
-.sidebar-wrapper--contained {
-  min-height: 0;
-  height: 34rem;
-  overflow: hidden;
-  border: var(--bs-border-width) solid var(--moo-border);
-  border-radius: var(--bs-border-radius-xl);
-}
-
-// Sidebar column ---------------------------------------------------------
-.sidebar {
-  --bs-offcanvas-width: var(--moo-sidebar-width);
-  flex: 0 0 var(--moo-sidebar-width);
-  width: var(--moo-sidebar-width);
-  color: var(--moo-sidebar-foreground);
-}
-
-.sidebar[data-side="left"] .sidebar-inner {
-  border-inline-end: var(--bs-border-width) solid var(--moo-sidebar-border);
-}
-
-.sidebar[data-side="right"] {
-  order: 1;
-}
-
-.sidebar[data-side="right"] .sidebar-inner {
-  border-inline-start: var(--bs-border-width) solid var(--moo-sidebar-border);
-}
-
-// Floating variant: the surface detaches from the viewport edge with a
-// margin gap on every side and gains a full rounded border and shadow,
-// replacing the flush single-edge border the default variant uses. Scoped
-// to desktop, matching how the mobile offcanvas drawer ignores variant.
-@include media-breakpoint-up(lg) {
-  .sidebar {
-    transition: flex-basis 0.2s ease, width 0.2s ease;
-  }
-
-  .sidebar[data-variant="floating"] .sidebar-inner {
-    width: auto;
-    height: calc(100svh - #{$spacer});
-    max-height: calc(100svh - #{$spacer});
-    margin: $spacer * 0.5;
-    border: var(--bs-border-width) solid var(--moo-sidebar-border);
-    border-radius: var(--bs-border-radius-lg);
-    box-shadow: var(--bs-box-shadow-sm);
-  }
-
-  .sidebar-wrapper--contained .sidebar[data-variant="floating"] .sidebar-inner {
-    height: calc(100% - #{$spacer});
-    max-height: calc(100% - #{$spacer});
-  }
-
-  // At icon-rail width the detached card reads as floating mostly through
-  // elevation and breathing room, since the margin/border alone are hard to
-  // read at the base icon width; step up to Bootstrap's base shadow scale
-  // (still a shared token, no new value) and widen the column by the same
-  // margin the card's sides consume, so the icon rail itself keeps its full
-  // width instead of shrinking.
-  .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar[data-variant="floating"][data-collapsible="icon"] {
-    flex-basis: calc(var(--moo-sidebar-width-icon) + #{$spacer});
-    width: calc(var(--moo-sidebar-width-icon) + #{$spacer});
-  }
-
-  .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar[data-variant="floating"][data-collapsible="icon"] .sidebar-inner {
-    box-shadow: var(--bs-box-shadow);
-  }
-}
-
-.sidebar-inner {
-  position: sticky;
-  top: 0;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100svh;
-  max-height: 100svh;
-  background: var(--moo-sidebar);
-}
-
-.sidebar-wrapper--contained .sidebar-inner {
-  position: relative;
-  height: 100%;
-  max-height: 100%;
-}
-
-.sidebar-header,
-.sidebar-footer {
-  display: flex;
-  flex-direction: column;
-  gap: $spacer * 0.25;
-  padding: $spacer * 0.5;
-}
-
-.sidebar-content {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: $spacer * 0.5;
-  min-height: 0;
-  overflow-y: auto;
-}
-
-.sidebar-input {
-  width: 100%;
-  padding: $spacer * 0.25;
-}
-
-.sidebar-separator {
-  display: flex;
-}
-
-.sidebar-menu-skeleton {
-  display: flex;
-  align-items: center;
-  gap: $spacer * 0.25;
-  min-height: $spacer * 2;
-  padding-inline: $spacer * 0.5;
-}
-
-.sidebar-menu-skeleton__icon {
-  width: $spacer;
-  height: $spacer;
-}
-
-.sidebar-menu-skeleton__line {
-  flex: 1 1 auto;
-}
-
-.sidebar-group {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  padding: $spacer * 0.5;
-}
-
-.sidebar-group-content {
-  display: block;
-}
-
-.sidebar-group-content--inline {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: $spacer * 0.25;
-}
-
-.sidebar-group-label {
-  display: flex;
-  align-items: center;
-  height: $spacer * 2;
-  padding-inline: $spacer * 0.5;
-  color: var(--moo-muted-foreground);
-  font-size: $font-size-base * 0.857;
-  font-weight: $font-weight-medium;
-}
-
-// Reserve room so a long label doesn't run under the absolutely positioned
-// group action button (see .sidebar-group-action below). A descendant match
-// covers both a group action placed directly in .sidebar-group and one
-// nested inside .sidebar-group-content alongside the label.
-.sidebar-group:has(.sidebar-group-action) .sidebar-group-label {
-  padding-inline-end: $spacer * 2.5;
-}

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