@wpmoo/ui 1.0.0-rc.8 → 1.0.0

package/scss/settings/_component_variables.scss

@@ -1,5 +1,3 @@
-// Static component geometry belongs on Bootstrap's own Sass knobs. Bootstrap
-// then emits the matching --bs-* consumption variables for each component.
 $nav-link-padding-y: 0.375rem !default;
 $nav-link-padding-x: 0.75rem !default;
 $dropdown-min-width: 8rem !default;
@@ -8,95 +6,36 @@ $dropdown-padding-y: 0.25rem !default;
 $dropdown-item-padding-y: 0.25rem !default;
 $dropdown-item-padding-x: 0.375rem !default;
 $dropdown-header-padding-x: $dropdown-item-padding-x !default;
-// Bootstrap has no Combobox component. The Basic pass uses Bootstrap's input
-// height and dropdown menu surface, but the reference control widths,
-// item line-height, and secondary-row size have no Bootstrap knob, so they
-// live on component Sass knobs.
+$moo-small-font-size: 0.75rem !default;
+$moo-paragraph-margin-top: 0 !default;
 $moo-combobox-width: 12.5rem !default;
 $moo-combobox-multiple-width: $moo-combobox-width * 1.6 !default;
 $moo-combobox-menu-max-height: $input-height * 8 !default;
 $moo-combobox-option-line-height: 1.25rem !default;
 $moo-combobox-description-font-size: 0.75rem !default;
-// Badge, Kbd, and the Pagination icon-square baseline all share the
-// reference's 20px chip primitive (Tailwind h-5); one knob keeps them in
-// sync instead of repeating the literal across three unrelated component
-// files.
 $moo-chip-height: 1.25rem !default;
-// Bootstrap defaults badges to relative em sizing so they scale inside
-// headings/buttons. Moo badges are standalone status chips, and the reference
-// uses a fixed 20px chip with 12px/16px label metrics; keep that geometry on
-// Bootstrap's own badge Sass knobs before the component selector centers it.
 $badge-font-size: 0.75rem !default;
 $badge-font-weight: 500 !default;
 $badge-padding-y: 0.125rem !default;
 $badge-padding-x: 0.5rem !default;
 $badge-border-radius: var(--bs-border-radius-pill) !default;
 $badge-border-color: transparent !default;
-// The reference sizes its kbd chip via a fixed 20px height + flex centering
-// (Tailwind h-5/min-w-5), not padding math, so $kbd-padding-y drops to 0 --
-// components/_kbd.scss sets that fixed height directly. $kbd-padding-x
-// matches the reference's px-1 (4px) horizontal inset.
 $kbd-padding-y: 0 !default;
 $kbd-padding-x: 0.25rem !default;
 $kbd-font-size: 0.75rem !default;
-// var(--bs-secondary-color) on var(--bs-secondary-bg) fails WCAG 2 AA
-// contrast at this font-size (axe measured 4.07:1 light / 4.48:1 dark
-// against the 4.5:1 minimum for normal text), so this keeps the darker
-// text-emphasis token from that fix. The background moved to
-// --moo-muted-surface (the same token .btn-ghost's hover fill uses) to
-// match the reference's borderless filled-chip look instead of Bootstrap's
-// near-white "subtle" background + border combination; computed against
-// --bs-secondary-text-emphasis that's still 5.55:1 light / 14.03:1 dark,
-// comfortably above the 4.5:1 minimum.
 $kbd-color: var(--bs-secondary-text-emphasis) !default;
 $kbd-bg: var(--moo-muted-surface) !default;
-// references/bootstrap/5.3.3/scss/_variables.scss:1739-1740 defines only
-// $code-color/$code-font-size for <code> — no background/padding/radius
-// token, unlike <kbd> which gets $kbd-bg/$kbd-padding-*/$kbd-color at
-// lines 1742-1746 of the same file. Inline code in catalog prose still
-// wants that same "chip" affordance, so this is its own private token
-// pair (reusing the same underlying Bootstrap surface/text custom
-// properties kbd happens to use, not the $kbd-* Sass variables
-// themselves) rather than coupling a semantically different element to
-// <kbd>'s own knobs.
 $moo-code-padding-y: 0.125rem !default;
 $moo-code-padding-x: 0.375rem !default;
-// var(--bs-secondary-color) on this chip's own var(--moo-muted-surface)
-// background measures 4.40:1 in light mode, under the 4.5:1 WCAG AA
-// minimum for normal text — the same defect the Tabs trigger and Kbd
-// contrast fixes hit against this exact background/alias combination
-// (Moo UI's theme sets --bs-secondary-color: var(--moo-muted-foreground),
-// so it resolves to the same failing color; see scss/components/_tabs.scss).
-// var(--bs-secondary-text-emphasis) is the untouched Bootstrap token built
-// for accessible text on a tinted surface, and measures 5.55:1 light /
-// 14.03:1 dark against this same background.
 $moo-code-color: var(--bs-secondary-text-emphasis) !default;
 
-// Matches the reference's inline-code background (#f5f5f5) far more
-// closely than any --bs-*-bg step; --moo-muted-surface (#f4f4f5) is
-// effectively the same value.
 $moo-code-bg: var(--moo-muted-surface) !default;
-// The reference breadcrumb uses a chevron divider; Bootstrap's own default is "/".
 $breadcrumb-divider: quote(">") !default;
 $breadcrumb-divider-flipped: quote("<") !default;
-// Shared pressed-state movement for button-like controls. Bootstrap's inset
-// active shadow is disabled in _bootstrap_overrides.scss, so components that
-// present as buttons share this tiny physical press instead.
 $moo-control-active-translate-y: 0.5px !default;
-// The reference pagination items sit separated with no border, ghost-hover, and
-// only the active page gets a bordered box; Bootstrap's default is a fully
-// bordered, edge-to-edge connected strip. A positive margin-start switches
-// Bootstrap's own pagination.scss out of connected-border mode.
 $pagination-margin-start: 0.25rem !default;
 $pagination-padding-y: 0 !default;
 $pagination-padding-x: 0 !default;
-// The icon-square baseline in components/_pagination.scss used to add
-// var(--bs-pagination-padding-y) * 2 to reach the reference's hit target,
-// but $pagination-padding-y is zeroed above so real content padding could
-// move onto explicit content-aware rules instead (see components/
-// _pagination.scss's [aria-label]:has(...) selectors). Bootstrap's own
-// padding-y token no longer carries that space, so this knob preserves the
-// square's total inset independently instead of falling back to a literal.
 $moo-pagination-square-inset: 0.625rem !default;
 $pagination-font-size: 0.875rem !default;
 $pagination-border-radius: var(--bs-border-radius-lg) !default;
@@ -113,61 +52,26 @@ $pagination-active-border-color: var(--moo-border) !default;
 $pagination-disabled-color: var(--moo-disabled-foreground) !default;
 $pagination-disabled-bg: transparent !default;
 $pagination-disabled-border-color: transparent !default;
-// The reference progress track is a slim 4px bar; Bootstrap's default is 1rem.
 $progress-height: 0.25rem !default;
 $progress-bar-color: var(--moo-primary-foreground) !default;
 $progress-bar-bg: var(--moo-primary) !default;
-// Bootstrap's checkbox/radio default is 1em which follows the parent
-// font-size (14px here). The reference uses a fixed 16px (size-4), so
-// pin the width to 1rem to match 1:1 regardless of context font-size.
 $form-check-input-width: 1rem !default;
-// Bootstrap derives this as $form-check-input-width + .5em, but mixing
-// rem and em in Sass arithmetic fails to compile; restate it in rem.
 $form-check-padding-start: 1.5rem !default;
-// The reference switch track is chubbier than Bootstrap's default: 32x18.4px
-// versus Bootstrap's 2em x 1em (a flatter 2:1 shape). $form-switch-width is
-// Bootstrap's own customization point, but there is no matching height
-// variable — .form-switch inherits its height from the same
-// $form-check-input-width Checkbox and Radio Group use, so a dedicated
-// height lives on a private knob instead of resizing every .form-check
-// control. The Switch component partial consumes it directly.
+$moo-form-check-card-description-color: color-mix(in srgb, var(--moo-muted-foreground) 95%, var(--moo-foreground)) !default;
 $form-switch-width: 2rem !default;
-// Bootstrap derives padding-start as $form-switch-width + .5em, but mixing
-// rem and em in Sass arithmetic fails to compile; restate it in rem to
-// keep the same proportional gap Bootstrap's own default uses.
 $form-switch-padding-start: 2.5rem !default;
 $moo-switch-height: 1.15rem !default;
-// Bootstrap's dark unchecked switch thumb is separate from its checked
-// thumb. The checked dark state needs the opposite pair (light track,
-// dark thumb), so the component owns that SVG as its own compile-time knob.
 $moo-switch-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$moo-primary-foreground-dark}'/></svg>") !default;
-// The reference accordion trigger stays fully neutral when expanded (only an
-// underline on hover); Bootstrap's default tints the expanded trigger with
-// $primary-bg-subtle / $primary-text-emphasis. Referencing the resting
-// --bs-accordion-bg/-color custom properties (rather than the Sass
-// variables, which settings.scss loads before Bootstrap defines
-// them) matches the trigger's own resting look so expanding an item
-// changes nothing but the chevron and revealed content.
 $accordion-button-active-bg: var(--bs-accordion-bg) !default;
 $accordion-button-active-color: var(--bs-accordion-color) !default;
 
-// A nested accordion inherits its Card surface by default, while remaining
-// configurable for Sass consumers that need a distinct contained surface.
 $moo-accordion-contained-bg: transparent !default;
-// Bootstrap's pills nav has no shared-track concept, so the segmented
-// control's track padding/gap and trigger padding have no Bootstrap
-// variable to override — they are private knobs instead of literals in
-// the component partial. Values match the reference's 3px track padding,
-// 2px item gap, and 2px/12px trigger padding.
 $moo-tabs-list-padding: 0.1875rem !default;
 $moo-tabs-list-gap: 0.125rem !default;
 $moo-tabs-content-gap: 0.75rem !default;
 $moo-tabs-trigger-padding-y: 0.125rem !default;
 $moo-tabs-trigger-padding-x: 0.75rem !default;
 
-// Bootstrap's own spacer scale has no 2px/3px step, so the Menubar row's
-// tight track padding/gap around its triggers (verified against the live
-// reference) are private knobs rather than a "gap-1"/"p-1" utility.
 $moo-menubar-gap: 0.125rem !default;
 $moo-menubar-padding: 0.1875rem !default;
 $card-spacer-y: 0 !default;
@@ -176,48 +80,23 @@ $card-cap-padding-y: $card-spacer-y !default;
 $card-cap-padding-x: $card-spacer-x !default;
 $card-title-font-size: 1rem !default;
 $card-title-letter-spacing: -0.01em !default;
-// The reference card exposes one --moo-card-spacing rhythm for section gaps
-// and the inline inset of header/body/footer, defaulting to the 16px step of
-// Bootstrap's own spacer scale; the size="sm" variant drops to 12px. This is
-// a private consumption token because Bootstrap's card has no single
-// variable that covers both the vertical section gap and the horizontal
-// inset of every part. Literal values, not $spacer math: this file compiles
-// before Bootstrap's own variables (including $spacer) are defined.
 $moo-card-spacing: 1rem !default;
 $moo-card-spacing-sm: 0.75rem !default;
 
-// Card surface blends mix the muted surface over the base surface so cards keep
-// a subtle tint that tracks the runtime theme without hardcoding a color.
 $moo-card-bg-mix: 5% !default;
 $moo-card-bg-mix-dark: 30% !default;
 
-// Bootstrap exposes one card-cap background for both headers and footers, but
-// the reference needs no header fill and a separately tuned footer surface.
-// Keep that scoped gap on Moo card knobs, derived from runtime surface tokens
-// so theme changes still flow through Bootstrap's card variables.
 $moo-card-footer-bg: color-mix(in srgb, var(--bs-secondary-bg) 20%, var(--bs-body-bg)) !default;
 $moo-card-footer-bg-dark: color-mix(in srgb, var(--bs-secondary-bg) 50%, var(--bs-body-bg)) !default;
 
-// Bootstrap's own $table-th-font-weight defaults to null, leaving <th>
-// at the browser's bold UA default; the reference renders both header
-// cells and the emphasized first body column (a <th scope="row">) at a
-// medium weight instead, verified against the live reference. Restated
-// as a literal rather than referencing Bootstrap's own
-// $font-weight-medium (500), since this file compiles before
-// Bootstrap's own variables exist.
 $table-th-font-weight: 500 !default;
 
-// Bootstrap has no native avatar component. Keep unmatched static values as
-// compile-time Sass knobs; exact shared typography reuses Bootstrap variables.
 $avatar-size: 2rem !default;
 $avatar-size-sm: $avatar-size * 0.75 !default;
 $avatar-size-lg: $avatar-size * 1.25 !default;
 $avatar-font-size-sm: 0.75rem !default;
 $avatar-font-size-lg: 1rem !default;
 $avatar-line-height: 1 !default;
-// Verified against the live reference: a 32px avatar group overlaps by 8px
-// and a plain AvatarBadge renders a 10px mark with a 2px page-background
-// ring painted outside the mark.
 $avatar-group-overlap: -0.5rem !default;
 $avatar-badge-dot-size: 0.625rem !default;
 $avatar-badge-icon-size: $avatar-badge-dot-size !default;
@@ -226,10 +105,6 @@ $avatar-badge-ring-width: 2px !default;
 $avatar-group-ring-width: 2px !default;
 $avatar-badge-ring-shadow: 0 0 0 $avatar-badge-ring-width var(--bs-body-bg) !default;
 $avatar-group-ring-shadow: 0 0 0 $avatar-group-ring-width var(--bs-body-bg) !default;
-// Bootstrap's tooltip plugin has no motion-timing tokens (its own source
-// hardcodes the transition in tooltip.scss); the reference's subtle
-// zoom/slide open is scoped to Moo's tooltip surface, so the four motion
-// steps are private component knobs rather than global Bootstrap values.
 $moo-tooltip-motion-duration: 150ms !default;
 $moo-tooltip-motion-easing: cubic-bezier(0.16, 1, 0.3, 1) !default;
 $moo-tooltip-motion-scale: 0.95 !default;
@@ -241,14 +116,9 @@ $btn-line-height: 1.25rem !default;
 $btn-focus-width: 0.2rem !default;
 $moo-spinner-animation-name: spinner-border !default;
 
-// Size-scale fonts flow through Bootstrap's own variables so the
-// .btn-group-sm/-lg extend chains inherit them without re-declaration.
 $btn-font-size-sm: 0.8rem !default;
 $btn-font-size-lg: 0.875rem !default;
 
-// Button heights emerge from Bootstrap's own padding and line-height scale:
-// 32px default, 28px small, and 36px large. The custom xs class follows the
-// same box model in the component layer.
 $btn-padding-y: 0.3125rem !default;
 $btn-padding-x: 0.625rem !default;
 $btn-padding-y-sm: 0.3125rem !default;
@@ -256,10 +126,6 @@ $btn-padding-x-sm: 0.625rem !default;
 $btn-padding-y-lg: 0.4375rem !default;
 $btn-padding-x-lg: 0.625rem !default;
 
-// Bootstrap exposes button padding, but it has no command/search-trigger
-// composition or responsive width scale. Keep this shared control's geometry
-// on private knobs so Catalog and Odoo consume one Core contract instead of
-// copying chrome-specific literals into their own stylesheets.
 $moo-search-trigger-height: 2rem !default;
 $moo-search-trigger-width: 10rem !default;
 $moo-search-trigger-width-lg: 13rem !default;
@@ -269,20 +135,12 @@ $moo-search-trigger-padding-x: 0.75rem !default;
 $moo-search-trigger-border-color: transparent !default;
 $moo-search-trigger-label-gap: 0.5rem !default;
 $moo-search-trigger-shortcut-gap: 0.25rem !default;
-// Icon-only buttons are squares whose side equals the token-driven button
-// height (line-height + 2*padding-y + 2*border), matching sibling text
-// buttons. Bootstrap exposes no single icon-button size knob; the side is a
-// runtime calc over the --bs-btn-* consumption variables so size variants
-// (xs/sm/lg) resolve their own box, backed here by a private Sass knob.
 $moo-btn-icon-size: calc(
   var(--bs-btn-line-height) +
   var(--bs-btn-padding-y) * 2 +
   var(--bs-btn-border-width) * 2
 ) !default;
 
-// Bootstrap's close button already exposes Sass knobs for its content-box icon
-// and padding. Keep the native glyph slightly lighter than Bootstrap's default
-// while the padding preserves the 24px reference hit target.
 $btn-close-width: 0.75rem !default;
 $btn-close-height: $btn-close-width !default;
 $btn-close-padding-x: 0.34375rem !default;
@@ -292,35 +150,13 @@ $btn-close-hover-opacity: $btn-close-opacity !default;
 $btn-close-focus-opacity: $btn-close-opacity !default;
 $btn-close-disabled-opacity: $moo-disabled-control-opacity !default;
 $moo-close-button-border-color: transparent !default;
-// Bootstrap's close button ships a filled-path X glyph; the reference uses a
-// thinner Lucide-style stroke icon instead. .btn-close::before consumes this
-// through mask + currentColor (scss/components/_close_button.scss), so only
-// the SVG's alpha shape ever paints -- the stroke color itself never
-// renders -- but the design gate still requires every component custom
-// property to trace to a token source, so bind it through $black the same
-// way the switch's dark bg-image binds through $moo-primary-foreground-dark.
 $moo-close-button-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$black}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18'/><path d='m6 6 12 12'/></svg>") !default;
 
-// Shared focus primitive: a thin 2px ring. Components consume
-// --bs-focus-ring-width; only the ring color is a runtime theme token.
 $focus-ring-width: 2px !default;
 
-// The reference's own form-control focus ring is 3px, one size up from the
-// 2px ring the rest of the system uses on buttons/links/custom surfaces.
-// Input, Textarea, Select, Checkbox, Radio, and Switch all share this wider
-// ring so the reference's exact focus recipe carries over unmodified.
 $moo-form-focus-ring-width: 3px !default;
-// Same --moo-ring value the width above pairs with, aliased under a name
-// the shared-primitive design gate recognizes as a color reference (see
-// approved_shared_value's shadow-token check in tests/test_design_gates.py).
 $moo-form-focus-ring-color: var(--moo-ring) !default;
 
-// Shared overlay primitive for Bootstrap's native Modal and Offcanvas
-// 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;
@@ -328,56 +164,21 @@ $moo-overlay-backdrop-opacity: 1 !default;
 $moo-overlay-backdrop-bg: color-mix(in srgb, #0a0a0a 10%, transparent) !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.
 $box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !default;
 $box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !default;
 $box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !default;
 
 $border-radius-xl: 0.75rem !default;
 
-// Bootstrap has no sidebar primitive, so the app-shell geometry lives on
-// dedicated Sass knobs. The Sidebar component surfaces these as
-// --moo-sidebar-width / --moo-sidebar-width-icon consumption variables.
 $moo-sidebar-width: 16rem !default;
 $moo-sidebar-width-icon: 3rem !default;
 
-// Bootstrap's dropdown-item has no bordered icon-container concept, so the
-// Team Switcher-style icon box geometry lives on a dedicated Sass knob.
-// Border color/radius still ride Bootstrap consumption values.
 $moo-dropdown-item-icon-size: 1.5rem !default;
 
-// The Sidebar header/footer dropdown menus (team switcher, account menu)
-// intentionally overflow past the sidebar edge into the content column,
-// matching the design reference's min-w-56. Bootstrap's shared
-// $dropdown-min-width stays the default for every other dropdown in the
-// product; this is a sidebar-scoped floor, not a global change.
 $moo-dropdown-sidebar-min-width: 14rem !default;
 
-// Bootstrap has no --bs-form-check-input-border-radius custom property to
-// consume at runtime (only the compile-time $form-check-input-border-radius
-// Sass default, which this settings layer loads before Bootstrap defines),
-// so the checkbox-style menu-item indicator shared by Dropdown, Menubar,
-// Context Menu, and Data Table needs its own scoped knob to reuse
-// Checkbox's exact corner radius. Restated as .25em to match Bootstrap's
-// own $form-check-input-border-radius default.
 $moo-dropdown-item-check-border-radius: .25em !default;
 
-// Field has no matching Bootstrap component of its own, so its spacing
-// scale and legend sizing live on dedicated Sass knobs instead of
-// per-instance utility classes. Changing spacing/type for every Field
-// usage means changing the token here; a specific form that needs a
-// one-off deviation reaches for Bootstrap's own utility classes (gap-3,
-// mb-4, ...) instead, the same way plain Bootstrap forms already do.
-// Literal values, not $spacer math: this file compiles before Bootstrap's
-// own variables (including $spacer) are defined.
-// - field-gap: inside one field (label / control / description / error)
-// - field-form-gap: between direct children in a composed form
-// - field-group-gap: between sibling fields, fieldsets, and separators
-//   inside a field_group()
-// - field-fieldset-gap: between a fieldset's direct building blocks
-//   (its legend/description header, field groups, lone fields)
-// - field-fieldset-sibling-gap: between consecutive fieldsets in one form
 $moo-field-gap: 0.5rem !default;
 $moo-field-group-gap: 1.25rem !default;
 $moo-field-switch-gap: $moo-field-group-gap !default;
@@ -388,15 +189,9 @@ $moo-field-legend-font-size: 1rem !default;
 $moo-field-legend-margin-bottom: 0.375rem !default;
 $moo-field-separator-opacity: 0.1 !default;
 
-// Datepicker is a Moo-owned reference-style composition around Bootstrap button
-// primitives; Bootstrap ships no datepicker core component, so trigger/popover
-// geometry is Moo-owned.
 $moo-datepicker-width: 17.5rem !default;
 $moo-datepicker-popover-offset: 0.375rem !default;
 
-// The calendar grid geometry (day size, gap, padding, preset spacing, day
-// radii, focus ring) is also Moo-owned: Bootstrap has no calendar primitive
-// that could carry these values, so each is exposed as a !default knob.
 $moo-datepicker-day-size: 2rem !default;
 $moo-datepicker-gap: 0.25rem !default;
 $moo-datepicker-padding: 0.75rem !default;
@@ -405,97 +200,40 @@ $moo-datepicker-day-border-radius: var(--bs-border-radius-sm) !default;
 $moo-datepicker-day-range-joined-border-radius: 0 !default;
 $moo-datepicker-day-focus-ring-shadow: 0 0 0 #{$moo-form-focus-ring-width} color-mix(in srgb, #{$moo-form-focus-ring-color} 50%, transparent) !default;
 
-// Bootstrap has no floating/overlay toolbar primitive, so the Data Table
-// bulk-actions bar's hover affordance (the whole bar scaling up slightly,
-// not a per-button state) has no Bootstrap knob to consume. Exposed as a
-// scoped, consumer-overridable knob: set to 1 to turn the effect off, or
-// raise it for a more pronounced zoom.
 $moo-datatable-bulk-actions-hover-scale: 1.02 !default;
-// The selection bulk-actions bar is a fixed-position overlay surface; its
-// backdrop blur strength has no Bootstrap equivalent to consume.
 $moo-datatable-bulk-actions-backdrop-blur: 8px !default;
 
-// Fixed shell footers need to lift the floating selection bar above their
-// 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;
 $moo-datatable-release-review-min-width: 64rem !default;
 $moo-datatable-card-min-width: 20rem !default;
 $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-responsive-breakpoint: () !default;
 $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;
-// Bootstrap's checkbox width variable is not available while Moo settings
-// are aggregated, so keep Data Table's select inset derived from Moo's compact
-// checkbox box and Bootstrap's default 1px frame border. Now matches the
-// global $form-check-input-width (1rem / 16px) set above.
 $moo-datatable-select-checkbox-size: 1rem !default;
-// Bootstrap has no --bs-form-check-input-border-radius custom property to
-// consume here either, same gap as the checkbox size above, this time for
-// the facet dropdown's own checkbox-style indicator (datatable_facet_item(),
-// which can't reuse the shared .dropdown-item-check__indicator markup).
-// Scoped to Data Table since it can't reference Dropdown's private knob
-// across files; restated as .25em to match Bootstrap's own
-// $form-check-input-border-radius default so the facet dropdown reads as
-// the same control as the shared indicator and the real Checkbox.
 $moo-datatable-facet-item-border-radius: .25em !default;
-// Keep the select-all checkbox inset visually even with the table/card header's
-// vertical breathing while accounting for the framed wrapper border.
 $moo-datatable-select-cell-inset: ($moo-datatable-frame-header-min-height - $moo-datatable-select-checkbox-size) * 0.5 - 0.0625rem !default;
-// Bootstrap has no knob for reconciling a native table-cell checkbox baseline
-// with a flex-aligned card header checkbox, so this scoped 0.75px nudge keeps
-// their visual boxes on the same y-axis when switching between list/card view.
 $moo-datatable-table-select-all-offset-y: 0.046875rem !default;
 $moo-datatable-toolbar-control-height: calc(#{$input-height} + var(--bs-border-width) * 2) !default;
 $moo-datatable-icon-label-gap: 0.5rem !default;
-// Bootstrap dropdowns have no scoped Data Table filter-picker width token; the
-// compact root list and longer option drill-down each need their own knob.
 $moo-datatable-search-filter-menu-width: 12.5rem !default;
 $moo-datatable-search-filter-options-menu-width: 17rem !default;
 $moo-datatable-facet-menu-min-width: 12.5rem !default;
 $moo-datatable-facet-trigger-font-size: $btn-font-size-sm !default;
 $moo-datatable-facet-trigger-min-height: 2rem !default;
-// A viewport-relative cap (100vh - offset) assumes the menu opens near the
-// top of the screen; Popper can anchor it much lower, letting it overflow
-// the viewport anyway. A fixed cap sized to a row count -- the same
-// rows-per-screen convention Combobox's own long menu already uses -- stays
-// correct regardless of where the trigger sits on the page, and keeps a
-// long option list (e.g. every row owner) from crowding the whole screen.
-// Shared by both the inline facet dropdown and the filter-picker's
-// drill-down option list, so the two present the same row count.
 $moo-datatable-facet-item-height: 2rem !default;
 $moo-datatable-facet-options-max-height: $moo-datatable-facet-item-height * 10 !default;
-// Bootstrap has no thin scrollbar utility. Keep the primitive shared and let
-// Data Table inherit it unless a consumer needs a component-specific override.
 $moo-scrollbar-thin-size: 0.375rem !default;
 $moo-datatable-scrollbar-size: $moo-scrollbar-thin-size !default;
 $moo-datatable-page-size-trigger-min-width: 3.25rem !default;
 $moo-datatable-page-size-menu-min-width: 4rem !default;
-// Catalog preview chrome: maximum width of the full-bleed release-review
-// preview pages that host the Data Table block.
 $moo-datatable-preview-shell-max-width: 82rem !default;
 
-// Bootstrap Toast has no deck gap, peek, scale-step, or slide-in timing knobs.
-// Keep the stacked catalog presentation on scoped Sass settings so the runtime
-// can consume the same values through the Toast container.
 $moo-toast-status-icon-size: 1rem !default;
 $moo-toast-status-icon-gap: .5rem !default;
-// Bootstrap Toast has no deck gap, peek, scale-step, or slide-in timing knobs.
-// Keep the indexed deck presentation on Bootstrap-scoped Sass settings so the
-// runtime can consume the same values through the Toast container.
 $moo-toast-stack-gap: .75rem !default;
 $moo-toast-stack-peek: .75rem !default;
 $moo-toast-stack-scale-step: .1 !default;

package/scss/settings/_forms.scss

@@ -1,49 +1,20 @@
-// Bootstrap's form-control consumes these values directly. Keep the native
-// Sass contract, but give text controls the same quiet surface and compact
-// geometry as the design reference.
 $input-padding-y: 0.25rem !default;
 $input-padding-x: 0.625rem !default;
 $input-height: 2rem !default;
 $input-line-height: 1.4285714286 !default;
 $input-bg: var(--moo-input-bg, transparent) !default;
 $input-border-color: var(--moo-border) !default;
-$input-border-radius: 0.625rem !default;
+$input-border-radius: var(--bs-border-radius-lg) !default;
 $input-placeholder-color: var(--bs-tertiary-color) !default;
 $input-focus-bg: var(--moo-input-bg, transparent) !default;
-// Bootstrap leaves disabled text-control foregrounds null by default
-// (vendor/bootstrap/scss/_variables.scss), which lets real values inherit the
-// normal input color. Use Moo's disabled foreground token so disabled values
-// stay quieter than ordinary secondary text across form-control and form-select.
 $input-disabled-color: var(--moo-disabled-foreground) !default;
 $form-select-disabled-color: $input-disabled-color !default;
-// Disabled controls need the whole affordance to fade, including native select
-// arrows and Moo-owned trailing icons, so opacity is a shared state token.
 $moo-disabled-control-opacity: 0.5 !default;
-// Bootstrap's own $input-disabled-bg defaults to the opaque $secondary-bg
-// (vendor/bootstrap/scss/_variables.scss), which reads much darker/heavier
-// than the disabled reference: a faint translucent tint over the input
-// border color, not a solid fill. Bootstrap exposes no subtler disabled
-// surface token, so this stays on the existing $input-border-color knob at
-// low opacity instead of a new private --moo-* token.
 $input-disabled-bg: color-mix(in srgb, var(--moo-border) 40%, transparent) !default;
-// Bootstrap's own $form-file-button-hover-bg defaults to --bs-secondary-bg,
-// which is nearly identical to $form-file-button-bg (--bs-tertiary-bg) in
-// both themes, so hovering the file input's button gives almost no visible
-// feedback. Point the hover state at the existing border token instead of
-// introducing a new one; it stays distinct from the button's resting bg in
-// both light and dark theme blocks (vendor/bootstrap/scss/forms/_form-control.scss).
 $form-file-button-hover-bg: var(--moo-border) !default;
 $form-text-margin-top: 0.5rem !default;
 $form-check-input-focus-border: var(--moo-border) !default;
-// Native checkbox/radio/switch controls have a very small focus target. Keep
-// Bootstrap's form-check glow contract, but make the visible keyboard ring
-// strong enough to clear the 3:1 focus-indicator contrast target on white and
-// dark surfaces.
 $form-check-input-focus-box-shadow: 0 0 0 var(--bs-focus-ring-width) color-mix(in srgb, var(--moo-ring) 50%, transparent) !default;
-// Bootstrap's native checked/range controls consume Sass variables rather
-// than component CSS variables. Point those Sass defaults at Moo's runtime
-// primary token so Theme color previews update checkboxes, radios, switches,
-// and range thumbs without replacing Bootstrap's markup contract.
 $form-check-input-checked-bg-color: var(--moo-primary) !default;
 $form-check-input-checked-border-color: var(--moo-primary) !default;
 $form-check-input-indeterminate-bg-color: var(--moo-primary) !default;
@@ -53,13 +24,5 @@ $moo-form-check-indeterminate-bg-size: 62% 14% !default;
 $moo-form-check-indeterminate-bg-position: center !default;
 $form-range-thumb-bg: var(--moo-primary) !default;
 $form-range-thumb-active-bg: color-mix(in srgb, var(--moo-primary) 85%, var(--moo-surface)) !default;
-// Moo promotes Bootstrap input groups from separate child borders to one
-// compound border. Bootstrap has no parent input-group radius knob, so the
-// default parent radius lives here while .rounded-pill can still opt into
-// Bootstrap's native pill radius utility.
 $moo-input-group-border-radius: var(--bs-border-radius-lg) !default;
-// Input group addons (text, buttons) share the exact input surface so the
-// whole group reads as one compound control, not a row of mismatched tiles.
-// Bootstrap defaults addons to --bs-tertiary-bg; Moo ties them to $input-bg
-// so light-mode transparent inputs and dark-mode --moo-input-bg stay aligned.
 $input-group-addon-bg: $input-bg !default;

package/scss/settings/_palette.scss

@@ -4,11 +4,6 @@ $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,
@@ -19,9 +14,6 @@ $display-font-sizes: (
 ) !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;
@@ -29,25 +21,13 @@ $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;
@@ -66,9 +46,6 @@ $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;
@@ -76,20 +53,13 @@ $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;
@@ -103,17 +73,8 @@ $moo-info-surface-dark: color-mix(in srgb, $moo-info-dark 20%, transparent) !def
 $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/_theme.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;
@@ -125,8 +86,5 @@ $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;