Skip to content

Commit d605cef

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

11 files changed

Lines changed: 271 additions & 374 deletions

File tree

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

Lines changed: 0 additions & 122 deletions
This file was deleted.

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

Lines changed: 70 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
'use client';
22

33
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';
4+
import React, { useState, useContext } from 'react';
5+
import { ThemeContext } from '@/lib/context/AppThemeContext';
6+
import { darkModePalette, lightModePalette } from '@/pages/themes-explorer/palette';
67
import { Palette, Eye, Sun, Send, Star } from 'lucide-react';
78

89
export default function BorderAndIconColors() {
9-
const borderColors = lightModePalette.border;
10-
const iconColors = lightModePalette.icon;
10+
const { mode } = useContext(ThemeContext);
11+
const palette = mode === 'dark' ? darkModePalette : lightModePalette;
12+
const borderColors = palette.border;
13+
const iconColors = palette.icon;
1114

1215
const [snackbarOpen, setSnackbarOpen] = useState(false);
1316
const [copiedText, setCopiedText] = useState('');
@@ -42,17 +45,25 @@ export default function BorderAndIconColors() {
4245
{ key: 'neutral.alt', label: 'Neutral Alt', desc: 'Alt neutral icons' },
4346
];
4447

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-
};
48+
const getColor = (obj, path) =>
49+
path.split('.').reduce((acc, part) => acc && acc[part], obj);
4950

5051
return (
5152
<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 }}>
53+
54+
<Paper
55+
sx={{
56+
p: 3,
57+
border: `1px solid ${palette.border.default}`,
58+
borderRadius: '12px',
59+
mb: 4,
60+
backgroundColor: palette.surface?.elevated ?? palette.background.elevatedComponents,
61+
}}
62+
>
63+
<Typography sx={{ fontSize: '1rem', fontWeight: 700, color: palette.text.default }}>
64+
Border Colors
65+
</Typography>
66+
<Typography sx={{ fontSize: '0.85rem', color: palette.text.secondary, mb: 3 }}>
5667
Border colors for different emphasis levels
5768
</Typography>
5869

@@ -64,12 +75,13 @@ export default function BorderAndIconColors() {
6475
sx={{
6576
p: 2,
6677
borderRadius: '12px',
67-
border: '1px solid #eee',
78+
border: `1px solid ${palette.border.default}`,
6879
textAlign: 'center',
6980
display: 'flex',
7081
flexDirection: 'column',
7182
alignItems: 'center',
7283
gap: 1,
84+
backgroundColor: palette.surface?.primary,
7385
}}
7486
>
7587
<Box
@@ -80,20 +92,23 @@ export default function BorderAndIconColors() {
8092
borderRadius: '8px',
8193
border: `4px solid ${getColor(borderColors, key)}`,
8294
cursor: 'pointer',
83-
'&:hover': { boxShadow: '0 0 0 3px rgba(0,0,0,0.1)' },
95+
'&:hover': { boxShadow: `0 0 0 3px ${palette.border.default}33` },
8496
}}
8597
/>
86-
<Typography sx={{ fontWeight: 600, fontSize: '0.9rem' }}>{label}</Typography>
87-
<Typography sx={{ fontSize: '0.75rem', color: '#555' }}>{desc}</Typography>
98+
<Typography sx={{ fontWeight: 600, fontSize: '0.9rem', color: palette.text.default }}>
99+
{label}
100+
</Typography>
101+
<Typography sx={{ fontSize: '0.75rem', color: palette.text.secondary }}>{desc}</Typography>
88102
<Typography
89103
sx={{
90104
fontSize: '0.75rem',
91-
backgroundColor: '#f5f5f5',
105+
backgroundColor: palette.surface?.elevated,
92106
borderRadius: '6px',
93107
px: 1,
94108
py: 0.3,
95109
mt: 0.5,
96110
fontFamily: 'monospace',
111+
color: palette.text.tertiary,
97112
}}
98113
>
99114
{getColor(borderColors, key)}
@@ -103,9 +118,17 @@ export default function BorderAndIconColors() {
103118
))}
104119
</Grid>
105120

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 }}>
121+
122+
<Box
123+
sx={{
124+
mt: 4,
125+
p: 2,
126+
border: `1px solid ${palette.border.default}`,
127+
borderRadius: '10px',
128+
backgroundColor: palette.surface?.elevated,
129+
}}
130+
>
131+
<Typography sx={{ fontSize: '0.95rem', fontWeight: 700, mb: 1, color: palette.text.default }}>
109132
Border Examples
110133
</Typography>
111134
<Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
@@ -119,6 +142,7 @@ export default function BorderAndIconColors() {
119142
py: 1,
120143
minWidth: 120,
121144
textAlign: 'center',
145+
color: palette.text.default,
122146
}}
123147
>
124148
{label} Border
@@ -128,10 +152,18 @@ export default function BorderAndIconColors() {
128152
</Box>
129153
</Paper>
130154

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 }}>
155+
<Paper
156+
sx={{
157+
p: 3,
158+
border: `1px solid ${palette.border.default}`,
159+
borderRadius: '12px',
160+
backgroundColor: palette.surface?.elevated ?? palette.background.elevatedComponents,
161+
}}
162+
>
163+
<Typography sx={{ fontSize: '1rem', fontWeight: 700, color: palette.text.default }}>
164+
Icon Colors
165+
</Typography>
166+
<Typography sx={{ fontSize: '0.85rem', color: palette.text.secondary, mb: 3 }}>
135167
Icon colors for different contexts and states
136168
</Typography>
137169

@@ -143,12 +175,13 @@ export default function BorderAndIconColors() {
143175
sx={{
144176
p: 2,
145177
borderRadius: '12px',
146-
border: '1px solid #eee',
178+
border: `1px solid ${palette.border.default}`,
147179
textAlign: 'center',
148180
display: 'flex',
149181
flexDirection: 'column',
150182
alignItems: 'center',
151183
gap: 1,
184+
backgroundColor: palette.surface?.primary,
152185
}}
153186
>
154187
<Box
@@ -159,21 +192,24 @@ export default function BorderAndIconColors() {
159192
borderRadius: '8px',
160193
backgroundColor: getColor(iconColors, key),
161194
cursor: 'pointer',
162-
border: '2px solid #ddd',
163-
'&:hover': { boxShadow: '0 0 0 3px rgba(0,0,0,0.1)' },
195+
border: `2px solid ${palette.border.normal}`,
196+
'&:hover': { boxShadow: `0 0 0 3px ${palette.border.default}33` },
164197
}}
165198
/>
166-
<Typography sx={{ fontWeight: 600, fontSize: '0.9rem' }}>{label}</Typography>
167-
<Typography sx={{ fontSize: '0.75rem', color: '#555' }}>{desc}</Typography>
199+
<Typography sx={{ fontWeight: 600, fontSize: '0.9rem', color: palette.text.default }}>
200+
{label}
201+
</Typography>
202+
<Typography sx={{ fontSize: '0.75rem', color: palette.text.secondary }}>{desc}</Typography>
168203
<Typography
169204
sx={{
170205
fontSize: '0.75rem',
171-
backgroundColor: '#f5f5f5',
206+
backgroundColor: palette.surface?.elevated,
172207
borderRadius: '6px',
173208
px: 1,
174209
py: 0.3,
175210
mt: 0.5,
176211
fontFamily: 'monospace',
212+
color: palette.text.tertiary,
177213
}}
178214
>
179215
{getColor(iconColors, key)}
@@ -183,9 +219,9 @@ export default function BorderAndIconColors() {
183219
))}
184220
</Grid>
185221

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 }}>
222+
223+
<Box sx={{ mt: 4, p: 2, border: `1px solid ${palette.border.default}`, borderRadius: '10px' }}>
224+
<Typography sx={{ fontSize: '0.95rem', fontWeight: 700, mb: 1, color: palette.text.default }}>
189225
Icon Examples
190226
</Typography>
191227
<Box sx={{ display: 'flex', gap: 3 }}>
@@ -198,7 +234,7 @@ export default function BorderAndIconColors() {
198234
</Box>
199235
</Paper>
200236

201-
{/* Snackbar */}
237+
202238
<Snackbar
203239
open={snackbarOpen}
204240
autoHideDuration={2000}

0 commit comments

Comments
 (0)