@design-factory/design-factory 20.0.1 → 21.0.0-next.0

package/styles/scss/components/link/_link.variables.scss

@@ -1,55 +0,0 @@
-$df-link-border-bottom-width: $border-width !default;
-$df-link-border-bottom: $df-link-border-bottom-width solid !default;
-
-$df-link-hover-border-bottom-width: $df-link-border-bottom-width !default;
-
-$df-link-visited-border-bottom-width: $df-link-border-bottom-width !default;
-$df-link-visited-hover-border-bottom-width: $df-link-hover-border-bottom-width !default;
-$df-link-visited-border-bottom: $df-link-visited-border-bottom-width solid !default;
-
-$df-link-focus-outline: 0 !default;
-$df-link-focus-outline-offset: 0 !default;
-$df-link-focus-box-shadow-color: $focus-ring-color !default;
-$df-link-focus-box-shadow: $df-focused-box-shadow !default;
-
-$df-link-disabled-color: var(--#{$prefix}disabled-color) !default;
-$df-link-disabled-display: inline-block !default;
-$df-link-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
-$df-link-disabled-text-decoration: none !default;
-$df-link-disabled-border-bottom-width: $df-link-border-bottom-width !default;
-$df-link-disabled-border-bottom-color: $df-btn-disabled-border-color !default;
-$df-link-disabled-background: transparent !default;
-
-$df-link-active-border-bottom-width: $df-link-border-bottom-width !default;
-$df-link-visited-active-border-bottom-width: $df-link-active-border-bottom-width !default;
-
-$df-link-external-icon: '\00a0\f08e' !default; // Empty space + .fa-external-link
-$df-link-external-icon-bottom: -0.08em !default;
-$df-link-external-icon-size: small !default;
-$df-link-external-font-family: 'Font Awesome 6 Pro' !default;
-
-$df-link-more-text-transform: uppercase !default;
-$df-link-more-text-decoration-underline: underline !default;
-$df-link-more-icon-margin-left: 0.375rem !default;
-$df-link-more-icon-top: 0.125rem !default;
-
-// Icon only link
-$df-link-icononly-height: 2rem !default;
-$df-link-icononly-height-sm: 1.75rem !default;
-$df-link-icononly-height-lg: 2.25rem !default;
-$df-link-font-size: $font-size-base !default;
-$df-link-font-size-sm: $font-size-base !default;
-$df-link-font-size-lg: $font-size-base !default;
-$df-link-icononly-display: flex !default;
-$df-link-icononly-align: center !default;
-$df-link-icononly-justify-content: center !default;
-$df-link-icononly-text-align: center !default;
-$df-link-icononly-color: $gray-600 !default;
-$df-link-icononly-hover-color: $gray-600 !default;
-$df-link-icononly-active-color: $gray-600 !default;
-$df-link-icononly-decoration: none !default;
-$df-link-icononly-border-radius: 50% !default;
-$df-link-icononly-hover-bg-color: shades-css-var('secondary', 'bg-subtle-hover-color') !default;
-$df-link-icononly-active-bg-color: shades-css-var('secondary', 'bg-subtle-hover-color') !default;
-$df-link-icononly-focus-box-shadow-color: inherit !default;
-$df-link-focus-outline: none !default;

package/styles/scss/components/list/_list.scss

@@ -1,20 +0,0 @@
-ol {
-  --#{$prefix}ol-padding-left: #{$df-ol-padding-left};
-  --#{$prefix}ol-marker-font-weight: #{$df-ol-marker-font-weight};
-  --#{$prefix}ol-marker-left: #{$df-ol-marker-left};
-  --#{$prefix}ol-marker-list-style-type: none;
-
-  counter-reset: df-ol-counter;
-  list-style-type: var(--#{$prefix}ol-marker-list-style-type);
-  padding-left: var(--#{$prefix}ol-padding-left);
-  li {
-    counter-increment: df-ol-counter;
-    position: relative;
-    &:before {
-      content: $df-ol-marker-content;
-      font-weight: var(--#{$prefix}ol-marker-font-weight);
-      position: absolute;
-      left: var(--#{$prefix}ol-marker-left);
-    }
-  }
-}

package/styles/scss/components/list/_list.variables.scss

@@ -1,4 +0,0 @@
-$df-ol-padding-left: 2.5rem !default;
-$df-ol-marker-content: counter(df-ol-counter) '.' '\00a0 ' !default;
-$df-ol-marker-font-weight: $font-weight-bold !default;
-$df-ol-marker-left: -1.75rem !default;

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

@@ -1,101 +0,0 @@
-%df-disabled-style {
-  color: var(--#{$prefix}list-group-disabled-color);
-  background-color: var(--#{$prefix}list-group-disabled-bg);
-  cursor: var(--#{$prefix}list-group-disabled-cursor);
-  pointer-events: auto;
-}
-
-.list-group-item {
-  --#{$prefix}list-group-disabled-cursor: #{$df-list-group-disabled-cursor};
-  --#{$prefix}list-group-item-active-border-color: #{$df-list-group-item-active-border-color};
-  --#{$prefix}list-group-item-border-left-active: #{$df-list-group-item-border-left-active};
-  --#{$prefix}list-group-item-padding-left: #{$df-list-group-item-padding-left};
-  color: var(--#{$prefix}list-group-color);
-  border-color: var(--#{$prefix}list-group-border-color);
-
-  &[aria-disabled='true'],
-  &.disabled,
-  &[disabled] {
-    &,
-    &:hover,
-    &:active {
-      @extend %df-disabled-style;
-    }
-  }
-
-  &.list-group-item-action {
-    &:not([aria-disabled='true']):not(.disabled):not([disabled]) {
-      &:active {
-        border-bottom-color: var(--#{$prefix}list-group-border-color);
-      }
-
-      &:hover {
-        //Reset to default
-        border-bottom-width: var(--#{$prefix}border-width);
-      }
-
-      &:focus-visible {
-        --#{$prefix}box-shadow-color: var(--#{$prefix}list-group-active-color);
-        box-shadow: $df-list-group-focus-box-shadow;
-        outline: none; //disable default
-        &:not(:active):not(.active):not(:hover) {
-          background-color: var(--#{$prefix}list-group-bg);
-        }
-
-        &:active,
-        &.active {
-          --#{$prefix}inner-box-shadow-color: var(--#{$prefix}list-group-action-active-bg);
-          color: var(--#{$prefix}list-group-active-color);
-        }
-
-        &:hover {
-          --#{$prefix}inner-box-shadow-color: var(--#{$prefix}list-group-action-hover-bg);
-          background-color: var(--#{$prefix}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 {
-        border-color: var(--#{$prefix}list-group-item-active-border-color); // override
-        background-color: var(--#{$prefix}list-group-action-active-bg);
-        padding-inline-start: var(--#{$prefix}list-group-item-padding-left);
-        border-inline-start: var(--#{$prefix}list-group-item-border-left-active);
-        font-weight: $df-list-group-active-font-weight;
-
-        &:hover {
-          background-color: var(--#{$prefix}list-group-action-hover-bg);
-        }
-
-        &:active {
-          border-color: var(--#{$prefix}list-group-item-active-border-color);
-          background-color: var(--#{$prefix}list-group-action-active-bg);
-        }
-      }
-    }
-  }
-}
-
-.list-group {
-  font-size: $font-size-base;
-  @each $extension, $ratio in $df-size-ratios {
-    &.df-list-group-#{$extension} {
-      --#{$prefix}list-group-font-size: #{get-sizing-brand2023($extension, $ratio, $font-size-base, true)};
-      --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y * $ratio};
-
-      .list-group-item {
-        padding-top: var(--#{$prefix}list-group-item-padding-y);
-        padding-bottom: var(--#{$prefix}list-group-item-padding-y);
-      }
-    }
-  }
-
-  &.list-group-flush .list-group-item {
-    &:first-child {
-      border-top: none;
-    }
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-}

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

@@ -1,10 +0,0 @@
-$df-list-group-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
-$df-list-group-item-active-border-width: 0.1875rem !default; // same as sidenav
-$df-list-group-item-active-border-color: $gray-100 !default;
-$df-list-group-item-border-left-active: $df-list-group-item-active-border-width solid
-  var(--#{$prefix}list-group-active-color) !default; // todo check with Max if should be inert color ?
-$df-list-group-item-padding-left: calc(
-  #{$list-group-item-padding-x} - #{$df-list-group-item-active-border-width} + #{$list-group-border-width}
-) !default;
-$df-list-group-focus-box-shadow: var(--#{$prefix}focused-box-shadow) !default;
-$df-list-group-active-font-weight: inherit !default;

package/styles/scss/components/media/_media.scss

@@ -1,89 +0,0 @@
-.df-media-button-interactive {
-  --#{$prefix}interactive-media-padding: #{$df-interactive-media-padding};
-  --#{$prefix}interactive-media-focused-background-color: #{$df-interactive-media-focused-background-color};
-  --#{$prefix}interactive-media-focus-box-shadow: #{$df-interactive-media-focus-box-shadow};
-  --#{$prefix}interactive-media-hover-background-color: #{$df-interactive-media-hover-background-color};
-  --#{$prefix}interactive-media-background-color: #{$df-interactive-media-background-color};
-  --#{$prefix}interactive-media-color: #{$df-interactive-media-color};
-  --#{$prefix}interactive-media-border-radius-sm: #{$df-media-border-radius-sm};
-  --#{$prefix}interactive-media-border-radius: #{$df-media-border-radius};
-  --#{$prefix}interactive-media-border-radius-lg: #{$df-media-border-radius-lg};
-  --#{$prefix}interactive-media-date-color: #{$df-interactive-media-date-color};
-  --#{$prefix}interactive-media-heading-font-size-sm: #{$df-interactive-media-heading-font-size-sm};
-  --#{$prefix}interactive-media-heading-font-size: #{$df-interactive-media-heading-font-size};
-  --#{$prefix}interactive-media-heading-font-size-lg: #{$df-interactive-media-heading-font-size-lg};
-  --#{$prefix}interactive-media-heading-margin-block: #{$df-interactive-media-heading-margin-block};
-
-  text-align: start;
-  padding: var(--#{$prefix}interactive-media-padding);
-  border: none; //check if needed for the new branding when removing old branding -> card no longer uses border we should use the class border-0 on the card if we want card with no borders
-  background-color: var(--#{$prefix}interactive-media-background-color);
-
-  span,
-  .card-text {
-    color: var(--#{$prefix}interactive-media-color);
-  }
-
-  &:focus-visible {
-    --#{$prefix}box-shadow-color: #{$df-interactive-media-focus-box-shadow-color};
-    outline: $df-interactive-media-focus-outline;
-    box-shadow: var(--#{$prefix}interactive-media-focus-box-shadow);
-    background-color: var(--#{$prefix}interactive-media-focused-background-color);
-  }
-
-  &:hover {
-    background-color: var(--#{$prefix}interactive-media-hover-background-color);
-
-    time {
-      color: #{$df-interactive-media-hover-date-color};
-    }
-  }
-
-  @include heading {
-    font-size: var(--#{$prefix}interactive-media-heading-font-size);
-    margin-block: var(--#{$prefix}interactive-media-heading-margin-block);
-  }
-
-  @include border-radius(var(--#{$prefix}interactive-media-border-radius));
-
-  &.df-font-sm,
-  &.card-sm {
-    @include border-radius(var(--#{$prefix}interactive-media-border-radius-sm));
-    time,
-    & > * {
-      font-size: $df-interactive-media-font-size-sm;
-    }
-    @include heading {
-      font-size: var(--#{$prefix}interactive-media-heading-font-size-sm);
-    }
-  }
-
-  &.df-font-lg,
-  &.card-lg {
-    @include border-radius(var(--#{$prefix}interactive-media-border-radius-lg));
-    time,
-    & > * {
-      font-size: $df-interactive-media-font-size-lg;
-    }
-    @include heading {
-      font-size: var(--#{$prefix}interactive-media-heading-font-size-lg);
-    }
-  }
-  time {
-    color: var(--#{$prefix}interactive-media-date-color);
-  }
-}
-
-.df-img {
-  --#{$prefix}media-border-radius-sm: #{$df-media-border-radius-sm};
-  --#{$prefix}media-border-radius: #{$df-media-border-radius};
-  --#{$prefix}media-border-radius-lg: #{$df-media-border-radius-lg};
-
-  @include border-radius(var(--#{$prefix}media-border-radius));
-
-  @each $extension, $ratio in $df-size-ratios {
-    &-#{$extension} {
-      @include border-radius(var(--#{$prefix}media-border-radius-#{$extension}));
-    }
-  }
-}

package/styles/scss/components/media/_media.variables.scss

@@ -1,19 +0,0 @@
-$df-interactive-media-padding: 0 !default;
-$df-interactive-media-focused-background-color: $gray-50 !default;
-$df-interactive-media-focus-box-shadow: $df-focused-box-shadow !default; // this value is the default value in buttons.scss of bootstrap
-$df-interactive-media-focus-outline: 0 !default;
-$df-interactive-media-focus-box-shadow-color: inherit !default;
-$df-interactive-media-hover-background-color: $gray-100 !default;
-$df-interactive-media-background-color: $white !default;
-$df-interactive-media-color: shades-css-var('primary', 'bg-color') !default;
-$df-media-border-radius-sm: 0 !default;
-$df-media-border-radius: 0 !default;
-$df-media-border-radius-lg: 0 !default;
-$df-interactive-media-date-color: var(--#{$prefix}gray-600) !default;
-$df-interactive-media-hover-date-color: var(--#{$prefix}gray-600) !default;
-$df-interactive-media-heading-font-size-sm: 1.125rem !default;
-$df-interactive-media-heading-font-size: 1.25rem !default;
-$df-interactive-media-heading-font-size-lg: 1.5rem !default;
-$df-interactive-media-heading-margin-block: 0.25rem !default;
-$df-interactive-media-font-size-sm: $font-size-base !default;
-$df-interactive-media-font-size-lg: $font-size-base !default;

package/styles/scss/components/modal/_modal.scss

@@ -1,247 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-
-/* stylelint-disable-next-line scss/dollar-variable-pattern, scss/dollar-variable-default */
-$isBrand2023: meta.variable-exists(
-    $name: 'df-enableBranding2023'
-  )
-  and $df-enableBranding2023;
-
-.modal {
-  // TODO remove this in the next major release
-  --#{$prefix}modal-backdrop-opacity: #{$df-modal-backdrop-opacity};
-
-  --#{$prefix}modal-box-shadow: #{$df-modal-box-shadow};
-  --#{$prefix}modal-border-radius: #{$df-modal-border-radius};
-  --#{$prefix}modal-border: #{$df-modal-border};
-  --#{$prefix}modal-header-title-break-word: #{$df-modal-header-title-break-word};
-
-  --#{$prefix}modal-header-padding: #{$df-modal-header-padding};
-
-  --#{$prefix}modal-body-padding-x: #{$df-modal-body-padding-x};
-  --#{$prefix}modal-body-alert-icon-size: #{$df-modal-body-alert-icon-size};
-  --#{$prefix}modal-body-alert-border-style: #{$df-modal-body-alert-border-style};
-  --#{$prefix}modal-xs-padding: #{$df-modal-xs-padding};
-  --#{$prefix}modal-xs-content-padding-y: #{$df-modal-xs-content-padding-y};
-  --#{$prefix}modal-xs-header-padding-right: #{$df-modal-xs-header-padding-right};
-  --#{$prefix}modal-xs-button-close-position-top: #{$df-modal-xs-button-close-position-top};
-  --#{$prefix}modal-xs-button-close-position-end: #{$df-modal-xs-button-close-position-end};
-  --#{$prefix}modal-xs-footer-margin-top: #{$df-modal-xs-footer-margin-top};
-  --#{$prefix}modal-last-paragraph-margin-bottom: #{$df-modal-last-paragraph-margin-bottom};
-  --#{$prefix}modal-footer-padding: #{$df-modal-footer-padding};
-  --#{$prefix}modal-body-padding: #{$df-modal-body-padding};
-
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  .modal-dialog {
-    .modal-content {
-      box-shadow: var(--#{$prefix}modal-box-shadow);
-      border-radius: var(--#{$prefix}modal-border-radius);
-      border: var(--#{$prefix}modal-border);
-
-      .modal-header {
-        padding: var(--#{$prefix}modal-header-padding);
-        .modal-title {
-          word-break: var(--#{$prefix}modal-header-title-break-word);
-        }
-        .btn-close {
-          --#{$prefix}modal-header-button-close-padding-y: #{$df-modal-header-button-close-padding-y};
-          --#{$prefix}modal-header-button-close-border-radius: #{$df-modal-header-button-close-border-radius};
-
-          @if not $isBrand2023 {
-            --#{$prefix}modal-header-icon-font-color: #{shades-css-var(secondary, 'text-color')};
-            --#{$prefix}modal-header-button-color-hover: #{shades-css-var(secondary, 'text-hover-color')};
-          }
-
-          --#{$prefix}modal-header-button-color-hover-bg: #{shades-css-var-brand2023(
-              'button-text-basic-color-neutral-hovered-background',
-              secondary,
-              'bg-subtle-hover-color'
-            )};
-          --#{$prefix}modal-header-button-active-bg: #{shades-css-var-brand2023(
-              'button-text-basic-color-neutral-pressed-background',
-              secondary,
-              'bg-subtle-active-color'
-            )};
-
-          @if $isBrand2023 {
-            --#{$prefix}modal-header-button-color-focus: #{shades-css-var-brand2023(
-                'button-text-basic-color-neutral-default-foreground',
-                secondary,
-                'text-color'
-              )};
-            --#{$prefix}modal-header-button-color-hover-focus: #{shades-css-var-brand2023(
-                'button-text-basic-color-neutral-hovered-foreground',
-                secondary,
-                'text-hover-color'
-              )};
-          } @else {
-            --#{$prefix}modal-header-button-color-focus: rgba(#{shades-rgb-css-var(secondary, 'bg-color')}, 0.5);
-            --#{$prefix}modal-header-button-color-hover-focus: rgba(
-              #{shades-rgb-css-var(secondary, 'bg-hover-color')},
-              0.5
-            );
-          }
-
-          --#{$prefix}modal-header-button-active-color: #{shades-css-var-brand2023(
-              'button-text-basic-color-neutral-pressed-foreground',
-              secondary,
-              'bg-active-color'
-            )};
-
-          --#{$prefix}btn-close-hover-opacity: #{$df-modal-btn-close-hover-opacity};
-          --#{$prefix}btn-close-opacity: #{$df-modal-btn-close-opacity};
-          padding-top: var(--#{$prefix}modal-header-button-close-padding-y);
-          padding-bottom: var(--#{$prefix}modal-header-button-close-padding-y);
-          color: var(--#{$prefix}modal-header-icon-font-color);
-          border-radius: var(--#{$prefix}modal-header-button-close-border-radius);
-          $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666666'><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: transparent $btn-close-bg center/0.8rem auto no-repeat;
-
-          @include rtl {
-            margin-right: auto;
-            margin-left: 0;
-          }
-          &:focus:not(:focus-visible) {
-            box-shadow: none;
-          }
-          &:focus-visible:not(:hover):not(:active) {
-            color: var(--#{$prefix}modal-header-button-color-focus);
-            --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-color-focus);
-          }
-          &:focus-visible:hover:not(:active) {
-            --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-color-hover-focus);
-            color: var(--#{$prefix}modal-header-button-color-hover-focus);
-          }
-          &:hover {
-            color: var(--#{$prefix}modal-header-button-color-hover);
-
-            $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a1a1a'><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: var(--#{$prefix}modal-header-button-color-hover-bg) $btn-close-bg center/0.8rem auto no-repeat;
-          }
-          &:focus-visible:active:not(:hover) {
-            color: var(--#{$prefix}modal-header-button-active-color);
-            --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-active-color);
-
-            $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'><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: var(--#{$prefix}modal-header-button-active-bg) $btn-close-bg center/0.8rem auto no-repeat;
-          }
-          &:focus-visible:active:hover {
-            --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-color-hover-focus);
-          }
-          @if $isBrand2023 {
-            &:hover {
-              background-color: var(--#{$prefix}button-text-basic-color-neutral-hovered-background);
-            }
-            &:active {
-              background-color: var(--#{$prefix}button-text-basic-color-neutral-pressed-background);
-            }
-          }
-        }
-
-        .alert-modal-icon {
-          font-size: var(--#{$prefix}modal-body-alert-icon-size);
-        }
-
-        @each $color, $value in $theme-colors {
-          &.df-#{$color}-modal {
-            .alert-modal-icon {
-              color: $value;
-            }
-          }
-        }
-      }
-
-      .modal-body {
-        padding: var(--#{$prefix}modal-body-padding);
-        p:last-child {
-          margin-bottom: var(--#{$prefix}modal-last-paragraph-margin-bottom);
-        }
-        @include ltr {
-          text-align: left;
-          padding-inline: var(--#{$prefix}modal-body-padding-x);
-        }
-        @include rtl {
-          text-align: right;
-          padding-inline: var(--#{$prefix}modal-body-padding-x);
-        }
-      }
-
-      .modal-footer {
-        padding: var(--#{$prefix}modal-footer-padding);
-        & > * {
-          margin: 0;
-        }
-      }
-    }
-  }
-
-  @include media-breakpoint-only(xs) {
-    .modal-dialog {
-      &:not(.modal-dialog-scrollable) {
-        .modal-content {
-          padding-top: $df-modal-xs-content-padding-y;
-          padding-bottom: $df-modal-xs-content-padding-y;
-          .modal-body {
-            flex: 0;
-          }
-        }
-      }
-
-      margin: 0;
-      padding: var(--#{$prefix}modal-xs-padding);
-      min-height: 100%;
-      display: flex;
-      flex: 1;
-
-      .modal-content {
-        flex: 1;
-        overflow: auto;
-        min-height: 100%;
-        justify-content: center;
-
-        .modal-header {
-          justify-content: center;
-          @include ltr {
-            padding-right: var(--#{$prefix}modal-xs-header-padding-right);
-          }
-          @include rtl {
-            padding-left: var(--#{$prefix}modal-xs-header-padding-right);
-          }
-          border-bottom: none;
-          margin-bottom: 10px;
-          button.close {
-            position: absolute;
-            top: var(--#{$prefix}modal-xs-button-close-position-top);
-            @include ltr {
-              right: var(--#{$prefix}modal-xs-button-close-position-end);
-            }
-            @include rtl {
-              left: var(--#{$prefix}modal-xs-button-close-position-end);
-            }
-            padding: 0;
-            margin: 0;
-          }
-        }
-
-        .modal-body {
-          p {
-            margin-bottom: 0;
-          }
-        }
-
-        .modal-footer {
-          justify-content: center;
-          align-items: baseline;
-          border-top: none;
-          margin-top: var(--#{$prefix}modal-xs-footer-margin-top);
-        }
-      }
-    }
-  }
-}
-
-.modal-backdrop {
-  --#{$prefix}backdrop-opacity: #{$df-modal-backdrop-opacity};
-}

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

@@ -1,29 +0,0 @@
-@use 'sass:map';
-
-$df-modal-backdrop-opacity: 0.4 !default;
-$df-modal-box-shadow: var(--#{$prefix}box-shadow) !default;
-$df-modal-border-radius: $border-radius-lg !default;
-$df-modal-border: $border-width solid $border-color !default;
-
-$df-modal-header-title-break-word: break-word !default;
-$df-modal-header-button-close-padding-y: 0.5rem !default;
-$df-modal-header-button-close-border-radius: $df-btn-icononly-border-radius !default;
-$df-modal-header-padding: map.get($spacers, 4) map.get($spacers, 6) !default;
-
-$df-modal-body-padding-x: 1.5rem !default;
-$df-modal-body-alert-icon-size: 1.75rem !default;
-
-$df-modal-body-alert-border-style: 2px solid !default;
-
-$df-modal-xs-padding: 0.5rem !default;
-$df-modal-xs-content-padding-y: 4rem !default;
-$df-modal-xs-header-padding-right: 1.5rem !default;
-$df-modal-xs-button-close-position-top: 1rem !default;
-$df-modal-xs-button-close-position-end: $df-modal-xs-button-close-position-top !default;
-$df-modal-xs-footer-margin-top: 0.9375rem !default;
-
-$df-modal-last-paragraph-margin-bottom: 0 !default;
-$df-modal-footer-padding: map.get($spacers, 5) map.get($spacers, 6) !default;
-$df-modal-body-padding: map.get($spacers, 5) map.get($spacers, 6) !default;
-$df-modal-btn-close-opacity: 1 !default;
-$df-modal-btn-close-hover-opacity: 1 !default;

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

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