Skip to content

Commit ae1ea74

Browse files
Agilulfo1820Agilulfo1820
committed
Revert "fix: dark mode for all colors"
This reverts commit 8be6bce.
1 parent 201fa20 commit ae1ea74

1 file changed

Lines changed: 73 additions & 152 deletions

File tree

‎packages/vechain-kit/src/theme/theme.tsx‎

Lines changed: 73 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -15,144 +15,85 @@ import {
1515
const getThemeConfig = (
1616
darkMode: boolean,
1717
tokens: ThemeTokens,
18-
lightTokens?: ThemeTokens,
19-
darkTokens?: ThemeTokens,
20-
): ThemeConfig => {
21-
// Use provided light/dark tokens or fall back to current mode tokens
22-
const lightModeTokens = lightTokens ?? tokens;
23-
const darkModeTokens = darkTokens ?? tokens;
18+
): ThemeConfig => ({
19+
useSystemColorMode: false,
20+
disableTransitionOnChange: false,
2421

25-
return {
26-
useSystemColorMode: false,
27-
disableTransitionOnChange: false,
22+
// @ts-ignore
23+
components: {
24+
Modal: getModalTheme(tokens),
25+
Card: getCardTheme(tokens),
26+
Button: getButtonTheme(tokens),
27+
Popover: getPopoverTheme(tokens),
28+
},
29+
// No global styles - fonts will be applied via component-level styles
30+
// to ensure they only affect VeChain Kit components, not the host app
31+
styles: {
32+
global: () => ({}),
33+
},
2834

29-
// @ts-ignore
30-
components: {
31-
Modal: getModalTheme(tokens),
32-
Card: getCardTheme(tokens),
33-
Button: getButtonTheme(tokens),
34-
Popover: getPopoverTheme(tokens),
35+
// semantic tokens derived from ThemeTokens
36+
semanticTokens: {
37+
colors: {
38+
// Note: chakra-body-text and chakra-body-bg are intentionally omitted
39+
// to prevent Chakra UI from applying global body/html styles that would override host apps
40+
// These are unset globally in VechainKitThemeProvider LayerSetup CSS
41+
'chakra-border-color': tokens.colors.border.default,
42+
'chakra-placeholder-color': tokens.colors.text.tertiary,
43+
// VeChain Kit semantic tokens
44+
// Main structural background tokens (for component backgrounds)
45+
'vechain-kit-modal': tokens.colors.background.modal,
46+
'vechain-kit-overlay': tokens.colors.background.overlay,
47+
'vechain-kit-card': darkMode
48+
? 'rgba(0, 0, 0, 0.3)'
49+
: 'rgba(0, 0, 0, 0.05)', // Darker card with transparency
50+
'vechain-kit-card-elevated': darkMode
51+
? 'rgba(0, 0, 0, 0.4)'
52+
: 'rgba(0, 0, 0, 0.08)', // Darker elevated card with transparency
53+
'vechain-kit-sticky-header': tokens.colors.background.stickyHeader,
54+
'vechain-kit-text-primary': tokens.colors.text.primary,
55+
'vechain-kit-text-secondary': tokens.colors.text.secondary,
56+
'vechain-kit-text-tertiary': tokens.colors.text.tertiary,
57+
'vechain-kit-border': tokens.colors.border.default,
58+
'vechain-kit-border-hover': tokens.colors.border.hover,
59+
'vechain-kit-border-focus': tokens.colors.border.focus,
60+
'vechain-kit-success': tokens.colors.success,
61+
'vechain-kit-error': tokens.colors.error,
62+
'vechain-kit-warning': tokens.colors.warning,
3563
},
36-
// No global styles - fonts will be applied via component-level styles
37-
// to ensure they only affect VeChain Kit components, not the host app
38-
styles: {
39-
global: () => ({}),
64+
effects: {
65+
'vechain-kit-backdrop-filter-modal':
66+
tokens.effects.backdropFilter.modal,
67+
'vechain-kit-backdrop-filter-overlay':
68+
tokens.effects.backdropFilter.overlay,
69+
'vechain-kit-backdrop-filter-sticky-header':
70+
tokens.effects.backdropFilter.stickyHeader,
4071
},
4172

42-
// semantic tokens derived from ThemeTokens
43-
semanticTokens: {
44-
colors: {
45-
// Note: chakra-body-text and chakra-body-bg are intentionally omitted
46-
// to prevent Chakra UI from applying global body/html styles that would override host apps
47-
// These are unset globally in VechainKitThemeProvider LayerSetup CSS
48-
'chakra-border-color': {
49-
_dark: darkModeTokens.colors.border.default,
50-
_light: lightModeTokens.colors.border.default,
51-
},
52-
'chakra-placeholder-color': {
53-
_dark: darkModeTokens.colors.text.tertiary,
54-
_light: lightModeTokens.colors.text.tertiary,
55-
},
56-
// VeChain Kit semantic tokens
57-
// Main structural background tokens (for component backgrounds)
58-
// Using mode-specific syntax so Chakra UI updates CSS variables when color mode changes
59-
'vechain-kit-modal': {
60-
_dark: darkModeTokens.colors.background.modal,
61-
_light: lightModeTokens.colors.background.modal,
62-
},
63-
'vechain-kit-overlay': {
64-
_dark: darkModeTokens.colors.background.overlay,
65-
_light: lightModeTokens.colors.background.overlay,
66-
},
67-
'vechain-kit-card': {
68-
_dark: darkModeTokens.colors.background.card,
69-
_light: lightModeTokens.colors.background.card,
70-
},
71-
'vechain-kit-card-elevated': {
72-
_dark: darkModeTokens.colors.background.cardElevated,
73-
_light: lightModeTokens.colors.background.cardElevated,
74-
},
75-
'vechain-kit-sticky-header': {
76-
_dark: darkModeTokens.colors.background.stickyHeader,
77-
_light: lightModeTokens.colors.background.stickyHeader,
78-
},
79-
'vechain-kit-text-primary': {
80-
_dark: darkModeTokens.colors.text.primary,
81-
_light: lightModeTokens.colors.text.primary,
82-
},
83-
'vechain-kit-text-secondary': {
84-
_dark: darkModeTokens.colors.text.secondary,
85-
_light: lightModeTokens.colors.text.secondary,
86-
},
87-
'vechain-kit-text-tertiary': {
88-
_dark: darkModeTokens.colors.text.tertiary,
89-
_light: lightModeTokens.colors.text.tertiary,
90-
},
91-
'vechain-kit-border': {
92-
_dark: darkModeTokens.colors.border.default,
93-
_light: lightModeTokens.colors.border.default,
94-
},
95-
'vechain-kit-border-hover': {
96-
_dark: darkModeTokens.colors.border.hover,
97-
_light: lightModeTokens.colors.border.hover,
98-
},
99-
'vechain-kit-border-focus': {
100-
_dark: darkModeTokens.colors.border.focus,
101-
_light: lightModeTokens.colors.border.focus,
102-
},
103-
'vechain-kit-success': {
104-
_dark: darkModeTokens.colors.success,
105-
_light: lightModeTokens.colors.success,
106-
},
107-
'vechain-kit-error': {
108-
_dark: darkModeTokens.colors.error,
109-
_light: lightModeTokens.colors.error,
110-
},
111-
'vechain-kit-warning': {
112-
_dark: darkModeTokens.colors.warning,
113-
_light: lightModeTokens.colors.warning,
114-
},
115-
},
116-
effects: {
117-
'vechain-kit-backdrop-filter-modal': {
118-
_dark: darkModeTokens.effects.backdropFilter.modal,
119-
_light: lightModeTokens.effects.backdropFilter.modal,
120-
},
121-
'vechain-kit-backdrop-filter-overlay': {
122-
_dark: darkModeTokens.effects.backdropFilter.overlay,
123-
_light: lightModeTokens.effects.backdropFilter.overlay,
124-
},
125-
'vechain-kit-backdrop-filter-sticky-header': {
126-
_dark: darkModeTokens.effects.backdropFilter.stickyHeader,
127-
_light: lightModeTokens.effects.backdropFilter.stickyHeader,
128-
},
129-
},
130-
131-
config: {
132-
cssVarPrefix: 'vechain-kit', // consistent naming across all components
133-
},
73+
config: {
74+
cssVarPrefix: 'vechain-kit', // consistent naming across all components
13475
},
76+
},
13577

136-
// Don't modify fonts in theme - Chakra creates global CSS variables from fonts.body/heading
137-
// Custom fonts are applied via scoped CSS in VechainKitThemeProvider instead
138-
fonts: baseTheme.fonts,
139-
fontSizes: {
140-
...baseTheme.fontSizes,
141-
// Add theme font sizes as standard Chakra font sizes
142-
sm: tokens.fonts.sizes.small,
143-
md: tokens.fonts.sizes.medium,
144-
lg: tokens.fonts.sizes.large,
145-
},
146-
fontWeights: {
147-
...baseTheme.fontWeights,
148-
normal: tokens.fonts.weights.normal,
149-
medium: tokens.fonts.weights.medium,
150-
bold: tokens.fonts.weights.bold,
151-
},
152-
colors: baseTheme.colors,
153-
space: baseTheme.space,
154-
};
155-
};
78+
// Don't modify fonts in theme - Chakra creates global CSS variables from fonts.body/heading
79+
// Custom fonts are applied via scoped CSS in VechainKitThemeProvider instead
80+
fonts: baseTheme.fonts,
81+
fontSizes: {
82+
...baseTheme.fontSizes,
83+
// Add theme font sizes as standard Chakra font sizes
84+
sm: tokens.fonts.sizes.small,
85+
md: tokens.fonts.sizes.medium,
86+
lg: tokens.fonts.sizes.large,
87+
},
88+
fontWeights: {
89+
...baseTheme.fontWeights,
90+
normal: tokens.fonts.weights.normal,
91+
medium: tokens.fonts.weights.medium,
92+
bold: tokens.fonts.weights.bold,
93+
},
94+
colors: baseTheme.colors,
95+
space: baseTheme.space,
96+
});
15697

15798
export const getVechainKitTheme = (
15899
darkMode: boolean,
@@ -170,28 +111,8 @@ export const getVechainKitTheme = (
170111
// Merge custom tokens with defaults
171112
const tokens = mergeTokens(defaultTokens, customTokens);
172113

173-
// Get tokens for both modes to support mode-specific semantic tokens
174-
// This ensures CSS variables update correctly when color mode changes
175-
const lightTokens = getDefaultTokens(false);
176-
const darkTokens = getDefaultTokens(true);
177-
const lightCustomTokens = convertThemeConfigToTokens(
178-
customThemeConfig,
179-
false,
180-
);
181-
const darkCustomTokens = convertThemeConfigToTokens(
182-
customThemeConfig,
183-
true,
184-
);
185-
const mergedLightTokens = mergeTokens(lightTokens, lightCustomTokens);
186-
const mergedDarkTokens = mergeTokens(darkTokens, darkCustomTokens);
187-
188114
// Generate theme config with tokens
189-
const themeConfig = getThemeConfig(
190-
darkMode,
191-
tokens,
192-
mergedLightTokens,
193-
mergedDarkTokens,
194-
);
115+
const themeConfig = getThemeConfig(darkMode, tokens);
195116

196117
const theme = extendTheme(themeConfig);
197118

0 commit comments

Comments
 (0)