From 01f735e6fc8bb68f995f6a6a9e0bd210a675824c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=80=8F=E6=98=B1?= Date: Tue, 18 Jul 2023 13:11:10 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Add=20global=20styles=20for?= =?UTF-8?q?=20font,=20colors,=20and=20scrollbar=20customization?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove "GlobalStyle.ts" file - Add "antdOverride.ts", "global.ts", and "index.ts" files - "antdOverride.ts" contains overrides for Ant Design components - "global.ts" contains global CSS styles for font, colors, and scrollbar - "index.ts" exports the combined styles from "antdOverride.ts" and "global.ts" as a global style component. --- src/ThemeProvider/GlobalStyle.ts | 124 ------------------ src/ThemeProvider/GlobalStyle/antdOverride.ts | 24 ++++ src/ThemeProvider/GlobalStyle/global.ts | 101 ++++++++++++++ src/ThemeProvider/GlobalStyle/index.ts | 8 ++ 4 files changed, 133 insertions(+), 124 deletions(-) delete mode 100644 src/ThemeProvider/GlobalStyle.ts create mode 100644 src/ThemeProvider/GlobalStyle/antdOverride.ts create mode 100644 src/ThemeProvider/GlobalStyle/global.ts create mode 100644 src/ThemeProvider/GlobalStyle/index.ts diff --git a/src/ThemeProvider/GlobalStyle.ts b/src/ThemeProvider/GlobalStyle.ts deleted file mode 100644 index e49b821b..00000000 --- a/src/ThemeProvider/GlobalStyle.ts +++ /dev/null @@ -1,124 +0,0 @@ -import { createGlobalStyle } from 'antd-style'; - -const GlobalStyle = createGlobalStyle` - - html,body { - --font-settings: "cv01", "tnum", "kern"; - --font-variations: "opsz" auto, tabular-nums; - - overflow-x: hidden; - overflow-y: auto; - - margin: 0; - padding: 0; - - font-family: ${({ theme }) => theme.fontFamily}; - font-size: ${({ theme }) => theme.fontSize}px; - font-feature-settings: var(--font-settings); - font-variation-settings: var(--font-variations); - line-height: 1; - color: ${({ theme }) => theme.colorTextBase}; - text-size-adjust: none; - text-rendering: optimizelegibility; - vertical-align: baseline; - - color-scheme: dark; - background-color: ${({ theme }) => theme.colorBgLayout}; - - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-overflow-scrolling:touch; - -webkit-tap-highlight-color: transparent; - } - - body { - overflow-x: hidden; - height: 100vh; - } - - #root { - min-height: 100vh; - } - - code { - font-family: ${({ theme }) => theme.fontFamilyCode} !important; - - span { - font-family: ${({ theme }) => theme.fontFamilyCode} !important; - } - } - - p { - text-align: justify; - word-wrap: break-word; - } - - ::selection { - color: #000; - background: ${({ theme }) => theme.yellow9}; - - -webkit-text-fill-color: unset !important; - } - - * { - box-sizing: border-box; - vertical-align: baseline; - } - - @media only screen and (min-width: 574px) { - * { - ::-webkit-scrollbar { - cursor: pointer; - width: 4px; - height: 4px; - background-color: transparent; - } - - ::-webkit-scrollbar-thumb { - cursor: pointer; - background-color: transparent; - border-radius: 2px; - transition: background-color 500ms ${({ theme }) => theme.motionEaseOut}; - - &:hover { - background-color: ${({ theme }) => theme.colorText}; - } - } - - ::-webkit-scrollbar-corner { - display: none; - width: 0; - height: 0; - } - - &:hover { - ::-webkit-scrollbar-thumb { - background-color: ${({ theme }) => theme.colorFill}; - } - } - } - } - - .ant-tooltip-inner { - display: flex; - align-items: center; - justify-content: center; - - min-height: unset; - padding: 4px 8px; - - color: ${({ theme }) => theme.colorBgLayout}; - - background-color: ${({ theme }) => theme.colorText}; - border-radius: ${({ theme }) => theme.borderRadiusSM}px; - } - - .ant-tooltip-arrow { - &::before, - &::after { - background: ${({ theme }) => theme.colorText}; - } - } -`; - -export default GlobalStyle; diff --git a/src/ThemeProvider/GlobalStyle/antdOverride.ts b/src/ThemeProvider/GlobalStyle/antdOverride.ts new file mode 100644 index 00000000..855c3476 --- /dev/null +++ b/src/ThemeProvider/GlobalStyle/antdOverride.ts @@ -0,0 +1,24 @@ +import { Theme, css } from 'antd-style'; + +export default (token: Theme) => css` + .ant-tooltip-inner { + display: flex; + align-items: center; + justify-content: center; + + min-height: unset; + padding: 4px 8px; + + color: ${token.colorBgLayout}; + + background-color: ${token.colorText}; + border-radius: ${token.borderRadiusSM}px; + } + + .ant-tooltip-arrow { + &::before, + &::after { + background: ${token.colorText}; + } + } +`; diff --git a/src/ThemeProvider/GlobalStyle/global.ts b/src/ThemeProvider/GlobalStyle/global.ts new file mode 100644 index 00000000..cf6ba8b6 --- /dev/null +++ b/src/ThemeProvider/GlobalStyle/global.ts @@ -0,0 +1,101 @@ +import { Theme, css } from 'antd-style'; + +export default (token: Theme) => css` + html, + body { + --font-settings: 'cv01', 'tnum', 'kern'; + --font-variations: 'opsz' auto, tabular-nums; + + overflow-x: hidden; + overflow-y: auto; + + margin: 0; + padding: 0; + + font-family: ${token.fontFamily}; + font-size: ${token.fontSize}px; + font-feature-settings: var(--font-settings); + font-variation-settings: var(--font-variations); + line-height: 1; + color: ${token.colorTextBase}; + text-size-adjust: none; + text-rendering: optimizelegibility; + vertical-align: baseline; + + color-scheme: dark; + background-color: ${token.colorBgLayout}; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-overflow-scrolling: touch; + -webkit-tap-highlight-color: transparent; + } + + body { + overflow-x: hidden; + height: 100vh; + } + + #root { + min-height: 100vh; + } + + code { + font-family: ${token.fontFamilyCode} !important; + + span { + font-family: ${token.fontFamilyCode} !important; + } + } + + p { + text-align: justify; + word-wrap: break-word; + } + + ::selection { + color: #000; + background: ${token.yellow9}; + + -webkit-text-fill-color: unset !important; + } + + * { + box-sizing: border-box; + vertical-align: baseline; + } + + @media only screen and (min-width: 574px) { + * { + ::-webkit-scrollbar { + cursor: pointer; + width: 4px; + height: 4px; + background-color: transparent; + } + + ::-webkit-scrollbar-thumb { + cursor: pointer; + background-color: transparent; + border-radius: 2px; + transition: background-color 500ms ${token.motionEaseOut}; + + &:hover { + background-color: ${token.colorText}; + } + } + + ::-webkit-scrollbar-corner { + display: none; + width: 0; + height: 0; + } + + &:hover { + ::-webkit-scrollbar-thumb { + background-color: ${token.colorFill}; + } + } + } + } +`; diff --git a/src/ThemeProvider/GlobalStyle/index.ts b/src/ThemeProvider/GlobalStyle/index.ts new file mode 100644 index 00000000..c6578c9d --- /dev/null +++ b/src/ThemeProvider/GlobalStyle/index.ts @@ -0,0 +1,8 @@ +import { createGlobalStyle } from 'antd-style'; + +import antdOverride from './antdOverride'; +import global from './global'; + +const GlobalStyle = createGlobalStyle(({ theme }) => [global(theme), antdOverride(theme)]); + +export default GlobalStyle;