@design-factory/styles 21.0.0-next.0

package/scss/components/badge/_badge.scss

@@ -0,0 +1,250 @@
+@use 'badge.mixins' as badge-mixin;
+@use '../../new-brand-common.variables' as df;
+
+.badge {
+  --df-box-shadow-color: var(--df-badge-solid-color-focus-main-border);
+
+  display: inline-flex;
+  align-items: center;
+
+  color: var(--df-badge-color) !important;
+  background-color: var(--df-badge-background-color) !important;
+  border: var(--df-border-width) solid;
+  border-color: var(--df-badge-border-color) !important;
+  outline: none;
+
+  &[role='button'],
+  :is([role='button'], button) {
+    cursor: pointer;
+    color: var(--df-badge-color) !important;
+    background-color: var(--df-badge-background-color) !important;
+
+    &[disabled],
+    &.disabled,
+    &:has([disabled]),
+    &:has(.disabled) {
+      cursor: not-allowed;
+    }
+  }
+
+  &:focus-visible,
+  &:has(:is([role='button'], button):focus-visible) {
+    box-shadow: df.$df-focus-box-shadow;
+  }
+
+  :is([role='button'], button):focus-visible {
+    outline: none;
+  }
+
+  .df-badge-icon {
+    margin-inline-start: -0.17em;
+    margin-inline-end: var(--df-spacing-2);
+  }
+
+  &:not(.df-badge-dot) {
+    --df-badge-border-color: none;
+  }
+
+  &.df-badge-dot {
+    --df-badge-color: inherit !important;
+    --df-badge-background-color: transparent !important;
+    --df-badge-border-color: transparent !important;
+
+    &::before {
+      content: '';
+      height: 0.8em;
+      width: 0.8em;
+      border-radius: 50%;
+      display: inline-block;
+      margin-inline-end: 0.38em;
+    }
+  }
+
+  $colors: (
+    'primary': 'primary',
+    'secondary': 'secondary',
+    'success': 'success',
+    'info': 'info',
+    'warning': 'warning',
+    'danger': 'danger',
+    'light': 'neutral',
+    'neutral': 'neutral',
+    'dark': 'dark',
+    'tip': 'tip',
+    'chromatic1': 'chromatic1',
+    'chromatic2': 'chromatic2',
+    'black': 'black',
+    'white': 'neutral-alt',
+    'body': 'body',
+    'alt-body': 'alt-body',
+    'dark-primary': 'dark-primary'
+  );
+
+  @each $color, $mappedColor in $colors {
+    &.bg-#{$color} {
+      --df-badge-color: var(--df-badge-solid-color-#{$mappedColor}-default-foreground);
+      --df-badge-background-color: var(--df-badge-solid-color-#{$mappedColor}-default-background);
+      // This is required for each solid variation since there is no selector for all solid styles.
+      --df-border-width: 0;
+      @if $color == 'white' {
+        --df-box-shadow-color: var(--df-badge-solid-color-focus-alt-border);
+      }
+
+      // Interactive
+      &:not([disabled]):not(.disabled) {
+        &[role='button'],
+        :is([role='button'], button) {
+          &:hover {
+            --df-badge-color: var(--df-badge-solid-color-#{$mappedColor}-hovered-foreground);
+            --df-badge-background-color: var(--df-badge-solid-color-#{$mappedColor}-hovered-background);
+          }
+
+          &:active {
+            --df-badge-color: var(--df-badge-solid-color-#{$mappedColor}-pressed-foreground);
+            --df-badge-background-color: var(--df-badge-solid-color-#{$mappedColor}-pressed-background);
+          }
+        }
+      }
+    }
+
+    &.df-badge-outline-#{$color} {
+      --df-badge-color: var(--df-badge-outline-color-#{$mappedColor}-default-foreground);
+      --df-badge-background-color: var(--df-badge-outline-color-#{$mappedColor}-default-background);
+      --df-badge-border-color: var(--df-badge-outline-color-#{$mappedColor}-default-border);
+
+      &:is([disabled], .disabled) {
+        --df-badge-color: var(--df-badge-outline-color-disabled-default-foreground) !important;
+        --df-badge-background-color: var(--df-badge-outline-color-disabled-default-background) !important;
+        --df-badge-border-color: var(--df-badge-outline-color-disabled-default-background) !important;
+      }
+
+      &:not([disabled]):not(.disabled) {
+        &:has(:is([role='button'], button)) {
+          &:hover {
+            --df-badge-border-color: var(--df-badge-outline-color-#{$mappedColor}-hovered-border);
+          }
+        }
+
+        &[role='button'],
+        :is([role='button'], button) {
+          &:hover {
+            --df-badge-color: var(--df-badge-outline-color-#{$mappedColor}-hovered-foreground);
+            --df-badge-background-color: var(--df-badge-outline-color-#{$mappedColor}-hovered-background);
+            --df-badge-border-color: var(--df-badge-outline-color-#{$mappedColor}-hovered-border);
+          }
+
+          &:active {
+            --df-badge-color: var(--df-badge-outline-color-#{$mappedColor}-pressed-foreground);
+            --df-badge-background-color: var(--df-badge-outline-color-#{$mappedColor}-pressed-background);
+            --df-badge-border-color: var(--df-badge-outline-color-#{$mappedColor}-pressed-border);
+          }
+        }
+      }
+    }
+
+    &.bg-#{$color}-soft {
+      --df-badge-color: var(--df-badge-soft-color-#{$mappedColor}-default-foreground);
+      --df-badge-background-color: var(--df-badge-soft-color-#{$mappedColor}-default-background);
+      --df-badge-border-color: var(--df-badge-soft-color-#{$mappedColor}-default-border);
+
+      &[role='button'],
+      :is([role='button'], button) {
+        &:hover {
+          --df-badge-color: var(--df-badge-soft-color-#{$mappedColor}-hovered-foreground);
+          --df-badge-background-color: var(--df-badge-soft-color-#{$mappedColor}-hovered-background);
+          --df-badge-border-color: var(--df-badge-soft-color-#{$mappedColor}-hovered-border);
+        }
+
+        &:active {
+          --df-badge-color: var(--df-badge-soft-color-#{$mappedColor}-pressed-foreground);
+          --df-badge-background-color: var(--df-badge-soft-color-#{$mappedColor}-pressed-background);
+          --df-badge-border-color: var(--df-badge-soft-color-#{$mappedColor}-pressed-border);
+        }
+      }
+    }
+
+    &.df-badge-dot.bg-#{$color} {
+      &::before {
+        background-color: var(--df-badge-solid-color-#{$mappedColor}-default-background);
+      }
+    }
+
+    // Additional color mix
+    &.bg-neutral-soft .df-badge-icon.text-#{$color} {
+      color: var(--df-badge-solid-color-#{$mappedColor}-default-background) !important;
+    }
+  }
+
+  &:is([disabled], .disabled) {
+    --df-badge-color: var(--df-badge-solid-color-disabled-default-foreground);
+    --df-badge-background-color: var(--df-badge-solid-color-disabled-default-background);
+    --df-badge-border-color: var(--df-badge-solid-color-disabled-default-background);
+
+    &,
+    :is([role='button'], button) {
+      cursor: not-allowed;
+    }
+  }
+
+  &:has(button) {
+    // badge interactive closable
+    padding-block: 0;
+    padding-inline: 0;
+
+    button {
+      background-color: inherit;
+      color: inherit;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      border: none;
+      padding: var(--df-badge-padding-y);
+      border-start-end-radius: #{$badge-border-radius};
+      border-end-end-radius: #{$badge-border-radius};
+    }
+
+    :is([role='button'], button) {
+      height: 100%;
+      padding: unset;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &.rounded-pill {
+      padding-inline: var(--df-badge-padding-x) 0;
+
+      > button {
+        border-start-end-radius: var(--df-borderRadius-main-rounded);
+        border-end-end-radius: var(--df-borderRadius-main-rounded);
+        margin-inline-start: var(--df-spacing-1);
+      }
+    }
+
+    span[role='button'] {
+      // We put the badge padding on the button except for the side that touches the close button
+      padding-block: var(--df-badge-padding-y);
+      padding-inline: var(--df-badge-padding-x) var(--df-spacing-1);
+      border-start-start-radius: #{$badge-border-radius};
+      border-end-start-radius: #{$badge-border-radius};
+    }
+  }
+
+  font-weight: var(--df-typo-weight-medium);
+
+  @include badge-mixin.df-badge-sizing(1.5rem, var(--df-typo-sizing-xsmall), var(--df-spacing-3), 1.5rem);
+
+  &.df-badge-sm {
+    @include badge-mixin.df-badge-sizing(1.25rem, var(--df-typo-sizing-xsmall), var(--df-spacing-3), 1.5rem);
+  }
+
+  &.df-badge-lg {
+    @include badge-mixin.df-badge-sizing(1.875rem, var(--df-typo-sizing-small), var(--df-spacing-4), 1.75rem);
+  }
+
+  &.df-badge-xl {
+    @include badge-mixin.df-badge-sizing(2.5rem, var(--df-typo-sizing-default), var(--df-spacing-5), 2rem);
+  }
+}

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

@@ -0,0 +1,4 @@
+$badge-border-radius: var(--df-borderRadius-main-medium) !default;
+$badge-font-weight: var(--df-typo-weight-medium) !default;
+$badge-padding-x: var(--df-spacing-3) !default;
+$badge-padding-y: 0.334em !default;

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

@@ -0,0 +1,17 @@
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:meta';
+
+@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 {
+          --df-inner-box-shadow-color: #{$value};
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use 'brand-color.mixins' as brand-color-mixins;
+
+@each $color, $value in $gradients {
+  .bg-#{$color} {
+    background-image: linear-gradient(180deg, map.get($value, 'from'), map.get($value, 'to'));
+  }
+}
+
+// We need this mixin to achieve the outline focus in buttons on different backgrounds
+@each $key, $utility in $utilities {
+  @include brand-color-mixins.df-bg-color-css-var($utility);
+}

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

@@ -0,0 +1,146 @@
+@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
+);

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

@@ -0,0 +1,23 @@
+#{$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/scss/components/breadcrumbs/_breadcrumbs.scss

@@ -0,0 +1,110 @@
+.breadcrumb {
+  &.breadcrumb-sm {
+    --df-breadcrumb-font-size: var(--df-typo-sizing-small);
+
+    .df-breadcrumb-item-icon {
+      margin-inline-end: var(--df-spacing-1);
+    }
+
+    .df-breadcrumb-icon {
+      &:before {
+        font-size: var(--df-icons-sizing-small);
+      }
+    }
+  }
+
+  &.breadcrumb-lg {
+    --df-breadcrumb-font-size: var(--df-typo-sizing-large);
+
+    .df-breadcrumb-item-icon {
+      margin-inline-end: var(--df-spacing-3);
+    }
+
+    .df-breadcrumb-icon {
+      &:before {
+        font-size: var(--df-icons-sizing-small);
+      }
+    }
+  }
+
+  .breadcrumb-item {
+    & + .breadcrumb-item + .breadcrumb-item:before {
+      @include rtl {
+        content: var(--df-breadcrumb-divider, $breadcrumb-divider-flipped);
+      }
+    }
+
+    &:before {
+      width: 1.25rem; //divider spacing
+      text-align: center;
+      margin-inline: var(--df-spacing-2);
+      font-family: 'Font Awesome 6 Pro', sans-serif;
+      float: inline-start;
+    }
+
+    a {
+      border-bottom: 0;
+    }
+
+    .df-breadcrumb-item-icon {
+      margin-inline-end: var(--df-spacing-2);
+    }
+
+    &:nth-of-type(2):before {
+      // first item after arrow should not have slash char before text
+      content: none;
+    }
+
+    &.active {
+      // active item in bold
+      font-weight: var(--df-typo-weight-medium);
+    }
+
+    &.active:before {
+      // no bold for the slash before active item
+      font-weight: var(--df-typo-weight-regular);
+    }
+  }
+
+  .df-breadcrumb-icon {
+    // hidden by default
+    display: none;
+
+    &:before {
+      @extend .fa-light;
+      margin-inline-end: var(--df-spacing-2);
+
+      @include ltr {
+        @extend .fa-arrow-left;
+      }
+      @include rtl {
+        @extend .fa-arrow-right;
+      }
+    }
+  }
+
+  // Mobile breakpoint
+  @include media-breakpoint-only(xs) {
+    .breadcrumb-item {
+      &:not(:nth-of-type(1)) {
+        // items are hidden
+        display: none;
+      }
+
+      &:nth-last-of-type(1) {
+        // only last items is displayed
+        display: inline;
+      }
+
+      &:nth-last-of-type(2):before {
+        // first item after arrow should not have slash char before text
+        content: none;
+      }
+    }
+    .df-breadcrumb-icon {
+      // arrow displayed
+      display: flex;
+      align-items: center;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+$breadcrumb-font-size: var(--df-typo-sizing-default) !default;
+$breadcrumb-item-padding-x: 0 !default; //.5rem default
+$breadcrumb-bg: none !default;
+$breadcrumb-divider-color: var(--df-link-color-neutral-default-foreground) !default;
+$breadcrumb-active-color: var(--df-link-color-neutral-default-foreground) !default;
+$breadcrumb-divider: '\f054' !default; // fa-chevron-right
+$breadcrumb-divider-flipped: '\f053' !default; // fa-chevron-left