Skip to content

Commit b306d50

Browse files
isaquebockisaquebock
authored
Merge pull request #467 from aziontech/refactor-theme
Refactor: Add spacing, typos and colors to theme
2 parents 0b1fa47 + 5d8aa67 commit b306d50

File tree

11 files changed

+789
-134
lines changed

11 files changed

+789
-134
lines changed

‎packages/theme/README.md‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -301,25 +301,27 @@ All semantic tokens are available as CSS variables:
301301
```css
302302
/* Automatically generated */
303303
:root, [data-theme=light], .azion.azion-light {
304-
--text-textColorBase: #171717;
305-
--background-bgLayer1: #ffffff;
306-
--border-borderBase: #e5e5e5;
304+
--text-default: #171717;
305+
--text-muted: #525252;
306+
--background-surface: #ffffff;
307+
--border-default: #e5e5e5;
307308
}
308309

309310
[data-theme=dark], .dark, .azion.azion-dark {
310-
--text-textColorBase: #fafafa;
311-
--background-bgLayer1: #262626;
312-
--border-borderBase: #404040;
311+
--text-default: #fafafa;
312+
--text-muted: #a3a3a3;
313+
--background-surface: #262626;
314+
--border-default: #404040;
313315
}
314316
```
315317

316318
Use in your CSS:
317319

318320
```css
319321
.custom-component {
320-
color: var(--text-textColorBase);
321-
background-color: var(--background-bgLayer1);
322-
border-color: var(--border-borderBase);
322+
color: var(--text-default);
323+
background-color: var(--background-surface);
324+
border-color: var(--border-default);
323325
}
324326
```
325327

‎packages/theme/package.json‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@
4444
"colors-brand.js",
4545
"default.js",
4646
"tokens.js",
47-
"widget.js"
47+
"widget.js",
48+
"tailwind-theme.js"
4849
],
4950
"exports": {
5051
".": "./default.js",
@@ -57,6 +58,11 @@
5758
"./tokens/semantic/borders": "./tokens.js",
5859
"./tokens/build/preset": "./src/tokens/build/preset.js",
5960
"./tokens/build/tailwind-helper": "./src/tokens/build/tailwind-helper.js",
60-
"./tokens/build/tailwind-plugin": "./src/tokens/build/tailwind-plugin.js"
61+
"./tokens/build/tailwind-plugin": "./src/tokens/build/tailwind-plugin.js",
62+
"./tokens/build/css-vars.js": "./src/tokens/build/css-vars.js",
63+
"./tailwind/tailwind-theme.js": "./src/tailwind/tailwind-theme.js",
64+
"./tailwind/semantic-colors-plugin.js": "./src/tailwind/semantic-colors-plugin.js",
65+
"./tailwind/semantic-texts-plugin.js": "./src/tailwind/semantic-texts-plugin.js",
66+
"./tailwind/semantic-spacing-plugin.js": "./src/tailwind/semantic-spacing-plugin.js"
6167
}
6268
}

‎packages/theme/src/tailwind/semantic-colors-plugin.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/**
2+
* Tailwind plugin to expose semantic colors at root level.
3+
*
4+
* This allows using classes like `text-muted` instead of `text-text-muted`.
5+
*
6+
* Usage in tailwind.config.js:
7+
* ```javascript
8+
* import { theme } from '@aziontech/theme/tailwind/tailwind-theme.js';
9+
* import semanticColors from '@aziontech/theme/tailwind/semantic-colors-plugin.js';
10+
*
11+
* export default {
12+
* theme,
13+
* plugins: [semanticColors()],
14+
* };
15+
* ```
16+
*/
17+
18+
// Lazy-require to avoid hard dependency for consumers
19+
const plugin = (() => {
20+
try {
21+
return require('tailwindcss/plugin');
22+
} catch {
23+
return (handler) => handler;
24+
}
25+
})();
26+
27+
/**
28+
* Generate semantic color utilities
29+
* @returns {import('tailwindcss/plugin').Plugin}
30+
*/
31+
export const semanticColors = () => {
32+
return plugin(({ addUtilities }) => {
33+
const textColors = {
34+
'.text-default': { color: 'var(--text-default)' },
35+
'.text-muted': { color: 'var(--text-muted)' },
36+
'.text-link': { color: 'var(--text-link)' },
37+
'.text-linkHover': { color: 'var(--text-linkHover)' },
38+
'.text-code': { color: 'var(--text-code)' },
39+
'.text-primary': { color: 'var(--text-primary)' },
40+
'.text-primaryHover': { color: 'var(--text-primaryHover)' },
41+
'.text-accent': { color: 'var(--text-accent)' },
42+
'.text-accentHover': { color: 'var(--text-accentHover)' },
43+
'.text-danger': { color: 'var(--text-danger)' },
44+
'.text-dangerHover': { color: 'var(--text-dangerHover)' },
45+
'.text-warning': { color: 'var(--text-warning)' },
46+
'.text-warningHover': { color: 'var(--text-warningHover)' },
47+
'.text-success': { color: 'var(--text-success)' },
48+
'.text-successHover': { color: 'var(--text-successHover)' },
49+
};
50+
51+
const bgColors = {
52+
'.bg-surfaceRaised': { 'background-color': 'var(--background-surfaceRaised)' },
53+
'.bg-surfaceOverlay': { 'background-color': 'var(--background-surfaceOverlay)' },
54+
'.bg-surface': { 'background-color': 'var(--background-surface)' },
55+
'.bg-canvas': { 'background-color': 'var(--background-canvas)' },
56+
'.bg-danger': { 'background-color': 'var(--background-danger)' },
57+
'.bg-dangerHover': { 'background-color': 'var(--background-dangerHover)' },
58+
'.bg-warning': { 'background-color': 'var(--background-warning)' },
59+
'.bg-warningHover': { 'background-color': 'var(--background-warningHover)' },
60+
'.bg-success': { 'background-color': 'var(--background-success)' },
61+
'.bg-successHover': { 'background-color': 'var(--background-successHover)' },
62+
'.bg-backdrop': { 'background-color': 'var(--background-backdrop)' },
63+
'.bg-primary': { 'background-color': 'var(--background-primary)' },
64+
'.bg-primaryHover': { 'background-color': 'var(--background-primaryHover)' },
65+
};
66+
67+
const borderColors = {
68+
'.border-default': { 'border-color': 'var(--border-default)' },
69+
'.border-strong': { 'border-color': 'var(--border-strong)' },
70+
'.border-subtle': { 'border-color': 'var(--border-subtle)' },
71+
'.border-warning': { 'border-color': 'var(--border-warning)' },
72+
'.border-warningHover': { 'border-color': 'var(--border-warningHover)' },
73+
'.border-success': { 'border-color': 'var(--border-success)' },
74+
'.border-successHover': { 'border-color': 'var(--border-successHover)' },
75+
'.border-danger': { 'border-color': 'var(--border-danger)' },
76+
'.border-dangerHover': { 'border-color': 'var(--border-dangerHover)' },
77+
'.border-primary': { 'border-color': 'var(--border-primary)' },
78+
'.border-primaryHover': { 'border-color': 'var(--border-primaryHover)' },
79+
'.border-accent': { 'border-color': 'var(--border-accent)' },
80+
'.border-accentHover': { 'border-color': 'var(--border-accentHover)' },
81+
};
82+
83+
addUtilities(textColors, ['responsive', 'hover', 'dark']);
84+
addUtilities(bgColors, ['responsive', 'hover', 'dark']);
85+
addUtilities(borderColors, ['responsive', 'hover', 'dark']);
86+
});
87+
};
88+
89+
export default semanticColors;

‎packages/theme/src/tailwind/semantic-spacing-plugin.js‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
/**
2+
* Tailwind plugin to expose semantic spacing styles.
3+
*
4+
* This adds spacing components for container, padding, and gap utilities.
5+
*
6+
* Usage in tailwind.config.js:
7+
* ```javascript
8+
* import { theme } from '@aziontech/theme/tailwind/tailwind-theme.js';
9+
* import semanticSpacing from '@aziontech/theme/tailwind/semantic-spacing-plugin.js';
10+
*
11+
* export default {
12+
* theme,
13+
* plugins: [semanticSpacing()],
14+
* };
15+
* ```
16+
*/
17+
18+
// Lazy-require to avoid hard dependency for consumers
19+
const plugin = (() => {
20+
try {
21+
return require('tailwindcss/plugin');
22+
} catch {
23+
return (handler) => handler;
24+
}
25+
})();
26+
27+
/**
28+
* Generate semantic spacing style components
29+
* @returns {import('tailwindcss/plugin').Plugin}
30+
*/
31+
export const semanticSpacing = () => {
32+
return plugin(({ addComponents, theme }) => {
33+
const spacing = {
34+
// Container
35+
'.max-container-width': {
36+
maxWidth: '1280px',
37+
},
38+
'.px-container': {
39+
paddingLeft: '0px',
40+
paddingRight: '0px',
41+
},
42+
'.py-container': {
43+
paddingTop: '48px',
44+
paddingBottom: '48px',
45+
},
46+
47+
// Padding elements
48+
'.p-elements-confortable': {
49+
padding: '24px',
50+
},
51+
'.p-elements-base': {
52+
padding: '12px',
53+
},
54+
'.p-elements-compact': {
55+
padding: '6px',
56+
},
57+
58+
// Gap elements
59+
'.gap-elements-confortable': {
60+
gap: '24px',
61+
},
62+
'.gap-elements-base': {
63+
gap: '12px',
64+
},
65+
'.gap-elements-compact': {
66+
gap: '6px',
67+
},
68+
69+
// Gap sections
70+
'.gap-sections': {
71+
gap: '48px',
72+
},
73+
};
74+
75+
const responsiveSpacing = {
76+
[`@media (max-width: ${theme('screens.md', '768px')})`]: {
77+
'.max-container-width': {
78+
maxWidth: '1024px',
79+
},
80+
'.px-container': {
81+
paddingLeft: '10px',
82+
paddingRight: '10px',
83+
},
84+
'.py-container': {
85+
paddingTop: '32px',
86+
paddingBottom: '32px',
87+
},
88+
'.p-elements-confortable': {
89+
padding: '16px',
90+
},
91+
'.p-elements-base': {
92+
padding: '8px',
93+
},
94+
'.p-elements-compact': {
95+
padding: '5px',
96+
},
97+
'.gap-elements-confortable': {
98+
gap: '16px',
99+
},
100+
'.gap-elements-base': {
101+
gap: '8px',
102+
},
103+
'.gap-elements-compact': {
104+
gap: '6px',
105+
},
106+
'.gap-sections': {
107+
gap: '40px',
108+
},
109+
},
110+
[`@media (max-width: ${theme('screens.sm', '640px')})`]: {
111+
'.max-container-width': {
112+
maxWidth: '414px',
113+
},
114+
'.px-container': {
115+
paddingLeft: '4px',
116+
paddingRight: '4px',
117+
},
118+
'.py-container': {
119+
paddingTop: '16px',
120+
paddingBottom: '16px',
121+
},
122+
'.p-elements-confortable': {
123+
padding: '8px',
124+
},
125+
'.p-elements-base': {
126+
padding: '6px',
127+
},
128+
'.p-elements-compact': {
129+
padding: '4px',
130+
},
131+
'.gap-elements-confortable': {
132+
gap: '8px',
133+
},
134+
'.gap-elements-base': {
135+
gap: '6px',
136+
},
137+
'.gap-elements-compact': {
138+
gap: '4px',
139+
},
140+
'.gap-sections': {
141+
gap: '20px',
142+
},
143+
},
144+
};
145+
146+
addComponents(spacing);
147+
addComponents(responsiveSpacing);
148+
});
149+
};
150+
151+
export default semanticSpacing;

0 commit comments

Comments
 (0)