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

package/scss/settings/_component_variables.scss

@@ -0,0 +1,480 @@
+// 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;
+$dropdown-padding-x: 0.25rem !default;
+$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-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;
+$pagination-color: var(--moo-muted-foreground) !default;
+$pagination-bg: transparent !default;
+$pagination-border-color: transparent !default;
+$pagination-hover-color: var(--bs-body-color) !default;
+$pagination-hover-bg: color-mix(in srgb, var(--moo-muted-surface) 50%, transparent) !default;
+$pagination-hover-border-color: transparent !default;
+$pagination-focus-bg: color-mix(in srgb, var(--moo-muted-surface) 50%, transparent) !default;
+$pagination-active-color: var(--bs-body-color) !default;
+$pagination-active-bg: color-mix(in srgb, var(--moo-muted-surface) 50%, transparent) !default;
+$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.
+$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;
+$card-spacer-x: 1.5rem !default;
+$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;
+$avatar-badge-icon-glyph-size: 0.5rem !default;
+$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;
+$moo-tooltip-motion-translate: 0.25rem !default;
+
+$btn-font-weight: 500 !default;
+$btn-font-size: 0.875rem !default;
+$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;
+$btn-padding-x-sm: 0.625rem !default;
+$btn-padding-y-lg: 0.4375rem !default;
+$btn-padding-x-lg: 0.625rem !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;
+$btn-close-padding-y: $btn-close-padding-x !default;
+$btn-close-opacity: 1 !default;
+$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.
+$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;
+
+// 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;
+$moo-field-form-gap: $moo-field-group-gap !default;
+$moo-field-fieldset-gap: 1rem !default;
+$moo-field-fieldset-sibling-gap: $moo-field-group-gap !default;
+$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;
+$moo-datepicker-preset-gap: 0.375rem !default;
+$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 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-actions-cell-fade-width: 1.25rem !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;
+$moo-toast-stack-min-scale: .5 !default;
+$moo-toast-stack-enter-y: 150% !default;
+$moo-toast-stack-transition-duration: .5s !default;
+$moo-toast-stack-height-transition-duration: .15s !default;
+$moo-toast-stack-transition-timing-function: cubic-bezier(.22, 1, .36, 1) !default;

package/scss/settings/_forms.scss

@@ -0,0 +1,65 @@
+// 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-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;
+$form-check-input-indeterminate-border-color: var(--moo-primary) !default;
+$moo-form-checkmark-border-width: 0 0.14em 0.14em 0 !default;
+$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;