@dynamic-framework/ui-react 1.5.0 → 1.7.0

package/src/style/abstracts/_+import.scss

@@ -1,3 +1,15 @@
-@import "@dynamic-framework/ui/src/style/abstracts/+import";
+@import "funcions";
+@import "bootstrap/scss/functions";
 
-@import "variables/+import";
+@import "variables/+import"; // Include any default variable overrides here
+@import "bootstrap/scss/variables";
+// @import "bootstrap/scss/variables-dark"; re-enable with dark implementation
+
+@import "maps"; // Include any default map overrides here
+@import "bootstrap/scss/maps";
+
+@import "mixins";
+@import "bootstrap/scss/mixins";
+
+@import "bootstrap/scss/utilities";
+@import "utilities"; // Extend utilities here

package/src/style/abstracts/_funcions.scss

@@ -0,0 +1,55 @@
+// Theme functions
+@use "sass:math";
+
+@function strip-unit($number) {
+  @if type-of($number) == "number" and not unitless($number) {
+    @return math.div($number, $number * 0 + 1);
+  }
+  @return $number;
+}
+
+@function to-rem($value-in-px, $base-in-px: $font-size-root) {
+  $value: strip-unit($value-in-px);
+  $base: strip-unit($base-in-px);
+  $result: math.div($value, $base) * 1rem;
+  @return $result;
+}
+
+@function map-prev-key($map, $text) {
+  $new-map: ();
+
+  @each $key, $value in $map {
+    $new-key: "#{$text}-#{$key}";
+    $new-map: map-merge($new-map, ($new-key: $value));
+  }
+
+  @return $new-map;
+}
+
+@function map-get-key($map, $value) {
+  @each $key, $val in $map {
+    @if $val == $value {
+      @return $key;
+    }
+  }
+  @return null;
+}
+
+@function color-contrast-var($color) {
+  $value: color-contrast($color);
+  $key: map-get-key($grays, $value);
+
+  @if $value == $white {
+    @return var(--#{$prefix}white);
+  }
+
+  @if $value == $black {
+    @return var(--#{$prefix}black);
+  }
+
+  @if $key != null {
+    @return var(--#{$prefix}gray-#{$key});
+  }
+
+  @return null;
+}

package/src/style/abstracts/_maps.scss

@@ -0,0 +1 @@
+// Theme maps

package/src/style/abstracts/_mixins.scss

@@ -0,0 +1,133 @@
+// scss-docs-start df-btn-variant-mixin
+@mixin df-button-variant(
+  $color-name,
+  $default-color: var(--#{$prefix}#{$color-name}-500),
+  $hover-color: var(--#{$prefix}#{$color-name}-700),
+  $active-color: var(--#{$prefix}#{$color-name}-600),
+  $disabled-color: var(--#{$prefix}#{$color-name}-100),
+  $text-color-100: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-100)),
+  $text-color-500: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-500)),
+  $text-color-700: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-600)),
+  $text-color-900: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-700)),
+) {
+  --#{$prefix}btn-color: #{$text-color-500};
+  --#{$prefix}btn-bg: #{$default-color};
+  --#{$prefix}btn-border-color: #{$default-color};
+
+  --#{$prefix}btn-hover-color: #{$text-color-900};
+  --#{$prefix}btn-hover-bg: #{$hover-color};
+  --#{$prefix}btn-hover-border-color: #{$hover-color};
+
+  --#{$prefix}btn-active-color: #{$text-color-700};
+  --#{$prefix}btn-active-bg: #{$active-color};
+  --#{$prefix}btn-active-border-color: #{$active-color};
+
+  --#{$prefix}btn-disabled-color: #{$text-color-100};
+  --#{$prefix}btn-disabled-bg: #{$disabled-color};
+  --#{$prefix}btn-disabled-border-color: #{$disabled-color};
+
+  &.loading {
+    --#{$prefix}btn-disabled-opacity: 1;
+    --#{$prefix}btn-disabled-bg: #{$active-color};
+    --#{$prefix}btn-disabled-border-color: #{$active-color};
+    --#{$prefix}btn-disabled-color: #{$text-color-700};
+  }
+}
+// scss-docs-end df-btn-variant-mixin
+
+
+// scss-docs-start df-btn-outline-variant-mixin
+@mixin df-button-outline-variant($color-name) {
+  --#{$prefix}btn-bg: transparent;
+  --#{$prefix}btn-border-color: var(--#{$prefix}#{$color-name}-500);
+  --#{$prefix}btn-color: var(--#{$prefix}#{$color-name}-500);
+
+  --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color-name}-100);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}#{$color-name}-600);
+  --#{$prefix}btn-hover-color: var(--#{$prefix}#{$color-name}-600);
+
+  --#{$prefix}btn-focus-bg: var(--#{$prefix}#{$color-name}-100);
+  --#{$prefix}btn-focus-border-color: var(--#{$prefix}#{$color-name});
+  --#{$prefix}btn-focus-color: var(--#{$prefix}#{$color-name});
+
+  --#{$prefix}btn-active-bg: var(--#{$prefix}#{$color-name}-300);
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}#{$color-name}-600);
+  --#{$prefix}btn-active-color: var(--#{$prefix}#{$color-name}-600);
+
+  --#{$prefix}btn-disabled-bg: transparent;
+  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color-name}-100);
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color-name}-100);
+
+  --#{$prefix}gradient: none;
+
+  &.loading {
+    --#{$prefix}btn-disabled-opacity: 1;
+    --#{$prefix}btn-disabled-bg: transparent;
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color-name}-600);
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color-name}-600);
+  }
+}
+// scss-docs-end df-btn-outline-variant-mixin
+
+// scss-docs-start df-btn-link-variant-mixin
+@mixin df-button-link-variant(
+  $color-name,
+  $text-color-100: var(--#{$prefix}#{$color-name}-100),
+  $text-color-500: var(--#{$prefix}#{$color-name}-500),
+  $text-color-700: var(--#{$prefix}#{$color-name}-600),
+  $text-color-900: var(--#{$prefix}#{$color-name}-700),
+) {
+  --#{$prefix}btn-padding-x: var(--#{$prefix}btn-link-padding-x);
+  --#{$prefix}btn-padding-y: var(--#{$prefix}btn-link-padding-y);
+
+  --#{$prefix}btn-bg: transparent;
+  --#{$prefix}btn-border-color: transparent;
+  --#{$prefix}btn-color: #{$text-color-500};
+
+  --#{$prefix}btn-hover-bg: transparent;
+  --#{$prefix}btn-hover-border-color: transparent;
+  --#{$prefix}btn-hover-color: #{$text-color-900};
+
+  --#{$prefix}btn-focus-bg: transparent;
+  --#{$prefix}btn-focus-border-color: transparent;
+  --#{$prefix}btn-focus-color: #{$text-color-500};
+
+  --#{$prefix}btn-active-bg: transparent;
+  --#{$prefix}btn-active-border-color: transparent;
+  --#{$prefix}btn-active-color: #{$text-color-700};
+
+  --#{$prefix}btn-disabled-bg: transparent;
+  --#{$prefix}btn-disabled-border-color: transparent;
+  --#{$prefix}btn-disabled-color: #{$text-color-100};
+
+  --#{$prefix}btn-focus-outline-offset: 0;
+
+  &.loading {
+    --#{$prefix}btn-disabled-opacity: 1;
+    --#{$prefix}btn-disabled-bg: transparent;
+    --#{$prefix}btn-disabled-border-color: transparent;
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color-name}-600);
+  }
+}
+// scss-docs-end df-btn-link-variant-mixin
+
+// scss-docs-start df-table-variant
+@mixin df-table-variant($state, $background) {
+  .table-#{$state} {
+    $color: color-contrast-var(map-get($all-colors, $background));
+
+    --#{$prefix}table-color: #{$color};
+    --#{$prefix}table-bg: #{unquote("color-mix(in srgb, var(--#{$prefix}#{$background}), var(--#{$prefix}white) #{100% - $table-bg-scale * -1})")};
+    --#{$prefix}table-border-color: #{unquote("color-mix(in srgb, var(--#{$prefix}#{$background}), var(--#{$prefix}white) #{(100% - $table-bg-scale) * $table-border-factor})")};
+    --#{$prefix}table-striped-bg: #{unquote("color-mix(in srgb, var(--#{$prefix}#{$background}), var(--#{$prefix}white) #{(100% - $table-bg-scale) * $table-striped-bg-factor})")};
+    --#{$prefix}table-striped-color: #{$color};
+    --#{$prefix}table-active-bg: #{unquote("color-mix(in srgb, var(--#{$prefix}#{$background}), var(--#{$prefix}white) #{(100% - $table-bg-scale) * $table-active-bg-factor})")};
+    --#{$prefix}table-active-color: #{$color};
+    --#{$prefix}table-hover-bg: #{unquote("color-mix(in srgb, var(--#{$prefix}#{$background}), var(--#{$prefix}white) #{(100% - $table-bg-scale) * $table-hover-bg-factor})")};
+    --#{$prefix}table-hover-color: #{$color};
+
+    color: var(--#{$prefix}table-color);
+    border-color: var(--#{$prefix}table-border-color);
+  }
+}
+// scss-docs-end df-table-variant

package/src/style/abstracts/_utilities.scss

@@ -0,0 +1,78 @@
+/* stylelint-disable scss/dollar-variable-default */
+// Theme utilities
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "opacity": map-merge(
+      map-get($utilities, "opacity"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "opacity"), "values"),
+          (
+            40: .4,
+          )
+        )
+      )
+    ),
+    "color": map-merge(
+      map-get($utilities, "color"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "color"), "values"),
+          // TODO: try to move the map-loop to $utilities-text map libraries/dynamic-ui/node_modules/bootstrap/scss/_maps.scss
+          map-loop($palette-grays, rgba-css-var, "$key", "text"),
+        )
+      )
+    ),
+    "background-color": map-merge(
+      map-get($utilities, "background-color"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "background-color"), "values"),
+          // TODO: try to move the map-loop to $utilities-bg map libraries/dynamic-ui/node_modules/bootstrap/scss/_maps.scss
+          map-merge(
+            map-loop($palette-grays, rgba-css-var, "$key", "bg"),
+            map-loop($bg-soft-colors, rgba-css-var, "$key", "bg")
+          )
+        )
+      )
+    ),
+    "shadow": map-merge(
+      map-get($utilities, "shadow"),
+      (
+        values: (
+          null: var(--#{$prefix}box-shadow),
+          sm: var(--#{$prefix}box-shadow-sm),
+          lg: var(--#{$prefix}box-shadow-lg),
+          none: none,
+        )
+      )
+    ),
+    "text-opacity": map-merge(
+      map-get($utilities, "text-opacity"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "text-opacity"), "values"),
+          (
+            40: .4,
+          )
+        )
+      )
+    ),
+    "border-color": map-merge(
+      map-get($utilities, "border-color"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "border-color"), "values"),
+          // TODO: try to move the map-loop to $utilities-border map libraries/dynamic-ui/node_modules/bootstrap/scss/_maps.scss
+          map-loop($palette-grays, rgba-css-var, "$key", "border"),
+        )
+      )
+    ),
+    "cursor": (
+      property: cursor,
+      values: $cursors,
+    ),
+  )
+);

package/src/style/abstracts/variables/_+import.scss

@@ -1,2 +1,161 @@
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+// Prefix for :root CSS variables
+
+$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
+$prefix: $variable-prefix !default;
+
+@import "colors";
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+  ("<", "%3c"),
+  (">", "%3e"),
+  ("#", "%23"),
+  ("(", "%28"),
+  (")", "%29"),
+) !default;
+
+@import "options";
+
+// Gradient
+//
+// The gradient which is added to components if `$enable-gradients` is `true`
+// This gradient is also added to elements with `.bg-gradient`
+// scss-docs-start variable-gradient
+$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
+// scss-docs-end variable-gradient
+
+@import "spacers";
+
+// Position
+//
+// Define the edge positioning anchors of the position utilities.
+
+// scss-docs-start position-map
+$position-values: (
+  0: 0,
+  50: 50%,
+  100: 100%
+) !default;
+// scss-docs-end position-map
+
+@import "body";
+@import "grid";
+@import "border";
+@import "box-shadow";
+
+// scss-docs-start focus-ring-variables
+$focus-ring-width: .25rem !default;
+$focus-ring-opacity: 1 !default;
+// custom
+$focus-ring-color-mapping: "secondary-rgb" !default;
+$focus-ring-color: var(--#{$prefix}focus-ring-color) !default;
+// end custom
+$focus-ring-blur: 0 !default;
+$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
+// scss-docs-end focus-ring-variables
+
+$component-active-color: var(--#{$prefix}white) !default;
+$component-active-bg: $focus-ring-color !default;
+
+// scss-docs-start caret-variables
+$caret-width: .3em !default;
+$caret-vertical-align: $caret-width * .85 !default;
+$caret-spacing: $caret-width * .85 !default;
+// scss-docs-end caret-variables
+
+$transition-base: all .2s ease-in-out !default;
+$transition-fade: opacity .3s linear !default;
+// scss-docs-start collapse-transition
+$transition-collapse: height .35s ease !default;
+$transition-collapse-width: width .35s ease !default;
+// scss-docs-end collapse-transition
+
+// scss-docs-start aspect-ratios
+$aspect-ratios: (
+  "1x1": 100%,
+  "4x3": calc(3 / 4 * 100%),
+  "16x9": calc(9 / 16 * 100%),
+  "21x9": calc(9 / 21 * 100%)
+) !default;
+// scss-docs-end aspect-ratios
+
+@import "typography";
+@import "tables";
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+// scss-docs-start input-btn-variables
+$input-btn-padding-y: .625rem !default;
+$input-btn-padding-x: $spacer-4 !default;
+$input-btn-font-family: null !default;
+$input-btn-font-size: $font-size-base !default;
+$input-btn-line-height: $line-height-base !default;
+
+$input-btn-focus-width: 0 !default;
+$input-btn-focus-color-opacity: 0 !default;
+$input-btn-focus-color: rgba(var(--#{$prefix}secondary-rgb), $input-btn-focus-color-opacity) !default;
+$input-btn-focus-blur: 0 !default;
+$input-btn-focus-box-shadow: none !default;
+
+$input-btn-padding-y-sm: $spacer-2 !default;
+$input-btn-padding-x-sm: $spacer-3 !default;
+$input-btn-font-size-sm: $small-font-size !default;
+
+$input-btn-padding-y-lg: 1.125rem !default;
+$input-btn-padding-x-lg: $spacer-4 !default;
+$input-btn-font-size-lg: 1rem !default;
+
+$input-btn-border-width: $border-width !default;
+// scss-docs-end input-btn-variables
+
+@import "buttons";
+@import "forms";
+@import "z-index";
+@import "navs";
+@import "navbar";
+@import "dropdowns";
+@import "pagination";
+
+// Placeholders
+
+// scss-docs-start placeholders
+$placeholder-opacity-max: .5 !default;
+$placeholder-opacity-min: .2 !default;
+// scss-docs-end placeholders
+
+@import "cards";
+@import "accordion";
+@import "tooltips";
+@import "popovers";
+@import "toasts";
+@import "badges";
+@import "modals";
+@import "alerts";
+@import "progress";
+@import "list-group";
+@import "thumbnails";
+@import "figures";
+@import "breadcrumb";
+@import "carousel";
+@import "spinners";
+@import "close";
+@import "offcanvas";
+@import "code";
+
+// custom
+@import "quick-action-button";
+@import "quick-action-select";
+@import "quick-action-check";
+@import "quick-action-switch";
+@import "cursors";
+@import "chips";
 @import "collapse-icon-text";
 @import "box-file";
+// end custom

package/src/style/abstracts/variables/_accordion.scss

@@ -0,0 +1,35 @@
+// Accordion
+
+// scss-docs-start accordion-variables
+$accordion-padding-y: 1rem !default;
+$accordion-padding-x: 1.25rem !default;
+$accordion-color: var(--#{$prefix}body-color) !default;
+$accordion-bg: var(--#{$prefix}body-bg) !default;
+$accordion-border-width: var(--#{$prefix}border-width) !default;
+$accordion-border-color: var(--#{$prefix}border-color) !default;
+$accordion-border-radius: var(--#{$prefix}border-radius) !default;
+$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
+
+$accordion-body-padding-y: $accordion-padding-y !default;
+$accordion-body-padding-x: $accordion-padding-x !default;
+
+$accordion-button-padding-y: $accordion-padding-y !default;
+$accordion-button-padding-x: $accordion-padding-x !default;
+$accordion-button-color: var(--#{$prefix}body-color) !default;
+$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
+$accordion-transition: $btn-transition, border-radius .15s ease !default;
+$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
+$accordion-button-active-color: var(--#{$prefix}primary-text-emphasis) !default;
+
+$accordion-button-focus-border-color: $input-focus-border-color !default;
+$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
+
+$accordion-icon-width: 1.25rem !default;
+$accordion-icon-color: $body-color !default;
+$accordion-icon-active-color: $primary-text-emphasis !default;
+$accordion-icon-transition: transform .2s ease-in-out !default;
+$accordion-icon-transform: rotate(-180deg) !default;
+
+$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+// scss-docs-end accordion-variables

package/src/style/abstracts/variables/_alerts.scss

@@ -0,0 +1,27 @@
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+// scss-docs-start alert-variables
+$alert-padding-y: $spacer-3 !default;
+$alert-padding-x: $spacer-4 !default;
+$alert-margin-bottom: $spacer-3 !default;
+$alert-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$alert-link-font-weight: var(--#{$prefix}ref-fw-bold) !default;
+$alert-border-width: var(--#{$prefix}border-width) !default;
+$alert-bg-scale: 100% !default;
+$alert-border-scale: 100% !default;
+$alert-color-scale: 100% !default;
+$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+
+// custom
+$alert-gap: $spacer-3 !default;
+$alert-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
+// end custom
+// scss-docs-end alert-variables
+
+// fusv-disable
+$alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
+// fusv-enable

package/src/style/abstracts/variables/_badges.scss

@@ -0,0 +1,15 @@
+// Badges
+
+// scss-docs-start badge-variables
+$badge-font-size: $small-font-size !default;
+$badge-font-weight: $font-weight-normal !default;
+$badge-color: var(--#{$prefix}gray-900) !default;
+$badge-padding-y: var(--#{$prefix}ref-spacer-1) !default;
+$badge-padding-x: var(--#{$prefix}ref-spacer-2) !default;
+$badge-border-radius: $border-radius-sm !default;
+
+// custom
+$badge-bg: var(--#{$prefix}white) !default;
+$badge-dot-height: var(--#{$prefix}ref-spacer-3) !default;
+// end custom
+// scss-docs-end badge-variables

package/src/style/abstracts/variables/_body.scss

@@ -0,0 +1,52 @@
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-text-align: null !default;
+
+// custom
+$body-color-mapping: "gray-900" !default;
+$body-color: map-get($all-colors, $body-color-mapping) !default;
+$body-bg-mapping: "white" !default;
+$body-bg: map-get($all-colors, $body-bg-mapping) !default;
+
+$body-secondary-color: var(--#{$prefix}body-color-rgb) !default;
+$body-secondary-bg: var(--#{$prefix}gray-200) !default;
+
+$body-tertiary-color: var(--#{$prefix}body-color-rgb) !default;
+$body-tertiary-bg: var(--#{$prefix}gray-100) !default;
+
+$body-emphasis-color: var(--#{$prefix}black) !default;
+// end custom
+
+// Links
+//
+// Style anchor elements.
+
+// custom
+$link-color-mapping: "primary" !default;
+$link-hover-color-mapping: "primary-700" !default;
+$link-color: map-get($all-colors, $link-color-mapping) !default;
+$link-hover-color: map-get($all-colors, $link-hover-color-mapping) !default;
+// end custom
+$link-decoration: underline !default;
+$link-shade-percentage: 20% !default; // unused
+$link-hover-decoration: underline !default;
+
+$stretched-link-pseudo-element: after !default;
+$stretched-link-z-index: 1 !default;
+
+// Icon links
+// scss-docs-start icon-link-variables
+$icon-link-gap: .375rem !default;
+$icon-link-underline-offset: .25em !default;
+$icon-link-icon-size: 1em !default;
+$icon-link-icon-transition: .2s ease-in-out transform !default;
+$icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
+// scss-docs-end icon-link-variables
+
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom: 0 !default;

package/src/style/abstracts/variables/_border.scss

@@ -0,0 +1,29 @@
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+// scss-docs-start border-variables
+$border-width: 1px !default;
+$border-widths: (
+  1: 1px,
+  2: 2px,
+  3: 3px,
+  4: 4px,
+  5: 5px
+) !default;
+$border-style: solid !default;
+$border-color: var(--#{$prefix}gray-200) !default;
+$border-color-translucent: rgba(var(--#{$prefix}black-rgb), .175) !default;
+// scss-docs-end border-variables
+
+// scss-docs-start border-radius-variables
+$border-radius: 1rem !default;
+$border-radius-sm: .5rem !default;
+$border-radius-lg: 1.5rem !default;
+$border-radius-xl: 2rem !default;
+$border-radius-xxl: 2.5rem !default;
+$border-radius-pill: 50rem !default;
+// scss-docs-end border-radius-variables
+// fusv-disable
+$border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.3.0
+// fusv-enable

package/src/style/abstracts/variables/_box-file.scss

@@ -1,9 +1,9 @@
-$box-file-gap: $spacer-3 !default;
+$box-file-gap: var(--#{$prefix}ref-spacer-3) !default;
 $box-file-border: 1px dashed var(--#{$prefix}gray-700) !default;
-$box-file-border-radius: $border-radius !default;
-$box-file-padding: $spacer-5 !default;
+$box-file-border-radius: var(--#{$prefix}border-radius) !default;
+$box-file-padding: var(--#{$prefix}ref-spacer-5) !default;
 $box-file-content-max-width: 220px !default;
-$box-file-icon-size: $spacer-8 !default;
+$box-file-icon-size: var(--#{$prefix}ref-spacer-8) !default;
 $box-file-icon-color: var(--#{$prefix}secondary-300) !default;
 
 $box-file-hover-border: 1px dashed var(--#{$prefix}secondary-700) !default;

package/src/style/abstracts/variables/_box-shadow.scss

@@ -0,0 +1,6 @@
+// scss-docs-start box-shadow-variables
+$box-shadow: 0 12px 14px 0 rgba($dark, .2) !default;
+$box-shadow-sm: 0 8px 12px 0 rgba($dark, .05) !default;
+$box-shadow-lg: 0 20px 22px 0 rgba($dark, .25) !default;
+$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
+// scss-docs-end box-shadow-variables

package/src/style/abstracts/variables/_breadcrumb.scss

@@ -0,0 +1,15 @@
+// Breadcrumbs
+
+// scss-docs-start breadcrumb-variables
+$breadcrumb-font-size: null !default;
+$breadcrumb-padding-y: 0 !default;
+$breadcrumb-padding-x: 0 !default;
+$breadcrumb-item-padding-x: .5rem !default;
+$breadcrumb-margin-bottom: 1rem !default;
+$breadcrumb-bg: null !default;
+$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
+$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
+$breadcrumb-divider: quote("/") !default;
+$breadcrumb-divider-flipped: $breadcrumb-divider !default;
+$breadcrumb-border-radius: null !default;
+// scss-docs-end breadcrumb-variables