@design-factory/design-factory 19.1.1 → 20.0.0-next.0

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

@@ -1,14 +1,6 @@
 @use 'sass:meta';
 @import 'link.mixins';
 
-p,
-ul:not([class]),
-ol:not([class]) {
-  a {
-    @include df-link();
-  }
-}
-
 a {
   --#{$prefix}link-color: #{shades-css-var('links', 'text-color')};
   --#{$prefix}link-border-bottom-width: #{$df-link-border-bottom-width};
@@ -24,7 +16,7 @@ a {
   --#{$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-border-bottom: #{$df-link-visited-border-bottom};
-  --#{$prefix}link-visited-hover-background: #{shades-css-var('links', 'bg-visisted-hover-color')};
+  --#{$prefix}link-visited-hover-background: #{shades-css-var('links', 'bg-visited-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')};
@@ -41,6 +33,7 @@ a {
   --#{$prefix}link-disabled-background: #{$df-link-disabled-background};
   --#{$prefix}link-external-icon-bottom: #{$df-link-external-icon-bottom};
   --#{$prefix}link-external-icon-size: #{$df-link-external-icon-size};
+  //TODO: remove link-more with old branding removal
   --#{$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};
@@ -58,6 +51,12 @@ a {
   --#{$prefix}link-icononly-border-radius: #{$df-link-icononly-border-radius};
   --#{$prefix}link-icononly-hover-bg-color: #{$df-link-icononly-hover-bg-color};
 
+  @include df-link();
+
+  &.btn {
+    @include a-btn();
+  }
+
   &:focus-visible {
     --#{$prefix}box-shadow-color: #{$df-link-focus-box-shadow-color};
     box-shadow: var(--#{$prefix}link-focus-box-shadow);
@@ -65,15 +64,13 @@ a {
   }
 
   @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 {
-        --#{$prefix}box-shadow-color: var(--#{$prefix}link-active-color);
-      }
+    &:hover {
+      --#{$prefix}box-shadow-color: #{shades-css-var('links', 'box-shadow-hover-color')};
+    }
+
+    &:active,
+    &.active {
+      --#{$prefix}box-shadow-color: #{shades-css-var('links', 'box-shadow-active-color')};
     }
   }
 
@@ -118,7 +115,8 @@ a {
   font-size: $font-size-lg;
 }
 
-%df-link-icononly-common {
+a.df-link-icononly {
+  border-bottom: 0;
   border-radius: var(--#{$prefix}link-icononly-border-radius);
   text-align: var(--#{$prefix}link-icononly-text-align);
   display: var(--#{$prefix}link-icononly-display);
@@ -126,39 +124,35 @@ a {
   text-decoration: var(--#{$prefix}link-icononly-decoration);
   align-items: var(--#{$prefix}link-icononly-align);
   justify-content: var(--#{$prefix}link-icononly-justify-content);
+  //overridden by sizing sm and lg
+  line-height: var(--#{$prefix}link-icononly-height);
+  height: var(--#{$prefix}link-icononly-height);
+  width: var(--#{$prefix}link-icononly-height);
 
   &:hover {
-    color: var(--#{$prefix}link-icononly-color);
+    color: $df-link-icononly-hover-color;
     background-color: var(--#{$prefix}link-icononly-hover-bg-color);
     text-decoration: var(--#{$prefix}link-icononly-decoration);
   }
 
   &:focus-visible {
+    --#{$prefix}box-shadow-color: #{$df-link-icononly-focus-box-shadow-color};
     box-shadow: var(--#{$prefix}link-focus-box-shadow);
     outline: var(--#{$prefix}link-focus-outline);
   }
-}
-
-.df-link-icononly {
-  @extend %df-link-icononly-common;
-  line-height: var(--#{$prefix}link-icononly-height);
-  height: var(--#{$prefix}link-icononly-height);
-  width: var(--#{$prefix}link-icononly-height);
 
-  &:focus-visible {
-    --#{$prefix}box-shadow-color: #{$df-link-icononly-focus-box-shadow-color};
+  &:active {
+    color: $df-link-icononly-active-color;
+    background-color: $df-link-icononly-active-bg-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);
   }
 
   &.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

@@ -42,8 +42,11 @@ $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-group/_list-group.scss

@@ -1,20 +1,39 @@
+%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] {
-    color: var(--#{$prefix}list-group-disabled-color);
-    cursor: var(--#{$prefix}list-group-disabled-cursor);
-    pointer-events: auto;
+    &,
+    &: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;
@@ -26,6 +45,7 @@
         &:active,
         &.active {
           --#{$prefix}inner-box-shadow-color: var(--#{$prefix}list-group-action-active-bg);
+          color: var(--#{$prefix}list-group-active-color);
         }
 
         &:hover {
@@ -33,16 +53,21 @@
           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);
         }
       }
@@ -51,10 +76,10 @@
 }
 
 .list-group {
-  font-size: var(--#{$prefix}list-group-font-size);
+  font-size: $font-size-base;
   @each $extension, $ratio in $df-size-ratios {
     &.df-list-group-#{$extension} {
-      --#{$prefix}list-group-font-size: #{$font-size-base * $ratio};
+      --#{$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 {

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

@@ -1,6 +1,10 @@
 $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-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

@@ -45,6 +45,10 @@
   &.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);
     }
@@ -53,11 +57,14 @@
   &.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);
   }

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

@@ -14,3 +14,5 @@ $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/navbar/_navbar.mixins.scss

@@ -0,0 +1,55 @@
+@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);
+  }
+}