@wpmoo/ui 0.9.0 → 1.0.0-rc.10

package/scss/themes/_root.scss

@@ -0,0 +1,20 @@
+.moo-ui[data-bs-theme] {
+  @include moo-core-scales;
+  @include moo-core-shared;
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  font-weight: var(--bs-body-font-weight);
+  line-height: var(--bs-body-line-height);
+}
+
+.moo-ui[data-bs-theme="light"] {
+  @include moo-core-light;
+}
+
+.moo-ui[data-bs-theme="dark"] {
+  @include moo-core-dark;
+}
+
+.moo-ui[data-bs-theme][dir="rtl"] {
+  direction: rtl;
+}

package/scss/themes/_standalone.scss

@@ -0,0 +1,3 @@
+body > .moo-ui[data-bs-theme]:not([data-moo-overlay-host]) {
+  min-block-size: 100dvh;
+}

package/scss/themes/_theme.scss

@@ -0,0 +1,244 @@
+$moo-theme-colors-text-dark: (
+  "primary": $primary-text-emphasis-dark,
+  "secondary": $secondary-text-emphasis-dark,
+  "success": $success-text-emphasis-dark,
+  "info": $info-text-emphasis-dark,
+  "warning": $warning-text-emphasis-dark,
+  "danger": $danger-text-emphasis-dark,
+  "light": $light-text-emphasis-dark,
+  "dark": $dark-text-emphasis-dark,
+) !default;
+
+$moo-theme-colors-bg-subtle-dark: (
+  "primary": $primary-bg-subtle-dark,
+  "secondary": $secondary-bg-subtle-dark,
+  "success": $success-bg-subtle-dark,
+  "info": $info-bg-subtle-dark,
+  "warning": $warning-bg-subtle-dark,
+  "danger": $danger-bg-subtle-dark,
+  "light": $light-bg-subtle-dark,
+  "dark": $dark-bg-subtle-dark,
+) !default;
+
+$moo-theme-colors-border-subtle-dark: (
+  "primary": $primary-border-subtle-dark,
+  "secondary": $secondary-border-subtle-dark,
+  "success": $success-border-subtle-dark,
+  "info": $info-border-subtle-dark,
+  "warning": $warning-border-subtle-dark,
+  "danger": $danger-border-subtle-dark,
+  "light": $light-border-subtle-dark,
+  "dark": $dark-border-subtle-dark,
+) !default;
+
+@mixin moo-core-scales {
+  @each $color, $value in $colors {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $grays {
+    --#{$prefix}gray-#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-rgb {
+    --#{$prefix}#{$color}-rgb: #{$value};
+  }
+
+  --#{$prefix}white-rgb: #{to-rgb($white)};
+  --#{$prefix}black-rgb: #{to-rgb($black)};
+  --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
+  --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
+  --#{$prefix}gradient: #{$gradient};
+  --#{$prefix}body-font-family: #{inspect($font-family-base)};
+  @include rfs($font-size-base, --#{$prefix}body-font-size);
+  --#{$prefix}body-font-weight: #{$font-weight-base};
+  --#{$prefix}body-line-height: #{$line-height-base};
+  --#{$prefix}link-decoration: #{$link-decoration};
+  --#{$prefix}border-width: #{$border-width};
+  --#{$prefix}border-style: #{$border-style};
+  --#{$prefix}border-radius: #{$border-radius};
+  --#{$prefix}border-radius-sm: #{$border-radius-sm};
+  --#{$prefix}border-radius-lg: #{$border-radius-lg};
+  --#{$prefix}border-radius-xl: #{$border-radius-xl};
+  --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
+  --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl);
+  --#{$prefix}border-radius-pill: #{$border-radius-pill};
+  --#{$prefix}box-shadow: #{$box-shadow};
+  --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
+  --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
+  --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
+  --#{$prefix}focus-ring-width: #{$focus-ring-width};
+  --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
+  --#{$prefix}focus-ring-color: var(--moo-ring);
+}
+
+@mixin moo-core-shared {
+  --moo-overlay-motion-duration: #{$moo-overlay-motion-duration};
+  --moo-overlay-backdrop-opacity: #{$moo-overlay-backdrop-opacity};
+  --moo-overlay-backdrop-bg: #{$moo-overlay-backdrop-bg};
+  --moo-overlay-backdrop-filter: #{$moo-overlay-backdrop-filter};
+  --moo-input-group-border-radius: #{$moo-input-group-border-radius};
+  --moo-disabled-control-opacity: #{$moo-disabled-control-opacity};
+  --moo-sidebar-foreground: var(--moo-foreground);
+  --moo-sidebar-accent: var(--moo-muted-surface);
+  --moo-sidebar-border: var(--moo-border);
+  --moo-chart-1: #{$moo-chart-1};
+  --moo-chart-2: #{$moo-chart-2};
+  --moo-chart-3: #{$moo-chart-3};
+  --moo-chart-4: #{$moo-chart-4};
+  --moo-chart-5: #{$moo-chart-5};
+  --moo-heading-font-family: var(--#{$prefix}body-font-family);
+  --moo-small-font-size: #{$moo-small-font-size};
+  --moo-paragraph-margin-top: #{$moo-paragraph-margin-top};
+  --moo-paragraph-margin-bottom: #{$paragraph-margin-bottom};
+}
+
+@mixin moo-core-light {
+  color-scheme: light;
+  color: var(--#{$prefix}body-color);
+  background-color: var(--#{$prefix}body-bg);
+  --moo-surface: #{$moo-surface};
+  --moo-muted-surface: #{$moo-muted-surface};
+  --moo-border: #{$moo-border};
+  --moo-primary: #{$moo-primary};
+  --moo-primary-foreground: #{$moo-primary-foreground};
+  --moo-foreground: #{$moo-foreground};
+  --moo-muted-foreground: #{$moo-muted-foreground};
+  --moo-disabled-foreground: #{$moo-disabled-foreground};
+  --moo-ring: #{$moo-ring};
+  --moo-destructive: #{$moo-destructive};
+  --moo-destructive-surface: #{$moo-destructive-surface};
+  --moo-destructive-surface-hover: #{$moo-destructive-surface-hover};
+  --moo-destructive-foreground: #{$moo-destructive-foreground};
+  --moo-form-invalid-ring-color: #{$moo-form-invalid-ring-color};
+  --moo-warning: #{$moo-warning};
+  --moo-warning-surface: #{$moo-warning-surface};
+  --moo-warning-surface-hover: #{$moo-warning-surface-hover};
+  --moo-warning-foreground: #{$moo-warning-foreground};
+  --moo-success: #{$moo-success};
+  --moo-success-surface: #{$moo-success-surface};
+  --moo-success-surface-hover: #{$moo-success-surface-hover};
+  --moo-success-foreground: #{$moo-success-foreground};
+  --moo-info: #{$moo-info};
+  --moo-info-surface: #{$moo-info-surface};
+  --moo-info-surface-hover: #{$moo-info-surface-hover};
+  --moo-info-foreground: #{$moo-info-foreground};
+  --moo-sidebar: #{$moo-sidebar};
+  --#{$prefix}body-color: var(--moo-foreground);
+  --#{$prefix}body-color-rgb: #{to-rgb($moo-foreground)};
+  --#{$prefix}body-bg: var(--moo-surface);
+  --#{$prefix}body-bg-rgb: #{to-rgb($moo-surface)};
+  --#{$prefix}emphasis-color: var(--moo-foreground);
+  --#{$prefix}emphasis-color-rgb: #{to-rgb($moo-foreground)};
+  --#{$prefix}secondary-color: var(--moo-muted-foreground);
+  --#{$prefix}secondary-color-rgb: #{to-rgb($moo-muted-foreground)};
+  --#{$prefix}secondary-bg: var(--moo-muted-surface);
+  --#{$prefix}secondary-bg-rgb: #{to-rgb($moo-muted-surface)};
+  --#{$prefix}tertiary-color: #{$body-tertiary-color};
+  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
+  --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
+  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
+  --#{$prefix}heading-color: var(--moo-foreground);
+  --#{$prefix}link-color: var(--moo-foreground);
+  --#{$prefix}link-color-rgb: #{to-rgb($moo-foreground)};
+  --#{$prefix}link-hover-color: var(--moo-muted-foreground);
+  --#{$prefix}link-hover-color-rgb: #{to-rgb($moo-muted-foreground)};
+  --#{$prefix}code-color: #{$code-color};
+  --#{$prefix}highlight-color: var(--moo-foreground);
+  --#{$prefix}highlight-bg: #{$mark-bg};
+  --#{$prefix}border-color: var(--moo-border);
+  --#{$prefix}border-color-translucent: #{$border-color-translucent};
+  --#{$prefix}form-valid-color: #{$form-valid-color};
+  --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
+  --#{$prefix}form-invalid-color: var(--moo-destructive);
+  --#{$prefix}form-invalid-border-color: #{$moo-form-invalid-border-color};
+
+  @each $color, $value in $theme-colors-text {
+    --#{$prefix}#{$color}-text-emphasis: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-bg-subtle {
+    --#{$prefix}#{$color}-bg-subtle: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-border-subtle {
+    --#{$prefix}#{$color}-border-subtle: #{$value};
+  }
+}
+
+@mixin moo-core-dark {
+  color-scheme: dark;
+  color: var(--#{$prefix}body-color);
+  background-color: var(--#{$prefix}body-bg);
+  --moo-surface: #{$moo-surface-dark};
+  --moo-muted-surface: #{$moo-muted-surface-dark};
+  --moo-border: #{$moo-border-dark};
+  --moo-primary: #{$moo-primary-dark};
+  --moo-primary-foreground: #{$moo-primary-foreground-dark};
+  --moo-foreground: #{$moo-foreground-dark};
+  --moo-muted-foreground: #{$moo-muted-foreground-dark};
+  --moo-disabled-foreground: #{$moo-disabled-foreground-dark};
+  --moo-ring: #{$moo-ring-dark};
+  --moo-destructive: #{$moo-destructive-dark};
+  --moo-destructive-surface: #{$moo-destructive-surface-dark};
+  --moo-destructive-surface-hover: #{$moo-destructive-surface-hover-dark};
+  --moo-destructive-foreground: #{$moo-destructive-foreground-dark};
+  --moo-form-invalid-ring-color: #{$moo-form-invalid-ring-color-dark};
+  --moo-warning: #{$moo-warning-dark};
+  --moo-warning-surface: #{$moo-warning-surface-dark};
+  --moo-warning-surface-hover: #{$moo-warning-surface-hover-dark};
+  --moo-warning-foreground: #{$moo-warning-foreground-dark};
+  --moo-success: #{$moo-success-dark};
+  --moo-success-surface: #{$moo-success-surface-dark};
+  --moo-success-surface-hover: #{$moo-success-surface-hover-dark};
+  --moo-success-foreground: #{$moo-success-foreground-dark};
+  --moo-info: #{$moo-info-dark};
+  --moo-info-surface: #{$moo-info-surface-dark};
+  --moo-info-surface-hover: #{$moo-info-surface-hover-dark};
+  --moo-info-foreground: #{$moo-info-foreground-dark};
+  --moo-sidebar: #{$moo-sidebar-dark};
+  --#{$prefix}body-color: var(--moo-foreground);
+  --#{$prefix}body-color-rgb: #{to-rgb($moo-foreground-dark)};
+  --#{$prefix}body-bg: var(--moo-surface);
+  --#{$prefix}body-bg-rgb: #{to-rgb($moo-surface-dark)};
+  --#{$prefix}emphasis-color: var(--moo-foreground);
+  --#{$prefix}emphasis-color-rgb: #{to-rgb($moo-foreground-dark)};
+  --#{$prefix}secondary-color: var(--moo-muted-foreground);
+  --#{$prefix}secondary-color-rgb: #{to-rgb($moo-muted-foreground-dark)};
+  --#{$prefix}secondary-bg: var(--moo-muted-surface);
+  --#{$prefix}secondary-bg-rgb: #{to-rgb($moo-muted-surface-dark)};
+  --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
+  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+  --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+  --#{$prefix}heading-color: var(--moo-foreground);
+  --#{$prefix}link-color: var(--moo-foreground);
+  --#{$prefix}link-color-rgb: #{to-rgb($moo-foreground-dark)};
+  --#{$prefix}link-hover-color: var(--moo-muted-foreground);
+  --#{$prefix}link-hover-color-rgb: #{to-rgb($moo-muted-foreground-dark)};
+  --#{$prefix}code-color: #{$code-color-dark};
+  --#{$prefix}highlight-color: var(--moo-foreground);
+  --#{$prefix}highlight-bg: #{$mark-bg-dark};
+  --#{$prefix}border-color: var(--moo-border);
+  --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+  --#{$prefix}form-valid-color: #{$form-valid-color-dark};
+  --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
+  --#{$prefix}form-invalid-color: var(--moo-destructive);
+  --#{$prefix}form-invalid-border-color: #{$moo-form-invalid-border-color-dark};
+
+  @each $color, $value in $moo-theme-colors-text-dark {
+    --#{$prefix}#{$color}-text-emphasis: #{$value};
+  }
+
+  @each $color, $value in $moo-theme-colors-bg-subtle-dark {
+    --#{$prefix}#{$color}-bg-subtle: #{$value};
+  }
+
+  @each $color, $value in $moo-theme-colors-border-subtle-dark {
+    --#{$prefix}#{$color}-border-subtle: #{$value};
+  }
+}

package/scss/utilities/_background_color.scss

@@ -0,0 +1,18 @@
+$moo-bg-color-utility: map-get($utilities, "background-color");
+$moo-bg-color-values: map-get($moo-bg-color-utility, values);
+$utilities: map-merge(
+  $utilities,
+  (
+    "background-color": map-merge(
+      $moo-bg-color-utility,
+      (
+        values: map-merge(
+          $moo-bg-color-values,
+          (
+            "body-secondary": unquote("rgb(from var(--#{$prefix}secondary-bg) r g b / var(--#{$prefix}bg-opacity))"),
+          )
+        ),
+      )
+    ),
+  )
+);

package/scss/utilities/_scroll_fade.scss

@@ -0,0 +1,193 @@
+:where(
+  .scroll-fade,
+  .scroll-fade-y,
+  .scroll-fade-x,
+  .scroll-fade-t,
+  .scroll-fade-b,
+  .scroll-fade-l,
+  .scroll-fade-r,
+  .scroll-fade-s,
+  .scroll-fade-e
+) {
+  --scroll-fade-size: min(12%, 2.5rem);
+  --scroll-fade-reveal: 6rem;
+  --moo-scroll-fade-t-size: var(--scroll-fade-size);
+  --moo-scroll-fade-b-size: var(--scroll-fade-size);
+  --moo-scroll-fade-s-size: var(--scroll-fade-size);
+  --moo-scroll-fade-e-size: var(--scroll-fade-size);
+  --moo-scroll-fade-mask: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--moo-scroll-fade-t),
+    #000 calc(100% - var(--moo-scroll-fade-b)),
+    transparent 100%
+  );
+  mask-image: var(--moo-scroll-fade-mask);
+}
+
+.scroll-fade,
+.scroll-fade-y {
+  animation-name: moo-scroll-fade-reveal-t, moo-scroll-fade-reveal-b;
+  animation-duration: 1ms, 1ms;
+  animation-fill-mode: both, both;
+  animation-timing-function: linear, linear;
+  animation-timeline: scroll(self y), scroll(self y);
+  animation-range: 0 var(--scroll-fade-reveal), calc(100% - var(--scroll-fade-reveal)) 100%;
+}
+
+.scroll-fade-t {
+  animation-name: moo-scroll-fade-reveal-t;
+  animation-duration: 1ms;
+  animation-fill-mode: both;
+  animation-timing-function: linear;
+  animation-timeline: scroll(self y);
+  animation-range: 0 var(--scroll-fade-reveal);
+}
+
+.scroll-fade-b {
+  animation-name: moo-scroll-fade-reveal-b;
+  animation-duration: 1ms;
+  animation-fill-mode: both;
+  animation-timing-function: linear;
+  animation-timeline: scroll(self y);
+  animation-range: calc(100% - var(--scroll-fade-reveal)) 100%;
+}
+
+.scroll-fade-x,
+.scroll-fade-s,
+.scroll-fade-e {
+  --moo-scroll-fade-mask: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--moo-scroll-fade-s),
+    #000 calc(100% - var(--moo-scroll-fade-e)),
+    transparent 100%
+  );
+}
+
+.scroll-fade-x {
+  animation-name: moo-scroll-fade-reveal-s, moo-scroll-fade-reveal-e;
+  animation-duration: 1ms, 1ms;
+  animation-fill-mode: both, both;
+  animation-timing-function: linear, linear;
+  animation-timeline: scroll(self inline), scroll(self inline);
+  animation-range: 0 var(--scroll-fade-reveal), calc(100% - var(--scroll-fade-reveal)) 100%;
+}
+
+.scroll-fade-s {
+  animation-name: moo-scroll-fade-reveal-s;
+  animation-duration: 1ms;
+  animation-fill-mode: both;
+  animation-timing-function: linear;
+  animation-timeline: scroll(self inline);
+  animation-range: 0 var(--scroll-fade-reveal);
+}
+
+.scroll-fade-e {
+  animation-name: moo-scroll-fade-reveal-e;
+  animation-duration: 1ms;
+  animation-fill-mode: both;
+  animation-timing-function: linear;
+  animation-timeline: scroll(self inline);
+  animation-range: calc(100% - var(--scroll-fade-reveal)) 100%;
+}
+
+.scroll-fade-x:where([dir="rtl"], [dir="rtl"] *),
+.scroll-fade-s:where([dir="rtl"], [dir="rtl"] *),
+.scroll-fade-e:where([dir="rtl"], [dir="rtl"] *) {
+  --moo-scroll-fade-mask: linear-gradient(
+    to left,
+    transparent 0,
+    #000 var(--moo-scroll-fade-s),
+    #000 calc(100% - var(--moo-scroll-fade-e)),
+    transparent 100%
+  );
+}
+
+.scroll-fade-l,
+.scroll-fade-r {
+  --moo-scroll-fade-mask: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--moo-scroll-fade-s),
+    #000 calc(100% - var(--moo-scroll-fade-e)),
+    transparent 100%
+  );
+}
+
+.scroll-fade-l {
+  animation-name: moo-scroll-fade-reveal-s;
+  animation-duration: 1ms;
+  animation-fill-mode: both;
+  animation-timing-function: linear;
+  animation-timeline: scroll(self x);
+  animation-range: 0 var(--scroll-fade-reveal);
+}
+
+.scroll-fade-r {
+  animation-name: moo-scroll-fade-reveal-e;
+  animation-duration: 1ms;
+  animation-fill-mode: both;
+  animation-timing-function: linear;
+  animation-timeline: scroll(self x);
+  animation-range: calc(100% - var(--scroll-fade-reveal)) 100%;
+}
+
+.scroll-fade-none {
+  --moo-scroll-fade-mask: none;
+}
+
+.no-scrollbar {
+  scrollbar-width: none;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.scrollbar-thin {
+  --moo-scrollbar-thin-size: #{$moo-scrollbar-thin-size};
+  --moo-scrollbar-thin-thumb-bg: color-mix(in srgb, var(--bs-secondary-color) 28%, transparent);
+  --moo-scrollbar-thin-thumb-hover-bg: color-mix(in srgb, var(--bs-secondary-color) 45%, transparent);
+
+  scrollbar-color: var(--moo-scrollbar-thin-thumb-bg) transparent;
+  scrollbar-width: thin;
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  width: var(--moo-scrollbar-thin-size);
+  height: var(--moo-scrollbar-thin-size);
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  border-radius: var(--bs-border-radius-pill);
+  background-color: var(--moo-scrollbar-thin-thumb-bg);
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background-color: var(--moo-scrollbar-thin-thumb-hover-bg);
+}
+
+@supports not (animation-timeline: scroll()) {
+  .scroll-fade,
+  .scroll-fade-y {
+    --moo-scroll-fade-t: var(--moo-scroll-fade-t-size);
+    --moo-scroll-fade-b: var(--moo-scroll-fade-b-size);
+  }
+
+  .scroll-fade-x {
+    --moo-scroll-fade-s: var(--moo-scroll-fade-s-size);
+    --moo-scroll-fade-e: var(--moo-scroll-fade-e-size);
+  }
+
+  .scroll-fade-t { --moo-scroll-fade-t: var(--moo-scroll-fade-t-size); }
+  .scroll-fade-b { --moo-scroll-fade-b: var(--moo-scroll-fade-b-size); }
+  .scroll-fade-l,
+  .scroll-fade-s { --moo-scroll-fade-s: var(--moo-scroll-fade-s-size); }
+  .scroll-fade-r,
+  .scroll-fade-e { --moo-scroll-fade-e: var(--moo-scroll-fade-e-size); }
+}

package/scss/utilities/_scroll_fade_primitives.scss

@@ -0,0 +1,43 @@
+@property --moo-scroll-fade-t {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --moo-scroll-fade-b {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --moo-scroll-fade-s {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --moo-scroll-fade-e {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@keyframes moo-scroll-fade-reveal-t {
+  from { --moo-scroll-fade-t: 0; }
+  to { --moo-scroll-fade-t: var(--moo-scroll-fade-t-size); }
+}
+
+@keyframes moo-scroll-fade-reveal-b {
+  from { --moo-scroll-fade-b: var(--moo-scroll-fade-b-size); }
+  to { --moo-scroll-fade-b: 0; }
+}
+
+@keyframes moo-scroll-fade-reveal-s {
+  from { --moo-scroll-fade-s: 0; }
+  to { --moo-scroll-fade-s: var(--moo-scroll-fade-s-size); }
+}
+
+@keyframes moo-scroll-fade-reveal-e {
+  from { --moo-scroll-fade-e: var(--moo-scroll-fade-e-size); }
+  to { --moo-scroll-fade-e: 0; }
+}

package/scss/_facade-settings.scss

@@ -1,51 +0,0 @@
-// Moo UI — Public Sass Facade: Settings
-//
-// This is the consumer-facing subset of Moo UI's Sass variables.
-// Import this file BEFORE Bootstrap's _variables.scss so your overrides
-// take precedence over Bootstrap's own !default values.
-//
-// Usage (relative-path, Bootstrap Option B pattern):
-//   @import "../node_modules/bootstrap/scss/functions";
-//   @import "../node_modules/@wpmoo/ui/scss/facade-settings";
-//   $primary: #your-brand-color;
-//   @import "../node_modules/bootstrap/scss/variables";
-//   ...
-//
-// Usage (include_paths-based, bundler-configured):
-//   @import "bootstrap/scss/functions";
-//   @import "@wpmoo/ui/scss/facade-settings";
-//   $primary: #your-brand-color;
-//   @import "bootstrap/scss/variables";
-//   ...
-//
-// Public variable allow-list (0.9.0):
-//
-//   Brand colors — any valid Sass color value:
-//     $primary        Default: #171717
-//     $secondary      Default: #f4f4f5
-//     $success        Default: #16803c
-//     $info           Default: #0f6e8c
-//     $warning        Default: #a15c00
-//     $danger         Default: #dc2626
-//     $light          Default: #fafafa
-//     $dark           Default: #18181b
-//
-//   Body — any valid Sass color value:
-//     $body-color     Default: #18181b
-//     $body-bg        Default: #fff
-//
-//   Borders — any valid Sass color (border-color) or CSS <length> (radius):
-//     $border-color   Default: #e4e4e7
-//     $border-radius  Default: 0.5rem
-//     $border-radius-sm  Default: 0.375rem
-//     $border-radius-lg  Default: 0.625rem
-//
-//   Typography — rem/em/unitless ratio (same constraint as Bootstrap's
-//   $font-size-base; see vendor/bootstrap/scss/_variables.scss):
-//     $font-size-base Default: 0.875rem
-//
-// Derived tokens ($moo-*) are computed from the above and are not part of
-// the public facade. Component-level knobs ($moo-*-dark, $moo-sidebar,
-// etc.) are internal and may change without notice.
-
-@import "settings/facade_public";

package/scss/settings/_facade_public.scss

@@ -1,23 +0,0 @@
-// Public Sass facade allow-list — the only variables a facade consumer can
-// override. This file is the source of truth for the public Sass surface.
-// _palette.scss imports this first, then declares its own internal additions.
-// Do NOT add variables here without updating the freeze document
-// (src/certification/api-freeze-0.9.0.json) and getting explicit approval.
-
-$primary: #171717 !default;
-$secondary: #f4f4f5 !default;
-$success: #16803c !default;
-$info: #0f6e8c !default;
-$warning: #a15c00 !default;
-$danger: #dc2626 !default;
-$light: #fafafa !default;
-$dark: #18181b !default;
-
-$body-color: #18181b !default;
-$body-bg: #fff !default;
-$font-size-base: 0.875rem !default;
-
-$border-color: #e4e4e7 !default;
-$border-radius: 0.5rem !default;
-$border-radius-sm: 0.375rem !default;
-$border-radius-lg: 0.625rem !default;