@dynamic-framework/ui-react 1.16.2 → 1.17.0

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

@@ -3,56 +3,32 @@
 // Dropdown menu container and contents.
 
 // scss-docs-start dropdown-variables
-$dropdown-min-width: 10rem !default;
-$dropdown-padding-x: .5rem !default;
-$dropdown-padding-y: .5rem !default;
-$dropdown-spacer: .125rem !default;
-$dropdown-font-size: $font-size-base !default;
-$dropdown-color: var(--#{$prefix}body-color) !default;
+$dropdown-padding-x: var(--#{$prefix}--#{$prefix}ref-spacer-2) !default;
 $dropdown-bg: var(--#{$prefix}white) !default;
-$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
 $dropdown-border-radius: var(--#{$prefix}border-radius-sm) !default;
 $dropdown-border-width: 0 !default;
 
-$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
-$dropdown-divider-bg: $dropdown-border-color !default;
 $dropdown-divider-margin-y: var(--#{$prefix}ref-spacer-2) !default;
 $dropdown-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
 
 $dropdown-link-color: rgb(var(--#{$prefix}gray-500-rgb)) !default;
 $dropdown-link-hover-bg: rgb(var(--#{$prefix}gray-100-rgb)) !default;
-$dropdown-link-hover-color: $dropdown-link-color !default;
-
-$dropdown-link-active-color: $component-active-color !default;
-$dropdown-link-active-bg: $component-active-bg !default;
-
-$dropdown-link-disabled-color: var(--#{$prefix}tertiary-color) !default;
 
 $dropdown-item-padding-y: var(--#{$prefix}ref-spacer-2) !default;
-$dropdown-item-padding-x: var(--#{$prefix}ref-spacer-3) !default;
+$dropdown-item-padding-x: var(--#{$prefix}ref-spacer-4) !default;
+
 // custom
 $dropdown-item-border-radius: var(--#{$prefix}border-radius-sm) !default;
 // end custom
 
 $dropdown-header-color: var(--#{$prefix}gray-600) !default;
-$dropdown-header-padding-x: $dropdown-item-padding-x !default;
-$dropdown-header-padding-y: $dropdown-padding-y !default;
-// fusv-disable
-$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
-// fusv-enable
 // scss-docs-end dropdown-variables
 
 // scss-docs-start dropdown-dark-variables
 $dropdown-dark-color: var(--#{$prefix}gray-300) !default;
 $dropdown-dark-bg: var(--#{$prefix}gray-800) !default;
-$dropdown-dark-border-color: $dropdown-border-color !default;
-$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
-$dropdown-dark-box-shadow: null !default;
-$dropdown-dark-link-color: $dropdown-dark-color !default;
 $dropdown-dark-link-hover-color: var(--#{$prefix}white) !default;
 $dropdown-dark-link-hover-bg: rgba(var(--#{$prefix}white-rgb), .15) !default;
-$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
-$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
 $dropdown-dark-link-disabled-color: var(--#{$prefix}gray-500) !default;
 $dropdown-dark-header-color: var(--#{$prefix}gray-500) !default;
 // scss-docs-end dropdown-dark-variables

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

@@ -1,95 +1,46 @@
 // scss-docs-start form-text-variables
-$form-text-margin-top: .5rem !default;
-$form-text-font-size: $small-font-size !default;
-$form-text-font-style: null !default;
-$form-text-font-weight: null !default;
+$form-text-margin-top: $spacer-2 !default;
 $form-text-color: $text-muted !default;
 // scss-docs-end form-text-variables
 
 // scss-docs-start form-label-variables
 $form-label-margin-bottom: 0 !default;
 $form-label-font-size: var(--#{$prefix}ref-fs-small) !default;
-$form-label-font-style: null !default;
 $form-label-font-weight: var(--#{$prefix}ref-fw-bold) !default;
 $form-label-color: var(--#{$prefix}gray) !default;
 // scss-docs-end form-label-variables
 
-// custom
-$form-label-has-value-color: var(--#{$prefix}dark) !default;
-$form-label-padding-y: 0 !default;
-$form-label-padding-x: var(--#{$prefix}ref-spacer-2) !default;
-$form-label-gap: var(--#{$prefix}ref-spacer-1) !default;
-// end custom
-
 // scss-docs-start form-input-variables
-$input-padding-y: .75rem !default;
-$input-padding-x: $spacer-3 !default;
-
-$input-font-family: $input-btn-font-family !default;
-$input-font-size: $input-btn-font-size !default;
-$input-font-weight: $font-weight-base !default;
-$input-line-height: 1.375 !default;
+$input-padding-y: $spacer-3 !default;
+$input-padding-x: $spacer-4 !default;
 
-$input-padding-x-sm: .5rem !default;
-$input-padding-y-sm: .25rem !default;
-$input-font-size-sm: .875rem !default;
+$input-padding-x-sm: $spacer-2 !default;
+$input-padding-y-sm: $spacer-1 !default;
+$input-font-size-sm: $font-size-sm !default;
 
-$input-padding-x-lg: 1rem !default;
-$input-padding-y-lg: 1rem !default;
-$input-font-size-lg: 1.25rem !default;
+$input-padding-x-lg: $spacer-4 !default;
+$input-padding-y-lg: $spacer-4 !default;
+$input-font-size-lg: var(--#{$prefix}ref-spacer-5) !default;
 
 $input-bg: var(--#{$prefix}white) !default;
-$input-disabled-color: var(--#{$prefix}gray) !default;
+$input-disabled-color: var(--#{$prefix}gray-300) !default;
 $input-disabled-bg: var(--#{$prefix}gray-100) !default;
 $input-disabled-border-color: var(--#{$prefix}gray-300) !default;
 
 $input-color: var(--#{$prefix}gray) !default;
-$input-border-color: var(--#{$prefix}gray-300) !default;      // unused
-$input-border-width: $input-btn-border-width !default;          // unused
-$input-box-shadow: none !default;
+$input-box-shadow: 0 0 0 transparent !default; // to avoid the none in the bootstrap box-shadow calculation
 
 $input-border-radius: var(--#{$prefix}border-radius-sm) !default;
 $input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
 $input-border-radius-lg: var(--#{$prefix}border-radius-sm) !default;
 
-// custom
-$input-hover-border-color: var(--#{$prefix}gray) !default;
-// end custom
-
-$input-focus-bg: $input-bg !default;
 $input-focus-border-color: var(--#{$prefix}focus-ring-color) !default; // unused
-$input-focus-color: $input-color !default;                      // unused
 $input-focus-width: 1px !default;
 $input-focus-box-shadow: 0 0 0 1px rgba(var(--#{$prefix}secondary-rgb)) !default;
 
-// custom
-$input-group-disabled-color: var(--#{$prefix}secondary-100) !default;
-$input-group-border-color: var(--#{$prefix}gray-300) !default;
-$input-group-border-width: 1px !default;
-$input-group-border-radius: $input-border-radius !default;
-
-$input-group-hover-border-color: var(--#{$prefix}gray) !default;
-
-$input-group-focus-border-color: var(--#{$prefix}secondary) !default;
-$input-group-focus-box-shadow: 0 0 0 1px rgba(var(--#{$prefix}secondary-rgb)) !default;
-// end custom
+$input-placeholder-color: var(--#{$prefix}gray-300) !default;
 
-$input-placeholder-color: var(--#{$prefix}gray-500) !default;
 $input-plaintext-color: var(--#{$prefix}body-color) !default;
-
-$input-height-border: $input-border-width * 2 !default;
-
-$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
-$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
-$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
-
-$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
-$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
-$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
-
-$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-
-$form-color-width: 3rem !default;
 // scss-docs-end form-input-variables
 
 // scss-docs-start form-check-variables
@@ -100,21 +51,11 @@ $form-check-input-width: 1em * $form-check-size-multiplier !default;
 $form-check-min-height: $font-size-base * $line-height-base * $form-check-size-multiplier !default;
 $form-check-padding-start: $form-check-input-width - .5em * $form-check-size-multiplier !default;
 $form-check-margin-bottom: .125rem * $form-check-size-multiplier !default;
-$form-check-label-color: null !default;
-$form-check-label-cursor: null !default;
-$form-check-transition: null !default;
-
-$form-check-input-active-filter: brightness(90%) !default;
 
 // custom
-$form-check-input-border-color: var(--#{$prefix}gray-300) !default;
+$form-check-input-border-color: var(--#{$prefix}gray-400) !default;
 // end custom
 
-$form-check-input-bg: $input-bg !default;
-$form-check-input-border: var(--#{$prefix}border-width) solid $form-check-input-border-color !default;
-$form-check-input-border-radius: .25em !default;
-$form-check-radio-border-radius: 50% !default;
-$form-check-input-focus-border: $input-focus-border-color !default;
 $form-check-input-focus-box-shadow: none !default;
 
 // custom
@@ -125,160 +66,79 @@ $form-check-input-focus-outline-offset: 2px !default;
 $form-check-input-hover-border-color: var(--#{$prefix}focus-ring-color) !default;
 // end custom
 
-$form-check-input-checked-color: $component-active-color !default;
-$form-check-input-checked-bg-color: $component-active-bg !default;
-$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
 $form-check-input-checked-bg-image: url("data:image/svg+xml, <svg viewBox='-4 -6 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M14.294 0.594229C14.3863 0.498719 14.4966 0.422536 14.6186 0.370127C14.7406 0.317718 14.8719 0.290132 15.0046 0.288978C15.1374 0.287824 15.2691 0.313126 15.392 0.363407C15.5149 0.413688 15.6265 0.487941 15.7204 0.581833C15.8143 0.675726 15.8886 0.787378 15.9389 0.910275C15.9891 1.03317 16.0144 1.16485 16.0133 1.29763C16.0121 1.43041 15.9846 1.56163 15.9321 1.68363C15.8797 1.80564 15.8036 1.91598 15.708 2.00823L6.70804 11.0082C6.52051 11.1957 6.26621 11.301 6.00104 11.301C5.73588 11.301 5.48157 11.1957 5.29404 11.0082L0.293041 6.00723C0.110883 5.81863 0.0100885 5.56602 0.0123669 5.30383C0.0146453 5.04163 0.119815 4.79082 0.305223 4.60541C0.490631 4.42 0.741443 4.31483 1.00364 4.31255C1.26584 4.31028 1.51844 4.41107 1.70704 4.59323L6.00104 8.88723L14.294 0.594229V0.594229Z' fill='#{$white}'/></svg>") !default;
 $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$white}'/></svg>") !default;
 
-$form-check-input-indeterminate-color: $component-active-color !default;
-$form-check-input-indeterminate-bg-color: $component-active-bg !default;
-$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
 $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$secondary}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
 
 $form-check-input-disabled-opacity: 1 !default;
-$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
-$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
 
 // custom
 $form-check-input-disabled-border-color: var(--#{$prefix}gray-300) !default;
 $form-check-input-disabled-bg: var(--#{$prefix}gray-100) !default;
 // end custom
 
-$form-check-inline-margin-end: 1rem !default;
 // scss-docs-end form-check-variables
 
 // scss-docs-start form-switch-variables
 $form-switch-color: var(--#{$prefix}white) !default;
 $form-switch-width: 3em !default;
-$form-switch-padding-start: $form-switch-width + .5em !default;
 $form-switch-bg-image: url("data:image/svg+xml,<svg viewBox='-4 -4 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0.5' y='0.5' width='15' height='15' rx='7.5' fill='#{$white}' stroke='#{$gray-500}'/></svg>") !default;
-$form-switch-border-radius: $form-switch-width !default;
-$form-switch-transition: background-position .15s ease-in-out !default;
-
 $form-switch-focus-color: var(--#{$prefix}tertiary) !default;
 $form-switch-focus-bg-image: url("data:image/svg+xml,<svg viewBox='-4 -4 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0.5' y='0.5' width='15' height='15' rx='7.5' fill='#{$white}' stroke='#{$gray-500}'/></svg>") !default;
 
 $form-switch-checked-color: var(--#{$prefix}white) !default;
 $form-switch-checked-bg-image: url("data:image/svg+xml,<svg viewBox='-4 -4 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0.5' y='0.5' width='15' height='15' rx='7.5' fill='#{$white}' stroke='#{$gray-500}'/></svg>") !default;
-$form-switch-checked-bg-position: right center !default;
+
 // custom
 $form-switch-disabled-bg-image: url("data:image/svg+xml,<svg viewBox='-4 -4 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0.5' y='0.5' width='15' height='15' rx='7.5' fill='#{$white}' stroke='#{$gray-300}'/></svg>") !default;
 $form-switch-label-color: var(--#{$prefix}gray) !default;
 $form-switch-active-label-color: var(--#{$prefix}gray-700) !default;
 // end custom
+
 // scss-docs-end form-switch-variables
 
 // scss-docs-start input-group-variables
-$input-group-addon-padding-y: $input-padding-y !default;
-$input-group-addon-padding-x: $input-padding-x !default;
-$input-group-addon-font-weight: $input-font-weight !default;
-$input-group-addon-color: $input-color !default;
 $input-group-addon-bg: var(--#{$prefix}white) !default;
 $input-group-addon-border-color: transparent !default;
-$input-group-outline-padding: 3px !default;
-$input-group-outline-border-width-width: 3px !default;
 // scss-docs-end input-group-variables
 
 // custom
-$form-control-padding-y: 0 !default;
-$form-control-padding-x: $spacer-2 !default;
-$form-control-gap: .5rem !default;
-$form-control-color: var(--#{$prefix}gray) !default;
-
-$form-control-icon-size: .75rem !default;
+$form-text-padding-y: 0 !default;
+$form-text-padding-x: $spacer-2 !default;
+$form-text-color: var(--#{$prefix}gray) !default;
 // end custom
 
 // scss-docs-start form-select-variables
-$form-select-padding-y: $input-padding-y !default;
-$form-select-padding-x: $input-padding-x !default;
-$form-select-font-family: $input-font-family !default;
-$form-select-font-size: $input-font-size !default;
-$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
-$form-select-font-weight: $input-font-weight !default;
-$form-select-line-height: $input-line-height !default;
-$form-select-color: $input-color !default;
-$form-select-bg: $input-bg !default;
-$form-select-disabled-color: null !default;
-$form-select-disabled-bg: $input-disabled-bg !default;
-$form-select-disabled-border-color: $input-disabled-border-color !default;
-$form-select-bg-position: right $form-select-padding-x center !default;
+$form-select-disabled-color: $input-disabled-color !default;
 $form-select-bg-size: 24px !default; // In pixels because image dimensions
 $form-select-bg-opacity: 0 !default;
 $form-select-indicator-color: var(--#{$prefix}gray-500) !default;
 $form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$gray-500}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m2 5 6 6 6-6'/></svg>") !default;
 
-$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
-$form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
-$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
-
-$form-select-border-width: $input-border-width !default;
-$form-select-border-color: $input-border-color !default;
-$form-select-border-radius: $input-border-radius !default;
 $form-select-box-shadow: none !default;
-
-$form-select-focus-border-color: $input-focus-border-color !default;
-$form-select-focus-width: $input-focus-width !default;
-$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
-
-$form-select-padding-y-sm: $input-padding-y-sm !default;
-$form-select-padding-x-sm: $input-padding-x-sm !default;
-$form-select-font-size-sm: $input-font-size-sm !default;
-$form-select-border-radius-sm: $input-border-radius-sm !default;
-
-$form-select-padding-y-lg: $input-padding-y-lg !default;
-$form-select-padding-x-lg: $input-padding-x-lg !default;
-$form-select-font-size-lg: $input-font-size-lg !default;
-$form-select-border-radius-lg: $input-border-radius-lg !default;
-
-$form-select-transition: $input-transition !default;
 // scss-docs-end form-select-variables
 
 // scss-docs-start form-range-variables
-$form-range-track-width: 100% !default;
-$form-range-track-height: .5rem !default;
-$form-range-track-cursor: pointer !default;
 $form-range-track-bg: var(--#{$prefix}gray-300) !default;
-$form-range-track-border-radius: 1rem !default;
-$form-range-track-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
-
-$form-range-thumb-width: 1rem !default;
-$form-range-thumb-height: $form-range-thumb-width !default;
-$form-range-thumb-bg: $component-active-bg !default;
-$form-range-thumb-border: 0 !default;
-$form-range-thumb-border-radius: 1rem !default;
+
 $form-range-thumb-box-shadow: 0 .1rem .25rem rgba(var(--#{$prefix}black-rgb), .1) !default;
 $form-range-thumb-focus-box-shadow: 0 0 0 1px var(--#{$prefix}body-bg), $input-focus-box-shadow !default;
-$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
 $form-range-thumb-active-bg: $component-active-bg !default;
 $form-range-thumb-disabled-bg: var(--#{$prefix}gray-500) !default;
-$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 // scss-docs-end form-range-variables
 
 // scss-docs-start form-file-variables
-$form-file-button-color: $input-color !default;
 $form-file-button-bg: $input-group-addon-bg !default;
 $form-file-button-hover-bg: unquote("color-mix(in srgb, #{$form-file-button-bg}, var(--#{$prefix}black) 5%)") !default;
 // scss-docs-end form-file-variables
 
 // scss-docs-start form-floating-variables
-$form-floating-height: add(3.5rem, $input-height-border) !default;
 $form-floating-line-height: 1.25 !default;
-$form-floating-padding-x: $input-padding-x !default;
-$form-floating-padding-y: 1rem !default;
-$form-floating-input-padding-t: 1.625rem !default;
-$form-floating-input-padding-b: .625rem !default;
-$form-floating-label-height: 1.5em !default;
-$form-floating-label-opacity: .65 !default;
-$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
 $form-floating-label-disabled-color: var(--#{$prefix}gray-600) !default;
-$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
 // scss-docs-end form-floating-variables
 
 // scss-docs-start form-feedback-variables
-$form-feedback-margin-top: $form-text-margin-top !default;
-$form-feedback-font-size: $form-text-font-size !default;
-$form-feedback-font-style: $form-text-font-style !default;
 $form-feedback-valid-color: var(--#{$prefix}success) !default;
 $form-feedback-invalid-color: var(--#{$prefix}danger) !default;
 

package/src/style/abstracts/variables/_list-group.scss

@@ -4,11 +4,10 @@
 $list-group-color: var(--#{$prefix}dark) !default;
 $list-group-bg: transparent !default;
 $list-group-border-color: var(--#{$prefix}gray-300) !default;
-$list-group-border-width: 1px !default;
 $list-group-border-radius: var(--#{$prefix}border-radius-sm) !default;
 
-$list-group-item-padding-y: .75rem !default;
-$list-group-item-padding-x: 1rem !default;
+$list-group-item-padding-y: var(--#{$prefix}ref-spacer-3) !default;
+$list-group-item-padding-x: var(--#{$prefix}ref-spacer-4) !default;
 
 // fusv-disable
 $list-group-item-bg-scale: 0% !default;
@@ -16,28 +15,23 @@ $list-group-item-color-scale: 40% !default;
 // fusv-enable
 
 $list-group-hover-bg: var(--#{$prefix}gray-100) !default;
-$list-group-active-color: $component-active-color !default;
-$list-group-active-bg: $component-active-bg !default;
-$list-group-active-border-color: $list-group-active-bg !default;
 
 $list-group-disabled-color: var(--#{$prefix}gray-600) !default;
-$list-group-disabled-bg: $list-group-bg !default;
 
 $list-group-action-color: var(--#{$prefix}gray-700) !default;
 $list-group-action-hover-color: $list-group-action-color !default;
 
-$list-group-action-active-color: var(--#{$prefix}body-color) !default;
 $list-group-action-active-bg: var(--#{$prefix}gray-200) !default;
 
 // custom
 $list-group-item-border-radius: 0 !default;
 
 $list-group-item-bg-light: var(--#{$prefix}light) !default;
-$list-group-item-picture-width: 2.25rem !default;
-$list-group-item-picture-height: 2.25rem !default;
+$list-group-item-picture-width: var(--#{$prefix}ref-spacer-9) !default;
+$list-group-item-picture-height: var(--#{$prefix}ref-spacer-9) !default;
 $list-group-item-picture-border-radius: $border-radius-sm !default;
 
-$list-group-item-content-padding-y: var(--#{$prefix}ref-spacer-3) !default;
-$list-group-item-content-padding-x: var(--#{$prefix}ref-spacer-3) !default;
+$list-group-item-content-padding-y: var(--#{$prefix}ref-spacer-4) !default;
+$list-group-item-content-padding-x: var(--#{$prefix}ref-spacer-4) !default;
 // end custom
 // scss-docs-end list-group-variables

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

@@ -1,57 +1,37 @@
 // Modals
 
 // scss-docs-start modal-variables
-$modal-inner-padding: $spacer-4 !default;
+$modal-inner-padding: var(--#{$prefix}ref-spacer-6) !default;
 
 // custom
-$modal-header-gap: $spacer-4 !default;
+$modal-header-gap: var(--#{$prefix}ref-spacer-6) !default;
 // end custom
 
-$modal-footer-margin-between: $spacer-3 !default;
+$modal-footer-margin-between: var(--#{$prefix}ref-spacer-4) !default;
 
-$modal-dialog-margin: .5rem !default;
-$modal-dialog-margin-y-sm-up: 1.75rem !default;
-
-$modal-title-line-height: $line-height-base !default;
-
-$modal-content-color: null !default;
 $modal-content-bg: var(--#{$prefix}white) !default;
 $modal-content-border-color: transparent !default;
-$modal-content-border-width: $border-width !default;
-$modal-content-border-radius: $border-radius !default;
-$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
-$modal-content-box-shadow-xs: $box-shadow-sm !default;
-$modal-content-box-shadow-sm-up: $box-shadow-sm !default;
+$modal-content-border-radius: var(--#{$prefix}border-radius) !default;
+$modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default;
+$modal-content-box-shadow-sm-up: var(--#{$prefix}box-shadow-sm) !default;
 
 $modal-backdrop-bg: var(--#{$prefix}black) !default;
 $modal-backdrop-opacity: .3 !default;
 
 $modal-header-border-color: transparent !default;
-$modal-header-border-width: $modal-content-border-width !default;
-$modal-header-padding-y: $spacer-3 !default;
-$modal-header-padding-x: $spacer-4 !default;
-$modal-header-padding: $spacer-5 $spacer-4 $spacer-3 !default; // Keep this for backwards compatibility
+$modal-header-padding-y: var(--#{$prefix}ref-spacer-4) !default;
+$modal-header-padding-x: var(--#{$prefix}ref-spacer-6) !default;
+$modal-header-padding: var(--#{$prefix}ref-spacer-8) var(--#{$prefix}ref-spacer-6) var(--#{$prefix}ref-spacer-4) !default; // Keep this for backwards compatibility
 
-$modal-footer-bg: null !default;
 $modal-footer-border-color: transparent !default;
-$modal-footer-border-width: $modal-header-border-width !default;
 
 // custom
 $modal-separator-bg: var(--#{$prefix}gray-200) !default;
 $modal-separator-height: 1px !default;
-$modal-separator-margin-x: $spacer-4 !default;
+$modal-separator-margin-x: var(--#{$prefix}ref-spacer-6) !default;
 // end custom
 
 // custom
-$modal-footer-padding: $spacer-4 !default;
+$modal-footer-padding: var(--#{$prefix}ref-spacer-6) !default;
 // end custom
-
-$modal-sm: 300px !default;
-$modal-md: 500px !default;
-$modal-lg: 800px !default;
-$modal-xl: 1140px !default;
-
-$modal-show-transform: none !default;
-$modal-transition: transform .5s ease-out !default;
-$modal-scale-transform: scale(1.02) !default;
 // scss-docs-end modal-variables

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

@@ -1,34 +1,8 @@
 // Navbar
 
 // scss-docs-start navbar-variables
-$navbar-padding-y: $spacer * .5 !default;
-$navbar-padding-x: null !default;
-
-$navbar-nav-link-padding-x: .5rem !default;
-
-$navbar-brand-font-size: $font-size-lg !default;
-// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
-$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
-$navbar-brand-margin-end: 1rem !default;
-
-$navbar-toggler-padding-y: .25rem !default;
-$navbar-toggler-padding-x: .75rem !default;
-$navbar-toggler-font-size: $font-size-lg !default;
-$navbar-toggler-border-radius: $btn-border-radius !default;
-$navbar-toggler-focus-width: $btn-focus-width !default;
-$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
-
-$navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
-$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
-$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
-$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
 $navbar-light-icon-color: rgba(var(--#{$prefix}body-color-rgb), .75) !default;
 $navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
-$navbar-light-brand-color: $navbar-light-active-color !default;
-$navbar-light-brand-hover-color: $navbar-light-active-color !default;
 // scss-docs-end navbar-variables
 
 // scss-docs-start navbar-dark-variables
@@ -38,6 +12,4 @@ $navbar-dark-active-color: var(--#{$prefix}white-rgb) !default;
 $navbar-dark-disabled-color: rgba(var(--#{$prefix}white-rgb), .25) !default;
 $navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
 $navbar-dark-toggler-border-color: rgba(var(--#{$prefix}white-rgb), .1) !default;
-$navbar-dark-brand-color: $navbar-dark-active-color !default;
-$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
 // scss-docs-end navbar-dark-variables

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

@@ -1,44 +1,35 @@
 // Navs
 
 // scss-docs-start nav-variables
-$nav-link-padding-y: .5rem !default;
-$nav-link-padding-x: 1rem !default;
 $nav-link-font-size: var(--#{$prefix}body-font-size) !default;
 $nav-link-font-weight: var(--#{$prefix}ref-fw-normal) !default;
 $nav-link-color: var(--#{$prefix}gray-500) !default;
 $nav-link-hover-color: var(--#{$prefix}secondary-600) !default;
-$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
 $nav-link-disabled-color: var(--#{$prefix}gray-200) !default;
-$nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
+
 // custom
 $nav-link-border-height: 2px !default;
-$nav-link-line-height: $spacer-4 !default;
+$nav-link-line-height: var(--#{$prefix}ref-spacer-6) !default;
 $nav-link-border-border-radius: $border-radius-pill !default;
 $nav-link-border-active-color: var(--#{$prefix}secondary) !default;
 $nav-link-border-active-font-weight: var(--#{$prefix}ref-fw-bold) !default;
 $nav-link-border-active-bg: var(--#{$prefix}secondary) !default;
 // end custom
 
-
-$nav-tabs-border-color: transparent !default;
-$nav-tabs-border-width: 0 !default;
-$nav-tabs-border-radius: $border-radius !default;
-$nav-tabs-link-hover-border-color: $nav-link-hover-color !default;
+$nav-tabs-border-radius: var(--#{$prefix}border-radius-sm) !default;
 $nav-tabs-link-active-color: var(--#{$prefix}secondary) !default;
-$nav-tabs-link-active-bg: transparent !default;
-$nav-tabs-link-active-border-color: transparent !default;
+$nav-tabs-link-active-bg: var(--#{$prefix}secondary-100) !default;
+$nav-tabs-link-active-border-color: var(--#{$prefix}secondary) !default;
+
 // custom
-$nav-nav-padding-x: $spacer-4 !default;
-$nav-nav-padding-y: $spacer-3 !default;
-$nav-nav-gap: $spacer-4 !default;
+$nav-nav-padding-x: var(--#{$prefix}ref-spacer-6) !default;
+$nav-nav-padding-y: var(--#{$prefix}ref-spacer-4) !default;
+$nav-nav-gap: var(--#{$prefix}ref-spacer-6) !default;
 // end custom
 
 $nav-pills-border-radius: 100px !default;
 $nav-pills-link-active-color: var(--#{$prefix}white) !default;
 $nav-pills-link-active-bg: var(--#{$prefix}secondary) !default;
-
-
-$nav-underline-gap: 1rem !default;
-$nav-underline-border-width: .125rem !default;
-$nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default;
 // scss-docs-end nav-variables
+
+$nav-underline-link-active-color: var(--#{$prefix}secondary) !default;

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

@@ -1,20 +1,13 @@
 // Offcanvas
 
 // scss-docs-start offcanvas-variables
-$offcanvas-padding-y: $spacer-4 !default;
+$offcanvas-padding-y: var(--#{$prefix}ref-spacer-6) !default;
+$offcanvas-padding-x: var(--#{$prefix}ref-spacer-6) !default;
+
 // custom
-$offcanvas-header-gap: $spacer-4 !default;
-$offcanvas-footer-gap: $spacer-4 !default;
+$offcanvas-header-gap: var(--#{$prefix}ref-spacer-6) !default;
+$offcanvas-footer-gap: var(--#{$prefix}ref-spacer-6) !default;
 // end custom
-$offcanvas-padding-x: $spacer-4 !default;
-$offcanvas-horizontal-width: 400px !default;
-$offcanvas-vertical-height: 30vh !default;
-$offcanvas-transition-duration: .3s !default;
-$offcanvas-border-color: $modal-content-border-color !default;
-$offcanvas-border-width: $modal-content-border-width !default;
-$offcanvas-title-line-height: $modal-title-line-height !default;
+
 $offcanvas-bg-color: var(--#{$prefix}white) !default;
-$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
-$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
-$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
 // scss-docs-end offcanvas-variables