@design-factory/styles 21.0.0-next.0

package/scss/components/pagination/_pagination.scss

@@ -0,0 +1,189 @@
+@use 'pagination.mixins' as pagination-mixins;
+@use '../../new-brand-common.variables' as df;
+
+.pagination {
+  $df-pagination-first-icon-code: '\f323'; // .fa-chevrons-left
+  $df-pagination-previous-icon-code: '\f053'; // .fa-chevron-left
+  $df-pagination-next-icon-code: '\f054'; // .fa-chevron-right
+  $df-pagination-last-icon-code: '\f324'; // .fa-chevrons-right
+
+  margin-bottom: 0; // reset the ul margin.
+  align-items: center;
+
+  @include pagination-mixins.pagination-sizing(
+    2.25rem,
+    var(--df-borderRadius-main-medium),
+    var(--df-typo-sizing-default),
+    calc(2.125rem + 2px)
+  );
+
+  .page-item {
+    &.active > .page-link {
+      font-weight: var(--df-typo-weight-bold);
+    }
+
+    .page-link {
+      color: var(--df-pagination-color); //override link behaviour (visited stuff)
+      border: none;
+      text-align: center;
+      margin: 0;
+      --df-box-shadow-color: var(--df-color-focus-main-border);
+
+      &:hover {
+        z-index: 1;
+        color: var(--df-pagination-hover-color); //override link behaviour
+        background-color: var(--df-pagination-hover-bg); //override link behaviour
+        border-color: var(--df-pagination-hover-border-color); //override link behaviour
+      }
+
+      &:active {
+        color: var(--df-color-primary-alt-pressed-foreground); //override link behaviour
+        background-color: var(--df-color-primary-alt-pressed-background); //override link behaviour
+      }
+
+      &:focus {
+        box-shadow: none;
+        outline: none;
+      }
+
+      &:focus-visible {
+        z-index: 3;
+        box-shadow: df.$df-focus-box-shadow;
+        outline: none;
+      }
+
+      z-index: initial; // overides z-index: 2 so that it is below the active page link
+
+      &:has(span:not(.visually-hidden)) {
+        border-radius: 50% !important;
+        font-family: 'Font Awesome 6 Pro', sans-serif;
+
+        span {
+          font-size: 0px; // trick to hide default ng-bootstrap icons until we implement wrappers
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          &:after {
+            color: var(--df-color-primary-alt-default-foreground);
+            position: absolute;
+          }
+        }
+
+        &:hover {
+          span:after {
+            color: var(--df-color-primary-alt-hovered-foreground);
+          }
+        }
+        &:active {
+          span:after {
+            color: var(--df-color-primary-alt-pressed-foreground);
+          }
+        }
+      }
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+
+      & > .page-link {
+        color: var(--df-pagination-disabled-color);
+        pointer-events: none;
+        background-color: var(--df-pagination-disabled-bg);
+        border-color: var(--df-pagination-disabled-border-color);
+        font-weight: inherit;
+        --df-link-disabled-display: block;
+      }
+    }
+  }
+
+  .page-item.active .page-link {
+    z-index: 2;
+  }
+
+  .page-item.disabled .page-link span:after {
+    color: $pagination-disabled-color !important;
+  }
+
+  // TODO: drop support of with-boundary-links class once wrappers are implemented
+  // first case: boundaryLinks = false
+  li.page-item:nth-of-type(1) {
+    @include ltr {
+      @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-previous-icon-code);
+    }
+    @include rtl {
+      @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-next-icon-code);
+    }
+  }
+
+  li.page-item:nth-last-of-type(1) {
+    @include ltr {
+      @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-next-icon-code);
+    }
+    @include rtl {
+      @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-previous-icon-code);
+    }
+  }
+
+  .page-item + .page-item {
+    margin-inline-start: var(--df-spacing-2);
+  }
+
+  &.pagination-lg {
+    @include pagination-mixins.pagination-sizing(
+      3rem,
+      var(--df-borderRadius-main-large),
+      var(--df-typo-sizing-large),
+      calc(2.875rem + 2px)
+    );
+  }
+
+  &.pagination-sm {
+    @include pagination-mixins.pagination-sizing(
+      1.875rem,
+      var(--df-borderRadius-main-small),
+      var(--df-typo-sizing-small),
+      calc(1.75rem + 2px)
+    );
+  }
+
+  // TODO: Second Part
+  // second case: boundaryLinks = true
+  .with-boundary-links & {
+    .page-item:nth-of-type(1) {
+      @include ltr {
+        @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-first-icon-code);
+      }
+      @include rtl {
+        @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-last-icon-code);
+      }
+    }
+
+    .page-item:nth-of-type(2) {
+      @include ltr {
+        @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-previous-icon-code);
+      }
+      @include rtl {
+        @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-next-icon-code);
+      }
+    }
+
+    .page-item:nth-last-of-type(2) {
+      @include ltr {
+        @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-next-icon-code);
+      }
+      @include rtl {
+        @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-previous-icon-code);
+      }
+    }
+
+    .page-item:nth-last-of-type(1) {
+      @include ltr {
+        @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-last-icon-code);
+      }
+      @include rtl {
+        @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-first-icon-code);
+      }
+    }
+  }
+}

package/scss/components/pagination/_pagination.variables.scss

@@ -0,0 +1,20 @@
+$pagination-padding-y: 0 !default;
+$pagination-padding-x: var(--df-spacing-3) !default;
+$pagination-padding-y-sm: 0 !default;
+$pagination-padding-x-sm: var(--df-spacing-3) !default;
+$pagination-padding-y-lg: 0 !default;
+$pagination-padding-x-lg: var(--df-spacing-3) !default;
+
+$pagination-bg: var(--df-color-neutral-alt-default-background) !default;
+$pagination-color: var(--df-color-neutral-alt-default-foreground) !default;
+
+$pagination-focus-bg: var(--df-color-inert-neutral-main-background) !default;
+
+$pagination-hover-color: var(--df-color-primary-alt-hovered-foreground) !default;
+$pagination-hover-bg: var(--df-color-primary-alt-hovered-background) !default;
+
+$pagination-disabled-color: var(--df-color-disabled-main-foreground) !default;
+$pagination-disabled-bg: var(--df-color-inert-neutral-main-background) !default;
+
+$pagination-active-color: var(--df-color-primary-alt-active-foreground) !default;
+$pagination-active-bg: var(--df-color-primary-alt-active-background) !default;

package/scss/components/pagination/_pagination_container.scss

@@ -0,0 +1,17 @@
+#{$df-css-namespace-selector} {
+  .active > .page-link {
+    z-index: 3;
+    color: var(--#{$prefix}pagination-active-color);
+    @include gradient-bg(var(--#{$prefix}pagination-active-bg));
+    border-color: var(--#{$prefix}pagination-active-border-color);
+    &:hover {
+      background-color: var(--#{$prefix}pagination-hover-bg);
+    }
+  }
+  .disabled > .page-link {
+    color: var(--#{$prefix}pagination-disabled-color);
+    pointer-events: none;
+    background-color: var(--#{$prefix}pagination-disabled-bg);
+    border-color: var(--#{$prefix}pagination-disabled-border-color);
+  }
+}

package/scss/components/popover/_popover.mixins.scss

@@ -0,0 +1,13 @@
+@mixin popover-sizing($padding, $gap, $headerFontSize, $bodyFontSize, $borderRadius) {
+  padding: $padding;
+  border-radius: $borderRadius;
+
+  .popover-header {
+    font-size: $headerFontSize;
+    margin-bottom: $gap;
+  }
+
+  .popover-body {
+    font-size: $bodyFontSize;
+  }
+}

package/scss/components/popover/_popover.scss

@@ -0,0 +1,65 @@
+@use 'popover.mixins' as popover-mixins;
+
+.popover {
+  // have to set this as $enable-shadows is false
+  box-shadow: var(--df-popover-box-shadow);
+
+  @include media-breakpoint-down(sm) {
+    --df-popover-max-width: 270px;
+  }
+
+  @include popover-mixins.popover-sizing(
+    var(--df-spacing-5),
+    var(--df-spacing-3),
+    var(--df-typo-sizing-2xlarge),
+    var(--df-typo-sizing-default),
+    var(--df-borderRadius-main-medium)
+  );
+
+  .popover-header {
+    border-bottom: none;
+    line-height: 1.3;
+  }
+
+  .popover-body {
+    line-height: 1.25;
+  }
+
+  &.popover-sm {
+    @include popover-mixins.popover-sizing(
+      var(--df-spacing-4),
+      var(--df-spacing-2),
+      var(--df-typo-sizing-large),
+      var(--df-typo-sizing-small),
+      var(--df-borderRadius-main-small)
+    );
+  }
+
+  &.popover-lg {
+    @include popover-mixins.popover-sizing(
+      var(--df-spacing-6),
+      var(--df-spacing-4),
+      var(--df-typo-sizing-3xlarge),
+      var(--df-typo-sizing-large),
+      var(--df-borderRadius-main-large)
+    );
+  }
+}
+
+// BS override
+.bs-popover-top > .popover-arrow {
+  bottom: -1 * $popover-arrow-height;
+}
+
+.bs-popover-end > .popover-arrow {
+  left: -1 * $popover-arrow-height;
+}
+
+.bs-popover-bottom > .popover-arrow {
+  top: -1 * $popover-arrow-height;
+}
+
+.bs-popover-start > .popover-arrow {
+  right: -1 * $popover-arrow-height;
+}
+// End of override

package/scss/components/popover/_popover.variables.scss

@@ -0,0 +1,17 @@
+@use '../../new-brand-common.variables' as df;
+
+$popover-font-size: var(--df-typo-sizing-default) !default;
+$popover-max-width: 50vw !default;
+$popover-border-color: var(--df-color-inert-neutral-main-border) !default;
+$popover-border-radius: var(--df-borderRadius-main-medium) !default;
+$popover-box-shadow: df.$df-box-shadow !default;
+
+$popover-bg: var(--df-color-inert-neutral-main-background) !default;
+$popover-header-bg: var(--df-color-inert-neutral-main-background) !default;
+$popover-header-padding-y: 0 !default;
+$popover-header-padding-x: 0 !default;
+
+$popover-body-padding-y: 0 !default;
+$popover-body-padding-x: 0 !default;
+
+$popover-arrow-width: 1.3rem !default;

package/scss/components/popover/_popover_container.scss

@@ -0,0 +1,214 @@
+@import 'popover.mixin';
+
+// TODO update this file with the new file from bootstrap
+// Ref file is popover.scss in BS folder.
+// Attention I backport the fix from the override in popover.scss in this file too
+#{$df-css-namespace-selector} {
+  &.popover {
+    @extend .popover;
+
+    // scss-docs-start popover-css-vars
+    --#{$prefix}popover-zindex: #{$zindex-popover};
+    --#{$prefix}popover-max-width: #{$popover-max-width};
+    @include rfs($popover-font-size, --#{$prefix}popover-font-size);
+    --#{$prefix}popover-bg: #{$popover-bg};
+    --#{$prefix}popover-border-width: #{$popover-border-width};
+    --#{$prefix}popover-border-color: #{$popover-border-color};
+    --#{$prefix}popover-border-radius: #{$popover-border-radius};
+    --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
+    --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
+    --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
+    --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
+    @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
+    --#{$prefix}popover-header-color: #{$popover-header-color};
+    --#{$prefix}popover-header-bg: #{$popover-header-bg};
+    --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
+    --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
+    --#{$prefix}popover-body-color: #{$popover-body-color};
+    --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
+    --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
+    --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
+
+    --#{$prefix}popover-padding: #{$df-popover-padding};
+    --#{$prefix}popover-header-line-height: #{$df-popover-header-line-height};
+    --#{$prefix}popover-header-margin: #{$df-popover-header-default-margin};
+    --#{$prefix}popover-body-margin: #{$df-popover-body-default-margin};
+    --#{$prefix}popover-header-font-size: #{$h3-font-size};
+    --#{$prefix}popover-body-font-size: #{$font-size-base};
+    // scss-docs-end popover-css-vars
+
+    z-index: var(--#{$prefix}popover-zindex);
+    display: block;
+    max-width: var(--#{$prefix}popover-max-width);
+    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+    // So reset our font and text properties to avoid inheriting weird values.
+    @include reset-text();
+    @include font-size(var(--#{$prefix}popover-font-size));
+    // Allow breaking very long words so they don't overflow the popover's bounds
+    word-wrap: break-word;
+    background-color: var(--#{$prefix}popover-bg);
+    background-clip: padding-box;
+    border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
+    @include border-radius(var(--#{$prefix}popover-border-radius));
+    @include box-shadow(var(--#{$prefix}popover-box-shadow));
+
+    &.popover-arrow {
+      display: block;
+      width: var(--#{$prefix}popover-arrow-width);
+      height: var(--#{$prefix}popover-arrow-height);
+
+      &::before,
+      &::after {
+        position: absolute;
+        display: block;
+        content: '';
+        border-color: transparent;
+        border-style: solid;
+        border-width: 0;
+      }
+    }
+  }
+
+  &.bs-popover-top {
+    > .popover-arrow {
+      bottom: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
+
+      &::before,
+      &::after {
+        border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
+      }
+
+      &::before {
+        bottom: 0;
+        border-top-color: var(--#{$prefix}popover-arrow-border);
+      }
+
+      &::after {
+        bottom: var(--#{$prefix}popover-border-width);
+        border-top-color: var(--#{$prefix}popover-bg);
+      }
+    }
+  }
+
+  /* rtl:begin:ignore */
+  &.bs-popover-end {
+    > .popover-arrow {
+      left: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
+      width: var(--#{$prefix}popover-arrow-height);
+      height: var(--#{$prefix}popover-arrow-width);
+
+      &::before,
+      &::after {
+        border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height)
+          calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
+      }
+
+      &::before {
+        left: 0;
+        border-right-color: var(--#{$prefix}popover-arrow-border);
+      }
+
+      &::after {
+        left: var(--#{$prefix}popover-border-width);
+        border-right-color: var(--#{$prefix}popover-bg);
+      }
+    }
+  }
+
+  /* rtl:end:ignore */
+
+  &.bs-popover-bottom {
+    > .popover-arrow {
+      top: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
+
+      &::before,
+      &::after {
+        border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+      }
+
+      &::before {
+        top: 0;
+        border-bottom-color: var(--#{$prefix}popover-arrow-border);
+      }
+
+      &::after {
+        top: var(--#{$prefix}popover-border-width);
+        border-bottom-color: var(--#{$prefix}popover-bg);
+      }
+    }
+
+    // This will remove the popover-header's border just below the arrow
+    .popover-header::before {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      display: block;
+      width: var(--#{$prefix}popover-arrow-width);
+      margin-left: calc(var(--#{$prefix}popover-arrow-width) * -0.5); // stylelint-disable-line function-disallowed-list
+      content: '';
+      border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
+    }
+  }
+
+  /* rtl:begin:ignore */
+  &.bs-popover-start {
+    > .popover-arrow {
+      right: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
+      width: var(--#{$prefix}popover-arrow-height);
+      height: var(--#{$prefix}popover-arrow-width);
+
+      &::before,
+      &::after {
+        border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0
+          calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+      }
+
+      &::before {
+        right: 0;
+        border-left-color: var(--#{$prefix}popover-arrow-border);
+      }
+
+      &::after {
+        right: var(--#{$prefix}popover-border-width);
+        border-left-color: var(--#{$prefix}popover-bg);
+      }
+    }
+  }
+
+  /* rtl:end:ignore */
+
+  &.bs-popover-auto {
+    &[data-popper-placement^='top'] {
+      @extend .bs-popover-top;
+    }
+    &[data-popper-placement^='right'] {
+      @extend .bs-popover-end;
+    }
+    &[data-popper-placement^='bottom'] {
+      @extend .bs-popover-bottom;
+    }
+    &[data-popper-placement^='left'] {
+      @extend .bs-popover-start;
+    }
+  }
+
+  // Offset the popover to account for the popover arrow
+  &.popover-header {
+    padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
+    margin-bottom: 0; // Reset the default from Reboot
+    @include font-size(var(--#{$prefix}popover-header-font-size));
+    color: var(--#{$prefix}popover-header-color);
+    background-color: var(--#{$prefix}popover-header-bg);
+    border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
+    @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &.popover-body {
+    padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
+    color: var(--#{$prefix}popover-body-color);
+  }
+}

package/scss/components/progressbar/_progressbar.scss

@@ -0,0 +1,52 @@
+.progress {
+  border: 0.5px solid var(--df-color-progressIndicator-main-border);
+}
+
+.progress-bar {
+  position: relative;
+  border-radius: $progress-border-radius;
+
+  &.infinite-animation {
+    width: 20%;
+    animation: 2.2s linear infinite-animation infinite;
+  }
+}
+
+@keyframes infinite-animation {
+  //The progressbar is hidden at the beginning because it is too far on the left
+  0% {
+    inset-inline-start: -35%;
+  }
+  // At 75% of the animation time frame, the progressbar is hidden because it is too far on the right
+  75% {
+    inset-inline-start: 100%;
+  }
+  // Between 75% and 100% of the time frame, the progressbar stays hidden
+  100% {
+    inset-inline-start: 100%;
+  }
+}
+
+.df-dark-background-version {
+  .progress {
+    --df-progress-bg: var(--df-color-inert-neutral-alt-background);
+    border-color: var(--df-color-progressIndicator-alt-border);
+  }
+  .progress-bar {
+    --df-progress-bar-bg: var(--df-color-primary-alt-default-background);
+  }
+}
+
+.progressbar-text {
+  color: var(--df-color-subtext-foreground);
+}
+
+// Flag angular
+.df-progressindicator-container {
+  df-progressbar {
+    flex-grow: 1;
+    .progress {
+      border-radius: 0;
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+// fixed value from Figma, no token
+$progress-border-radius: 0.9375rem !default;
+$progress-font-size: var(--df-font-size-small) !default;
+$progress-bg: var(--df-color-inert-neutral-main-background) !default;
+$progress-bar-bg: var(--df-color-primary-main-default-background) !default;
+$progress-height: 0.3125rem !default;

package/scss/components/radio/_radio.scss

@@ -0,0 +1,63 @@
+@use '../../new-brand-common.variables.scss' as df;
+
+fieldset[role='radiogroup'] > legend {
+  font-weight: var(--df-typo-weight-regular);
+  font-size: var(--df-typoe-size-default);
+  display: block;
+  margin-bottom: var(--df-spacing-3);
+}
+
+.form-check-input[type='radio'] {
+  --df-box-shadow-color: var(--df-color-primary-main-default-border);
+
+  &:checked {
+    background-image: none;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      background-image: none;
+      inset: 0;
+      background-color: var(--df-color-neutral-alt-default-background);
+      mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2.5' fill='black'/></svg>");
+      mask-repeat: no-repeat;
+      mask-size: contain;
+    }
+  }
+
+  cursor: pointer;
+
+  &:disabled {
+    pointer-events: auto;
+    cursor: not-allowed;
+    border-color: var(--df-color-disabled-main-border);
+    background-color: var(--df-color-disabled-main-background);
+
+    &:checked {
+      background-color: var(--df-color-disabled-alt-background);
+      &::after {
+        background-color: var(--df-color-neutral-alt-default-background);
+      }
+    }
+
+    & ~ .form-check-label {
+      color: var(--df-color-disabled-main-foreground);
+      cursor: not-allowed;
+    }
+  }
+
+  :is(&:focus, .form-check &:focus) {
+    box-shadow: none;
+    outline: none;
+  }
+
+  :is(&:focus-visible, .form-check &:focus-visible) {
+    &:not(:checked):not(.is-invalid) {
+      --df-box-shadow-color: var(--df-color-input-border);
+    }
+
+    box-shadow: #{df.$df-focus-box-shadow};
+    outline: none;
+  }
+}

package/scss/components/rating/_rating.mixins.scss

@@ -0,0 +1,17 @@
+@mixin rating-color($variant) {
+  --df-box-shadow-color: var(--df-color-#{$variant}-alt-default-border);
+
+  color: var(--df-color-#{$variant}-alt-default-foreground);
+  background-color: var(--df-color-#{$variant}-alt-default-background);
+
+  &:not([aria-disabled='true']):not([aria-readonly='true']) {
+    &:hover {
+      color: var(--df-color-#{$variant}-alt-hovered-foreground);
+      --df-box-shadow-color: var(--df-color-#{$variant}-alt-hovered-border);
+    }
+    &:active {
+      color: var(--df-color-#{$variant}-alt-pressed-foreground);
+      --df-box-shadow-color: var(--df-color-#{$variant}-alt-pressed-border);
+    }
+  }
+}