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

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

@@ -1,483 +0,0 @@
-@use 'sass:meta';
-@use 'sass:map';
-@import 'badge.mixins';
-
-/* stylelint-disable-next-line scss/dollar-variable-pattern, scss/dollar-variable-default */
-$isBrand2023: meta.variable-exists(
-    $name: 'df-enableBranding2023'
-  )
-  and $df-enableBranding2023;
-
-$df-solidMappedColors: () !default;
-$df-lightMappedColors: () !default;
-@each $color, $value in $utilities-bg-colors {
-  $df-solidMappedColors: map.set($df-solidMappedColors, $color, $color);
-  @if $isBrand2023 {
-    $df-lightMappedColors: map.set($df-lightMappedColors, $color, $color + '-soft');
-  } @else {
-    $df-lightMappedColors: map.set($df-lightMappedColors, $color, $color + '-light');
-  }
-}
-
-@if $isBrand2023 {
-  /* stylelint-disable-next-line scss/dollar-variable-default */
-  $df-solidMappedColors: map.set($df-solidMappedColors, 'white', 'neutral-alt');
-
-  /* stylelint-disable-next-line scss/dollar-variable-default */
-  $df-solidMappedColors: map.set($df-solidMappedColors, 'light', 'neutral');
-
-  /* stylelint-disable-next-line scss/dollar-variable-default */
-  $df-lightMappedColors: map.set($df-lightMappedColors, 'light', 'light');
-}
-
-%bg-badge-common {
-  @if $isBrand2023 {
-    background-color: var(--#{$prefix}badge-background-color) !important;
-  }
-
-  &:not(.rounded-pill):not(.df-badge-dot) {
-    &:not(.df-closable) {
-      &:hover:not([disabled]):not(.disabled) {
-        color: var(--#{$prefix}badge-hover-color);
-        background-color: var(--#{$prefix}badge-hover-background-color) !important;
-      }
-
-      &:active:not([disabled]):not(.disabled) {
-        color: var(--#{$prefix}badge-active-color);
-        background-color: var(--#{$prefix}badge-active-background-color) !important;
-      }
-    }
-  }
-
-  &.df-closable {
-    button:hover,
-    span[role='button']:hover {
-      color: var(--#{$prefix}badge-hover-color);
-      background-color: var(--#{$prefix}badge-hover-background-color);
-    }
-
-    &:not(.disabled) {
-      button:active,
-      span[role='button']:active {
-        color: var(--#{$prefix}badge-active-color);
-        background-color: var(--#{$prefix}badge-active-background-color);
-      }
-    }
-  }
-
-  $disabled-border-color: #{variable-switch-brand2023('disabled-border-color', var(--#{$prefix}disabled-color))};
-  &[disabled],
-  &.disabled,
-  &:has([disabled]),
-  &:has(.disabled) {
-    @include df-disable-badge(
-      var(--#{$prefix}disabled-color),
-      var(--#{$prefix}disabled-bg-color),
-      $disabled-border-color
-    );
-
-    & > *:hover {
-      @include df-disable-badge(
-        var(--#{$prefix}disabled-color),
-        var(--#{$prefix}disabled-bg-color),
-        $disabled-border-color
-      );
-    }
-  }
-
-  &.df-badge-dot::before {
-    background-color: var(--#{$prefix}badge-dot-background-color);
-  }
-}
-
-.badge {
-  --#{$prefix}badge-focus-box-shadow: #{$df-badge-focus-box-shadow};
-  --#{$prefix}badge-text-transform: #{$df-badge-text-transform};
-  --#{$prefix}badge-icon-margin-start: #{$df-badge-icon-margin-start};
-  --#{$prefix}badge-icon-margin-end: #{$df-badge-icon-margin-end};
-  --#{$prefix}badge-dot-font-size: #{$df-badge-dot-font-size};
-  --#{$prefix}badge-dot-margin-end: #{$df-badge-dot-margin-end};
-  --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-      'badge-solid-color-focus-main-border',
-      #{$df-badge-box-shadow-color}
-    )};
-  --#{$prefix}badge-inner-elements-focus-box-shadow: #{$df-badge-inner-elements-focus-box-shadow};
-  // override
-  text-transform: var(--#{$prefix}badge-text-transform);
-  display: inline-flex;
-  align-items: center;
-
-  // not interactive badges
-  &.rounded-pill,
-  &.df-badge-dot {
-    cursor: text;
-  }
-
-  // interactive badges
-  &:not(.rounded-pill):not(.df-badge-dot) {
-    cursor: pointer;
-
-    &[disabled],
-    &.disabled,
-    &:has([disabled]),
-    &:has(.disabled) {
-      cursor: var(--#{$prefix}disabled-cursor);
-    }
-  }
-
-  &:focus-visible,
-  &.focus {
-    outline: $df-badge-button-focus-outline;
-    box-shadow: var(--#{$prefix}badge-focus-box-shadow);
-  }
-
-  .df-badge-icon {
-    margin-inline-start: var(--#{$prefix}badge-icon-margin-start);
-    margin-inline-end: var(--#{$prefix}badge-icon-margin-end);
-  }
-
-  &.df-badge-dot {
-    background-color: transparent !important;
-    color: inherit !important;
-
-    &::before {
-      content: '';
-      height: var(--#{$prefix}badge-dot-font-size);
-      width: var(--#{$prefix}badge-dot-font-size);
-      border-radius: 50%;
-      display: inline-block;
-      margin-inline-end: var(--#{$prefix}badge-dot-margin-end);
-    }
-  }
-
-  @each $color, $value in $utilities-bg-colors {
-    $mappedColor: map.get($df-solidMappedColors, $color);
-    @if not meta.variable-exists($name: 'df-enableBranding2023') or not $df-enableBranding2023 or $color != 'light' {
-      &.bg-#{$color} {
-        // in this case we also handle the .badge.bg-light
-        // TODO: Check if the tokens fixes the issue
-        --#{$prefix}body-bg: unset; // need it to fix the focus internal box-shadow color
-        --#{$prefix}badge-color: #{shades-css-var-brand2023(
-            'badge-solid-color-' + #{$mappedColor} + '-default-foreground',
-            $color,
-            'bg-color',
-            true
-          )};
-        --#{$prefix}badge-background-color: var(--#{$prefix}badge-solid-color-#{$mappedColor}-default-background);
-        --#{$prefix}badge-hover-background-color: #{shades-css-var-brand2023(
-            'badge-solid-color-' + #{$mappedColor} + '-hovered-background',
-            $color,
-            'bg-hover-color'
-          )};
-        --#{$prefix}badge-hover-color: #{shades-css-var-brand2023(
-            'badge-solid-color-' + #{$mappedColor} + '-hovered-foreground',
-            $color,
-            'bg-hover-color',
-            true
-          )};
-        --#{$prefix}badge-active-background-color: #{shades-css-var-brand2023(
-            'badge-solid-color-' + #{$mappedColor} + '-pressed-background',
-            $color,
-            'bg-active-color'
-          )};
-        --#{$prefix}badge-active-color: #{shades-css-var-brand2023(
-            'badge-solid-color-' + #{$mappedColor} + '-pressed-foreground',
-            $color,
-            'bg-active-color',
-            true
-          )};
-        --#{$prefix}badge-dot-background-color: #{shades-css-var-brand2023(
-            'badge-solid-color-' + #{$mappedColor} + '-default-background',
-            $color,
-            'bg-color'
-          )};
-        @if $isBrand2023 {
-          --#{$prefix}disabled-color: #{variable-switch-brand2023(
-              'badge-solid-color-disabled-default-foreground',
-              var(--#{$prefix}disabled-color)
-            )};
-          --#{$prefix}disabled-bg-color: var(--#{$prefix}badge-solid-color-disabled-default-background);
-        } @else {
-          --#{$prefix}badge-disabled-color: var(--#{$prefix}disabled-color);
-        }
-
-        @if $color == 'white' {
-          --#{$prefix}box-shadow-color: var(--#{$prefix}badge-solid-color-focus-alt-border);
-        }
-
-        @extend %bg-badge-common;
-      }
-    }
-
-    &.df-badge-outline-#{$color} {
-      --#{$prefix}badge-color: #{shades-css-var-brand2023(
-          'badge-outline-color-' + #{$color} + '-default-foreground',
-          $color,
-          'text-color'
-        )};
-      --#{$prefix}badge-background-color: transparent;
-      --#{$prefix}badge-border-color: #{shades-css-var-brand2023(
-          'badge-outline-color-' + #{$color} + '-default-border',
-          $color,
-          'border-color'
-        )};
-      --#{$prefix}badge-hover-background-color: #{shades-css-var-brand2023(
-          'badge-outline-color-' + #{$color} + '-hovered-background',
-          $color,
-          'bg-hover-alt-color'
-        )};
-      --#{$prefix}badge-hover-color: #{shades-css-var-brand2023(
-          'badge-outline-color-' + #{$color} + '-hovered-foreground',
-          $color,
-          'text-hover-color'
-        )};
-      --#{$prefix}badge-hover-border-color: #{shades-css-var-brand2023(
-          'badge-outline-color-' + #{$color} + '-hovered-border',
-          $color,
-          'border-hover-color'
-        )};
-
-      @if $isBrand2023 {
-        --#{$prefix}badge-active-border-color: var(--#{$prefix}badge-outline-color-#{$mappedColor}-pressed-border);
-        --#{$prefix}badge-active-background-color: var(--#{$prefix}badge-outline-color-#{$color}-pressed-background);
-        --#{$prefix}badge-active-color: var(--#{$prefix}badge-outline-color-#{$color}-pressed-foreground);
-        --#{$prefix}disabled-color: var(--#{$prefix}badge-outline-color-disabled-default-foreground);
-        --#{$prefix}disabled-bg-color: var(--#{$prefix}badge-outline-color-disabled-default-background);
-        --#{$prefix}disabled-border-color: var(--#{$prefix}badge-outline-color-disabled-default-border);
-        --#{$prefix}box-shadow-color: var(--#{$prefix}badge-outline-color-focus-main-border);
-      }
-
-      background-color: var(--#{$prefix}badge-background-color);
-      color: var(--#{$prefix}badge-color);
-      border: var(--#{$prefix}border-width) solid var(--#{$prefix}badge-border-color);
-
-      &:not([disabled]):not(.disabled) {
-        &:has(button) {
-          &:hover:not([disabled]):not(.disabled) {
-            border-color: var(--#{$prefix}badge-hover-border-color);
-          }
-        }
-
-        button,
-        span[role='button'],
-        &[role='button'] {
-          &:hover:not([disabled]):not(.disabled) {
-            color: var(--#{$prefix}badge-hover-color);
-            border-color: var(--#{$prefix}badge-hover-border-color);
-            background-color: var(
-              --#{$prefix}badge-hover-background-color
-            ) !important; // overriding the bg-#{$color} utility background-color
-          }
-
-          @if $isBrand2023 {
-            &:active:not([disabled]):not(.disabled) {
-              color: var(--#{$prefix}badge-active-color);
-              border-color: var(--#{$prefix}badge-active-border-color);
-              background-color: var(--#{$prefix}badge-active-background-color) !important;
-            }
-          }
-        }
-      }
-
-      &[disabled],
-      &.disabled,
-      &:has([disabled]),
-      &:has(.disabled) {
-        @if $isBrand2023 {
-          @include df-disable-badge(
-            var(--#{$prefix}disabled-color),
-            var(--#{$prefix}disabled-bg-color),
-            var(--#{$prefix}disabled-border-color)
-          );
-        } @else {
-          @include df-disable-badge(
-            var(--#{$prefix}disabled-color),
-            var(--#{$prefix}badge-background-color),
-            var(--#{$prefix}disabled-color)
-          );
-        }
-        & > *:hover {
-          cursor: var(--#{$prefix}disabled-cursor);
-        }
-      }
-    }
-
-    $lightClassname: map.get($df-lightMappedColors, $color);
-    &.bg-#{$lightClassname} {
-      --#{$prefix}body-bg: unset; // need it to fix the focus internal box-shadow color
-      --#{$prefix}badge-background-color: var(--#{$prefix}badge-soft-color-#{$mappedColor}-default-background);
-      --#{$prefix}badge-color: #{shades-css-var-brand2023(
-          'badge-soft-color-' + #{$mappedColor} + '-default-foreground',
-          $color,
-          'text-light-color'
-        )};
-      --#{$prefix}badge-hover-background-color: #{shades-css-var-brand2023(
-          'badge-soft-color-' + #{$mappedColor} + '-hovered-background',
-          $color,
-          'bg-light-hover-color'
-        )};
-      --#{$prefix}badge-hover-color: #{shades-css-var-brand2023(
-          'badge-soft-color-' + #{$mappedColor} + '-hovered-foreground',
-          $color,
-          'text-light-hover-color'
-        )};
-      @if $isBrand2023 {
-        --#{$prefix}badge-hover-border-color: var(--#{$prefix}badge-soft-color-#{$mappedColor}-hovered-border);
-      }
-      --#{$prefix}badge-active-background-color: #{shades-css-var-brand2023(
-          'badge-soft-color-' + #{$mappedColor} + '-pressed-background',
-          $color,
-          'bg-light-active-color'
-        )};
-      --#{$prefix}badge-active-color: #{shades-css-var-brand2023(
-          'badge-soft-color-' + #{$mappedColor} + '-pressed-foreground',
-          $color,
-          'bg-light-active-color',
-          true
-        )};
-      @if $isBrand2023 {
-        --#{$prefix}box-shadow-color: var(--#{$prefix}badge-soft-color-focus-main-border);
-        --#{$prefix}badge-active-border-color: var(--#{$prefix}badge-soft-color-#{$color}-pressed-border);
-        --#{$prefix}disabled-color: var(--#{$prefix}badge-soft-color-disabled-default-foreground);
-        --#{$prefix}disabled-bg-color: var(--#{$prefix}badge-soft-color-disabled-default-background);
-        --#{$prefix}disabled-border-color: var(--#{$prefix}badge-soft-color-disabled-default-border);
-      }
-      --#{$prefix}badge-dot-background-color: #{shades-css-var-brand2023(
-          'badge-soft-color-' + #{$mappedColor} + '-default-background',
-          $color,
-          'bg-light-color'
-        )};
-      background-color: #{shades-css-var-brand2023('', $color, 'bg-light-color')};
-
-      @if $isBrand2023 {
-        &:not([disabled]):not(.disabled):not(.df-badge-dot) {
-          --#{$prefix}badge-border-color: var(--#{$prefix}badge-soft-color-#{$mappedColor}-default-border);
-        }
-      }
-
-      border: var(--#{$prefix}border-width) solid var(--#{$prefix}badge-border-color);
-      @extend %bg-badge-common;
-    }
-
-    @if $isBrand2023 {
-      // Additional colors mix (light grey background with colored icon)
-      &.bg-neutral-soft {
-        .df-badge-icon.text-#{$color} {
-          color: var(--#{$prefix}badge-solid-color-#{$color}-default-background) !important;
-        }
-      }
-    }
-  }
-
-  &.df-closable {
-    // badge interactive closable
-    --#{$prefix}badge-interactive-container-padding-y: 0;
-    --#{$prefix}badge-interactive-container-padding-start: 0;
-    --#{$prefix}badge-interactive-container-padding-end: 0;
-    --#{$prefix}badge-interactive-button-start-radius: #{$badge-border-radius};
-    --#{$prefix}badge-interactive-button-padding-end: #{$df-badge-interactive-button-padding-end};
-    --#{$prefix}badge-interactive-close-box-shadow: #{$df-btn-focus-box-shadow};
-    --#{$prefix}badge-interactive-close-end-radius: #{$badge-border-radius};
-    --#{$prefix}badge-interactive-close-padding: #{$df-badge-interactive-close-padding};
-    --#{$prefix}badge-interactive-close-border: #{$df-badge-interactive-close-border};
-    --#{$prefix}badge-interactive-close-outline: #{$df-badge-button-focus-outline};
-    padding-block: var(--#{$prefix}badge-interactive-container-padding-y);
-    padding-inline: var(--#{$prefix}badge-interactive-container-padding-start)
-      var(--#{$prefix}badge-interactive-container-padding-end);
-
-    &:has(button:focus-visible) {
-      outline: var(--#{$prefix}badge-interactive-close-outline);
-      box-shadow: var(--#{$prefix}badge-interactive-close-box-shadow);
-    }
-
-    *:focus-visible,
-    *.focus {
-      outline: var(--#{$prefix}badge-interactive-close-outline);
-      box-shadow: var(--#{$prefix}badge-inner-elements-focus-box-shadow);
-    }
-
-    button {
-      background-color: inherit;
-      color: inherit;
-
-      &:hover {
-        cursor: pointer;
-      }
-
-      border: var(--#{$prefix}badge-interactive-close-border);
-      padding: var(--#{$prefix}badge-interactive-close-padding);
-      border-start-end-radius: var(--#{$prefix}badge-interactive-close-end-radius);
-      border-end-end-radius: var(--#{$prefix}badge-interactive-close-end-radius);
-    }
-
-    &:not(.rounded-pill) {
-      // round-pill does not have internal button as span
-      // add
-      span[role='button'] {
-        // We put the badge padding on the button except for the side that touches the close button
-        padding-block: var(--#{$prefix}badge-padding-y);
-        padding-inline: var(--#{$prefix}badge-padding-x) var(--#{$prefix}badge-interactive-button-padding-end);
-        border-start-start-radius: var(--#{$prefix}badge-interactive-button-start-radius);
-        border-end-start-radius: var(--#{$prefix}badge-interactive-button-start-radius);
-      }
-    }
-
-    &.rounded-pill {
-      --#{$prefix}badge-interactive-close-end-radius: #{$border-radius-pill};
-      --#{$prefix}badge-interactive-container-padding-start: var(--#{$prefix}badge-padding-x);
-    }
-  }
-
-  //sizing
-  @if $isBrand2023 {
-    // TODO: when removing old branding move it to the .df-closable class and merge the padding
-    &,
-    &.df-closable {
-      &.rounded-pill > button {
-        margin-inline-start: var(--#{$prefix}spacing-1);
-      }
-
-      button,
-      [role='button'] {
-        height: 100%;
-        padding: unset;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-    }
-
-    font-weight: var(--#{$prefix}typo-weight-medium);
-
-    @include df-badge-sizing(
-      $df-badge-height,
-      var(--#{$prefix}typo-sizing-xsmall),
-      var(--#{$prefix}spacing-3),
-      $df-badge-close-button-width
-    );
-    &.df-badge-sm {
-      @include df-badge-sizing(
-        $df-badge-height-sm,
-        var(--#{$prefix}typo-sizing-xsmall),
-        var(--#{$prefix}spacing-3),
-        $df-badge-close-button-width
-      );
-    }
-    &.df-badge-lg {
-      @include df-badge-sizing(
-        $df-badge-height-lg,
-        var(--#{$prefix}typo-sizing-small),
-        var(--#{$prefix}spacing-4),
-        $df-badge-close-button-width-lg
-      );
-    }
-    &.df-badge-xl {
-      @include df-badge-sizing(
-        $df-badge-height-xl,
-        var(--#{$prefix}typo-sizing-default),
-        var(--#{$prefix}spacing-5),
-        $df-badge-close-button-width-xl
-      );
-    }
-  }
-}

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

@@ -1,28 +0,0 @@
-// Closable feature
-// close button font-size should not be linked to badge font-size as when we change
-// the badge font size the close button already evolve due to the em unit
-$df-badge-interactive-close-font-size: 0.75em !default;
-$df-badge-interactive-close-border: none !default;
-// We could adjust the padding start and padding-y to make the close button bigger or smaller
-$df-badge-interactive-close-padding: var(--#{$prefix}badge-padding-y) !default;
-// We want to put the same padding as top and bottom between the text the the close button
-$df-badge-interactive-button-padding-end: $badge-padding-y !default;
-
-$df-badge-dot-font-size: 0.8em !default;
-$df-badge-dot-margin-end: 0.38em !default;
-$df-badge-icon-margin-start: -0.17em !default;
-$df-badge-icon-margin-end: 0.3em !default;
-$df-badge-button-focus-outline: var(--#{$prefix}focus-outline) !default;
-$df-badge-focus-box-shadow: $btn-focus-box-shadow !default;
-$df-badge-box-shadow-color: var(--#{$prefix}box-shadow-color) !default;
-
-$df-badge-inner-elements-focus-box-shadow: none !default;
-$df-badge-text-transform: none !default;
-
-$df-badge-height-sm: 1.25rem !default; // 20px
-$df-badge-height: 1.5rem !default; // 24px
-$df-badge-height-lg: 1.875rem !default; // 30px
-$df-badge-height-xl: 2.5rem !default; // 40px
-$df-badge-close-button-width: 1.5rem !default; // 24px
-$df-badge-close-button-width-lg: 1.75rem !default; // 26px
-$df-badge-close-button-width-xl: 2rem !default; // 28px

package/styles/scss/components/brand-color/_brand-color.mixins.scss

@@ -1,42 +0,0 @@
-@use 'sass:color';
-@use 'sass:map';
-@use 'sass:meta';
-
-@mixin df-bg-variant($parent, $color, $colorName) {
-  a#{$parent},
-  button#{$parent} {
-    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-      --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'bg-color', true)};
-      &:focus-visible {
-        background-color: shades-css-var($colorName, 'bg-color') !important;
-      }
-      &:hover {
-        --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'bg-hover-color', true)};
-        background-color: shades-css-var($colorName, 'bg-hover-color') !important;
-      }
-      &:active {
-        --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'bg-active-color', true)};
-        background-color: shades-css-var($colorName, 'bg-active-color') !important;
-      }
-    } @else {
-      &:hover,
-      &:focus-visible {
-        background-color: color.adjust($color, $lightness: -10%) !important;
-      }
-    }
-  }
-}
-
-@mixin df-bg-color-css-var($utility) {
-  @if map.has-key($utility, class) and map.get($utility, class) == 'bg' {
-    $values: map.get($utility, values);
-    @each $color, $value in $values {
-      .bg-#{$color} {
-        .btn,
-        .nav-tabs {
-          --#{$prefix}inner-box-shadow-color: #{$value};
-        }
-      }
-    }
-  }
-}

package/styles/scss/components/brand-color/_brand-color.scss

@@ -1,20 +0,0 @@
-@use 'sass:map';
-
-@import 'brand-color.mixins';
-
-@each $color, $value in $gradients {
-  .bg-#{$color} {
-    background-image: linear-gradient(180deg, map.get($value, 'from'), map.get($value, 'to'));
-  }
-}
-
-// TODO see how we can remove this because it was removed from bootstrap
-// Maybe generate the classes for the others colors see _maps.scss in bootstrap
-// to know what is already generated
-@each $color, $value in $colors {
-  @include df-bg-variant('.bg-#{$color}', $value, $color);
-}
-// We need this mixin to achieve the outline focus in buttons on different backgrounds
-@each $key, $utility in $utilities {
-  @include df-bg-color-css-var($utility);
-}