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

package/styles/scss/components/button/_button.utils.scss

@@ -1,35 +0,0 @@
-@function df-button-icononly-size($padding-y) {
-  @return calc(#{$btn-line-height} * 1em + #{$padding-y} * 2 + #{$btn-border-width} * 2);
-}
-
-@mixin df-reset-buttongroup-radius($radius) {
-  // Set back the radius
-  > .btn:not(:last-child):not(.dropdown-toggle),
-  > .btn-group:not(:last-child) > .btn {
-    @include border-end-radius($radius);
-  }
-  > .btn:nth-child(n + 3),
-  > :not(.btn-check) + .btn,
-  > .btn-group:not(:first-child) > .btn {
-    @include border-start-radius($radius);
-  }
-}
-
-/*
-  Check if $variableName exists, if not, return the $defaultVariableName (without the prefix).
-
-  @param {String} $variableName - Variable name to check, should not include the prefix.
-  @param {String} $defaultVariableName - Default variable name to return if the primary variable does not exist, should not include the prefix.
-  @return {String} The variable name to use, either the primary or the default.
-*/
-@function varWithDefault($variableName, $defaultVariableName) {
-  @if meta.variable-exists($name: 'df-' + $variableName) or not
-    (meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023)
-  {
-    @return $variableName;
-  }
-  @if not meta.variable-exists($name: 'df-' + $defaultVariableName) {
-    @error "Variable 'df-#{$defaultVariableName}' does not exist.";
-  }
-  @return $defaultVariableName;
-}

package/styles/scss/components/button/_button.variables.scss

@@ -1,48 +0,0 @@
-@use 'sass:map';
-
-$df-btn-display: inline-flex !default;
-$df-btn-icononly-border-radius: 50% !default;
-$df-btn-icononly-border-radius-sm: 50% !default;
-$df-btn-icononly-border-radius-lg: 50% !default;
-$df-btn-icononly-border-width: 0 !default;
-$df-btn-icononly-padding-x: 0 !default;
-$df-btn-icononly-padding-y: 0 !default;
-$df-btn-icon-margin-end: 0.25em !default;
-$df-btn-link-hover-bg-color: $df-hover-bg-color !default;
-$df-btn-link-active-bg-color: $df-btn-link-hover-bg-color !default;
-$df-btn-link-active-color: $btn-link-hover-color !default;
-$df-btn-disabled-bg-color: $df-disabled-bg-color !default;
-$df-btn-disabled-border-color: $df-btn-disabled-bg-color !default;
-$df-btn-disabled-text-color: var(--#{$prefix}disabled-color) !default;
-$df-btn-outline-disabled-text-color: var(--#{$prefix}disabled-color) !default;
-$df-btn-min-width-xl: 6.25em !default;
-$df-btn-padding-y-xl: $btn-padding-y-lg !default;
-$df-btn-padding-x-xl: $btn-padding-x-lg !default;
-$df-btn-font-size-xl: calc($font-size-base * map.get($df-size-ratios, 'xl')) !default;
-$df-btn-border-radius-xl: 1.5rem !default; //default ngBootstrap value of $btn-border-radius-lg
-$df-btn-link-td: none !default;
-$df-btn-link-hover-td: none !default;
-$df-btn-link-focus-td: none !default;
-$df-btn-link-active-td: none !default;
-$df-btn-link-padding-x-sm: 0.5rem !default;
-$df-btn-link-padding-x: $btn-padding-x-sm !default;
-$df-btn-link-padding-x-lg: $btn-padding-x !default;
-$df-btn-cursor-disabled: var(--#{$prefix}disabled-cursor) !default;
-$df-btn-group-spaced-margin-end: 0.75rem !default; // replace $df-checkbox-radio-margin-end
-$df-btn-group-spaced-margin-bottom: 0.5rem !default; // replace $df-checkbox-radio-margin-bottom
-$df-btn-focus-box-shadow-color: rgba(var(--#{$prefix}btn-focus-shadow-rgb), 0.5) !default;
-$df-btn-focus-hover-box-shadow-color: $df-btn-focus-box-shadow-color !default;
-$df-btn-focus-active-box-shadow-color: $df-btn-focus-box-shadow-color !default;
-$df-btn-outline-focus-hover-box-shadow-color: $df-btn-focus-box-shadow-color !default;
-$df-btn-outline-focus-active-box-shadow-color: $df-btn-focus-box-shadow-color !default;
-$df-btn-check-active-property: 'bg-color' !default;
-$df-btn-bg-color: transparent !default;
-$df-btn-focus-only-bg-color: transparent !default;
-$df-btn-outline-focus-box-shadow-color: $df-btn-focus-box-shadow-color !default;
-$df-btn-close-focus-shadow-width: $focus-ring-width !default;
-
-// TODO - To be removed when CSS var and focus-ring will be fully used
-$df-btn-focus-box-shadow-blur: $focus-ring-blur !default;
-$df-btn-focus-box-shadow: $df-focused-box-shadow !default; // this value is the default value in buttons.scss of bootstrap
-$df-btn-outline-focus-inner-box-shadow-color: $df-btn-bg-color !default;
-$df-btn-bg-color-white: var(--#{$prefix}white) !default;

package/styles/scss/components/button/_button_container.scss

@@ -1,47 +0,0 @@
-@use 'sass:color';
-
-@each $state, $value in $theme-colors {
-  $colorbtn: color-contrast($value);
-  $hover-background: if(
-    $colorbtn == $color-contrast-light,
-    shade-color($value, $btn-hover-bg-shade-amount),
-    tint-color($value, $btn-hover-bg-tint-amount)
-  );
-  $hover-border: if(
-    $colorbtn == $color-contrast-light,
-    shade-color($value, $btn-hover-border-shade-amount),
-    tint-color($value, $btn-hover-border-tint-amount)
-  );
-  $hover-color: color-contrast($hover-background);
-  $active-background: if(
-    $colorbtn == $color-contrast-light,
-    shade-color($value, $btn-active-bg-shade-amount),
-    tint-color($value, $btn-active-bg-tint-amount)
-  );
-  $active-color: color-contrast($active-background);
-  $active-border: if(
-    $colorbtn == $color-contrast-light,
-    shade-color($value, $btn-active-border-shade-amount),
-    tint-color($value, $btn-active-border-tint-amount)
-  );
-
-  $active-background-outline: $value;
-  $active-border-outline: $value;
-  $active-color-outline: color-contrast($active-background-outline);
-
-  // this code is because
-  // .btn-check:focus + &
-  // from the file _buttons.scss is not working with the wrapper
-  #{$df-css-namespace-selector} {
-    .btn-check:checked,
-    .btn-check:active {
-      & + .btn-#{$state},
-      & + .btn-outline-#{$state} {
-        color: var(--#{$prefix}btn-active-color);
-        background-color: var(--#{$prefix}btn-active-bg);
-        border-color: var(--#{$prefix}btn-active-border-color);
-        background-image: if($enable-gradients, none, null);
-      }
-    }
-  }
-}

package/styles/scss/components/card/_card.scss

@@ -1,208 +0,0 @@
-.card.btn {
-  --#{$prefix}btn-font-weight: #{$df-card-focusable-font-weight};
-}
-
-// TODO instead of creating css var for the card here we could override the css var
-// of the btn-outline-primary in the card for our behavior
-.card {
-  --#{$prefix}card-title-font-weight: #{$df-card-title-font-weight};
-  --#{$prefix}card-focusable-border-color: #{$df-card-focusable-border-color};
-  --#{$prefix}card-focusable-hover-border-color: #{$df-card-focusable-hover-border-color};
-  --#{$prefix}card-focusable-active-border-color: #{$df-card-focusable-active-border-color};
-  --#{$prefix}card-focusable-border-radius: #{$df-card-focusable-border-radius};
-  --#{$prefix}card-focusable-color: #{$df-card-focusable-color};
-  --#{$prefix}card-focusable-hover-color: #{$df-card-focusable-hover-color};
-  --#{$prefix}card-focusable-bg-color: #{$df-card-focusable-bg-color};
-  --#{$prefix}card-focusable-disabled-color: #{$df-card-focusable-disabled-color};
-  --#{$prefix}card-focusable-disabled-opacity: #{$df-card-focusable-disabled-opacity};
-  --#{$prefix}card-focusable-disabled-cursor: #{$df-card-focusable-disabled-cursor};
-  --#{$prefix}card-focusable-disabled-background: #{$df-card-focusable-disabled-background};
-  --#{$prefix}card-focusable-font-weight: #{$df-card-focusable-font-weight};
-  --#{$prefix}card-selected-bg-color: #{$df-card-selected-bg-color};
-  --#{$prefix}btn-active-bg: var(--#{$prefix}card-selected-bg-color);
-  --#{$prefix}card-selected-border-color: #{$df-card-selected-border-color};
-  --#{$prefix}card-selected-hover-bg-color: #{$df-card-selected-hover-bg-color};
-  --#{$prefix}card-group-between-border-width: #{$df-card-group-between-border-width};
-  --#{$prefix}card-group-between-border-color: #{$df-card-group-between-border-color};
-  --#{$prefix}accordion-card-padding-start: #{$df-accordion-card-padding-start};
-  --#{$prefix}accordion-card-end-padding-end: #{$df-accordion-card-end-padding-end};
-  --#{$prefix}accordion-card-end-padding-start: #{$df-accordion-card-end-padding-start};
-  --#{$prefix}accordion-card-background-color: #{$df-accordion-card-background-color};
-  --#{$prefix}accordion-card-last-border-bottom-width: #{$df-accordion-card-last-border-bottom-width};
-  --#{$prefix}accordion-card-last-body-border-top: #{$df-accordion-card-last-body-border-top};
-  --#{$prefix}accordion-card-between-border-radius: #{$df-accordion-card-between-border-radius};
-  --#{$prefix}accordion-card-between-border-top: #{$df-accordion-card-between-border-top};
-  --#{$prefix}card-text-margin-block-end: #{$df-card-text-margin-block-end};
-  --#{$prefix}card-subtitle-margin-block-end: #{$df-card-subtitle-margin-block-end};
-
-  box-shadow: var(--#{$prefix}card-box-shadow);
-
-  .card-title {
-    font-weight: var(--#{$prefix}card-title-font-weight);
-  }
-
-  .card-text {
-    margin-block-end: var(--#{$prefix}card-text-margin-block-end);
-
-    &:last-child {
-      margin-block-end: 0;
-    }
-  }
-
-  .card-subtitle {
-    margin-block-end: var(--#{$prefix}card-subtitle-margin-block-end);
-  }
-
-  &.border-0 {
-    box-shadow: none;
-  }
-
-  &.btn-outline-primary {
-    display: block;
-    text-align: start;
-    color: var(--#{$prefix}card-focusable-color);
-    border: var(--#{$prefix}card-focusable-border-color);
-    border-radius: var(--#{$prefix}card-focusable-border-radius);
-    height: inherit;
-
-    &:focus-visible {
-      --#{$prefix}box-shadow-color: #{$df-card-focusable-focus-box-shadow-color};
-
-      &:not(:hover):not(:active) {
-        color: var(--#{$prefix}card-focusable-color);
-      }
-    }
-
-    &:not([aria-disabled='true']):not([disabled]):not(.disabled) {
-      &.df-card-selected {
-        // TODO change the color also for accessibility reason if we change the main color.
-        background-color: var(--#{$prefix}card-selected-bg-color);
-        border-color: var(--#{$prefix}card-selected-border-color);
-
-        &:hover {
-          background-color: var(--#{$prefix}card-selected-hover-bg-color);
-        }
-      }
-
-      &:hover {
-        background-color: var(--#{$prefix}card-focusable-bg-color);
-        border: var(--#{$prefix}card-focusable-hover-border-color);
-        color: var(--#{$prefix}card-focusable-hover-color);
-
-        &:active {
-          background-color: var(--#{$prefix}btn-active-bg);
-          border: var(--#{$prefix}card-focusable-active-border-color);
-        }
-      }
-
-      &:active {
-        border: var(--#{$prefix}card-focusable-active-border-color);
-      }
-    }
-
-    &[aria-disabled='true'],
-    &[aria-disabled='true']:hover,
-    &[aria-disabled='true']:active,
-    &.disabled,
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:active,
-    &.disabled:hover,
-    &.disabled:active {
-      color: var(--#{$prefix}card-focusable-disabled-color);
-      background-color: var(--#{$prefix}card-focusable-disabled-background);
-      opacity: var(--#{$prefix}card-focusable-disabled-opacity);
-      cursor: var(--#{$prefix}card-focusable-disabled-cursor);
-    }
-  }
-}
-
-.df-accordion-card {
-  box-shadow: var(--#{$prefix}card-box-shadow);
-  border-radius: var(--#{$prefix}card-border-radius);
-
-  &.card,
-  & > .card {
-    .card-header {
-      padding-left: var(--#{$prefix}accordion-card-padding-start);
-      border-bottom-width: var(--#{$prefix}accordion-card-last-border-bottom-width);
-
-      &.df-card-header-end {
-        padding-right: var(--#{$prefix}accordion-card-end-padding-end);
-        padding-left: var(--#{$prefix}accordion-card-end-padding-start);
-      }
-
-      background-color: var(--#{$prefix}accordion-card-background-color);
-    }
-
-    .card-body {
-      border-top: var(--#{$prefix}accordion-card-last-body-border-top);
-    }
-
-    box-shadow: none;
-
-    &:not(:last-of-type) {
-      border-bottom-left-radius: var(--#{$prefix}accordion-card-between-border-radius);
-      border-bottom-right-radius: var(--#{$prefix}accordion-card-between-border-radius);
-      border-bottom-width: var(--#{$prefix}accordion-card-last-border-bottom-width);
-    }
-
-    &:not(:first-of-type) {
-      border-top-left-radius: var(--#{$prefix}accordion-card-between-border-radius);
-      border-top-right-radius: var(--#{$prefix}accordion-card-between-border-radius);
-
-      border-top: var(--#{$prefix}accordion-card-between-border-top);
-    }
-
-    &:last-of-type .card-header {
-      border-bottom-left-radius: var(--#{$prefix}card-border-radius);
-      border-bottom-right-radius: var(--#{$prefix}card-border-radius);
-    }
-  }
-}
-
-.card-group {
-  --#{$prefix}card-box-shadow: #{$card-box-shadow};
-  --#{$prefix}card-border-radius: #{$card-border-radius};
-}
-
-@include media-breakpoint-up(md) {
-  .card-group {
-    box-shadow: var(--#{$prefix}card-box-shadow);
-    border-radius: var(--#{$prefix}card-border-radius);
-
-    .card {
-      box-shadow: none;
-      border-radius: 0;
-
-      &:not(:last-of-type) {
-        border-inline-end: var(--#{$prefix}card-group-between-border-width) solid
-          var(--#{$prefix}card-group-between-border-color);
-      }
-
-      .card-img-top {
-        border-radius: 0;
-      }
-
-      &:first-of-type {
-        border-end-start-radius: var(--#{$prefix}card-border-radius);
-
-        &,
-        & .card-img-top {
-          border-start-start-radius: var(--#{$prefix}card-border-radius);
-          border-start-end-radius: 0;
-        }
-      }
-
-      &:last-of-type {
-        border-end-end-radius: var(--#{$prefix}card-border-radius);
-
-        &,
-        & .card-img-top {
-          border-start-end-radius: var(--#{$prefix}card-border-radius);
-          border-start-start-radius: 0;
-        }
-      }
-    }
-  }
-}

package/styles/scss/components/card/_card.variables.scss

@@ -1,33 +0,0 @@
-$df-card-title-font-weight: inherit !default;
-$df-card-focusable-border-color: $border-width solid $border-color !default;
-$df-card-focusable-hover-border-color: $border-width solid shades-css-var('primary', 'border-color') !default;
-$df-card-focusable-active-border-color: $border-width solid $dark-primary !default;
-$df-card-focusable-border-radius: $border-radius-sm !default;
-$df-card-focusable-color: $body-color !default; // todo is it linked to body-color ?
-$df-card-focusable-hover-color: $body-color !default; // todo link this to the css var
-$df-card-focusable-focus-box-shadow-color: inherit !default;
-$df-card-focusable-focus-inner-box-shadow-color: inherit !default;
-$df-card-focusable-bg-color: transparent !default;
-$df-card-focusable-disabled-color: var(--#{$prefix}disabled-color) !default;
-$df-card-focusable-disabled-opacity: var(--#{$prefix}disabled-opacity) !default;
-$df-card-focusable-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
-$df-card-focusable-disabled-background: var(--#{$prefix}disabled-bg-color) !default;
-$df-card-focusable-font-weight: $font-weight-normal !default;
-$df-card-selected-bg-color: shades-css-var('teal', 'bg-subtle-color') !default;
-$df-card-selected-border-color: shades-css-var('teal', 'border-color') !default; // todo link this to the css var
-$df-card-selected-hover-bg-color: shades-css-var(
-  'teal',
-  'bg-subtle-hover-color'
-) !default; // todo link this to the css var
-$df-card-group-between-border-width: $border-width !default;
-$df-card-group-between-border-color: var(--#{$prefix}gray-200) !default;
-$df-accordion-card-padding-start: 0.3125rem !default;
-$df-accordion-card-end-padding-end: $df-accordion-card-padding-start !default;
-$df-accordion-card-end-padding-start: $accordion-padding-x !default;
-$df-accordion-card-background-color: $body-bg !default; // todo link this to the css var
-$df-accordion-card-last-border-bottom-width: 0px !default;
-$df-accordion-card-last-body-border-top: $border-width $border-style var(--#{$prefix}gray-200) !default;
-$df-accordion-card-between-border-radius: 0px !default;
-$df-accordion-card-between-border-top: $border-width $border-style var(--#{$prefix}gray-200) !default;
-$df-card-text-margin-block-end: 1rem !default;
-$df-card-subtitle-margin-block-end: 0.25rem !default;

package/styles/scss/components/carousel/_carousel.scss

@@ -1,51 +0,0 @@
-.carousel {
-  --#{$prefix}carousel-indicator-bg-color: #{$df-carousel-indicator-bg-color};
-  --#{$prefix}carousel-indicator-bg-color-hover: #{$df-carousel-indicator-bg-color-hover};
-  --#{$prefix}carousel-indicator-border-radius: #{$df-carousel-indicator-border-radius};
-  --#{$prefix}carousel-outline: #{$df-carousel-outline};
-  --#{$prefix}carousel-indicator-bottom: #{$df-carousel-indicator-bottom};
-  --#{$prefix}carousel-caption-bottom: #{$df-carousel-caption-bottom};
-  --#{$prefix}carousel-caption-padding-bottom: #{$df-carousel-caption-padding-bottom};
-  --#{$prefix}carousel-caption-padding-top: #{$df-carousel-caption-padding-top};
-  --#{$prefix}carousel-indicator-bg-size: 50% 50%;
-  &:focus-visible {
-    outline: var(--#{$prefix}carousel-outline);
-    box-shadow: $df-carousel-focused-box-shadow;
-  }
-  &.df-carousel-isFirst {
-    .carousel-control-prev-icon {
-      display: none;
-    }
-    .carousel-control-prev {
-      cursor: initial;
-    }
-  }
-  &.df-carousel-isLast {
-    .carousel-control-next-icon {
-      display: none;
-      cursor: var(--#{$prefix}disabled-cursor);
-    }
-    .carousel-control-next {
-      cursor: initial;
-    }
-  }
-  .carousel-control-prev-icon,
-  .carousel-control-next-icon {
-    border-radius: var(--#{$prefix}carousel-indicator-border-radius);
-    background-color: var(--#{$prefix}carousel-indicator-bg-color);
-    &:hover {
-      background-color: var(--#{$prefix}carousel-indicator-bg-color-hover);
-    }
-    background-size: var(--#{$prefix}carousel-indicator-bg-size);
-  }
-
-  .carousel-caption {
-    background-color: var(--#{$prefix}carousel-indicator-bg-color); // add
-    bottom: var(--#{$prefix}carousel-caption-bottom); // override
-    padding-bottom: var(--#{$prefix}carousel-caption-padding-bottom); // override
-    padding-top: var(--#{$prefix}carousel-caption-padding-top); // override as no variable is set
-  }
-  .carousel-indicators {
-    bottom: var(--#{$prefix}carousel-indicator-bottom); // override
-  }
-}

package/styles/scss/components/carousel/_carousel.variables.scss

@@ -1,12 +0,0 @@
-@use 'sass:color';
-
-$df-carousel-indicator-bg-color: color.adjust($black, $alpha: -0.4) !default;
-$df-carousel-indicator-bg-color-hover: $black !default;
-$df-carousel-indicator-border-radius: 50% !default;
-$df-carousel-outline: var(--#{$prefix}focus-outline) !default;
-$df-carousel-indicator-bottom: -$carousel-indicator-hit-area-height !default;
-$df-carousel-caption-bottom: 0 !default; // we remove 20px here from BS
-// default value is 20 + 20 of the caption bottom - the value we decrease the position of the indicators
-$df-carousel-caption-padding-bottom: 20px + 20px + $df-carousel-indicator-bottom !default;
-$df-carousel-caption-padding-top: 0.75rem !default;
-$df-carousel-focused-box-shadow: $df-focused-box-shadow !default;

package/styles/scss/components/checkbox/_checkbox.scss

@@ -1,61 +0,0 @@
-@use 'sass:math';
-@use 'sass:meta';
-
-.form-check {
-  //TODO: change to use spacing tokens
-  @if (meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023) {
-    --#{$prefix}checkbox-invalid-feedback-margin-start: #{-1em * math.div($form-check-padding-start, 0.875em)};
-  } @else {
-    --#{$prefix}checkbox-invalid-feedback-margin-start: #{-1em *
-      math.div($form-check-padding-start, $form-feedback-font-size)};
-  }
-
-  --#{$prefix}checkbox-disabled-background-color: #{$df-checkbox-disabled-background-color};
-  --#{$prefix}checkbox-checked-disabled-bg-color: #{$df-checkbox-checked-disabled-bg-color};
-  --#{$prefix}checkbox-disabled-border-color: #{$df-checkbox-disabled-border-color};
-  --#{$prefix}checkbox-disabled-cursor: #{$df-checkbox-disabled-cursor};
-
-  .form-check-input {
-    &:not([disabled]):not(.disabled) {
-      cursor: pointer;
-    }
-
-    & ~ .invalid-feedback {
-      @include rtl {
-        margin-right: var(--#{$prefix}checkbox-invalid-feedback-margin-start);
-      }
-      @include ltr {
-        margin-left: var(--#{$prefix}checkbox-invalid-feedback-margin-start);
-      }
-    }
-
-    &.disabled,
-    &[disabled] {
-      cursor: var(--#{$prefix}checkbox-disabled-cursor);
-      pointer-events: auto;
-      border-color: var(--#{$prefix}checkbox-disabled-border-color);
-
-      &:not([checked]) {
-        background-color: var(--#{$prefix}checkbox-disabled-background-color);
-      }
-
-      &:checked,
-      &:indeterminate {
-        &[type='checkbox'] {
-          background-color: var(--#{$prefix}checkbox-checked-disabled-bg-color);
-        }
-      }
-
-      & ~ .form-check-label {
-        color: var(--#{$prefix}checkbox-checked-disabled-bg-color);
-        cursor: var(--#{$prefix}checkbox-disabled-cursor);
-      }
-    }
-  }
-}
-
-.form-check-input {
-  &:not(:checked):not(.is-invalid):not(:indeterminate):focus {
-    --#{$prefix}box-shadow-color: #{$df-checkbox-box-shadow-color};
-  }
-}

package/styles/scss/components/checkbox/_checkbox.variables.scss

@@ -1,7 +0,0 @@
-$df-checkbox-disabled-background-color: $df-disabled-bg-color !default;
-$df-checkbox-checked-disabled-bg-color: $gray-300 !default;
-$df-checkbox-disabled-border-color: $gray-300 !default;
-$df-checkbox-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
-$df-checkbox-radio-margin-bottom: 0.5rem !default;
-$df-checkbox-radio-margin-end: 0.75rem !default;
-$df-checkbox-box-shadow-color: #{$focus-ring-color} !default;

package/styles/scss/components/collapse/_collapse.scss

@@ -1,99 +0,0 @@
-@use 'sass:meta';
-@import '../link/link.mixins';
-
-// @deprecated - will be removed in version 21
-a.df-collapse[aria-disabled='true'] {
-  color: var(--#{$prefix}collapse-disabled-color);
-  display: var(--#{$prefix}collapse-disabled-display);
-  cursor: var(--#{$prefix}collapse-disabled-cursor);
-  text-decoration: var(--#{$prefix}collapse-disabled-text-decoration);
-
-  // Links styles override
-  border: none;
-}
-
-// @deprecated - will be removed in version 21
-// Links styles override
-a.df-collapse {
-  --#{$prefix}collapse-link-color: #{$df-collapse-link-color};
-  --#{$prefix}collapse-link-decoration: #{$df-collapse-link-decoration};
-  --#{$prefix}collapse-disabled-color: #{$df-collapse-disabled-color};
-  --#{$prefix}collapse-disabled-display: #{$df-collapse-disabled-display};
-  --#{$prefix}collapse-disabled-cursor: #{$df-collapse-disabled-cursor};
-  --#{$prefix}collapse-disabled-text-decoration: #{$df-collapse-disabled-text-decoration};
-  --#{$prefix}collapse-hover-border-bottom: #{$df-collapse-hover-border-bottom};
-
-  display: inline-flex;
-  align-items: center;
-
-  &:link,
-  &:visited {
-    color: var(--#{$prefix}collapse-link-color);
-    text-decoration: var(--#{$prefix}collapse-link-decoration);
-    border-bottom: var(--#{$prefix}collapse-hover-border-bottom) transparent;
-  }
-
-  &:hover,
-  &:active,
-  &:visited:hover {
-    @include df-link();
-  }
-}
-
-button.df-collapse {
-  @extend .btn, .btn-link;
-
-  padding: 0;
-  border-radius: 0;
-  border-width: 0;
-  --#{$prefix}collapse-link-color: #{$df-collapse-link-color};
-  --#{$prefix}collapse-link-decoration: #{$df-collapse-link-decoration};
-  --#{$prefix}collapse-disabled-color: #{$df-collapse-disabled-color};
-  --#{$prefix}collapse-disabled-display: #{$df-collapse-disabled-display};
-  --#{$prefix}collapse-disabled-cursor: #{$df-collapse-disabled-cursor};
-  --#{$prefix}collapse-disabled-text-decoration: #{$df-collapse-disabled-text-decoration};
-  --#{$prefix}collapse-hover-border-bottom: #{$df-collapse-hover-border-bottom};
-  --#{$prefix}link-hover-border-bottom-width: #{$df-link-hover-border-bottom-width};
-  --#{$prefix}link-hover-color: #{shades-css-var('links', 'text-hover-color')};
-  --#{$prefix}link-hover-background: #{shades-css-var('links', 'bg-hover-color')};
-  --#{$prefix}link-border-bottom: #{$df-link-border-bottom};
-
-  display: inline-flex;
-  align-items: center;
-  @if meta.variable-exists(df-btn-group-hover-box-shadow-color) {
-    gap: var(--#{$prefix}spacing-2);
-  } @else {
-    gap: var(--#{$prefix}btn-icon-margin-end);
-  }
-
-  color: var(--#{$prefix}collapse-link-color);
-  text-decoration: var(--#{$prefix}collapse-link-decoration);
-  border-bottom: var(--#{$prefix}collapse-hover-border-bottom) transparent;
-
-  &:hover:not(:disabled) {
-    color: var(--#{$prefix}link-hover-color);
-    background-color: var(--#{$prefix}link-hover-background);
-    border-bottom: var(--#{$prefix}link-border-bottom);
-    border-bottom-width: var(--#{$prefix}link-hover-border-bottom-width);
-    text-decoration: var(--#{$prefix}link-hover-text-decoration);
-  }
-
-  &:disabled {
-    color: var(--#{$prefix}collapse-disabled-color);
-    display: var(--#{$prefix}collapse-disabled-display);
-    cursor: var(--#{$prefix}collapse-disabled-cursor);
-    text-decoration: var(--#{$prefix}collapse-disabled-text-decoration);
-
-    // Links styles override
-    border: none;
-  }
-
-  [class*='icon-']:only-of-type,
-  [class*='fa-']:only-of-type {
-    &::before {
-      // override of the margins added by _buttons.scss
-      margin-left: 0 !important;
-      margin-right: 0 !important;
-    }
-  }
-}

package/styles/scss/components/collapse/_collapse.variables.scss

@@ -1,7 +0,0 @@
-$df-collapse-link-color: var(--#{$prefix}link-color) !default;
-$df-collapse-link-decoration: $link-decoration !default;
-$df-collapse-disabled-color: var(--#{$prefix}disabled-color) !default;
-$df-collapse-disabled-display: inline-block !default;
-$df-collapse-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
-$df-collapse-disabled-text-decoration: none !default;
-$df-collapse-hover-border-bottom: $df-link-hover-border-bottom-width solid !default;