@coreui/coreui 4.2.5 → 5.0.0-alpha.0

package/scss/_navbar.scss

@@ -65,7 +65,7 @@
 .navbar-brand {
   padding-top: var(--#{$prefix}navbar-brand-padding-y);
   padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
-  @include ltr-rtl("margin-right", var(--#{$prefix}navbar-brand-margin-end));
+  margin-right: var(--#{$prefix}navbar-brand-margin-end);
   @include font-size(var(--#{$prefix}navbar-brand-font-size));
   color: var(--#{$prefix}navbar-brand-color);
   text-decoration: if($link-decoration == none, null, none);
@@ -87,6 +87,8 @@
   // scss-docs-start navbar-nav-css-vars
   --#{$prefix}nav-link-padding-x: 0;
   --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
+  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
+  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
   --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
   --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
   --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
@@ -94,7 +96,7 @@
 
   display: flex;
   flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
-  @include ltr-rtl("padding-left", 0);
+  padding-left: 0;
   margin-bottom: 0;
   list-style: none;
 
@@ -108,6 +110,7 @@
   }
 }
 
+
 // Navbar text
 //
 //
@@ -258,7 +261,7 @@
 // Styles for switching between navbars with light or dark background.
 
 .navbar-light {
-  @include deprecate("`.navbar-light`", "v4.2.5", "v6.0.0", true);
+  @include deprecate("`.navbar-light`", "v4.2.0", "v6.0.0", true);
 }
 
 .navbar-dark {
@@ -273,3 +276,11 @@
   --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
   // scss-docs-end navbar-dark-css-vars
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .navbar {
+      --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+    }
+  }
+}

package/scss/_offcanvas.scss

@@ -12,6 +12,8 @@
   --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
   --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
   --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
+  --#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
+  --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
   // scss-docs-end offcanvas-css-vars
 }
 
@@ -42,21 +44,21 @@
       background-clip: padding-box;
       outline: 0;
       @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
-      @include transition(transform $offcanvas-transition-duration ease-in-out);
+      @include transition(var(--#{$prefix}offcanvas-transition));
 
       &.offcanvas-start {
         top: 0;
-        @include ltr-rtl("left", 0);
+        left: 0;
         width: var(--#{$prefix}offcanvas-width);
-        @include ltr-rtl("border-right", var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color));
-        @include ltr-rtl-value-only("transform", translateX(-100%), translateX(100%));
+        border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+        transform: translateX(-100%);
       }
 
       &.offcanvas-end {
         top: 0;
-        @include ltr-rtl("right", 0);
+        right: 0;
         width: var(--#{$prefix}offcanvas-width);
-        @include ltr-rtl("border-left", var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color));
+        border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
         transform: translateX(100%);
       }
 
@@ -81,7 +83,7 @@
 
       &.showing,
       &.show:not(.hiding) {
-        transform: none !important; // stylelint-disable-line declaration-no-important
+        transform: none;
       }
 
       &.showing,
@@ -115,7 +117,7 @@
 }
 
 .offcanvas-backdrop {
-  @include overlay-backdrop($zindex-offcanvas-backdrop, var(--#{$prefix}offcanvas-backdrop-bg, $offcanvas-backdrop-bg), $offcanvas-backdrop-opacity);
+  @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
 }
 
 .offcanvas-header {
@@ -127,14 +129,14 @@
   .btn-close {
     padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
     margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
-    @include ltr-rtl("margin-right", calc(-.5 * var(--#{$prefix}offcanvas-padding-x)));
+    margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
     margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
   }
 }
 
 .offcanvas-title {
   margin-bottom: 0;
-  line-height: $offcanvas-title-line-height;
+  line-height: var(--#{$prefix}offcanvas-title-line-height);
 }
 
 .offcanvas-body {

package/scss/_pagination.scss

@@ -72,10 +72,10 @@
 
 .page-item {
   &:not(:first-child) .page-link {
-    @include ltr-rtl("margin-left", $pagination-margin-start);
+    margin-left: $pagination-margin-start;
   }
 
-  @if $pagination-margin-start == ($pagination-border-width * -1) {
+  @if $pagination-margin-start == calc($pagination-border-width * -1) {
     &:first-child {
       .page-link {
         @include border-start-radius(var(--#{$prefix}pagination-border-radius));

package/scss/_progress.scss

@@ -8,7 +8,8 @@
 }
 // scss-docs-end progress-keyframes
 
-.progress {
+.progress,
+.progress-stacked {
   // scss-docs-start progress-css-vars
   --#{$prefix}progress-height: #{$progress-height};
   @include rfs($progress-font-size, --#{$prefix}progress-font-size);
@@ -46,6 +47,14 @@
   background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
 }
 
+.progress-stacked > .progress {
+  overflow: visible;
+}
+
+.progress-stacked > .progress > .progress-bar {
+  width: 100%;
+}
+
 @if $enable-transitions {
   .progress-bar-animated {
     animation: $progress-bar-animation-timing progress-bar-stripes;
@@ -57,46 +66,3 @@
     }
   }
 }
-
-.progress-thin {
-  height: 4px;
-}
-
-// White progress bar
-.progress.progress-white {
-  background-color: rgba(255, 255, 255, .2);
-  .progress-bar {
-    background-color: $white;
-  }
-}
-
-.progress-group {
-  display: flex;
-  flex-flow: row wrap;
-  margin-bottom: $progress-group-margin-bottom;
-}
-
-.progress-group-prepend {
-  flex: 0 0 100px;
-  align-self: center;
-}
-
-.progress-group-header {
-  display: flex;
-  flex-basis: 100%;
-  align-items: center;
-  margin-bottom: $progress-group-header-margin-bottom;
-}
-
-.progress-group-bars {
-  flex-grow: 1;
-  align-self: center;
-
-  .progress:not(:last-child) {
-    margin-bottom: 2px;
-  }
-}
-
-.progress-group-header + .progress-group-bars {
-  flex-basis: 100%;
-}

package/scss/_reboot.scss

@@ -87,7 +87,7 @@ hr {
   font-style: $headings-font-style;
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;
-  color: var(--#{$prefix}heading-color);
+  color: var(--#{$prefix}heading-color, inherit);
 }
 
 h1 {
@@ -156,10 +156,10 @@ address {
 
 // Lists
 
-// ol,
-// ul {
-//   @include ltr-rtl("padding-left", 2rem); // TODO: find solution
-// }
+ol,
+ul {
+  padding-left: 2rem;
+}
 
 ol,
 ul,
@@ -183,7 +183,7 @@ dt {
 
 dd {
   margin-bottom: .5rem;
-  @include ltr-rtl("margin-left", 0); // 1
+  margin-left: 0; // 1
 }
 
 
@@ -241,11 +241,11 @@ sup { top: -.5em; }
 // Links
 
 a {
-  color: var(--#{$prefix}link-color);
+  color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
   text-decoration: $link-decoration;
 
   &:hover {
-    color: var(--#{$prefix}link-hover-color);
+    --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
     text-decoration: $link-hover-decoration;
   }
 }
@@ -284,7 +284,7 @@ pre {
   margin-bottom: 1rem; // 2
   overflow: auto; // 3
   @include font-size($code-font-size);
-  color: var(--#{$prefix}pre-color, $pre-color);
+  color: $pre-color;
 
   // Account for some code outputs that place code tags in pre tags
   code {
@@ -308,8 +308,8 @@ code {
 kbd {
   padding: $kbd-padding-y $kbd-padding-x;
   @include font-size($kbd-font-size);
-  color: var(--#{$prefix}kbd-color, $kbd-color);
-  background-color: var(--#{$prefix}kbd-bg, $kbd-bg);
+  color: $kbd-color;
+  background-color: $kbd-bg;
   @include border-radius($border-radius-sm);
 
   kbd {
@@ -349,7 +349,7 @@ table {
 caption {
   padding-top: $table-cell-padding-y;
   padding-bottom: $table-cell-padding-y;
-  color: var(--#{$prefix}table-caption-color, $table-caption-color);
+  color: $table-caption-color;
   text-align: left;
 }
 
@@ -494,7 +494,7 @@ fieldset {
 //    See https://github.com/twbs/bootstrap/issues/29712
 
 legend {
-  @include ltr-rtl("float", left); // 1
+  float: left; // 1
   width: 100%;
   padding: 0;
   margin-bottom: $legend-margin-bottom;
@@ -537,16 +537,17 @@ legend {
 
 // 1. A few input types should stay LTR
 // See https://rtlstyling.com/posts/rtl-styling#form-inputs
+// 2. RTL only output
+// See https://rtlcss.com/learn/usage-guide/control-directives/#raw
 
-*[dir="rtl"] {
-  [type="tel"],
-  [type="url"],
-  [type="email"],
-  [type="number"] {
-    direction: ltr;
-  }
+/* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
 }
-
+*/
 
 // Remove the inner padding in Chrome and Safari on macOS.
 

package/scss/_root.scss

@@ -1,4 +1,5 @@
-:root {
+:root,
+[data-coreui-theme="light"] {
   // Note: Custom variable values only support SassScript inside `#{}`.
 
   // Colors
@@ -21,6 +22,18 @@
     --#{$prefix}#{$color}-rgb: #{$value};
   }
 
+  @each $color, $value in $theme-colors-text {
+    --#{$prefix}#{$color}-text: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-bg-subtle {
+    --#{$prefix}#{$color}-bg-subtle: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-border-subtle {
+    --#{$prefix}#{$color}-border-subtle: #{$value};
+  }
+
   --#{$prefix}white-rgb: #{to-rgb($white)};
   --#{$prefix}black-rgb: #{to-rgb($black)};
   --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
@@ -39,17 +52,50 @@
   @if $font-size-root != null {
     --#{$prefix}root-font-size: #{$font-size-root};
   }
-  --#{$prefix}body-font-family: #{$font-family-base};
+  --#{$prefix}body-font-family: #{inspect($font-family-base)};
   @include rfs($font-size-base, --#{$prefix}body-font-size);
   --#{$prefix}body-font-weight: #{$font-weight-base};
   --#{$prefix}body-line-height: #{$line-height-base};
   --#{$prefix}body-color: #{$body-color};
+
+  --#{$prefix}emphasis-color: #{$body-emphasis-color};
+  --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
+
+  --#{$prefix}secondary-color: #{$body-secondary-color};
+  --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
+  --#{$prefix}secondary-bg: #{$body-secondary-bg};
+  --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
+
+  --#{$prefix}tertiary-color: #{$body-tertiary-color};
+  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
+  --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
+  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
+
   @if $body-text-align != null {
     --#{$prefix}body-text-align: #{$body-text-align};
   }
   --#{$prefix}body-bg: #{$body-bg};
+  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
   // scss-docs-end root-body-variables
 
+  @if $headings-color != null {
+    --#{$prefix}heading-color: #{$headings-color};
+  }
+
+  --#{$prefix}link-color: #{$link-color};
+  --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
+  --#{$prefix}link-decoration: #{$link-decoration};
+
+  --#{$prefix}link-hover-color: #{$link-hover-color};
+  --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
+
+  @if $link-hover-decoration != null {
+    --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
+  }
+
+  --#{$prefix}code-color: #{$code-color};
+  --#{$prefix}highlight-bg: #{$mark-bg};
+
   // scss-docs-start root-border-var
   --#{$prefix}border-width: #{$border-width};
   --#{$prefix}border-style: #{$border-style};
@@ -64,11 +110,17 @@
   --#{$prefix}border-radius-pill: #{$border-radius-pill};
   // scss-docs-end root-border-var
 
-  --#{$prefix}heading-color: #{$headings-color};
-  --#{$prefix}link-color: #{$link-color};
-  --#{$prefix}link-hover-color: #{$link-hover-color};
+  --#{$prefix}box-shadow: #{$box-shadow};
+  --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
+  --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
+  --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
 
-  --#{$prefix}code-color: #{$code-color};
+  --#{$prefix}emphasis-color: #{$emphasis-color};
+
+  // scss-docs-start form-control-vars
+  --#{$prefix}form-control-bg: var(--#{$prefix}body-bg);
+  --#{$prefix}form-control-disabled-bg: var(--#{$prefix}secondary-bg);
+  // scss-docs-end form-control-vars
 
   --#{$prefix}highlight-bg: #{$mark-bg};
 
@@ -76,5 +128,80 @@
     --#{$prefix}breakpoint-#{$name}: #{$value};
   }
 
-  --#{$prefix}-mobile-breakpoint: #{$mobile-breakpoint};
+  --#{$prefix}mobile-breakpoint: #{$mobile-breakpoint};
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    color-scheme: dark;
+
+    @each $color, $value in $theme-colors-dark {
+      --#{$prefix}#{$color}: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-dark-rgb {
+      --#{$prefix}#{$color}-rgb: #{$value};
+    }
+
+    // scss-docs-start root-dark-mode-vars
+    --#{$prefix}body-color: #{$body-color-dark};
+    --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+    --#{$prefix}body-bg: #{$body-bg-dark};
+    --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
+
+    --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
+    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+
+    --#{$prefix}secondary-color: #{$body-secondary-color-dark};
+    --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+    --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
+    --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+
+    --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
+    --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+    --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+    --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+
+    --#{$prefix}emphasis-color: #{$emphasis-color-dark};
+
+    --#{$prefix}primary-text: #{$primary-text-dark};
+    --#{$prefix}secondary-text: #{$secondary-text-dark};
+    --#{$prefix}success-text: #{$success-text-dark};
+    --#{$prefix}info-text: #{$info-text-dark};
+    --#{$prefix}warning-text: #{$warning-text-dark};
+    --#{$prefix}danger-text: #{$danger-text-dark};
+    --#{$prefix}light-text: #{$light-text-dark};
+    --#{$prefix}dark-text: #{$dark-text-dark};
+
+    --#{$prefix}primary-bg-subtle: #{$primary-bg-subtle-dark};
+    --#{$prefix}secondary-bg-subtle: #{$secondary-bg-subtle-dark};
+    --#{$prefix}success-bg-subtle: #{$success-bg-subtle-dark};
+    --#{$prefix}info-bg-subtle: #{$info-bg-subtle-dark};
+    --#{$prefix}warning-bg-subtle: #{$warning-bg-subtle-dark};
+    --#{$prefix}danger-bg-subtle: #{$danger-bg-subtle-dark};
+    --#{$prefix}light-bg-subtle: #{$light-bg-subtle-dark};
+    --#{$prefix}dark-bg-subtle: #{$dark-bg-subtle-dark};
+
+    --#{$prefix}primary-border-subtle: #{$primary-border-subtle-dark};
+    --#{$prefix}secondary-border-subtle: #{$secondary-border-subtle-dark};
+    --#{$prefix}success-border-subtle: #{$success-border-subtle-dark};
+    --#{$prefix}info-border-subtle: #{$info-border-subtle-dark};
+    --#{$prefix}warning-border-subtle: #{$warning-border-subtle-dark};
+    --#{$prefix}danger-border-subtle: #{$danger-border-subtle-dark};
+    --#{$prefix}light-border-subtle: #{$light-border-subtle-dark};
+    --#{$prefix}dark-border-subtle: #{$dark-border-subtle-dark};
+
+    --#{$prefix}heading-color: #{$headings-color-dark};
+
+    --#{$prefix}link-color: #{$link-color-dark};
+    --#{$prefix}link-hover-color: #{$link-hover-color-dark};
+    --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
+    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+
+    --#{$prefix}code-color: #{$code-color-dark};
+
+    --#{$prefix}border-color: #{$border-color-dark};
+    --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+    // scss-docs-end root-dark-mode-vars
+  }
 }

package/scss/_sidebar.scss

@@ -1,3 +1,14 @@
 @import "sidebar/sidebar";
 @import "sidebar/sidebar-nav";
 @import "sidebar/sidebar-narrow";
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .sidebar {
+      --#{$prefix}sidebar-bg: #{$sidebar-bg-dark};
+      --#{$prefix}sidebar-color: #{$sidebar-color-dark};
+      --#{$prefix}sidebar-nav-link-active-bg: #{$sidebar-nav-link-active-bg-dark};
+      --#{$prefix}sidebar-nav-link-hover-bg: #{$sidebar-nav-link-hover-bg-dark};
+    }
+  }
+}

package/scss/_tables.scss

@@ -42,7 +42,7 @@
 }
 
 .table-group-divider {
-  border-top: ($table-border-width * 2) solid $table-group-separator-color;
+  border-top: calc($table-border-width * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
 }
 
 //
@@ -143,10 +143,6 @@
 // Table variants set the table cell backgrounds, border colors
 // and the colors of the striped, hovered & active tables
 
-// @each $color, $value in $table-variants {
-//   @include table-variant($color, $value);
-// }
-
 @each $color, $value in $table-variants {
   @include table-variant($color, $value);
 }

package/scss/_toasts.scss

@@ -62,8 +62,8 @@
   @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
 
   .btn-close {
-    @include ltr-rtl("margin-right", calc(-.5 * var(--#{$prefix}toast-padding-x)));
-    @include ltr-rtl("margin-left", var(--#{$prefix}toast-padding-x));
+    margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
+    margin-left: var(--#{$prefix}toast-padding-x);
   }
 }
 

package/scss/_tooltip.scss

@@ -44,7 +44,7 @@
   }
 }
 
-.bs-tooltip-top .tooltip-arrow {
+.cui-tooltip-top .tooltip-arrow {
   bottom: 0;
 
   &::before {
@@ -55,7 +55,7 @@
 }
 
 /* rtl:begin:ignore */
-.bs-tooltip-end .tooltip-arrow {
+.cui-tooltip-end .tooltip-arrow {
   left: 0;
   width: var(--#{$prefix}tooltip-arrow-height);
   height: var(--#{$prefix}tooltip-arrow-width);
@@ -69,7 +69,7 @@
 
 /* rtl:end:ignore */
 
-.bs-tooltip-bottom .tooltip-arrow {
+.cui-tooltip-bottom .tooltip-arrow {
   top: 0;
 
   &::before {
@@ -80,7 +80,7 @@
 }
 
 /* rtl:begin:ignore */
-.bs-tooltip-start .tooltip-arrow {
+.cui-tooltip-start .tooltip-arrow {
   right: 0;
   width: var(--#{$prefix}tooltip-arrow-height);
   height: var(--#{$prefix}tooltip-arrow-width);
@@ -94,18 +94,18 @@
 
 /* rtl:end:ignore */
 
-.bs-tooltip-auto {
+.cui-tooltip-auto {
   &[data-popper-placement^="top"] {
-    @extend .bs-tooltip-top;
+    @extend .cui-tooltip-top;
   }
   &[data-popper-placement^="right"] {
-    @extend .bs-tooltip-end;
+    @extend .cui-tooltip-end;
   }
   &[data-popper-placement^="bottom"] {
-    @extend .bs-tooltip-bottom;
+    @extend .cui-tooltip-bottom;
   }
   &[data-popper-placement^="left"] {
-    @extend .bs-tooltip-start;
+    @extend .cui-tooltip-start;
   }
 }
 
@@ -116,5 +116,5 @@
   color: var(--#{$prefix}tooltip-color);
   text-align: center;
   background-color: var(--#{$prefix}tooltip-bg);
-  border-radius: var(--#{$prefix}tooltip-border-radius, 0); // stylelint-disable-line property-disallowed-list
+  @include border-radius(var(--#{$prefix}tooltip-border-radius));
 }

package/scss/_type.scss

@@ -35,6 +35,8 @@
 @each $display, $font-size in $display-font-sizes {
   .display-#{$display} {
     @include font-size($font-size);
+    font-family: $display-font-family;
+    font-style: $display-font-style;
     font-weight: $display-font-weight;
     line-height: $display-line-height;
   }
@@ -67,7 +69,7 @@
   display: inline-block;
 
   &:not(:last-child) {
-    @include ltr-rtl("margin-right", $list-inline-padding);
+    margin-right: $list-inline-padding;
   }
 }