tweak: add prefix of css vars (#546)

* tweak: add prefix of css vars

* tweak: rename vars

* chore: rename var

Author: shhdgit

gatsby-config.js

@@ -4,7 +4,10 @@ const docs = require("./docs/docs.json");
 
 module.exports = {
   siteMetadata: {
-    title: "TiDB Docs",
+    title:
+      process.env.WEBSITE_BUILD_TYPE === "archive"
+        ? "TiDB Archived Docs"
+        : "TiDB Docs",
     description:
       "Explore the how-to guides and references you need to use TiDB Cloud and TiDB, migrate data, and build your applications on the database.",
     author: "@PingCAP",

src/components/MDXComponents/DocHome.tsx

@@ -112,11 +112,11 @@ export function DocHomeContainer(
             <Box
               sx={{
                 "& > a.button": {
-                  background: "var(--primary-color)",
+                  background: "var(--tiui-palette-primary)",
                   textDecoration: "none",
                   color: "white",
                   "&:hover": {
-                    backgroundColor: "var(--primary-color-dark)",
+                    backgroundColor: "var(--tiui-palette-primary-dark)",
                   },
                 },
               }}
@@ -403,7 +403,7 @@ export function DocHomeCard(props: React.PropsWithChildren<DocHomeCardProps>) {
         "&:hover": {
           background:
             "radial-gradient(46.96% 65.78% at 100% 96.96%, #F5F8FA 0%, #FBFDFD 56.35%, #FFFFFF 100%)",
-          borderColor: "var(--peacock-800)",
+          borderColor: "var(--tiui-palette-peacock-800)",
           boxShadow: "0px 1px 0px 0px rgba(200, 206, 208, 0.1)",
         },
 

src/components/MDXComponents/simple-tab.module.css

@@ -9,7 +9,8 @@ ul.tabs {
     display: block;
     padding: 0.5em 1em;
     background-color: white;
-    border-radius: var(--shape-border-radius) var(--shape-border-radius) 0 0;
+    border-radius: var(--tiui-shape-border-radius)
+      var(--tiui-shape-border-radius) 0 0;
     transition: background-color 0.2s ease-in-out;
     cursor: pointer;
     margin-right: 8px;
@@ -19,8 +20,8 @@ ul.tabs {
     }
 
     &.active {
-      background-color: var(--carbon-800);
-      color: var(--carbon-100);
+      background-color: var(--tiui-palette-carbon-800);
+      color: var(--tiui-palette-carbon-100);
     }
     & + li {
       margin-top: 0;

src/components/MDXComponents/syntax-diagram.module.css

@@ -1,5 +1,5 @@
 .root {
-  background: var(--carbon-200);
+  background: var(--tiui-palette-carbon-200);
 }
 
 .toolbar {

src/styles/docTemplate.css

@@ -45,15 +45,15 @@
     }
 
     code {
-      background-color: var(--carbon-200);
-      border-radius: var(--shape-border-radius);
+      background-color: var(--tiui-palette-carbon-200);
+      border-radius: var(--tiui-shape-border-radius);
     }
 
     pre {
       position: relative;
       overflow-x: hidden;
-      background-color: var(--carbon-200);
-      border-radius: var(--shape-border-radius);
+      background-color: var(--tiui-palette-carbon-200);
+      border-radius: var(--tiui-shape-border-radius);
 
       code {
         .number {
@@ -106,12 +106,12 @@
   .markdown-body {
     font-family: moderat, -apple-system, "Poppins", "Helvetica Neue",
       "Noto Sans", "Fira Code", "IBM Plex Sans", "sans-serif";
-    color: var(--carbon-900);
+    color: var(--tiui-palette-carbon-900);
     font-size: 16px;
     line-height: 1.5;
 
     a:not(.button) {
-      color: var(--secondary-color);
+      color: var(--tiui-palette-secondary);
     }
 
     pre {

src/theme/index.tsx

@@ -113,56 +113,56 @@ let theme = createTheme({
       fontWeight: "400",
       fontStyle: "normal",
       lineHeight: "3.75rem",
-      color: "var(--carbon-900)",
+      color: "var(--tiui-palette-carbon-900)",
     },
     h2: {
       fontSize: "2rem",
       fontWeight: "500",
       fontStyle: "normal",
       lineHeight: "3rem",
-      color: "var(--carbon-900)",
+      color: "var(--tiui-palette-carbon-900)",
     },
     h3: {
       fontSize: "1.75rem",
       fontWeight: "500",
       fontStyle: "normal",
       lineHeight: "2.625rem",
-      color: "var(--carbon-900)",
+      color: "var(--tiui-palette-carbon-900)",
     },
     h4: {
       fontSize: "1.25rem",
       fontWeight: "500",
       fontStyle: "normal",
       lineHeight: "1.875rem",
-      color: "var(--carbon-900)",
+      color: "var(--tiui-palette-carbon-900)",
     },
     h5: {
       fontSize: "1.125rem",
       fontWeight: "500",
       fontStyle: "normal",
       lineHeight: "1.6875rem",
-      color: "var(--carbon-900)",
+      color: "var(--tiui-palette-carbon-900)",
     },
     h6: {
       fontSize: "0.875rem",
       fontWeight: "500",
       fontStyle: "normal",
       lineHeight: "1.5rem",
-      color: "var(--carbon-900)",
+      color: "var(--tiui-palette-carbon-900)",
     },
     body1: {
       fontSize: "1rem",
       lineHeight: "1.5rem",
       fontWeight: "400",
       fontStyle: "normal",
-      color: "var(--carbon-900)",
+      color: "var(--tiui-palette-carbon-900)",
     },
     body2: {
       fontSize: "0.875rem",
       lineHeight: "1.25rem",
       fontWeight: "400",
       fontStyle: "normal",
-      color: "var(--carbon-900)",
+      color: "var(--tiui-palette-carbon-900)",
     },
   },
 });

src/theme/variables.css

@@ -1,33 +1,36 @@
 :root {
   /* --shape-- */
-  --shape-border-radius: 0px;
+  --tiui-shape-border-radius: 0px;
 
-  /* --color-- */
-  --primary-color: #dc150b;
-  --primary-color-dark: #d0140b;
-  --secondary-color: var(--peacock-800);
+  /* --palette-- */
+  --tiui-palette-primary: #dc150b;
+  --tiui-palette-primary-light: #dc150b;
+  --tiui-palette-primary-dark: #d0140b;
+  --tiui-palette-secondary: var(--tiui-palette-peacock-800);
+  --tiui-palette-secondary-light: var(--tiui-palette-peacock-700);
+  --tiui-palette-secondary-dark: var(--tiui-palette-peacock-900);
 
   /* Carbon */
-  --carbon-50: #ffffff;
-  --carbon-100: #fbfdfd;
-  --carbon-200: #f5f8fa;
-  --carbon-300: #edf0f1;
-  --carbon-400: #e3e8ea;
-  --carbon-500: #c8ced0;
-  --carbon-600: #9faaad;
-  --carbon-700: #6c7679;
-  --carbon-800: #3d4143;
-  --carbon-900: #262a2c;
+  --tiui-palette-carbon-50: #ffffff;
+  --tiui-palette-carbon-100: #fbfdfd;
+  --tiui-palette-carbon-200: #f5f8fa;
+  --tiui-palette-carbon-300: #edf0f1;
+  --tiui-palette-carbon-400: #e3e8ea;
+  --tiui-palette-carbon-500: #c8ced0;
+  --tiui-palette-carbon-600: #9faaad;
+  --tiui-palette-carbon-700: #6c7679;
+  --tiui-palette-carbon-800: #3d4143;
+  --tiui-palette-carbon-900: #262a2c;
 
   /* Peacock */
-  --peacock-50: #fbfdfe;
-  --peacock-100: #f4fafd;
-  --peacock-200: #eaf5fa;
-  --peacock-300: #e0f0f8;
-  --peacock-400: #c0e1f1;
-  --peacock-500: #96cde9;
-  --peacock-600: #6cbae0;
-  --peacock-700: #2d9cd2;
-  --peacock-800: #1480b8;
-  --peacock-900: #0b628d;
+  --tiui-palette-peacock-50: #fbfdfe;
+  --tiui-palette-peacock-100: #f4fafd;
+  --tiui-palette-peacock-200: #eaf5fa;
+  --tiui-palette-peacock-300: #e0f0f8;
+  --tiui-palette-peacock-400: #c0e1f1;
+  --tiui-palette-peacock-500: #96cde9;
+  --tiui-palette-peacock-600: #6cbae0;
+  --tiui-palette-peacock-700: #2d9cd2;
+  --tiui-palette-peacock-800: #1480b8;
+  --tiui-palette-peacock-900: #0b628d;
 }