Skip to content

Commit 02411c4

Browse files
ShivanshCharakShivanshCharak
committed
Page added for the pallette.ts
Signed-off-by: Shivansh Charak <shivansh17charak@gmail.com>
1 parent f548d8d commit 02411c4

26 files changed

Lines changed: 3074 additions & 237 deletions

File tree

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

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
"use client";
2+
3+
import * as React from "react";
4+
import {
5+
Button,
6+
Dialog,
7+
DialogTitle,
8+
DialogContent,
9+
DialogActions,
10+
Box,
11+
Typography,
12+
Grid,
13+
Tooltip,
14+
} from "@mui/material";
15+
import { lightModePalette } from "@/pages/themes-explorer/palette";
16+
17+
export default function InteractivePaletteDemo() {
18+
const [open, setOpen] = React.useState(false);
19+
20+
const handleOpen = () => setOpen(true);
21+
const handleClose = () => setOpen(false);
22+
23+
// Render component based on the token
24+
const renderComponent = (token, color) => {
25+
const interactiveTokens = ["cta", "brand", "success", "error", "warning", "info"];
26+
27+
for (const itoken of interactiveTokens) {
28+
if (token.includes(itoken) && lightModePalette.background[itoken]) {
29+
const states = lightModePalette.background[itoken];
30+
return (
31+
<Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
32+
<Typography variant="caption" sx={{ textTransform: "capitalize" }}>
33+
{itoken} Variants
34+
</Typography>
35+
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
36+
{Object.keys(states).map((key) => (
37+
<Button
38+
key={key}
39+
variant="contained"
40+
sx={{
41+
backgroundColor: states[key],
42+
"&:hover": { backgroundColor: states[key] },
43+
"&:active": { backgroundColor: states[key] },
44+
cursor: "crosshair",
45+
textTransform: "none",
46+
}}
47+
>
48+
{key}
49+
</Button>
50+
))}
51+
</Box>
52+
</Box>
53+
);
54+
}
55+
}
56+
57+
58+
return (
59+
<Box
60+
sx={{
61+
bgcolor: color,
62+
height: 50,
63+
display: "flex",
64+
alignItems: "center",
65+
justifyContent: "center",
66+
borderRadius: 1,
67+
color: "#fff",
68+
textAlign: "center",
69+
px: 1,
70+
cursor: "crosshair",
71+
}}
72+
onClick={() => navigator.clipboard.writeText(color)}
73+
>
74+
{token.split(".").pop()}
75+
</Box>
76+
);
77+
};
78+
79+
80+
const flattenColors = (obj, prefix = "lightMode") => {
81+
let colors= [];
82+
Object.keys(obj).forEach((key) => {
83+
const value = obj[key];
84+
if (typeof value === "string") {
85+
colors.push({ token: `${prefix}.${key}`, color: value });
86+
} else if (typeof value === "object") {
87+
colors = colors.concat(flattenColors(value, `${prefix}.${key}`));
88+
}
89+
});
90+
return colors;
91+
};
92+
93+
const allColors = flattenColors(lightModePalette.background);
94+
95+
return (
96+
<div>
97+
<Button variant="contained" onClick={handleOpen}>
98+
Open Interactive Palette
99+
</Button>
100+
101+
<Dialog open={open} onClose={handleClose} maxWidth="lg" fullWidth>
102+
<DialogTitle>Light Mode Background Color Interactive Palette</DialogTitle>
103+
<DialogContent dividers>
104+
<Grid container spacing={2}>
105+
{allColors.map(({ token, color }) => (
106+
<Grid item xs={12} sm={6} md={4} key={token}>
107+
<Tooltip title={token} arrow>
108+
{renderComponent(token, color)}
109+
</Tooltip>
110+
</Grid>
111+
))}
112+
</Grid>
113+
</DialogContent>
114+
<DialogActions>
115+
<Button variant="outlined" onClick={handleClose}>
116+
Close
117+
</Button>
118+
</DialogActions>
119+
</Dialog>
120+
</div>
121+
);
122+
}

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

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
'use client';
2+
3+
import { Box, Container, Typography, Paper, Grid, Snackbar, Alert } from '@mui/material';
4+
import React, { useState } from 'react';
5+
import { lightModePalette } from '@/pages/themes-explorer/palette';
6+
import { Palette, Eye, Sun, Send, Star } from 'lucide-react';
7+
8+
export default function BorderAndIconColors() {
9+
const borderColors = lightModePalette.border;
10+
const iconColors = lightModePalette.icon;
11+
12+
const [snackbarOpen, setSnackbarOpen] = useState(false);
13+
const [copiedText, setCopiedText] = useState('');
14+
15+
const handleCopy = (value) => {
16+
navigator.clipboard.writeText(value);
17+
setCopiedText(value);
18+
setSnackbarOpen(true);
19+
};
20+
21+
const handleClose = () => setSnackbarOpen(false);
22+
23+
const borderSwatches = [
24+
{ key: 'default', label: 'Default', desc: 'Standard borders' },
25+
{ key: 'strong', label: 'Strong', desc: 'Emphasized borders' },
26+
{ key: 'brand', label: 'Brand', desc: 'Brand borders' },
27+
{ key: 'normal', label: 'Normal', desc: 'Normal borders' },
28+
{ key: 'neutral.default', label: 'Neutral Default', desc: 'Neutral borders' },
29+
{ key: 'neutral.alt', label: 'Neutral Alt', desc: 'Alternate neutral borders' },
30+
];
31+
32+
const iconSwatches = [
33+
{ key: 'default', label: 'Default', desc: 'Standard icons' },
34+
{ key: 'secondary', label: 'Secondary', desc: 'Secondary icons' },
35+
{ key: 'brand', label: 'Brand', desc: 'Brand icons' },
36+
{ key: 'inverse', label: 'Inverse', desc: 'Inverse icons' },
37+
{ key: 'weather', label: 'Weather', desc: 'Weather icons' },
38+
{ key: 'disabled', label: 'Disabled', desc: 'Disabled icons' },
39+
{ key: 'dualTone', label: 'Dual Tone', desc: 'Two-tone icons' },
40+
{ key: 'dualToneInverse', label: 'Dual Tone Inverse', desc: 'Inverse dual-tone icons' },
41+
{ key: 'neutral.default', label: 'Neutral Default', desc: 'Neutral icons' },
42+
{ key: 'neutral.alt', label: 'Neutral Alt', desc: 'Alt neutral icons' },
43+
];
44+
45+
// helper: safely get nested colors (e.g. border.neutral.default)
46+
const getColor = (obj, path) => {
47+
return path.split('.').reduce((acc, part) => acc && acc[part], obj);
48+
};
49+
50+
return (
51+
<Container maxWidth="xl" sx={{ mt: 4 }}>
52+
{/* BORDER COLORS */}
53+
<Paper sx={{ p: 3, border: '1px solid #eee', borderRadius: '12px', mb: 4 }}>
54+
<Typography sx={{ fontSize: '1rem', fontWeight: 700 }}>Border Colors</Typography>
55+
<Typography sx={{ fontSize: '0.85rem', color: '#555', mb: 3 }}>
56+
Border colors for different emphasis levels
57+
</Typography>
58+
59+
<Grid container spacing={3}>
60+
{borderSwatches.map(({ key, label, desc }) => (
61+
<Grid item xs={12} sm={6} md={3} key={key}>
62+
<Paper
63+
elevation={1}
64+
sx={{
65+
p: 2,
66+
borderRadius: '12px',
67+
border: '1px solid #eee',
68+
textAlign: 'center',
69+
display: 'flex',
70+
flexDirection: 'column',
71+
alignItems: 'center',
72+
gap: 1,
73+
}}
74+
>
75+
<Box
76+
onClick={() => handleCopy(getColor(borderColors, key))}
77+
sx={{
78+
width: 60,
79+
height: 60,
80+
borderRadius: '8px',
81+
border: `4px solid ${getColor(borderColors, key)}`,
82+
cursor: 'pointer',
83+
'&:hover': { boxShadow: '0 0 0 3px rgba(0,0,0,0.1)' },
84+
}}
85+
/>
86+
<Typography sx={{ fontWeight: 600, fontSize: '0.9rem' }}>{label}</Typography>
87+
<Typography sx={{ fontSize: '0.75rem', color: '#555' }}>{desc}</Typography>
88+
<Typography
89+
sx={{
90+
fontSize: '0.75rem',
91+
backgroundColor: '#f5f5f5',
92+
borderRadius: '6px',
93+
px: 1,
94+
py: 0.3,
95+
mt: 0.5,
96+
fontFamily: 'monospace',
97+
}}
98+
>
99+
{getColor(borderColors, key)}
100+
</Typography>
101+
</Paper>
102+
</Grid>
103+
))}
104+
</Grid>
105+
106+
{/* Border Examples */}
107+
<Box sx={{ mt: 4, p: 2, border: '1px solid #eee', borderRadius: '10px' }}>
108+
<Typography sx={{ fontSize: '0.95rem', fontWeight: 700, mb: 1 }}>
109+
Border Examples
110+
</Typography>
111+
<Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
112+
{borderSwatches.slice(0, 4).map(({ key, label }) => (
113+
<Box
114+
key={key}
115+
sx={{
116+
border: `2px solid ${getColor(borderColors, key)}`,
117+
borderRadius: '8px',
118+
px: 2,
119+
py: 1,
120+
minWidth: 120,
121+
textAlign: 'center',
122+
}}
123+
>
124+
{label} Border
125+
</Box>
126+
))}
127+
</Box>
128+
</Box>
129+
</Paper>
130+
131+
{/* ICON COLORS */}
132+
<Paper sx={{ p: 3, border: '1px solid #eee', borderRadius: '12px' }}>
133+
<Typography sx={{ fontSize: '1rem', fontWeight: 700 }}>Icon Colors</Typography>
134+
<Typography sx={{ fontSize: '0.85rem', color: '#555', mb: 3 }}>
135+
Icon colors for different contexts and states
136+
</Typography>
137+
138+
<Grid container spacing={3}>
139+
{iconSwatches.map(({ key, label, desc }) => (
140+
<Grid item xs={12} sm={6} md={2} key={key}>
141+
<Paper
142+
elevation={1}
143+
sx={{
144+
p: 2,
145+
borderRadius: '12px',
146+
border: '1px solid #eee',
147+
textAlign: 'center',
148+
display: 'flex',
149+
flexDirection: 'column',
150+
alignItems: 'center',
151+
gap: 1,
152+
}}
153+
>
154+
<Box
155+
onClick={() => handleCopy(getColor(iconColors, key))}
156+
sx={{
157+
width: 60,
158+
height: 60,
159+
borderRadius: '8px',
160+
backgroundColor: getColor(iconColors, key),
161+
cursor: 'pointer',
162+
border: '2px solid #ddd',
163+
'&:hover': { boxShadow: '0 0 0 3px rgba(0,0,0,0.1)' },
164+
}}
165+
/>
166+
<Typography sx={{ fontWeight: 600, fontSize: '0.9rem' }}>{label}</Typography>
167+
<Typography sx={{ fontSize: '0.75rem', color: '#555' }}>{desc}</Typography>
168+
<Typography
169+
sx={{
170+
fontSize: '0.75rem',
171+
backgroundColor: '#f5f5f5',
172+
borderRadius: '6px',
173+
px: 1,
174+
py: 0.3,
175+
mt: 0.5,
176+
fontFamily: 'monospace',
177+
}}
178+
>
179+
{getColor(iconColors, key)}
180+
</Typography>
181+
</Paper>
182+
</Grid>
183+
))}
184+
</Grid>
185+
186+
{/* Icon Examples */}
187+
<Box sx={{ mt: 4, p: 2, border: '1px solid #eee', borderRadius: '10px' }}>
188+
<Typography sx={{ fontSize: '0.95rem', fontWeight: 700, mb: 1 }}>
189+
Icon Examples
190+
</Typography>
191+
<Box sx={{ display: 'flex', gap: 3 }}>
192+
<Palette size={22} color={iconColors.default} />
193+
<Eye size={22} color={iconColors.secondary} />
194+
<Sun size={22} color={iconColors.brand} />
195+
<Send size={22} color={iconColors.weather} />
196+
<Star size={22} color={iconColors.dualTone} />
197+
</Box>
198+
</Box>
199+
</Paper>
200+
201+
{/* Snackbar */}
202+
<Snackbar
203+
open={snackbarOpen}
204+
autoHideDuration={2000}
205+
onClose={handleClose}
206+
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
207+
>
208+
<Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
209+
Copied: {copiedText}
210+
</Alert>
211+
</Snackbar>
212+
</Container>
213+
);
214+
}

0 commit comments

Comments
 (0)