refactor: migrate to Sass modules

coreui · Feb 16, 2025 · 9d74c9c · 9d74c9c
1 parent e53f0fe
commit 9d74c9c
Show file tree

Hide file tree

Showing 16 changed files with 116 additions and 65 deletions.
diff --git a/packages/docs/gatsby-browser.tsx b/packages/docs/gatsby-browser.tsx
@@ -3,6 +3,7 @@ import '@docsearch/css'
 import DefaultLayout from './src/templates/DefaultLayout'
 import DocsLayout from './src/templates/DocsLayout'
 import './src/styles/styles.scss'
+import './src/styles/search.scss'
 
 export const wrapRootElement = ({ element }: { element: ReactNode }) => {
   return <DefaultLayout>{element}</DefaultLayout>

diff --git a/packages/docs/gatsby-ssr.tsx b/packages/docs/gatsby-ssr.tsx
@@ -3,6 +3,7 @@ import '@docsearch/css'
 import DefaultLayout from './src/templates/DefaultLayout'
 import DocsLayout from './src/templates/DocsLayout'
 import './src/styles/styles.scss'
+import './src/styles/search.scss'
 
 export const wrapRootElement = ({ element }: { element: ReactNode }) => {
   return <DefaultLayout>{element}</DefaultLayout>

diff --git a/packages/docs/src/styles/_ads.scss b/packages/docs/src/styles/_ads.scss
@@ -1,19 +1,18 @@
 // stylelint-disable declaration-no-important, selector-max-id
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
 
 //
 // Carbon ads
 //
 
-.carbonads-wrapper {
-  min-height: 130px;
-  margin: 2rem 0;
-}
-
 #carbonads {
   position: static;
   display: block;
   max-width: 400px;
   padding: 15px 15px 15px 160px;
+  margin: 2rem 0;
   overflow: hidden;
   @include font-size(.8125rem);
   line-height: 1.4;

diff --git a/packages/docs/src/styles/_anchor.scss b/packages/docs/src/styles/_anchor.scss
@@ -1,23 +1,24 @@
+@use "@coreui/coreui/scss/mixins/transition" as *;
+@use "@coreui/coreui/scss/variables" as *;
 
 .anchor-link {
+  padding: 0 .175rem;
   font-weight: 400;
   color: rgba($link-color, .5);
-  padding-left: 0.375em;
   text-decoration: none;
   opacity: 0;
-  @include transition(opacity 0.1s ease-in-out, color .15s ease-in-out);
+  @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
+
+  &::after {
+    content: "#";
+  }
 
   &:focus,
-  &:hover {
+  &:hover,
+  :hover > &,
+  :target > & {
     color: $link-color;
     text-decoration: none;
+    opacity: 1;
   }
 }
-
-h2, h3, h4, h5, h6, td {
-  &:hover {
-    .anchor-link {
-      opacity: 1;
-    }
-  }
-}
diff --git a/packages/docs/src/styles/_callouts.scss b/packages/docs/src/styles/_callouts.scss
@@ -1,3 +1,6 @@
+@use "@coreui/coreui/scss/variables" as *;
+@use "variables" as *;
+
 //
 // Callouts
 //

diff --git a/packages/docs/src/styles/_component-examples.scss b/packages/docs/src/styles/_component-examples.scss
@@ -1,3 +1,12 @@
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/clearfix" as *;
+@use "@coreui/coreui/scss/mixins/container" as *;
+@use "@coreui/coreui/scss/mixins/grid" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+@use "@coreui/coreui/scss/variables" as *;
+@use "variables" as *;
+
 //
 // Docs examples
 //

diff --git a/packages/docs/src/styles/_component-sub-nav.scss b/packages/docs/src/styles/_component-sub-nav.scss
@@ -1,3 +1,5 @@
+@use "@coreui/coreui/scss/mixins/transition" as *;
+
 .component-sub-nav-wrapper {
   @include transition(box-shadow 0.2s linear);
   &:before {

diff --git a/packages/docs/src/styles/_footer.scss b/packages/docs/src/styles/_footer.scss
@@ -1,3 +1,6 @@
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+@use "@coreui/coreui/scss/variables" as *;
+
 //
 // Footer
 //

diff --git a/packages/docs/src/styles/_layout.scss b/packages/docs/src/styles/_layout.scss
@@ -1,6 +1,10 @@
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/transition" as *;
+@use "@coreui/coreui/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/packages/docs/src/styles/_prism.scss b/packages/docs/src/styles/_prism.scss
@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
+@use "@coreui/coreui/scss/variables" as *;
+
 /* PrismJS 1.24.1
 https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript */
 /**
@@ -16,7 +20,7 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli
   --base05: #333;
   --base06: #fff;
   --base07: #{$teal-700}; // #9a6700
-  --base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
+  --base08: #{color.mix($red-500, $red-600, 50%)}; // #bc4c00
   --base09: #{$cyan-700}; // #087990
   --base0A: #{$purple-500}; // #795da3
   --base0B: #{$blue-700}; // #183691

diff --git a/packages/docs/src/styles/_root.scss b/packages/docs/src/styles/_root.scss
@@ -0,0 +1,19 @@
+@use "@coreui/coreui/scss/functions/to-rgb" as *;
+@use "@coreui/coreui/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/packages/docs/src/styles/_sidebar.scss b/packages/docs/src/styles/_sidebar.scss
@@ -1,3 +1,5 @@
+@use "@coreui/coreui/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/packages/docs/src/styles/_toc.scss b/packages/docs/src/styles/_toc.scss
@@ -1,5 +1,10 @@
 // stylelint-disable selector-max-type
 
+@use "@coreui/coreui/scss/functions/math" as *;
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+
 .docs-toc {
   @include media-breakpoint-up(xl) {
     position: sticky;

diff --git a/packages/docs/src/styles/_variables.scss b/packages/docs/src/styles/_variables.scss
@@ -1,25 +1,10 @@
-// stylelint-disable scss/dollar-variable-default
-
+@use "sass:color";
+@use "@coreui/coreui/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/packages/docs/src/styles/_search.scss → packages/docs/src/styles/search.scss b/packages/docs/src/styles/_search.scss → packages/docs/src/styles/search.scss
@@ -1,5 +1,22 @@
-// stylelint-disable selector-class-pattern
+/*!
+ * CoreUI Docs (https://coreui.io/bootstrap/docs/)
+ * Copyright 2025 creativeLabs Łukasz Holeczek
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/box-shadow" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
+@use "@coreui/coreui/scss/mixins/transition" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+@use "@coreui/coreui/scss/variables" as *;
+
+@forward "@docsearch/css/dist/style";
+
 
+// stylelint-disable selector-class-pattern
 :root {
   --docsearch-primary-color: var(--cui-primary);
   --docsearch-logo-color: var(--cui-primary);
@@ -29,6 +46,7 @@
   --docsearch-muted-color: var(--cui-secondary-color);
   --docsearch-hit-shadow: none;
 
+  position: fixed;
   z-index: 2000; // Make sure to be over all components showcased in the documentation
   cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
 
@@ -39,11 +57,7 @@
 
 .DocSearch-Button {
   --docsearch-searchbox-background: #{rgba($black, .1)};
-  // --docsearch-searchbox-color: #{$white};
   --docsearch-searchbox-focus-background: #{rgba($black, .25)};
-  // --docsearch-searchbox-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)};
-  // --docsearch-text-color: #{$white};
-  // --docsearch-muted-color: #{rgba($white, .65)};
 
   min-width: 200px;
   min-height: 38px;
@@ -58,7 +72,6 @@
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @include border-radius($btn-border-radius);
-
   @include box-shadow($input-box-shadow);
   @include transition($input-transition);
 

diff --git a/packages/docs/src/styles/styles.scss b/packages/docs/src/styles/styles.scss
@@ -1,19 +1,21 @@
-@import "@coreui/coreui/scss/coreui";
+@use "@coreui/coreui/scss/coreui" with (
+  $enable-deprecation-messages: false
+);
 
 // Import Chart.js custom tooltips styles
-@import "@coreui/chartjs/scss/coreui-chartjs";
+@use "@coreui/chartjs/scss/coreui-chartjs";
 
-@import "variables";
-@import "ads";
-@import "anchor";
-@import "callouts";
-@import "component-examples";
-@import "component-sub-nav";
-@import "footer";
-@import "layout";
-@import "prism";
-@import "scrolling";
-@import "search";
-@import "sidebar";
-@import "table-api";
-@import "toc";
+// Load docs components
+@forward "root";
+@forward "ads";
+@forward "anchor";
+@forward "callouts";
+@forward "component-examples";
+@forward "component-sub-nav";
+@forward "footer";
+@forward "layout";
+@forward "prism";
+@forward "scrolling";
+@forward "sidebar";
+@forward "table-api";
+@forward "toc";