@design-factory/styles 21.0.0-next.0

package/scss/components/button/_button.mixins.scss

@@ -0,0 +1,144 @@
+@mixin btn-states($style, $status, $config) {
+  --df-btn-color: var(--df-button-#{$config}-#{$style}-color-#{$status}-default-foreground);
+  --df-btn-bg: var(--df-button-#{$config}-#{$style}-color-#{$status}-default-background);
+  --df-btn-border-color: var(--df-button-#{$config}-#{$style}-color-#{$status}-default-border);
+  --df-btn-hover-color: var(--df-button-#{$config}-#{$style}-color-#{$status}-hovered-foreground);
+  --df-btn-hover-bg: var(--df-button-#{$config}-#{$style}-color-#{$status}-hovered-background);
+  --df-btn-hover-border-color: var(--df-button-#{$config}-#{$style}-color-#{$status}-hovered-border);
+  --df-btn-active-color: var(--df-button-#{$config}-#{$style}-color-#{$status}-pressed-foreground);
+  --df-btn-active-bg: var(--df-button-#{$config}-#{$style}-color-#{$status}-pressed-background);
+  --df-btn-active-border-color: var(--df-button-#{$config}-#{$style}-color-#{$status}-pressed-border);
+
+  &:focus-visible {
+    --df-btn-focus-box-shadow:
+      0 0 0 2px var(var(--df-inner-box-shadow-color), var(--df-body-bg)), 0 0 0 4px var(--df-box-shadow-color);
+    --df-box-shadow-color: var(--df-button-#{$config}-#{$style}-color-#{$status}-default-border);
+    box-shadow: var(--df-btn-focus-box-shadow);
+
+    &:not(:hover):not(:active) {
+      color: var(--df-btn-color);
+      background-color: var(--df-btn-bg);
+      border-color: var(--df-btn-border-color);
+    }
+
+    &:hover:not(:active) {
+      --df-box-shadow-color: var(--df-button-#{$config}-#{$style}-color-#{$status}-hovered-border);
+    }
+
+    &:active {
+      --df-box-shadow-color: var(--df-button-#{$config}-#{$style}-color-#{$status}-pressed-border);
+    }
+  }
+}
+
+@mixin disabled-solid($style) {
+  --df-btn-disabled-color: var(--df-button-solid-#{$style}-color-disabled-foreground);
+  --df-btn-disabled-bg: var(--df-button-solid-#{$style}-color-disabled-background);
+  --df-btn-disabled-border-color: var(--df-button-solid-#{$style}-color-disabled-background);
+}
+
+@mixin disabled-outline($style) {
+  --df-btn-disabled-color: var(--df-button-outline-#{$style}-color-disabled-foreground);
+  --df-btn-disabled-bg: var(--df-button-outline-#{$style}-color-disabled-background);
+  --df-btn-disabled-border-color: var(--df-button-outline-#{$style}-color-disabled-border);
+}
+
+@mixin disabled-text($style) {
+  --df-btn-disabled-color: var(--df-button-text-#{$style}-color-disabled-foreground);
+  --df-btn-disabled-bg: var(--df-button-text-#{$style}-color-disabled-background);
+  --df-btn-disabled-border-color: transparent;
+}
+
+@mixin transparent-borders() {
+  --df-btn-border-color: transparent;
+  --df-btn-hover-border-color: transparent;
+  --df-btn-active-border-color: transparent;
+}
+
+@mixin style-btn($style, $status) {
+  @if $style == 'basic' {
+    .btn-#{$status} {
+      @include btn-states($style, $status, 'solid');
+    }
+  } @else {
+    .df-btn-#{$status}-mirror {
+      @include btn-states($style, $status, 'solid');
+      @include disabled-solid($style); //applied for mirror buttons
+    }
+  }
+}
+
+@mixin style-btn-outline($style, $status) {
+  @if $style == 'basic' {
+    .btn-outline-#{$status} {
+      @include btn-states($style, $status, 'outline');
+      @include disabled-outline($style);
+    }
+  } @else {
+    .df-btn-outline-#{$status}-mirror {
+      @include btn-states($style, $status, 'outline');
+      @include disabled-outline($style);
+    }
+  }
+}
+
+@mixin style-btn-text($style, $status) {
+  @if $style == 'basic' {
+    .btn-outline-#{$status}.df-btn-tertiary {
+      @include btn-states($style, $status, 'text');
+      @include disabled-text($style);
+      @include transparent-borders();
+    }
+  } @else {
+    .df-btn-outline-#{$status}-mirror.df-btn-tertiary {
+      @include btn-states($style, $status, 'text');
+      @include disabled-text($style);
+      @include transparent-borders();
+    }
+  }
+}
+
+/**
+  Sets the correct tokens depending if the button check is checked (state active) or not (state default).
+*/
+@mixin btn-check-focused($class, $token, $state) {
+  + .#{$class} {
+    --df-box-shadow-color: var(--df-#{$token}-#{$state}-border);
+    border-color: var(--df-#{$token}-#{$state}-border);
+
+    &:hover {
+      @if ($state == 'active') {
+        --df-box-shadow-color: var(--df-#{$token}-activeHovered-border);
+      } @else if ($state == 'default') {
+        --df-box-shadow-color: var(--df-#{$token}-hovered-border);
+      }
+    }
+  }
+}
+
+/**
+  Sets the correct tokens depending if the button check is checked (state activeHovered) or not (state hovered).
+*/
+@mixin btn-check-hover($class, $token, $state) {
+  $isActive: if($state == 'activeHovered', '-active', '');
+  + .#{$class}:hover {
+    --df-btn#{$isActive}-color: var(--df-#{$token}-#{$state}-foreground);
+    --df-btn#{$isActive}-bg: var(--df-#{$token}-#{$state}-background);
+    border-color: var(--df-#{$token}-#{$state}-border);
+  }
+}
+
+@mixin df-reset-buttongroup-radius($radius) {
+  // Set back the radius
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    border-end-end-radius: $radius;
+    border-start-end-radius: $radius;
+  }
+  > .btn:nth-child(n + 3),
+  > :not(.btn-check) + .btn,
+  > .btn-group:not(:first-child) > .btn {
+    border-end-start-radius: $radius;
+    border-start-start-radius: $radius;
+  }
+}

package/scss/components/button/_button.scss

@@ -0,0 +1,178 @@
+@use 'sass:map';
+@use 'button.mixins' as btn-mixins;
+@use '../../new-brand-common.variables' as df;
+
+.btn {
+  --df-box-shadow-color: var(--df-btn-focus-shadow);
+  --df-btn-focus-box-shadow: #{df.$df-focus-box-shadow}; // override BS
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--df-spacing-3);
+
+  &.btn-sm {
+    --df-btn-border-radius: var(--df-button-borderRadius-main-small);
+    gap: var(--df-spacing-2);
+  }
+
+  &.btn-lg {
+    --df-btn-border-radius: var(--df-button-borderRadius-main-large);
+    gap: var(--df-spacing-4);
+  }
+
+  @include btn-mixins.disabled-solid(
+    'basic'
+  ); // disabled styles for solid buttons it will work for all .btn not only btn-{$status}
+
+  &.disabled,
+  &:disabled {
+    .btn-check:checked + &,
+    :not(.btn-check) + &:active,
+    &:first-child:active,
+    &.active,
+    &.show {
+      color: var(--df-btn-disabled-color);
+      background-color: var(--df-btn-disabled-bg);
+      border-color: var(--df-btn-disabled-border-color);
+      //background-image: if($enable-gradients, none, null);
+      @include box-shadow(none);
+    }
+
+    cursor: not-allowed;
+    pointer-events: auto; // override
+  }
+
+  &:focus-visible:not(:hover):not(:active) {
+    // workaround for high contrast mode that doesn't display box-shadow
+    @media (prefers-contrast: more) {
+      outline: 2px solid transparent;
+    }
+  }
+
+  // TODO - Rework the placeholder component and the style of the button
+  &.placeholder {
+    display: inline-block;
+    background-color: currentColor;
+    opacity: $placeholder-opacity-max;
+    pointer-events: none;
+  }
+}
+
+// TODO - deprecate / remove in favor of btn btn-sm btn-outline-neutral df-btn-tertiary df-btn-icononly fal fa-xmark
+.btn-close {
+  --df-box-shadow-width: 2px;
+
+  &:hover {
+    background-color: var(--df-button-text-basic-color-neutral-hovered-background);
+  }
+
+  &:active {
+    background-color: var(--df-button-text-basic-color-neutral-pressed-background);
+  }
+}
+
+.show > .btn:not(:disabled):not(.disabled).dropdown-toggle {
+  &:not(.nav-link) {
+    color: var(--df-btn-active-color);
+    background-color: var(--df-btn-active-bg);
+  }
+}
+
+.df-btn-icononly {
+  --df-btn-border-width: 1px;
+  --df-btn-padding-x: 0;
+  --df-btn-padding-y: 0;
+
+  width: 2.25rem;
+  height: 2.25rem;
+
+  &.btn-sm {
+    width: 1.875rem;
+    height: 1.875rem;
+  }
+
+  &.btn-lg {
+    width: 3rem;
+    height: 3rem;
+  }
+}
+
+// Spaced button group override
+.btn-group {
+  &.df-btn-group-spaced {
+    flex-wrap: wrap;
+
+    > .btn {
+      flex: 0 1 auto;
+      margin-bottom: 0.5rem;
+      margin-inline-end: var(--df-spacing-4);
+    }
+
+    &.btn-group-sm {
+      @include btn-mixins.df-reset-buttongroup-radius($btn-border-radius-sm);
+    }
+
+    &.btn-group-lg {
+      @include btn-mixins.df-reset-buttongroup-radius($btn-border-radius-lg);
+    }
+
+    &:not(.btn-group-sm):not(.btn-group-lg) {
+      @include btn-mixins.df-reset-buttongroup-radius($btn-border-radius);
+    }
+  }
+}
+
+@each $style in ('basic', 'mirror') {
+  @each $status in ('primary', 'danger', neutral) {
+    @include btn-mixins.style-btn($style, $status);
+    @include btn-mixins.style-btn-outline($style, $status);
+    @include btn-mixins.style-btn-text($style, $status);
+  }
+}
+
+//Button Group
+.btn-check {
+  $btn-variants: (
+    'btn-primary': 'button-solid-basic-color-primary',
+    'df-btn-primary-mirror': 'button-solid-mirror-color-primary',
+    'btn-outline-primary': 'button-outline-basic-color-primary',
+    'df-btn-outline-primary-mirror': 'button-outline-mirror-color-primary'
+  );
+
+  // === START unchecked state ===
+  &:focus-visible {
+    @each $class, $token in $btn-variants {
+      @include btn-mixins.btn-check-focused($class, $token, 'default');
+    }
+  }
+
+  @each $class, $token in $btn-variants {
+    @include btn-mixins.btn-check-hover($class, $token, 'hovered');
+  }
+  // === END unchecked state ===
+
+  &:checked {
+    &:focus-visible {
+      @each $class, $token in $btn-variants {
+        @include btn-mixins.btn-check-focused($class, $token, 'active');
+      }
+    }
+
+    @each $class, $token in $btn-variants {
+      @include btn-mixins.btn-check-hover($class, $token, 'activeHovered');
+    }
+  }
+
+  &.disabled,
+  &:disabled {
+    + .btn {
+      cursor: not-allowed;
+      pointer-events: auto;
+      color: var(--df-btn-disabled-color);
+      background-color: var(--df-btn-disabled-bg);
+      border-color: var(--df-btn-disabled-border-color);
+      opacity: var(--df-btn-disabled-opacity);
+    }
+  }
+}

package/scss/components/button/_button.variables.scss

@@ -0,0 +1,8 @@
+$btn-font-family: var(--df-typo-font-primaryFamily), sans-serif !default;
+$btn-font-weight: var(--df-typo-weight-medium) !default;
+$btn-disabled-opacity: 1 !default;
+$btn-link-focus-shadow-rgb: rgba(
+  var(--df-btn-focus-shadow-rgb),
+  0.5
+) !default; //TODO: remove when editing to-rgb function
+$btn-border-radius: var(--df-button-borderRadius-main-medium) !default;

package/scss/components/button/_button_container.scss

@@ -0,0 +1,47 @@
+@use 'sass:color';
+
+@each $state, $value in $theme-colors {
+  $colorbtn: color-contrast($value);
+  $hover-background: if(
+    $colorbtn == $color-contrast-light,
+    shade-color($value, $btn-hover-bg-shade-amount),
+    tint-color($value, $btn-hover-bg-tint-amount)
+  );
+  $hover-border: if(
+    $colorbtn == $color-contrast-light,
+    shade-color($value, $btn-hover-border-shade-amount),
+    tint-color($value, $btn-hover-border-tint-amount)
+  );
+  $hover-color: color-contrast($hover-background);
+  $active-background: if(
+    $colorbtn == $color-contrast-light,
+    shade-color($value, $btn-active-bg-shade-amount),
+    tint-color($value, $btn-active-bg-tint-amount)
+  );
+  $active-color: color-contrast($active-background);
+  $active-border: if(
+    $colorbtn == $color-contrast-light,
+    shade-color($value, $btn-active-border-shade-amount),
+    tint-color($value, $btn-active-border-tint-amount)
+  );
+
+  $active-background-outline: $value;
+  $active-border-outline: $value;
+  $active-color-outline: color-contrast($active-background-outline);
+
+  // this code is because
+  // .btn-check:focus + &
+  // from the file _buttons.scss is not working with the wrapper
+  #{$df-css-namespace-selector} {
+    .btn-check:checked,
+    .btn-check:active {
+      & + .btn-#{$state},
+      & + .btn-outline-#{$state} {
+        color: var(--#{$prefix}btn-active-color);
+        background-color: var(--#{$prefix}btn-active-bg);
+        border-color: var(--#{$prefix}btn-active-border-color);
+        background-image: if($enable-gradients, none, null);
+      }
+    }
+  }
+}

package/scss/components/card/_card.scss

@@ -0,0 +1,167 @@
+.card.btn {
+  --df-btn-font-weight: var(--df-typo-weight-regular);
+}
+
+.card {
+  box-shadow: var(--df-card-box-shadow);
+
+  .card-title {
+    font-weight: var(--df-typo-weight-medium);
+  }
+
+  .card-text {
+    margin-block-end: var(--df-spacing-5);
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+  }
+
+  .card-subtitle {
+    margin-block-end: var(--df-spacing-5);
+  }
+
+  &.border-0 {
+    box-shadow: none;
+  }
+
+  &.btn-outline-primary {
+    display: block;
+    text-align: start;
+    color: var(--df-card-focusable-color);
+    border: none;
+    border-radius: var(--df-borderRadius-main-small);
+    height: inherit;
+
+    &:focus-visible {
+      --df-box-shadow-color: var(--df-color-focus-main-border);
+
+      &:not(:hover):not(:active) {
+        color: var(--df-card-focusable-color);
+      }
+    }
+
+    &:not([aria-disabled='true']):not([disabled]):not(.disabled) {
+      &.df-card-selected {
+        background-color: var(--df-color-primary-alt-active-background);
+      }
+
+      &:hover {
+        background-color: var(--df-color-primary-alt-hovered-background);
+        border: none;
+
+        &:active {
+          background-color: var(--df-btn-active-bg);
+          border: none;
+        }
+      }
+
+      &:active {
+        border: none;
+      }
+    }
+
+    &[aria-disabled='true'],
+    &[aria-disabled='true']:hover,
+    &[aria-disabled='true']:active,
+    &.disabled,
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:active,
+    &.disabled:hover,
+    &.disabled:active {
+      --df-secondary-color: var(
+        --df-color-disabled-main-foreground
+      ); //Override text-muted color TODO check when doing wrappers
+
+      color: var(--df-color-disabled-main-foreground);
+      background-color: var(--df-color-disabled-main-background);
+
+      cursor: not-allowed;
+    }
+  }
+}
+
+.card-group,
+.df-accordion-card {
+  //redefine BS variables to use for card group and accordion card //TODO: remove when removing accordion cards
+  --df-card-box-shadow: #{$card-box-shadow};
+  --df-card-border-radius: #{$card-border-radius};
+}
+
+.df-accordion-card {
+  box-shadow: var(--df-card-box-shadow);
+  border-radius: var(--df-card-border-radius);
+
+  &.card,
+  & > .card {
+    box-shadow: none;
+
+    .card-header {
+      border-bottom-width: 0;
+      background-color: var(--df-color-inert-neutral-main-background);
+    }
+
+    .card-body {
+      border-top: none;
+    }
+
+    &:not(:last-of-type) {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border-bottom-width: 0;
+    }
+
+    &:not(:first-of-type) {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+
+      border-top: 1px solid var(--df-color-inert-neutral-main-border);
+    }
+
+    &:last-of-type .card-header {
+      border-bottom-left-radius: var(--df-card-border-radius);
+      border-bottom-right-radius: var(--df-card-border-radius);
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .card-group {
+    box-shadow: var(--df-card-box-shadow);
+    border-radius: var(--df-card-border-radius);
+
+    .card {
+      box-shadow: none;
+      border-radius: 0;
+
+      &:not(:last-of-type) {
+        border-inline-end: 1px solid var(--df-color-inert-neutral-main-border);
+      }
+
+      .card-img-top {
+        border-radius: 0;
+      }
+
+      &:first-of-type {
+        border-end-start-radius: var(--df-card-border-radius);
+
+        &,
+        & .card-img-top {
+          border-start-start-radius: var(--df-card-border-radius);
+          border-start-end-radius: 0;
+        }
+      }
+
+      &:last-of-type {
+        border-end-end-radius: var(--df-card-border-radius);
+
+        &,
+        & .card-img-top {
+          border-start-end-radius: var(--df-card-border-radius);
+          border-start-start-radius: 0;
+        }
+      }
+    }
+  }
+}

package/scss/components/card/_card.variables.scss

@@ -0,0 +1,12 @@
+@use '../../new-brand-common.variables' as df;
+
+$card-spacer-y: var(--df-spacing-5) !default;
+$card-spacer-x: var(--df-spacing-5) !default;
+$card-title-spacer-y: var(--df-spacing-5) !default;
+$card-border-width: 0 !default;
+$card-border-radius: var(--df-border-radius-lg) !default;
+$card-box-shadow: df.$df-box-shadow !default;
+$card-inner-border-radius: var(--df-borderRadius-main-medium) !default;
+$card-cap-padding-y: var(--df-spacing-3) !default;
+$card-cap-padding-x: var(--df-spacing-5) !default;
+$card-bg: var(--df-color-inert-neutral-main-background) !default;

package/scss/components/carousel/_carousel.scss

@@ -0,0 +1,83 @@
+.carousel {
+  //TODO: needs to be redone with wrappers
+  &:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 2px var(--df-inner-box-shadow-color, var(--df-body-bg)),
+      0 0 0 4px var(--df-color-neutral-main-default-border);
+  }
+
+  &.df-carousel-isFirst {
+    .carousel-control-prev-icon {
+      display: none;
+    }
+
+    .carousel-control-prev {
+      cursor: initial;
+    }
+  }
+
+  &.df-carousel-isLast {
+    .carousel-control-next-icon {
+      display: none;
+      cursor: var(--df-disabled-cursor);
+    }
+
+    .carousel-control-next {
+      cursor: initial;
+    }
+  }
+
+  .carousel-control-prev-icon,
+  .carousel-control-next-icon {
+    border-radius: var(--df-borderRadius-main-medium);
+    background-color: var(
+      --df-color-neutral-main-default-background
+    ); //using T2 because not a button => TODO: remove it with wrappers
+    &:hover {
+      background-color: var(
+        --df-color-neutral-main-hovered-background
+      ); //using T2 because not a button => TODO: remove it with wrappers
+    }
+
+    background-image: none;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-image: none;
+      background-color: var(
+        --df-color-neutral-main-default-foreground
+      ); //using T2 because not a button => TODO: remove it with wrappers
+      mask-repeat: no-repeat;
+      mask-size: 50% 50%;
+      mask-position: center;
+    }
+  }
+
+  .carousel-control-prev-icon {
+    &::after {
+      mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='black'><path d='m130.51937,239.025 194.35,-194.34 c9.37,-9.37 24.57,-9.37 33.94,0 l22.67,22.67 c9.36,9.36 9.37,24.52 0.04,33.9 l-154.03,154.74 154.02,154.75 c9.34,9.38 9.32,24.54 -0.04,33.9 l-22.67,22.67 c-9.37,9.37 -24.57,9.37 -33.94,0 l-194.34,-194.35 c-9.37,-9.37 -9.37,-24.57 0,-33.94z'/></svg>");
+    }
+  }
+
+  .carousel-control-next-icon {
+    &::after {
+      mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='black'><path d='m381.47632,272.9705 -194.344,194.343 c-9.373,9.373 -24.569,9.373 -33.941,0 l-22.667,-22.667 c-9.357,-9.357 -9.375,-24.522 -0.04,-33.901 l154.021,-154.746 -154.021,-154.745 c-9.335,-9.379 -9.317,-24.544 0.04,-33.901 l22.667,-22.667 c9.373,-9.373 24.569,-9.373 33.941,0 l194.343,194.343 c9.373,9.372 9.373,24.568 10e-4,33.941z'/></svg>");
+    }
+  }
+
+  .carousel-caption {
+    background-color: rgb(#000, 0.55); //There is no token
+    bottom: 0; // override
+    // default value is 20 + 20 of the caption bottom - 10px BS carousel indicator hit area
+    padding-bottom: 30px; // override
+    padding-top: 0.75rem; // override as no variable is set
+  }
+
+  .carousel-indicators {
+    //10px BS carousel indicator hit area
+    bottom: -10px;
+  }
+}

package/scss/components/carousel/_carousel.variables.scss

@@ -0,0 +1,3 @@
+$carousel-control-opacity: 1 !default;
+$carousel-caption-width: 100% !default;
+$carousel-control-icon-width: 2.25rem !default;