Merge branch 'dev' of https://github.com/coreui/coreui into dev

mrholek · mrholek · commit 1501e81c0cbc · 2025-02-13T00:02:39.000+01:00
diff --git a/docs/assets/scss/_ads.scss b/docs/assets/scss/_ads.scss
@@ -1,4 +1,7 @@
 // stylelint-disable declaration-no-important, selector-max-id
+@use "../../../scss/mixins/border-radius" as *;
+@use "../../../scss/mixins/breakpoints" as *;
+@use "../../../scss/vendor/rfs" as *;
 
 //
 // Carbon ads
diff --git a/docs/assets/scss/_anchor.scss b/docs/assets/scss/_anchor.scss
@@ -1,3 +1,6 @@
+@use "../../../scss/mixins/transition" as *;
+@use "../../../scss/variables" as *;
+
 .anchor-link {
   padding: 0 .175rem;
   font-weight: 400;
diff --git a/docs/assets/scss/_buttons.scss b/docs/assets/scss/_buttons.scss
@@ -1,3 +1,6 @@
+@use "../../../scss/functions/color" as *;
+@use "variables" as *;
+
 // Buttons
 //
 // Custom buttons for the docs.
diff --git a/docs/assets/scss/_callouts.scss b/docs/assets/scss/_callouts.scss
@@ -1,3 +1,6 @@
+@use "../../../scss/variables" as *;
+@use "variables" as *;
+
 //
 // Callouts
 //
diff --git a/docs/assets/scss/_clipboard-js.scss b/docs/assets/scss/_clipboard-js.scss
@@ -1,3 +1,6 @@
+@use "../../../scss/mixins/border-radius" as *;
+@use "../../../scss/mixins/breakpoints" as *;
+
 // clipboard.js
 //
 // JS-based `Copy` buttons for code snippets.
diff --git a/docs/assets/scss/_colors.scss b/docs/assets/scss/_colors.scss
@@ -1,9 +1,14 @@
+@use "sass:map";
+@use "sass:string";
+@use "../../../scss/functions/color-contrast" as *;
+@use "../../../scss/functions/color" as *;
+@use "../../../scss/variables" as *;
+
 //
 // Docs color palette classes
 //
 
-
-@each $color, $value in map-merge($colors, ("gray-500": $gray-500)) {
+@each $color, $value in map.merge($colors, ("gray-500": $gray-500)) {
   .swatch-#{$color} {
     color: color-contrast($value);
     background-color: #{$value};
@@ -20,9 +25,9 @@
       line-height: 1.35;
       white-space: pre;
       content:
-        str-slice($contrast-ratio, 1, 4) "\A"
-        str-slice($against-white, 1, 4) "\A"
-        str-slice($against-black, 1, 4);
+        string.slice($contrast-ratio, 1, 4) "\A"
+        string.slice($against-white, 1, 4) "\A"
+        string.slice($against-black, 1, 4);
       background-color: $value;
       background-image:
         linear-gradient(
diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss
@@ -1,3 +1,12 @@
+@use "../../../scss/mixins/border-radius" as *;
+@use "../../../scss/mixins/breakpoints" as *;
+@use "../../../scss/mixins/clearfix" as *;
+@use "../../../scss/mixins/container" as *;
+@use "../../../scss/mixins/grid" as *;
+@use "../../../scss/vendor/rfs" as *;
+@use "../../../scss/variables" as *;
+@use "variables" as *;
+
 //
 // Docs examples
 //
diff --git a/docs/assets/scss/_content.scss b/docs/assets/scss/_content.scss
@@ -1,3 +1,8 @@
+@use "../../../scss/functions/to-rgb" as *;
+@use "../../../scss/mixins/breakpoints" as *;
+@use "../../../scss/vendor/rfs" as *;
+@use "../../../scss/variables" as *;
+
 //
 // CoreUI docs content theming
 //
diff --git a/docs/assets/scss/_footer.scss b/docs/assets/scss/_footer.scss
@@ -1,3 +1,6 @@
+@use "../../../scss/vendor/rfs" as *;
+@use "../../../scss/variables" as *;
+
 //
 // Footer
 //
diff --git a/docs/assets/scss/_header.scss b/docs/assets/scss/_header.scss
@@ -1,3 +1,5 @@
+@use "../../../scss/variables" as *;
+
 .docs-header {
   --#{$prefix}header-bg: #{var(--cui-body-bg)};
 }
diff --git a/docs/assets/scss/_layout.scss b/docs/assets/scss/_layout.scss
@@ -1,6 +1,10 @@
+@use "../../../scss/mixins/breakpoints" as *;
+@use "../../../scss/mixins/transition" as *;
+@use "../../../scss/variables" as *;
+
 .wrapper {
   width: 100%;
-  @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
+  padding-inline-start: var(--cui-sidebar-occupy-start, 0);
   will-change: auto;
   @include transition(padding .15s);
 
diff --git a/docs/assets/scss/_placeholder-img.scss b/docs/assets/scss/_placeholder-img.scss
@@ -1,3 +1,5 @@
+@use "../../../scss/vendor/rfs" as *;
+
 //
 // Placeholder svg used in the docs.
 //
diff --git a/docs/assets/scss/_root.scss b/docs/assets/scss/_root.scss
@@ -0,0 +1,19 @@
+@use "../../../scss/functions/to-rgb" as *;
+@use "../../../scss/variables" as *;
+@use "variables" as *;
+
+:root {
+  --cd-purple: #{$cd-purple};
+  --cd-violet: #{$cd-violet};
+  --cd-accent: #{$cd-accent};
+  --cd-violet-rgb: #{to-rgb($cd-violet)};
+  --cd-accent-rgb: #{to-rgb($cd-accent)};
+  --cd-pink-rgb: #{to-rgb($pink-500)};
+  --cd-teal-rgb: #{to-rgb($teal-500)};
+  --cd-violet-bg: var(--cd-violet);
+  --cd-toc-color: var(--cd-violet);
+  --cd-sidebar-link-bg: rgba(var(--cd-violet-rgb), .1);
+  --cd-callout-link: #{to-rgb($blue-600)};
+  --cd-callout-code-color: #{$pink-600};
+  --cd-pre-bg: var(--cui-tertiary-bg);
+}
diff --git a/docs/assets/scss/_search.scss b/docs/assets/scss/_search.scss
diff --git a/docs/assets/scss/_sidebar.scss b/docs/assets/scss/_sidebar.scss
@@ -1,3 +1,5 @@
+@use "../../../scss/mixins/color-mode" as *;
+
 .docs-sidebar {
   --cui-sidebar-bg: var(--cui-tertiary-bg);
   --cui-sidebar-brand-bg: transparent;
@@ -23,10 +25,8 @@
   }
 }
 
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .docs-sidebar {
-      --cui-sidebar-bg: var(--cui-body-bg);
-    }
+@include color-mode(dark) {
+  .docs-sidebar {
+    --cui-sidebar-bg: var(--cui-body-bg);
   }
 }
diff --git a/docs/assets/scss/_skippy.scss b/docs/assets/scss/_skippy.scss
@@ -1,3 +1,6 @@
+@use "../../../scss/variables" as *;
+@use "variables" as *;
+
 .skippy {
   background-color: $cd-purple;
 
diff --git a/docs/assets/scss/_syntax.scss b/docs/assets/scss/_syntax.scss
@@ -1,3 +1,6 @@
+@use "../../../scss/mixins/color-mode" as *;
+@use "../../../scss/variables" as *;
+
 :root,
 [data-coreui-theme="light"] {
   // --base00: #fff;
diff --git a/docs/assets/scss/_toc.scss b/docs/assets/scss/_toc.scss
@@ -1,5 +1,10 @@
 // stylelint-disable selector-max-type
 
+@use "../../../scss/functions/math" as *;
+@use "../../../scss/mixins/border-radius" as *;
+@use "../../../scss/mixins/breakpoints" as *;
+@use "../../../scss/vendor/rfs" as *;
+
 .docs-toc {
   @include media-breakpoint-up(lg) {
     position: sticky;
diff --git a/docs/assets/scss/_variables.scss b/docs/assets/scss/_variables.scss
@@ -1,23 +1,10 @@
+@use "sass:color";
+@use "../../../scss/variables" as *;
 // Local docs variables
-$cd-purple:        #4c0bce;
-$cd-violet:        lighten(saturate($cd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
+
+$cd-purple:       #4c0bce;
+$cd-violet:        color.scale($cd-purple, $saturation: 10%, $lightness: 25%); // stylelint-disable-line scss/at-function-named-arguments
 $cd-accent:       #ffe484;
 
 $cd-gutter-x: 3rem;
 $cd-callout-variants: info, warning, danger !default;
-
-:root {
-  --cd-purple: #{$cd-purple};
-  --cd-violet: #{$cd-violet};
-  --cd-accent: #{$cd-accent};
-  --cd-violet-rgb: #{to-rgb($cd-violet)};
-  --cd-accent-rgb: #{to-rgb($cd-accent)};
-  --cd-pink-rgb: #{to-rgb($pink-500)};
-  --cd-teal-rgb: #{to-rgb($teal-500)};
-  --cd-violet-bg: var(--cd-violet);
-  --cd-toc-color: var(--cd-violet);
-  --cd-sidebar-link-bg: rgba(var(--cd-violet-rgb), .1);
-  --cd-callout-link: #{to-rgb($blue-600)};
-  --cd-callout-code-color: #{$pink-600};
-  --cd-pre-bg: var(--cui-tertiary-bg);
-}
diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
diff --git a/docs/assets/scss/search.scss b/docs/assets/scss/search.scss

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "../../../scss/variables" as *;`
	`2`	`+`
`1`	`3`	`.docs-header {`
`2`	`4`	`--#{$prefix}header-bg: #{var(--cui-body-bg)};`
`3`	`5`	`}`