@design-factory/styles 21.0.0-next.0

package/scss/components/list-group/_list-group.scss

@@ -0,0 +1,81 @@
+@use 'sass:map';
+@use '../../new-brand-common.variables' as df;
+
+.list-group-item {
+  &.disabled,
+  &[disabled] {
+    color: var(--df-list-group-disabled-color) !important;
+    background-color: var(--df-list-group-disabled-bg) !important;
+    cursor: not-allowed;
+    pointer-events: auto;
+  }
+
+  &.list-group-item-action {
+    &:not(.disabled):not([disabled]) {
+      // Override the default link behavior
+      border-color: var(--df-list-group-border-color);
+
+      .df-skip-links &:not(:hover) {
+        background-color: var(--df-color-inert-neutral-main-background);
+      }
+
+      &:focus-visible {
+        --df-box-shadow-color: var(--df-list-group-active-color);
+        box-shadow: df.$df-focus-inset-box-shadow;
+        outline: none; //disable default
+        &:not(:active):not(.active):not(:hover) {
+          background-color: var(--df-list-group-bg);
+        }
+
+        &:active,
+        &.active {
+          --df-inner-box-shadow-color: var(--df-list-group-action-active-bg);
+          color: var(--df-list-group-active-color);
+        }
+
+        &:hover {
+          --df-inner-box-shadow-color: var(--df-list-group-action-hover-bg);
+          background-color: var(--df-list-group-action-hover-bg);
+        }
+      }
+
+      //we use the .active class for the active item and the :active pseudo-class to style when it is pressed
+      &.active {
+        background-color: var(--df-list-group-action-active-bg);
+        padding-inline-start: calc(#{$list-group-item-padding-x} - 0.1875rem + #{$list-group-border-width});
+        font-weight: var(--df-typo-weight-bold);
+
+        &:hover {
+          background-color: var(--df-list-group-action-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--df-list-group-action-active-bg);
+        }
+      }
+    }
+  }
+}
+
+.list-group {
+  $sizes: (
+    'sm': (
+      'name': 'small',
+      'paddingY': '0.5938rem' // 9.5px
+    ),
+    'lg': (
+      'name': 'large',
+      'paddingY': '0.7813rem' // 12.5px
+    )
+  );
+
+  @each $alias, $value in $sizes {
+    $paddingY: map.get($value, 'paddingY');
+    $name: map.get($value, 'name');
+    &.df-list-group-#{$alias} {
+      --df-list-group-item-padding-y: #{$paddingY};
+      border-radius: var(--df-borderRadius-main-#{$name});
+      font-size: var(--df-typo-sizing-#{$name});
+    }
+  }
+}

package/scss/components/list-group/_list-group.variables.scss

@@ -0,0 +1,21 @@
+$list-group-color: var(--df-color-neutral-alt-default-foreground) !default;
+$list-group-bg: var(--df-color-primary-alt-default-background) !default;
+$list-group-border-color: var(--df-color-inert-neutral-main-border) !default;
+$list-group-border-width: 1px !default;
+$list-group-border-radius: var(--df-borderRadius-main-medium) !default;
+
+$list-group-item-padding-y: 0.6875rem !default; // 11.5px
+$list-group-item-padding-x: var(--df-spacing-5) !default;
+
+$list-group-hover-bg: var(--df-color-primary-alt-hovered-background) !default;
+$list-group-active-color: var(--df-color-neutral-alt-active-foreground) !default;
+$list-group-active-bg: var(--df-color-primary-alt-active-background) !default;
+
+$list-group-disabled-color: var(--df-color-disabled-main-foreground) !default;
+$list-group-disabled-bg: var(--df-color-disabled-main-background) !default;
+
+$list-group-action-color: var(--df-color-neutral-alt-default-foreground) !default;
+$list-group-action-hover-color: var(--df-color-neutral-alt-hovered-foreground) !default;
+
+$list-group-action-active-color: var(--df-color-neutral-alt-active-foreground) !default;
+$list-group-action-active-bg: var(--df-color-primary-alt-active-background) !default;

package/scss/components/media/_media.scss

@@ -0,0 +1,27 @@
+@use '../../new-brand-common.variables' as df;
+
+.df-media-button-interactive {
+  box-shadow: none;
+  background-color: var(--df-color-neutral-alt-default-background);
+  color: var(--df-color-neutral-alt-default-foreground);
+
+  &:not(:hover):not(:active) time {
+    color: var(--df-color-subtext-foreground);
+  }
+
+  &:focus-visible {
+    --df-box-shadow-color: #{var(--df-color-focus-main-border)};
+    box-shadow: df.$df-focus-box-shadow;
+    outline: 0;
+  }
+
+  &:hover {
+    background-color: var(--df-color-primary-alt-hovered-background);
+    color: var(--df-color-neutral-alt-hovered-foreground);
+  }
+
+  &:active {
+    background-color: var(--df-color-primary-alt-active-background);
+    color: var(--df-color-neutral-alt-active-foreground);
+  }
+}

package/scss/components/modal/_modal.scss

@@ -0,0 +1,154 @@
+@use '../../new-brand-common.variables' as df;
+
+.modal-content {
+  box-shadow: #{df.$df-box-shadow};
+}
+
+.modal-header {
+  padding-top: var(--df-spacing-6);
+  // Align the inner content of the close button with the body and footer content
+  padding-inline-end: var(--df-spacing-4);
+
+  .btn-close {
+    // Bootstrap variables
+    --df-btn-close-hover-opacity: 1;
+    --df-btn-close-opacity: 1;
+
+    // Fixed sizes defined in Figma
+    padding: 0;
+    width: 2.25rem;
+    height: 2.25rem;
+    outline: 0;
+
+    background-image: none;
+    background-color: var(--df-modal-bg);
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
+      background-color: var(--df-button-text-basic-color-neutral-default-foreground);
+      mask-repeat: no-repeat;
+      mask-size: 0.75rem 0.75rem;
+      mask-position: center;
+    }
+
+    margin-inline-start: auto;
+    margin-inline-end: 0;
+
+    &:focus:not(:focus-visible) {
+      box-shadow: none;
+    }
+
+    &:focus-visible {
+      --df-box-shadow-color: var(--df-button-text-basic-color-neutral-default-foreground);
+      box-shadow: #{df.$df-focus-box-shadow};
+    }
+
+    &:hover {
+      &:focus-visible {
+        --df-box-shadow-color: var(--df-button-text-basic-color-neutral-hovered-foreground);
+      }
+
+      background-color: var(--df-button-text-basic-color-neutral-hovered-background);
+
+      &::after {
+        background-color: var(--df-button-text-basic-color-neutral-hovered-foreground);
+      }
+    }
+
+    &:active {
+      &:focus-visible {
+        --df-box-shadow-color: var(--df-button-text-basic-color-neutral-pressed-foreground);
+      }
+
+      background-color: var(--df-button-text-basic-color-neutral-pressed-background);
+
+      &::after {
+        background-color: var(--df-button-text-basic-color-neutral-pressed-foreground);
+      }
+    }
+  }
+
+  .alert-modal-icon {
+    font-size: var(--df-icons-sizing-3xlarge);
+  }
+
+  $modal-variants: (
+    'primary': var(--df-color-primary-alt-default-foreground),
+    'success': var(--df-color-success-alt-default-foreground),
+    'info': var(--df-color-info-alt-default-foreground),
+    'warning': var(--df-color-icon-warning-foreground),
+    'danger': var(--df-color-danger-alt-default-foreground),
+    'light': var(--df-color-neutral-soft-default-foreground),
+    'neutral': var(--df-color-neutral-alt-default-foreground),
+    'tip': var(--df-color-tip-alt-default-foreground),
+    'chromatic1': var(--df-color-chromatic1-alt-default-foreground),
+    'chromatic2': var(--df-color-chromatic2-alt-default-foreground)
+  );
+  @each $color, $value in $modal-variants {
+    &.df-#{$color}-modal {
+      .alert-modal-icon {
+        color: $value;
+      }
+    }
+  }
+}
+
+.modal-body {
+  padding-top: var(--df-spacing-5);
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  text-align: start;
+}
+
+.modal-footer {
+  padding: var(--df-spacing-6);
+  padding-top: var(--df-spacing-3);
+}
+
+@include media-breakpoint-only(xs) {
+  .modal-dialog {
+    &:not(.modal-dialog-scrollable) {
+      .modal-body {
+        flex: 0;
+      }
+    }
+
+    margin: 0;
+    padding: var(--df-spacing-3);
+    min-height: 100%;
+    display: flex;
+  }
+
+  .modal-content {
+    flex: 1;
+    overflow: auto;
+    min-height: 100%;
+  }
+
+  .modal-header {
+    justify-content: start;
+    padding-inline-end: var(--df-spacing-6);
+    border-bottom: none;
+    margin-bottom: var(--df-spacing-5);
+  }
+
+  .modal-body {
+    p {
+      margin-bottom: 0;
+    }
+  }
+
+  .modal-footer {
+    justify-content: center;
+    align-items: baseline;
+    border-top: none;
+    margin-top: var(--df-spacing-6);
+  }
+}

package/scss/components/modal/_modal.variables.scss

@@ -0,0 +1,13 @@
+$modal-backdrop-bg: var(--df-color-backdrop-background) !default;
+$modal-backdrop-opacity: 1 !default;
+$modal-content-bg: var(--df-color-inert-neutral-main-background) !default;
+$modal-content-border-color: none !default;
+$modal-content-border-radius: var(--df-borderRadius-main-large) !default;
+$modal-content-border-width: 0 !default;
+$modal-content-inner-border-radius: var(--df-borderRadius-main-large) !default;
+$modal-footer-margin-between: 0 !default;
+$modal-header-border-width: 0px !default;
+$modal-header-padding-x: var(--df-spacing-6) !default;
+$modal-header-padding-y: var(--df-spacing-5) !default;
+$modal-inner-padding: var(--df-spacing-6) !default;
+$modal-title-line-height: 1.3 !default;

package/scss/components/navbar/_navbar.mixins.scss

@@ -0,0 +1,46 @@
+@mixin navlink($prefix-vars) {
+  --df-box-shadow-color: var(#{$prefix-vars}-default-border);
+
+  color: var(#{$prefix-vars}-default-foreground);
+
+  &:hover {
+    --df-box-shadow-color: var(#{$prefix-vars}-hovered-border);
+    --df-inner-box-shadow-color: var(#{$prefix-vars}-hovered-background);
+
+    color: var(#{$prefix-vars}-hovered-foreground);
+    background-color: var(#{$prefix-vars}-hovered-background);
+  }
+
+  &:active {
+    --df-box-shadow-color: var(#{$prefix-vars}-pressed-border);
+
+    color: var(#{$prefix-vars}-pressed-foreground);
+    background-color: var(#{$prefix-vars}-pressed-background);
+  }
+}
+
+@mixin navlink-active($prefix-vars) {
+  --df-box-shadow-color: var(#{$prefix-vars}-active-border);
+
+  color: var(#{$prefix-vars}-active-foreground);
+  border-color: var(#{$prefix-vars}-active-border);
+
+  &:hover {
+    --df-box-shadow-color: var(#{$prefix-vars}-activeHovered-border);
+    --df-inner-box-shadow-color: var(#{$prefix-vars}-activeHovered-background);
+
+    color: var(#{$prefix-vars}-activeHovered-foreground);
+    border-color: var(#{$prefix-vars}-activeHovered-border);
+    // the :active state should still use the background color from the mixin above
+    &:not(:active) {
+      background-color: var(#{$prefix-vars}-activeHovered-background);
+    }
+  }
+
+  &:active {
+    --df-box-shadow-color: var(#{$prefix-vars}-activePressed-border);
+
+    color: var(#{$prefix-vars}-activePressed-foreground);
+    border-color: var(#{$prefix-vars}-activePressed-border);
+  }
+}

package/scss/components/navbar/_navbar.scss

@@ -0,0 +1,287 @@
+@use 'sass:map';
+@use '../../new-brand-common.variables' as df;
+@use 'navbar.mixins' as navbar-mixins;
+
+.navbar {
+  min-height: 3.5rem;
+
+  --df-inner-box-shadow-color: var(--df-navbar-color-inert-alt-background);
+
+  background-color: var(--df-navbar-color-inert-alt-background);
+  font-size: var(--df-typo-sizing-default);
+  box-shadow: df.$df-box-shadow;
+
+  // avoids anti-aliasing issues when focusing toggler button
+  .navbar-toggler {
+    background-color: var(--df-navbar-color-inert-alt-background);
+  }
+
+  .navbar-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-inline-start: var(--df-spacing-5);
+    color: var(--df-navbar-color-inert-subtext-foreground);
+  }
+
+  .nav-item.dropdown {
+    .btn {
+      --df-btn-bg: transparent;
+    }
+  }
+
+  > .navbar-collapse {
+    overflow: visible;
+  }
+
+  .navbar-toggler-icon {
+    width: 2.25rem;
+    height: 1.5rem;
+  }
+
+  .navbar-brand {
+    border-bottom: 0;
+    position: relative;
+    display: flex;
+    align-items: center;
+    font-weight: var(--df-typo-weight-medium);
+    padding: calc((3.5rem - var(--df-typo-sizing-large) * $line-height-base) / 2) var(--df-spacing-5);
+
+    font-family: var(--df-typo-font-primaryFamily), sans-serif;
+    outline: none;
+
+    &:focus-visible {
+      box-shadow: df.$df-focus-inset-box-shadow;
+    }
+
+    background-color: var(--df-navbar-color-productName-alt-default-background);
+    @include navbar-mixins.navlink(--df-navbar-color-productName-alt);
+  }
+
+  &.bg-dark-primary {
+    --df-navbar-color: var(--df-navbar-color-inert-main-foreground);
+    --df-inner-box-shadow-color: var(--df-navbar-color-inert-main-background);
+
+    background-color: var(--df-navbar-color-inert-main-background);
+
+    .navbar-text {
+      color: var(--df-navbar-color-inert-main-foreground);
+    }
+
+    .navbar-brand {
+      background-color: var(--df-navbar-color-inert-main-background);
+      @include navbar-mixins.navlink(--df-navbar-color-productName-main);
+    }
+
+    .navbar-nav {
+      .nav-link {
+        &.dropdown-toggle {
+          @include navbar-mixins.navlink(--df-navbar-color-dropdown-main);
+        }
+
+        &:not(.dropdown-toggle) {
+          @include navbar-mixins.navlink(--df-navbar-color-main);
+        }
+      }
+
+      :is(.active > .nav-link, .nav-link.active) {
+        &.dropdown-toggle {
+          @include navbar-mixins.navlink-active(--df-navbar-color-dropdown-main);
+        }
+
+        &:not(.dropdown-toggle) {
+          @include navbar-mixins.navlink-active(--df-navbar-color-main);
+        }
+      }
+    }
+
+    .navbar-toggler {
+      background-color: var(--df-navbar-color-inert-main-background);
+
+      @include navbar-mixins.navlink(--df-navbar-color-main);
+    }
+  }
+
+  .navbar-nav {
+    .nav-link {
+      padding: calc((3.5rem - var(--df-typo-sizing-default) * $line-height-base) / 2) var(--df-spacing-5);
+      outline: none;
+      position: relative;
+      box-shadow: none;
+
+      &:focus-visible {
+        &:before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          box-shadow: #{df.$df-focus-inset-box-shadow};
+        }
+      }
+
+      &.dropdown-toggle {
+        @include navbar-mixins.navlink(--df-navbar-color-dropdown-alt);
+      }
+
+      &:not(.dropdown-toggle) {
+        @include navbar-mixins.navlink(--df-navbar-color-alt);
+      }
+
+      &.btn {
+        border-top: inherit;
+        border-right: inherit;
+        border-left: inherit;
+        border-radius: inherit;
+      }
+
+      span[data-text] {
+        text-align: center;
+
+        &::before {
+          content: attr(data-text);
+          font-weight: var(--df-typo-weight-bold);
+          visibility: hidden;
+          height: 0;
+          overflow: hidden;
+          display: block;
+        }
+      }
+    }
+
+    :is(.active > .nav-link, .nav-link.active) {
+      &:focus-visible {
+        &:before {
+          bottom: 0.1875rem;
+        }
+      }
+
+      &:after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-bottom-width: 0.1875rem;
+        border-bottom-style: solid;
+      }
+
+      &.dropdown-toggle {
+        @include navbar-mixins.navlink-active(--df-navbar-color-dropdown-alt);
+      }
+
+      &:not(.dropdown-toggle) {
+        font-weight: var(--df-typo-weight-bold);
+        @include navbar-mixins.navlink-active(--df-navbar-color-alt);
+      }
+    }
+  }
+}
+
+.navbar-toggler {
+  margin-left: var(--df-spacing-3);
+  margin-right: var(--df-spacing-3);
+  border: 0;
+  display: inline-flex;
+  justify-items: center;
+  align-items: center;
+  min-width: 2.25rem;
+  min-height: 2.25rem;
+
+  &:focus {
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: #{df.$df-focus-box-shadow};
+  }
+
+  @include navbar-mixins.navlink(--df-navbar-color-alt);
+}
+
+.navbar-expand {
+  @each $breakpoint in map.keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
+
+    &#{$infix} {
+      @include media-breakpoint-down($next) {
+        .navbar-nav {
+          :is(.active > .nav-link, .nav-link.active) {
+            &:focus-visible:before {
+              bottom: 0;
+              inset-inline-start: 0.1875rem;
+            }
+
+            &:after {
+              border-bottom-style: none;
+              border-inline-start-style: solid;
+            }
+          }
+
+          .nav-link.btn {
+            width: 100%;
+            justify-content: inherit;
+          }
+
+          .nav-item.dropdown {
+            .dropdown-menu {
+              margin: 0 1rem;
+              box-shadow: none;
+            }
+          }
+
+          &:last-of-type {
+            .nav-item.dropdown:last-of-type {
+              .dropdown-menu {
+                margin-bottom: calc((3.5rem - (var(--df-typo-sizing-default) * $line-height-base)) / 2);
+              }
+            }
+          }
+        }
+      }
+
+      @include media-breakpoint-up($next) {
+        .navbar-collapse.d#{$infix}-none {
+          display: none !important;
+        }
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  :is(
+    .navbar-brand,
+    .navbar-collapse,
+    .navbar-nav,
+    .navbar-nav .nav-item,
+    .navbar-nav .nav-link,
+    .navbar-nav .dropdown-toggle
+  ) {
+    height: 100%;
+  }
+}
+
+.df-superheader {
+  box-shadow: df.$df-box-shadow;
+
+  .navbar:not(.bg-dark-primary) + .navbar:not(.bg-dark-primary) {
+    border-top: 1px solid var(--df-color-inert-neutral-main-border);
+  }
+
+  .navbar {
+    box-shadow: none;
+  }
+}
+
+router-outlet.df-scroll-content {
+  & + * {
+    overflow-y: auto;
+    flex-grow: 1;
+    flex-basis: 0;
+  }
+}
+
+.df-scroll-content:not(router-outlet) {
+  overflow-y: auto;
+  flex-grow: 1;
+  flex-basis: 0;
+}

package/scss/components/navbar/_navbar.variables.scss

@@ -0,0 +1,14 @@
+$navbar-padding-y: 0 !default;
+$navbar-padding-x: 0 !default;
+
+$navbar-brand-font-size: var(--df-typo-sizing-large) !default;
+$navbar-brand-margin-end: 0px !default; // default 1rem
+
+$navbar-toggler-padding-y: 0.125rem !default;
+$navbar-toggler-padding-x: 0 !default;
+$navbar-toggler-border-radius: var(--df-borderRadius-main-medium) !default;
+
+$navbar-light-color: var(--df-navbar-color-inert-alt-foreground) !default;
+$navbar-brand-height: calc(var(--df-typo-sizing-large) * $line-height-base) !default;
+
+$navbar-light-toggler-icon-bg: none !default;

package/scss/components/pagination/_pagination.mixins.scss

@@ -0,0 +1,30 @@
+@mixin replace-span-innertext-with-icon($iconContent) {
+  .page-link[aria-label] {
+    span:after {
+      content: $iconContent;
+    }
+  }
+}
+
+@mixin pagination-sizing($size, $borderRadius, $fontSize, $minInputWidth) {
+  .page-item {
+    .page-link {
+      height: $size;
+      min-width: $size;
+      line-height: $size;
+      border-radius: $borderRadius;
+      font-size: $fontSize;
+
+      &[aria-label] {
+        span:after {
+          font-size: $fontSize;
+        }
+      }
+    }
+  }
+  li {
+    input {
+      min-width: $minInputWidth;
+    }
+  }
+}