@design-factory/styles 21.0.0-next.0

package/scss/components/checkbox/_checkbox.scss

@@ -0,0 +1,155 @@
+@use '../../new-brand-common.variables.scss' as df;
+
+.form-check {
+  padding-left: 0;
+  padding-right: 0;
+  // the padding is computed from the size of the checkbox (1rem) + the spacing between checkbox and label (var(--df-spacing-3))
+  padding-inline-start: calc(1rem + var(--df-spacing-3));
+
+  .form-check-input {
+    float: inline-start;
+    margin-left: 0;
+    margin-right: 0;
+    // the checkbox needs the negative margin to be properly on the left
+    margin-inline-start: calc(-1rem - var(--df-spacing-3));
+
+    & ~ .invalid-feedback {
+      // same for the invalid feedback, so that it is aligned with the checkbox above
+      margin-inline-start: calc(-1rem - var(--df-spacing-3));
+    }
+  }
+
+  .form-check-label {
+    line-height: 1.5;
+  }
+}
+
+.form-check-input[type='checkbox'] {
+  --df-box-shadow-color: var(--df-color-primary-main-default-border);
+
+  cursor: pointer;
+
+  &:checked,
+  &:indeterminate {
+    background-image: none;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: var(--df-color-primary-main-default-foreground);
+      mask-repeat: no-repeat;
+      mask-size: contain;
+      mask-position: center center;
+    }
+  }
+
+  &:checked::after {
+    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 14 12'%3e%3cpath d='M3.265 8a.995.995 0 0 1-.717-.306L.297 5.369a1.071 1.071 0 0 1 0-1.48.99.99 0 0 1 1.434 0l1.534 1.584L8.27.307a.99.99 0 0 1 1.433 0 1.07 1.07 0 0 1 0 1.482l-5.72 5.905A.995.995 0 0 1 3.266 8' fill='%23fff' stroke-width='0' fill-rule='evenodd'/%3e%3c/svg%3e");
+  }
+
+  &:indeterminate::after {
+    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 0 14 4'%3e%3crect x='3' y='6.75' width='10' height='2.5' rx='1.25' transform='translate%28-3 -6%29' fill='%23fff' fill-rule='nonzero'/%3e%3c/svg%3e");
+  }
+
+  &:disabled {
+    pointer-events: auto;
+    cursor: not-allowed;
+    border-color: var(--df-color-disabled-main-border);
+    background-color: var(--df-color-disabled-alt-background);
+
+    &:not(:checked):not(:indeterminate) {
+      background-color: var(--df-color-disabled-main-background);
+
+      &::after {
+        background-color: var(--df-color-disabled-main-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):not(:indeterminate) {
+      --df-box-shadow-color: var(--df-color-input-border);
+    }
+
+    box-shadow: #{df.$df-focus-box-shadow};
+    outline: none;
+  }
+}
+
+.form-check:has(+ .form-check),
+.form-check + .form-check {
+  margin-bottom: var(--df-spacing-3);
+}
+
+.form-sm {
+  .form-check:has(+ .form-check),
+  .form-check + .form-check {
+    margin-bottom: var(--df-spacing-2);
+  }
+
+  .form-check {
+    font-size: var(--df-typo-sizing-small);
+    min-height: calc(var(--df-typo-sizing-small) * $line-height-base);
+    padding-inline-start: calc(0.875rem + var(--df-spacing-3));
+
+    .form-check-input {
+      margin-inline-start: calc(-0.875rem - var(--df-spacing-3));
+      // centering the checkbox vertically with the label (if it is one line)
+      // the height of the label (one line) is line-height * font-size
+      margin-top: calc((var(--df-typo-sizing-small) * $line-height-base - 0.875rem) * 0.5);
+
+      & ~ .invalid-feedback {
+        margin-inline-start: calc(-0.875rem - var(--df-spacing-3));
+      }
+    }
+  }
+
+  .form-check-input {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+}
+
+.form-lg {
+  .form-check {
+    font-size: var(--df-typo-sizing-large);
+    min-height: calc(var(--df-typo-sizing-large) * $line-height-base);
+    padding-inline-start: calc(1.125rem + var(--df-spacing-3));
+
+    .form-check-input {
+      margin-inline-start: calc(-1.125rem - var(--df-spacing-3));
+      // centering the checkbox vertically with the label (if it is one line)
+      // the height of the label (one line) is line-height * font-size
+      margin-top: calc((var(--df-typo-sizing-large) * $line-height-base - 1.125rem) * 0.5);
+
+      & ~ .invalid-feedback {
+        margin-inline-start: calc(-1.125rem - var(--df-spacing-3));
+      }
+    }
+  }
+
+  .form-check-input {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+}
+
+.form-check-input {
+  @each $state, $name in ('valid': 'success', 'invalid': 'danger') {
+    &.is-#{$state} {
+      --df-box-shadow-color: var(--df-color-#{$name}-main-default-border);
+    }
+  }
+}

package/scss/components/checkbox/_checkbox.variables.scss

@@ -0,0 +1,23 @@
+@use '../../new-brand-common.variables.scss' as df;
+
+$form-check-input-width: 1rem !default;
+$form-check-padding-start: $form-check-input-width + 0.375rem !default;
+$form-check-label-cursor: pointer !default;
+
+$form-check-input-active-filter: none !default;
+
+$form-check-input-border: 2px solid var(--df-color-input-border) !default;
+$form-check-input-border-radius: 0.125em !default;
+$form-check-input-focus-border: var(--df-color-input-border) !default;
+$form-check-input-focus-box-shadow: df.$df-focus-box-shadow !default;
+$form-check-input-checked-bg-color: var(--df-color-primary-main-default-background) !default;
+$form-check-input-checked-border-color: var(--df-color-primary-main-default-border) !default;
+$form-check-input-disabled-opacity: 1 !default;
+
+$form-check-min-height: calc(var(--df-typo-sizing-default) * $line-height-base) !default;
+
+$form-check-transition:
+  color 0.15s ease-in-out,
+  background-color 0.15s ease-in-out,
+  border-color 0.15s ease-in-out,
+  box-shadow 0.15s ease-in-out !default;

package/scss/components/collapse/_collapse.scss

@@ -0,0 +1,48 @@
+@use '../../new-brand-common.variables' as df;
+
+button.df-collapse {
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+  border-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--df-spacing-2);
+  color: var(--df-link-color-primary-default-foreground);
+
+  &:focus-visible {
+    box-shadow: df.$df-focus-box-shadow;
+    outline: none;
+
+    &:not(:hover):not(:active) {
+      color: var(--df-link-color-primary-default-foreground);
+      --df-box-shadow-color: var(--df-link-color-primary-default-border);
+      background-color: transparent;
+    }
+  }
+
+  &:hover:not(:disabled):not(.disabled):not(:active) {
+    color: var(--df-link-color-primary-hovered-foreground);
+    background-color: var(--df-link-color-primary-hovered-background);
+
+    &:focus-visible {
+      --df-box-shadow-color: var(--df-link-color-primary-hovered-border);
+    }
+  }
+
+  &:active:not(:disabled):not(.disabled) {
+    color: var(--df-link-color-primary-pressed-foreground);
+    background-color: var(--df-link-color-primary-pressed-background);
+
+    &:focus-visible {
+      color: var(--df-link-color-primary-pressed-foreground); //override btn
+      --df-box-shadow-color: var(--df-link-color-primary-pressed-border);
+    }
+  }
+
+  &:disabled {
+    color: var(--df-link-color-disabled-foreground);
+    background-color: inherit;
+    cursor: not-allowed;
+  }
+}

package/scss/components/datepicker/_datepicker.scss

@@ -0,0 +1,223 @@
+@use '../../new-brand-common.variables' as df;
+
+.ngb-dp-navigation-select {
+  column-gap: var(--df-spacing-2);
+  margin-inline: var(--df-spacing-2);
+
+  .form-select {
+    padding-inline: var(--df-spacing-3);
+    padding-block: var(--df-spacing-2);
+  }
+}
+
+.ngb-dp-arrow {
+  .ngb-dp-arrow-btn {
+    @extend .btn-outline-primary, .df-btn-tertiary, .df-btn-icononly;
+    font-family: 'Font Awesome 6 Pro', sans-serif;
+    margin: 0;
+    padding: 0;
+
+    &:focus {
+      //TODO remove with wrappers, needed to override ng-bootstrap custom styling => pls let's redo the datepicker
+      outline: none;
+    }
+    //needed to override btn-link hover effect todo: pls remove the btn-link class when redoing the datepicker
+    &.btn-link:disabled:hover {
+      color: var(--df-btn-disabled-color);
+    }
+  }
+
+  &.ngb-dp-arrow-prev {
+    .ngb-dp-arrow-btn {
+      @extend .fa-chevron-left;
+      @include rtl {
+        @extend .fa-chevron-right;
+      }
+    }
+  }
+
+  &.ngb-dp-arrow-next {
+    .ngb-dp-arrow-btn {
+      @extend .fa-chevron-right;
+      @include rtl {
+        @extend .fa-chevron-left;
+      }
+    }
+  }
+
+  .ngb-dp-navigation-chevron {
+    display: none !important; // override ng-bootstrap default chevron
+  }
+}
+
+ngb-datepicker {
+  border-radius: var(--df-borderRadius-main-medium);
+  padding: var(--df-spacing-5);
+  box-shadow: df.$df-box-shadow;
+  background-color: var(--df-color-inert-neutral-main-background);
+
+  &.dropdown-menu.show {
+    padding: var(--df-spacing-5);
+    box-shadow: df.$df-box-shadow;
+  }
+
+  .ngb-dp-header {
+    background-color: inherit;
+    padding-top: 0;
+  }
+
+  .ngb-dp-month {
+    &:first-child .ngb-dp-week {
+      padding-inline-start: 0;
+    }
+
+    &:last-child .ngb-dp-week {
+      padding-inline-end: 0;
+    }
+
+    .ngb-dp-week:last-child {
+      padding-bottom: 0;
+    }
+  }
+
+  .ngb-dp-month-name {
+    background-color: inherit;
+    font-size: var(--df-typo-sizing-large);
+    font-weight: var(--df-typo-weight-medium);
+    flex: 1 0 auto;
+  }
+
+  .ngb-dp-arrow {
+    flex: 0 1 auto;
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+
+  .ngb-dp-weekday {
+    color: inherit;
+    width: 100%;
+    font-style: normal;
+    font-size: var(--df-typo-sizing-small);
+    text-transform: uppercase;
+  }
+
+  .ngb-dp-week-number {
+    min-width: 2.25rem;
+  }
+
+  .ngb-dp-day {
+    width: 100%;
+    height: 100%;
+    outline: none;
+
+    &.disabled {
+      // override the default look
+      cursor: initial;
+      pointer-events: initial;
+    }
+  }
+}
+
+.df-datepicker-date {
+  --df-box-shadow-color: var(--df-color-neutral-main-default-border);
+  color: var(--df-color-neutral-alt-default-foreground);
+  background-color: var(--df-color-inert-neutral-main-background);
+  height: 2.25rem;
+  width: 2.25rem;
+  border-radius: var(--df-borderRadius-main-medium);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.holiday {
+    position: relative;
+
+    &:before {
+      //The dot under the character
+      content: '.';
+      font-weight: bold;
+      display: inline-block;
+
+      /* position the dot underneath the character */
+      position: absolute;
+      bottom: 0;
+      inset-inline-start: 0;
+
+      /* center the dot horizontally */
+      text-align: center;
+      width: 100%;
+    }
+
+    color: var(
+      --df-color-neutral-alt-default-foreground
+    ) !important; //override the ng-bootstrap holiday color (pls redo the datepicker)
+    background-color: var(
+      --df-color-inert-neutral-main-background
+    ) !important; //override the ng-bootstrap holiday color (pls redo the datepicker)
+    // TODO: add the disabled state?
+  }
+
+  &.df-datepicker-date-disabled {
+    color: var(--df-color-disabled-main-foreground);
+    cursor: not-allowed;
+  }
+
+  &.df-datepicker-date-selected:not(.df-datepicker-date-disabled) {
+    background-color: var(--df-color-primary-alt-active-background);
+    color: var(--df-color-neutral-alt-active-foreground);
+    font-weight: var(--df-typo-weight-bold);
+  }
+
+  &.df-datepicker-date-focused,
+  .ngb-dp-arrow button:focus-visible {
+    --df-inner-box-shadow-color: var(--df-color-inert-neutral-main-background);
+    box-shadow: df.$df-focus-box-shadow;
+  }
+
+  &:not(.df-datepicker-date-disabled):not(.df-datepicker-date-selected):hover {
+    background-color: var(--df-color-primary-alt-hovered-background);
+    color: var(--df-color-neutral-alt-hovered-foreground);
+  }
+
+  &.df-datepicker-date-from {
+    border-start-start-radius: var(--df-borderRadius-main-medium);
+    border-start-end-radius: 0;
+    border-end-start-radius: var(--df-borderRadius-main-medium);
+    border-end-end-radius: 0;
+  }
+
+  &.df-datepicker-date-to {
+    border-start-start-radius: 0;
+    border-start-end-radius: var(--df-borderRadius-main-medium);
+    border-end-start-radius: 0;
+    border-end-end-radius: var(--df-borderRadius-main-medium);
+  }
+
+  &.df-datepicker-date-between {
+    border-radius: 0;
+    background-color: var(--df-color-primary-subtle-background);
+    color: var(--df-color-neutral-alt-active-foreground);
+    font-weight: var(--df-typo-weight-medium);
+  }
+}
+
+.ngb-dp-today .df-datepicker-date {
+  border: 1px solid var(--df-color-neutral-alt-default-border);
+}
+
+.df-datepicker-range-dropdown {
+  padding: 0;
+  border: none;
+}
+
+.df-input-datepicker-range {
+  &.df-focused {
+    border: none;
+    --df-box-shadow-color: var(--df-color-input-border);
+
+    .input-group {
+      --df-iwi-dpr-focus-border: 1px solid var(--df-color-input-border);
+      box-shadow: none !important; //overrides the box-shadow of the single input focus
+    }
+  }
+}

package/scss/components/drawer/_drawer.scss

@@ -0,0 +1,120 @@
+.df-drawer {
+  --df-drawer-z-index: 2010;
+  --df-drawer-size: max-content;
+  --df-drawer-min-size: 0;
+  --df-drawer-max-size: 100vw;
+
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+  height: var(--df-drawer-size);
+  min-height: var(--df-drawer-min-size);
+  max-height: var(--df-drawer-max-size);
+
+  &.inline-start,
+  &.inline-end {
+    width: var(--df-drawer-size);
+    min-width: var(--df-drawer-min-size);
+    max-width: var(--df-drawer-max-size);
+    height: 100%;
+    min-height: 0;
+    max-height: none;
+  }
+
+  &.collapsing {
+    min-width: 0px !important;
+    min-height: 0px !important;
+  }
+
+  background-color: var(--df-color-inert-neutral-main-background);
+  z-index: var(--df-drawer-z-index);
+
+  transition:
+    transform 0.25s ease,
+    visibility 0.25s ease;
+
+  &:not(.show) {
+    display: block;
+  }
+
+  &.inline-start {
+    inset-block: 0;
+    inset-inline-start: 0;
+
+    // transform: translateX(-75%);
+    // &.show { transform: translateX(0); }
+  }
+
+  &.inline-end {
+    inset-block: 0;
+    inset-inline-end: 0;
+
+    transform: translateX(100%);
+    &.show {
+      transform: translateX(0);
+    }
+
+    .au-splitter {
+      inset-inline-end: auto;
+    }
+  }
+
+  // Block (top/bottom)
+  &.block-start {
+    inset-inline: 0;
+    inset-block-start: 0;
+
+    transform: translateY(-100%);
+    &.show {
+      transform: translateY(0);
+    }
+
+    .au-splitter {
+      inset-block-start: auto;
+    }
+  }
+
+  &.block-end {
+    inset-inline: 0;
+    inset-block-end: 0;
+
+    transform: translateY(100%);
+    &.show {
+      transform: translateY(0);
+    }
+  }
+
+  // Vertical splitter (default for inline drawers)
+  .splitter {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: -4px; // half outside for visual separation
+    width: 8px; // larger hit area
+    cursor: ew-resize;
+    background: transparent;
+  }
+
+  // Horizontal splitter for block drawers (height resize)
+  &.block-start .splitter,
+  &.block-end .splitter {
+    inset-inline: 0;
+    width: auto;
+    height: 8px;
+    cursor: ns-resize;
+  }
+}
+
+.df-drawer-backdrop {
+  --df-drawer-backdrop-z-index: 2000;
+  --df-drawer-backdrop-opacity: 0.9;
+
+  position: fixed;
+  inset: 0;
+  background-color: var(--df-color-backdrop-background);
+  z-index: var(--df-drawer-backdrop-z-index);
+
+  &.show {
+    opacity: var(--df-drawer-backdrop-opacity);
+    pointer-events: auto;
+  }
+}

package/scss/components/dropdown/_dropdown.mixins.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+
+@mixin df-sizes($size) {
+  $dropdown-sizing: (
+    'sm': (
+      line-height: 1.125rem,
+      font-size: var(--df-typo-sizing-small),
+      padding-y: 0.5rem //8px
+    ),
+    'lg': (
+      line-height: 1.6875rem,
+      font-size: var(--df-typo-sizing-large),
+      padding-y: 0.6563rem // 10.5px
+    )
+  );
+  &.df-dropdown-menu-#{$size} {
+    .dropdown-item {
+      line-height: map.get($dropdown-sizing, $size, 'line-height');
+      font-size: map.get($dropdown-sizing, $size, 'font-size');
+      $padding-y: map.get($dropdown-sizing, $size, 'padding-y');
+      --df-dropdown-item-padding-y: #{$padding-y};
+    }
+  }
+}