@dynamic-framework/ui-react 1.5.0 → 1.7.0

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

@@ -0,0 +1,32 @@
+$cursors: auto,
+  default,
+  none,
+  context-menu,
+  help,
+  pointer,
+  progress,
+  wait,
+  cell,
+  crosshair,
+  text,
+  vertical-text,
+  alias,
+  copy,
+  move,
+  no-drop,
+  not-allowed,
+  all-scroll,
+  col-resize,
+  row-resize,
+  n-resize,
+  e-resize,
+  s-resize,
+  w-resize,
+  ns-resize,
+  ew-resize,
+  ne-resize,
+  nw-resize,
+  se-resize,
+  sw-resize,
+  nesw-resize,
+  nwse-resize !default;

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

@@ -0,0 +1,54 @@
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+// scss-docs-start dropdown-variables
+$dropdown-min-width: 10rem !default;
+$dropdown-padding-x: 0 !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-bg: var(--#{$prefix}body-bg) !default;
+$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
+$dropdown-border-radius: 0 !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: 0 !default;
+
+$dropdown-link-color: var(--#{$prefix}body-color) !default;
+$dropdown-link-hover-color: $dropdown-link-color !default;
+$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !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-1) !default;
+$dropdown-item-padding-x: var(--#{$prefix}ref-spacer-3) !default;
+
+$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/_figures.scss

@@ -0,0 +1,6 @@
+// Figures
+
+// scss-docs-start figure-variables
+$figure-caption-font-size: $small-font-size !default;
+$figure-caption-color: var(--#{$prefix}secondary-color) !default;
+// scss-docs-end figure-variables

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

@@ -0,0 +1,313 @@
+// scss-docs-start form-text-variables
+$form-text-margin-top: 0 !default;
+$form-text-font-size: $small-font-size !default;
+$form-text-font-style: null !default;
+$form-text-font-weight: null !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: $small-font-size !default;
+$form-label-font-style: null !default;
+$form-label-font-weight: $font-weight-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: $spacer-2 !default;
+$form-label-gap: $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-sm: $input-padding-y !default;
+$input-padding-x-sm: $input-padding-x !default;
+$input-font-size-sm: $input-font-size !default;
+
+$input-padding-y-lg: $input-padding-y !default;
+$input-padding-x-lg: $input-padding-x !default;
+$input-font-size-lg: $input-font-size !default;
+
+$input-bg: var(--#{$prefix}white) !default;
+$input-disabled-color: var(--#{$prefix}gray) !default;
+$input-disabled-bg: var(--#{$prefix}gray-100) !default;
+$input-disabled-border-color: var(--#{$prefix}gray-200) !default;
+
+$input-color: var(--#{$prefix}gray) !default;
+$input-border-color: var(--#{$prefix}gray-200) !default;      // unused
+$input-border-width: $input-btn-border-width !default;          // unused
+$input-box-shadow: $box-shadow-inset !default;                  // unused
+
+$input-border-radius: $border-radius-sm !default;
+$input-border-radius-sm: $border-radius-sm !default;            // unused
+$input-border-radius-lg: $border-radius-lg !default;            // unused
+
+// 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: $input-btn-focus-width !default;            // unused
+$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+
+// custom
+$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-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
+$form-check-input-width: 1.5em !default;
+$form-check-min-height: $font-size-base * $line-height-base !default;
+$form-check-padding-start: $form-check-input-width + .5em !default;
+$form-check-margin-bottom: .125rem !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;
+// 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
+$form-check-input-focus-border-color: $form-check-input-border-color !default;
+$form-check-input-focus-outline-color: var(--#{$prefix}focus-ring-color) !default;
+$form-check-input-focus-outline: 2px solid $form-check-input-focus-outline-color !default;
+$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;
+// 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-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: null !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: $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;
+
+$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
+$form-feedback-icon-valid: null !default;
+$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
+$form-feedback-icon-invalid: null !default;
+// scss-docs-end form-feedback-variables
+
+// scss-docs-start form-validation-colors
+$form-valid-color: $form-label-color !default;
+$form-valid-border-color: $input-group-hover-border-color !default;
+$form-invalid-color: $form-feedback-invalid-color !default;
+$form-invalid-border-color: $form-feedback-invalid-color !default;
+// scss-docs-end form-validation-colors
+
+// scss-docs-start form-validation-states
+$form-validation-states: (
+  "valid": (
+    "color": var(--#{$prefix}form-valid-color),
+    "icon": $form-feedback-icon-valid,
+    "tooltip-color": var(--#{$prefix}white),
+    "tooltip-bg-color": var(--#{$prefix}success),
+    "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
+    "border-color": var(--#{$prefix}form-valid-border-color),
+  ),
+  "invalid": (
+    "color": var(--#{$prefix}form-invalid-color),
+    "icon": $form-feedback-icon-invalid,
+    "tooltip-color": var(--#{$prefix}white),
+    "tooltip-bg-color": var(--#{$prefix}danger),
+    "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
+    "border-color": var(--#{$prefix}form-invalid-border-color),
+  )
+) !default;
+// scss-docs-end form-validation-states
+

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

@@ -0,0 +1,41 @@
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+// scss-docs-start grid-breakpoints
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+) !default;
+// scss-docs-end grid-breakpoints
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+// scss-docs-start container-max-widths
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px
+) !default;
+// scss-docs-end container-max-widths
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 1.5rem !default;
+$grid-row-columns: 6 !default;
+
+// Container padding
+
+$container-padding-x: $grid-gutter-width !default;

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

@@ -0,0 +1,43 @@
+// List group
+
+// scss-docs-start list-group-variables
+$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: var(--#{$prefix}ref-spacer-1) !default;
+$list-group-item-padding-x: var(--#{$prefix}ref-spacer-1) !default;
+
+// fusv-disable
+$list-group-item-bg-scale: 0% !default;
+$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-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;
+// end custom
+// scss-docs-end list-group-variables

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

@@ -0,0 +1,58 @@
+// Modals
+
+// scss-docs-start modal-variables
+$modal-inner-padding: 0 !default;
+
+$modal-footer-margin-between: $spacer-3 !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;
+
+// custom
+$modal-body-padding: 0 !default;
+// end custom
+
+$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-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;
+// end custom
+
+// custom
+$modal-footer-padding: $spacer-4 !default;
+// end custom
+
+$modal-sm: 300px !default;
+$modal-md: 500px !default;
+$modal-lg: 800px !default;
+$modal-xl: 1140px !default;
+
+$modal-fade-transform: var(--#{$prefix}modal-fade-transform, translate(0, 100vh)) !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

@@ -0,0 +1,43 @@
+// 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
+$navbar-dark-color: rgba(var(--#{$prefix}white-rgb), .55) !default;
+$navbar-dark-hover-color: rgba(var(--#{$prefix}white-rgb), .75) !default;
+$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

@@ -0,0 +1,44 @@
+// Navs
+
+// scss-docs-start nav-variables
+$nav-link-padding-y: 0 !default;
+$nav-link-padding-x: $spacer-1 !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}gray-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-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-link-active-color: var(--#{$prefix}secondary) !default;
+$nav-tabs-link-active-bg: transparent !default;
+$nav-tabs-link-active-border-color: transparent !default;
+// custom
+$nav-nav-padding-x: $spacer-4 !default;
+$nav-nav-padding-y: $spacer-3 !default;
+$nav-nav-gap: $spacer-4 !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

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

@@ -0,0 +1,20 @@
+// Offcanvas
+
+// scss-docs-start offcanvas-variables
+$offcanvas-padding-y: $spacer-4 !default;
+// custom
+$offcanvas-footer-gap: $spacer-4 !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}body-bg) !default;
+$offcanvas-color: var(--#{$prefix}body-color) !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