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

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

@@ -1,152 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-
-@function df-format-transform-name($color, $action, $params) {
-  $name: $action;
-  @each $param in $params {
-    $name: $name + '-' + $param;
-  }
-  $name: $name + '-' + $color;
-  @return $name;
-}
-
-@function df-transform-loop($arrayIn, $arrayOut, $action, $params...) {
-  @each $color, $value in $arrayIn {
-    $arrayOut: map.merge(
-      (
-        df-format-transform-name($color, $action, $params): meta.call(meta.get-function($action), $value, $params...)
-      ),
-      $arrayOut
-    );
-  }
-  @return $arrayOut;
-}
-
-// Hover color
-$df-colors-transformed: () !default;
-$df-hover-transform: 'darken' !default;
-$df-hover-transform-param: 5% !default;
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $colors,
-  $df-colors-transformed,
-  $df-hover-transform,
-  $df-hover-transform-param
-);
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $theme-colors,
-  $df-colors-transformed,
-  $df-hover-transform,
-  $df-hover-transform-param
-);
-
-$df-active-transform: 'darken' !default;
-$df-active-transform-param: 10% !default;
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $colors,
-  $df-colors-transformed,
-  $df-active-transform,
-  $df-active-transform-param
-);
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $theme-colors,
-  $df-colors-transformed,
-  $df-active-transform,
-  $df-active-transform-param
-);
-
-// stylelint-disable-next-line scss/dollar-variable-pattern
-$df-bg-active-transform: 'mix' !default;
-$df-bg-active-transform-param1: $white !default;
-$df-bg-active-transform-param2: 15% !default;
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $colors,
-  $df-colors-transformed,
-  $df-bg-active-transform,
-  $df-bg-active-transform-param1,
-  $df-bg-active-transform-param2
-);
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $theme-colors,
-  $df-colors-transformed,
-  $df-bg-active-transform,
-  $df-bg-active-transform-param1,
-  $df-bg-active-transform-param2
-);
-
-$df-bg-hover-transform: 'mix' !default;
-$df-bg-hover-transform-param1: $white !default;
-$df-bg-hover-transform-param2: 10% !default;
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $colors,
-  $df-colors-transformed,
-  $df-bg-hover-transform,
-  $df-bg-hover-transform-param1,
-  $df-bg-hover-transform-param2
-);
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $theme-colors,
-  $df-colors-transformed,
-  $df-bg-hover-transform,
-  $df-bg-hover-transform-param1,
-  $df-bg-hover-transform-param2
-);
-
-$df-bg-transform: 'mix' !default;
-$df-bg-transform-param1: $white !default;
-$df-bg-transform-param2: 5% !default;
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $colors,
-  $df-colors-transformed,
-  $df-bg-transform,
-  $df-bg-transform-param1,
-  $df-bg-transform-param2
-);
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $theme-colors,
-  $df-colors-transformed,
-  $df-bg-transform,
-  $df-bg-transform-param1,
-  $df-bg-transform-param2
-);
-
-/**
- * Gradients
- */
-// stylelint-disable-next-line scss/dollar-variable-pattern
-$gradients: () !default;
-// stylelint-disable-next-line
-$gradients: map.merge(
-  (
-    'gradient-blue': (
-      'from': $blue,
-      'to': $cyan
-    )
-  ),
-  $gradients
-);
-
-// Keep for backward compatibility, must be change with version 8?
-$df-primary-lighten-60: map.get(
-  $df-colors-transformed,
-  $df-bg-hover-transform + '-' + $df-bg-hover-transform-param1 + '-' + $df-bg-hover-transform-param2 + '-' + 'primary'
-) !default;

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

@@ -1,23 +0,0 @@
-#{$df-css-namespace-selector} {
-  --#{$prefix}dark-primary: #{$dark-primary};
-  --#{$prefix}yellow-rgb: #{to-rgb($yellow)};
-  --#{$prefix}dark-primary-rgb: #{to-rgb($dark-primary)};
-  --#{$prefix}white-color: #{color-contrast($white)};
-  --#{$prefix}black-color: #{color-contrast($black)};
-
-  @each $color, $value in $shade-colors {
-    --#{$prefix}#{$color}: #{$value};
-  }
-
-  @each $color, $value in $shade-colors-rgb {
-    --#{$prefix}#{$color}-rgb: #{$value};
-  }
-
-  @each $color, $value in $shade-colors-text {
-    --#{$prefix}#{$color}-color: #{$value};
-  }
-
-  @each $color, $value in $shade-colors-text-rgb {
-    --#{$prefix}#{$color}-color-rgb: #{$value};
-  }
-}

package/styles/scss/components/breadcrumbs/_breadcrumbs.scss

@@ -1,127 +0,0 @@
-@use 'sass:meta';
-
-.breadcrumb {
-  --#{$prefix}breadcrumb-item-before-padding: #{$df-breadcrumb-item-before-padding};
-  --#{$prefix}breadcrumb-item-active-font-weight: #{$df-breadcrumb-item-active-font-weight};
-  --#{$prefix}breadcrumb-item-before-font-weight: #{$df-breadcrumb-item-before-font-weight};
-  --#{$prefix}breadcrumb-item-display: #{$df-breadcrumb-item-display};
-  --#{$prefix}breadcrumb-icon-display: #{$df-breadcrumb-icon-display};
-  --#{$prefix}breadcrumb-item-two-last-items-display: #{$df-breadcrumb-item-two-last-items-display};
-  --#{$prefix}breadcrumb-icon-color: #{$df-breadcrumb-icon-color};
-  --#{$prefix}breadcrumb-icon-margin: #{$df-breadcrumb-icon-margin};
-  --#{$prefix}breadcrumb-icon-angle-left-content: #{$df-breadcrumb-icon-angle-left-content};
-  --#{$prefix}breadcrumb-icon-angle-right-content: #{$df-breadcrumb-icon-angle-right-content};
-  --#{$prefix}breadcrumb-item-icon-margin-inline-end: #{$df-breadcrumb-item-icon-margin-inline-end};
-
-  &.breadcrumb-sm {
-    --#{$prefix}breadcrumb-font-size: #{$font-size-sm};
-    --#{$prefix}breadcrumb-item-before-padding: #{$df-breadcrumb-item-before-padding-sm};
-    --#{$prefix}breadcrumb-item-icon-margin-inline-end: #{$df-breadcrumb-item-icon-margin-inline-end-sm};
-  }
-
-  &.breadcrumb-lg {
-    // todo create a css variable for body-font-size-lg and sm
-    --#{$prefix}breadcrumb-font-size: #{$font-size-lg};
-    --#{$prefix}breadcrumb-item-before-padding: #{$df-breadcrumb-item-before-padding-lg};
-    --#{$prefix}breadcrumb-item-icon-margin-inline-end: #{$df-breadcrumb-item-icon-margin-inline-end-lg};
-  }
-
-  .breadcrumb-item {
-    & + .breadcrumb-item + .breadcrumb-item:before {
-      @include rtl {
-        content: var(--#{prefix}breadcrumb-divider, $breadcrumb-divider-flipped);
-      }
-    }
-
-    &:before {
-      padding: var(--#{$prefix}breadcrumb-item-before-padding);
-      font-family: $df-breadcrumb-separator-font;
-    }
-
-    @include rtl {
-      &:before {
-        float: right;
-      }
-    }
-
-    a {
-      border-bottom: 0;
-      @if (not meta.variable-exists($name: 'df-enableBranding2023')) {
-        &:hover {
-          border-bottom: var(--#{$prefix}link-border-bottom);
-          border-bottom-width: var(--#{$prefix}link-hover-border-bottom-width);
-        }
-      }
-    }
-
-    .df-breadcrumb-item-icon {
-      margin-inline-end: var(--#{$prefix}breadcrumb-item-icon-margin-inline-end);
-    }
-
-    &:nth-of-type(2):before {
-      // first item after arrow should not have slash char before text
-      content: $df-breadcrumb-item-before-content;
-    }
-
-    &.active {
-      // active item in bold
-      font-weight: var(--#{$prefix}breadcrumb-item-active-font-weight);
-    }
-
-    &.active:before {
-      // no bold for the slash before active item
-      font-weight: var(--#{$prefix}breadcrumb-item-before-font-weight);
-    }
-  }
-
-  .df-breadcrumb-icon {
-    // hidden by default
-    display: var(--#{$prefix}breadcrumb-icon-display);
-    color: var(--#{$prefix}breadcrumb-icon-color);
-
-    &:before,
-    &:after {
-      margin: var(--#{$prefix}breadcrumb-icon-margin);
-      // custom df class for breadcrumb icon
-      // extends icon-angle-(left or right) class depending on the direction
-      @extend %df-icon-style;
-    }
-
-    @include ltr {
-      &:before {
-        // content cannot be a CSS variable
-        content: $df-breadcrumb-icon-angle-left-content;
-      }
-    }
-    @include rtl {
-      &:after {
-        content: $df-breadcrumb-icon-angle-right-content;
-      }
-    }
-  }
-
-  // Mobile breakpoint
-  @include media-breakpoint-only(xs) {
-    .breadcrumb-item {
-      &:not(:nth-of-type(1)) {
-        // items are hidden
-        display: var(--#{$prefix}breadcrumb-item-display);
-      }
-
-      &:nth-last-of-type(1) {
-        // only last items is displayed
-        display: var(--#{$prefix}breadcrumb-item-two-last-items-display);
-      }
-
-      &:nth-last-of-type(2):before {
-        // first item after arrow should not have slash char before text
-        content: $df-breadcrumb-item-before-content;
-      }
-    }
-
-    .df-breadcrumb-icon {
-      // arrow displayed
-      --#{$prefix}breadcrumb-icon-display: #{$df-breadcrumb-icon-xs-display};
-    }
-  }
-}

package/styles/scss/components/breadcrumbs/_breadcrumbs.variables.scss

@@ -1,21 +0,0 @@
-$df-breadcrumb-item-before-padding: 0rem 0.5rem !default;
-$df-breadcrumb-item-before-padding-sm: 0rem 0.5rem !default;
-$df-breadcrumb-item-before-padding-lg: 0rem 0.5rem !default;
-$df-breadcrumb-item-before-content: none !default;
-$df-breadcrumb-item-active-font-weight: 500 !default;
-$df-breadcrumb-item-before-font-weight: normal !default;
-$df-breadcrumb-item-display: none !default;
-$df-breadcrumb-icon-display: none !default;
-$df-breadcrumb-item-two-last-items-display: inline !default;
-
-$df-breadcrumb-item-icon-margin-inline-end: 0.25rem !default;
-$df-breadcrumb-item-icon-margin-inline-end-sm: 0.125rem !default;
-$df-breadcrumb-item-icon-margin-inline-end-lg: 0.5rem !default;
-
-$df-breadcrumb-icon-xs-display: inline !default;
-$df-breadcrumb-icon-color: shades-css-var('primary', 'inert-color') !default;
-$df-breadcrumb-icon-margin: 0rem 0.5rem !default;
-$df-breadcrumb-icon-angle-left-content: '\f104' !default; // fa-angle-left
-$df-breadcrumb-icon-angle-right-content: '\f105' !default; // fa-angle-right
-
-$df-breadcrumb-separator-font: Font Awesome 6 Pro !default;