From 06a83f1e91957e2918ea0a18027ac541cb1a357d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vitor=20Maracaj=C3=A1?= Date: Wed, 20 Mar 2024 11:33:00 -0300 Subject: [PATCH 1/4] feat(dark-mode): add support for dark mode --- .vscode/settings.json | 2 +- CssVariables.tsx | 34 ++++++++++++++++++++++++++++++++++ ThemeProvider.tsx | 18 ++++++++++++++++++ createTheme.tsx | 4 ++-- package.json | 18 +++++++++--------- yarn.lock | 8 ++++---- 6 files changed, 68 insertions(+), 16 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 38c77be..c155019 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -10,7 +10,7 @@ "editor.formatOnType": true }, "editor.codeActionsOnSave": { - "source.fixAll.eslint": true + "source.fixAll.eslint": "explicit" }, "editor.formatOnPaste": false, "editor.formatOnSave": false, diff --git a/CssVariables.tsx b/CssVariables.tsx index 4348d4c..3083a87 100644 --- a/CssVariables.tsx +++ b/CssVariables.tsx @@ -31,6 +31,40 @@ const CssVariables = ({ brandColor }: CssVariablesProps) => { --eduzz-ui-antd-theme-primary-hover: ${token.colorPrimaryHover}; --eduzz-ui-antd-theme-split-color: ${token.colorSplit}; --eduzz-ui-antd-theme-bg-color: ${token.colorBgLayout}; + + --eduzz-ui-antd-theme-background-color-1: ${hexToRgbVar(eduzzTokens.base.dark.background[1])}; + --eduzz-ui-antd-theme-background-color-2: ${hexToRgbVar(eduzzTokens.base.dark.background[2])}; + --eduzz-ui-antd-theme-background-color-3: ${hexToRgbVar(eduzzTokens.base.dark.background[3])}; + --eduzz-ui-antd-theme-background-color-4: ${hexToRgbVar(eduzzTokens.base.dark.background[4])}; + + --eduzz-ui-antd-theme-outline-color-1: ${hexToRgbVar(eduzzTokens.base.dark.outline[1])}; + --eduzz-ui-antd-theme-outline-color-2: ${hexToRgbVar(eduzzTokens.base.dark.outline[2])}; + --eduzz-ui-antd-theme-outline-color-3: ${hexToRgbVar(eduzzTokens.base.dark.outline[3])}; + + --eduzz-ui-antd-theme-content-color-1: ${hexToRgbVar(eduzzTokens.base.dark.content[1])}; + --eduzz-ui-antd-theme-content-color-2: ${hexToRgbVar(eduzzTokens.base.dark.content[2])}; + --eduzz-ui-antd-theme-content-color-3: ${hexToRgbVar(eduzzTokens.base.dark.content[3])}; + --eduzz-ui-antd-theme-content-color-4: ${hexToRgbVar(eduzzTokens.base.dark.content[4])}; + --eduzz-ui-antd-theme-content-color-5: ${hexToRgbVar(eduzzTokens.base.dark.content[5])}; + --eduzz-ui-antd-theme-content-color-6: ${hexToRgbVar(eduzzTokens.base.dark.content[6])}; + } + + body[data-eduzz-theme="dark"] { + --eduzz-ui-antd-theme-background-color-1: ${hexToRgbVar(eduzzTokens.base.light.background[1])}; + --eduzz-ui-antd-theme-background-color-2: ${hexToRgbVar(eduzzTokens.base.light.background[2])}; + --eduzz-ui-antd-theme-background-color-3: ${hexToRgbVar(eduzzTokens.base.light.background[3])}; + --eduzz-ui-antd-theme-background-color-4: ${hexToRgbVar(eduzzTokens.base.light.background[4])}; + + --eduzz-ui-antd-theme-outline-color-1: ${hexToRgbVar(eduzzTokens.base.light.outline[1])}; + --eduzz-ui-antd-theme-outline-color-2: ${hexToRgbVar(eduzzTokens.base.light.outline[2])}; + --eduzz-ui-antd-theme-outline-color-3: ${hexToRgbVar(eduzzTokens.base.light.outline[3])}; + + --eduzz-ui-antd-theme-content-color-1: ${hexToRgbVar(eduzzTokens.base.light.content[1])}; + --eduzz-ui-antd-theme-content-color-2: ${hexToRgbVar(eduzzTokens.base.light.content[2])}; + --eduzz-ui-antd-theme-content-color-3: ${hexToRgbVar(eduzzTokens.base.light.content[3])}; + --eduzz-ui-antd-theme-content-color-4: ${hexToRgbVar(eduzzTokens.base.light.content[4])}; + --eduzz-ui-antd-theme-content-color-5: ${hexToRgbVar(eduzzTokens.base.light.content[5])}; + --eduzz-ui-antd-theme-content-color-6: ${hexToRgbVar(eduzzTokens.base.light.content[6])}; } `, [token] diff --git a/ThemeProvider.tsx b/ThemeProvider.tsx index 6df2d7e..8daa1ec 100644 --- a/ThemeProvider.tsx +++ b/ThemeProvider.tsx @@ -58,6 +58,24 @@ const ThemeProvider = ({ return () => mediaDark.removeEventListener('change', listner); }, [modeProp]); + useEffect(() => { + const themeChangeObserver = new MutationObserver(mutations => { + mutations.forEach(mutation => { + if (mutation.attributeName !== 'data-eduzz-theme') { + return; + } + + const attributes = (mutation.target as HTMLElement).attributes; + const currentTheme = attributes.getNamedItem('data-eduzz-theme')?.value as 'light' | 'dark'; + + setMode(currentTheme ?? 'light'); + }); + }); + + themeChangeObserver.observe(document.body, { attributes: true }); + return () => themeChangeObserver.disconnect(); + }, []); + return ( diff --git a/createTheme.tsx b/createTheme.tsx index 6698629..dc60ca5 100644 --- a/createTheme.tsx +++ b/createTheme.tsx @@ -17,8 +17,8 @@ export default function createTheme( colorPrimary: primaryColor.startsWith('#') ? primaryColor : tokens.brands[primaryColor as BrandColor].primary.pure, - colorBgLayout: mode === 'light' ? '#fcfcfc' : undefined, - colorBgTextHover: mode === 'light' ? 'rgba(0, 0, 0, 0.03)' : undefined, + colorBgLayout: mode === 'light' ? tokens.base.light.background[3] : tokens.base.dark.background[3], + colorBgTextHover: mode === 'light' ? 'rgba(0, 0, 0, 0.03)' : 'rgba(255, 255, 255, 0.06)', fontFamily: tokens.font.family.base, fontSize: 16, borderRadius: 0 diff --git a/package.json b/package.json index ca2cf74..52b4cf8 100644 --- a/package.json +++ b/package.json @@ -31,36 +31,36 @@ "update-deps": "yarn ncu -u" }, "dependencies": { - "antd": "^5", - "@eduzz/ui-tokens": "^1" + "@eduzz/ui-tokens": "^1.1.0", + "antd": "^5" }, "peerDependencies": { "antd": "^5", - "@eduzz/ui-tokens": "^1" + "@eduzz/ui-tokens": "^1.1.0" }, "devDependencies": { "@eduzz/eslint-config": "^1.0.0", "@types/node": "^20.4.6", - "@types/react-dom": "^18.2.6", "@types/react": "^18.2.14", + "@types/react-dom": "^18.2.6", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "@vitejs/plugin-react-swc": "^3.3.2", + "eslint": "^8.44.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-eslint-plugin": "^5.1.0", "eslint-plugin-import": "^2.27.5", "eslint-plugin-prettier": "^5.0.0", - "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react": "^7.32.2", + "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-unused-imports": "^2.0.0", - "eslint": "^8.44.0", "npm-check-updates": "^16.10.15", "prettier": "^3", - "react-dom": "^18.2.0", "react": "^18.2.0", + "react-dom": "^18.2.0", "typescript": "^5.1.6", + "vite": "^4.4.3", "vite-plugin-css-injected-by-js": "^3.2.0", - "vite-plugin-dts": "^3.2.0", - "vite": "^4.4.3" + "vite-plugin-dts": "^3.2.0" } } diff --git a/yarn.lock b/yarn.lock index b7151e3..8f3e473 100644 --- a/yarn.lock +++ b/yarn.lock @@ -81,10 +81,10 @@ resolved "https://registry.yarnpkg.com/@eduzz/eslint-config/-/eslint-config-1.0.0.tgz#97180c2b37e1be93977f91725e4e9759cd3422b3" integrity sha512-Q2PMV1ddPI6ECdOpCiaAf4UxVo4Sf4usImvGRfQybDKzMDxUPHEocIMRjUe8ULPNfAnaV9Zgw20oGtUEUhkACg== -"@eduzz/ui-tokens@^1": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@eduzz/ui-tokens/-/ui-tokens-1.0.0.tgz#da5db932d13930836d060f6ad63ac813914293ba" - integrity sha512-ID+t8nb2+ahQRO8IbuwcIhr9rWNKTKTj95zzaW9D6YKrP2J8GHdawlwaccDnPjhd2zP89GU7lgoB31uyZ/kgkQ== +"@eduzz/ui-tokens@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@eduzz/ui-tokens/-/ui-tokens-1.1.0.tgz#58e6f21b404321ae23cd4e308f19fa1e97e30431" + integrity sha512-PsCBQwLuSUKVX0MMb8zMD7iYwAegpc9FUxO19KaRW6gNx9X3VHSAsgsD7Akhd3Mvu3nWKDvNWHs8Ujky0jekvA== "@emotion/hash@^0.8.0": version "0.8.0" From 4fbe5aa51885635039db1445c22f710ef3600107 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vitor=20Maracaj=C3=A1?= Date: Thu, 21 Mar 2024 15:29:17 -0300 Subject: [PATCH 2/4] chore: add new version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 52b4cf8..365e991 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@eduzz/ui-antd-theme", "description": "Eduzz Hooks: Antd Theme", - "version": "1.0.7", + "version": "1.2.0-beta.0", "keywords": [ "antd", "raect-hooks-forms", From a9699dca24d82795d2bbcc9882074b7f034e4084 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vitor=20Maracaj=C3=A1?= Date: Mon, 25 Mar 2024 15:12:35 -0300 Subject: [PATCH 3/4] chore(dark-mode): add new tokens --- CssVariables.tsx | 50 +++++++++++++++++++++++------------------------- package.json | 7 +++---- yarn.lock | 8 ++++---- 3 files changed, 31 insertions(+), 34 deletions(-) diff --git a/CssVariables.tsx b/CssVariables.tsx index 3083a87..b851566 100644 --- a/CssVariables.tsx +++ b/CssVariables.tsx @@ -32,39 +32,37 @@ const CssVariables = ({ brandColor }: CssVariablesProps) => { --eduzz-ui-antd-theme-split-color: ${token.colorSplit}; --eduzz-ui-antd-theme-bg-color: ${token.colorBgLayout}; - --eduzz-ui-antd-theme-background-color-1: ${hexToRgbVar(eduzzTokens.base.dark.background[1])}; - --eduzz-ui-antd-theme-background-color-2: ${hexToRgbVar(eduzzTokens.base.dark.background[2])}; - --eduzz-ui-antd-theme-background-color-3: ${hexToRgbVar(eduzzTokens.base.dark.background[3])}; - --eduzz-ui-antd-theme-background-color-4: ${hexToRgbVar(eduzzTokens.base.dark.background[4])}; + --eduzz-ui-antd-theme-surface-subtle: ${hexToRgbVar(eduzzTokens.base.light.surface.subtle)}; + --eduzz-ui-antd-theme-surface-default: ${hexToRgbVar(eduzzTokens.base.light.surface.default)}; + --eduzz-ui-antd-theme-surface-disabled: ${hexToRgbVar(eduzzTokens.base.light.surface.disabled)}; - --eduzz-ui-antd-theme-outline-color-1: ${hexToRgbVar(eduzzTokens.base.dark.outline[1])}; - --eduzz-ui-antd-theme-outline-color-2: ${hexToRgbVar(eduzzTokens.base.dark.outline[2])}; - --eduzz-ui-antd-theme-outline-color-3: ${hexToRgbVar(eduzzTokens.base.dark.outline[3])}; + --eduzz-ui-antd-theme-outline-default: ${hexToRgbVar(eduzzTokens.base.light.outline.default)}; + --eduzz-ui-antd-theme-outline-disabled: ${hexToRgbVar(eduzzTokens.base.light.outline.disabled)}; + --eduzz-ui-antd-theme-outline-darker: ${hexToRgbVar(eduzzTokens.base.light.outline.darker)}; - --eduzz-ui-antd-theme-content-color-1: ${hexToRgbVar(eduzzTokens.base.dark.content[1])}; - --eduzz-ui-antd-theme-content-color-2: ${hexToRgbVar(eduzzTokens.base.dark.content[2])}; - --eduzz-ui-antd-theme-content-color-3: ${hexToRgbVar(eduzzTokens.base.dark.content[3])}; - --eduzz-ui-antd-theme-content-color-4: ${hexToRgbVar(eduzzTokens.base.dark.content[4])}; - --eduzz-ui-antd-theme-content-color-5: ${hexToRgbVar(eduzzTokens.base.dark.content[5])}; - --eduzz-ui-antd-theme-content-color-6: ${hexToRgbVar(eduzzTokens.base.dark.content[6])}; + --eduzz-ui-antd-theme-content-title: ${hexToRgbVar(eduzzTokens.base.light.content.title)}; + --eduzz-ui-antd-theme-content-body: ${hexToRgbVar(eduzzTokens.base.light.content.body)}; + --eduzz-ui-antd-theme-content-subtitle: ${hexToRgbVar(eduzzTokens.base.light.content.subtitle)}; + --eduzz-ui-antd-theme-content-caption: ${hexToRgbVar(eduzzTokens.base.light.content.caption)}; + --eduzz-ui-antd-theme-content-negative: ${hexToRgbVar(eduzzTokens.base.light.content.negative)}; + --eduzz-ui-antd-theme-content-disabled: ${hexToRgbVar(eduzzTokens.base.light.content.disabled)}; } body[data-eduzz-theme="dark"] { - --eduzz-ui-antd-theme-background-color-1: ${hexToRgbVar(eduzzTokens.base.light.background[1])}; - --eduzz-ui-antd-theme-background-color-2: ${hexToRgbVar(eduzzTokens.base.light.background[2])}; - --eduzz-ui-antd-theme-background-color-3: ${hexToRgbVar(eduzzTokens.base.light.background[3])}; - --eduzz-ui-antd-theme-background-color-4: ${hexToRgbVar(eduzzTokens.base.light.background[4])}; + --eduzz-ui-antd-theme-surface-subtle: ${hexToRgbVar(eduzzTokens.base.dark.surface.subtle)}; + --eduzz-ui-antd-theme-surface-default: ${hexToRgbVar(eduzzTokens.base.dark.surface.default)}; + --eduzz-ui-antd-theme-surface-disabled: ${hexToRgbVar(eduzzTokens.base.dark.surface.disabled)}; - --eduzz-ui-antd-theme-outline-color-1: ${hexToRgbVar(eduzzTokens.base.light.outline[1])}; - --eduzz-ui-antd-theme-outline-color-2: ${hexToRgbVar(eduzzTokens.base.light.outline[2])}; - --eduzz-ui-antd-theme-outline-color-3: ${hexToRgbVar(eduzzTokens.base.light.outline[3])}; + --eduzz-ui-antd-theme-outline-default: ${hexToRgbVar(eduzzTokens.base.dark.outline.default)}; + --eduzz-ui-antd-theme-outline-disabled: ${hexToRgbVar(eduzzTokens.base.dark.outline.disabled)}; + --eduzz-ui-antd-theme-outline-darker: ${hexToRgbVar(eduzzTokens.base.dark.outline.darker)}; - --eduzz-ui-antd-theme-content-color-1: ${hexToRgbVar(eduzzTokens.base.light.content[1])}; - --eduzz-ui-antd-theme-content-color-2: ${hexToRgbVar(eduzzTokens.base.light.content[2])}; - --eduzz-ui-antd-theme-content-color-3: ${hexToRgbVar(eduzzTokens.base.light.content[3])}; - --eduzz-ui-antd-theme-content-color-4: ${hexToRgbVar(eduzzTokens.base.light.content[4])}; - --eduzz-ui-antd-theme-content-color-5: ${hexToRgbVar(eduzzTokens.base.light.content[5])}; - --eduzz-ui-antd-theme-content-color-6: ${hexToRgbVar(eduzzTokens.base.light.content[6])}; + --eduzz-ui-antd-theme-content-title: ${hexToRgbVar(eduzzTokens.base.dark.content.title)}; + --eduzz-ui-antd-theme-content-body: ${hexToRgbVar(eduzzTokens.base.dark.content.body)}; + --eduzz-ui-antd-theme-content-subtitle: ${hexToRgbVar(eduzzTokens.base.dark.content.subtitle)}; + --eduzz-ui-antd-theme-content-caption: ${hexToRgbVar(eduzzTokens.base.dark.content.caption)}; + --eduzz-ui-antd-theme-content-negative: ${hexToRgbVar(eduzzTokens.base.dark.content.negative)}; + --eduzz-ui-antd-theme-content-disabled: ${hexToRgbVar(eduzzTokens.base.dark.content.disabled)}; } `, [token] diff --git a/package.json b/package.json index 365e991..2f6c34d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@eduzz/ui-antd-theme", "description": "Eduzz Hooks: Antd Theme", - "version": "1.2.0-beta.0", + "version": "1.2.0-beta.1", "keywords": [ "antd", "raect-hooks-forms", @@ -31,12 +31,11 @@ "update-deps": "yarn ncu -u" }, "dependencies": { - "@eduzz/ui-tokens": "^1.1.0", + "@eduzz/ui-tokens": "^1.2.2", "antd": "^5" }, "peerDependencies": { - "antd": "^5", - "@eduzz/ui-tokens": "^1.1.0" + "antd": "^5" }, "devDependencies": { "@eduzz/eslint-config": "^1.0.0", diff --git a/yarn.lock b/yarn.lock index 8f3e473..a408555 100644 --- a/yarn.lock +++ b/yarn.lock @@ -81,10 +81,10 @@ resolved "https://registry.yarnpkg.com/@eduzz/eslint-config/-/eslint-config-1.0.0.tgz#97180c2b37e1be93977f91725e4e9759cd3422b3" integrity sha512-Q2PMV1ddPI6ECdOpCiaAf4UxVo4Sf4usImvGRfQybDKzMDxUPHEocIMRjUe8ULPNfAnaV9Zgw20oGtUEUhkACg== -"@eduzz/ui-tokens@^1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@eduzz/ui-tokens/-/ui-tokens-1.1.0.tgz#58e6f21b404321ae23cd4e308f19fa1e97e30431" - integrity sha512-PsCBQwLuSUKVX0MMb8zMD7iYwAegpc9FUxO19KaRW6gNx9X3VHSAsgsD7Akhd3Mvu3nWKDvNWHs8Ujky0jekvA== +"@eduzz/ui-tokens@^1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@eduzz/ui-tokens/-/ui-tokens-1.2.2.tgz#1345a871141df1dbe1e2efdaa36e149289b1bff1" + integrity sha512-PX74zMDDlvLCrwvjbAWHl4A1JKqfMUk2Ss45VUBQ1sZg8/ZoGObYoV8K4QTQmOuDClEaLGjnp1OlU7IsdtdDaw== "@emotion/hash@^0.8.0": version "0.8.0" From 9010c33669061cbbecd4b09c76e5f10320e42270 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vitor=20Maracaj=C3=A1?= Date: Mon, 25 Mar 2024 15:36:23 -0300 Subject: [PATCH 4/4] chore(dark-mode): add tokens to createTheme --- createTheme.tsx | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/createTheme.tsx b/createTheme.tsx index dc60ca5..e19afc8 100644 --- a/createTheme.tsx +++ b/createTheme.tsx @@ -17,7 +17,7 @@ export default function createTheme( colorPrimary: primaryColor.startsWith('#') ? primaryColor : tokens.brands[primaryColor as BrandColor].primary.pure, - colorBgLayout: mode === 'light' ? tokens.base.light.background[3] : tokens.base.dark.background[3], + colorBgLayout: mode === 'light' ? tokens.base.light.surface.subtle : tokens.base.dark.surface.subtle, colorBgTextHover: mode === 'light' ? 'rgba(0, 0, 0, 0.03)' : 'rgba(255, 255, 255, 0.06)', fontFamily: tokens.font.family.base, fontSize: 16, diff --git a/package.json b/package.json index 2f6c34d..862849e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@eduzz/ui-antd-theme", "description": "Eduzz Hooks: Antd Theme", - "version": "1.2.0-beta.1", + "version": "1.2.0-beta.2", "keywords": [ "antd", "raect-hooks-forms",