Skip to content

Commit e42a9cf

Browse files
luanlmdluanlmd
authored
Merge pull request #1 from eduzz/feature-cpi-809
Suporte para Dark Mode
2 parents 4010fae + c6e3a84 commit e42a9cf

File tree

6 files changed

+115
-12
lines changed

6 files changed

+115
-12
lines changed

Diff for: ‎.vscode/settings.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"editor.formatOnType": true
66
},
77
"editor.codeActionsOnSave": {
8-
"source.fixAll.eslint": true
8+
"source.fixAll.eslint": "explicit"
99
},
1010
"editor.formatOnPaste": false,
1111
"editor.formatOnSave": false,

Diff for: ‎_dev/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
function App() {
2-
return <div className='block text-primary '>olá</div>;
2+
return <div className='block text-primary'>olá</div>;
33
}
44

55
export default App;

Diff for: ‎index.ts

+67-3
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import type { Config } from 'tailwindcss/types/config';
44

55
import tokens from '@eduzz/ui-tokens';
66

7+
import { hexToRgbVar } from './utils/hextToRgb';
8+
79
type BrandColor = keyof typeof tokens.brands;
810
const defaultColor = {
911
primary: `var(--eduzz-theme-primary, ${tokens.brands.eduzz.primary.pure})`,
@@ -12,12 +14,54 @@ const defaultColor = {
1214

1315
export const defaultTheme: Config = {
1416
content: ['./src/**/*.{ts,tsx}'],
15-
darkMode: ['class', 'body.eduzz-ui-dark-theme'],
17+
darkMode: ['class', 'body[data-eduzz-theme="dark"]'],
1618
theme: {
1719
extend: {
1820
fontFamily: {
1921
sans: [tokens.font.family.base, ...twDefaultTheme.fontFamily.sans]
2022
},
23+
variables: {
24+
'DEFAULT': {
25+
surface: {
26+
subtle: hexToRgbVar(tokens.base.light.surface.subtle),
27+
default: hexToRgbVar(tokens.base.light.surface.default),
28+
disabled: hexToRgbVar(tokens.base.light.surface.disabled)
29+
},
30+
outline: {
31+
default: hexToRgbVar(tokens.base.light.outline.default),
32+
disabled: hexToRgbVar(tokens.base.light.outline.disabled),
33+
darker: hexToRgbVar(tokens.base.light.outline.darker)
34+
},
35+
content: {
36+
title: hexToRgbVar(tokens.base.light.content.title),
37+
body: hexToRgbVar(tokens.base.light.content.body),
38+
subtitle: hexToRgbVar(tokens.base.light.content.subtitle),
39+
caption: hexToRgbVar(tokens.base.light.content.caption),
40+
negative: hexToRgbVar(tokens.base.light.content.negative),
41+
disabled: hexToRgbVar(tokens.base.light.content.disabled)
42+
}
43+
},
44+
'body[data-eduzz-theme="dark"]': {
45+
surface: {
46+
subtle: hexToRgbVar(tokens.base.dark.surface.subtle),
47+
default: hexToRgbVar(tokens.base.dark.surface.default),
48+
disabled: hexToRgbVar(tokens.base.dark.surface.disabled)
49+
},
50+
outline: {
51+
default: hexToRgbVar(tokens.base.dark.outline.default),
52+
disabled: hexToRgbVar(tokens.base.dark.outline.disabled),
53+
darker: hexToRgbVar(tokens.base.dark.outline.darker)
54+
},
55+
content: {
56+
title: hexToRgbVar(tokens.base.dark.content.title),
57+
body: hexToRgbVar(tokens.base.dark.content.body),
58+
subtitle: hexToRgbVar(tokens.base.dark.content.subtitle),
59+
caption: hexToRgbVar(tokens.base.dark.content.caption),
60+
negative: hexToRgbVar(tokens.base.dark.content.negative),
61+
disabled: hexToRgbVar(tokens.base.dark.content.disabled)
62+
}
63+
}
64+
},
2165
colors: {
2266
'belt-white': tokens.belt.background.white,
2367
'belt-red': tokens.belt.background.red,
@@ -30,7 +74,25 @@ export const defaultTheme: Config = {
3074
'belt-orange-foreground': tokens.belt.foreground.orange,
3175
'belt-green-foreground': tokens.belt.foreground.green,
3276
'belt-black-foreground': tokens.belt.foreground.black,
33-
'belt-golden-foreground': tokens.belt.foreground.golden
77+
'belt-golden-foreground': tokens.belt.foreground.golden,
78+
'surface': {
79+
subtle: 'rgb(var(--eduzz-ui-layout-surface-subtle) / <alpha-value>)',
80+
default: 'rgb(var(--eduzz-ui-layout-surface-default) / <alpha-value>)',
81+
disabled: 'rgb(var(--eduzz-ui-layout-surface-disabled) / <alpha-value>)'
82+
},
83+
'outline': {
84+
default: 'rgb(var(--eduzz-ui-layout-outline-default) / <alpha-value>)',
85+
disabled: 'rgb(var(--eduzz-ui-layout-outline-disabled) / <alpha-value>)',
86+
darker: 'rgb(var(--eduzz-ui-layout-outline-darker) / <alpha-value>)'
87+
},
88+
'content': {
89+
title: 'rgb(var(--eduzz-ui-layout-content-title) / <alpha-value>)',
90+
body: 'rgb(var(--eduzz-ui-layout-content-body) / <alpha-value>)',
91+
subtitle: 'rgb(var(--eduzz-ui-layout-content-subtitle) / <alpha-value>)',
92+
caption: 'rgb(var(--eduzz-ui-layout-content-caption) / <alpha-value>)',
93+
negative: 'rgb(var(--eduzz-ui-layout-content-negative) / <alpha-value>)',
94+
disabled: 'rgb(var(--eduzz-ui-layout-content-disabled) / <alpha-value>)'
95+
}
3496
},
3597
screens: {
3698
'sm': tokens.breakpoints.sm,
@@ -49,7 +111,9 @@ export const defaultTheme: Config = {
49111
'4xl': tokens.font.size.xl
50112
}
51113
}
52-
}
114+
},
115+
// eslint-disable-next-line @typescript-eslint/no-require-imports
116+
plugins: [require('@mertasan/tailwindcss-variables')({ variablePrefix: '--eduzz-ui-layout' })]
53117
};
54118

55119
export default function createTheme(

Diff for: ‎package.json

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@eduzz/ui-tailwind-theme",
33
"description": "Eduzz UI: Tailwind Theme",
4-
"version": "1.0.0",
4+
"version": "1.1.0-beta.8",
55
"keywords": [
66
"eduzz",
77
"tokens",
@@ -21,20 +21,22 @@
2121
"url": "https://github.com/eduzz/ui-tailwind-theme/issues"
2222
},
2323
"scripts": {
24-
"start": "vite",
24+
"dev": "vite",
2525
"clean": "git add . && git clean -fdx . -e node_modules",
2626
"prebuild": "yarn clean && yarn lint",
2727
"build": "yarn tsc -p tsconfig.json",
2828
"lint": "eslint . --ext ts,tsx",
2929
"update-deps": "yarn ncu -u"
3030
},
3131
"dependencies": {
32-
"@eduzz/ui-tokens": "^1.0.0",
32+
"@eduzz/ui-tokens": "^1.2.2",
33+
"@mertasan/tailwindcss-variables": "^2.7.0",
3334
"lodash-es": "^4"
3435
},
3536
"devDependencies": {
3637
"@eduzz/eslint-config": "^1.0.0",
3738
"@types/lodash-es": "^4",
39+
"@types/node": "^20.11.28",
3840
"@types/react": "^18.2.15",
3941
"@types/react-dom": "^18.2.7",
4042
"@typescript-eslint/eslint-plugin": "^6.0.0",

Diff for: ‎utils/hextToRgb.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const HEXADECIMAL_BASE = 16;
2+
3+
function decimalToHexadecimal(value: string) {
4+
return parseInt(value, HEXADECIMAL_BASE);
5+
}
6+
7+
export function hexToRgbVar(hexColor: string | null | undefined) {
8+
try {
9+
if (!hexColor) return null;
10+
11+
const twoLettersRegex = /\w\w/g;
12+
const [r, g, b] = hexColor.match(twoLettersRegex)?.map(decimalToHexadecimal) ?? [];
13+
14+
return `${r} ${g} ${b}`;
15+
} catch (err) {
16+
return null;
17+
}
18+
}

Diff for: ‎yarn.lock

+23-4
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@
2222
resolved "https://registry.yarnpkg.com/@eduzz/eslint-config/-/eslint-config-1.0.0.tgz#97180c2b37e1be93977f91725e4e9759cd3422b3"
2323
integrity sha512-Q2PMV1ddPI6ECdOpCiaAf4UxVo4Sf4usImvGRfQybDKzMDxUPHEocIMRjUe8ULPNfAnaV9Zgw20oGtUEUhkACg==
2424

25-
"@eduzz/ui-tokens@^1.0.0":
26-
version "1.0.0"
27-
resolved "https://registry.yarnpkg.com/@eduzz/ui-tokens/-/ui-tokens-1.0.0.tgz#da5db932d13930836d060f6ad63ac813914293ba"
28-
integrity sha512-ID+t8nb2+ahQRO8IbuwcIhr9rWNKTKTj95zzaW9D6YKrP2J8GHdawlwaccDnPjhd2zP89GU7lgoB31uyZ/kgkQ==
25+
"@eduzz/ui-tokens@^1.2.2":
26+
version "1.2.2"
27+
resolved "https://registry.yarnpkg.com/@eduzz/ui-tokens/-/ui-tokens-1.2.2.tgz#1345a871141df1dbe1e2efdaa36e149289b1bff1"
28+
integrity sha512-PX74zMDDlvLCrwvjbAWHl4A1JKqfMUk2Ss45VUBQ1sZg8/ZoGObYoV8K4QTQmOuDClEaLGjnp1OlU7IsdtdDaw==
2929

3030
"@esbuild/[email protected]":
3131
version "0.18.14"
@@ -237,6 +237,13 @@
237237
"@jridgewell/resolve-uri" "3.1.0"
238238
"@jridgewell/sourcemap-codec" "1.4.14"
239239

240+
"@mertasan/tailwindcss-variables@^2.7.0":
241+
version "2.7.0"
242+
resolved "https://registry.yarnpkg.com/@mertasan/tailwindcss-variables/-/tailwindcss-variables-2.7.0.tgz#9a0ca5ffad9e6f904f8701796681cd951351f004"
243+
integrity sha512-rKPhxi/0r6XWP0+OjPmsfrloX/TtQmvONj2Pr3Nl8BNBznQVP3M9sphguDBUDC0AiKYx2xgup3XzAhlIDLPLIA==
244+
dependencies:
245+
lodash "^4.17.21"
246+
240247
"@nodelib/[email protected]":
241248
version "2.1.5"
242249
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -484,6 +491,13 @@
484491
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.195.tgz#bafc975b252eb6cea78882ce8a7b6bf22a6de632"
485492
integrity sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==
486493

494+
"@types/node@^20.11.28":
495+
version "20.11.28"
496+
resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.28.tgz#4fd5b2daff2e580c12316e457473d68f15ee6f66"
497+
integrity sha512-M/GPWVS2wLkSkNHVeLkrF2fD5Lx5UC4PxA0uZcKc6QqbIQUJyW1jVjueJYi1z8n0I5PxYrtpnPnWglE+y9A0KA==
498+
dependencies:
499+
undici-types "~5.26.4"
500+
487501
"@types/prop-types@*":
488502
version "15.7.5"
489503
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
@@ -3821,6 +3835,11 @@ unbox-primitive@^1.0.2:
38213835
has-symbols "^1.0.3"
38223836
which-boxed-primitive "^1.0.2"
38233837

3838+
undici-types@~5.26.4:
3839+
version "5.26.5"
3840+
resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
3841+
integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
3842+
38243843
unique-filename@^3.0.0:
38253844
version "3.0.0"
38263845
resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-3.0.0.tgz#48ba7a5a16849f5080d26c760c86cf5cf05770ea"

0 commit comments

Comments
 (0)