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

package/styles/scss/components/progressbar/_progressbar.scss

@@ -1,93 +0,0 @@
-.progress {
-  --#{$prefix}progress-border-width: #{$df-progress-border-width};
-  --#{$prefix}progress-border-style: #{$df-progress-border-style};
-  --#{$prefix}progress-border-color: #{$df-progress-border-color};
-
-  border-width: var(--#{$prefix}progress-border-width);
-  border-style: var(--#{$prefix}progress-border-style);
-  border-color: var(--#{$prefix}progress-border-color);
-}
-
-.progress-bar {
-  --#{$prefix}progress-bar-border-radius: #{$progress-border-radius};
-  --#{$prefix}progress-bar-infinite-animation-duration: #{$df-progress-bar-infinite-animation-duration};
-  --#{$prefix}progress-bar-infinite-animation-function: #{$df-progress-bar-infinite-animation-function};
-
-  position: relative;
-  border-radius: var(--#{$prefix}progress-bar-border-radius);
-  &.infinite-animation {
-    width: 20%;
-
-    @include ltr {
-      animation-name: infinite-animation;
-    }
-    @include rtl {
-      animation-name: infinite-animation-rtl;
-    }
-    animation-duration: var(--#{$prefix}progress-bar-infinite-animation-duration);
-    animation-timing-function: var(--#{$prefix}progress-bar-infinite-animation-function);
-    animation-iteration-count: infinite;
-  }
-}
-
-@keyframes infinite-animation {
-  //The progressbar is hidden at the beginning because it is too far on the left
-  0% {
-    left: -35%;
-  }
-  // At 75% of the animation time frame, the progressbar is hidden because it is too far on the right
-  75% {
-    left: 100%;
-  }
-  // Between 75% and 100% of the time frame, the progressbar stays hidden
-  100% {
-    left: 100%;
-  }
-}
-
-@keyframes infinite-animation-rtl {
-  //The progressbar is hidden at the beginning because it is too far on the left
-  0% {
-    right: -35%;
-  }
-  // At 75% of the animation time frame, the progressbar is hidden because it is too far on the right
-  75% {
-    right: 100%;
-  }
-  // Between 75% and 100% of the time frame, the progressbar stays hidden
-  100% {
-    right: 100%;
-  }
-}
-
-.df-dark-background-version {
-  .progress {
-    --#{$prefix}progress-bg: #{$df-darkBackgroundVersion-progressbar-background-color};
-    --#{$prefix}progress-border-color: #{$df-darkBackgroundVersion-progress-border-color};
-  }
-  .progress-bar {
-    --#{$prefix}progress-bar-bg: #{$df-darkBackgroundVersion-progressbar-color};
-  }
-}
-
-.progressbar-text {
-  --#{$prefix}progress-bar-text-color: #{$df-progress-bar-text-color};
-  color: var(--#{$prefix}progress-bar-text-color);
-}
-
-// Flag angular
-// stylelint-disable-next-line selector-type-no-unknown
-df-progressbar {
-  --#{$prefix}progress-bar-display: #{$df-progress-bar-display};
-  display: var(--#{$prefix}progress-bar-display);
-}
-
-// Flag angular
-.df-progressindicator-container {
-  df-progressbar {
-    flex-grow: 1;
-    .progress {
-      border-radius: 0;
-    }
-  }
-}

package/styles/scss/components/progressbar/_progressbar.variables.scss

@@ -1,28 +0,0 @@
-$df-progress-bar-infinite-animation-duration: 2.2s !default; // can be changed to speed-up or slow down the infinite animation
-$df-progress-bar-text-color: $gray-600 !default;
-$df-progress-bar-display: block !default;
-$df-progress-bar-infinite-animation-function: linear !default;
-$df-progress-border-width: 0.5px !default;
-$df-progress-border-style: solid !default;
-$df-progress-border-color: variable-switch-brand2023('color-progressIndicator-main-border', $gray-700) !default;
-
-$df-darkBackgroundVersion-progress-border-color: variable-switch-brand2023(
-  'color-progressIndicator-alt-border',
-  $white
-) !default;
-
-/**
-  Color of the progressbar background (~color of the progressbar with 0% progress) for the 'dark background' version
-*/
-$df-darkBackgroundVersion-progressbar-background-color: variable-switch-brand2023(
-  'color-inert-neutral-alt-background',
-  $dark-primary
-) !default;
-
-/**
-  Color of the progressbar (~color of the progressbar with 100% progress) for the 'dark background' version
-*/
-$df-darkBackgroundVersion-progressbar-color: variable-switch-brand2023(
-  'color-primary-alt-default-background',
-  white
-) !default;

package/styles/scss/components/radio/_radio.scss

@@ -1,50 +0,0 @@
-@use 'sass:meta';
-//TODO: remove the old "div[role='radiogroup']" selector in DF 21
-div[role='radiogroup'],
-fieldset[role='radiogroup'] {
-  --#{$prefix}radiogroup-legend-margin-bottom: #{$df-radiogroup-legend-margin-bottom};
-  --#{$prefix}radiogroup-font-size: #{$df-fieldset-legend-font-size};
-  --#{$prefix}radiogroup-legend-font-weight: #{$df-radio-group-legend-font-weight};
-  //TODO: remove the old "span" selector in DF 21
-  > span,
-  > legend {
-    font-weight: var(--#{$prefix}radiogroup-legend-font-weight);
-    font-size: var(--#{$prefix}radiogroup-font-size);
-    display: block;
-    margin-bottom: var(--#{$prefix}radiogroup-legend-margin-bottom);
-  }
-}
-
-.form-check {
-  --#{$prefix}form-check-radio-checked-bg-color: #{$df-form-check-radio-checked-bg-color};
-  --#{$prefix}form-check-radio-checked-disabled-bg-image: #{escape-svg($df-form-check-radio-checked-disabled-bg-image)};
-
-  .form-check-input {
-    &:checked {
-      &[type='radio'] {
-        background-color: var(--#{$prefix}form-check-radio-checked-bg-color);
-
-        &.disabled,
-        &[disabled] {
-          @if $enable-gradients {
-            background-image: var(--#{$prefix}form-check-radio-checked-disabled-bg-image), var(--#{$prefix}gradient);
-          } @else {
-            background-image: var(--#{$prefix}form-check-radio-checked-disabled-bg-image);
-          }
-        }
-      }
-    }
-
-    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-      &[type='radio'] {
-        &:not(:checked):not(.is-invalid):focus {
-          --#{$prefix}box-shadow-color: #{$input-border-color};
-        }
-
-        &:disabled:checked {
-          background-color: var(--#{$prefix}checkbox-disabled-border-color);
-        }
-      }
-    }
-  }
-}

package/styles/scss/components/radio/_radio.variables.scss

@@ -1,4 +0,0 @@
-$df-form-check-radio-checked-bg-color: $white !default;
-$df-form-check-radio-checked-disabled-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2.5' fill='#{$gray-300}'/></svg>") !default;
-$df-radiogroup-legend-margin-bottom: 0.5rem !default;
-$df-radio-group-legend-font-weight: bold !default;

package/styles/scss/components/rating/_rating.scss

@@ -1,118 +0,0 @@
-@use 'sass:math';
-@use 'sass:meta';
-
-// flag angular
-// stylelint-disable-next-line selector-type-no-unknown
-ngb-rating {
-  --#{$prefix}rating-font-size: #{$df-rating-font-size};
-  --#{$prefix}rating-color: #{$df-rating-color};
-  --#{$prefix}rating-tiny-color: #{$df-rating-tiny-color};
-  --#{$prefix}rating-hover-color: #{$df-rating-hover-color};
-  --#{$prefix}rating-active-color: #{$df-rating-active-color};
-  --#{$prefix}rating-disabled-color: #{$df-rating-disabled-color};
-  --#{$prefix}rating-disabled-cursor: #{$df-rating-disabled-cursor};
-  --#{$prefix}rating-star-to-star-distance: #{$df-rating-star-to-star-distance};
-  --#{$prefix}rating-number-to-stars-distance: #{$df-rating-number-to-stars-distance};
-  --#{$prefix}rating-padding: #{$df-rating-padding};
-  --#{$prefix}rating-focus-outline: #{$df-rating-focus-outline};
-  --#{$prefix}rating-border: #{$df-rating-border};
-  --#{$prefix}rating-focus-border: #{$df-rating-focus-border};
-  --#{$prefix}rating-border-radius: #{$df-rating-border-radius};
-  --#{$prefix}rating-box-shadow: #{$df-rating-box-shadow};
-  --#{$prefix}rating-focus-box-shadow: #{$df-rating-focus-box-shadow};
-  --#{$prefix}rating-border-color: #{$df-rating-border-color};
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    --#{$prefix}box-shadow-color: var(--#{$prefix}rating-color);
-  }
-
-  font-size: var(--#{$prefix}rating-font-size);
-  color: var(--#{$prefix}rating-color);
-  $star-margin: calc(var(--#{$prefix}rating-star-to-star-distance) * 0.5);
-  margin: calc(var(--#{$prefix}rating-number-to-stars-distance) - $star-margin);
-
-  span {
-    margin: calc($star-margin);
-  }
-
-  // focus properties, avoid resizing of element
-  outline: var(--#{$prefix}rating-focus-outline);
-  border: var(--#{$prefix}rating-border);
-  border-radius: var(--#{$prefix}rating-border-radius);
-  box-shadow: var(--#{$prefix}rating-box-shadow);
-  border-color: var(--#{$prefix}rating-border-color);
-
-  &:not([aria-disabled='true']):focus-visible {
-    border: var(--#{$prefix}rating-focus-border);
-    box-shadow: var(--#{$prefix}rating-focus-box-shadow);
-  }
-
-  &:hover {
-    color: var(--#{$prefix}rating-hover-color);
-    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-      --#{$prefix}box-shadow-color: var(--#{$prefix}rating-hover-color);
-    }
-  }
-
-  &:active {
-    color: var(--#{$prefix}rating-active-color);
-    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-      --#{$prefix}box-shadow-color: var(--#{$prefix}rating-active-color);
-    }
-  }
-
-  &[aria-disabled='true'] {
-    color: var(--#{$prefix}rating-disabled-color);
-    cursor: var(--#{$prefix}rating-disabled-cursor);
-
-    span {
-      cursor: var(--#{$prefix}rating-disabled-cursor) !important;
-    }
-  }
-
-  &.ng-invalid {
-    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-      --#{$prefix}rating-color: var(--#{$prefix}color-danger-alt-default-foreground);
-      --#{$prefix}rating-hover-color: var(--#{$prefix}color-danger-alt-hovered-foreground);
-      --#{$prefix}rating-active-color: var(--#{$prefix}color-danger-alt-pressed-foreground);
-    } @else {
-      @extend .text-danger;
-    }
-  }
-
-  //the 0px margins belows ensure that the full stars overlap the empty ones
-  .df-rating-decimal {
-    margin-right: 0;
-    margin-bottom: 0;
-    position: relative;
-    display: inline-block;
-    @include ltr {
-      .df-rating-decimal-half {
-        left: 0;
-      }
-    }
-    @include rtl {
-      .df-rating-decimal-half {
-        right: 0;
-        margin-right: 0;
-      }
-    }
-
-    .df-rating-decimal-half {
-      margin-left: 0;
-      margin-top: 0;
-      position: absolute;
-      display: inline-block;
-      overflow: hidden;
-    }
-  }
-
-  .df-rating-tiny {
-    color: var(--#{$prefix}rating-tiny-color);
-  }
-
-  @each $extension, $ratio in $df-size-ratios {
-    &.df-rating-#{$extension} {
-      font-size: get-sizing-brand2023($extension, $ratio, var(--#{$prefix}rating-font-size));
-    }
-  }
-}

package/styles/scss/components/rating/_rating.variables.scss

@@ -1,20 +0,0 @@
-@use 'sass:map';
-
-$df-rating-font-size: 1rem * map.get($df-size-ratios, 'md') !default;
-
-$df-rating-color: shades-css-var('primary', 'bg-color') !default;
-$df-rating-tiny-color: $black !default;
-$df-rating-hover-color: shades-css-var('primary', 'bg-hover-color') !default;
-$df-rating-active-color: shades-css-var('primary', 'bg-active-color') !default;
-$df-rating-disabled-color: var(--#{$prefix}disabled-color) !default;
-$df-rating-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
-$df-rating-star-to-star-distance: 0.2em !default;
-$df-rating-number-to-stars-distance: 0.4em !default;
-$df-rating-padding: $btn-padding-y !default;
-$df-rating-focus-outline: none !default;
-$df-rating-border: $btn-border-width solid !default;
-$df-rating-focus-border: $btn-border-width solid transparent !default;
-$df-rating-focus-box-shadow: $input-btn-focus-box-shadow !default;
-$df-rating-border-radius: $btn-border-radius !default;
-$df-rating-box-shadow: 0 0 0 $input-btn-focus-width transparent !default;
-$df-rating-border-color: transparent !default;

package/styles/scss/components/scrollspy/_scrollspy.scss

@@ -1,88 +0,0 @@
-.df-icon-inlink {
-  &,
-  &::before {
-    display: inline-block;
-    text-decoration: none;
-  }
-}
-
-// Todo should we wrap this into a class specific for scrollspy ?
-.nav.nav-pills .nav-link {
-  --#{$prefix}scrollspy-navpill-border-width: #{$df-scrollspy-border-width}; // used only for old branding
-  --#{$prefix}scrollspy-navpill-border-left: #{$df-scrollspy-border-left};
-  --#{$prefix}scrollspy-navpill-active-border-left: #{$df-scrollspy-active-border-left};
-  --#{$prefix}scrollspy-navpill-hover-text-decoration: #{$df-scrollspy-hover-text-decoration};
-  --#{$prefix}scrollspy-navpill-hover-bg: #{$df-scrollspy-hover-bg};
-  --#{$prefix}scrollspy-navpill-hover-active-font-weight: #{$df-scrollspy-hover-active-font-weight};
-  --#{$prefix}scrollspy-navpill-active-font-weight: #{$df-scrollspy-active-font-weight};
-  --#{$prefix}scrollspy-color: #{$df-scrollspy-color};
-  --#{$prefix}scrollspy-active-color: #{$df-scrollspy-active-color};
-  --#{$prefix}scrollspy-font-size: #{$df-scrollspy-font-size};
-  --#{$prefix}scrollspy-padding-y: #{$df-scrollspy-padding-y};
-  --#{$prefix}scrollspy-padding-x: #{$df-scrollspy-padding-x};
-  --#{$prefix}scrollspy-active-padding-x: #{$df-scrollspy-active-padding-x};
-  --#{$prefix}scrollspy-margin-left: #{$df-scrollspy-margin-left};
-  --#{$prefix}scrollspy-active-margin-left: #{$df-scrollspy-active-margin-left};
-  color: var(--#{$prefix}scrollspy-color);
-  padding-top: var(--#{$prefix}scrollspy-padding-y);
-  padding-bottom: var(--#{$prefix}scrollspy-padding-y);
-  padding-inline-start: var(--#{$prefix}scrollspy-padding-x); // can be removed when we remove old branding
-  margin-block-end: $df-scrollspy-margin-y;
-  font-size: var(--#{$prefix}scrollspy-font-size);
-  // used in old branding to align non active scrollspy elements with the active one
-  // we are using margin-left and border-left because the scrollbar is on the left even in rtl
-  margin-left: var(--#{$prefix}scrollspy-margin-left);
-  border-left: var(--#{$prefix}scrollspy-navpill-border-left);
-  //used when not active for old branding for the border-left to imitate a scrollbar
-  border-width: var(--#{$prefix}scrollspy-navpill-border-width);
-  display: flex;
-
-  &.active {
-    .df-icon-inlink {
-      color: $df-scrollspy-icon-active-color !important;
-    }
-
-    color: var(--#{$prefix}scrollspy-active-color);
-    font-weight: var(--#{$prefix}scrollspy-navpill-active-font-weight);
-    border-left: var(--#{$prefix}scrollspy-navpill-active-border-left); // can be removed when we remove old branding
-    margin-left: var(--#{$prefix}scrollspy-active-margin-left); // can be removed when we remove old branding
-    padding-inline-start: var(--#{$prefix}scrollspy-active-padding-x); // can be removed when we remove old branding
-  }
-
-  &:hover {
-    .df-icon-inlink {
-      color: $df-scrollspy-icon-active-color !important;
-    }
-
-    --#{$prefix}inner-box-shadow-color: var(--#{$prefix}scrollspy-navpill-hover-bg);
-    text-decoration: var(--#{$prefix}scrollspy-navpill-hover-text-decoration);
-    background-color: var(--#{$prefix}scrollspy-navpill-hover-bg);
-
-    &.active {
-      font-weight: var(--#{$prefix}scrollspy-navpill-hover-active-font-weight);
-    }
-  }
-
-  &:focus-visible {
-    // we are using this new scss var and not --#{$prefix}scrollspy-color because it will impact the old branding
-    --#{$prefix}box-shadow-color: #{$df-scrollspy-focus-box-shadow-color};
-
-    &.active {
-      --#{$prefix}inner-box-shadow-color: #{$df-scrollspy-focus-active-inner-box-shadow};
-
-      &:hover {
-        --#{$prefix}inner-box-shadow-color: #{$df-scrollspy-focus-active-hover-inner-box-shadow};
-      }
-    }
-
-    outline: 0;
-    box-shadow: $df-focused-inset-box-shadow;
-  }
-}
-
-.nav.nav-pills:not([role='tablist']) {
-  // remove default link color
-  a.nav-link {
-    border-bottom: 0;
-  }
-}

package/styles/scss/components/scrollspy/_scrollspy.variables.scss

@@ -1,23 +0,0 @@
-$df-scrollspy-border-width: 1px !default;
-$df-scrollspy-active-border-width: 3px !default;
-//we are using the active border width to align with active elements
-$df-scrollspy-border-left: $df-scrollspy-active-border-width solid $gray-200 !default;
-$df-scrollspy-active-border-left: $df-scrollspy-active-border-width solid shades-css-var('primary', 'border-color') !default;
-$df-scrollspy-hover-text-decoration: underline !default;
-$df-scrollspy-active-font-weight: $font-weight-semibold !default;
-$df-scrollspy-color: $body-color !default;
-$df-scrollspy-active-color: shades-css-var('primary', 'text-color') !default;
-$df-scrollspy-font-size: $font-size-sm !default;
-$df-scrollspy-padding-y: calc(var(--#{$prefix}nav-link-padding-y) * 0.5625) !default;
-$df-scrollspy-padding-x: calc(var(--#{$prefix}nav-link-padding-x) + 1px) !default;
-$df-scrollspy-margin-y: 0 !default;
-$df-scrollspy-active-padding-x: var(--#{$prefix}nav-link-padding-x) !default;
-$df-scrollspy-focus-active-inner-box-shadow: unset !default;
-$df-scrollspy-focus-active-hover-inner-box-shadow: unset !default;
-$df-scrollspy-focus-box-shadow-color: unset !default;
-$df-scrollspy-hover-bg: unset !default;
-$df-scrollspy-hover-active-font-weight: unset !default;
-$df-scrollspy-icon-active-color: unset !default;
-$df-scrollspy-margin-left: 1px !default;
-$df-scrollspy-active-margin-left: 0 !default;
-$df-scrollspy-default-border-width: 1px !default;

package/styles/scss/components/select/_select.mixin.scss

@@ -1,34 +0,0 @@
-@mixin df-select-border-radius-panel($border-radius-variable) {
-  .ng-dropdown-panel {
-    --#{$prefix}select-panel-border-radius: #{$border-radius-variable};
-    border-radius: var(--#{$prefix}select-panel-border-radius);
-
-    &.ng-select-bottom {
-      border-bottom-right-radius: #{$border-radius-variable};
-      border-bottom-left-radius: #{$border-radius-variable};
-
-      .ng-dropdown-panel-items {
-        .ng-option {
-          &:last-child {
-            border-bottom-right-radius: #{$border-radius-variable};
-            border-bottom-left-radius: #{$border-radius-variable};
-          }
-        }
-      }
-    }
-
-    &.ng-select-top {
-      border-top-right-radius: #{$border-radius-variable};
-      border-top-left-radius: #{$border-radius-variable};
-
-      .ng-dropdown-panel-items {
-        .ng-option {
-          &:first-child {
-            border-top-right-radius: #{$border-radius-variable};
-            border-top-left-radius: #{$border-radius-variable};
-          }
-        }
-      }
-    }
-  }
-}