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

package/styles/scss/components/accordion/_accordion.scss

@@ -1,241 +0,0 @@
-@use 'sass:meta';
-
-.accordion {
-  --#{$prefix}accordion-button-hover-bg: #{$df-accordion-button-hover-bg};
-  --#{$prefix}accordion-button-reverse-margin-end: #{$df-accordion-button-reverse-margin-end};
-  --#{$prefix}accordion-link-hover-color: #{$df-accordion-link-hover-color};
-  --#{$prefix}accordion-disabled-bg-color: #{$df-accordion-disabled-bg-color};
-  --#{$prefix}accordion-disabled-color: #{$df-accordion-disabled-color};
-  --#{$prefix}accordion-disabled-opacity: #{$df-accordion-disabled-opacity};
-  --#{$prefix}accordion-disabled-cursor: #{$df-accordion-disabled-cursor};
-  --#{$prefix}accordion-title-number-color: #{$df-accordion-title-number-color};
-  --#{$prefix}accordion-icon-width: #{$accordion-icon-width};
-  --#{$prefix}accordion-button-padding-y: #{$accordion-button-padding-y};
-  --#{$prefix}accordion-button-padding-x: #{$accordion-button-padding-x};
-  --#{$prefix}accordion-border-radius-sm: #{$df-accordion-border-radius-sm};
-  --#{$prefix}accordion-border-radius: #{$df-accordion-border-radius};
-  --#{$prefix}accordion-border-radius-lg: #{$df-accordion-border-radius-lg};
-  --#{$prefix}accordion-button-font-weight: #{$df-accordion-button-font-weight};
-  --#{$prefix}accordion-button-hover-icon: #{escape-svg($df-accordion-button-hover-icon)};
-  --#{$prefix}accordion-button-disabled-icon: #{escape-svg($df-accordion-button-disabled-icon)};
-  --#{$prefix}accordion-subtitle-font-weight: #{$df-accordion-subtitle-font-weight};
-  --#{$prefix}accordion-radio-selected-bg-color: #{$df-accordion-radio-selected-bg-color};
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    --#{$prefix}box-shadow-color: var(--#{$prefix}accordion-active-color);
-  }
-
-  .accordion-button {
-    font-weight: var(--#{$prefix}accordion-button-font-weight);
-
-    .df-subtitle {
-      font-weight: var(--#{$prefix}accordion-subtitle-font-weight);
-    }
-
-    &:not(.collapsed):not(:focus) {
-      box-shadow: none;
-    }
-
-    &:not([aria-disabled='true']):not(.disabled):not([disabled]) {
-      &:hover {
-        --#{$prefix}inner-box-shadow-color: var(--#{$prefix}accordion-button-hover-bg);
-        --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
-        background-color: var(--#{$prefix}accordion-button-hover-bg);
-        color: var(--#{$prefix}accordion-link-hover-color);
-
-        &::after {
-          background-image: var(--#{$prefix}accordion-button-hover-icon);
-        }
-      }
-    }
-
-    &[aria-disabled='true'],
-    &.disabled,
-    &[disabled] {
-      color: var(--#{$prefix}accordion-disabled-color);
-      background-color: var(--#{$prefix}accordion-disabled-bg-color);
-      opacity: var(--#{$prefix}accordion-disabled-opacity);
-      cursor: var(--#{$prefix}accordion-disabled-cursor);
-
-      .df-subtitle {
-        color: var(--#{$prefix}accordion-disabled-color);
-      }
-
-      .df-accordion-number {
-        color: var(--#{$prefix}accordion-disabled-color);
-      }
-
-      &::after {
-        background-image: var(--#{$prefix}accordion-button-disabled-icon);
-      }
-    }
-
-    .df-accordion-number {
-      color: var(--#{$prefix}accordion-title-number-color);
-    }
-
-    &:focus {
-      box-shadow: none;
-    }
-    &:focus-visible {
-      box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
-    }
-  }
-
-  // Reverse accordion
-  &.df-accordion-reverse {
-    .accordion-button {
-      &::after {
-        content: none;
-      }
-
-      &::before {
-        flex-shrink: 0;
-        width: var(--#{$prefix}accordion-icon-width);
-        height: var(--#{$prefix}accordion-icon-width);
-        margin-inline-end: var(--#{$prefix}accordion-button-reverse-margin-end);
-        content: '';
-        background-image: escape-svg($accordion-button-icon);
-        background-repeat: no-repeat;
-        background-size: var(--#{$prefix}accordion-icon-width);
-        @include transition($accordion-icon-transition);
-      }
-
-      &:not(.collapsed) {
-        &::before {
-          background-image: escape-svg($accordion-button-active-icon);
-          transform: $accordion-icon-transform;
-        }
-      }
-
-      &[aria-disabled='true'],
-      &.disabled,
-      &[disabled] {
-        &::before {
-          background-image: var(--#{$prefix}accordion-button-disabled-icon);
-        }
-      }
-    }
-  }
-
-  // Accordion with a separator
-  &.df-accordion-withsep {
-    .accordion-button {
-      &:not(.collapsed):not(:focus) {
-        box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color);
-      }
-    }
-  }
-
-  // Accordion with radio buttons
-  &.df-accordion-radio {
-    .accordion-item:last-of-type {
-      > .accordion-header.collapsed > .accordion-button {
-        @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
-      }
-    }
-
-    // setting the cursor to pointer only if clickable
-    .accordion-header.collapsed {
-      .accordion-button:not(.disabled):not([disabled]) {
-        &:hover,
-        & *:hover {
-          cursor: pointer;
-        }
-      }
-
-      .accordion-button.disabled,
-      .accordion-button.disabled[disabled] {
-        &:hover,
-        & *:hover {
-          cursor: not-allowed;
-        }
-      }
-    }
-
-    .accordion-button {
-      &:has(input[type='radio']:checked) {
-        background-color: var(--#{$prefix}accordion-radio-selected-bg-color);
-        --#{$prefix}inner-box-shadow-color: var(--#{$prefix}accordion-radio-selected-bg-color);
-        --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
-      }
-
-      &:focus-within,
-      &:not(.collapsed):not(:focus):focus-within {
-        //need to override the default style for &:not(.collapsed):not(:focus)
-        box-shadow: var(--df-accordion-btn-focus-box-shadow);
-      }
-
-      &:after {
-        content: none;
-      }
-    }
-
-    input:focus {
-      box-shadow: none;
-    }
-  }
-
-  @each $extension, $ratio in $df-size-ratios {
-    $icon-with: calc(#{$ratio} * var(--#{$prefix}accordion-icon-width));
-    &.df-accordion-#{$extension} {
-      .accordion-button {
-        padding: calc(#{$ratio} * var(--#{$prefix}accordion-button-padding-y))
-          calc(#{$ratio} * var(--#{$prefix}accordion-button-padding-x));
-        font-size: get-sizing-brand2023($extension, $ratio);
-
-        &::after {
-          width: $icon-with;
-          height: $icon-with;
-          background-size: $icon-with;
-        }
-      }
-
-      .accordion-body {
-        font-size: get-sizing-brand2023($extension, $ratio, $font-size-base, true);
-      }
-
-      &.df-accordion-reverse {
-        .accordion-button {
-          &::before {
-            width: $icon-with;
-            height: $icon-with;
-            background-size: $icon-with;
-          }
-        }
-      }
-
-      &.df-accordion-radio {
-        .accordion-item:last-of-type {
-          > .accordion-header.collapsed > .accordion-button {
-            @include border-bottom-radius(var(--#{$prefix}accordion-border-radius-#{$extension}));
-          }
-        }
-      }
-
-      .accordion-item {
-        &:first-of-type {
-          @include border-top-radius(var(--#{$prefix}accordion-border-radius-#{$extension}));
-
-          .accordion-button {
-            @include border-top-radius(var(--#{$prefix}accordion-border-radius-#{$extension}));
-          }
-        }
-
-        // Only set a border-radius on the last item if the accordion is collapsed
-        &:last-of-type {
-          @include border-bottom-radius(var(--#{$prefix}accordion-border-radius-#{$extension}));
-
-          > .accordion-header .accordion-button {
-            &.collapsed {
-              @include border-bottom-radius(var(--#{$prefix}accordion-border-radius-#{$extension}));
-            }
-          }
-
-          > .accordion-collapse {
-            @include border-bottom-radius(var(--#{$prefix}accordion-border-radius-#{$extension}));
-          }
-        }
-      }
-    }
-  }
-}

package/styles/scss/components/accordion/_accordion.variables.scss

@@ -1,19 +0,0 @@
-$df-accordion-button-hover-bg: $df-hover-bg-color !default;
-$df-accordion-button-reverse-margin-end: 0.5rem !default;
-$df-accordion-link-hover-color: $body-color !default;
-$df-accordion-disabled-bg-color: var(--#{$prefix}disabled-bg-color) !default;
-$df-accordion-disabled-color: var(--#{$prefix}disabled-color) !default;
-$df-accordion-disabled-opacity: var(--#{$prefix}disabled-opacity) !default;
-$df-accordion-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
-$df-accordion-title-number-color: $gray-600 !default;
-$df-accordion-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
-$df-accordion-border-radius: var(--#{$prefix}border-radius) !default;
-$df-accordion-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
-$df-accordion-button-font-weight: $font-weight-normal !default;
-$df-accordion-subtitle-font-weight: $font-weight-normal !default;
-$df-accordion-button-hover-icon-color: $accordion-icon-color !default; // cannot be css var as used in background-image
-$df-accordion-button-hover-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$df-accordion-button-hover-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
-$df-accordion-button-disabled-icon-color: $accordion-icon-color !default; // cannot be css var as used in background-image
-$df-accordion-button-disabled-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$df-accordion-button-disabled-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
-
-$df-accordion-radio-selected-bg-color: var(--#{$prefix}primary-200) !default;

package/styles/scss/components/alert/_alert.scss

@@ -1,236 +0,0 @@
-@use 'sass:meta';
-
-.alert {
-  --#{$prefix}alert-color: #{$df-alert-global-color};
-  --#{$prefix}alert-border-start-width: #{$df-alert-size-default-border-start-width};
-  --#{$prefix}alert-icon-margin-start: #{$df-alert-size-default-icon-margin-start};
-  --#{$prefix}alert-icon-font-weight: #{$df-icon-solid-font-weight};
-  --#{$prefix}alert-icon-padding-start: #{$df-alert-size-default-insert-alert-icon};
-  --#{$prefix}alert-btn-close-padding-y: calc(#{$df-alert-close-icon-ratio} * var(--#{$prefix}alert-padding-y));
-
-  --#{$prefix}page-alert-top: var(--#{$prefix}navbar-height);
-  --#{$prefix}page-alert-width: #{$df-page-alert-width};
-  --#{$prefix}page-alert-border-width: #{$df-page-alert-border-width};
-  --#{$prefix}page-alert-border-highlight-color-alpha: #{$df-page-alert-border-highlight-color-alpha};
-  --#{$prefix}page-alert-position-start: #{$df-page-alert-position-start};
-  --#{$prefix}page-alert-zindex: #{$df-page-alert-zindex};
-
-  --#{$prefix}card-alert-border-width: #{$df-card-alert-border-width};
-  --#{$prefix}card-alert-border-radius: #{$df-card-alert-border-radius};
-
-  --#{$prefix}alert-collapse-display: #{$df-alert-collapse-display};
-  --#{$prefix}alert-collapse-justify-content: #{$df-alert-collapse-justify-content};
-  --#{$prefix}alert-collapse-link-hover-bg: #{$df-alert-collapse-link-hover-bg};
-
-  --#{$prefix}alert-collapse-icon-margin-start: #{$df-alert-collapse-icon-margin-start};
-  --#{$prefix}alert-font-size: #{$font-size-base};
-
-  color: var(--#{$prefix}alert-color);
-  background-color: var(--#{$prefix}alert-bg-color);
-  border-color: var(--#{$prefix}alert-border-color); // to allow tip border-color
-  font-size: var(--#{$prefix}alert-font-size);
-
-  .df-insert-icon {
-    color: var(--#{$prefix}alert-icon-color);
-  }
-
-  &:not(.df-card-alert):not(.df-page-alert) {
-    @include ltr {
-      border-left-width: var(--#{$prefix}alert-border-start-width);
-      border-left-color: var(--#{$prefix}alert-border-start-color);
-    }
-    @include rtl {
-      border-right-width: var(--#{$prefix}alert-border-start-width);
-      border-right-color: var(--#{$prefix}alert-border-start-color);
-    }
-  }
-
-  // Alert collapsible
-  hr {
-    border-top-color: var(--#{$prefix}alert-border-color);
-    opacity: 1;
-  }
-
-  // Alert icon
-  span.df-insert-icon {
-    position: absolute;
-    font-weight: var(--#{$prefix}alert-icon-font-weight);
-    @include ltr {
-      margin-left: var(--#{$prefix}alert-icon-margin-start);
-    }
-    @include rtl {
-      margin-right: var(--#{$prefix}alert-icon-margin-start);
-    }
-  }
-  // Flag Angular SASS/CSS
-  // This will no longer be needed in AgnosUI
-  &[dfInsertAlertIcon] {
-    @include ltr {
-      padding-left: var(--#{$prefix}alert-icon-padding-start);
-    }
-    @include rtl {
-      padding-right: var(--#{$prefix}alert-icon-padding-start);
-    }
-
-    .df-alert-collapsed-text {
-      margin-block-start: var(--#{$prefix}spacing-5);
-      margin-inline-start: var(--#{$prefix}alert-icon-margin-start);
-    }
-  }
-
-  // For alert dismissible
-  .btn-close {
-    padding-top: var(--#{$prefix}alert-btn-close-padding-y);
-    padding-bottom: var(--#{$prefix}alert-btn-close-padding-y);
-
-    &:focus {
-      box-shadow: none;
-    }
-    &:focus-visible {
-      box-shadow: var(--#{$prefix}btn-close-focus-shadow);
-    }
-  }
-
-  // Variants of the alerts
-  @each $state, $value in $theme-colors {
-    &.alert-#{$state} {
-      --#{$prefix}border-color-opacity: #{$df-alert-border-color-opacity};
-      --#{$prefix}alert-color: #{shades-css-var($state, 'bg-subtle-color', true)};
-      --#{$prefix}alert-bg-color: #{shades-css-var($state, 'bg-subtle-color')};
-      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-        --#{$prefix}alert-border-color: #{shades-css-var($state, 'bg-subtle-color')};
-        hr {
-          border-top-color: shades-css-var($state, 'separator-color');
-        }
-      } @else {
-        --#{$prefix}alert-border-color: #{shades-rgba-css-var-with-opacity($state, 'border-color')};
-      }
-      --#{$prefix}alert-border-start-color: #{shades-css-var-brand2023(
-          'color-' + $state + '-alt-default-border',
-          $state,
-          'inert-color'
-        )};
-      --#{$prefix}alert-icon-color: #{shades-css-var($state, 'inert-color')};
-    }
-  }
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    &.alert-warning {
-      --#{$prefix}alert-icon-color: var(--#{$prefix}color-icon-warning-foreground);
-    }
-  }
-  &.alert-tip {
-    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-      hr {
-        border-top-color: shades-css-var('mystery', 'separator-color');
-      }
-    } @else {
-      --#{$prefix}alert-color: #{$df-alert-tip-color};
-      --#{$prefix}alert-bg-color: #{$df-alert-tip-background};
-      --#{$prefix}alert-border-color: #{$df-alert-tip-border-color};
-      --#{$prefix}alert-border-start-color: #{$df-alert-tip-border-start-color};
-      --#{$prefix}alert-icon-font-weight: #{$df-icon-light-font-weight};
-      --#{$prefix}alert-icon-margin-start: #{$df-alert-tip-size-default-icon-margin-start};
-      --#{$prefix}alert-icon-color: #{$df-alert-tip-icon-color};
-    }
-  }
-
-  // Alerts sizes
-  &.df-alert-sm {
-    --#{$prefix}alert-icon-margin-start: #{$df-alert-size-sm-icon-margin-start};
-    --#{$prefix}alert-icon-padding-start: #{$df-alert-size-sm-insert-alert-icon};
-    --#{$prefix}alert-font-size: #{$df-alert-size-sm-font-size};
-    --#{$prefix}alert-padding-y: #{$df-alert-size-sm-padding-y}; // override bootstrap
-    --#{$prefix}alert-padding-x: #{$df-alert-size-sm-padding-x}; // override bootstrap
-    --#{$prefix}alert-btn-close-padding-y: calc(#{$df-alert-close-icon-ratio} * var(--#{$prefix}alert-padding-y));
-
-    &.alert-tip {
-      --#{$prefix}alert-icon-margin-start: #{$df-alert-tip-size-sm-icon-margin-start};
-    }
-  }
-  &.df-alert-lg {
-    --#{$prefix}alert-icon-margin-start: #{$df-alert-size-lg-icon-margin-start};
-    --#{$prefix}alert-icon-padding-start: #{$df-alert-size-lg-insert-alert-icon};
-    --#{$prefix}alert-font-size: #{$df-alert-size-lg-font-size};
-    --#{$prefix}alert-padding-y: #{$df-alert-size-lg-padding-y}; // override bootstrap
-    --#{$prefix}alert-padding-x: #{$df-alert-size-lg-padding-x}; // override bootstrap
-    --#{$prefix}alert-btn-close-padding-y: calc(#{$df-alert-close-icon-ratio} * var(--#{$prefix}alert-padding-y));
-
-    &.alert-tip {
-      --#{$prefix}alert-icon-margin-start: #{$df-alert-tip-size-lg-icon-margin-start};
-    }
-  }
-
-  // For page alerts
-  &.df-page-alert {
-    --#{$prefix}alert-padding-x: #{$df-page-alert-padding-start};
-    --#{$prefix}alert-icon-padding-start: #{$df-page-alert-padding-start};
-    position: fixed;
-    top: var(--#{$prefix}page-alert-top);
-    width: var(--#{$prefix}page-alert-width);
-    z-index: var(--#{$prefix}page-alert-zindex);
-    border-width: var(--#{$prefix}page-alert-border-width);
-
-    @include ltr {
-      left: var(--#{$prefix}page-alert-position-start);
-    }
-    @include rtl {
-      right: var(--#{$prefix}page-alert-position-start);
-    }
-  }
-
-  // For card alerts
-  &.df-card-alert {
-    border-width: var(--#{$prefix}card-alert-border-width);
-    border-radius: var(--#{$prefix}card-alert-border-radius);
-  }
-
-  &.df-page-alert,
-  &.df-card-alert {
-    border-bottom-color: var(--#{$prefix}alert-border-bottom-color);
-    @each $state, $value in $theme-colors {
-      &.alert-#{$state} {
-        --#{$prefix}alert-border-bottom-color: #{shades-css-var-brand2023(
-            'color-#{$state}-alt-default-border',
-            $state,
-            'border-color'
-          )};
-      }
-    }
-    @if not meta.variable-exists($name: 'df-enableBranding2023') or not $df-enableBranding2023 {
-      &.alert-tip {
-        --#{$prefix}alert-border-bottom-color: #{$df-alert-tip-border-start-color};
-      }
-    }
-  }
-
-  // For collapsible alerts content
-  .df-alert-collapse-main-text {
-    display: var(--#{$prefix}alert-collapse-display);
-    justify-content: var(--#{$prefix}alert-collapse-justify-content);
-
-    // @deprecated - will be removed in version 21
-    a.df-collapse.df-alert-collapse-icon {
-      @include ltr {
-        margin-left: var(--#{$prefix}alert-collapse-icon-margin-start); // same for all size ?
-      }
-      @include rtl {
-        margin-right: var(--#{$prefix}alert-collapse-icon-margin-start);
-      }
-      &:hover:not([aria-disabled='true']) {
-        background-color: var(--#{$prefix}alert-collapse-link-hover-bg);
-      }
-    }
-
-    button.df-collapse.df-alert-collapse-icon {
-      @include ltr {
-        margin-left: var(--#{$prefix}alert-collapse-icon-margin-start); // same for all size ?
-      }
-      @include rtl {
-        margin-right: var(--#{$prefix}alert-collapse-icon-margin-start);
-      }
-      &:hover:not([aria-disabled='true']) {
-        background-color: var(--#{$prefix}alert-collapse-link-hover-bg);
-      }
-    }
-  }
-}

package/styles/scss/components/alert/_alert.variables.scss

@@ -1,56 +0,0 @@
-@use 'sass:map';
-
-// mix($color, $white, x%) is equivalent to transparentize($color, x%) but it makes the color opaque
-$df-alert-global-color: var(--#{$prefix}gray-900) !default;
-// TODO should we create a new mapping for tip ? (like a white mapping) or maybe reuse a light mapping ?
-$df-alert-tip-background: var(--#{$prefix}white) !default;
-$df-alert-tip-color: $df-alert-global-color !default;
-$df-alert-tip-border-color: var(--#{$prefix}gray-400) !default;
-$df-alert-tip-border-start-color: var(--#{$prefix}gray-700) !default; // should we link to the CSS var gray-700 ?
-$df-alert-tip-icon-color: var(--#{$prefix}alert-color) !default;
-
-// For page alert
-$df-page-alert-zindex: $zindex-fixed + 8 !default; // on top of all fixed elements but below modal and navbar
-$df-page-alert-width: 100% !default;
-$df-page-alert-padding-start: 12% !default;
-$df-page-alert-border-width: 0px 0px 2 * $border-width 0px !default;
-$df-page-alert-position-start: 0px !default;
-$df-page-alert-border-highlight-color-alpha: 1 !default;
-
-// For collapsible alert
-$df-alert-collapse-display: flex !default;
-$df-alert-collapse-justify-content: space-between !default;
-$df-alert-collapse-link-hover-bg: inherit !default;
-
-// For card alert
-$df-card-alert-border-width: $df-page-alert-border-width !default;
-$df-card-alert-border-radius: 0 !default;
-
-// Alert
-$df-alert-icon-font-weight: $df-icon-solid-font-weight !default;
-$df-alert-close-icon-ratio: 1.5 !default;
-$df-alert-border-color-opacity: 0.4 !default;
-
-// Size default
-$df-alert-size-default-insert-alert-icon: 2.5rem !default;
-$df-alert-size-default-font-size: 1rem !default;
-$df-alert-size-default-border-start-width: 3px !default;
-$df-alert-size-default-icon-margin-start: -1.558rem !default;
-$df-alert-tip-size-default-icon-margin-start: -1.40175rem !default;
-$df-alert-collapse-icon-margin-start: 1rem !default;
-
-// Size sm
-$df-alert-size-sm-insert-alert-icon: $df-alert-size-default-insert-alert-icon * map.get($df-size-ratios, 'sm') !default;
-$df-alert-size-sm-font-size: $df-alert-size-default-font-size * map.get($df-size-ratios, 'sm') !default;
-$df-alert-size-sm-padding-y: $alert-padding-y * map.get($df-size-ratios, 'sm') !default;
-$df-alert-size-sm-padding-x: $alert-padding-x * map.get($df-size-ratios, 'sm') !default;
-$df-alert-size-sm-icon-margin-start: $df-alert-size-default-icon-margin-start * map.get($df-size-ratios, 'sm') !default;
-$df-alert-tip-size-sm-icon-margin-start: $df-alert-tip-size-default-icon-margin-start * map.get($df-size-ratios, 'sm') !default;
-
-// Size lg
-$df-alert-size-lg-insert-alert-icon: $df-alert-size-default-insert-alert-icon * map.get($df-size-ratios, 'lg') !default;
-$df-alert-size-lg-font-size: $df-alert-size-default-font-size * map.get($df-size-ratios, 'lg') !default;
-$df-alert-size-lg-padding-y: $alert-padding-y * map.get($df-size-ratios, 'lg') !default;
-$df-alert-size-lg-padding-x: $alert-padding-x * map.get($df-size-ratios, 'lg') !default;
-$df-alert-size-lg-icon-margin-start: $df-alert-size-default-icon-margin-start * map.get($df-size-ratios, 'lg') !default;
-$df-alert-tip-size-lg-icon-margin-start: $df-alert-tip-size-default-icon-margin-start * map.get($df-size-ratios, 'lg') !default;

package/styles/scss/components/badge/_badge.mixins.scss

@@ -1,23 +0,0 @@
-@use 'sass:meta';
-
-@mixin df-disable-badge($color, $bg-color, $border-color) {
-  cursor: var(--#{$prefix}disabled-cursor);
-  color: $color !important;
-  background-color: $bg-color !important;
-  border-color: $border-color;
-  &:focus-visible,
-  &:focus,
-  &:focus-within {
-    box-shadow: none;
-  }
-}
-
-@mixin df-badge-sizing($height, $font-size, $padding-inline, $close-btn-width) {
-  font-size: $font-size;
-  height: $height;
-  --#{$prefix}badge-padding-x: #{$padding-inline};
-
-  button {
-    width: $close-btn-width;
-  }
-}