refactor(css): modularize exports and variables

Author: duanwilliam

website/src/components/Navbar/styles.export.module.scss renamed to website/src/components/Navbar/_exports.module.scss

@@ -1,5 +1,5 @@
 @use "@/styles/utils";
-@use "./styles.module.scss" as *;
+@use "./vars" as *;
 
 :export {
   navbarHeight: utils.strip-units($navbar-height);

website/src/components/Navbar/_exports.module.scss.d.ts

@@ -0,0 +1,10 @@
+// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY
+declare namespace ExportsModuleScssNamespace {
+  export interface IExportsModuleScss {
+    navbarHeight: string;
+  }
+}
+
+declare const ExportsModuleScssModule: ExportsModuleScssNamespace.IExportsModuleScss;
+
+export = ExportsModuleScssModule;

website/src/components/Navbar/_vars.scss

@@ -0,0 +1,2 @@
+$navbar-height: 76px;
+$logo-size: 60px;

website/src/components/Navbar/styles.export.module.scss.d.ts

@@ -1,14 +1,12 @@
 @use "@/styles/colors";
-
-$navbar-height: 76px;
-$logo-size: 60px;
+@use "./vars";
 
 .navbar {
   z-index: 10;
   position: sticky;
   top: 0;
   width: 100%;
-  height: $navbar-height;
+  height: vars.$navbar-height;
   background-color: colors.$white;
   border-bottom: 1px solid #dddddd;
   padding: 0.5rem 2rem;
@@ -28,8 +26,8 @@ $logo-size: 60px;
       font-weight: 700;
 
       > img {
-        width: $logo-size;
-        height: $logo-size;
+        width: vars.$logo-size;
+        height: vars.$logo-size;
       }
     }
   }

website/src/components/Navbar/styles.module.scss

@@ -11,6 +11,7 @@ import c from "clsx";
 
 import { Collapsible, useCollapsible } from "@/components/Collapsible";
 import { canUseDOM } from "@/utils/environment";
+
 import SidebarItems from "./SidebarItems";
 
 import s from "./styles.module.scss";

website/src/components/Sidebar/SidebarItem.tsx

@@ -0,0 +1 @@
+$desktop-sidebar-width: 300px;

website/src/components/Sidebar/_vars.scss

@@ -7,8 +7,7 @@
 
 @use "@/styles/colors";
 @use "@/styles/mixins";
-
-$desktop-sidebar-width: 300px;
+@use "./vars";
 
 .items {
   list-style: none;
@@ -79,6 +78,6 @@ $arrow-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg
 
 .desktop {
   @include mixins.desktop-only() {
-    width: $desktop-sidebar-width;
+    width: vars.$desktop-sidebar-width;
   }
 }

website/src/components/Sidebar/styles.module.scss

@@ -0,0 +1 @@
+$desktop-toc-width: 200px;

website/src/components/Toc/_vars.scss

@@ -8,8 +8,6 @@
 @use "@/styles/mixins";
 @use "@/styles/colors";
 
-$desktop-toc-width: 200px;
-
 .items {
   &, ul {
     list-style-type: none;