@design-factory/styles 21.0.0-next.0

package/scss/components/rating/_rating.scss

@@ -0,0 +1,51 @@
+@use '../../new-brand-common.variables.scss' as df;
+@use 'rating.mixins' as rating-mixins;
+
+// flag angular
+// stylelint-disable-next-line selector-type-no-unknown
+ngb-rating {
+  // the spacing-3 is not in Figma but just looks better
+  margin: var(--df-spacing-2) var(--df-spacing-3);
+  // fixed value in Figma, not in design tokens
+  border-radius: 2px;
+  gap: var(--df-spacing-2);
+  line-height: 1.25;
+
+  @include transition(box-shadow 0.15s ease-in-out);
+
+  &:not([aria-disabled='true']):focus-visible {
+    outline: none;
+    box-shadow: #{df.$df-focus-box-shadow};
+  }
+
+  @include rating-mixins.rating-color('primary');
+
+  &[aria-disabled='true'] {
+    color: var(--df-color-disabled-main-foreground);
+    cursor: not-allowed;
+
+    span {
+      cursor: not-allowed !important;
+    }
+  }
+
+  &.ng-invalid {
+    @include rating-mixins.rating-color('danger');
+  }
+
+  .df-rating-decimal {
+    position: relative;
+    display: inline-block;
+
+    .df-rating-decimal-half {
+      inset-inline-start: 0;
+      position: absolute;
+      display: inline-block;
+      overflow: hidden;
+    }
+  }
+
+  .df-rating-tiny {
+    color: var(--df-color-neutral-alt-default-foreground);
+  }
+}

package/scss/components/scrollspy/_scrollspy.scss

@@ -0,0 +1,42 @@
+@use '../../new-brand-common.variables' as df;
+
+// All bootstrap sass var overrides are found in the file _tabs.variables.scss
+
+// Todo should we wrap this into a class specific for scrollspy ?
+.nav.nav-pills .nav-link {
+  --df-inner-box-shadow-color: var(--df-color-neutral-alt-default-background);
+
+  padding-inline-start: var(--df-spacing-3);
+  padding-top: 0.28125rem; // 4.5px not a token in Figma
+  padding-bottom: 0.28125rem; // 4.5px not a token in Figma
+  margin-block-end: 1px;
+  font-size: var(--df-typo-sizing-small);
+  display: flex;
+
+  &.active {
+    --df-inner-box-shadow-color: var(--df-color-primary-alt-active-background);
+
+    font-weight: var(--df-typo-weight-bold);
+
+    .df-icon-inlink {
+      color: var(--df-color-neutral-alt-active-foreground) !important;
+    }
+  }
+
+  &:focus-visible {
+    --df-box-shadow-color: var(--df-color-focus-main-border);
+
+    outline: none;
+    box-shadow: df.$df-focus-inset-box-shadow;
+
+    &:hover {
+      --df-inner-box-shadow-color: var(--df-color-primary-alt-hovered-background);
+    }
+  }
+}
+.nav.nav-pills:not([role='tablist']) {
+  // remove default link color
+  a.nav-link {
+    border-bottom: 0;
+  }
+}

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

@@ -0,0 +1,7 @@
+@use 'sass:selector';
+
+@mixin ngs-root($child) {
+  @at-root #{selector.replace(&, '.ng-select', '.ng-select' + $child)} {
+    @content;
+  }
+}

package/scss/components/select/_select.scss

@@ -0,0 +1,531 @@
+@use '../../new-brand-common.variables.scss' as df;
+@use 'select.mixin' as select-mixins;
+
+//TODO: we are forced to use the color instead of the token: https://github.com/Amadeus-xDLC/design-factory.design-system/issues/2840
+html:root[data-df-theme='dark'] {
+  .form-select {
+    --df-form-select-bg-img: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fafafa' d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E");
+    &:not([multiple]):disabled {
+      --df-form-select-bg-img: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23999999' d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E");
+    }
+  }
+}
+
+/* Native select */
+.form-select {
+  --df-box-shadow-color: var(--df-color-input-border);
+  --df-form-select-bg-img: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%231a1a1a' d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E");
+
+  @each $state, $name in ('invalid': 'danger', 'warning': 'warning') {
+    &.is-#{$state} {
+      --df-box-shadow-color: var(--df-color-#{$name}-alt-default-border);
+    }
+  }
+  &:not([multiple]) {
+    //we don't have multiple basic select in df, but I prefer to limit it to avoid unexpected behaviours
+    @include rtl {
+      padding: $form-select-padding-y $form-select-padding-x $form-select-padding-y $form-select-indicator-padding;
+      background-position: left 0.5rem center;
+    }
+  }
+
+  &:focus {
+    box-shadow: none;
+    border-color: unset;
+  }
+
+  &:focus-visible {
+    box-shadow: df.$df-focus-box-shadow;
+  }
+
+  &:not([disabled]) {
+    cursor: pointer;
+
+    > option {
+      cursor: pointer;
+
+      &:checked {
+        background-color: var(--df-color-primary-alt-active-background);
+        color: var(--df-color-primary-alt-active-foreground);
+      }
+
+      &:not(:disabled):hover {
+        background-color: var(--df-color-primary-alt-hovered-background);
+        color: var(--df-color-primary-alt-hovered-foreground);
+      }
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &:not([multiple]):disabled {
+    --df-form-select-bg-img: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23b3b3b3' d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E");
+  }
+}
+
+/* Ng-select select */
+// Use this to remove the arrow from the ng-select widget.
+.df-selectno-arrow > .ng-select-container > .ng-arrow-wrapper {
+  display: none;
+}
+
+.highlighted {
+  color: var(--df-color-primary-alt-default-foreground);
+  text-decoration: inherit !important;
+
+  .ng-option-marked & {
+    color: var(--df-color-primary-alt-hovered-foreground);
+  }
+}
+
+// ng-select
+// style taken directly from the scss file of the library
+// Override is elements that was changed from the default look
+.ng-select {
+  $df-select-value-margin-sm: 0.125rem;
+  $df-select-value-margin-lg: 0.5rem;
+
+  --df-box-shadow-color: #{$input-focus-border-color};
+
+  &.form-control {
+    padding: 0;
+    border: none;
+    height: initial;
+  }
+
+  &.form-control-lg {
+    padding: 0;
+
+    :is(.ng-select-container, .ng-dropdown-panel) {
+      border-radius: var(--df-borderRadius-main-large);
+    }
+  }
+
+  &.form-control-sm {
+    padding: 0;
+
+    :is(.ng-select-container, .ng-dropdown-panel) {
+      border-radius: var(--df-borderRadius-main-small);
+    }
+  }
+
+  .ng-option-selected {
+    background-color: var(--df-color-primary-alt-active-background);
+    color: var(--df-color-primary-alt-active-foreground);
+  }
+
+  .ng-option-marked {
+    // ng-option-marked is equivalent to hover
+    background-color: var(--df-color-primary-alt-hovered-background);
+    color: var(--df-color-primary-alt-hovered-foreground);
+  }
+
+  &:not(.ng-select-disabled) {
+    .ng-input {
+      cursor: pointer;
+
+      & > input:not(:disabled) {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .ng-value .badge:not(.disabled) {
+    cursor: inherit;
+  }
+
+  .ng-arrow:before {
+    font-family: 'Font Awesome 6 Pro', sans-serif;
+    content: '\f0d7';
+    font-weight: 900;
+    font-size: 1rem;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  &.ng-select-focused > .ng-select-container {
+    outline: 0;
+    box-shadow: df.$df-focus-box-shadow;
+  }
+
+  &.ng-select-disabled > .ng-select-container {
+    background-color: var(--df-color-disabled-main-background);
+    color: var(--df-color-disabled-main-foreground);
+    border-color: var(--df-color-disabled-main-border);
+    cursor: not-allowed;
+
+    .ng-arrow-wrapper {
+      cursor: not-allowed;
+    }
+
+    .ng-value {
+      background-color: var(--df-color-disabled-main-background) !important;
+    }
+  }
+
+  &.df-ng-select-readonly {
+    > .ng-select-container {
+      background-color: var(--df-color-disabled-main-background);
+      color: var(--df-color-inert-neutral-readonly-foreground);
+      border-color: var(--df-color-disabled-main-border);
+    }
+  }
+
+  @each $state, $name in ('invalid': 'danger', 'warning': 'warning') {
+    &.is-#{$state} {
+      --df-box-shadow-color: var(--df-color-#{$name}-alt-default-border);
+
+      .ng-select-container {
+        border-color: var(--df-color-#{$name}-alt-default-border);
+      }
+    }
+  }
+
+  .ng-has-value .ng-placeholder {
+    display: none;
+  }
+
+  .ng-select-container {
+    background-color: var(--df-color-inert-neutral-main-background);
+    border-radius: var(--df-borderRadius-main-medium);
+    border: 1px solid var(--df-color-input-border);
+
+    .ng-value-container {
+      max-width: 100%;
+      overflow: hidden;
+      align-items: center;
+
+      .ng-placeholder {
+        font-style: italic;
+        color: var(--df-color-subtext-foreground);
+        // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+        opacity: 1;
+      }
+    }
+  }
+
+  &.ng-select-single {
+    &.form-control-lg .ng-select-container {
+      height: $input-height-lg; // in single case we will only have one line
+    }
+
+    &.form-control-sm .ng-select-container {
+      height: $input-height-sm; // in single case we will only have one line
+    }
+
+    .ng-select-container {
+      height: $input-height;
+
+      .ng-value-container {
+        padding-inline-start: var(--df-spacing-3);
+
+        .ng-input {
+          inset-inline-start: 0;
+          padding-inline-start: var(--df-spacing-3);
+          padding-inline-end: calc(var(--df-spacing-3) + 1.5rem);
+
+          @include select-mixins.ngs-root('.ng-select-clearable') {
+            padding-inline-end: calc(var(--df-spacing-3) + 3rem);
+          }
+        }
+      }
+    }
+  }
+
+  &.ng-select-multiple {
+    &.form-control-lg {
+      height: initial; // in single case we will only have one line
+
+      > .ng-select-container .ng-value-container {
+        min-height: calc($input-height-lg - 2px);
+
+        .ng-value {
+          font-size: inherit;
+        }
+      }
+    }
+
+    &.form-control-sm {
+      height: initial; // in single case we will only have one line
+
+      > .ng-select-container {
+        height: inherit;
+
+        .ng-value-container {
+          min-height: calc($input-height-sm - 2px);
+        }
+      }
+    }
+
+    &:not([disabled]):not(.df-ng-select-readonly) .ng-select-container {
+      cursor: pointer;
+    }
+
+    .ng-select-container {
+      .ng-value-container {
+        padding-inline-start: var(--df-spacing-3);
+        height: fit-content;
+
+        .ng-value {
+          display: flex;
+          align-items: center;
+          margin-top: $input-padding-y;
+          margin-bottom: $input-padding-y;
+          max-width: 100%;
+          padding-inline-end: var(--df-spacing-3);
+          color: var(--df-color-inert-neutral-main-foreground);
+
+          @include select-mixins.ngs-root('.form-control-lg') {
+            margin-top: $df-select-value-margin-lg;
+            margin-bottom: $df-select-value-margin-lg;
+          }
+          @include select-mixins.ngs-root('.form-control-sm') {
+            margin-top: $df-select-value-margin-sm;
+            margin-bottom: $df-select-value-margin-sm;
+          }
+
+          &.ng-value-disabled {
+            cursor: not-allowed;
+          }
+
+          .ng-value-label {
+            display: inline-block;
+          }
+        }
+
+        .ng-input {
+          > input {
+            padding: 0;
+          }
+
+          margin-top: $input-padding-y;
+          margin-bottom: $input-padding-y;
+          @include select-mixins.ngs-root('.form-control-lg') {
+            margin-top: $df-select-value-margin-lg;
+            margin-bottom: $df-select-value-margin-lg;
+          }
+          @include select-mixins.ngs-root('.form-control-sm') {
+            margin-top: $df-select-value-margin-sm;
+            margin-bottom: $df-select-value-margin-sm;
+          }
+        }
+      }
+    }
+
+    .ng-dropdown-panel .ng-dropdown-panel-items {
+      .ng-optgroup,
+      .ng-option {
+        white-space: normal;
+        word-break: normal;
+        overflow-wrap: anywhere;
+      }
+    }
+  }
+
+  .ng-clear-wrapper {
+    width: 1.5rem !important;
+    height: 1.5rem;
+    display: flex;
+    margin-top: $input-padding-y;
+    margin-bottom: $input-padding-y;
+
+    @include select-mixins.ngs-root('.form-control-lg') {
+      margin-top: calc(($input-height-lg - 2px - 1.5rem) / 2);
+    }
+    @include select-mixins.ngs-root('.form-control-sm') {
+      margin-top: $df-select-value-margin-sm;
+      margin-bottom: $df-select-value-margin-sm;
+    }
+    margin-inline-start: 0.4rem;
+    @include select-mixins.ngs-root('.df-selectno-arrow') {
+      margin-inline-end: var(--df-spacing-3);
+    }
+
+    &:after {
+      content: '\f00d';
+      font-family: 'Font Awesome 6 Pro', sans-serif;
+      font-size: 1rem;
+      border-radius: 50%;
+      display: flex;
+      width: 1.5rem;
+      height: 1.5rem;
+      line-height: 1.5rem;
+      justify-content: center;
+    }
+
+    &:focus {
+      outline: none;
+
+      &:after {
+        background-color: var(--df-color-inert-neutral-main-background);
+        box-shadow: df.$df-focus-box-shadow;
+      }
+    }
+
+    &:hover {
+      &:after {
+        background-color: var(--df-color-primary-alt-hovered-background);
+        cursor: pointer;
+      }
+    }
+
+    > .ng-clear {
+      display: none !important;
+    }
+  }
+
+  .ng-arrow-wrapper {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    margin-top: $input-padding-y;
+    margin-inline-start: 0.3rem;
+    margin-inline-end: 0.375rem;
+    display: flex;
+
+    @include select-mixins.ngs-root('.form-control-lg') {
+      margin-top: $df-select-value-margin-lg;
+      font-size: var(--df-typo-sizing-default); // in order to have the arrow verticaly aligned in large
+    }
+    @include select-mixins.ngs-root('.form-control-sm') {
+      margin-top: $df-select-value-margin-sm;
+    }
+
+    .ng-arrow {
+      width: 1.5rem !important;
+      height: 1.5rem !important;
+    }
+  }
+
+  &:not(.ng-select-disabled):not(.df-ng-select-readonly) {
+    .ng-arrow-wrapper:hover {
+      background-color: var(--df-color-primary-alt-hovered-background);
+    }
+  }
+
+  .ng-dropdown-panel {
+    background-color: var(--df-color-inert-neutral-main-background);
+    border-radius: var(--df-borderRadius-main-medium);
+    box-shadow: df.$df-box-shadow;
+    overflow: auto;
+    width: initial;
+    min-width: 100%;
+
+    .ng-option + .ng-optgroup {
+      border-top: 1px solid var(--df-color-input-border);
+    }
+
+    &.ng-select-bottom {
+      top: calc(100% + #{$input-btn-focus-width} + 1px);
+
+      .ng-dropdown-panel-items {
+        .ng-option {
+          white-space: initial;
+        }
+      }
+    }
+
+    &.ng-select-top {
+      bottom: calc(100% + #{$input-btn-focus-width} + 1px);
+      margin-bottom: -1px;
+    }
+
+    .ng-dropdown-panel-items {
+      margin-bottom: 0px;
+
+      .ng-optgroup,
+      .ng-option {
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        .form-check {
+          margin-bottom: 0;
+          padding-bottom: $form-check-margin-bottom;
+          padding-inline-start: $form-check-padding-start + 0.5rem;
+          margin-inline-start: -0.5em;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .ng-optgroup {
+        user-select: none;
+        padding: 0.325rem 1rem;
+        font-weight: 500;
+        cursor: pointer;
+
+        @include select-mixins.ngs-root('.form-control-lg') {
+          padding: 0.525rem 1rem;
+        }
+        @include select-mixins.ngs-root('.form-control-sm') {
+          padding: 0.138rem 1rem;
+        }
+
+        &.ng-option-disabled {
+          cursor: default;
+        }
+
+        &.ng-option-selected {
+          font-weight: 400;
+        }
+      }
+
+      .ng-option {
+        padding: 0.325rem 1rem;
+        @include select-mixins.ngs-root('.form-control-lg') {
+          padding: 0.525rem 1rem;
+        }
+        @include select-mixins.ngs-root('.form-control-sm') {
+          padding: 0.138rem 1rem;
+        }
+
+        .ng-option-label {
+          display: block;
+          @include select-mixins.ngs-root('.form-control-lg') {
+            height: 1.95rem;
+            line-height: 1.95rem;
+          }
+          @include select-mixins.ngs-root('.form-control-sm') {
+            height: 1.6rem;
+            line-height: 1.6rem;
+          }
+        }
+
+        &.ng-option-selected {
+          .ng-option-label {
+            font-weight: 400;
+          }
+        }
+
+        &.ng-option-disabled {
+          color: var(--df-color-disabled-main-foreground);
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}
+
+.input-group {
+  .ng-select {
+    &.ng-select-focused {
+      z-index: 1001; // this is the actual value of ng-select.component.scss
+    }
+
+    &:not(:first-child) {
+      .ng-select-container {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
+    }
+
+    &:not(:last-child) {
+      .ng-select-container {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+      }
+    }
+  }
+}

package/scss/components/select/_select.variables.scss

@@ -0,0 +1,18 @@
+$form-select-bg-size: 16px 16px !default; // In pixels because image dimensions
+$form-select-indicator: str-replace(
+  url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E"),
+  '#',
+  '%23'
+) !default;
+
+$form-select-disabled-color: var(--df-color-disabled-main-foreground) !default;
+$form-select-disabled-bg: var(--df-color-disabled-main-background) !default;
+
+$form-select-color: var(--df-color-inert-neutral-main-foreground) !default;
+$form-select-bg: var(--df-color-inert-neutral-main-background) !default;
+
+$form-select-padding-x: $input-padding-x !default;
+$form-select-indicator-padding: calc(#{$form-select-padding-x} * 3) !default; // Extra padding for background-image
+$form-select-feedback-icon-padding-end: calc(
+  #{$form-select-padding-x} * 2.5 + #{$form-select-indicator-padding}
+) !default;

package/scss/components/separator/_separator.scss

@@ -0,0 +1,8 @@
+.vertical-separator {
+  width: 1px;
+  color: var(--df-color-inert-neutral-main-border);
+  background-color: currentColor;
+  display: inline-block;
+  height: 100%;
+  opacity: $hr-opacity;
+}

package/scss/components/separator/_separator.variables.scss

@@ -0,0 +1,5 @@
+$hr-opacity: 1 !default;
+$hr-border-color: var(--df-color-inert-neutral-main-border) !default;
+$hr-border-width: 1px !default;
+$hr-margin-y: 1.5rem !default;
+$hr-color: initial !default;