From bd9fb86ceda561b36471e076d389fa5c979093e8 Mon Sep 17 00:00:00 2001 From: Suhaha Date: Wed, 30 Oct 2024 00:53:37 +0800 Subject: [PATCH] tweak: add prefix of css vars (#546) * tweak: add prefix of css vars * tweak: rename vars * chore: rename var --- gatsby-config.js | 5 +- src/components/MDXComponents/DocHome.tsx | 6 +-- .../MDXComponents/simple-tab.module.css | 7 +-- .../MDXComponents/syntax-diagram.module.css | 2 +- src/styles/docTemplate.css | 12 ++--- src/theme/index.tsx | 16 +++--- src/theme/variables.css | 53 ++++++++++--------- 7 files changed, 54 insertions(+), 47 deletions(-) diff --git a/gatsby-config.js b/gatsby-config.js index 5cfd4ad96..c425a0522 100644 --- a/gatsby-config.js +++ b/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", diff --git a/src/components/MDXComponents/DocHome.tsx b/src/components/MDXComponents/DocHome.tsx index c9f0b94b4..96c233557 100644 --- a/src/components/MDXComponents/DocHome.tsx +++ b/src/components/MDXComponents/DocHome.tsx @@ -112,11 +112,11 @@ export function DocHomeContainer( 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) { "&: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)", }, diff --git a/src/components/MDXComponents/simple-tab.module.css b/src/components/MDXComponents/simple-tab.module.css index 893e09ed1..a85846112 100644 --- a/src/components/MDXComponents/simple-tab.module.css +++ b/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; diff --git a/src/components/MDXComponents/syntax-diagram.module.css b/src/components/MDXComponents/syntax-diagram.module.css index bf4b52f65..d9c9aac8d 100644 --- a/src/components/MDXComponents/syntax-diagram.module.css +++ b/src/components/MDXComponents/syntax-diagram.module.css @@ -1,5 +1,5 @@ .root { - background: var(--carbon-200); + background: var(--tiui-palette-carbon-200); } .toolbar { diff --git a/src/styles/docTemplate.css b/src/styles/docTemplate.css index 21d56ce52..aaf730f27 100644 --- a/src/styles/docTemplate.css +++ b/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 { diff --git a/src/theme/index.tsx b/src/theme/index.tsx index 23bf0534e..411101003 100644 --- a/src/theme/index.tsx +++ b/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)", }, }, }); diff --git a/src/theme/variables.css b/src/theme/variables.css index fa27a50be..6945ea948 100644 --- a/src/theme/variables.css +++ b/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; }