Merge pull request #1 from eduzz/feature-cpi-809

Suporte a Dark Mode
eduzz · Mar 26, 2024 · d608c1b · d608c1b
2 parents 34a80b5 + 9010c33
commit d608c1b
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 18 deletions.
diff --git 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
@@ -31,6 +31,38 @@ 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-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-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-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-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-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-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/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 (
     <ConfigProvider theme={theme} componentSize='large' locale={antdLocalePtBR} {...configProps}>
       <App>

diff --git 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.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,
       borderRadius: 0

diff --git 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.2",
   "keywords": [
     "antd",
     "raect-hooks-forms",
@@ -31,36 +31,35 @@
     "update-deps": "yarn ncu -u"
   },
   "dependencies": {
-    "antd": "^5",
-    "@eduzz/ui-tokens": "^1"
+    "@eduzz/ui-tokens": "^1.2.2",
+    "antd": "^5"
   },
   "peerDependencies": {
-    "antd": "^5",
-    "@eduzz/ui-tokens": "^1"
+    "antd": "^5"
   },
   "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
@@ -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.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"