@coreui/coreui 4.2.5 → 4.3.0-alpha.0

package/scss/coreui-grid.rtl.scss

@@ -1,10 +1,5 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.5
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
-*/
+@import "mixins/banner";
+@include bsBanner("");
 
 $enable-ltr: false !default;
 $enable-rtl: true !default;

package/scss/coreui-grid.scss

@@ -1,19 +1,14 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.5
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
-*/
+@import "mixins/banner";
+@include bsBanner(Grid);
 
 $include-column-box-sizing: true !default;
 
 @import "functions";
 @import "variables";
+@import "variables-dark";
 @import "maps";
 
 @import "mixins/ltr-rtl";
-@import "mixins/lists";
 @import "mixins/breakpoints";
 @import "mixins/container";
 @import "mixins/grid";
@@ -21,8 +16,6 @@ $include-column-box-sizing: true !default;
 
 @import "vendor/rfs";
 
-@import "root";
-
 @import "containers";
 @import "grid";
 

package/scss/coreui-reboot.rtl.scss

@@ -1,10 +1,5 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.5
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
-*/
+@import "mixins/banner";
+@include bsBanner("");
 
 $enable-ltr: false !default;
 $enable-rtl: true !default;

package/scss/coreui-reboot.scss

@@ -1,13 +1,10 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.5
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
- */
+@import "mixins/banner";
+@include bsBanner(Reboot);
 
 @import "functions";
 @import "variables";
+@import "variables-dark";
+@import "maps";
 @import "mixins";
 @import "root";
 @import "reboot";

package/scss/coreui-utilities.rtl.scss

@@ -1,10 +1,5 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.5
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
-*/
+@import "mixins/banner";
+@include bsBanner("");
 
 $enable-ltr: false !default;
 $enable-rtl: true !default;

package/scss/coreui-utilities.scss

@@ -1,14 +1,10 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.5
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
- */
+@import "mixins/banner";
+@include bsBanner(Utilities);
 
 // Configuration
 @import "functions";
 @import "variables";
+@import "variables-dark";
 @import "maps";
 @import "mixins";
 @import "utilities";

package/scss/coreui.rtl.scss

@@ -1,10 +1,5 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.5
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
-*/
+@import "mixins/banner";
+@include bsBanner("");
 
 $enable-ltr: false !default;
 $enable-rtl: true !default;

package/scss/coreui.scss

@@ -1,15 +1,11 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.5
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
- */
+@import "mixins/banner";
+@include bsBanner("");
 
 // scss-docs-start import-stack
 // Configuration
 @import "functions";
 @import "variables";
+@import "variables-dark";
 @import "maps";
 @import "mixins";
 @import "utilities";

package/scss/forms/_floating-labels.scss

@@ -5,14 +5,15 @@
   > .form-control-plaintext,
   > .form-select {
     height: $form-floating-height;
+    min-height: $form-floating-height;
     line-height: $form-floating-line-height;
   }
 
   > label {
     position: absolute;
     top: 0;
-    @include ltr-rtl("left", 0);
-    width: 100%;
+    left: 0;
+    z-index: 2;
     height: 100%; // allow textareas
     padding: $form-floating-padding-y $form-floating-padding-x;
     overflow: hidden;
@@ -55,14 +56,24 @@
   > .form-control-plaintext,
   > .form-select {
     ~ label {
-      opacity: $form-floating-label-opacity;
+      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
       transform: $form-floating-label-transform;
+
+      &::after {
+        position: absolute;
+        inset: $form-floating-padding-y ($form-floating-padding-x * .5);
+        z-index: -1;
+        height: $form-floating-label-height;
+        content: "";
+        background-color: $input-bg;
+        @include border-radius($input-border-radius);
+      }
     }
   }
   // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
   > .form-control:-webkit-autofill {
     ~ label {
-      opacity: $form-floating-label-opacity;
+      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
       transform: $form-floating-label-transform;
     }
   }
@@ -72,4 +83,12 @@
       border-width: $input-border-width 0; // Required to properly position label text - as explained above
     }
   }
+
+  > :disabled ~ label {
+    color: $form-floating-label-disabled-color;
+
+    &::after {
+      background-color: $input-disabled-bg;
+    }
+  }
 }

package/scss/forms/_form-check.scss

@@ -9,8 +9,6 @@
   margin-bottom: $form-check-margin-bottom;
 
   .form-check-input {
-    // float: left;
-    // margin-left: $form-check-padding-start * -1;
     @include ltr-rtl("float", left);
     @include ltr-rtl("margin-left", $form-check-padding-start * -1);
   }
@@ -29,11 +27,14 @@
 }
 
 .form-check-input {
+  --#{$prefix}form-check-bg: #{$form-check-input-bg};
+
   width: $form-check-input-width;
   height: $form-check-input-width;
   margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
   vertical-align: top;
-  background-color: var(--#{$prefix}form-check-input-bg, $form-check-input-bg);
+  background-color: var(--#{$prefix}form-check-bg);
+  background-image: var(--#{$prefix}form-check-bg-image);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
@@ -67,17 +68,17 @@
 
     &[type="checkbox"] {
       @if $enable-gradients {
-        background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient);
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
       } @else {
-        background-image: var(--#{$prefix}form-check-input-checked-bg-image, escape-svg($form-check-input-checked-bg-image));
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
       }
     }
 
     &[type="radio"] {
       @if $enable-gradients {
-        background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$prefix}gradient);
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
       } @else {
-        background-image: var(--#{$prefix}form-check-radio-checked-bg-image, escape-svg($form-check-radio-checked-bg-image));
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
       }
     }
   }
@@ -87,9 +88,9 @@
     border-color: $form-check-input-indeterminate-border-color;
 
     @if $enable-gradients {
-      background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient);
+      --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
     } @else {
-      background-image: var(--#{$prefix}form-check-input-indeterminate-bg-image, escape-svg($form-check-input-indeterminate-bg-image));
+      --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
     }
   }
 
@@ -123,24 +124,26 @@
   @include ltr-rtl("padding-left", $form-switch-padding-start);
 
   .form-check-input {
+    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+
     width: $form-switch-width;
-    @include ltr-rtl("margin-left", $form-switch-padding-start * -1);
-    background-image: var(--#{$prefix}form-switch-bg-image, escape-svg($form-switch-bg-image));
+    margin-left: $form-switch-padding-start * -1;
+    background-image: var(--#{$prefix}form-switch-bg);
     background-position: left center;
     @include border-radius($form-switch-border-radius);
     @include transition($form-switch-transition);
 
     &:focus {
-      background-image: var(--#{$prefix}form-switch-focus-bg-image, escape-svg($form-switch-focus-bg-image));
+      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
     }
 
     &:checked {
       background-position: $form-switch-checked-bg-position;
 
       @if $enable-gradients {
-        background-image: escape-svg($form-switch-checked-bg-image), var(--#{$prefix}gradient);
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
       } @else {
-        background-image: var(--#{$prefix}form-switch-checked-bg-image, escape-svg($form-switch-checked-bg-image));
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
       }
     }
   }
@@ -197,15 +200,10 @@
   }
 }
 
-//
-// Alternate form checks
-//
-
-@each $state, $color in $theme-colors {
-  .form-check-#{$state} {
-    --#{$prefix}form-check-input-checked-bg-color: #{$color};
-    --#{$prefix}form-check-input-checked-border-color: #{$color};
-    --#{$prefix}form-check-input-indeterminate-bg-color: #{$color};
-    --#{$prefix}form-check-input-indeterminate-border-color: #{$color};
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .form-switch .form-check-input:not(:checked):not(:focus) {
+      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
+    }
   }
 }

package/scss/forms/_form-control.scss

@@ -10,10 +10,10 @@
   @include font-size($input-font-size);
   font-weight: $input-font-weight;
   line-height: $input-line-height;
-  color: var(--#{$prefix}input-color, $input-color);
-  background-color: var(--#{$prefix}input-bg, $input-bg);
+  color: $input-color;
+  background-color: $input-bg;
   background-clip: padding-box;
-  border: $input-border-width solid var(--#{$prefix}input-border-color, $input-border-color);
+  border: $input-border-width solid $input-border-color;
   appearance: none; // Fix appearance for date inputs in Safari
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@@ -32,9 +32,9 @@
 
   // Customize the `:focus` state to imitate native WebKit styles.
   &:focus {
-    color: var(--#{$prefix}input-focus-color, $input-focus-color);
-    background-color: var(--#{$prefix}input-focus-bg, $input-focus-bg);
-    border-color: var(--#{$prefix}input-focus-border-color, $input-focus-border-color);
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
     outline: 0;
     @if $enable-shadows {
       @include box-shadow($input-box-shadow, $input-focus-box-shadow);
@@ -44,12 +44,31 @@
     }
   }
 
-  // Add some height to date inputs on iOS
-  // https://github.com/twbs/bootstrap/issues/23307
-  // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
   &::-webkit-date-and-time-value {
+    // On Android Chrome, form-control's "width: 100%" makes the input width too small
+    // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
+    //
+    // On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small
+    // Tested under iOS 16.2 / Safari 16.2
+    min-width: 85px; // Seems to be a good minimum safe width
+
+    // Add some height to date inputs on iOS
+    // https://github.com/twbs/bootstrap/issues/23307
+    // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
     // Multiply line-height by 1em if it has no unit
     height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+
+    // Android Chrome type="date" is taller than the other inputs
+    // because of "margin: 1px 24px 1px 4px" inside the shadow DOM
+    // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
+    margin: 0;
+  }
+
+  // Prevent excessive date input height in Webkit
+  // https://github.com/twbs/bootstrap/issues/34433
+  &::-webkit-datetime-edit {
+    display: block;
+    padding: 0;
   }
 
   // Placeholder
@@ -77,8 +96,8 @@
     padding: $input-padding-y $input-padding-x;
     margin: (-$input-padding-y) (-$input-padding-x);
     margin-inline-end: $input-padding-x;
-    color: var(--#{$prefix}form-file-button-color, $form-file-button-color);
-    @include gradient-bg(var(--#{$prefix}form-file-button-bg, $form-file-button-bg));
+    color: $form-file-button-color;
+    @include gradient-bg($form-file-button-bg);
     pointer-events: none;
     border-color: inherit;
     border-style: solid;
@@ -89,7 +108,7 @@
   }
 
   &:hover:not(:disabled):not([readonly])::file-selector-button {
-    background-color: var(--#{$prefix}form-file-button-hover-bg, $form-file-button-hover-bg);
+    background-color: $form-file-button-hover-bg;
   }
 }
 
@@ -104,7 +123,7 @@
   padding: $input-padding-y 0;
   margin-bottom: 0; // match inputs if this class comes on inputs with default margins
   line-height: $input-line-height;
-  color: var(--#{$prefix}input-plaintext-color, $input-plaintext-color);
+  color: $input-plaintext-color;
   background-color: transparent;
   border: solid transparent;
   border-width: $input-border-width 0;
@@ -186,6 +205,7 @@ textarea {
   }
 
   &::-webkit-color-swatch {
+    border: 0 !important; // stylelint-disable-line declaration-no-important
     @include border-radius($input-border-radius);
   }
 

package/scss/forms/_form-range.scss

@@ -28,7 +28,7 @@
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
     margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
-    @include gradient-bg(var(--#{$prefix}form-range-thumb-bg, $form-range-thumb-bg));
+    @include gradient-bg($form-range-thumb-bg);
     border: $form-range-thumb-border;
     @include border-radius($form-range-thumb-border-radius);
     @include box-shadow($form-range-thumb-box-shadow);
@@ -36,7 +36,7 @@
     appearance: none;
 
     &:active {
-      @include gradient-bg(var(--#{$prefix}form-range-thumb-active-bg, $form-range-thumb-active-bg));
+      @include gradient-bg($form-range-thumb-active-bg);
     }
   }
 
@@ -45,7 +45,7 @@
     height: $form-range-track-height;
     color: transparent; // Why?
     cursor: $form-range-track-cursor;
-    background-color: var(--#{$prefix}form-range-track-bg, $form-range-track-bg);
+    background-color: $form-range-track-bg;
     border-color: transparent;
     @include border-radius($form-range-track-border-radius);
     @include box-shadow($form-range-track-box-shadow);
@@ -54,7 +54,7 @@
   &::-moz-range-thumb {
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
-    @include gradient-bg(var(--#{$prefix}form-range-thumb-bg, $form-range-thumb-bg));
+    @include gradient-bg($form-range-thumb-bg);
     border: $form-range-thumb-border;
     @include border-radius($form-range-thumb-border-radius);
     @include box-shadow($form-range-thumb-box-shadow);
@@ -62,7 +62,7 @@
     appearance: none;
 
     &:active {
-      @include gradient-bg(var(--#{$prefix}form-range-thumb-active-bg, $form-range-thumb-active-bg));
+      @include gradient-bg($form-range-thumb-active-bg);
     }
   }
 
@@ -71,7 +71,7 @@
     height: $form-range-track-height;
     color: transparent;
     cursor: $form-range-track-cursor;
-    background-color: var(--#{$prefix}form-range-track-bg, $form-range-track-bg);
+    background-color: $form-range-track-bg;
     border-color: transparent; // Firefox specific?
     @include border-radius($form-range-track-border-radius);
     @include box-shadow($form-range-track-box-shadow);
@@ -81,11 +81,11 @@
     pointer-events: none;
 
     &::-webkit-slider-thumb {
-      background-color: var(--#{$prefix}form-range-thumb-disabled-bg, $form-range-thumb-disabled-bg);
+      background-color: $form-range-thumb-disabled-bg;
     }
 
     &::-moz-range-thumb {
-      background-color: var(--#{$prefix}form-range-thumb-disabled-bg, $form-range-thumb-disabled-bg);
+      background-color: $form-range-thumb-disabled-bg;
     }
   }
 }

package/scss/forms/_form-select.scss

@@ -4,28 +4,29 @@
 // https://primer.github.io/.
 
 .form-select {
+  --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
+
   display: block;
   width: 100%;
   @include ltr-rtl-value-only("padding", $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x, $form-select-padding-y $form-select-padding-x $form-select-padding-y $form-select-indicator-padding);
-  -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
   font-family: $form-select-font-family;
   @include font-size($form-select-font-size);
   font-weight: $form-select-font-weight;
   line-height: $form-select-line-height;
-  color: var(--#{$prefix}form-select-color, $form-select-color);
-  background-color: var(--#{$prefix}form-select-bg, $form-select-bg);
-  background-image: escape-svg($form-select-indicator);
+  color: $form-select-color;
+  background-color: $form-select-bg;
+  background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
   background-repeat: no-repeat;
   @include ltr-rtl-value-only("background-position", $form-select-bg-position);
   background-size: $form-select-bg-size;
-  border: $form-select-border-width solid var(--#{$prefix}form-select-border-color, $form-select-border-color);
+  border: $form-select-border-width solid $form-select-border-color;
   @include border-radius($form-select-border-radius, 0);
   @include box-shadow($form-select-box-shadow);
   @include transition($form-select-transition);
   appearance: none;
 
   &:focus {
-    border-color: var(--#{$prefix}form-select-focus-border-color, $form-select-focus-border-color);
+    border-color: var($form-select-focus-border-color);
     outline: 0;
     @if $enable-shadows {
       @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
@@ -42,15 +43,15 @@
   }
 
   &:disabled {
-    color: var(--#{$prefix}form-select-disabled-color, $form-select-disabled-color);
-    background-color: var(--#{$prefix}form-select-disabled-bg, $form-select-disabled-bg);
-    border-color: var(--#{$prefix}form-select-disabled-border-color, $form-select-disabled-border-color);
+    color: $form-select-disabled-color;
+    background-color: $form-select-disabled-bg;
+    border-color: $form-select-disabled-border-color;
   }
 
   // Remove outline from select box in FF
   &:-moz-focusring {
     color: transparent;
-    text-shadow: 0 0 0 var(--#{$prefix}form-select-color, $form-select-color);
+    text-shadow: 0 0 0 $form-select-color;
   }
 }
 
@@ -69,3 +70,11 @@
   @include font-size($form-select-font-size-lg);
   @include border-radius($form-select-border-radius-lg);
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .form-select {
+      --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
+    }
+  }
+}

package/scss/forms/_form-text.scss

@@ -7,5 +7,5 @@
   @include font-size($form-text-font-size);
   font-style: $form-text-font-style;
   font-weight: $form-text-font-weight;
-  color: var(--#{$prefix}form-text-color, $form-text-color);
+  color: $form-text-color;
 }

package/scss/forms/_input-group.scss

@@ -121,7 +121,7 @@
   }
 
   > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-    @include ltr-rtl("margin-left", -$input-border-width);
+    @include ltr-rtl("margin-left", calc(#{$input-border-width} * -1));
     @include border-start-radius(0);
   }
 

package/scss/forms/_labels.scss

@@ -7,7 +7,7 @@
   @include font-size($form-label-font-size);
   font-style: $form-label-font-style;
   font-weight: $form-label-font-weight;
-  color: var(--#{$prefix}form-label-color, $form-label-color);
+  color: $form-label-color;
 }
 
 // For use with horizontal and inline forms, when you need the label (or legend)
@@ -20,7 +20,7 @@
   font-style: $form-label-font-style;
   font-weight: $form-label-font-weight;
   line-height: $input-line-height;
-  color: var(--#{$prefix}form-label-color, $form-label-color);
+  color: $form-label-color;
 }
 
 .col-form-label-lg {

package/scss/helpers/_color-bg.scss

@@ -1,5 +1,3 @@
-// stylelint-disable function-name-case
-
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in $theme-colors {
   $color-rgb: to-rgb($value);
@@ -8,3 +6,15 @@
     background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
   }
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    @each $color, $value in $theme-colors-dark {
+      $color-rgb: to-rgb($value);
+      .text-bg-#{$color} {
+        color: color-contrast($value) if($enable-important-utilities, !important, null);
+        background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+      }
+    }
+  }
+}

package/scss/helpers/_colored-links.scss

@@ -1,12 +1,30 @@
+// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in $theme-colors {
   .link-#{$color} {
-    color: $value !important; // stylelint-disable-line declaration-no-important
+    color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+    text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
 
     @if $link-shade-percentage != 0 {
       &:hover,
       &:focus {
-        color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) !important; // stylelint-disable-line declaration-no-important
+        $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+        color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+        text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
       }
     }
   }
 }
+
+// One-off special link helper as a bridge until v6
+.link-body-emphasis {
+  color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+
+  @if $link-shade-percentage != 0 {
+    &:hover,
+    &:focus {
+      color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
+      text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
+    }
+  }
+}

package/scss/helpers/_focus-ring.scss

@@ -0,0 +1,5 @@
+.focus-ring:focus {
+  outline: 0;
+  // By default, there is no `--cui-focus-ring-x`, `--cui-focus-ring-y`, or `--cui-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
+  box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
+}