Skip to content

Commit d2e7ad0

Browse files
leecalcoteleecalcote
authored
Merge pull request #1147 from saurabhraghuvanshii/page/theme-changer
Page/theme changer upgrade of Pr #1146
2 parents a7c406e + 0901252 commit d2e7ad0

File tree

26 files changed

+3107
-264
lines changed

26 files changed

+3107
-264
lines changed

‎examples/next-12/components/AllColors/index.jsx

Lines changed: 305 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,305 @@
1+
'use client';
2+
3+
import { Alert, Box, Chip, Container, Paper, Snackbar, Typography } from '@mui/material';
4+
import { useContext, useState } from 'react';
5+
import { ThemeContext } from '../../lib/context/AppThemeContext';
6+
import { darkModePalette, lightModePalette } from '../../lib/palette';
7+
8+
// Helper function to flatten nested objects and get all color values
9+
const flattenColors = (obj, prefix = '', seen = new Set()) => {
10+
let colors = [];
11+
12+
Object.entries(obj).forEach(([key, value]) => {
13+
const fullKey = prefix ? `${prefix}.${key}` : key;
14+
15+
if (typeof value === 'string') {
16+
if (!seen.has(fullKey)) {
17+
colors.push({
18+
token: fullKey,
19+
color: value,
20+
category: prefix || 'root'
21+
});
22+
seen.add(fullKey);
23+
}
24+
} else if (typeof value === 'object' && value !== null) {
25+
colors = colors.concat(flattenColors(value, fullKey, seen));
26+
}
27+
});
28+
29+
return colors;
30+
};
31+
32+
export default function AllColors() {
33+
const { mode } = useContext(ThemeContext);
34+
const palette = mode === 'dark' ? darkModePalette : lightModePalette;
35+
36+
const [snackbarOpen, setSnackbarOpen] = useState(false);
37+
const [copiedText, setCopiedText] = useState('');
38+
39+
const handleCopy = (value) => {
40+
navigator.clipboard.writeText(value);
41+
setCopiedText(value);
42+
setSnackbarOpen(true);
43+
};
44+
45+
const handleClose = () => setSnackbarOpen(false);
46+
47+
// Get all colors from the palette
48+
const allColors = flattenColors(palette);
49+
50+
// Group colors by category
51+
const groupedColors = allColors.reduce((acc, color) => {
52+
const category = color.category;
53+
if (!acc[category]) {
54+
acc[category] = [];
55+
}
56+
acc[category].push(color);
57+
return acc;
58+
}, {});
59+
60+
const categoryNames = {
61+
root: 'Primary Colors',
62+
surface: 'Surface Colors',
63+
interactive: 'Interactive Colors',
64+
navigation: 'Navigation Colors',
65+
background: 'Background Colors',
66+
text: 'Text Colors',
67+
border: 'Border Colors',
68+
icon: 'Icon Colors',
69+
primary: 'Primary Palette',
70+
secondary: 'Secondary Palette'
71+
};
72+
73+
const getCategoryDescription = (category) => {
74+
const descriptions = {
75+
root: 'Main palette colors',
76+
surface: 'Background surfaces with proper contrast',
77+
interactive: 'Colors for buttons, links, and interactive elements',
78+
navigation: 'Navigation bar and menu colors',
79+
background: 'Extended background color options',
80+
text: 'Text color variations',
81+
border: 'Border and divider colors',
82+
icon: 'Icon color variations',
83+
primary: 'Primary color palette',
84+
secondary: 'Secondary color palette'
85+
};
86+
return descriptions[category] || 'Color variations';
87+
};
88+
89+
return (
90+
<Container maxWidth="100%" sx={{ marginTop: '2rem' }}>
91+
<Box
92+
sx={{
93+
border: `1px solid ${palette.border.default}`,
94+
padding: '20px',
95+
borderRadius: '10px',
96+
boxShadow:
97+
mode === 'dark' ? '0px 4px 20px rgba(0,0,0,0.4)' : '0px 4px 20px rgba(0,0,0,0.1)',
98+
backgroundColor: palette.background.card
99+
}}
100+
>
101+
<Typography sx={{ fontSize: '1.3rem', fontWeight: '700', color: palette.text.default }}>
102+
All Colors Tokens
103+
</Typography>
104+
<Typography sx={{ color: palette.text.secondary, fontSize: '0.8rem' }}>
105+
Complete color palette explorer with all color tokens from the {mode} mode -{' '}
106+
{allColors.length} total colors
107+
</Typography>
108+
109+
{Object.entries(groupedColors).map(([category, colors]) => (
110+
<Box key={category} sx={{ mb: 4 }}>
111+
<Typography
112+
sx={{
113+
fontSize: '1.1rem',
114+
fontWeight: 600,
115+
color: palette.text.default,
116+
mb: 1,
117+
display: 'flex',
118+
alignItems: 'center',
119+
gap: 1
120+
}}
121+
>
122+
{categoryNames[category] || category.charAt(0).toUpperCase() + category.slice(1)}
123+
<Chip
124+
label={colors.length}
125+
size="small"
126+
sx={{
127+
backgroundColor: palette.background.secondary,
128+
color: palette.text.secondary
129+
}}
130+
/>
131+
</Typography>
132+
<Typography
133+
sx={{
134+
color: palette.text.secondary,
135+
fontSize: '0.8rem',
136+
mb: 2,
137+
maxWidth: '100%',
138+
wordBreak: 'break-word'
139+
}}
140+
>
141+
{getCategoryDescription(category)}
142+
</Typography>
143+
144+
<Container
145+
maxWidth="xl"
146+
sx={{
147+
mt: 4,
148+
display: 'flex',
149+
justifyContent: 'space-between',
150+
flexWrap: 'wrap',
151+
gap: 4
152+
}}
153+
>
154+
{colors.map(({ token, color }) => (
155+
<Box
156+
key={token}
157+
sx={{
158+
width: '200px',
159+
display: 'flex',
160+
flexDirection: 'column',
161+
borderRadius: '20px',
162+
border: `1px solid ${palette.border.normal}`,
163+
paddingY: '10px',
164+
alignItems: 'center',
165+
textAlign: 'center',
166+
cursor: 'pointer',
167+
backgroundColor: palette.background.surface
168+
}}
169+
onClick={() => handleCopy(color)}
170+
>
171+
<Box
172+
sx={{
173+
width: 80,
174+
height: 80,
175+
background: color,
176+
borderRadius: 2,
177+
boxShadow: 1,
178+
mb: 1,
179+
border: `1px solid ${palette.border.subtle}`,
180+
display: 'flex',
181+
alignItems: 'center',
182+
justifyContent: 'center'
183+
}}
184+
>
185+
{color.includes('gradient') && (
186+
<Typography
187+
sx={{
188+
fontSize: '0.7rem',
189+
color: palette.text.inverse,
190+
fontWeight: 600,
191+
textShadow: '0 1px 2px rgba(0,0,0,0.3)'
192+
}}
193+
>
194+
GRADIENT
195+
</Typography>
196+
)}
197+
</Box>
198+
199+
<Typography
200+
sx={{
201+
fontWeight: '600',
202+
color: palette.text.default,
203+
fontSize: '0.7rem',
204+
textAlign: 'center',
205+
wordBreak: 'break-word',
206+
maxWidth: '180px'
207+
}}
208+
variant="subtitle2"
209+
>
210+
{token}
211+
</Typography>
212+
213+
<Typography
214+
sx={{
215+
fontSize: '0.65rem',
216+
color: palette.text.muted,
217+
fontFamily: 'monospace',
218+
textAlign: 'center',
219+
wordBreak: 'break-all',
220+
maxWidth: '180px',
221+
lineHeight: 1.2
222+
}}
223+
>
224+
{color}
225+
</Typography>
226+
</Box>
227+
))}
228+
</Container>
229+
</Box>
230+
))}
231+
232+
<Paper
233+
sx={{
234+
mt: 4,
235+
p: 2,
236+
border: `1px solid ${palette.border.default}`,
237+
borderRadius: '10px',
238+
backgroundColor: palette.background.surface
239+
}}
240+
>
241+
<Typography sx={{ fontWeight: '600', mb: 2, color: palette.text.default }}>
242+
Palette Summary
243+
</Typography>
244+
245+
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
246+
<Box
247+
sx={{
248+
display: 'flex',
249+
alignItems: 'center',
250+
p: 1.5,
251+
borderRadius: 2,
252+
background: palette.primary.main,
253+
color: palette.text.inverse,
254+
fontWeight: 600,
255+
fontSize: '0.8rem',
256+
wordBreak: 'break-word',
257+
flexWrap: 'wrap'
258+
}}
259+
>
260+
• Total Colors: {allColors.length} | Categories: {Object.keys(groupedColors).length} |
261+
Mode: {mode.charAt(0).toUpperCase() + mode.slice(1)}
262+
</Box>
263+
264+
<Box
265+
sx={{
266+
display: 'flex',
267+
alignItems: 'center',
268+
p: 1.5,
269+
borderRadius: 2,
270+
background: palette.surface.primary,
271+
color: palette.text.default,
272+
fontWeight: 600,
273+
fontSize: '0.8rem',
274+
wordBreak: 'break-word',
275+
flexWrap: 'wrap'
276+
}}
277+
>
278+
• Primary: {palette.primary?.main || 'N/A'} | Surface:{' '}
279+
{palette.surface?.primary || 'N/A'} | Text: {palette.text?.default || 'N/A'}
280+
</Box>
281+
</Box>
282+
</Paper>
283+
</Box>
284+
285+
<Snackbar
286+
open={snackbarOpen}
287+
autoHideDuration={2000}
288+
onClose={handleClose}
289+
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
290+
>
291+
<Alert
292+
onClose={handleClose}
293+
severity="success"
294+
sx={{
295+
width: '100%',
296+
backgroundColor: palette.background.secondary,
297+
color: palette.text.default
298+
}}
299+
>
300+
Copied: {copiedText}
301+
</Alert>
302+
</Snackbar>
303+
</Container>
304+
);
305+
}

0 commit comments

Comments
 (0)