Skip to content

Commit 6d39686

Browse files
Guilhem-lmGuilhem-lm
committed
Implement tailwind theme for guideline components
1 parent 54ba00c commit 6d39686

File tree

5 files changed

+245
-171
lines changed

5 files changed

+245
-171
lines changed

‎src/components/guidelines/ColorDisplay.js‎

Lines changed: 7 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState } from 'react';
22
import DarkModeToggle from './DarkModeToggle';
3+
import { getTextClass, getSurfaceClass, getBorderClass } from '../../utils/themeColors';
34

45
const ColorDisplay = ({ colors, darkColors }) => {
56
const [isDarkMode, setIsDarkMode] = useState(false);
@@ -13,56 +14,21 @@ const ColorDisplay = ({ colors, darkColors }) => {
1314
<DarkModeToggle isDarkMode={isDarkMode} onToggle={() => setIsDarkMode(!isDarkMode)} />
1415
</div>
1516
)}
16-
<div
17-
style={{
18-
display: 'grid',
19-
gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
20-
gap: '16px',
21-
marginBottom: '24px',
22-
padding: '16px',
23-
backgroundColor: hasToggle && isDarkMode ? '#2e3440' : '#FBFBFD',
24-
borderRadius: '6px',
25-
border: '1px solid #e2e8f0'
26-
}}
27-
>
17+
<div className={`grid gap-4 mb-6 p-4 rounded-md border ${getSurfaceClass('primary', isDarkMode)} ${getBorderClass('light', isDarkMode)}`} style={{gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))'}}>
2818
{currentColors.map((color, index) => (
2919
<div key={index}>
3020
<div
31-
style={{
32-
width: '100%',
33-
height: '48px',
34-
backgroundColor: color.hex,
35-
borderRadius: '4px',
36-
marginBottom: '8px',
37-
border: '1px solid #e2e8f0'
38-
}}
21+
className={`w-full h-12 rounded mb-2 border ${getBorderClass('light', isDarkMode)}`}
22+
style={{ backgroundColor: color.hex }}
3923
></div>
40-
<div
41-
style={{
42-
fontSize: '14px',
43-
fontWeight: '600',
44-
marginBottom: '4px',
45-
color: hasToggle && isDarkMode ? '#f3f4f6' : '#2d3748'
46-
}}
47-
>
24+
<div className={`text-sm font-semibold mb-1 ${getTextClass('emphasis', isDarkMode)}`}>
4825
{color.name}
4926
</div>
50-
<code
51-
style={{
52-
fontSize: '12px',
53-
color: '#718096'
54-
}}
55-
>
27+
<code className={`text-xs ${getTextClass('secondary', isDarkMode)}`}>
5628
{color.hex}
5729
</code>
5830
{color.description && (
59-
<div
60-
style={{
61-
fontSize: '12px',
62-
color: hasToggle && isDarkMode ? '#aab0bb' : '#718096',
63-
marginTop: '4px'
64-
}}
65-
>
31+
<div className={`text-xs mt-1 ${getTextClass('secondary', isDarkMode)}`}>
6632
{color.description}
6733
</div>
6834
)}

‎src/components/guidelines/LogoDownload.js‎

Lines changed: 20 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -101,18 +101,18 @@ const LogoDownload = ({ logos }) => {
101101
}, 3000);
102102
};
103103

104-
const getButtonColor = (status) => {
104+
const getButtonClasses = (status) => {
105105
switch (status) {
106106
case 'downloading':
107-
return '#9CA3AF';
107+
return 'bg-gray-400';
108108
case 'success':
109-
return '#10B981';
109+
return 'bg-feedback-success';
110110
case 'error':
111-
return '#EF4444';
111+
return 'bg-feedback-error';
112112
case 'opened':
113-
return '#F59E0B';
113+
return 'bg-feedback-warning';
114114
default:
115-
return '#758ff8';
115+
return 'bg-accent-primary hover:bg-accent-hover';
116116
}
117117
};
118118

@@ -131,21 +131,21 @@ const LogoDownload = ({ logos }) => {
131131
}
132132
};
133133

134-
const getTextColors = (background) => {
134+
const getTextClasses = (background) => {
135135
// Determine if background is dark based on color value
136136
const isDarkBackground = background === '#2d3748' ||
137137
background.toLowerCase().includes('dark') ||
138138
(background.startsWith('#') && parseInt(background.slice(1), 16) < 0x808080);
139139

140140
if (isDarkBackground) {
141141
return {
142-
title: '#f3f4f6', // text-emphasis for dark backgrounds
143-
description: '#aab0bb' // text-secondary for dark backgrounds
142+
title: 'text-text-emphasis-dark',
143+
description: 'text-text-secondary-dark'
144144
};
145145
} else {
146146
return {
147-
title: '#2d3748', // text-emphasis for light backgrounds
148-
description: '#718096' // text-secondary for light backgrounds
147+
title: 'text-text-emphasis-light',
148+
description: 'text-text-secondary-light'
149149
};
150150
}
151151
};
@@ -160,15 +160,12 @@ const LogoDownload = ({ logos }) => {
160160
}}
161161
>
162162
{logos.map((logo, index) => {
163-
const textColors = getTextColors(logo.background);
163+
const textClasses = getTextClasses(logo.background);
164164
return (
165165
<div
166166
key={index}
167+
className="border border-border-light-light rounded-lg p-6 text-center"
167168
style={{
168-
border: '1px solid #e2e8f0',
169-
borderRadius: '8px',
170-
padding: '24px',
171-
textAlign: 'center',
172169
backgroundColor: logo.background || '#ffffff'
173170
}}
174171
>
@@ -192,50 +189,20 @@ const LogoDownload = ({ logos }) => {
192189
}}
193190
/>
194191
</div>
195-
<div
196-
style={{
197-
fontSize: '14px',
198-
fontWeight: '600',
199-
marginBottom: '8px',
200-
color: textColors.title
201-
}}
202-
>
192+
<div className={`text-sm font-semibold mb-2 ${textClasses.title}`}>
203193
{logo.variant}
204194
</div>
205-
<div
206-
style={{
207-
fontSize: '12px',
208-
color: textColors.description,
209-
marginBottom: '16px'
210-
}}
211-
>
195+
<div className={`text-xs mb-4 ${textClasses.description}`}>
212196
{logo.description}
213197
</div>
214198
<button
215199
onClick={() => downloadSVG(logo.url, logo.filename)}
216200
disabled={downloadStatus[logo.filename] === 'downloading'}
217-
style={{
218-
backgroundColor: getButtonColor(downloadStatus[logo.filename]),
219-
color: 'white',
220-
border: 'none',
221-
borderRadius: '6px',
222-
padding: '8px 16px',
223-
fontSize: '12px',
224-
fontWeight: '500',
225-
cursor: downloadStatus[logo.filename] === 'downloading' ? 'not-allowed' : 'pointer',
226-
transition: 'background-color 0.2s',
227-
opacity: downloadStatus[logo.filename] === 'downloading' ? 0.7 : 1
228-
}}
229-
onMouseOver={(e) => {
230-
if (downloadStatus[logo.filename] !== 'downloading') {
231-
e.target.style.backgroundColor = '#5074f6';
232-
}
233-
}}
234-
onMouseOut={(e) => {
235-
if (downloadStatus[logo.filename] !== 'downloading') {
236-
e.target.style.backgroundColor = getButtonColor(downloadStatus[logo.filename]);
237-
}
238-
}}
201+
className={`text-white border-none rounded-md px-4 py-2 text-xs font-medium transition-colors duration-200 ${
202+
downloadStatus[logo.filename] === 'downloading'
203+
? 'cursor-not-allowed opacity-70'
204+
: 'cursor-pointer'
205+
} ${getButtonClasses(downloadStatus[logo.filename])}`}
239206
>
240207
{getButtonText(downloadStatus[logo.filename])}
241208
</button>

‎src/components/guidelines/TypographyTable.js‎

Lines changed: 11 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState } from 'react';
22
import DarkModeToggle from './DarkModeToggle';
3+
import { getTextClass, getSurfaceClass } from '../../utils/themeColors';
34

45
const TypographyTable = ({ lightExamples, darkExamples }) => {
56
const [isDarkMode, setIsDarkMode] = useState(false);
@@ -11,104 +12,37 @@ const TypographyTable = ({ lightExamples, darkExamples }) => {
1112
<DarkModeToggle isDarkMode={isDarkMode} onToggle={() => setIsDarkMode(!isDarkMode)} />
1213
</div>
1314

14-
<div
15-
style={{
16-
padding: isDarkMode ? '16px' : '0',
17-
backgroundColor: isDarkMode ? '#2e3440' : 'transparent',
18-
borderRadius: isDarkMode ? '8px' : '0'
19-
}}
20-
>
21-
<table
22-
style={{
23-
width: '100%',
24-
borderCollapse: 'collapse',
25-
overflow: 'hidden'
26-
}}
27-
>
15+
<div className={isDarkMode ? `p-4 rounded-lg ${getSurfaceClass('secondary', true)}` : ''}>
16+
<table className="w-full border-collapse overflow-hidden">
2817
<thead>
2918
<tr>
30-
<th
31-
style={{
32-
textAlign: 'left',
33-
padding: '12px 8px',
34-
fontSize: '12px',
35-
fontWeight: '600',
36-
color: isDarkMode ? '#D4D8DD' : '#4A5568'
37-
}}
38-
>
19+
<th className={`text-left py-3 px-2 text-xs font-semibold ${getTextClass('primary', isDarkMode)}`}>
3920
Style
4021
</th>
41-
<th
42-
style={{
43-
textAlign: 'left',
44-
padding: '12px 8px',
45-
fontSize: '12px',
46-
fontWeight: '600',
47-
color: isDarkMode ? '#D4D8DD' : '#4A5568'
48-
}}
49-
>
22+
<th className={`text-left py-3 px-2 text-xs font-semibold ${getTextClass('primary', isDarkMode)}`}>
5023
Example
5124
</th>
52-
<th
53-
style={{
54-
textAlign: 'left',
55-
padding: '12px 8px',
56-
fontSize: '12px',
57-
fontWeight: '600',
58-
color: isDarkMode ? '#D4D8DD' : '#4A5568'
59-
}}
60-
>
25+
<th className={`text-left py-3 px-2 text-xs font-semibold ${getTextClass('primary', isDarkMode)}`}>
6126
Specifications
6227
</th>
63-
<th
64-
style={{
65-
textAlign: 'left',
66-
padding: '12px 8px',
67-
fontSize: '12px',
68-
fontWeight: '600',
69-
color: isDarkMode ? '#D4D8DD' : '#4A5568'
70-
}}
71-
>
28+
<th className={`text-left py-3 px-2 text-xs font-semibold ${getTextClass('primary', isDarkMode)}`}>
7229
Usage
7330
</th>
7431
</tr>
7532
</thead>
7633
<tbody>
7734
{currentExamples.map((row, index) => (
7835
<tr key={index}>
79-
<td
80-
style={{
81-
padding: '12px 8px',
82-
fontSize: '12px',
83-
fontWeight: '500',
84-
color: isDarkMode ? '#D4D8DD' : '#4A5568'
85-
}}
86-
>
36+
<td className={`py-3 px-2 text-xs font-medium ${getTextClass('primary', isDarkMode)}`}>
8737
<strong>{row.style}</strong>
8838
</td>
89-
<td
90-
style={{
91-
padding: '12px 8px'
92-
}}
93-
>
39+
<td className="py-3 px-2">
9440
{row.example}
9541
</td>
96-
<td
97-
style={{
98-
padding: '12px 8px',
99-
fontSize: '11px',
100-
color: isDarkMode ? '#aab0bb' : '#718096'
101-
}}
102-
>
42+
<td className={`py-3 px-2 text-2xs ${getTextClass('secondary', isDarkMode)}`}>
10343
{row.specifications}
10444
</td>
105-
<td
106-
style={{
107-
padding: '12px 8px',
108-
fontSize: '11px',
109-
color: isDarkMode ? '#aab0bb' : '#718096'
110-
}}
111-
>
45+
<td className={`py-3 px-2 text-2xs ${getTextClass('secondary', isDarkMode)}`}>
11246
{row.usage}
11347
</td>
11448
</tr>

0 commit comments

Comments
 (0)