@coreui/coreui 5.0.1 → 5.1.0

package/scss/_type.scss

@@ -34,11 +34,11 @@
 // Type display classes
 @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;
+    @include font-size($font-size);
   }
 }
 

package/scss/_variables.scss

@@ -1620,17 +1620,56 @@ $modal-scale-transform:             scale(1.02) !default;
 
 // Avatars
 // scss-docs-start avatar-variables
-$avatar-width:  2rem !default;
+$avatar-width:                 2rem !default;
+$avatar-height:                2rem !default;
+$avatar-font-size:             .8rem !default;
+$avatar-border-radius:         50em !default;
+$avatar-status-width:          .5rem !default;
+$avatar-status-height:         .5rem !default;
+$avatar-status-border-radius:  50em !default;
+$avatar-transition:            margin .15s !default;
+
+$avatar-sizes: (
+  sm: (
+    width: 1.5rem,
+    height: 1.5rem,
+    font-size: .6rem,
+    status-width: .4rem,
+    status-height: .4rem
+  ),
+  md: (
+    width: 2.5rem,
+    height: 2.5rem,
+    font-size: 1rem,
+    status-width: .7rem,
+    status-height: .7rem
+  ),
+  lg: (
+    width: 3rem,
+    height: 3rem,
+    font-size: 1.2rem,
+    status-width: .8rem,
+    status-height: .8rem
+  ),
+  xl: (
+    width: 4rem,
+    height: 4rem,
+    font-size: 1.6rem,
+    status-width: 1rem,
+    status-height: 1rem
+  ),
+) !default;
+// scss-docs-end avatar-variables
 
+// fusv-disable
+// Deprecated in 5.1.0 for CSS variables
 $avatar-widths: (
   sm: 1.5rem,
   md: 2.5rem,
   lg: 3rem,
   xl: 4rem
 ) !default;
-
-$avatar-transition: margin .15s !default;
-// scss-docs-end avatar-variables
+// fusv-enable
 
 // Alerts
 //
@@ -1725,9 +1764,8 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
 // scss-docs-end list-group-variables
 
 
-// Header // TODO: check
+// Header
 // scss-docs-start header-variables
-$header-min-height:             4rem !default;
 $header-padding-y:              $spacer * .5 !default;
 $header-padding-x:              $spacer * .5 !default;
 $header-brand-font-size:        $font-size-lg !default;
@@ -1938,8 +1976,9 @@ $sidebar-toggler-width:             .5rem !default;
 $sidebar-toggler-height:            .5rem !default;
 $sidebar-toggler-padding-x:         .25rem !default;
 $sidebar-toggler-padding-y:         .25rem !default;
+$sidebar-toggler-bg:                transparent !default;
 $sidebar-toggler-color:             var(--#{$prefix}tertiary-color) !default;
-$sidebar-toggler-bg:                url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg xmlns='http://www.w3.org/2000/svg' transform='matrix(-1 0 0 -1 512 512)'%3E%3Cpath fill='%23000' d='M472,16H40A24.028,24.028,0,0,0,16,40V200H48V48H464V464H48V304H16V472a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V40A24.028,24.028,0,0,0,472,16Z'/%3E%3Cpolygon fill='%23000' points='209.377 363.306 232.004 385.933 366.627 251.31 232.004 116.687 209.377 139.313 305.374 235.311 16 235.311 16 267.311 305.372 267.311 209.377 363.306'/%3E%3C/g%3E%3C/svg%3E") !default;
+$sidebar-toggler-icon:              url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg xmlns='http://www.w3.org/2000/svg' transform='matrix(-1 0 0 -1 512 512)'%3E%3Cpath fill='%23000' d='M472,16H40A24.028,24.028,0,0,0,16,40V200H48V48H464V464H48V304H16V472a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V40A24.028,24.028,0,0,0,472,16Z'/%3E%3Cpolygon fill='%23000' points='209.377 363.306 232.004 385.933 366.627 251.31 232.004 116.687 209.377 139.313 305.374 235.311 16 235.311 16 267.311 305.372 267.311 209.377 363.306'/%3E%3C/g%3E%3C/svg%3E") !default;
 $sidebar-toggler-focus-shadow:      $focus-ring-box-shadow !default;
 $sidebar-toggler-hover-color:       var(--#{$prefix}secondary-color) !default;
 $sidebar-toggler-focus-color:       var(--#{$prefix}secondary-color) !default;

package/scss/mixins/_avatar.scss

@@ -1,10 +1,9 @@
-@mixin avatar($width) {
-  width: $width;
-  height: $width;
-  font-size: $width * .4;
+@include deprecate("`avatar()`", "v5.1.0", "v6.0.0");
 
-  .avatar-status {
-    width: divide($width, 3.75);
-    height: divide($width, 3.75);
-  }
+@mixin avatar($width) {
+  --#{$prefix}avatar-width: #{$width};
+  --#{$prefix}avatar-height: #{$width};
+  --#{$prefix}avatar-font-size: #{$width * .4};
+  --#{$prefix}avatar-status-width: #{divide($width, 3.75)};
+  --#{$prefix}avatar-status-height: #{divide($width, 3.75)};
 }

package/scss/mixins/_banner.scss

@@ -1,6 +1,6 @@
 @mixin bsBanner($file) {
   /*!
-   * CoreUI #{$file} v5.0.1 (https://coreui.io)
+   * CoreUI #{$file} v5.1.0 (https://coreui.io)
    * Copyright (c) 2024 creativeLabs Łukasz Holeczek
    * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
    */

package/scss/sidebar/_sidebar-nav.scss

@@ -51,9 +51,9 @@
   --#{$prefix}sidebar-nav-group-border-color: #{$sidebar-nav-group-border-color};
   --#{$prefix}sidebar-nav-group-items-padding-y: #{$sidebar-nav-group-items-padding-y};
   --#{$prefix}sidebar-nav-group-items-padding-x: #{$sidebar-nav-group-items-padding-x};
-  --#{$prefix}sidebar-nav-group-indicator-color: #{escape-svg($sidebar-nav-group-indicator-color)};
+  --#{$prefix}sidebar-nav-group-indicator-color: #{$sidebar-nav-group-indicator-color};
   --#{$prefix}sidebar-nav-group-indicator-icon: #{escape-svg($sidebar-nav-group-indicator-icon)};
-  --#{$prefix}sidebar-nav-group-indicator-hover-color: #{escape-svg($sidebar-nav-group-indicator-hover-color)};
+  --#{$prefix}sidebar-nav-group-indicator-hover-color: #{$sidebar-nav-group-indicator-hover-color};
   --#{$prefix}sidebar-nav-group-indicator-hover-icon: #{escape-svg($sidebar-nav-group-indicator-hover-icon)};
   --#{$prefix}sidebar-nav-group-toggle-show-color: #{$sidebar-nav-group-toggle-show-color};
   // scss-docs-end sidebar-nav-css-vars

package/scss/sidebar/_sidebar.scss

@@ -213,8 +213,9 @@
   // scss-docs-start sidebar-toggler-css-vars
   --#{$prefix}sidebar-toggler-width: #{$sidebar-toggler-width};
   --#{$prefix}sidebar-toggler-height: #{$sidebar-toggler-height};
+  --#{$prefix}sidebar-toggler-bg: #{$sidebar-toggler-bg};
   --#{$prefix}sidebar-toggler-color: #{$sidebar-toggler-color};
-  --#{$prefix}sidebar-toggler-bg: #{escape-svg($sidebar-toggler-bg)};
+  --#{$prefix}sidebar-toggler-icon: #{escape-svg($sidebar-toggler-icon)};
   --#{$prefix}sidebar-toggler-hover-color: #{$sidebar-toggler-hover-color};
   --#{$prefix}sidebar-toggler-focus-shadow: #{$sidebar-toggler-focus-shadow};
   --#{$prefix}sidebar-toggler-focus-color: #{$sidebar-toggler-focus-color};
@@ -226,7 +227,7 @@
   width: var(--#{$prefix}sidebar-toggler-width);
   height: var(--#{$prefix}sidebar-toggler-height);
   padding: $sidebar-toggler-padding-y $sidebar-toggler-padding-x;
-  background-color: transparent;
+  background-color: var(--#{$prefix}sidebar-toggler-bg);
   border: 0;
   @include border-radius();
 
@@ -238,7 +239,7 @@
     height: 100%;
     content: "";
     background-color: var(--#{$prefix}sidebar-toggler-color);
-    mask: var(--#{$prefix}sidebar-toggler-bg) no-repeat center;
+    mask: var(--#{$prefix}sidebar-toggler-icon) no-repeat center;
     @include transition(var(--#{$prefix}sidebar-toggler-transition));
     @include rtl() {
       transform: rotate(-180deg);

package/scss/themes/bootstrap/mixins/_banner.scss

@@ -1,6 +1,6 @@
 @mixin bsBanner($file) {
   /*!
-   * CoreUI for Bootstrap #{$file} v5.0.1 (https://coreui.io/bootstrap/)
+   * CoreUI for Bootstrap #{$file} v5.1.0 (https://coreui.io/bootstrap/)
    * Copyright (c) 2024 creativeLabs Łukasz Holeczek
    * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
    */