@wpmoo/ui 0.9.0 → 1.0.0-rc.10

package/scss/layouts/_page_grid.scss

@@ -0,0 +1,27 @@
+[data-page-container] {
+  container: moo-page / inline-size;
+}
+
+[data-page-container] [data-page-show-from] {
+  display: none !important;
+}
+
+@each $breakpoint, $min-width in $grid-breakpoints {
+  @if $breakpoint != xs {
+    @container moo-page (min-width: #{$min-width}) {
+      @for $span from 1 through $grid-columns {
+        [data-page-container] .row[data-layout="page-grid"] > [data-page-col-#{$breakpoint}="#{$span}"] {
+          width: percentage(divide($span, $grid-columns));
+        }
+      }
+
+      [data-page-container] [data-page-show-from="#{$breakpoint}"] {
+        display: block !important;
+      }
+
+      [data-page-container] [data-page-hide-from="#{$breakpoint}"] {
+        display: none !important;
+      }
+    }
+  }
+}

package/scss/layouts/app/sidebar/_base.scss

@@ -0,0 +1,84 @@
+
+.sidebar {
+  --moo-sidebar-width: #{$moo-sidebar-width};
+  --moo-sidebar-width-icon: #{$moo-sidebar-width-icon};
+  --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-rail {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  z-index: 20;
+  width: $spacer;
+  padding: 0;
+  transform: translateX(50%);
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.sidebar:dir(rtl) .sidebar-rail {
+  transform: translateX(-50%);
+}
+
+.sidebar-rail::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 50%;
+  width: var(--bs-border-width);
+  background: transparent;
+  transition: background 0.15s ease;
+}
+
+.sidebar-rail:hover::after {
+  background: var(--moo-sidebar-border);
+}
+
+.wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar-inner {
+  position: relative;
+  height: 100%;
+  max-height: 100%;
+}
+
+@include media-breakpoint-up(lg) {
+  .sidebar {
+    position: relative;
+  }
+
+  .sidebar.offcanvas-lg[data-collapsible="offcanvas"] {
+    visibility: visible;
+    transform: none;
+  }
+
+  .wrapper[data-layout="app"][data-sidebar-state="collapsed"] > .sidebar.offcanvas-lg[data-collapsible="offcanvas"] {
+    flex-basis: 0;
+    width: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+
+  .wrapper[data-layout="app"]:has([data-sidebar-dropdown-positioned] > .dropdown-menu.show) > .sidebar {
+    position: relative;
+    z-index: $zindex-fixed + 1;
+  }
+
+  .wrapper[data-layout="app"]:has([data-sidebar-dropdown-positioned] > .dropdown-menu.show) > .sidebar > .sidebar-inner {
+    z-index: $zindex-fixed + 1;
+  }
+
+  .wrapper[data-layout="app"][data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] {
+    flex-basis: var(--moo-sidebar-width-icon);
+    width: var(--moo-sidebar-width-icon);
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  .sidebar-rail {
+    display: none;
+  }
+}

package/scss/layouts/app/sidebar/_default.scss

@@ -0,0 +1,20 @@
+
+.sidebar[data-side="left"]:not([data-variant="inset"]) .sidebar-inner {
+  border-right: var(--bs-border-width) solid var(--moo-sidebar-border);
+}
+
+.sidebar[data-side="right"] {
+  order: 1;
+}
+
+.wrapper[data-layout="app"]:dir(rtl) > .sidebar[data-side="left"] {
+  order: 1;
+}
+
+.wrapper[data-layout="app"]:dir(rtl) > .sidebar[data-side="right"] {
+  order: 0;
+}
+
+.sidebar[data-side="right"]:not([data-variant="inset"]) .sidebar-inner {
+  border-left: var(--bs-border-width) solid var(--moo-sidebar-border);
+}

package/scss/layouts/app/sidebar/_floating.scss

@@ -0,0 +1,36 @@
+
+@include media-breakpoint-up(lg) {
+  :where(.wrapper[data-layout="app"][data-sidebar-ready]) > .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);
+  }
+
+  .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar[data-variant="floating"] .sidebar-inner {
+    height: calc(100% - #{$spacer});
+    max-height: calc(100% - #{$spacer});
+  }
+
+  .wrapper[data-layout="app"][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});
+  }
+
+  .wrapper[data-layout="app"][data-sidebar-state="collapsed"] .sidebar[data-variant="floating"][data-collapsible="icon"] .sidebar-inner {
+    box-shadow: var(--bs-box-shadow);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sidebar {
+    transition: none;
+  }
+}

package/scss/layouts/app/sidebar/_inset.scss

@@ -0,0 +1,32 @@
+
+@include media-breakpoint-up(lg) {
+  .wrapper[data-layout="app"]:has(> .sidebar[data-variant="inset"]) {
+    background: var(--moo-sidebar);
+  }
+
+  .wrapper[data-layout="app"]:has(> .sidebar[data-variant="inset"]) > [data-slot="page"] {
+    margin: $spacer * 0.5;
+    margin-left: 0;
+    border-radius: var(--bs-border-radius-xl);
+    box-shadow: var(--bs-box-shadow-sm);
+    background: var(--bs-body-bg);
+  }
+
+  .wrapper[data-layout="app"]:has(> .sidebar[data-variant="inset"]) > [data-slot="page"] > header {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  .wrapper[data-layout="app"][data-sidebar-state="collapsed"]:has(> .sidebar[data-variant="inset"]) > [data-slot="page"] {
+    margin-left: $spacer * 0.5;
+  }
+
+  .wrapper[data-layout="app"]:has(> .sidebar[data-variant="inset"][data-side="right"]) > [data-slot="page"] {
+    margin-left: $spacer * 0.5;
+    margin-right: 0;
+  }
+
+  .wrapper[data-layout="app"][data-sidebar-state="collapsed"]:has(> .sidebar[data-variant="inset"][data-side="right"]) > [data-slot="page"] {
+    margin-right: $spacer * 0.5;
+  }
+}

package/scss/mixins/_banner.scss

@@ -0,0 +1,9 @@
+/*!
+ * Moo UI v1.0.0-rc.10 (https://wpmoo.org/)
+ * Copyright 2026 WPMoo Authors
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ *
+ * Bootstrap v5.3.3 (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */

package/scss/moo-core.scss

@@ -0,0 +1,16 @@
+@import "mixins/banner";
+@import "settings/options";
+@import "bootstrap/scss/functions";
+@import "settings";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+@import "themes/theme";
+/* Global styles */
+@import "foundations/globals";
+@import "foundations/backdrop";
+/* Theme tokens */
+@import "themes/root";
+@import "foundations/scope";

package/scss/moo-ui.scss

@@ -0,0 +1,54 @@
+@import "mixins/banner";
+@import "settings";
+
+/* Bootstrap configuration */
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+@import "themes/theme";
+
+/* Bootstrap layout and standalone-only components */
+@import "bootstrap/scss/root";
+/* Theme tokens */
+@import "themes/root";
+@import "themes/standalone";
+/* Base styles and typography */
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+/* Containers and grid */
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/forms/form-range";
+@import "bootstrap/scss/forms/floating-labels";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/placeholders";
+
+/* Bootstrap helpers */
+@import "bootstrap/scss/helpers/clearfix";
+@import "bootstrap/scss/helpers/colored-links";
+@import "bootstrap/scss/helpers/focus-ring";
+@import "bootstrap/scss/helpers/icon-link";
+@import "bootstrap/scss/helpers/ratio";
+@import "bootstrap/scss/helpers/position";
+@import "bootstrap/scss/helpers/stacks";
+@import "bootstrap/scss/helpers/visually-hidden";
+@import "bootstrap/scss/helpers/stretched-link";
+@import "bootstrap/scss/helpers/text-truncation";
+@import "bootstrap/scss/helpers/vr";
+
+/* Bootstrap utilities */
+@import "utilities/background_color";
+@import "bootstrap/scss/utilities/api";
+
+@import "utilities/scroll_fade_primitives";
+@import "foundations/backdrop";
+@import "foundations/scope";

package/scss/settings/_bootstrap_overrides.scss

@@ -0,0 +1,7 @@
+$btn-box-shadow: none !default;
+$btn-focus-box-shadow: none !default;
+$btn-active-box-shadow: none !default;
+
+$enable-cssgrid: true !default;
+
+$enable-validation-icons: false !default;

package/scss/settings/_component_variables.scss

@@ -0,0 +1,244 @@
+$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;
+$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;
+$moo-chip-height: 1.25rem !default;
+$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;
+$kbd-padding-y: 0 !default;
+$kbd-padding-x: 0.25rem !default;
+$kbd-font-size: 0.75rem !default;
+$kbd-color: var(--bs-secondary-text-emphasis) !default;
+$kbd-bg: var(--moo-muted-surface) !default;
+$moo-code-padding-y: 0.125rem !default;
+$moo-code-padding-x: 0.375rem !default;
+$moo-code-color: var(--bs-secondary-text-emphasis) !default;
+
+$moo-code-bg: var(--moo-muted-surface) !default;
+$breadcrumb-divider: quote(">") !default;
+$breadcrumb-divider-flipped: quote("<") !default;
+$moo-control-active-translate-y: 0.5px !default;
+$pagination-margin-start: 0.25rem !default;
+$pagination-padding-y: 0 !default;
+$pagination-padding-x: 0 !default;
+$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;
+$progress-height: 0.25rem !default;
+$progress-bar-color: var(--moo-primary-foreground) !default;
+$progress-bar-bg: var(--moo-primary) !default;
+$form-check-input-width: 1rem !default;
+$form-check-padding-start: 1.5rem !default;
+$moo-form-check-card-description-color: color-mix(in srgb, var(--moo-muted-foreground) 95%, var(--moo-foreground)) !default;
+$form-switch-width: 2rem !default;
+$form-switch-padding-start: 2.5rem !default;
+$moo-switch-height: 1.15rem !default;
+$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;
+$accordion-button-active-bg: var(--bs-accordion-bg) !default;
+$accordion-button-active-color: var(--bs-accordion-color) !default;
+
+$moo-accordion-contained-bg: transparent !default;
+$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;
+
+$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;
+$moo-card-spacing: 1rem !default;
+$moo-card-spacing-sm: 0.75rem !default;
+
+$moo-card-bg-mix: 5% !default;
+$moo-card-bg-mix-dark: 30% !default;
+
+$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;
+
+$table-th-font-weight: 500 !default;
+
+$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;
+$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;
+$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;
+
+$btn-font-size-sm: 0.8rem !default;
+$btn-font-size-lg: 0.875rem !default;
+
+$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;
+
+$moo-search-trigger-height: 2rem !default;
+$moo-search-trigger-width: 10rem !default;
+$moo-search-trigger-width-lg: 13rem !default;
+$moo-search-trigger-width-xxl: 16rem !default;
+$moo-search-trigger-padding-y: 0.5rem !default;
+$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;
+$moo-btn-icon-size: calc(
+  var(--bs-btn-line-height) +
+  var(--bs-btn-padding-y) * 2 +
+  var(--bs-btn-border-width) * 2
+) !default;
+
+$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;
+$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;
+
+$focus-ring-width: 2px !default;
+
+$moo-form-focus-ring-width: 3px !default;
+$moo-form-focus-ring-color: var(--moo-ring) !default;
+
+$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(6px) !default;
+
+$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;
+
+$moo-sidebar-width: 16rem !default;
+$moo-sidebar-width-icon: 3rem !default;
+
+$moo-dropdown-item-icon-size: 1.5rem !default;
+
+$moo-dropdown-sidebar-min-width: 14rem !default;
+
+$moo-dropdown-item-check-border-radius: .25em !default;
+
+$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;
+
+$moo-datepicker-width: 17.5rem !default;
+$moo-datepicker-popover-offset: 0.375rem !default;
+
+$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;
+
+$moo-datatable-bulk-actions-hover-scale: 1.02 !default;
+$moo-datatable-bulk-actions-backdrop-blur: 8px !default;
+
+$moo-datatable-bulk-actions-bottom: 1rem !default;
+$moo-table-contained-bg: transparent !default;
+$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;
+$moo-datatable-responsive-breakpoint: () !default;
+$moo-datatable-actions-cell-fade-width: 1.25rem !default;
+$moo-datatable-actions-cell-bg: var(--bs-body-bg) !default;
+$moo-datatable-frame-header-min-height: 2.78125rem !default;
+$moo-datatable-select-checkbox-size: 1rem !default;
+$moo-datatable-facet-item-border-radius: .25em !default;
+$moo-datatable-select-cell-inset: ($moo-datatable-frame-header-min-height - $moo-datatable-select-checkbox-size) * 0.5 - 0.0625rem !default;
+$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;
+$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;
+$moo-datatable-facet-item-height: 2rem !default;
+$moo-datatable-facet-options-max-height: $moo-datatable-facet-item-height * 10 !default;
+$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;
+$moo-datatable-preview-shell-max-width: 82rem !default;
+
+$moo-toast-status-icon-size: 1rem !default;
+$moo-toast-status-icon-gap: .5rem !default;
+$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,28 @@
+$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: var(--bs-border-radius-lg) !default;
+$input-placeholder-color: var(--bs-tertiary-color) !default;
+$input-focus-bg: var(--moo-input-bg, transparent) !default;
+$input-disabled-color: var(--moo-disabled-foreground) !default;
+$form-select-disabled-color: $input-disabled-color !default;
+$moo-disabled-control-opacity: 0.5 !default;
+$input-disabled-bg: color-mix(in srgb, var(--moo-border) 40%, transparent) !default;
+$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;
+$form-check-input-focus-box-shadow: 0 0 0 var(--bs-focus-ring-width) color-mix(in srgb, var(--moo-ring) 50%, transparent) !default;
+$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-input-group-border-radius: var(--bs-border-radius-lg) !default;
+$input-group-addon-bg: $input-bg !default;

package/scss/settings/_options.scss

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

package/scss/settings/_palette.scss

@@ -0,0 +1,90 @@
+$white: #fff !default;
+$black: #0a0a0a !default;
+
+$headings-font-weight: 600 !default;
+$lead-font-size: 1.125rem !default;
+$lead-font-weight: 400 !default;
+$display-font-sizes: (
+  1: 3.5rem,
+  2: 3rem,
+  3: 2.5rem,
+  4: 2.25rem,
+  5: 1.875rem,
+  6: 1.5rem
+) !default;
+$display-font-weight: $headings-font-weight !default;
+
+$moo-surface: $body-bg !default;
+$moo-muted-surface: $secondary !default;
+$moo-border: $border-color !default;
+$moo-primary: $primary !default;
+$moo-primary-foreground: $light !default;
+$moo-foreground: $body-color !default;
+$moo-muted-foreground: #71717a !default;
+$moo-ring: color-mix(in srgb, $white 60%, $primary) !default;
+$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;
+$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;
+$moo-warning-foreground: $moo-warning !default;
+$moo-success: $success !default;
+$moo-success-surface: color-mix(in srgb, $moo-success 10%, transparent) !default;
+$moo-success-surface-hover: color-mix(in srgb, $moo-success 20%, transparent) !default;
+$moo-success-foreground: $moo-success !default;
+$moo-info: $info !default;
+$moo-info-surface: color-mix(in srgb, $moo-info 10%, transparent) !default;
+$moo-info-surface-hover: color-mix(in srgb, $moo-info 20%, transparent) !default;
+$moo-info-foreground: $moo-info !default;
+$moo-sidebar: $light !default;
+$moo-chart-1: #52525b !default;
+$moo-chart-2: #71717a !default;
+$moo-chart-3: #a1a1aa !default;
+$moo-chart-4: #3f3f46 !default;
+$moo-chart-5: #27272a !default;
+$moo-surface-dark: $black !default;
+$moo-muted-surface-dark: #27272a !default;
+$moo-border-dark: #3f3f46 !default;
+$moo-primary-dark: $moo-border !default;
+$moo-primary-foreground-dark: $dark !default;
+$moo-foreground-dark: $light !default;
+$moo-muted-foreground-dark: #a1a1aa !default;
+$moo-ring-dark: color-mix(in srgb, $white 40%, $primary) !default;
+$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;
+$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;
+$moo-warning-foreground-dark: $moo-warning-dark !default;
+$moo-success-dark: color-mix(in srgb, $light 60%, $success) !default;
+$moo-success-surface-dark: color-mix(in srgb, $moo-success-dark 20%, transparent) !default;
+$moo-success-surface-hover-dark: color-mix(in srgb, $moo-success-dark 30%, transparent) !default;
+$moo-success-foreground-dark: $moo-success-dark !default;
+$moo-info-dark: color-mix(in srgb, $light 60%, $info) !default;
+$moo-info-surface-dark: color-mix(in srgb, $moo-info-dark 20%, transparent) !default;
+$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;
+$moo-input-bg-dark: color-mix(in srgb, $moo-muted-surface-dark 50%, $moo-surface-dark) !default;
+
+$body-tertiary-color: #a1a1aa !default;
+$body-tertiary-bg: $light !default;
+$code-color: #d63384 !default;
+$mark-bg: #fff3cd !default;
+$border-color-translucent: rgba(24, 24, 27, 0.175) !default;
+$body-tertiary-color-dark: $moo-muted-foreground !default;
+$body-tertiary-bg-dark: #202024 !default;
+$code-color-dark: #e685b5 !default;
+$mark-bg-dark: #664d03 !default;
+$border-color-translucent-dark: rgba(250, 250, 250, 0.15) !default;
+
+$moo-disabled-foreground: $body-tertiary-color !default;
+$moo-disabled-foreground-dark: $body-tertiary-color-dark !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)};
+}