@design-factory/design-factory 17.1.0 → 18.0.1

package/styles/scss/components/footer/_footer.scss

@@ -32,10 +32,9 @@
     }
   }
 
-  a {
-    outline: var(--#{$prefix}footer-item-outline);
-    &:focus {
-      box-shadow: var(--#{$prefix}footer-item-focus-box-shadow);
+  .df-app-footer-links {
+    a {
+      @include df-link();
     }
   }
 

package/styles/scss/components/form/_form.scss

@@ -1,5 +1,6 @@
 @use 'sass:math';
 @use 'sass:map';
+@use 'sass:meta';
 
 form {
   --#{$prefix}form-sm-label-margin-bottom: #{$df-label-margin-bottom-sm};
@@ -24,7 +25,7 @@ form {
 .form-control {
   --#{$prefix}form-input-disabled-color: #{$df-disabled-input-color};
   --#{$prefix}form-input-disabled-cursor: #{$df-input-disabled-cursor};
-  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
     --#{$prefix}box-shadow-color: #{$input-focus-border-color};
   } @else {
     --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
@@ -55,7 +56,7 @@ form {
   --#{$prefix}form-check-input-sm-margin-top: #{($line-height-sm - $df-form-check-input-sm-width) * 1};
   --#{$prefix}form-check-input-lg-margin-top: #{($line-height-lg - $df-form-check-input-lg-width) * 0.5};
 
-  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
     --#{$prefix}box-shadow-color: #{shades-css-var('primary', 'border-color')};
   } @else {
     --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
@@ -93,7 +94,7 @@ form {
   @each $state, $data in $form-validation-states {
     $colorName: map.get($df-form-validation-states-names, $state);
     &.is-#{$state} {
-      @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
         --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'border-color')};
       } @else {
         --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};

package/styles/scss/components/inputs/_inputs.mixin.scss

@@ -1,10 +1,14 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:selector';
+
 @mixin df-input-with-icon-validation-state($state, $color, $position) {
   $ltr-border-side: if($position == 'append', 'right', 'left');
   $rtl-border-side: if($position == 'append', 'left', 'right');
 
   &.is-#{$state} {
     $colorName: map.get($df-form-validation-states-names, $state);
-    @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
       --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'border-color')};
     } @else {
       --#{$prefix}box-shadow-color: rgba(#{to-rgb($color)}, #{$input-btn-focus-color-opacity});
@@ -43,13 +47,13 @@
 }
 
 @mixin df-iwi-root-left($parent) {
-  @at-root #{selector-replace(&, ".input-group", $parent + "> div.input-group:first-of-type")} {
+  @at-root #{selector.replace(&, '.input-group', $parent + '> div.input-group:first-of-type')} {
     @content;
   }
 }
 
 @mixin df-iwi-root-right($parent) {
-  @at-root #{selector-replace(&, ".input-group", $parent + "> div.input-group:last-of-type")} {
+  @at-root #{selector.replace(&, '.input-group', $parent + '> div.input-group:last-of-type')} {
     @content;
   }
 }

package/styles/scss/components/inputs/_inputs.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use 'sass:string';
+@use 'sass:meta';
 
 @import 'inputs.mixin';
 
@@ -7,7 +8,8 @@
   @include transition($input-transition); // default bootstrap input has this property
   background-color: var(--#{$prefix}iwi-input-group-bg-color);
   &.df-disabled {
-    &, .input-group-text {
+    &,
+    .input-group-text {
       background-color: var(--#{$prefix}iwi-input-group-disabled-bg-color);
       cursor: var(--#{$prefix}disabled-cursor);
       color: var(--#{$prefix}iwi-input-group-disabled-text-color);
@@ -29,6 +31,7 @@
 
   button.input-group-text {
     &:not(:disabled):not(.disabled) {
+      color: var(--#{$prefix}iwi-icon-font-color);
       &:hover {
         &:before {
           background-color: var(--#{$prefix}iwi-icon-hover-bg-color);
@@ -50,7 +53,6 @@
     padding: 0;
     background-color: var(--#{$prefix}iwi-input-group-text-bg-color);
     &:before {
-      font-family: var(--#{$prefix}font-family);
       font-size: var(--#{$prefix}iwi-icon-font-size);
       height: var(--#{$prefix}iwi-icon-height);
       width: var(--#{$prefix}iwi-icon-width);
@@ -71,18 +73,7 @@ input[type='search']::-webkit-search-decoration {
   display: none;
 }
 
-%df-iwi-icon {
-  color: var(--#{$prefix}iwi-icon-font-color);
-  font-family: var(--#{$prefix}font-family);
-  font-size: var(--#{$prefix}iwi-icon-font-size);
-  height: var(--#{$prefix}iwi-icon-height);
-  width: var(--#{$prefix}iwi-icon-width);
-  border-radius: var(--#{$prefix}iwi-icon-border-radius);
-  line-height: var(--#{$prefix}iwi-icon-line-height);
-}
-
 .input-group {
-  --#{$prefix}iwi-group-margin-between: #{$df-iwi-group-margin-between};
   --#{$prefix}iwi-group-append-margin-left: #{$df-iwi-group-append-margin-left};
   --#{$prefix}iwi-group-prepend-margin-end: #{$df-iwi-group-prepend-margin-end};
   --#{$prefix}iwi-focused-box-shadow: #{$df-iwi-focused-box-shadow};
@@ -102,10 +93,7 @@ input[type='search']::-webkit-search-decoration {
   --#{$prefix}iwi-icon-border-radius: #{$df-iwi-icon-border-radius};
   --#{$prefix}iwi-icon-line-height: #{$df-iwi-icon-line-height};
   --#{$prefix}iwi-focused-border-color: #{$df-iwi-focused-border-color};
-  --#{$prefix}iwi-icon-display: #{$df-iwi-icon-display};
-  --#{$prefix}iwi-icon-text-align: #{$df-iwi-icon-text-align};
   --#{$prefix}iwi-icon-font-color: #{$df-iwi-icon-font-color};
-  --#{$prefix}iwi-cross-line-height: #{$df-iwi-cross-line-height};
   --#{$prefix}iwi-dpr-from-border-right: #{$df-iwi-dpr-from-border-right};
   --#{$prefix}iwi-dpr-from-border-radius-top-right: #{$df-iwi-dpr-from-border-radius-top-right};
   --#{$prefix}iwi-dpr-from-border-radius-bottom-right: #{$df-iwi-dpr-from-border-radius-bottom-right};
@@ -114,13 +102,13 @@ input[type='search']::-webkit-search-decoration {
   --#{$prefix}iwi-dpr-to-border-radius-bottom-left: #{$df-iwi-dpr-to-border-radius-bottom-left};
   --#{$prefix}iwi-dpr-focus-border: #{$df-iwi-dpr-focus-border};
   --#{$prefix}iwi-input-border-width: #{$input-border-width};
-  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
     --#{$prefix}box-shadow-color: #{$input-focus-border-color};
   }
 
-  $validation-messages: "";
-  @each $state in map-keys($form-validation-states) {
-    $validation-messages: $validation-messages + ":not(." + string.unquote($state) + "-tooltip)" + ":not(." + string.unquote($state) + "-feedback)";
+  $validation-messages: '';
+  @each $state in map.keys($form-validation-states) {
+    $validation-messages: $validation-messages + ':not(.' + string.unquote($state) + '-tooltip)' + ':not(.' + string.unquote($state) + '-feedback)';
   }
 
   // RTL support
@@ -148,11 +136,9 @@ input[type='search']::-webkit-search-decoration {
 
   > .form-control + .form-control {
     @include ltr {
-      // margin-left: $df-iwi-group-prepend-margin-end;
-      margin-left: var(--#{$prefix}iwi-group-prepend-margin-end)
+      margin-left: var(--#{$prefix}iwi-group-prepend-margin-end);
     }
     @include rtl {
-      // margin-right: $df-iwi-group-prepend-margin-end;
       margin-right: var(--#{$prefix}iwi-group-prepend-margin-end);
     }
   }
@@ -324,8 +310,6 @@ input[type='search']::-webkit-search-decoration {
   }
 }
 
-
 .input-group.df-focused {
   border: none;
 }
-

package/styles/scss/components/inputs/_inputs.variables.scss

@@ -22,11 +22,8 @@ $df-iwi-icon-width: 1.5rem !default;
 $df-iwi-icon-border-radius: 50% !default;
 $df-iwi-icon-line-height: 1.5rem !default;
 $df-iwi-focused-border-color: $input-focus-border-color !default;
-$df-iwi-icon-display: inline-block !default;
-$df-iwi-icon-text-align: center !default;
 $df-iwi-icon-font-color: $df-font-icon-color !default;
-$df-iwi-cross-line-height: 1rem !default;
-$df-focused-cross-icon: '\ee5c' !default; // icon-times from DF icons
+$df-focused-cross-icon: '\f00d' !default; // fa-times from DF icons
 $df-focused-cross-font-size: $df-iwi-icon-font-size !default;
 $df-focused-cross-border-radius: $df-iwi-icon-border-radius !default;
 $df-focused-cross-hover-background-color: $df-iwi-icon-hover-bg-color !default;

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

@@ -29,6 +29,13 @@
   border-bottom-color: var(--#{$prefix}link-visited-hover-border-bottom-color);
 }
 
+@mixin df-link-visited-active {
+  color: var(--#{$prefix}link-visited-active-text-color);
+  background-color: var(--#{$prefix}link-visited-active-background);
+  border-bottom-width: var(--#{$prefix}link-visited-active-border-bottom-width);
+  border-bottom-color: var(--#{$prefix}link-visited-active-border-bottom-color);
+}
+
 @mixin df-link-disabled {
   color: var(--#{$prefix}link-disabled-color);
   display: var(--#{$prefix}link-disabled-display);
@@ -49,7 +56,7 @@
 
 @mixin df-link-external-content {
   content: $df-link-external-icon;
-  font-family: var(--#{$prefix}link-external-font-family);
+  font-family: $df-link-external-font-family;
   position: relative;
   bottom: var(--#{$prefix}link-external-icon-bottom);
   font-size: var(--#{$prefix}link-external-icon-size);
@@ -77,12 +84,12 @@
     @include df-link-active;
   }
 
-  &:visited:active {
-    @include df-link-active;
+  &:focus-visible {
+    @include df-link-focus;
   }
 
-  &:focus {
-    @include df-link-focus;
+  &:visited:active {
+    @include df-link-visited-active;
   }
 
   &[aria-disabled='true'] {
@@ -176,7 +183,7 @@
     @include df-link-more-hover;
   }
 
-  &:focus {
+  &:focus-visible {
     @include df-link-more-focus;
   }
 

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

@@ -1,3 +1,4 @@
+@use 'sass:meta';
 @import 'link.mixins';
 
 p,
@@ -9,18 +10,25 @@ ol:not([class]) {
 }
 
 a {
+  --#{$prefix}link-color: #{shades-css-var('links', 'text-color')};
   --#{$prefix}link-border-bottom-width: #{$df-link-border-bottom-width};
   --#{$prefix}link-border-bottom: #{$df-link-border-bottom};
-  --#{$prefix}link-background: #{$df-link-background};
+  --#{$prefix}link-background: #{shades-css-var('links', 'bg-color')};
   --#{$prefix}link-hover-border-bottom-width: #{$df-link-hover-border-bottom-width};
-  --#{$prefix}link-hover-background: #{$df-link-hover-background};
-  --#{$prefix}link-visited-color: #{$df-link-visited-color};
+  --#{$prefix}link-hover-color: #{shades-css-var('links', 'text-hover-color')};
+  --#{$prefix}link-hover-background: #{shades-css-var('links', 'bg-hover-color')};
+  --#{$prefix}link-active-color: #{shades-css-var('links', 'text-active-color')};
+  --#{$prefix}link-active-background: #{shades-css-var('links', 'bg-active-color')};
+  --#{$prefix}link-active-border-bottom-width: #{$df-link-active-border-bottom-width};
+  --#{$prefix}link-visited-color: #{shades-css-var('links', 'text-visited-color')};
   --#{$prefix}link-visited-border-bottom-width: #{$df-link-visited-border-bottom-width};
   --#{$prefix}link-visited-hover-border-bottom-width: #{$df-link-visited-hover-border-bottom-width};
-  --#{$prefix}link-visited-hover-border-bottom-color: #{$df-link-visited-hover-border-bottom-color};
   --#{$prefix}link-visited-border-bottom: #{$df-link-visited-border-bottom};
-  --#{$prefix}link-visited-hover-background: #{$df-link-visited-hover-background};
-  --#{$prefix}link-visited-hover-text-color: #{$df-link-visited-hover-text-color};
+  --#{$prefix}link-visited-hover-background: #{shades-css-var('links', 'bg-visisted-hover-color')};
+  --#{$prefix}link-visited-hover-text-color: #{shades-css-var('links', 'text-visited-hover-color')};
+  --#{$prefix}link-visited-active-text-color: #{shades-css-var('links', 'text-visited-active-color')};
+  --#{$prefix}link-visited-active-background: #{shades-css-var('links', 'bg-visited-active-color')};
+  --#{$prefix}link-visited-active-border-bottom-width: #{$df-link-visited-active-border-bottom-width};
   --#{$prefix}link-focus-outline: #{$df-link-focus-outline};
   --#{$prefix}link-focus-outline-offset: #{$df-link-focus-outline-offset};
   --#{$prefix}link-focus-box-shadow: #{$df-link-focus-box-shadow};
@@ -31,16 +39,13 @@ a {
   --#{$prefix}link-disabled-border-bottom-width: #{$df-link-disabled-border-bottom-width};
   --#{$prefix}link-disabled-border-bottom-color: #{$df-link-disabled-border-bottom-color};
   --#{$prefix}link-disabled-background: #{$df-link-disabled-background};
-  --#{$prefix}link-active-color: #{$df-link-active-color};
-  --#{$prefix}link-active-border-bottom-width: #{$df-link-active-border-bottom-width};
-  --#{$prefix}link-active-background: #{$df-link-active-background};
   --#{$prefix}link-external-icon-bottom: #{$df-link-external-icon-bottom};
   --#{$prefix}link-external-icon-size: #{$df-link-external-icon-size};
-  --#{$prefix}link-external-font-family: #{$df-link-external-font-family};
   --#{$prefix}link-more-text-transform: #{$df-link-more-text-transform};
   --#{$prefix}link-more-text-decoration-underline: #{$df-link-more-text-decoration-underline};
   --#{$prefix}link-more-icon-margin-left: #{$df-link-more-icon-margin-left};
   --#{$prefix}link-more-icon-top: #{$df-link-more-icon-top};
+
   --#{$prefix}link-icononly-height: #{$df-link-icononly-height};
   --#{$prefix}link-icononly-height-sm: #{$df-link-icononly-height-sm};
   --#{$prefix}link-icononly-height-lg: #{$df-link-icononly-height-lg};
@@ -52,29 +57,32 @@ a {
   --#{$prefix}link-icononly-decoration: #{$df-link-icononly-decoration};
   --#{$prefix}link-icononly-border-radius: #{$df-link-icononly-border-radius};
   --#{$prefix}link-icononly-hover-bg-color: #{$df-link-icononly-hover-bg-color};
-  --#{$prefix}link-focus-box-shadow: #{$df-link-focus-box-shadow};
-  --#{$prefix}link-focus-outline: #{$df-link-focus-outline};
 
-  &:focus {
+  &:focus-visible {
+    --#{$prefix}box-shadow-color: #{$df-link-focus-box-shadow-color};
     box-shadow: var(--#{$prefix}link-focus-box-shadow);
     outline: var(--#{$prefix}link-focus-outline);
   }
 
-  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
     &:not(.df-link-icononly) {
       &:hover {
         --#{$prefix}box-shadow-color: var(--#{$prefix}link-hover-color);
       }
-      &:active, &.active {
+
+      &:active,
+      &.active {
         --#{$prefix}box-shadow-color: var(--#{$prefix}link-active-color);
       }
-    } 
+    }
   }
 
-  &[href*='//'], &[href*='mailto'], &.df-link-external {
-    .icon-external-link {
+  &[href*='//'], &[href*='mailto'], &.df-link-external
+  {
+    .fa-external-link {
       display: none;
     }
+
     &:not(.df-link-icononly):after {
       @include df-link-external-content();
     }
@@ -84,7 +92,7 @@ a {
 .df-link-more {
   @include df-link-more-normal();
 
-  &:focus {
+  &:focus-visible {
     @include df-link-more-focus();
   }
 
@@ -97,7 +105,7 @@ a {
   @include df-link-more-disabled();
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     @include df-link-more-disabled();
   }
 }
@@ -110,7 +118,7 @@ a {
   font-size: $font-size-lg;
 }
 
-.df-link-icononly-common {
+%df-link-icononly-common {
   border-radius: var(--#{$prefix}link-icononly-border-radius);
   text-align: var(--#{$prefix}link-icononly-text-align);
   display: var(--#{$prefix}link-icononly-display);
@@ -118,33 +126,41 @@ a {
   text-decoration: var(--#{$prefix}link-icononly-decoration);
   align-items: var(--#{$prefix}link-icononly-align);
   justify-content: var(--#{$prefix}link-icononly-justify-content);
+
   &:hover {
     color: var(--#{$prefix}link-icononly-color);
     background-color: var(--#{$prefix}link-icononly-hover-bg-color);
     text-decoration: var(--#{$prefix}link-icononly-decoration);
   }
-  &:focus {
+
+  &:focus-visible {
     box-shadow: var(--#{$prefix}link-focus-box-shadow);
     outline: var(--#{$prefix}link-focus-outline);
   }
 }
 
 .df-link-icononly {
-  @extend .df-link-icononly-common;
+  @extend %df-link-icononly-common;
   line-height: var(--#{$prefix}link-icononly-height);
   height: var(--#{$prefix}link-icononly-height);
   width: var(--#{$prefix}link-icononly-height);
-  &-sm {
-    @extend .df-link-icononly-common;
+
+  &:focus-visible {
+    --#{$prefix}box-shadow-color: #{$df-link-icononly-focus-box-shadow-color};
+  }
+
+
+  &.df-link-sm {
+    @extend %df-link-icononly-common;
     line-height: var(--#{$prefix}link-icononly-height-sm);
     height: var(--#{$prefix}link-icononly-height-sm);
     width: var(--#{$prefix}link-icononly-height-sm);
   }
 
-  &-lg {
-    @extend .df-link-icononly-common;
+  &.df-link-lg {
+    @extend %df-link-icononly-common;
     line-height: var(--#{$prefix}link-icononly-height-lg);
     height: var(--#{$prefix}link-icononly-height-lg);
     width: var(--#{$prefix}link-icononly-height-lg);
   }
-}
+}

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

@@ -1,21 +1,16 @@
 $df-link-border-bottom-width: $border-width !default;
 $df-link-border-bottom: $df-link-border-bottom-width solid !default;
-$df-link-background: transparent !default;
 
 $df-link-hover-border-bottom-width: $df-link-border-bottom-width * 2 !default;
-$df-link-hover-background: $df-primary-lighten-60 !default;
 
-$df-link-visited-color: $mystery !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 $df-link-visited-color !default;
-$df-link-visited-hover-background: df-getBGSecondaryHoverColor('mystery') !default;
-$df-link-visited-hover-text-color: $df-link-visited-color !default;
-$df-link-visited-hover-border-bottom-color: $df-link-visited-hover-text-color !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: $btn-focus-box-shadow !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;
@@ -25,14 +20,13 @@ $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-color: shades-css-var('primary', 'text-active-color') !default;
 $df-link-active-border-bottom-width: $df-link-border-bottom-width * 2 !default;
-$df-link-active-background: transparent !default;
+$df-link-visited-active-border-bottom-width: $df-link-active-border-bottom-width !default;
 
-$df-link-external-icon: '\00a0\eb03' !default; // Empty space + .icon-external-link
+$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: $df-font-family !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;
@@ -51,5 +45,5 @@ $df-link-icononly-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-focus-box-shadow: $df-focused-box-shadow !default;
+$df-link-icononly-focus-box-shadow-color: inherit !default;
 $df-link-focus-outline: none !default;

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

@@ -3,8 +3,8 @@
   --#{$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};
-  
   border-color: var(--#{$prefix}list-group-border-color);
+
   &[aria-disabled='true'],
   &.disabled,
   &[disabled] {
@@ -15,30 +15,38 @@
 
   &.list-group-item-action {
     &:not([aria-disabled='true']):not(.disabled):not([disabled]) {
-      &:focus {
+      &:focus-visible {
+        --#{$prefix}box-shadow-color: var(--#{$prefix}list-group-active-color);
         box-shadow: $df-list-group-focus-box-shadow;
         outline: none; //disable default
-      }
-      &.active {
+        &: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);
+        }
+
         &:hover {
-          background-color: var(--#{$prefix}list-group-action-hover-bg); // override
+          --#{$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);
-        @include ltr {
-          padding-left: var(--#{$prefix}list-group-item-padding-left);
-          border-left: var(--#{$prefix}list-group-item-border-left-active);
+        padding-inline-start: var(--#{$prefix}list-group-item-padding-left);
+        border-inline-start: var(--#{$prefix}list-group-item-border-left-active);
+        &:hover {
+          background-color: var(--#{$prefix}list-group-action-hover-bg);
         }
-        @include rtl {
-          padding-right: var(--#{$prefix}list-group-item-padding-left);
-          border-right: var(--#{$prefix}list-group-item-border-left-active);
+        &:active {
+          background-color: var(--#{$prefix}list-group-action-active-bg);
         }
       }
     }
-    &:focus {
-      box-shadow: $df-list-group-focus-box-shadow;
-      outline: none;
-    }
   }
 }
 
@@ -48,20 +56,21 @@
     &.df-list-group-#{$extension} {
       --#{$prefix}list-group-font-size: #{$font-size-base * $ratio};
       --#{$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/media/_media.scss

@@ -1,19 +1,22 @@
 .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-hover-focus-text-decoration: #{$df-interactive-media-hover-focus-text-decoration};
   --#{$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};
 
-  @include ltr {
-    text-align: left;
-  }
-  @include rtl {
-    text-align: right;
-  }
+  text-align: start;
   padding: var(--#{$prefix}interactive-media-padding);
-  border: none;
+  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,
@@ -21,30 +24,55 @@
     color: var(--#{$prefix}interactive-media-color);
   }
 
-  &:focus {
+  &: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);
-
-    .media-body > *,
-    .card-body > * {
-      text-decoration: var(--#{$prefix}interactive-media-hover-focus-text-decoration);
-    }
   }
+
   &:hover {
     background-color: var(--#{$prefix}interactive-media-hover-background-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));
 
-    .media-body > *,
-    .card-body > * {
-      text-decoration: var(--#{$prefix}interactive-media-hover-focus-text-decoration);
+  &.df-font-sm,
+  &.card-sm {
+    @include border-radius(var(--#{$prefix}interactive-media-border-radius-sm));
+    @include heading {
+      font-size: var(--#{$prefix}interactive-media-heading-font-size-sm);
     }
   }
-}
 
-.df-img-mr {
-  --#{$prefix}media-margin-end: #{$df-media-margin-end};
-  @include ltr {
-    margin-right: var(--#{$prefix}media-margin-end);
+  &.df-font-lg,
+  &.card-lg {
+    @include border-radius(var(--#{$prefix}interactive-media-border-radius-lg));
+    @include heading {
+      font-size: var(--#{$prefix}interactive-media-heading-font-size-lg);
+    }
   }
-  @include rtl {
-    margin-left: var(--#{$prefix}media-margin-end);
+
+  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}));
+    }
   }
 }