@design-factory/styles 21.0.0-next.0 → 21.0.0

package/scss/components/popover/_popover_container.scss

@@ -1,214 +0,0 @@
-@import 'popover.mixin';
-
-// TODO update this file with the new file from bootstrap
-// Ref file is popover.scss in BS folder.
-// Attention I backport the fix from the override in popover.scss in this file too
-#{$df-css-namespace-selector} {
-  &.popover {
-    @extend .popover;
-
-    // scss-docs-start popover-css-vars
-    --#{$prefix}popover-zindex: #{$zindex-popover};
-    --#{$prefix}popover-max-width: #{$popover-max-width};
-    @include rfs($popover-font-size, --#{$prefix}popover-font-size);
-    --#{$prefix}popover-bg: #{$popover-bg};
-    --#{$prefix}popover-border-width: #{$popover-border-width};
-    --#{$prefix}popover-border-color: #{$popover-border-color};
-    --#{$prefix}popover-border-radius: #{$popover-border-radius};
-    --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
-    --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
-    --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
-    --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
-    @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
-    --#{$prefix}popover-header-color: #{$popover-header-color};
-    --#{$prefix}popover-header-bg: #{$popover-header-bg};
-    --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
-    --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
-    --#{$prefix}popover-body-color: #{$popover-body-color};
-    --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
-    --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
-    --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
-
-    --#{$prefix}popover-padding: #{$df-popover-padding};
-    --#{$prefix}popover-header-line-height: #{$df-popover-header-line-height};
-    --#{$prefix}popover-header-margin: #{$df-popover-header-default-margin};
-    --#{$prefix}popover-body-margin: #{$df-popover-body-default-margin};
-    --#{$prefix}popover-header-font-size: #{$h3-font-size};
-    --#{$prefix}popover-body-font-size: #{$font-size-base};
-    // scss-docs-end popover-css-vars
-
-    z-index: var(--#{$prefix}popover-zindex);
-    display: block;
-    max-width: var(--#{$prefix}popover-max-width);
-    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
-    // So reset our font and text properties to avoid inheriting weird values.
-    @include reset-text();
-    @include font-size(var(--#{$prefix}popover-font-size));
-    // Allow breaking very long words so they don't overflow the popover's bounds
-    word-wrap: break-word;
-    background-color: var(--#{$prefix}popover-bg);
-    background-clip: padding-box;
-    border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
-    @include border-radius(var(--#{$prefix}popover-border-radius));
-    @include box-shadow(var(--#{$prefix}popover-box-shadow));
-
-    &.popover-arrow {
-      display: block;
-      width: var(--#{$prefix}popover-arrow-width);
-      height: var(--#{$prefix}popover-arrow-height);
-
-      &::before,
-      &::after {
-        position: absolute;
-        display: block;
-        content: '';
-        border-color: transparent;
-        border-style: solid;
-        border-width: 0;
-      }
-    }
-  }
-
-  &.bs-popover-top {
-    > .popover-arrow {
-      bottom: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
-
-      &::before,
-      &::after {
-        border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
-      }
-
-      &::before {
-        bottom: 0;
-        border-top-color: var(--#{$prefix}popover-arrow-border);
-      }
-
-      &::after {
-        bottom: var(--#{$prefix}popover-border-width);
-        border-top-color: var(--#{$prefix}popover-bg);
-      }
-    }
-  }
-
-  /* rtl:begin:ignore */
-  &.bs-popover-end {
-    > .popover-arrow {
-      left: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
-      width: var(--#{$prefix}popover-arrow-height);
-      height: var(--#{$prefix}popover-arrow-width);
-
-      &::before,
-      &::after {
-        border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height)
-          calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
-      }
-
-      &::before {
-        left: 0;
-        border-right-color: var(--#{$prefix}popover-arrow-border);
-      }
-
-      &::after {
-        left: var(--#{$prefix}popover-border-width);
-        border-right-color: var(--#{$prefix}popover-bg);
-      }
-    }
-  }
-
-  /* rtl:end:ignore */
-
-  &.bs-popover-bottom {
-    > .popover-arrow {
-      top: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
-
-      &::before,
-      &::after {
-        border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
-      }
-
-      &::before {
-        top: 0;
-        border-bottom-color: var(--#{$prefix}popover-arrow-border);
-      }
-
-      &::after {
-        top: var(--#{$prefix}popover-border-width);
-        border-bottom-color: var(--#{$prefix}popover-bg);
-      }
-    }
-
-    // This will remove the popover-header's border just below the arrow
-    .popover-header::before {
-      position: absolute;
-      top: 0;
-      left: 50%;
-      display: block;
-      width: var(--#{$prefix}popover-arrow-width);
-      margin-left: calc(var(--#{$prefix}popover-arrow-width) * -0.5); // stylelint-disable-line function-disallowed-list
-      content: '';
-      border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
-    }
-  }
-
-  /* rtl:begin:ignore */
-  &.bs-popover-start {
-    > .popover-arrow {
-      right: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
-      width: var(--#{$prefix}popover-arrow-height);
-      height: var(--#{$prefix}popover-arrow-width);
-
-      &::before,
-      &::after {
-        border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0
-          calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
-      }
-
-      &::before {
-        right: 0;
-        border-left-color: var(--#{$prefix}popover-arrow-border);
-      }
-
-      &::after {
-        right: var(--#{$prefix}popover-border-width);
-        border-left-color: var(--#{$prefix}popover-bg);
-      }
-    }
-  }
-
-  /* rtl:end:ignore */
-
-  &.bs-popover-auto {
-    &[data-popper-placement^='top'] {
-      @extend .bs-popover-top;
-    }
-    &[data-popper-placement^='right'] {
-      @extend .bs-popover-end;
-    }
-    &[data-popper-placement^='bottom'] {
-      @extend .bs-popover-bottom;
-    }
-    &[data-popper-placement^='left'] {
-      @extend .bs-popover-start;
-    }
-  }
-
-  // Offset the popover to account for the popover arrow
-  &.popover-header {
-    padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
-    margin-bottom: 0; // Reset the default from Reboot
-    @include font-size(var(--#{$prefix}popover-header-font-size));
-    color: var(--#{$prefix}popover-header-color);
-    background-color: var(--#{$prefix}popover-header-bg);
-    border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
-    @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
-
-    &:empty {
-      display: none;
-    }
-  }
-
-  &.popover-body {
-    padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
-    color: var(--#{$prefix}popover-body-color);
-  }
-}

package/scss/components/spinner/_spinner_container.scss

@@ -1,43 +0,0 @@
-body.df-progressindicator-open {
-  overflow: hidden;
-}
-
-#{$df-css-namespace-selector} {
-  &.df-progressindicator-backdrop,
-  &.df-progressindicator-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: $df-progressindicator-container-zindex;
-  }
-
-  &.df-progressindicator-backdrop {
-    &.df-progressindicator-backdrop-global {
-      background-color: $df-progressindicator-backdrop-global-bg-color;
-      opacity: $df-progressindicator-backdrop-global-opacity;
-    }
-    &.df-progressindicator-backdrop-contextual {
-      background-color: $df-progressindicator-backdrop-contextual-bg-color;
-      opacity: $df-progressindicator-backdrop-contextual-opacity;
-    }
-  }
-
-  &.df-progressindicator-container {
-    display: flex;
-    background-color: transparent;
-    &.df-progressindicator-centered {
-      align-items: center;
-      justify-content: center;
-    }
-    &.df-progressindicator-top {
-      align-items: flex-start;
-      justify-content: center;
-    }
-    &.df-progressindicator-bottom {
-      align-items: flex-end;
-      justify-content: center;
-    }
-  }
-}

package/scss/components/tooltip/_tooltip_container.scss

@@ -1,116 +0,0 @@
-// This style is needed when using DF through a CSS namespace
-#{$df-css-namespace-selector}.tooltip {
-  // scss-docs-start tooltip-css-vars
-  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
-  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
-  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
-  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
-  --#{$prefix}tooltip-margin: #{$tooltip-margin};
-  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
-  --#{$prefix}tooltip-color: #{$tooltip-color};
-  --#{$prefix}tooltip-bg: #{$tooltip-bg};
-  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
-  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
-  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
-  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
-  // scss-docs-end tooltip-css-vars
-
-  z-index: var(--#{$prefix}tooltip-zindex);
-  display: block;
-  padding: var(--#{$prefix}tooltip-arrow-height);
-  margin: var(--#{$prefix}tooltip-margin);
-  @include deprecate('`$tooltip-margin`', 'v5', 'v5.x', true);
-  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
-  // So reset our font and text properties to avoid inheriting weird values.
-  @include reset-text();
-  @include font-size(var(--#{$prefix}tooltip-font-size));
-  // Allow breaking very long words so they don't overflow the tooltip's bounds
-  word-wrap: break-word;
-  opacity: 0;
-
-  &.show {
-    opacity: var(--#{$prefix}tooltip-opacity);
-  }
-
-  .tooltip-arrow {
-    display: block;
-    width: var(--#{$prefix}tooltip-arrow-width);
-    height: var(--#{$prefix}tooltip-arrow-height);
-
-    &::before {
-      position: absolute;
-      content: '';
-      border-color: transparent;
-      border-style: solid;
-    }
-  }
-
-  &.bs-tooltip-top {
-    .tooltip-arrow {
-      bottom: 0;
-
-      &::before {
-        top: -1px;
-        border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
-        border-top-color: var(--#{$prefix}tooltip-bg);
-      }
-    }
-  }
-
-  &.bs-tooltip-end {
-    .tooltip-arrow {
-      left: 0;
-      width: var(--#{$prefix}tooltip-arrow-height);
-      height: var(--#{$prefix}tooltip-arrow-width);
-
-      &::before {
-        right: -1px;
-        border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height)
-          calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
-        border-right-color: var(--#{$prefix}tooltip-bg);
-      }
-    }
-  }
-
-  &.bs-tooltip-bottom {
-    .tooltip-arrow {
-      top: 0;
-
-      &::before {
-        bottom: -1px;
-        border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
-        border-bottom-color: var(--#{$prefix}tooltip-bg);
-      }
-    }
-  }
-
-  &.bs-tooltip-start {
-    .tooltip-arrow {
-      right: 0;
-      width: var(--#{$prefix}tooltip-arrow-height);
-      height: var(--#{$prefix}tooltip-arrow-width);
-
-      &::before {
-        left: -1px;
-        border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0
-          calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
-        border-left-color: var(--#{$prefix}tooltip-bg);
-      }
-    }
-  }
-
-  &.bs-tooltip-auto {
-    &[data-popper-placement^='top'] {
-      @extend .bs-tooltip-top;
-    }
-    &[data-popper-placement^='right'] {
-      @extend .bs-tooltip-end;
-    }
-    &[data-popper-placement^='bottom'] {
-      @extend .bs-tooltip-bottom;
-    }
-    &[data-popper-placement^='left'] {
-      @extend .bs-tooltip-start;
-    }
-  }
-}

package/scss/themes/brand2023/_variables.scss

@@ -1,315 +0,0 @@
-@use 'sass:map';
-@use 'sass:color';
-@import '../../utilities/rgb';
-@import '@design-factory/tokens/scss/vars-light';
-@import '@design-factory/tokens/scss/root';
-
-// stylelint-disable scss/dollar-variable-pattern
-// Variables
-//
-// Variables should follow the `$component-state-property-size` formula for
-// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
-
-// Color system
-// stylelint-disable-next-line scss/dollar-variable-default
-$prefix: df-;
-
-// scss-docs-start gray-color-variables
-$white: #fff !default;
-$black: #000 !default; // changed
-
-// DF specific colors
-// Grey colors
-$gray-1000: $df-theme-neutral-110 !default;
-$gray-900: $df-theme-neutral-100 !default; // cloud-100
-$gray-800: $df-theme-neutral-90 !default;
-$gray-700: $df-theme-neutral-80 !default;
-$gray-600: $df-theme-neutral-70 !default;
-$gray-500: $df-theme-neutral-60 !default;
-$gray-400: $df-theme-neutral-50 !default;
-$gray-300: $df-theme-neutral-40 !default;
-$gray-200: $df-theme-neutral-30 !default;
-$gray-100: $df-theme-neutral-20 !default;
-$gray-50: $df-theme-neutral-10 !default;
-$gray-0: $df-theme-neutral-0 !default;
-// scss-docs-end gray-color-variables
-
-// scss-docs-start color-variables
-// TODO attention maybe init this from the shades
-$blue: $df-colorPalette-sky-60 !default;
-$indigo: #6610f2 !default; // not changed
-$purple: $df-colorPalette-violet-60 !default;
-$pink: $df-colorPalette-fuchsia-60 !default; // fuchsia
-$red: $df-colorPalette-crimson-60 !default;
-$orange: $df-colorPalette-pumpkin-40 !default; // orange 400
-$yellow: $df-colorPalette-canary-60 !default;
-$green: $df-colorPalette-forest-60 !default;
-$teal: $df-colorPalette-sky-60 !default; // put to blue, temporary ?
-$cyan: #009dd1 !default; // not changed
-
-// DF specific colors
-$dark-orange: $df-colorPalette-pumpkin-70 !default; // TODO verify usaged not changed
-$light-blue: #9bcaeb !default; // TODO verify this one
-$brown: #9e6900 !default; // not changed
-// scss-docs-end color-variables
-
-// scss-docs-start theme-color-variables
-$primary: $blue !default;
-$secondary: $gray-700 !default; // not changed
-$success: $df-theme-success-60 !default;
-$info: $blue !default; // Sky 60
-$warning: $df-theme-warning-40 !default; // Orange 400
-$danger: $df-theme-danger-60 !default; // Crimson 500
-$light: $gray-50 !default; // changed
-$dark: $gray-700 !default; // changed
-$dark-sky: $df-theme-primary-90 !default; // added
-$light-primary: $df-theme-primary-20 !default; // create
-$tip: $purple !default;
-$chromatic1: $yellow !default;
-$chromatic2: $pink !default;
-$pacific: $light-blue !default; // to removed ? where used ?
-// scss-docs-end theme-color-variables
-
-// scss-docs-start theme-colors-map
-$theme-colors: (
-  'primary': $primary,
-  'success': $success,
-  'info': $info,
-  'warning': $warning,
-  'danger': $danger,
-  'neutral': $dark,
-  'tip': $tip,
-  'chromatic1': $chromatic1,
-  'chromatic2': $chromatic2
-) !default;
-// scss-docs-end theme-colors-map
-
-// fusv-disable
-$blue-50: $df-colorPalette-sky-10 !default;
-$blue-100: $df-colorPalette-sky-20 !default;
-$blue-200: $df-colorPalette-sky-30 !default;
-$blue-300: $df-colorPalette-sky-40 !default;
-$blue-400: $df-colorPalette-sky-50 !default;
-$blue-500: $df-colorPalette-sky-60 !default;
-$blue-600: $df-colorPalette-sky-70 !default;
-$blue-700: $df-colorPalette-sky-80 !default;
-$blue-800: $df-colorPalette-sky-90 !default;
-$blue-900: $df-colorPalette-sky-100 !default;
-
-$primary-50: $df-theme-primary-10 !default;
-$primary-100: $df-theme-primary-20 !default;
-$primary-200: $df-theme-primary-30 !default;
-$primary-300: $df-theme-primary-40 !default;
-$primary-400: $df-theme-primary-50 !default;
-$primary-500: $df-theme-primary-60 !default;
-$primary-600: $df-theme-primary-70 !default;
-$primary-700: $df-theme-primary-80 !default;
-$primary-800: $df-theme-primary-90 !default;
-$primary-900: $df-theme-primary-100 !default;
-
-$info-50: $df-theme-info-10 !default;
-$info-100: $df-theme-info-20 !default;
-$info-200: $df-theme-info-30 !default;
-$info-300: $df-theme-info-40 !default;
-$info-400: $df-theme-info-50 !default;
-$info-500: $df-theme-info-60 !default;
-$info-600: $df-theme-info-70 !default;
-$info-700: $df-theme-info-80 !default;
-$info-800: $df-theme-info-90 !default;
-$info-900: $df-theme-info-100 !default;
-
-$purple-50: $df-colorPalette-violet-10 !default;
-$purple-100: $df-colorPalette-violet-20 !default;
-$purple-200: $df-colorPalette-violet-30 !default;
-$purple-300: $df-colorPalette-violet-40 !default;
-$purple-400: $df-colorPalette-violet-50 !default;
-$purple-500: $df-colorPalette-violet-60 !default;
-$purple-600: $df-colorPalette-violet-70 !default;
-$purple-700: $df-colorPalette-violet-80 !default;
-$purple-800: $df-colorPalette-violet-90 !default;
-$purple-900: $df-colorPalette-violet-100 !default;
-
-$pink-50: $df-colorPalette-fuchsia-10 !default;
-$pink-100: $df-colorPalette-fuchsia-20 !default;
-$pink-200: $df-colorPalette-fuchsia-30 !default;
-$pink-300: $df-colorPalette-fuchsia-40 !default;
-$pink-400: $df-colorPalette-fuchsia-50 !default;
-$pink-500: $df-colorPalette-fuchsia-60 !default;
-$pink-600: $df-colorPalette-fuchsia-70 !default;
-$pink-700: $df-colorPalette-fuchsia-80 !default;
-$pink-800: $df-colorPalette-fuchsia-90 !default;
-$pink-900: $df-colorPalette-fuchsia-100 !default;
-
-$red-50: $df-colorPalette-crimson-10 !default;
-$red-100: $df-colorPalette-crimson-20 !default;
-$red-200: $df-colorPalette-crimson-30 !default;
-$red-300: $df-colorPalette-crimson-40 !default;
-$red-400: $df-colorPalette-crimson-50 !default;
-$red-500: $df-colorPalette-crimson-60 !default;
-$red-600: $df-colorPalette-crimson-70 !default;
-$red-700: $df-colorPalette-crimson-80 !default;
-$red-800: $df-colorPalette-crimson-90 !default;
-$red-900: $df-colorPalette-crimson-100 !default;
-
-$orange-50: $df-colorPalette-pumpkin-10 !default;
-$orange-100: $df-colorPalette-pumpkin-20 !default;
-$orange-200: $df-colorPalette-pumpkin-30 !default;
-$orange-300: $df-colorPalette-pumpkin-40 !default;
-$orange-400: $df-colorPalette-pumpkin-50 !default;
-$orange-500: $df-colorPalette-pumpkin-60 !default;
-$orange-600: $df-colorPalette-pumpkin-70 !default;
-$orange-700: $df-colorPalette-pumpkin-80 !default;
-$orange-800: $df-colorPalette-pumpkin-90 !default;
-$orange-900: $df-colorPalette-pumpkin-100 !default;
-
-$yellow-50: $df-colorPalette-canary-10 !default;
-$yellow-100: $df-colorPalette-canary-20 !default;
-$yellow-200: $df-colorPalette-canary-30 !default;
-$yellow-300: $df-colorPalette-canary-40 !default;
-$yellow-400: $df-colorPalette-canary-50 !default;
-$yellow-500: $df-colorPalette-canary-60 !default;
-$yellow-600: $df-colorPalette-canary-70 !default;
-$yellow-700: $df-colorPalette-canary-80 !default;
-$yellow-800: $df-colorPalette-canary-90 !default;
-$yellow-900: $df-colorPalette-canary-100 !default;
-
-$green-50: $df-colorPalette-forest-10 !default;
-$green-100: $df-colorPalette-forest-20 !default;
-$green-200: $df-colorPalette-forest-30 !default;
-$green-300: $df-colorPalette-forest-40 !default;
-$green-400: $df-colorPalette-forest-50 !default;
-$green-500: $df-colorPalette-forest-60 !default;
-$green-600: $df-colorPalette-forest-70 !default;
-$green-700: $df-colorPalette-forest-80 !default;
-$green-800: $df-colorPalette-forest-90 !default;
-$green-900: $df-colorPalette-forest-100 !default;
-
-$teal-50: $df-colorPalette-sky-10 !default;
-$teal-100: $df-colorPalette-sky-20 !default;
-$teal-200: $df-colorPalette-sky-30 !default;
-$teal-300: $df-colorPalette-sky-40 !default;
-$teal-400: $df-colorPalette-sky-50 !default;
-$teal-500: $df-colorPalette-sky-60 !default;
-$teal-600: $df-colorPalette-sky-70 !default;
-$teal-700: $df-colorPalette-sky-80 !default;
-$teal-800: $df-colorPalette-sky-90 !default;
-$teal-900: $df-colorPalette-sky-100 !default;
-
-$danger-50: $df-theme-danger-10 !default;
-$danger-100: $df-theme-danger-20 !default;
-$danger-200: $df-theme-danger-30 !default;
-$danger-300: $df-theme-danger-40 !default;
-$danger-400: $df-theme-danger-50 !default;
-$danger-500: $df-theme-danger-60 !default;
-$danger-600: $df-theme-danger-70 !default;
-$danger-700: $df-theme-danger-80 !default;
-$danger-800: $df-theme-danger-90 !default;
-$danger-900: $df-theme-danger-100 !default;
-
-$warning-50: $df-theme-warning-10 !default;
-$warning-100: $df-theme-warning-20 !default;
-$warning-200: $df-theme-warning-30 !default;
-$warning-300: $df-theme-warning-40 !default;
-$warning-400: $df-theme-warning-50 !default;
-$warning-500: $df-theme-warning-60 !default;
-$warning-600: $df-theme-warning-70 !default;
-$warning-700: $df-theme-warning-80 !default;
-$warning-800: $df-theme-warning-90 !default;
-$warning-900: $df-theme-warning-100 !default;
-
-$success-50: $df-theme-success-10 !default;
-$success-100: $df-theme-success-20 !default;
-$success-200: $df-theme-success-30 !default;
-$success-300: $df-theme-success-40 !default;
-$success-400: $df-theme-success-50 !default;
-$success-500: $df-theme-success-60 !default;
-$success-600: $df-theme-success-70 !default;
-$success-700: $df-theme-success-80 !default;
-$success-800: $df-theme-success-90 !default;
-$success-900: $df-theme-success-100 !default;
-
-$dark-50: $gray-50 !default;
-$dark-100: $gray-100 !default;
-$dark-200: $gray-200 !default;
-$dark-300: $gray-300 !default;
-$dark-400: $gray-400 !default;
-$dark-500: $gray-500 !default;
-$dark-600: $gray-600 !default;
-$dark-700: $gray-700 !default;
-$dark-800: $gray-800 !default;
-$dark-900: $gray-900 !default;
-
-// scss-docs-start theme-bg-subtle-variables
-$primary-bg-subtle: var(--df-color-primary-subtle-background) !default;
-// TODO check where this is used in bootstrap
-$secondary-bg-subtle: var(--df-secondary-50) !default;
-$success-bg-subtle: var(--df-color-success-subtle-background) !default;
-$info-bg-subtle: var(--df-color-info-subtle-background) !default;
-$warning-bg-subtle: var(--df-color-warning-subtle-background) !default;
-$danger-bg-subtle: var(--df-color-danger-subtle-background) !default;
-// TODO check where this is used in bootstrap
-$light-bg-subtle: var(--df-white) !default;
-
-// scss-docs-end theme-bg-subtle-variables
-
-// scss-docs-start theme-border-subtle-variables
-// $primary-border-subtle:   tint-color($primary, 60%) !default;
-// $secondary-border-subtle: tint-color($secondary, 60%) !default;
-// $success-border-subtle:   tint-color($success, 60%) !default;
-// $info-border-subtle:      tint-color($info, 60%) !default;
-// $warning-border-subtle:   tint-color($warning, 60%) !default;
-// $danger-border-subtle:    tint-color($danger, 60%) !default;
-// $light-border-subtle:     $gray-200 !default;
-// $dark-border-subtle:      $gray-500 !default;
-// scss-docs-end theme-border-subtle-variables
-
-// Spacing
-//
-// Control the default styling of most Bootstrap elements by modifying these
-// variables. Mostly focused on spacing.
-// You can add more entries to the $spacers map, should you need more variation.
-
-// scss-docs-start spacer-variables-maps
-$spacer: $df-spacing-5 !default;
-$spacers: () !default;
-
-$enable-negative-margins: false !default;
-
-@for $i from 0 through 12 {
-  $spacers: map.set($spacers, $i, var(--df-spacing-#{$i}));
-}
-
-@if $enable-negative-margins {
-  $negative-spacers: () !default;
-  @for $i from 1 through 12 {
-    $negative-spacers: map.set($negative-spacers, 'n' + $i, calc(-1 * var(--df-spacing-#{$i})));
-  }
-} @else {
-  $negative-spacers: null !default;
-}
-
-// scss-docs-end spacer-variables-maps
-
-$body-bg: $white !default;
-$body-color: $gray-900 !default;
-$color-contrast-dark: $body-color !default; // should be same as $body-color but not a CSS var
-$df-disabled-color: var(--df-gray-400) !default;
-$df-disabled-bg-color: var(--df-gray-200) !default;
-$input-btn-focus-box-shadow:
-  0 0 0 2px var(--df-inner-box-shadow-color, var(--df-body-bg)),
-  0 0 0 4px var(--df-box-shadow-color, $primary) !default;
-
-$df-box-shadow: 0px 0px 8px 0px rgba($gray-600, 0.75) !default;
-$df-hover-bg-color: var(--df-primary-100) !default;
-
-// scss-docs-start border-radius-variables
-$border-radius: var(--df-borderRadius-main-medium) !default;
-$border-radius-sm: var(--df-borderRadius-main-small) !default;
-$border-radius-lg: var(--df-borderRadius-main-large) !default;
-$border-radius-pill: var(--df-borderRadius-main-rounded) !default;
-
-// scss-docs-start input-btn-variables
-$input-btn-padding-x: $df-spacing-4 !default;
-$input-btn-padding-x-sm: $df-spacing-3 !default;
-$input-btn-padding-x-lg: $df-spacing-5 !default;
-// scss-docs-end input-btn-variables