@design-factory/design-factory 20.0.2 → 21.0.0-next.1

package/styles/scss/components/tabs/_tabs.scss

@@ -1,277 +0,0 @@
-@use 'sass:meta';
-
-.nav-tabs {
-  --#{$prefix}nav-link-color: #{$df-tabs-links-not-active-color}; // override CSS var BS
-  --#{$prefix}tabs-border-bottom: #{$df-tabs-border-bottom};
-  --#{$prefix}tabs-border-top: #{$df-tabs-border-top};
-  --#{$prefix}tabs-border-left: #{$df-tabs-border-left};
-  --#{$prefix}tabs-border-right: #{$df-tabs-border-right};
-  --#{$prefix}tabs-padding-y: #{$df-tabs-padding-y};
-  --#{$prefix}tabs-hover-text-decoration: #{$df-tabs-hover-text-decoration};
-  --#{$prefix}tabs-hover-bg-color: #{$df-tabs-hover-bg-color};
-  --#{$prefix}tabs-hover-border-bottom: #{$df-tabs-hover-border-bottom};
-  --#{$prefix}tabs-disabled-text-decoration: #{$df-tabs-disabled-text-decoration};
-  --#{$prefix}tabs-between-item-margin: #{$df-tabs-between-item-margin};
-  --#{$prefix}tabs-active-border-bottom: #{$df-tabs-active-border-bottom};
-  --#{$prefix}tabs-disabled-color: #{$df-tabs-disabled-color};
-  --#{$prefix}tabs-disabled-bg-color: #{$df-tabs-disabled-bg-color};
-  --#{$prefix}tabs-focus-outline: #{$df-tabs-focus-outline};
-  --#{$prefix}tabs-focus-box-shadow: #{$df-tabs-focus-box-shadow};
-  --#{$prefix}tabs-active-inner-box-shadow-color: #{$df-tabs-active-inner-box-shadow-color};
-  --#{$prefix}tabs-secondary-border-bottom: #{$df-tabs-secondary-border-bottom};
-  --#{$prefix}tabs-secondary-border-top: #{$df-tabs-secondary-border-top};
-  --#{$prefix}tabs-secondary-active-border-top: #{$df-tabs-secondary-active-border-top};
-  --#{$prefix}tabs-secondary-active-border-left: #{$df-tabs-secondary-active-border-left};
-  --#{$prefix}tabs-secondary-active-border-right: #{$df-tabs-secondary-active-border-right};
-  --#{$prefix}tabs-secondary-active-border-bottom: #{$df-tabs-secondary-active-border-bottom};
-  --#{$prefix}tabs-secondary-active-margin-bottom: #{$df-tabs-secondary-active-margin-bottom};
-  --#{$prefix}tabs-item-active-font-weight: #{$df-tabs-item-active-font-weight};
-  --#{$prefix}tabs-cursor-disabled: #{$df-tabs-cursor-disabled};
-  --#{$prefix}tabs-active-hover-border-bottom: #{$df-tabs-active-hover-border-bottom};
-
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    --#{$prefix}box-shadow-color: var(--#{$prefix}nav-link-color);
-  }
-
-  .nav-link {
-    border-bottom: var(--#{$prefix}tabs-border-bottom); // add
-    border-top: var(--#{$prefix}tabs-border-top); // add
-    border-left: var(--#{$prefix}tabs-border-left); // add
-    border-right: var(--#{$prefix}tabs-border-right); // add
-    padding-top: var(--#{$prefix}tabs-padding-y); // add
-    padding-bottom: var(--#{$prefix}tabs-padding-y); // add
-    color: var(--#{$prefix}nav-link-color); //override link color
-
-    &.active {
-      // add
-      font-weight: var(--#{$prefix}tabs-item-active-font-weight);
-
-      &:hover {
-        border-bottom: var(--#{$prefix}tabs-active-hover-border-bottom); // add
-      }
-    }
-
-    &:hover {
-      // override
-      text-decoration: var(--#{$prefix}tabs-hover-text-decoration); // add
-      background-color: var(--#{$prefix}tabs-hover-bg-color); // add
-      border-bottom: var(--#{$prefix}tabs-hover-border-bottom); // add
-      border-top: var(--#{$prefix}tabs-border-top); // add
-      border-left: var(--#{$prefix}tabs-border-left); // add
-      border-right: var(--#{$prefix}tabs-border-right); // add
-      color: var(--#{$prefix}nav-link-hover-color); //override link color
-    }
-
-    &:focus {
-      box-shadow: none;
-    }
-
-    &:focus-visible {
-      // override
-      outline: var(--#{$prefix}tabs-focus-outline); // add to override default
-      box-shadow: var(--#{$prefix}tabs-focus-box-shadow); // add
-      border-bottom: var(--#{$prefix}tabs-border-bottom); // add
-      border-top: var(--#{$prefix}tabs-border-top); // add
-      border-left: var(--#{$prefix}tabs-border-left); // add
-      border-right: var(--#{$prefix}tabs-border-right); // add
-      &:not(.active) {
-        color: var(--#{$prefix}nav-link-color);
-      }
-
-      &:hover {
-        --#{$prefix}inner-box-shadow-color: var(--#{$prefix}tabs-active-inner-box-shadow-color);
-        --#{$prefix}tabs-focus-box-shadow: #{$df-tabs-focus-box-shadow};
-      }
-    }
-
-    &.disabled {
-      text-decoration: var(--#{$prefix}tabs-disabled-text-decoration); // add
-      border-bottom: var(--#{$prefix}tabs-border-bottom); // add
-      border-top: var(--#{$prefix}tabs-border-top); // add
-      border-left: var(--#{$prefix}tabs-border-left); // add
-      border-right: var(--#{$prefix}tabs-border-right); // add
-      &:hover {
-        background-color: var(--#{$prefix}tabs-disabled-bg-color); // add
-      }
-    }
-  }
-
-  .nav-link.disabled,
-  .nav-link:disabled {
-    pointer-events: auto;
-    cursor: var(--#{$prefix}tabs-cursor-disabled);
-
-    &:focus {
-      color: var(--df-nav-link-disabled-color);
-      outline: none;
-      box-shadow: none;
-    }
-  }
-
-  .nav-item + .nav-item {
-    // add
-    margin-left: var(--#{$prefix}tabs-between-item-margin); // add
-  }
-
-  .nav-link.active,
-  .nav-item.show .nav-link {
-    border-bottom: var(--#{$prefix}tabs-active-border-bottom); // add
-    border-top: var(--#{$prefix}tabs-border-top); // add
-    border-left: var(--#{$prefix}tabs-border-left); // add
-    border-right: var(--#{$prefix}tabs-border-right); // add
-  }
-}
-
-.tab-content {
-  --#{$prefix}tabs-content-tab-pane-padding: #{$df-tabs-content-tab-pane-padding};
-  --#{$prefix}tabs-content-border-style: #{$df-tabs-content-border-style};
-  --#{$prefix}tabs-content-border-color: #{$df-tabs-content-border-color};
-  --#{$prefix}tabs-content-border-width: #{$df-tabs-content-border-width};
-
-  > .tab-pane {
-    padding: var(--#{$prefix}tabs-content-tab-pane-padding); //add
-  }
-}
-
-%secondary {
-  .nav-link {
-    border-bottom: var(--#{$prefix}tabs-secondary-border-bottom); // add
-    border-top: var(--#{$prefix}tabs-secondary-border-top); // add
-
-    &:hover {
-      // override
-      border-bottom: var(--#{$prefix}tabs-secondary-border-bottom); // add
-      border-top: var(--#{$prefix}tabs-secondary-border-top); // add
-    }
-
-    &:focus {
-      // override
-      border-bottom: var(--#{$prefix}tabs-secondary-border-bottom); // add
-      border-top: var(--#{$prefix}tabs-secondary-border-top); // add
-    }
-
-    &.disabled {
-      border-bottom: var(--#{$prefix}tabs-secondary-border-bottom); // add
-      border-top: var(--#{$prefix}tabs-secondary-border-top); // add
-    }
-  }
-
-  .nav-link.active,
-  .nav-item.show .nav-link {
-    border-bottom: var(--#{$prefix}tabs-secondary-active-border-bottom); // add
-    border-top: var(--#{$prefix}tabs-secondary-active-border-top); // add
-    border-left: var(--#{$prefix}tabs-secondary-active-border-left); // add
-    border-right: var(--#{$prefix}tabs-secondary-active-border-right); // add
-    margin-bottom: var(--#{$prefix}tabs-secondary-active-margin-bottom); // add
-  }
-}
-
-// For ng-bootstrap tab
-.secondary {
-  .nav-tabs {
-    @extend %secondary;
-  }
-
-  .tab-content {
-    @extend %secondary-content;
-  }
-}
-
-// For bootstrap tab
-.nav-tabs.secondary {
-  @extend %secondary;
-}
-
-%secondary-content {
-  border-style: var(--#{$prefix}tabs-content-border-style); //add
-  border-color: var(--#{$prefix}tabs-content-border-color); //add
-  border-width: var(--#{$prefix}tabs-content-border-width); //add
-}
-
-// For bootstrap tab
-.tab-content.secondary {
-  @extend %secondary-content;
-}
-
-.nav {
-  &.nav-pills[role='tablist'] {
-    // role=tablist is to target only tabset as pill and not scrollspy
-    --#{$prefix}tabs-disabled-color: #{$df-tabs-disabled-color};
-    --#{$prefix}tabs-cursor-disabled: #{$df-tabs-cursor-disabled};
-    --#{$prefix}tabs-disabled-bg-color: #{$df-tabs-disabled-bg-color};
-
-    a.nav-link {
-      border-bottom: 0;
-      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-        padding-inline-start: var(--#{$prefix}spacing-5);
-      }
-    }
-
-    .nav-link {
-      &.disabled,
-      &[disabled] {
-        pointer-events: auto; //needed to show the cursor
-        cursor: var(--#{$prefix}tabs-cursor-disabled);
-        color: var(--#{$prefix}tabs-disabled-color);
-
-        &:focus {
-          outline: none;
-          box-shadow: none;
-        }
-
-        &:hover {
-          background-color: var(--#{$prefix}tabs-disabled-bg-color);
-        }
-      }
-
-      &:focus-visible {
-        outline: 0;
-        box-shadow: $df-tabs-focus-box-shadow;
-      }
-    }
-  }
-}
-
-// We need this selector in case the Tabset is used inside a card to round the corners depending on the alignment
-.card,
-.card-body,
-.card-text {
-  & > .nav.nav-tabs {
-    //not sure if we should deal with breakpoint cases here since we use nav fill and nav-justified for the others alignment
-    $justify-content-start-implicit-selector: ':not(.justify-content-center):not(.justify-content-end)';
-    @each $breakpoint, $value in $grid-breakpoints {
-      $justify-content-start-implicit-selector: '#{$justify-content-start-implicit-selector}:not(.justify-content-#{$breakpoint}-center)';
-      $justify-content-start-implicit-selector: '#{$justify-content-start-implicit-selector}:not(.justify-content-#{$breakpoint}-end)';
-    }
-
-    &#{$justify-content-start-implicit-selector},
-    &.justify-content-start {
-      .nav-item:first-of-type .nav-link {
-        //default case, no alignment class on triggering the border-start-start-radius
-        border-start-start-radius: var(--#{$prefix}card-border-radius);
-      }
-    }
-
-    @each $breakpoint, $value in $grid-breakpoints {
-      &.justify-content-#{$breakpoint}-start {
-        .nav-item:first-of-type .nav-link {
-          //default case triggering the border-start-start-radius
-          border-start-start-radius: var(--#{$prefix}card-border-radius);
-        }
-      }
-      &.justify-content-#{$breakpoint}-end {
-        .nav-item:last-of-type .nav-link {
-          border-start-end-radius: var(--#{$prefix}card-border-radius);
-        }
-      }
-    }
-
-    &.justify-content-end,
-    &.nav-fill,
-    &.nav-justified {
-      .nav-item:last-of-type .nav-link {
-        border-start-end-radius: var(--#{$prefix}card-border-radius);
-      }
-    }
-  }
-}

package/styles/scss/components/tabs/_tabs.variables.scss

@@ -1,36 +0,0 @@
-$df-tabs-links-not-active-color: $body-color !default;
-$df-tabs-border-bottom: 2px solid transparent !default;
-$df-tabs-border-top: none !default;
-$df-tabs-border-left: none !default;
-$df-tabs-border-right: none !default;
-$df-tabs-hover-border-bottom: 2px solid transparent !default;
-$df-tabs-hover-text-decoration: underline !default;
-$df-tabs-hover-bg-color: $df-hover-bg-color !default;
-$df-tabs-disabled-text-decoration: none !default;
-$df-tabs-cursor-disabled: var(--#{$prefix}disabled-cursor) !default;
-// TODO rem instead of px
-$df-tabs-between-item-margin: 3px !default;
-$df-tabs-active-border-bottom: 3px solid shades-css-var('primary', 'inert-color') !default;
-$df-tabs-active-hover-border-bottom: $df-tabs-active-border-bottom !default;
-$df-tabs-disabled-color: var(--#{$prefix}disabled-color) !default;
-$df-tabs-disabled-bg-color: transparent !default;
-$df-tabs-focus-outline: none !default;
-$df-tabs-focus-box-shadow: $btn-focus-box-shadow !default;
-$df-tabs-active-inner-box-shadow-color: unset !default;
-$df-tabs-secondary-border-bottom: $df-tabs-border-top !default;
-$df-tabs-secondary-border-top: $df-tabs-border-bottom !default;
-$df-tabs-secondary-active-border-top: $df-tabs-active-border-bottom !default;
-$df-tabs-secondary-active-border-left: $border-width solid $border-color !default;
-$df-tabs-secondary-active-border-right: $border-width solid $border-color !default;
-$df-tabs-secondary-active-border-bottom: $df-tabs-border-top !default;
-$df-tabs-secondary-active-margin-bottom: -2 * $border-width !default;
-$df-tabs-padding-y: 0.6875rem !default; // comvarpad?
-// We can also add variable -x that is to be aligned with accordion....
-// instead of keeping the default value of nav-link which is currently good.
-
-// Tabs-content
-$df-tabs-content-border-style: solid !default;
-$df-tabs-content-border-color: $border-color !default;
-$df-tabs-content-border-width: 0px $nav-tabs-border-width $nav-tabs-border-width $nav-tabs-border-width !default;
-$df-tabs-content-tab-pane-padding: 1.5rem 1rem !default;
-$df-tabs-item-active-font-weight: initial !default;

package/styles/scss/components/timepicker/_timepicker.scss

@@ -1,5 +0,0 @@
-ngb-timepicker {
-  .ngb-tp-spacer {
-    width: $df-timepicker-spacer-width !important;
-  }
-}

package/styles/scss/components/timepicker/_timepicker.variables.scss

@@ -1 +0,0 @@
-$df-timepicker-spacer-width: 1em !default;

package/styles/scss/components/toast/_toast.scss

@@ -1,354 +0,0 @@
-@use 'sass:color';
-@use 'sass:map';
-@use 'sass:meta';
-
-@import '../button/button.utils';
-
-.toast {
-  // DF CSS variables
-  --#{$prefix}toast-subtle-border-start-width: #{$df-toast-subtle-border-start-width};
-  --#{$prefix}toast-subtle-border-color-alpha: #{$df-toast-subtle-border-color-alpha};
-  --#{$prefix}toast-icon-top: #{$df-toast-insert-icon-top};
-  --#{$prefix}toast-icon-font-weight: #{$df-icon-solid-font-weight};
-  --#{$prefix}toast-icon-padding-start: #{$df-toast-insert-icon-space}; //TODO: brand2023 - remove when removing old branding since new toast depends on fontsize and tokens
-  --#{$prefix}toast-btn-font-weight: #{$df-toast-btn-font-weight};
-  --#{$prefix}toast-btn-close-border-radius: #{$df-toast-btn-close-border-radius};
-  --#{$prefix}toast-btn-close-border-width: #{$df-toast-btn-close-border-width};
-  --#{$prefix}toast-btn-close-padding-x: #{$df-toast-btn-close-padding-x};
-  --#{$prefix}toast-btn-close-padding-y: #{$df-toast-btn-close-padding-y};
-  --#{$prefix}toast-btn-close-margin-x: #{$df-toast-btn-close-margin-x};
-  --#{$prefix}toast-btn-close-size: #{df-button-icononly-size($btn-padding-y-sm)};
-  --#{$prefix}toast-btn-close-icon-size: #{$df-toast-btn-close-icon-size};
-  --#{$prefix}toast-dismissible-padding-end: calc(
-    var(--#{$prefix}toast-btn-close-margin-x) * 2 + var(--#{$prefix}toast-btn-close-size)
-  );
-  --#{$prefix}toast-subtle-box-shadow-opacity: #{$df-toast-subtle-box-shadow-opacity};
-  --#{$prefix}toast-close-box-shadow-opacity: #{$df-toast-close-box-shadow-opacity};
-  --#{$prefix}toast-line-height: #{$df-toast-line-height};
-
-  width: unset;
-  max-width: var(--#{$prefix}toast-max-width);
-  position: relative;
-
-  &.df-toast-dismissible {
-    .toast-body,
-    .toast-header {
-      padding-inline-end: var(--#{$prefix}toast-dismissible-padding-end);
-    }
-
-    .toast-header + .toast-body {
-      padding-inline-end: var(--#{$prefix}toast-padding-x);
-    }
-  }
-
-  .toast-body,
-  .toast-header {
-    .btn-close {
-      --#{$prefix}box-shadow-color: #{$df-toast-box-shadow-color};
-
-      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-        @extend .btn, .btn-outline-neutral, .df-btn-tertiary;
-      } @else {
-        @extend .btn, .btn-link;
-      }
-
-      position: absolute;
-      top: 0;
-
-      @include ltr {
-        right: 0;
-      }
-
-      @include rtl {
-        left: 0;
-      }
-
-      z-index: $stretched-link-z-index + 1;
-      border-radius: var(--#{$prefix}toast-btn-close-border-radius);
-      border-width: var(--#{$prefix}toast-btn-close-border-width);
-      padding: var(--#{$prefix}toast-btn-close-padding-y) var(--#{$prefix}toast-btn-close-padding-x);
-      margin: #{$df-toast-btn-close-margin};
-      width: var(--#{$prefix}toast-btn-close-size);
-      height: var(--#{$prefix}toast-btn-close-size);
-      opacity: 1;
-
-      // override BS
-      background: transparent;
-
-      &:before {
-        content: '';
-        display: block;
-        overflow: hidden;
-        width: var(--#{$prefix}toast-btn-close-icon-size);
-        height: var(--#{$prefix}toast-btn-close-icon-size);
-        background: var(--#{$prefix}toast-color) center;
-        mask-image: #{escape-svg($btn-close-bg)};
-      }
-
-      &:hover {
-        background-color: var(--#{$prefix}btn-hover-bg);
-
-        &:before {
-          background-color: var(--#{$prefix}btn-hover-color);
-        }
-      }
-
-      // To be kept after hover as it has the same specificity
-      &:active {
-        background-color: var(--#{$prefix}btn-active-bg);
-
-        &:before {
-          background-color: var(--#{$prefix}btn-active-color);
-        }
-      }
-
-      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-        &:focus {
-          border-color: transparent;
-          box-shadow: none;
-        }
-        &:focus-visible {
-          box-shadow: var(--#{$prefix}btn-focus-box-shadow);
-        }
-      }
-    }
-
-    .df-btn-tertiary {
-      // Balance the btn-sm padding to preserve the elements alignement and the toast height.
-      &:not(.btn-close) {
-        margin-top: calc(0rem - var(--#{$prefix}btn-padding-y));
-      }
-
-      &:focus-visible {
-        --#{$prefix}box-shadow-color: var(--#{$prefix}toast-color);
-      }
-
-      &:not(:hover) {
-        color: var(--#{$prefix}toast-color);
-      }
-
-      &.df-toast-action {
-        --#{$prefix}btn-icon-margin-end: var(--#{$prefix}spacing-1);
-      }
-    }
-  }
-
-  &.df-toast-subtle {
-    border-inline-start-width: var(--#{$prefix}toast-subtle-border-start-width);
-
-    // Always managed by primary colors (figma)
-    .df-btn-tertiary:not(.btn-close) {
-      &:focus-visible {
-        --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-            'button-text-basic-color-primary-default-border',
-            var(--#{$prefix}primary)
-          )};
-      }
-
-      &:not(:hover) {
-        color: var(--#{$prefix}primary);
-      }
-
-      &:hover {
-        color: #{variable-switch-brand2023(
-            'button-text-basic-color-primary-hovered-foreground',
-            var(--#{$prefix}primary-700)
-          )};
-
-        background-color: #{variable-switch-brand2023(
-            'button-text-basic-color-primary-hovered-background',
-            var(--#{$prefix}primary-100)
-          )};
-
-        border-color: #{variable-switch-brand2023(
-            'button-text-basic-color-primary-hovered-background',
-            var(--#{$prefix}primary-100)
-          )};
-
-        &:focus-visible {
-          --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-              'button-text-basic-color-primary-hovered-border',
-              var(--#{$prefix}primary-700)
-            )};
-        }
-      }
-
-      &:active {
-        color: var(--#{$prefix}primary-800);
-        background-color: var(--#{$prefix}primary-200);
-
-        &:focus-visible {
-          --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-              'button-text-basic-color-primary-active-border',
-              var(--#{$prefix}primary-800)
-            )};
-        }
-      }
-    }
-  }
-
-  .toast-body {
-    line-height: var(--#{$prefix}toast-line-height);
-    padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
-
-    .btn.btn-link {
-      --#{$prefix}btn-font-size: var(--#{$prefix}toast-font-size);
-      --#{$prefix}btn-padding-y: 0;
-      --#{$prefix}btn-padding-x: 0;
-      --#{$prefix}btn-line-height: 1;
-      --#{$prefix}btn-border-radius: 0;
-
-      font-weight: var(--#{$prefix}toast-btn-font-weight);
-
-      &:focus {
-        text-decoration: none;
-      }
-    }
-  }
-
-  span.df-insert-icon {
-    position: absolute;
-    top: var(--#{$prefix}toast-icon-top);
-    font-weight: var(--#{$prefix}toast-icon-font-weight);
-
-    padding-inline-start: var(--#{$prefix}toast-padding-x);
-  }
-
-  &[dfInsertToastIcon] {
-    div:first-of-type {
-      &.toast-body,
-      &.toast-header {
-        @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-          // --#{$prefix}toast-font-size for the size of the icon
-          padding-inline-start: calc(
-            var(--#{$prefix}toast-padding-x) + var(--#{$prefix}toast-font-size) + var(--#{$prefix}spacing-3)
-          );
-        } @else {
-          padding-inline-start: calc(var(--#{$prefix}toast-icon-padding-start) + var(--#{$prefix}toast-padding-x));
-        }
-      }
-    }
-  }
-
-  @each $state, $value in $theme-colors {
-    $toast-bg: shades-css-var($state, 'bg-color');
-    $toast-close-box-shadow-color: shades-rgb-css-var($state, 'bg-color', true);
-    $toast-subtle-close-box-shadow-color: shades-rgb-css-var('primary', 'bg-color');
-    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-      $toast-subtle-close-box-shadow-color: shades-rgb-css-var($state, 'bg-subtle-color', true);
-    }
-    $toast-bg-hover: shades-css-var($state, 'bg-hover-color');
-    $toast-icon-color: shades-css-var-brand2023($state, 'inert-color'); // todo add a icon color ?
-    $toast-text-color: shades-css-var-brand2023(
-      'color-' + $state + '-main-default-foreground',
-      $state,
-      'bg-color',
-      true
-    );
-    $toast-btn-close-color: map.get($shade-colors-text, $state + '-500');
-    $toast-subtle-bg-color: shades-css-var($state, 'bg-subtle-color');
-    $toast-subtle-text-color: shades-css-var-brand2023(
-      'color-inert-neutral-main-foreground',
-      $state,
-      'bg-subtle-color',
-      true
-    );
-    $toast-subtle-btn-close-color: map.get($shade-colors-text, $state + '-100');
-    $toast-subtle-hover-bg-color: shades-css-var($state, 'bg-subtle-hover-color');
-    $toast-subtle-active-bg-color: shades-css-var($state, 'bg-subtle-active-color');
-    $toast-subtle-border-color: shades-rgba-css-var-with-opacity($state, 'border-color');
-    $toast-subtle-border-start-color: shades-css-var-brand2023(
-      'color-' + $state + '-main-default-background',
-      $state,
-      'inert-color'
-    );
-
-    &.toast-#{$state} {
-      // DF CSS Variable
-      --#{$prefix}toast-color: #{$toast-text-color};
-      --#{$prefix}toast-bg: #{$toast-bg};
-      --#{$prefix}toast-border-color: #{$toast-bg};
-      --#{$prefix}toast-header-bg: #{$toast-bg};
-      --#{$prefix}toast-header-color: #{$toast-text-color};
-      --#{$prefix}toast-icon-color: #{$toast-icon-color};
-      --#{$prefix}toast-btn-link-focus-box-shadow: #{0
-        0
-        0
-        #{$btn-focus-width}
-        shades-rgba-css-var-with-opacity($state, 'bg-color')} !important;
-      --#{$prefix}inner-box-shadow-color: var(--#{$prefix}toast-bg); // To propagate to other
-
-      .toast-body {
-        .btn.btn-link {
-          // todo fix the focus link color
-          --#{$prefix}btn-color: #{$toast-text-color};
-          --#{$prefix}btn-hover-color: var(--#{$prefix}black);
-          --#{$prefix}btn-bg: #{$toast-bg};
-          --#{$prefix}btn-link-focus-box-shadow: var(--#{$prefix}toast-btn-link-focus-box-shadow);
-          --#{$prefix}btn-active-color: #{$toast-text-color};
-          --#{$prefix}btn-active-bg: #{$toast-bg-hover};
-          --#{$prefix}btn-focus-only-color: #{$toast-text-color};
-          --#{$prefix}btn-focus-only-bg: transparent;
-          --#{$prefix}btn-focus-only-border-color: transparent;
-          --#{$prefix}box-shadow-color: #{rgba(
-              $toast-close-box-shadow-color,
-              var(--#{$prefix}toast-close-box-shadow-opacity)
-            )} !important;
-          @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-            --#{$prefix}inner-box-shadow-color: var(--#{$prefix}toast-bg); // To propagate to other
-          }
-        }
-      }
-
-      // Override toast light
-      &.df-toast-subtle {
-        // DO rename vars as it is for toast-subtle ....
-        --#{$prefix}toast-subtle-border-start-color: #{$toast-subtle-border-start-color};
-        --#{$prefix}border-color-opacity: var(--#{$prefix}toast-subtle-border-color-alpha);
-        --#{$prefix}toast-bg: #{$toast-subtle-bg-color};
-        --#{$prefix}toast-color: #{$toast-subtle-text-color};
-        --#{$prefix}toast-border-color: #{$toast-subtle-border-color};
-        --#{$prefix}toast-icon-color: #{$toast-subtle-border-start-color};
-        --#{$prefix}toast-btn-link-focus-box-shadow: #{0
-          0
-          0
-          #{$btn-focus-width}
-          shades-rgba-css-var-with-opacity('primary', 'bg-subtle-color')}; // TODO check if  default box-shadow
-
-        @include ltr {
-          border-left-color: var(--#{$prefix}toast-subtle-border-start-color);
-        }
-
-        @include rtl {
-          border-right-color: var(--#{$prefix}toast-subtle-border-start-color);
-        }
-
-        span.df-insert-icon {
-          color: var(--#{$prefix}toast-icon-color);
-        }
-
-        .toast-body {
-          .btn.btn-link {
-            --#{$prefix}btn-color: var(--#{$prefix}link-color);
-            --#{$prefix}btn-hover-color: #000;
-            --#{$prefix}btn-bg: #{$toast-subtle-bg-color};
-            --#{$prefix}btn-active-color: var(--#{$prefix}link-color);
-            --#{$prefix}btn-hover-bg: #{$toast-subtle-hover-bg-color};
-            --#{$prefix}btn-active-bg: #{$toast-subtle-active-bg-color};
-            --#{$prefix}btn-focus-only-color: #{var(--#{$prefix}link-color)};
-            --#{$prefix}btn-focus-only-bg: transparent;
-            --#{$prefix}btn-focus-only-border-color: transparent;
-            // TODO could be use the btn-link-color here at some point?
-            --#{$prefix}box-shadow-color: #{rgba(
-                var(--#{$prefix}primary-500-rgb),
-                var(--#{$prefix}toast-subtle-box-shadow-opacity)
-              )} !important;
-            @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-              --#{$prefix}inner-box-shadow-color: var(--#{$prefix}toast-bg); // To propagate to other
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/styles/scss/components/toast/_toast.variables.scss

@@ -1,18 +0,0 @@
-@use 'sass:color';
-
-$df-toast-insert-icon-space: 1.5rem !default;
-$df-toast-insert-icon-top: 0.75rem !default;
-$df-toast-subtle-border-start-width: $df-alert-size-default-border-start-width !default;
-$df-toast-btn-font-weight: $font-weight-normal !default;
-$df-toast-btn-close-border-radius: $df-btn-icononly-border-radius !default;
-$df-toast-btn-close-border-width: $df-btn-icononly-border-width !default;
-$df-toast-btn-close-padding-x: $df-btn-icononly-padding-x !default;
-$df-toast-btn-close-padding-y: $df-btn-icononly-padding-y !default;
-$df-toast-btn-close-margin-x: 0.5rem !default;
-$df-toast-btn-close-margin: calc(var(--#{$prefix}toast-padding-y) - 0.3em) var(--#{$prefix}toast-btn-close-margin-x) !default;
-$df-toast-btn-close-icon-size: 15px !default;
-$df-toast-subtle-border-color-alpha: 0.4 !default;
-$df-toast-subtle-box-shadow-opacity: 0.25 !default;
-$df-toast-close-box-shadow-opacity: 0.25 !default;
-$df-toast-box-shadow-color: $gray-900 !default;
-$df-toast-line-height: 1.3125rem !default;