From 02411c4d64d3b4eb2a9e9839b4539f9b8dd5f463 Mon Sep 17 00:00:00 2001 From: Shivansh Charak Date: Wed, 20 Aug 2025 22:29:58 +0530 Subject: [PATCH 1/8] Page added for the pallette.ts Signed-off-by: Shivansh Charak --- .../next-12/components/Background/index.jsx | 122 ++++ .../components/BorderAndIcons/index.jsx | 214 +++++++ examples/next-12/components/Borders/index.jsx | 82 +++ .../next-12/components/DefaultModal/index.jsx | 6 +- examples/next-12/components/Footer/index.jsx | 63 ++ examples/next-12/components/Icon/index.jsx | 109 ++++ .../next-12/components/Interactive/index.jsx | 185 ++++++ examples/next-12/components/Menus/index.jsx | 44 ++ .../next-12/components/ModeToggleButton.jsx | 18 +- .../next-12/components/Navigation/index.jsx | 183 ++++++ .../next-12/components/Semantic/index.jsx | 124 ++++ examples/next-12/components/Surface/index.jsx | 173 ++++++ examples/next-12/components/Tabs/index.jsx | 62 ++ examples/next-12/components/Text/index.jsx | 146 +++++ .../next-12/lib/context/AppThemeContext.jsx | 60 ++ .../lib/providers/AppThemeProvider.jsx | 45 -- .../next-12/lib/providers/ReduxProvider.jsx | 6 - examples/next-12/package-lock.json | 442 ++++++++++---- examples/next-12/package.json | 8 +- examples/next-12/pages/_app.js | 11 +- .../pages/themes-explorer/colors/colors.ts | 398 ++++++++++++ .../pages/themes-explorer/colors/index.ts | 76 +++ .../next-12/pages/themes-explorer/index.jsx | 44 ++ .../next-12/pages/themes-explorer/palette.ts | 577 ++++++++++++++++++ examples/next-12/styles/themes/theme.js | 78 +-- examples/next-12/tsconfig.json | 35 ++ 26 files changed, 3074 insertions(+), 237 deletions(-) create mode 100644 examples/next-12/components/Background/index.jsx create mode 100644 examples/next-12/components/BorderAndIcons/index.jsx create mode 100644 examples/next-12/components/Borders/index.jsx create mode 100644 examples/next-12/components/Footer/index.jsx create mode 100644 examples/next-12/components/Icon/index.jsx create mode 100644 examples/next-12/components/Interactive/index.jsx create mode 100644 examples/next-12/components/Menus/index.jsx create mode 100644 examples/next-12/components/Navigation/index.jsx create mode 100644 examples/next-12/components/Semantic/index.jsx create mode 100644 examples/next-12/components/Surface/index.jsx create mode 100644 examples/next-12/components/Tabs/index.jsx create mode 100644 examples/next-12/components/Text/index.jsx create mode 100644 examples/next-12/lib/context/AppThemeContext.jsx delete mode 100644 examples/next-12/lib/providers/AppThemeProvider.jsx delete mode 100644 examples/next-12/lib/providers/ReduxProvider.jsx create mode 100644 examples/next-12/pages/themes-explorer/colors/colors.ts create mode 100644 examples/next-12/pages/themes-explorer/colors/index.ts create mode 100644 examples/next-12/pages/themes-explorer/index.jsx create mode 100644 examples/next-12/pages/themes-explorer/palette.ts create mode 100644 examples/next-12/tsconfig.json diff --git a/examples/next-12/components/Background/index.jsx b/examples/next-12/components/Background/index.jsx new file mode 100644 index 000000000..154fb456d --- /dev/null +++ b/examples/next-12/components/Background/index.jsx @@ -0,0 +1,122 @@ +"use client"; + +import * as React from "react"; +import { + Button, + Dialog, + DialogTitle, + DialogContent, + DialogActions, + Box, + Typography, + Grid, + Tooltip, +} from "@mui/material"; +import { lightModePalette } from "@/pages/themes-explorer/palette"; + +export default function InteractivePaletteDemo() { + const [open, setOpen] = React.useState(false); + + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + + // Render component based on the token + const renderComponent = (token, color) => { + const interactiveTokens = ["cta", "brand", "success", "error", "warning", "info"]; + + for (const itoken of interactiveTokens) { + if (token.includes(itoken) && lightModePalette.background[itoken]) { + const states = lightModePalette.background[itoken]; + return ( + + + {itoken} Variants + + + {Object.keys(states).map((key) => ( + + ))} + + + ); + } + } + + + return ( + navigator.clipboard.writeText(color)} + > + {token.split(".").pop()} + + ); + }; + + + const flattenColors = (obj, prefix = "lightMode") => { + let colors= []; + Object.keys(obj).forEach((key) => { + const value = obj[key]; + if (typeof value === "string") { + colors.push({ token: `${prefix}.${key}`, color: value }); + } else if (typeof value === "object") { + colors = colors.concat(flattenColors(value, `${prefix}.${key}`)); + } + }); + return colors; + }; + + const allColors = flattenColors(lightModePalette.background); + + return ( +
+ + + + Light Mode Background Color Interactive Palette + + + {allColors.map(({ token, color }) => ( + + + {renderComponent(token, color)} + + + ))} + + + + + + +
+ ); +} diff --git a/examples/next-12/components/BorderAndIcons/index.jsx b/examples/next-12/components/BorderAndIcons/index.jsx new file mode 100644 index 000000000..75b343880 --- /dev/null +++ b/examples/next-12/components/BorderAndIcons/index.jsx @@ -0,0 +1,214 @@ +'use client'; + +import { Box, Container, Typography, Paper, Grid, Snackbar, Alert } from '@mui/material'; +import React, { useState } from 'react'; +import { lightModePalette } from '@/pages/themes-explorer/palette'; +import { Palette, Eye, Sun, Send, Star } from 'lucide-react'; + +export default function BorderAndIconColors() { + const borderColors = lightModePalette.border; + const iconColors = lightModePalette.icon; + + const [snackbarOpen, setSnackbarOpen] = useState(false); + const [copiedText, setCopiedText] = useState(''); + + const handleCopy = (value) => { + navigator.clipboard.writeText(value); + setCopiedText(value); + setSnackbarOpen(true); + }; + + const handleClose = () => setSnackbarOpen(false); + + const borderSwatches = [ + { key: 'default', label: 'Default', desc: 'Standard borders' }, + { key: 'strong', label: 'Strong', desc: 'Emphasized borders' }, + { key: 'brand', label: 'Brand', desc: 'Brand borders' }, + { key: 'normal', label: 'Normal', desc: 'Normal borders' }, + { key: 'neutral.default', label: 'Neutral Default', desc: 'Neutral borders' }, + { key: 'neutral.alt', label: 'Neutral Alt', desc: 'Alternate neutral borders' }, + ]; + + const iconSwatches = [ + { key: 'default', label: 'Default', desc: 'Standard icons' }, + { key: 'secondary', label: 'Secondary', desc: 'Secondary icons' }, + { key: 'brand', label: 'Brand', desc: 'Brand icons' }, + { key: 'inverse', label: 'Inverse', desc: 'Inverse icons' }, + { key: 'weather', label: 'Weather', desc: 'Weather icons' }, + { key: 'disabled', label: 'Disabled', desc: 'Disabled icons' }, + { key: 'dualTone', label: 'Dual Tone', desc: 'Two-tone icons' }, + { key: 'dualToneInverse', label: 'Dual Tone Inverse', desc: 'Inverse dual-tone icons' }, + { key: 'neutral.default', label: 'Neutral Default', desc: 'Neutral icons' }, + { key: 'neutral.alt', label: 'Neutral Alt', desc: 'Alt neutral icons' }, + ]; + + // helper: safely get nested colors (e.g. border.neutral.default) + const getColor = (obj, path) => { + return path.split('.').reduce((acc, part) => acc && acc[part], obj); + }; + + return ( + + {/* BORDER COLORS */} + + Border Colors + + Border colors for different emphasis levels + + + + {borderSwatches.map(({ key, label, desc }) => ( + + + handleCopy(getColor(borderColors, key))} + sx={{ + width: 60, + height: 60, + borderRadius: '8px', + border: `4px solid ${getColor(borderColors, key)}`, + cursor: 'pointer', + '&:hover': { boxShadow: '0 0 0 3px rgba(0,0,0,0.1)' }, + }} + /> + {label} + {desc} + + {getColor(borderColors, key)} + + + + ))} + + + {/* Border Examples */} + + + Border Examples + + + {borderSwatches.slice(0, 4).map(({ key, label }) => ( + + {label} Border + + ))} + + + + + {/* ICON COLORS */} + + Icon Colors + + Icon colors for different contexts and states + + + + {iconSwatches.map(({ key, label, desc }) => ( + + + handleCopy(getColor(iconColors, key))} + sx={{ + width: 60, + height: 60, + borderRadius: '8px', + backgroundColor: getColor(iconColors, key), + cursor: 'pointer', + border: '2px solid #ddd', + '&:hover': { boxShadow: '0 0 0 3px rgba(0,0,0,0.1)' }, + }} + /> + {label} + {desc} + + {getColor(iconColors, key)} + + + + ))} + + + {/* Icon Examples */} + + + Icon Examples + + + + + + + + + + + + {/* Snackbar */} + + + Copied: {copiedText} + + + + ); +} diff --git a/examples/next-12/components/Borders/index.jsx b/examples/next-12/components/Borders/index.jsx new file mode 100644 index 000000000..eefdbe4c6 --- /dev/null +++ b/examples/next-12/components/Borders/index.jsx @@ -0,0 +1,82 @@ +"use client"; + +import * as React from "react"; +import { + Button, + Dialog, + DialogTitle, + DialogContent, + DialogActions, + Box, + Typography, + Grid, + Tooltip, +} from "@mui/material"; +import { lightModePalette } from "@/pages/themes-explorer/palette"; + +export default function BorderDemo() { + const [open, setOpen] = React.useState(false); + + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + + const flattenColors = (obj, prefix = "lightMode") => { + let colors = []; + Object.keys(obj).forEach((key) => { + const value = obj[key]; + if (typeof value === "string") { + colors.push({ token: `${prefix}.${key}`, color: value }); + } else if (typeof value === "object") { + colors = colors.concat(flattenColors(value, `${prefix}.${key}`)); + } + }); + return colors; + }; + const allColors = flattenColors(lightModePalette.border); + return ( +
+ + + + Light Mode Border Interactive Palette + + + {allColors.map(({ token, color }) => ( + + + navigator.clipboard.writeText(color)} + > + + {token.split(".").pop()?.toUpperCase()} + + + + + ))} + + + + + + +
+ ); +} diff --git a/examples/next-12/components/DefaultModal/index.jsx b/examples/next-12/components/DefaultModal/index.jsx index ce37b6063..774cb8815 100644 --- a/examples/next-12/components/DefaultModal/index.jsx +++ b/examples/next-12/components/DefaultModal/index.jsx @@ -1,3 +1,4 @@ +import { lightModePalette } from '@/pages/themes-explorer/palette'; import { Button, Dialog, @@ -8,6 +9,7 @@ import { Typography } from '@layer5/sistent-components'; import { CloseIcon } from '@layer5/sistent-svg'; +import { Tooltip } from '@mui/material'; import React from 'react'; export default function DefaultModal() { @@ -25,7 +27,8 @@ export default function DefaultModal() { - + + Modal Title @@ -51,6 +54,7 @@ export default function DefaultModal() { + ); } diff --git a/examples/next-12/components/Footer/index.jsx b/examples/next-12/components/Footer/index.jsx new file mode 100644 index 000000000..524a32642 --- /dev/null +++ b/examples/next-12/components/Footer/index.jsx @@ -0,0 +1,63 @@ +"use client"; + +import * as React from "react"; +import { Container, Box, Typography } from "@mui/material"; +import { ThemeContext } from "@/lib/context/AppThemeContext"; +import { lightModePalette, darkModePalette } from "@/pages/themes-explorer/palette"; + +export default function Footer() { + const { mode } = React.useContext(ThemeContext); + + + const palette = mode === "dark" ? darkModePalette : lightModePalette; + + return ( + + + + + Design System Palette + + + Comprehensive color system with {mode} mode active + + + + + 9 Color Categories + + + + ); +} diff --git a/examples/next-12/components/Icon/index.jsx b/examples/next-12/components/Icon/index.jsx new file mode 100644 index 000000000..fb3a7a7a0 --- /dev/null +++ b/examples/next-12/components/Icon/index.jsx @@ -0,0 +1,109 @@ +"use client"; + +import * as React from "react"; +import { + Button, + Dialog, + DialogTitle, + DialogContent, + DialogActions, + Grid, + Tooltip, + IconButton, + Snackbar, + Alert, + Box, +} from "@mui/material"; +import InfoIcon from "@mui/icons-material/Info"; +import { lightModePalette } from "@/pages/themes-explorer/palette"; + +export default function IconColorDemo() { + const [open, setOpen] = React.useState(false); + const [copied, setCopied] = React.useState(""); + + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + + const handleCopy = (color) => { + navigator.clipboard.writeText(color); + setCopied(color); + }; + + const flattenColors = (obj ,prefix = "lightMode", seen = new Set()) => { + let colors = []; + Object.keys(obj).forEach((key) => { + const value = obj[key]; + if (typeof value === "string") { + const token = `${prefix}.${key}`; + if (!seen.has(token)) { + colors.push({ token, color: value }); + seen.add(token); + } + } else if (typeof value === "object") { + colors = colors.concat(flattenColors(value, `${prefix}.${key}`, seen)); + } + }); + return colors; + }; + + const iconColors = flattenColors(lightModePalette.icon); + const allColors = [...iconColors]; + + return ( +
+ + + + Light Mode Icon Palette + + + {allColors.map(({ token, color }) => ( + + + + handleCopy(color)} + sx={{ + color: color, + fontSize: 32, // bigger icon for easier clicking + "&:hover": { + opacity: 0.8, + }, + }} + > + + + + + + ))} + + + + + + + + setCopied("")} + anchorOrigin={{ vertical: "bottom", horizontal: "center" }} + > + + Copied {copied} to clipboard! + + +
+ ); +} diff --git a/examples/next-12/components/Interactive/index.jsx b/examples/next-12/components/Interactive/index.jsx new file mode 100644 index 000000000..2356e429e --- /dev/null +++ b/examples/next-12/components/Interactive/index.jsx @@ -0,0 +1,185 @@ +'use client'; + +import { ThemeContext } from '@/lib/context/AppThemeContext'; +import { darkModePalette, lightModePalette } from '@/pages/themes-explorer/palette'; +import { + Alert, + Box, + Button, + Container, + Snackbar, + Tooltip, + Typography, + Paper +} from '@mui/material'; +import { useContext } from 'react'; + +import * as React from 'react'; + +export default function Interactive() { + const {mode} = useContext(ThemeContext) + const surfaceColors = mode==="dark"?lightModePalette.interactive:darkModePalette.interactive; + + const [snackbarOpen, setSnackbarOpen] = React.useState(false); + const [copiedText, setCopiedText] = React.useState(''); + + const handleCopy = (value) => { + navigator.clipboard.writeText(value); + setCopiedText(value); + setSnackbarOpen(true); + }; + + const handleClose = (event, reason) => { + if (reason === 'clickaway') return; + setSnackbarOpen(false); + }; + + return ( + + + Interactive Tokens + + Colors for buttons, links, and interactive elements with all states + + + {/* Token Grid */} + + {Object.entries(surfaceColors).map(([name, value]) => { + const isGradient = typeof value === 'string' && value.includes('gradient'); + const displayValue = isGradient ? 'Gradient' : value; + + return ( + handleCopy(displayValue)} + > + + + + + + {name.charAt(0).toUpperCase() + name.slice(1)} + + + + {isGradient + ? 'Highlight surfaces' + : name === 'primary' + ? 'Default interactive' + : name === 'hover' + ? 'Hover state' + : name === 'pressed' + ? 'Pressed state' + : name === 'secondary' + ? 'Secondary elements' + : name === 'tertiary' + ? 'Tertiary elements' + : name === 'disabled' + ? 'Disabled state' + : ''} + + + + {displayValue} + + + ); + })} + + + {/* Interactive Demo Section */} + + Interactive Demo + + + {Object.entries(surfaceColors).map(([name, value]) => ( + + ))} + + + + + {/* Snackbar */} + + + Copied: {copiedText} + + + + ); +} diff --git a/examples/next-12/components/Menus/index.jsx b/examples/next-12/components/Menus/index.jsx new file mode 100644 index 000000000..96709ad5c --- /dev/null +++ b/examples/next-12/components/Menus/index.jsx @@ -0,0 +1,44 @@ +"use client"; + +import * as React from "react"; +import { Box, Button, Tooltip } from "@mui/material"; +import { lightModePalette } from "@/pages/themes-explorer/palette"; + +const navItems = ["Home", "About", "Services", "Contact"]; + +export default function NavigationMenu() { + const [activeIndex, setActiveIndex] = React.useState(0); + + return ( + + {navItems.map((item, index) => ( + + + + ))} + + ); +} diff --git a/examples/next-12/components/ModeToggleButton.jsx b/examples/next-12/components/ModeToggleButton.jsx index d1bfcc286..9a4cd4919 100644 --- a/examples/next-12/components/ModeToggleButton.jsx +++ b/examples/next-12/components/ModeToggleButton.jsx @@ -1,9 +1,11 @@ import { toggleTheme } from '@/lib/redux/theme/themeSlice'; import { IconButton } from '@mui/material'; -import { useDispatch, useSelector } from 'react-redux'; +import { useContext } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; import DarkModeIcon from '@mui/icons-material/DarkMode'; import LightModeIcon from '@mui/icons-material/LightMode'; +import { AppThemeContext, ThemeContext } from '@/lib/context/AppThemeContext'; function DynamicIcon({ mode }) { if (mode === 'dark') { @@ -14,15 +16,11 @@ function DynamicIcon({ mode }) { } function ModeToggleButton() { - const dispatch = useDispatch(); // Initialize the useDispatch function - - // Use useSelector to get the darkTheme state from your Redux store - const mode = useSelector((state) => (state.theme.darkTheme ? 'dark' : 'light')); - - const toggleMode = () => { - // Dispatch the toggleTheme action when the button is clicked - dispatch(toggleTheme()); - }; + const {setMode,mode} = useContext(ThemeContext) + const toggleMode= ()=>{ + setMode((prev)=>prev==="dark"?"light":"dark") + } + return ( diff --git a/examples/next-12/components/Navigation/index.jsx b/examples/next-12/components/Navigation/index.jsx new file mode 100644 index 000000000..3154a8b7d --- /dev/null +++ b/examples/next-12/components/Navigation/index.jsx @@ -0,0 +1,183 @@ +'use client'; + +import { darkModePalette, lightModePalette } from '@/pages/themes-explorer/palette'; +import { + Alert, + Box, + Container, + Snackbar, + Tooltip, + Typography, + Paper +} from '@mui/material'; +import * as React from 'react'; + +import { ThemeContext } from '@/lib/context/AppThemeContext'; +import { useContext } from 'react'; + +export default function Navigation() { + const{mode} = useContext(ThemeContext) + const navColors = mode==="dark"?lightModePalette.navigation:darkModePalette.navigation; + const [snackbarOpen, setSnackbarOpen] = React.useState(false); + const [copiedText, setCopiedText] = React.useState(''); + + const handleCopy = (value) => { + navigator.clipboard.writeText(value); + setCopiedText(value); + setSnackbarOpen(true); + }; + + const handleClose = (event, reason) => { + if (reason === 'clickaway') return; + setSnackbarOpen(false); + }; + + return ( + + + + Navigation Tokens + + + Colors for navigation bars, menu items, and navigation states + + + {/* Token Grid */} + + {Object.entries(navColors).map(([name, value]) => ( + handleCopy(value)} + > + + + + + + {name.charAt(0).toUpperCase() + name.slice(1)} + + + + {name === 'primary' + ? 'Main nav background' + : name === 'secondary' + ? 'Secondary nav bg' + : name === 'active' + ? 'Active nav item' + : name === 'hover' + ? 'Nav item hover' + : ''} + + + + {value} + + + ))} + + + {/* Navigation Demo */} + + Navigation Demo + + + + • Primary Navigation + + + + • Secondary Navigation + + + + + + {/* Snackbar */} + + + Copied: {copiedText} + + + + ); +} diff --git a/examples/next-12/components/Semantic/index.jsx b/examples/next-12/components/Semantic/index.jsx new file mode 100644 index 000000000..a7f7236ff --- /dev/null +++ b/examples/next-12/components/Semantic/index.jsx @@ -0,0 +1,124 @@ +'use client'; + +import { Box, Container, Typography, Paper, Snackbar, Alert, Grid } from '@mui/material'; +import React from 'react'; +import { useContext } from 'react'; +import { ThemeContext } from '@/lib/context/AppThemeContext'; +import { darkModePalette, lightModePalette } from '@/pages/themes-explorer/palette'; + +export default function SemanticColors() { + const {mode} = useContext(ThemeContext) + const semanticGroups = mode==="dark"?lightModePalette.background:darkModePalette.background; + + const [snackbarOpen, setSnackbarOpen] = React.useState(false); + const [copiedText, setCopiedText] = React.useState(''); + + const handleCopy = (value) => { + navigator.clipboard.writeText(value); + setCopiedText(value); + setSnackbarOpen(true); + }; + + const handleClose = () => setSnackbarOpen(false); + + // Descriptions for each group + const descriptions = { + brand: 'Primary brand color with all interaction states', + cta: 'High-impact CTA elements with interaction states', + info: 'Informational UI states', + success: 'Positive feedback states', + warning: 'Warning and caution states', + error: 'Error and critical states', + }; + + // Define the layout explicitly + const layout= [ + ['brand'], // first row full width + ['cta'], // second row full width + ['info', 'success'], // third row 2 columns + ['warning', 'error'], // fourth row 2 columns + ]; + + return ( + + {layout.map((row, rowIndex) => ( + + {row.map((groupName) => { + const states = semanticGroups[groupName]; + if (!states) return null; + + return ( + + + {/* Main heading */} + + {groupName.charAt(0).toUpperCase() + groupName.slice(1)} Colors + + + {/* Sub-description */} + + {descriptions[groupName]} + + + {/* Secondary heading */} + + {groupName.charAt(0).toUpperCase() + groupName.slice(1)} States + + + {/* Color chips */} + + {Object.entries(states).map(([state, value]) => ( + handleCopy(value)} + sx={{ + px: 2, + py: 1, + borderRadius: '6px', + background: value, + color: '#fff', + fontWeight: 600, + fontSize: '0.8rem', + cursor: 'pointer', + boxShadow: 1, + userSelect: 'none', + }} + > + {state.charAt(0).toUpperCase() + state.slice(1)} + + ))} + + + + ); + })} + + ))} + + {/* Snackbar */} + + + Copied: {copiedText} + + + + ); +} diff --git a/examples/next-12/components/Surface/index.jsx b/examples/next-12/components/Surface/index.jsx new file mode 100644 index 000000000..5333c9e6a --- /dev/null +++ b/examples/next-12/components/Surface/index.jsx @@ -0,0 +1,173 @@ +"use client"; + +import * as React from "react"; +import { Container, Box, Typography, Tooltip, Snackbar, Alert } from "@mui/material"; +import { useContext } from "react"; +import { lightModePalette, darkModePalette } from "@/pages/themes-explorer/palette"; +import { ThemeContext } from "@/lib/context/AppThemeContext"; + +export default function Surface() { + const { mode } = useContext(ThemeContext); + + // ✅ pick correct palette + const palette = mode === "dark" ? darkModePalette : lightModePalette; + const surfaceColors = palette.surface; + + const [snackbarOpen, setSnackbarOpen] = React.useState(false); + const [copiedText, setCopiedText] = React.useState(""); + + const handleCopy = (value: string) => { + navigator.clipboard.writeText(value); + setCopiedText(value); + setSnackbarOpen(true); + }; + + const handleClose = (_event?: React.SyntheticEvent | Event, reason?: string) => { + if (reason === "clickaway") return; + setSnackbarOpen(false); + }; + + // ✅ descriptions for tokens + const descriptions: Record = { + primary: "Main page background", + secondary: "Slightly darker background", + tertiary: "Even darker background", + elevated: "Floating elements", + overlay: "Modal backdrops", + inverse: "High contrast alt", + gradient: "Highlight surfaces", + }; + + return ( + + + {/* Title */} + + Surface Tokens + + + Background surfaces with proper contrast for text and interactive elements + + + {/* Token Grid */} + + {Object.entries(surfaceColors).map(([name, value]) => { + const isGradient = typeof value === "string" && value.includes("gradient"); + const displayValue = isGradient ? "Gradient" : value; + + return ( + handleCopy(displayValue)} + > + {/* Color preview box */} + + + + + {/* Token Name */} + + {name.charAt(0).toUpperCase() + name.slice(1)} + + + {/* Token Description */} + + {descriptions[name] || ""} + + + {/* Token Value (hash or Gradient) */} + + {displayValue} + + + ); + })} + + + + {/* Snackbar for copy feedback */} + + + Copied: {copiedText} + + + + ); +} diff --git a/examples/next-12/components/Tabs/index.jsx b/examples/next-12/components/Tabs/index.jsx new file mode 100644 index 000000000..321c457b1 --- /dev/null +++ b/examples/next-12/components/Tabs/index.jsx @@ -0,0 +1,62 @@ +import AddReactionOutlinedIcon from '@mui/icons-material/AddReactionOutlined'; +import BackHandOutlinedIcon from '@mui/icons-material/BackHandOutlined'; +import CropSquareOutlinedIcon from '@mui/icons-material/CropSquareOutlined'; +import FormatColorTextOutlinedIcon from '@mui/icons-material/FormatColorTextOutlined'; +import NavigationOutlinedIcon from '@mui/icons-material/NavigationOutlined'; +import RemoveRedEyeOutlinedIcon from '@mui/icons-material/RemoveRedEyeOutlined'; +import { Tab, Tabs } from '@mui/material'; +import { ThemeContext } from '@/lib/context/AppThemeContext'; +import { useContext } from 'react'; +import { lightModePalette, darkModePalette } from '@/pages/themes-explorer/palette'; + +export default function TabMenu({ value, setValue }) { + const { mode } = useContext(ThemeContext); + + // pick palette based on mode + const palette = mode === 'dark' ? darkModePalette : lightModePalette; + + const handleChange = (event, newValue) => { + setValue(newValue); + }; + + return ( + + {[ + { icon: , label: 'Surfaces' }, + { icon: , label: 'Interactive' }, + { icon: , label: 'Navigation' }, + { icon: , label: 'Semantic' }, + { icon: , label: 'Text' }, + { icon: , label: 'Borders & Icons' }, + ].map((tab, i) => ( + + ))} + + ); +} diff --git a/examples/next-12/components/Text/index.jsx b/examples/next-12/components/Text/index.jsx new file mode 100644 index 000000000..22cff7d69 --- /dev/null +++ b/examples/next-12/components/Text/index.jsx @@ -0,0 +1,146 @@ +'use client'; + +import { Box, Container, Typography, Paper, Snackbar, Alert } from '@mui/material'; +import React, { useState } from 'react'; +import { ThemeContext } from '@/lib/context/AppThemeContext'; +import { darkModePalette, lightModePalette } from '@/pages/themes-explorer/palette'; +import {useContext} from 'react' + +export default function TextColors() { + const {mode} = useContext(ThemeContext) + const textColors = mode==="dark"?lightModePalette.text:darkModePalette.text; + // State for snackbar feedback + const [copiedColor, setCopiedColor] = useState(''); + const [snackbarOpen, setSnackbarOpen] = useState(false); + + const handleCopy = (color) => { + navigator.clipboard.writeText(color); + setCopiedColor(color); + setSnackbarOpen(true); + }; + + return ( + + + + Text Colors + + + + Typography colors for different content hierarchy and semantic meaning + + + {/* Swatches grid */} + + {[ + { key: 'default', label: 'Primary text' }, + { key: 'secondary', label: 'Secondary text' }, + { key: 'tertiary', label: 'Tertiary text' }, + { key: 'disabled', label: 'Disabled text' }, + { key: 'inverse', label: 'Inverse text' }, + { key: 'brand', label: 'Brand text' }, + ].map(({ key, label }) => ( + handleCopy(textColors[key])} + sx={{ + width: 120, + p: 1.5, + textAlign: 'center', + borderRadius: '10px', + boxShadow: '0px 2px 8px rgba(0,0,0,0.12)', + cursor: 'pointer', + + + + // boxShadow: '0px 4px 12px rgba(0,0,0,0.18)', + + }} + > + + + {key.charAt(0).toUpperCase() + key.slice(1)} + + + {label} + + + {textColors[key]} + + + ))} + + + {/* Semantic & hierarchy section */} + + + + Semantic Text Colors + + Info text color + Success text color + Warning text color + Error text color + + + + + Text Hierarchy + + + Primary Heading + + Secondary Heading + + Tertiary body text + + Disabled text + + + + + {/* Snackbar for copy feedback */} + setSnackbarOpen(false)} + anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} + > + + Copied {copiedColor} to clipboard! + + + + ); +} diff --git a/examples/next-12/lib/context/AppThemeContext.jsx b/examples/next-12/lib/context/AppThemeContext.jsx new file mode 100644 index 000000000..6492bbc04 --- /dev/null +++ b/examples/next-12/lib/context/AppThemeContext.jsx @@ -0,0 +1,60 @@ +'use client'; +import { CacheProvider } from '@emotion/react'; +import { CssBaseline, ThemeProvider, createTheme } from '@mui/material'; +import { useRouter } from 'next/router'; +import { createContext, useMemo, useState } from 'react'; +import { darkModePalette, lightModePalette } from '../../pages/themes-explorer/palette'; +import createEmotionCache from '../../styles/createEmotionCache'; +import { darkTheme, lightTheme } from '../../styles/themes/theme'; + +const clientSideEmotionCache = createEmotionCache(); + +export const ThemeContext = createContext({ + mode: 'light', + setMode: () => {} +}); +export function AppThemeContext({ children, emotionCache = clientSideEmotionCache }) { + const router = useRouter(); + const [mode, setMode] = useState('light'); // light or dark + + const theme = useMemo( + () => + createTheme({ + palette: { + mode, + primary: { + main: + router.pathname === '/themes-explorer' + ? mode === 'light' + ? lightModePalette.surface.primary // just a color string + : darkModePalette.surface.primary + : mode === 'light' + ? lightTheme.palette.primary.main + : darkTheme.palette.primary.main + }, + + secondary: { + main: '#EE5351' + }, + background: { + ...(mode === 'light' ? lightTheme.palette.background : darkTheme.palette.background) + }, + text: { + ...(mode === 'light' ? lightTheme.palette.text : darkTheme.palette.text) + } + } + }), + [mode] + ); + + return ( + + + + + {children} + + + + ); +} diff --git a/examples/next-12/lib/providers/AppThemeProvider.jsx b/examples/next-12/lib/providers/AppThemeProvider.jsx deleted file mode 100644 index 63bd67467..000000000 --- a/examples/next-12/lib/providers/AppThemeProvider.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import createEmotionCache from '@/styles/createEmotionCache'; -import { darkTheme, lightTheme } from '@/styles/themes/theme'; -import { CacheProvider } from '@emotion/react'; -import { CssBaseline, ThemeProvider, createTheme } from '@mui/material'; -import { useMemo } from 'react'; -import { useSelector } from 'react-redux'; - -const clientSideEmotionCache = createEmotionCache(); - -export function AppThemeProvider({ children, emotionCache = clientSideEmotionCache }) { - // const dispatch = useDispatch(); - - const mode = useSelector((state) => (state.theme.darkTheme ? 'dark' : 'light')); - - const theme = useMemo( - () => - createTheme({ - palette: { - mode, - primary: { - ...(mode === 'light' ? lightTheme.palette.primary : darkTheme.palette.primary) - }, - secondary: { - main: '#EE5351' - }, - background: { - ...(mode === 'light' ? lightTheme.palette.background : darkTheme.palette.background) - }, - text: { - ...(mode === 'light' ? lightTheme.palette.text : darkTheme.palette.text) - } - } - }), - [mode] - ); - - return ( - - - - {children} - - - ); -} diff --git a/examples/next-12/lib/providers/ReduxProvider.jsx b/examples/next-12/lib/providers/ReduxProvider.jsx deleted file mode 100644 index 4c87ff88e..000000000 --- a/examples/next-12/lib/providers/ReduxProvider.jsx +++ /dev/null @@ -1,6 +0,0 @@ -import { Provider } from 'react-redux'; -import store from '../redux/store'; - -export function ReduxProvider({ children }) { - return {children}; -} diff --git a/examples/next-12/package-lock.json b/examples/next-12/package-lock.json index 0d27b10f0..f7595a5ee 100644 --- a/examples/next-12/package-lock.json +++ b/examples/next-12/package-lock.json @@ -16,13 +16,15 @@ "@mui/icons-material": "^5.14.16", "@mui/material": "^5.14.17", "@reduxjs/toolkit": "^1.9.7", + "lucide-react": "^0.540.0", "mui-datatables": "^4.3.0", - "next": "14", - "react": "17", - "react-dom": "17", + "next": "^12.3.7", + "react": "^17.0.2", + "react-dom": "^17.0.2", "react-redux": "^8.1.3" }, "devDependencies": { + "autoprefixer": "^10.4.21", "eslint": "^8" } }, @@ -770,15 +772,47 @@ } }, "node_modules/@next/env": { - "version": "14.2.30", - "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.30.tgz", - "integrity": "sha512-KBiBKrDY6kxTQWGzKjQB7QirL3PiiOkV7KW98leHFjtVRKtft76Ra5qSA/SL75xT44dp6hOcqiiJ6iievLOYug==", + "version": "12.3.7", + "resolved": "https://registry.npmjs.org/@next/env/-/env-12.3.7.tgz", + "integrity": "sha512-gCw4sTeHoNr0EUO+Nk9Ll21OzF3PnmM0GlHaKgsY2AWQSqQlMgECvB0YI4k21M9iGy+tQ5RMyXQuoIMpzhtxww==", "license": "MIT" }, + "node_modules/@next/swc-android-arm-eabi": { + "version": "12.3.4", + "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.4.tgz", + "integrity": "sha512-cM42Cw6V4Bz/2+j/xIzO8nK/Q3Ly+VSlZJTa1vHzsocJRYz8KT6MrreXaci2++SIZCF1rVRCDgAg5PpqRibdIA==", + "cpu": [ + "arm" + ], + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-android-arm64": { + "version": "12.3.4", + "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.3.4.tgz", + "integrity": "sha512-5jf0dTBjL+rabWjGj3eghpLUxCukRhBcEJgwLedewEA/LJk2HyqCvGIwj5rH+iwmq1llCWbOky2dO3pVljrapg==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@next/swc-darwin-arm64": { - "version": "14.2.30", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.30.tgz", - "integrity": "sha512-EAqfOTb3bTGh9+ewpO/jC59uACadRHM6TSA9DdxJB/6gxOpyV+zrbqeXiFTDy9uV6bmipFDkfpAskeaDcO+7/g==", + "version": "12.3.4", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.4.tgz", + "integrity": "sha512-DqsSTd3FRjQUR6ao0E1e2OlOcrF5br+uegcEGPVonKYJpcr0MJrtYmPxd4v5T6UCJZ+XzydF7eQo5wdGvSZAyA==", "cpu": [ "arm64" ], @@ -792,9 +826,9 @@ } }, "node_modules/@next/swc-darwin-x64": { - "version": "14.2.30", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.30.tgz", - "integrity": "sha512-TyO7Wz1IKE2kGv8dwQ0bmPL3s44EKVencOqwIY69myoS3rdpO1NPg5xPM5ymKu7nfX4oYJrpMxv8G9iqLsnL4A==", + "version": "12.3.4", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.4.tgz", + "integrity": "sha512-PPF7tbWD4k0dJ2EcUSnOsaOJ5rhT3rlEt/3LhZUGiYNL8KvoqczFrETlUx0cUYaXe11dRA3F80Hpt727QIwByQ==", "cpu": [ "x64" ], @@ -807,10 +841,42 @@ "node": ">= 10" } }, + "node_modules/@next/swc-freebsd-x64": { + "version": "12.3.4", + "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.4.tgz", + "integrity": "sha512-KM9JXRXi/U2PUM928z7l4tnfQ9u8bTco/jb939pdFUHqc28V43Ohd31MmZD1QzEK4aFlMRaIBQOWQZh4D/E5lQ==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm-gnueabihf": { + "version": "12.3.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.3.4.tgz", + "integrity": "sha512-3zqD3pO+z5CZyxtKDTnOJ2XgFFRUBciOox6EWkoZvJfc9zcidNAQxuwonUeNts6Xbm8Wtm5YGIRC0x+12YH7kw==", + "cpu": [ + "arm" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@next/swc-linux-arm64-gnu": { - "version": "14.2.30", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.30.tgz", - "integrity": "sha512-I5lg1fgPJ7I5dk6mr3qCH1hJYKJu1FsfKSiTKoYwcuUf53HWTrEkwmMI0t5ojFKeA6Vu+SfT2zVy5NS0QLXV4Q==", + "version": "12.3.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.4.tgz", + "integrity": "sha512-kiX0vgJGMZVv+oo1QuObaYulXNvdH/IINmvdZnVzMO/jic/B8EEIGlZ8Bgvw8LCjH3zNVPO3mGrdMvnEEPEhKA==", "cpu": [ "arm64" ], @@ -824,9 +890,9 @@ } }, "node_modules/@next/swc-linux-arm64-musl": { - "version": "14.2.30", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.30.tgz", - "integrity": "sha512-8GkNA+sLclQyxgzCDs2/2GSwBc92QLMrmYAmoP2xehe5MUKBLB2cgo34Yu242L1siSkwQkiV4YLdCnjwc/Micw==", + "version": "12.3.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.4.tgz", + "integrity": "sha512-EETZPa1juczrKLWk5okoW2hv7D7WvonU+Cf2CgsSoxgsYbUCZ1voOpL4JZTOb6IbKMDo6ja+SbY0vzXZBUMvkQ==", "cpu": [ "arm64" ], @@ -840,9 +906,9 @@ } }, "node_modules/@next/swc-linux-x64-gnu": { - "version": "14.2.30", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.30.tgz", - "integrity": "sha512-8Ly7okjssLuBoe8qaRCcjGtcMsv79hwzn/63wNeIkzJVFVX06h5S737XNr7DZwlsbTBDOyI6qbL2BJB5n6TV/w==", + "version": "12.3.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.4.tgz", + "integrity": "sha512-4csPbRbfZbuWOk3ATyWcvVFdD9/Rsdq5YHKvRuEni68OCLkfy4f+4I9OBpyK1SKJ00Cih16NJbHE+k+ljPPpag==", "cpu": [ "x64" ], @@ -856,9 +922,9 @@ } }, "node_modules/@next/swc-linux-x64-musl": { - "version": "14.2.30", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.30.tgz", - "integrity": "sha512-dBmV1lLNeX4mR7uI7KNVHsGQU+OgTG5RGFPi3tBJpsKPvOPtg9poyav/BYWrB3GPQL4dW5YGGgalwZ79WukbKQ==", + "version": "12.3.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.4.tgz", + "integrity": "sha512-YeBmI+63Ro75SUiL/QXEVXQ19T++58aI/IINOyhpsRL1LKdyfK/35iilraZEFz9bLQrwy1LYAR5lK200A9Gjbg==", "cpu": [ "x64" ], @@ -872,9 +938,9 @@ } }, "node_modules/@next/swc-win32-arm64-msvc": { - "version": "14.2.30", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.30.tgz", - "integrity": "sha512-6MMHi2Qc1Gkq+4YLXAgbYslE1f9zMGBikKMdmQRHXjkGPot1JY3n5/Qrbg40Uvbi8//wYnydPnyvNhI1DMUW1g==", + "version": "12.3.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.4.tgz", + "integrity": "sha512-Sd0qFUJv8Tj0PukAYbCCDbmXcMkbIuhnTeHm9m4ZGjCf6kt7E/RMs55Pd3R5ePjOkN7dJEuxYBehawTR/aPDSQ==", "cpu": [ "arm64" ], @@ -888,9 +954,9 @@ } }, "node_modules/@next/swc-win32-ia32-msvc": { - "version": "14.2.30", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.30.tgz", - "integrity": "sha512-pVZMnFok5qEX4RT59mK2hEVtJX+XFfak+/rjHpyFh7juiT52r177bfFKhnlafm0UOSldhXjj32b+LZIOdswGTg==", + "version": "12.3.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.4.tgz", + "integrity": "sha512-rt/vv/vg/ZGGkrkKcuJ0LyliRdbskQU+91bje+PgoYmxTZf/tYs6IfbmgudBJk6gH3QnjHWbkphDdRQrseRefQ==", "cpu": [ "ia32" ], @@ -904,9 +970,9 @@ } }, "node_modules/@next/swc-win32-x64-msvc": { - "version": "14.2.30", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.30.tgz", - "integrity": "sha512-4KCo8hMZXMjpTzs3HOqOGYYwAXymXIy7PEPAXNEcEOyKqkjiDlECumrWziy+JEF0Oi4ILHGxzgQ3YiMGG2t/Lg==", + "version": "12.3.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.4.tgz", + "integrity": "sha512-DQ20JEfTBZAgF8QCjYfJhv2/279M6onxFjdG/+5B0Cyj00/EdBxiWb2eGGFgQhrBbNv/lsvzFbbi0Ptf8Vw/bg==", "cpu": [ "x64" ], @@ -1009,19 +1075,12 @@ } } }, - "node_modules/@swc/counter": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz", - "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==", - "license": "Apache-2.0" - }, "node_modules/@swc/helpers": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz", - "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==", - "license": "Apache-2.0", + "version": "0.4.11", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.11.tgz", + "integrity": "sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==", + "license": "MIT", "dependencies": { - "@swc/counter": "^0.1.3", "tslib": "^2.4.0" } }, @@ -1173,6 +1232,44 @@ "dev": true, "license": "Python-2.0" }, + "node_modules/autoprefixer": { + "version": "10.4.21", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz", + "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/autoprefixer" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "browserslist": "^4.24.4", + "caniuse-lite": "^1.0.30001702", + "fraction.js": "^4.3.7", + "normalize-range": "^0.1.2", + "picocolors": "^1.1.1", + "postcss-value-parser": "^4.2.0" + }, + "bin": { + "autoprefixer": "bin/autoprefixer" + }, + "engines": { + "node": "^10 || ^12 || >=14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/babel-plugin-macros": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", @@ -1206,15 +1303,37 @@ "concat-map": "0.0.1" } }, - "node_modules/busboy": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", - "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==", + "node_modules/browserslist": { + "version": "4.25.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.3.tgz", + "integrity": "sha512-cDGv1kkDI4/0e5yON9yM5G/0A5u8sf5TnmdX5C9qHzI9PPu++sQ9zjm1k9NiOrf3riY4OkK0zSGqfvJyJsgCBQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", "dependencies": { - "streamsearch": "^1.1.0" + "caniuse-lite": "^1.0.30001735", + "electron-to-chromium": "^1.5.204", + "node-releases": "^2.0.19", + "update-browserslist-db": "^1.1.3" + }, + "bin": { + "browserslist": "cli.js" }, "engines": { - "node": ">=10.16.0" + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, "node_modules/callsites": { @@ -1227,9 +1346,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001699", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001699.tgz", - "integrity": "sha512-b+uH5BakXZ9Do9iK+CkDmctUSEqZl+SP056vc5usa0PL+ev5OHw003rZXcnjNDv3L8P5j6rwT6C0BPKSikW08w==", + "version": "1.0.30001735", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001735.tgz", + "integrity": "sha512-EV/laoX7Wq2J9TQlyIXRxTJqIw4sxfXS4OYgudGxBYRuTv0q7AM6yMEpU/Vo1I94thg9U6EZ2NfZx9GJq83u7w==", "funding": [ { "type": "opencollective", @@ -1263,12 +1382,6 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, - "node_modules/client-only": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", - "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==", - "license": "MIT" - }, "node_modules/clsx": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", @@ -1417,6 +1530,13 @@ "csstype": "^3.0.2" } }, + "node_modules/electron-to-chromium": { + "version": "1.5.207", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.207.tgz", + "integrity": "sha512-mryFrrL/GXDTmAtIVMVf+eIXM09BBPlO5IQ7lUyKmK8d+A4VpRGG+M3ofoVef6qyF8s60rJei8ymlJxjUA8Faw==", + "dev": true, + "license": "ISC" + }, "node_modules/error-ex": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", @@ -1426,6 +1546,16 @@ "is-arrayish": "^0.2.1" } }, + "node_modules/escalade": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/escape-string-regexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", @@ -1694,6 +1824,20 @@ "dev": true, "license": "ISC" }, + "node_modules/fraction.js": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", + "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", + "dev": true, + "license": "MIT", + "engines": { + "node": "*" + }, + "funding": { + "type": "patreon", + "url": "https://github.com/sponsors/rawify" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -1754,12 +1898,6 @@ "node": ">=4" } }, - "node_modules/graceful-fs": { - "version": "4.2.11", - "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", - "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", - "license": "ISC" - }, "node_modules/graphemer": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", @@ -2108,6 +2246,15 @@ "loose-envify": "cli.js" } }, + "node_modules/lucide-react": { + "version": "0.540.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.540.0.tgz", + "integrity": "sha512-armkCAqQvO62EIX4Hq7hqX/q11WSZu0Jd23cnnqx0/49yIxGXyL/zyZfBxNN9YDx0ensPTb4L+DjTh3yQXUxtQ==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -2195,48 +2342,51 @@ "license": "MIT" }, "node_modules/next": { - "version": "14.2.30", - "resolved": "https://registry.npmjs.org/next/-/next-14.2.30.tgz", - "integrity": "sha512-+COdu6HQrHHFQ1S/8BBsCag61jZacmvbuL2avHvQFbWa2Ox7bE+d8FyNgxRLjXQ5wtPyQwEmk85js/AuaG2Sbg==", + "version": "12.3.7", + "resolved": "https://registry.npmjs.org/next/-/next-12.3.7.tgz", + "integrity": "sha512-3PDn+u77s5WpbkUrslBP6SKLMeUj9cSx251LOt+yP9fgnqXV/ydny81xQsclz9R6RzCLONMCtwK2RvDdLa/mJQ==", "license": "MIT", "dependencies": { - "@next/env": "14.2.30", - "@swc/helpers": "0.5.5", - "busboy": "1.6.0", - "caniuse-lite": "^1.0.30001579", - "graceful-fs": "^4.2.11", - "postcss": "8.4.31", - "styled-jsx": "5.1.1" + "@next/env": "12.3.7", + "@swc/helpers": "0.4.11", + "caniuse-lite": "^1.0.30001406", + "postcss": "8.4.14", + "styled-jsx": "5.0.7", + "use-sync-external-store": "1.2.0" }, "bin": { "next": "dist/bin/next" }, "engines": { - "node": ">=18.17.0" + "node": ">=12.22.0" }, "optionalDependencies": { - "@next/swc-darwin-arm64": "14.2.30", - "@next/swc-darwin-x64": "14.2.30", - "@next/swc-linux-arm64-gnu": "14.2.30", - "@next/swc-linux-arm64-musl": "14.2.30", - "@next/swc-linux-x64-gnu": "14.2.30", - "@next/swc-linux-x64-musl": "14.2.30", - "@next/swc-win32-arm64-msvc": "14.2.30", - "@next/swc-win32-ia32-msvc": "14.2.30", - "@next/swc-win32-x64-msvc": "14.2.30" + "@next/swc-android-arm-eabi": "12.3.4", + "@next/swc-android-arm64": "12.3.4", + "@next/swc-darwin-arm64": "12.3.4", + "@next/swc-darwin-x64": "12.3.4", + "@next/swc-freebsd-x64": "12.3.4", + "@next/swc-linux-arm-gnueabihf": "12.3.4", + "@next/swc-linux-arm64-gnu": "12.3.4", + "@next/swc-linux-arm64-musl": "12.3.4", + "@next/swc-linux-x64-gnu": "12.3.4", + "@next/swc-linux-x64-musl": "12.3.4", + "@next/swc-win32-arm64-msvc": "12.3.4", + "@next/swc-win32-ia32-msvc": "12.3.4", + "@next/swc-win32-x64-msvc": "12.3.4" }, "peerDependencies": { - "@opentelemetry/api": "^1.1.0", - "@playwright/test": "^1.41.2", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "fibers": ">= 3.1.0", + "node-sass": "^6.0.0 || ^7.0.0", + "react": "^17.0.2 || ^18.0.0-0", + "react-dom": "^17.0.2 || ^18.0.0-0", "sass": "^1.3.0" }, "peerDependenciesMeta": { - "@opentelemetry/api": { + "fibers": { "optional": true }, - "@playwright/test": { + "node-sass": { "optional": true }, "sass": { @@ -2244,6 +2394,47 @@ } } }, + "node_modules/next/node_modules/postcss": { + "version": "8.4.14", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz", + "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.4", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/node-releases": { + "version": "2.0.19", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz", + "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==", + "dev": true, + "license": "MIT" + }, + "node_modules/normalize-range": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", + "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -2401,9 +2592,10 @@ "license": "ISC" }, "node_modules/postcss": { - "version": "8.4.31", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", - "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", + "version": "8.5.6", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", + "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", + "dev": true, "funding": [ { "type": "opencollective", @@ -2419,15 +2611,23 @@ } ], "license": "MIT", + "peer": true, "dependencies": { - "nanoid": "^3.3.6", - "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" + "nanoid": "^3.3.11", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" }, "engines": { "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true, + "license": "MIT" + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -2867,14 +3067,6 @@ "node": ">=0.10.0" } }, - "node_modules/streamsearch": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz", - "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==", - "engines": { - "node": ">=10.0.0" - } - }, "node_modules/strip-ansi": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", @@ -2902,13 +3094,10 @@ } }, "node_modules/styled-jsx": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz", - "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==", + "version": "5.0.7", + "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.7.tgz", + "integrity": "sha512-b3sUzamS086YLRuvnaDigdAewz1/EFYlHpYBP5mZovKEdQQOIIYq8lApylub3HHZ6xFjV051kkGU7cudJmrXEA==", "license": "MIT", - "dependencies": { - "client-only": "0.0.1" - }, "engines": { "node": ">= 12.0.0" }, @@ -3015,6 +3204,37 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/update-browserslist-db": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz", + "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "escalade": "^3.2.0", + "picocolors": "^1.1.1" + }, + "bin": { + "update-browserslist-db": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", diff --git a/examples/next-12/package.json b/examples/next-12/package.json index a148be98a..209b8c322 100644 --- a/examples/next-12/package.json +++ b/examples/next-12/package.json @@ -17,13 +17,15 @@ "@mui/icons-material": "^5.14.16", "@mui/material": "^5.14.17", "@reduxjs/toolkit": "^1.9.7", + "lucide-react": "^0.540.0", "mui-datatables": "^4.3.0", - "next": "14", - "react": "17", - "react-dom": "17", + "next": "^12.3.7", + "react": "^17.0.2", + "react-dom": "^17.0.2", "react-redux": "^8.1.3" }, "devDependencies": { + "autoprefixer": "^10.4.21", "eslint": "^8" }, "installConfig": { diff --git a/examples/next-12/pages/_app.js b/examples/next-12/pages/_app.js index 68ae8c08b..ccb6d2603 100644 --- a/examples/next-12/pages/_app.js +++ b/examples/next-12/pages/_app.js @@ -1,12 +1,11 @@ -import { AppThemeProvider } from '@/lib/providers/AppThemeProvider'; -import { ReduxProvider } from '@/lib/providers/ReduxProvider'; +import { AppThemeContext } from '@/lib/context/AppThemeContext'; export default function App({ Component, pageProps }) { return ( - - + + - - + + ); } diff --git a/examples/next-12/pages/themes-explorer/colors/colors.ts b/examples/next-12/pages/themes-explorer/colors/colors.ts new file mode 100644 index 000000000..e94f3333c --- /dev/null +++ b/examples/next-12/pages/themes-explorer/colors/colors.ts @@ -0,0 +1,398 @@ +import { alpha } from '@mui/material'; + +/** + * Define the base common colors to derive from + */ +export const KEPPEL = '#00B39F'; + + +export const DARK_KEPPEL = '#00A18F'; +export const CARIBBEAN_GREEN = '#00D3A9'; +export const TEAL_BLUE = '#477E96'; +export const DARK_TEAL_BLUE = '#3B687B'; +export const CHARCOAL = '#3C494F'; +export const BLACK = '#000000'; +export const MIDNIGHT_BLACK = '#111111'; +export const ALABASTER_WHITE = '#FAFAFA'; +export const WHITE = '#FFFFFF'; +export const ONYX_BLACK = '#1D1817'; +export const SLATE_BLUE = '#3C494F'; +export const TRANSPARENT_WHITE = '#ffffff66'; +export const SILVER_GRAY = '#E6E6E6'; +export const DARK_SHADE_GRAY = '#222222'; +export const CHINESE_SILVER = '#CCCCCC'; // same as lightGray +export const SAFFRON = '#EBC017'; +export const GRAY = '#696969'; +export const GRAY97 = '#f7f7f7'; +export const DARK_SLATE_GRAY = '#294957'; +export const LIGHT_GRAY = '#d3d3d3'; // same as tableBorder +export const STEEL_GRAY = '#525252'; +export const ALICE_BLUE = '#EBEFF1'; +export const LIMED_SPRUCE = '#3C494F'; +export const WHITESMOKE = '#F5F5F5'; +export const PRIMARY_COLOR = '#647881'; +export const DARK_PRIMARY_COLOR = '#51636B'; +export const SLATE_GRAY = '#7a848e'; +export const DARK_JUNGLE_GREEN = '#1E2117'; +export const CASPER = '#b1b6b8'; +export const EERIE_BLACK = '#b1b6b8'; +export const PATTERNS_BLUE = '#D9E0E2'; +export const GREEN = 'green'; +export const DARK_TEAL = '#455a64'; +export const LIGHT_TEAL = '#607d8b'; +export const CULTURED = '#F6F8F8'; +export const ANAKIWA = '#9EFFEC'; +export const NOT_FOUND = '#666666'; +export const YELLOW_SEA = '#F0A303'; +export const PINE_GREEN = '#008071'; +export const DARK_BLUE_GRAY = '#263238'; +export const BUTTON_MODAL = '#396679'; +export const BUTTON_MODAL_DARK = '#202020'; +export const SLIGHT_BLUE = '#548194'; +export const SLIGHT_BLACK_2 = '#23365f'; +export const SNOW_WHITE = '#FBFBFB'; +export const MEDIUM_GREY = '#DDDDDD'; +export const common = { + black: BLACK, + white: WHITE +}; + +export const keppel = { + 70: '#daf3eb', + 60: '#93E6D1', + 50: '#41CCB3', + 40: '#00B39F', + + 30: '#007763', + 20: '#006661', + 10: '#00403f' + +}; + +export const carribean = { + 70: '#E6FFF6', + 60: '#A3FFE0', + 50: '#78FAD3', + 40: '#00D3A9', + 30: '#00AD90', + 20: '#006157', + 10: '#003B37' +}; + +export const saffron = { + 70: '#FFFEE6', + 60: '#fffbbd', + 50: '#ffeb6b', + 40: '#ebc017', + 30: '#c4990a', + 20: '#785400', + 10: '#523600' + +}; + +/** + * Grayscale Colors + */ +export const charcoal = { + + 110: '#525252', + 100: '#FDFDFD', + 90: '#EAEDEE', + 80: '#D2D8DA', + 70: '#B1B9BC', + 60: '#8C999E', + 50: '#647176', + 40: '#3C494F', + 30: '#28353A', + 20: '#142126', + + 10: '#000D12' + +}; + +export const gray = { + 10: '#1A1A1A', + 20: '#212121', + 30: '#303030' +}; + +export const accentGrey = { + 100: '#F6F8F8', + 90: '#E8EFF3', + 80: '#C9DBE3', + 70: '#ABBDC5', + 60: '#8D9FA7', + 50: '#6F8189', + 40: '#51636B', + 30: '#3D4F57', + 20: '#293B43', + 10: '#15272F' +}; + +/** + * Function Colors + */ +export const blue = { + 70: '#F0FBFF', + 60: '#9EDDFF', + 50: '#75CAFF', + 40: '#2196F3', + 30: '#1272CC', + 20: '#0754A6', + 10: '#003980' + +}; + +export const green = { + 70: '#EFFCED', + 60: '#B2E3AF', + 50: '#5BC95B', + 40: '#36BC3B', + 30: '#15701E', + 20: '#0A4A13', + 10: '#05340A' +}; + +export const yellow = { + 70: '#FFFCE6', + 60: '#FFE57D', + 50: '#FFC72B', + 40: '#FFB302', + 30: '#D99100', + 20: '#8C5400', + 10: '#663A00' +}; + +export const red = { + 70: '#FFF0F0', + 60: '#FFB3B9', + 50: '#FF6179', + 40: '#ff385c', + 30: '#B3153D', + 20: '#8C0a2F', + 10: '#660624' +}; + +export const redOrange = { + 70: '#E8BEB3', + 60: '#E1A999', + 50: '#D99380', + 40: '#D17D66', + 30: '#CA684D', + 20: '#C25233', + 10: '#BB3D1A' +}; + +export const defaultPalette = { + keppel: ['#DAF3EB', '#93E6D1', '#41CCB3', '#00B39F', '#007763', '#006661', '#00403F'] +}; + +type BackgroundColor = { + [key in + | 'default' + | 'secondary' + | 'tertiary' + | 'hover' + | 'brand-default' + | 'info-default' + | 'success-default' + | 'warning-default' + | 'error-default']: string; +}; + +export const background: BackgroundColor = { + default: charcoal[100], + secondary: accentGrey[90], + tertiary: accentGrey[80], + hover: charcoal[90], + 'brand-default': accentGrey[40], + 'info-default': blue[30], + 'success-default': green[30], + 'warning-default': yellow[30], + 'error-default': red[30] +}; + +interface TextColor { + default: string; + secondary: string; + tertiary: string; + inverse: string; + brand: string; + info: string; + success: string; + warning: string; + error: string; +} + +export const text: TextColor = { + default: charcoal[10], + secondary: charcoal[90], + tertiary: charcoal[50], + inverse: charcoal[100], + brand: accentGrey[40], + info: blue[30], + success: green[30], + warning: yellow[30], + error: red[30] +}; + +interface BorderColor { + default: string; + strong: string; + brand: string; +} + +export const border: BorderColor = { + default: charcoal[90], + strong: charcoal[50], + brand: accentGrey[40] +}; + +/** + * Use the colors below that provides the action that you want to use + */ +export const primaryColor = { + main: PRIMARY_COLOR, + dark: DARK_PRIMARY_COLOR +}; + +export const patternsBlue = { + main: PATTERNS_BLUE +}; + +export const cultured = { + main: CULTURED +}; + +export const darkTeal = { + main: DARK_TEAL, + dark: LIGHT_TEAL +}; + +export const actionIcon = { + main: darkTeal.main, + hover: darkTeal.dark +}; + +export const tabMenu = { + main: darkTeal.main, + hover: darkTeal.dark +}; + +export const darkSlateGray = { + main: DARK_SLATE_GRAY, + dark: alpha(DARK_SLATE_GRAY, 0.65) +}; + +export const eerieBlack = { + main: EERIE_BLACK, + light: alpha(EERIE_BLACK, 0.8), + lighter: alpha(EERIE_BLACK, 0.6) +}; + +export const casper = { + main: CASPER, + light: alpha(CASPER, 0.8), + lighter: alpha(CASPER, 0.6) +}; + +export const slateGray = { + main: SLATE_GRAY, + light: alpha(SLATE_GRAY, 0.8) +}; + +export const white = { + main: WHITE, + light: alpha(WHITE, 0.8), + lighter: alpha(WHITE, 0.6) +}; + +export const black = { + main: BLACK, + light: alpha(BLACK, 0.8), + lighter: alpha(BLACK, 0.6), + dark: alpha(BLACK, 0.2) +}; + +export const jungleGreen = { + main: DARK_JUNGLE_GREEN, + light: alpha(DARK_JUNGLE_GREEN, 0.8), + lighter: alpha(DARK_JUNGLE_GREEN, 0.6) +}; + +export const buttonDisabled = { + main: '#b0bec5' +}; + +export const tableBackgroundHover = { + main: '#ADD8E6' +}; + +export const DELETE = '#8F1F00'; +export const HOVER_DELETE = '#b32700'; + +export const redDelete = { + main: DELETE, + light: HOVER_DELETE +}; + +export const buttonDelete = { + main: redDelete.main, + hover: redDelete.light +}; + +export const darkModalGradient = { + header: `linear-gradient(90deg, ${charcoal[30]} 0%, ${accentGrey[30]} 100%)`, + fotter: `linear-gradient(90deg, ${accentGrey[30]} 0%, ${charcoal[30]} 100%)` +}; + +export const lightModalGradient = { + header: `linear-gradient(90deg, ${TEAL_BLUE} 0%, ${DARK_TEAL_BLUE} 100%)`, + fotter: `linear-gradient(90deg, ${DARK_TEAL_BLUE} 0%, ${TEAL_BLUE} 100%)` +}; +/** + * Notification Colors + */ +export const notificationColors = { + info: { + main: '#2196F3' + }, + error: { + main: '#F91313', + dark: '#B32700' + }, + warning: { + main: '#F0A303', + light: '#E75225' + }, + success: { + main: '#206D24' + } +}; + +export const CONNECTED = KEPPEL; +export const REGISTERED = TEAL_BLUE; +export const DISCOVERED = notificationColors.info.main; +export const IGNORED = primaryColor.dark; +export const DELETED = redDelete.main; +export const MAINTAINENCE = notificationColors.warning.main; +export const DISCONNECTED = notificationColors.warning.light; + +export const connected = { + main: CONNECTED +}; + +export const anakiwa = { + main: ANAKIWA +}; + +/** + * Social media or equivalent icons colors + */ +export const socialIcons = { + slack: '#4A154B', + twitter: '#1da1f2', + github: '#24292e', + youtube: '#ff0000', + docker: '#2496ed' +}; diff --git a/examples/next-12/pages/themes-explorer/colors/index.ts b/examples/next-12/pages/themes-explorer/colors/index.ts new file mode 100644 index 000000000..3d1a19607 --- /dev/null +++ b/examples/next-12/pages/themes-explorer/colors/index.ts @@ -0,0 +1,76 @@ +export { + ALABASTER_WHITE, + ALICE_BLUE, + ANAKIWA, + BLACK, + CARIBBEAN_GREEN, + CASPER, + CHARCOAL, + CHINESE_SILVER, + CONNECTED, + CULTURED, + DARK_BLUE_GRAY, + DARK_PRIMARY_COLOR, + DARK_SHADE_GRAY, + DARK_SLATE_GRAY, + DARK_TEAL, + DELETED, + DISCONNECTED, + DISCOVERED, + EERIE_BLACK, + GRAY, + GRAY97, + GREEN, + IGNORED, + KEPPEL, + LIGHT_GRAY, + LIGHT_TEAL, + LIMED_SPRUCE, + MAINTAINENCE, + MIDNIGHT_BLACK, + NOT_FOUND, + ONYX_BLACK, + PATTERNS_BLUE, + PRIMARY_COLOR, + REGISTERED, + SAFFRON, + SILVER_GRAY, + SLATE_BLUE, + TEAL_BLUE, + TRANSPARENT_WHITE, + WHITE, + WHITESMOKE, + YELLOW_SEA, + accentGrey, + actionIcon, + anakiwa, + black, + blue, + buttonDelete, + buttonDisabled, + carribean, + casper, + charcoal, + common, + connected, + cultured, + darkSlateGray, + darkTeal, + eerieBlack, + gray, + green, + jungleGreen, + keppel, + notificationColors, + patternsBlue, + primaryColor, + red, + redDelete, + saffron, + slateGray, + socialIcons, + tabMenu, + tableBackgroundHover, + white, + yellow +} from './colors'; diff --git a/examples/next-12/pages/themes-explorer/index.jsx b/examples/next-12/pages/themes-explorer/index.jsx new file mode 100644 index 000000000..7b9aded3d --- /dev/null +++ b/examples/next-12/pages/themes-explorer/index.jsx @@ -0,0 +1,44 @@ +import React from 'react'; + +import ColorsExplorer from '@/components/BorderAndIcons'; +import Footer from '@/components/Footer'; +import Interactive from '@/components/Interactive'; +import Navigation from '@/components/Navigation'; +import SemanticColors from '@/components/Semantic'; +import Surface from '@/components/Surface'; +import TabMenu from '@/components/Tabs'; +import TextColors from '@/components/Text'; +import { ColorLens } from '@mui/icons-material'; +import { Box, Typography } from '@mui/material'; +import ModeToggleButton from '@/components/ModeToggleButton'; + +export default function ThemeFunction() { + const [value, setValue] = React.useState(0); + + return ( + + + + + + + Design System Palette + + + + Comprehensive color system with surface navigation and semantic tokens + + + + {value === 0 && } + {value === 1 && } + {value === 2 && } + {value === 3 && } + {value === 4 && } + {value === 5 && } + +
+ + + ); +} diff --git a/examples/next-12/pages/themes-explorer/palette.ts b/examples/next-12/pages/themes-explorer/palette.ts new file mode 100644 index 000000000..24323e459 --- /dev/null +++ b/examples/next-12/pages/themes-explorer/palette.ts @@ -0,0 +1,577 @@ +import { PaletteOptions, alpha } from '@mui/material'; +import * as Colors from './colors'; + +declare module '@mui/material/styles' { + // Defines the interaction color options used in the palette. + interface Interactiveness { + default: string; + hover: string; + disabled?: string; + pressed: string; + secondary: string; + tertiary: string; + } + // Defines the extended background color options used in the palette. + interface TypeBackground { + secondary?: string; + supplementary?: string; + graphics?: { + default: string; + }; + tabs?: string; + elevatedComponents?: string; + card?: string; + tertiary?: string; + hover?: string; + blur?: { + heavy: string; + light: string; + }; + //additional color palette {neutral} + neutral?: { + default: string; + hover: string; + pressed: string; + }; + constant?: { + disabled: string; + white: string; + table: string; + }; + inverse?: string; + brand?: Interactiveness; + cta?: Interactiveness; + info?: Interactiveness; + success?: Interactiveness; + warning?: Interactiveness; + error?: Interactiveness; + code?: string; + surfaces?: string; + + appNavigationBar?: string; + secondaryAppNavigationBar?: string; + } + + // Defines the extended text color options used in the palette. + interface TypeText { + default?: string; + secondary: string; + tertiary?: string; + disabled: string; + inverse?: string; + brand?: string; + info?: string; + success?: string; + warning?: string; + error?: string; + neutral?: { + default: string; + alt: string; + }; + constant?: { + white: string; + disabled: string; + }; + } + + // Defines the color options for the palette + interface PaletteColor { + secondary?: string; + supplementary?: string; + blur?: { + heavy: string; + light: string; + }; + neutral?: { + default: string; + hover: string; + pressed: string; + alt: string; + }; + constant?: { + white: string; + disabled: string; + table: string; + }; + inverse?: string; + brand?: Interactiveness; + cta?: Interactiveness; + info?: Interactiveness; + success?: Interactiveness; + warning?: Interactiveness; + error?: Interactiveness; + code?: string; + strong?: string; + normal?: string; + disabled?: string; + surfaces?: string; + } + + // Defines the simple palette color options. + interface SimplePaletteColorOptions { + secondary?: string; + supplementary?: string; + blur?: { + heavy: string; + light: string; + }; + neutral?: { + default: string; + hover: string; + pressed: string; + alt: string; + }; + constant?: { + white: string; + disabled: string; + table: string; + }; + inverse?: string; + brand?: Interactiveness; + cta?: Interactiveness; + info?: Interactiveness; + success?: Interactiveness; + warning?: Interactiveness; + error?: Interactiveness; + code?: string; + strong?: string; + normal?: string; + disabled?: string; + surfaces?: string; + } + + /* Defines the palette containing border and icon color options. + To define any additional custom color options, you can extend the interface here. + */ + interface Palette { + surface: SurfaceTokens; + interactive: InteractiveTokens; + navigation: NavigationTokens; + border: { + default: string; + strong: string; + brand: string; + normal: string; + neutral?: { + default: string; + alt: string; + }; + }; + icon: { + default: string; + secondary: string; + brand: string; + inverse: string; + weather: string; + disabled: string; + neutral?: { + default: string; + alt: string; + }; + }; + } + + // surface tokens need to have enough contrast + // with text and interactive elements + type SurfaceTokens = { + + /** main page background, content containers (pure bg color) */ + primary: string; + + /** secondary surfaces (slightly darker bg) */ + secondary: string; + + /** tertiary surfaces (even darker bg) */ + tertiary: string; + + /** floating elements with depth (bg + shadow) */ + elevated: string; + + /** modal backdrops (semi-transparent bg) */ + overlay: string; + + /** highlight surfaces (eg. modal headers , tabs, ) */ + tint: string; + + /** high contrast alternative (fg as bg) */ + inverse: string; + } + + type InteractiveTokens = { + /** default interactive elements (primary color) */ + primary: string; + + /** hover state for interactive elements (primary hover tint) */ + hover: string; + + /** disabled state for interactive elements (primary disabled tint) */ + disabled?: string; + + /** pressed state for interactive elements (primary pressed tint) */ + pressed: string; + + /** secondary interactive elements (secondary color) */ + secondary: string; + + /** tertiary interactive elements (tertiary color) */ + tertiary: string; + }; + +type NavigationTokens = { + /** main navigation bar background */ + primary: string; + + /** secondary navigation bar background */ + secondary: string; + + /** active navigation item background */ + active: string; + + /** hover state for navigation items */ + hover: string; + }; + + // Defines the options available for the palette. + interface PaletteOptions { + + surface: SurfaceTokens; + interactive: InteractiveTokens; + navigation: NavigationTokens; + + border: { + default: string; + strong: string; + brand: string; + normal: string; + neutral?: { + default: string; + alt: string; + }; + }; + + icon: { + default: string; + dualTone?: string; // For icons with two colors + dualToneInverse?: string; // For icons with two colors in inverse mode (eg on primary colored bg) + secondary: string; + brand: string; + inverse: string; + weather: string; + disabled: string; + neutral?: { + default: string; + alt: string; + }; + }; + } +} + +export type ThemePalette = PaletteOptions + + + +export const lightModePalette: PaletteOptions = { + + surface: { + primary: Colors.charcoal[100], + secondary: Colors.charcoal[90], + tertiary: Colors.charcoal[80], + elevated: Colors.WHITE, + overlay: alpha(Colors.charcoal[90], 0.8), + inverse: Colors.charcoal[10], + tint: `linear-gradient(90deg, ${Colors.TEAL_BLUE} 0%, ${Colors.DARK_TEAL} 100%)` + } , + + interactive: { + primary: Colors.KEPPEL, + hover: Colors.keppel[50], + disabled: Colors.charcoal[90], + pressed: Colors.keppel[60], + secondary: Colors.keppel[40], + tertiary: Colors.keppel[70] + }, + + navigation: { + primary: "#252e31", + secondary: "#294957", + active: Colors.KEPPEL, + hover: Colors.keppel[50] + }, + + primary: { + main: Colors.KEPPEL + }, + secondary: { + main: Colors.charcoal[40] + }, + background: { + default: Colors.charcoal[100], + secondary: Colors.accentGrey[90], + tertiary: Colors.accentGrey[80], + tabs: Colors.accentGrey[100], // TODO: Make this name or token to more genric + card: Colors.charcoal[100], + elevatedComponents: Colors.WHITE, + hover: Colors.charcoal[90], + supplementary: Colors.accentGrey[40], + blur: { + heavy: alpha(Colors.charcoal[90], 0.8), + light: alpha(Colors.charcoal[90], 0.5) + }, + neutral: { + default: Colors.charcoal[40], + hover: Colors.charcoal[30], + pressed: Colors.charcoal[20] + }, + inverse: Colors.charcoal[10], + brand: { + default: Colors.keppel[40], + hover: Colors.keppel[50], + disabled: Colors.charcoal[90], + pressed: Colors.keppel[60], + secondary: Colors.keppel[50], + tertiary: Colors.keppel[70] + }, + graphics: { + default: Colors.carribean[30] + }, + cta: { + default: Colors.saffron[40], + hover: Colors.saffron[50], + pressed: Colors.saffron[60], + secondary: Colors.saffron[60], + tertiary: Colors.saffron[70] + }, + info: { + default: Colors.blue[40], + hover: Colors.blue[20], + pressed: Colors.blue[10], + secondary: Colors.blue[60], + tertiary: Colors.blue[70] + }, + success: { + default: Colors.KEPPEL, + hover: Colors.green[20], + pressed: Colors.green[10], + secondary: Colors.green[60], + tertiary: Colors.green[70] + }, + warning: { + default: Colors.yellow[30], + hover: Colors.yellow[20], + pressed: Colors.yellow[10], + secondary: Colors.yellow[60], + tertiary: Colors.yellow[70] + }, + error: { + default: Colors.red[30], + hover: Colors.red[20], + pressed: Colors.red[10], + secondary: Colors.red[60], + tertiary: Colors.red[70] + }, + code: Colors.charcoal[90], + + constant: { + white: Colors.accentGrey[100], + disabled: Colors.charcoal[70], + table: Colors.charcoal[100] + }, + surfaces: Colors.accentGrey[100] + }, + text: { + default: Colors.charcoal[10], + secondary: Colors.charcoal[40], + tertiary: Colors.charcoal[50], + disabled: Colors.charcoal[70], + inverse: Colors.charcoal[100], + brand: Colors.keppel[40], + info: Colors.blue[40], + success: Colors.green[30], + warning: Colors.yellow[30], + error: Colors.red[30], + neutral: { + default: Colors.charcoal[40], + alt: Colors.charcoal[40] + }, + constant: { + white: Colors.charcoal[100], + disabled: Colors.charcoal[50] + } + }, + border: { + default: Colors.charcoal[90], + strong: Colors.charcoal[30], + brand: Colors.keppel[40], + normal: Colors.charcoal[60], + neutral: { + default: Colors.charcoal[40], + alt: Colors.charcoal[40] + } + }, + icon: { + default: Colors.accentGrey[10], + dualTone: Colors.KEPPEL, + dualToneInverse: Colors.charcoal[10], + secondary: Colors.charcoal[40], + brand: Colors.keppel[40], + inverse: Colors.charcoal[100], + weather: Colors.accentGrey[50], + disabled: Colors.charcoal[70], + neutral: { + default: Colors.charcoal[40], + alt: Colors.charcoal[40] + } + } +}; + +export const darkModePalette: PaletteOptions = { + + surface: { + primary: Colors.charcoal[10], + secondary: Colors.charcoal[20], + tertiary: Colors.charcoal[30], + elevated: Colors.charcoal[40], + overlay: alpha(Colors.charcoal[20], 0.8), + inverse: Colors.WHITE, + tint: `linear-gradient(90deg, ${Colors.charcoal[30]} 0%, ${Colors.accentGrey[30]} 100%)`, + }, + interactive: { + primary: Colors.KEPPEL, + hover: Colors.keppel[50], + disabled: Colors.charcoal[30], + pressed: Colors.keppel[60], + secondary: Colors.keppel[20], + tertiary: Colors.keppel[10] + }, + + navigation: { + primary: Colors.charcoal[10], + secondary: Colors.charcoal[20], + active: Colors.KEPPEL, + hover: Colors.keppel[50] + }, + + primary: { + main: Colors.KEPPEL + }, + secondary: { + main: Colors.charcoal[70] + }, + background: { + default: Colors.charcoal[10], + secondary: Colors.accentGrey[20], + tertiary: Colors.accentGrey[30], + tabs: Colors.gray[10], // TODO: Make this name or token to more genric + card: Colors.gray[20], + elevatedComponents: Colors.gray[30], + hover: Colors.charcoal[20], + supplementary: Colors.accentGrey[40], + blur: { + heavy: alpha(Colors.charcoal[10], 0.8), + light: alpha(Colors.charcoal[10], 0.5) + }, + neutral: { + default: Colors.accentGrey[100], + hover: Colors.charcoal[90], + pressed: Colors.charcoal[80] + }, + brand: { + default: Colors.keppel[40], + hover: Colors.keppel[50], + disabled: Colors.charcoal[30], + pressed: Colors.keppel[60], + secondary: Colors.keppel[20], + tertiary: Colors.keppel[10] + }, + graphics: { + default: Colors.carribean[40] + }, + cta: { + default: Colors.saffron[40], + hover: Colors.saffron[50], + pressed: Colors.saffron[60], + secondary: Colors.saffron[20], + tertiary: Colors.saffron[10] + }, + info: { + default: Colors.blue[40], + hover: Colors.blue[50], + pressed: Colors.blue[60], + secondary: Colors.blue[20], + tertiary: Colors.blue[10] + }, + success: { + default: Colors.KEPPEL, + hover: Colors.green[50], + pressed: Colors.green[60], + secondary: Colors.green[20], + tertiary: Colors.green[10] + }, + warning: { + default: Colors.yellow[40], + hover: Colors.yellow[50], + pressed: Colors.yellow[60], + secondary: Colors.yellow[20], + tertiary: Colors.yellow[10] + }, + error: { + default: Colors.red[40], + hover: Colors.red[50], + pressed: Colors.red[60], + secondary: Colors.red[20], + tertiary: Colors.red[10] + }, + code: Colors.charcoal[10], + constant: { + white: Colors.accentGrey[100], + disabled: Colors.charcoal[70], + table: '#363636' + }, + surfaces: Colors.accentGrey[10] + }, + text: { + default: Colors.charcoal[100], + secondary: Colors.charcoal[70], + tertiary: Colors.charcoal[60], + disabled: Colors.charcoal[60], + inverse: Colors.charcoal[10], + brand: Colors.keppel[40], + info: Colors.blue[40], + success: Colors.green[40], + warning: Colors.yellow[40], + error: Colors.red[40], + neutral: { + default: Colors.accentGrey[100], + alt: Colors.keppel[40] + }, + constant: { + white: Colors.charcoal[100], + disabled: Colors.charcoal[50] + } + }, + border: { + default: Colors.accentGrey[10], + strong: Colors.accentGrey[60], + brand: Colors.keppel[40], + normal: Colors.accentGrey[30], + neutral: { + default: Colors.accentGrey[100], + alt: Colors.keppel[40] + } + }, + + icon: { + default: Colors.charcoal[80], + secondary: Colors.charcoal[70], + dualTone: Colors.KEPPEL, + dualToneInverse: Colors.charcoal[100], + brand: Colors.keppel[40], + inverse: Colors.charcoal[10], + weather: Colors.saffron[40], + disabled: Colors.charcoal[50], + neutral: { + default: Colors.accentGrey[100], + alt: Colors.keppel[40] + } + } +}; diff --git a/examples/next-12/styles/themes/theme.js b/examples/next-12/styles/themes/theme.js index 1ae828820..98269c5ea 100644 --- a/examples/next-12/styles/themes/theme.js +++ b/examples/next-12/styles/themes/theme.js @@ -3,34 +3,16 @@ import { blueGrey } from '@mui/material/colors'; const createCustomTheme = (paletteType) => { const commonPalette = { - primary: { - main: '#477E96' - }, - secondary: { - main: '#00D3A9' - }, - neutral: { - main: '#64748B', - contrastText: '#FFF' - } + primary: { main: '#666' }, + secondary: { main: '#00D3A9' }, + neutral: { main: '#64748B', contrastText: '#FFF' } }; - const palette = - paletteType === 'dark' - ? { - mode: 'dark', - ...commonPalette, - secondary: { - ...commonPalette.secondary - } - } - : { - mode: 'light', - ...commonPalette, - secondary: { - ...commonPalette.secondary - } - }; + const palette = { + mode: paletteType, + ...commonPalette, + secondary: { ...commonPalette.secondary } + }; const theme = createTheme({ palette, @@ -43,13 +25,7 @@ const createCustomTheme = (paletteType) => { }, shape: { borderRadius: 8 }, breakpoints: { - values: { - xs: 0, - sm: 600, - md: 960, - lg: 1280, - xl: 1920 - } + values: { xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920 } }, components: { MuiAppBar: { @@ -61,31 +37,23 @@ const createCustomTheme = (paletteType) => { backgroundColor: blueGrey[600] } } - } - } - }); - - const overrides = { - // Your overrides here - }; - - theme.overrides = { - ...overrides, - MuiCssBaseline: { - '@global': { - body: { - backgroundColor: paletteType === 'dark' ? '#303030' : '#eaeff1', - color: paletteType === 'dark' ? '#000000' : '#FFFFFF' - }, - h5: { - color: paletteType === 'dark' ? '#000000' : '#FFFFFF' - }, - p: { - color: paletteType === 'dark' ? '#000000' : '#FFFFFF' + }, + MuiCssBaseline: { + styleOverrides: { + body: { + backgroundColor: paletteType === 'dark' ? '#303030' : '#eaeff1', + color: paletteType === 'dark' ? '#FFFFFF' : '#000000' + }, + h5: { + color: paletteType === 'dark' ? '#FFFFFF' : '#000000' + }, + p: { + color: paletteType === 'dark' ? '#FFFFFF' : '#000000' + } } } } - }; + }); return theme; }; diff --git a/examples/next-12/tsconfig.json b/examples/next-12/tsconfig.json new file mode 100644 index 000000000..c933858d5 --- /dev/null +++ b/examples/next-12/tsconfig.json @@ -0,0 +1,35 @@ +{ + + "compilerOptions": { + "baseUrl": ".", + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "paths": { + "@/*":["./*"] + }, + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "incremental": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve" + }, + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx" +, "lib/context/AppThemeContext.jsxx" ], + "exclude": [ + "node_modules" + ] +} From d605cefbb70c8d4f3d3e9dfdeb21686cf2cbd4e0 Mon Sep 17 00:00:00 2001 From: Shivansh Charak Date: Wed, 20 Aug 2025 23:28:45 +0530 Subject: [PATCH 2/8] Page added for the pallette.ts Signed-off-by: Shivansh Charak --- .../next-12/components/Background/index.jsx | 122 ------------------ .../components/BorderAndIcons/index.jsx | 104 ++++++++++----- examples/next-12/components/Borders/index.jsx | 82 ------------ examples/next-12/components/Footer/index.jsx | 10 +- examples/next-12/components/Icon/index.jsx | 2 +- .../next-12/components/Interactive/index.jsx | 83 ++++++++---- .../next-12/components/Navigation/index.jsx | 67 ++++++---- .../next-12/components/Semantic/index.jsx | 70 +++++----- examples/next-12/components/Surface/index.jsx | 24 ++-- examples/next-12/components/Tabs/index.jsx | 8 +- examples/next-12/components/Text/index.jsx | 73 ++++++----- 11 files changed, 271 insertions(+), 374 deletions(-) delete mode 100644 examples/next-12/components/Background/index.jsx delete mode 100644 examples/next-12/components/Borders/index.jsx diff --git a/examples/next-12/components/Background/index.jsx b/examples/next-12/components/Background/index.jsx deleted file mode 100644 index 154fb456d..000000000 --- a/examples/next-12/components/Background/index.jsx +++ /dev/null @@ -1,122 +0,0 @@ -"use client"; - -import * as React from "react"; -import { - Button, - Dialog, - DialogTitle, - DialogContent, - DialogActions, - Box, - Typography, - Grid, - Tooltip, -} from "@mui/material"; -import { lightModePalette } from "@/pages/themes-explorer/palette"; - -export default function InteractivePaletteDemo() { - const [open, setOpen] = React.useState(false); - - const handleOpen = () => setOpen(true); - const handleClose = () => setOpen(false); - - // Render component based on the token - const renderComponent = (token, color) => { - const interactiveTokens = ["cta", "brand", "success", "error", "warning", "info"]; - - for (const itoken of interactiveTokens) { - if (token.includes(itoken) && lightModePalette.background[itoken]) { - const states = lightModePalette.background[itoken]; - return ( - - - {itoken} Variants - - - {Object.keys(states).map((key) => ( - - ))} - - - ); - } - } - - - return ( - navigator.clipboard.writeText(color)} - > - {token.split(".").pop()} - - ); - }; - - - const flattenColors = (obj, prefix = "lightMode") => { - let colors= []; - Object.keys(obj).forEach((key) => { - const value = obj[key]; - if (typeof value === "string") { - colors.push({ token: `${prefix}.${key}`, color: value }); - } else if (typeof value === "object") { - colors = colors.concat(flattenColors(value, `${prefix}.${key}`)); - } - }); - return colors; - }; - - const allColors = flattenColors(lightModePalette.background); - - return ( -
- - - - Light Mode Background Color Interactive Palette - - - {allColors.map(({ token, color }) => ( - - - {renderComponent(token, color)} - - - ))} - - - - - - -
- ); -} diff --git a/examples/next-12/components/BorderAndIcons/index.jsx b/examples/next-12/components/BorderAndIcons/index.jsx index 75b343880..4acb9171c 100644 --- a/examples/next-12/components/BorderAndIcons/index.jsx +++ b/examples/next-12/components/BorderAndIcons/index.jsx @@ -1,13 +1,16 @@ 'use client'; import { Box, Container, Typography, Paper, Grid, Snackbar, Alert } from '@mui/material'; -import React, { useState } from 'react'; -import { lightModePalette } from '@/pages/themes-explorer/palette'; +import React, { useState, useContext } from 'react'; +import { ThemeContext } from '@/lib/context/AppThemeContext'; +import { darkModePalette, lightModePalette } from '@/pages/themes-explorer/palette'; import { Palette, Eye, Sun, Send, Star } from 'lucide-react'; export default function BorderAndIconColors() { - const borderColors = lightModePalette.border; - const iconColors = lightModePalette.icon; + const { mode } = useContext(ThemeContext); + const palette = mode === 'dark' ? darkModePalette : lightModePalette; + const borderColors = palette.border; + const iconColors = palette.icon; const [snackbarOpen, setSnackbarOpen] = useState(false); const [copiedText, setCopiedText] = useState(''); @@ -42,17 +45,25 @@ export default function BorderAndIconColors() { { key: 'neutral.alt', label: 'Neutral Alt', desc: 'Alt neutral icons' }, ]; - // helper: safely get nested colors (e.g. border.neutral.default) - const getColor = (obj, path) => { - return path.split('.').reduce((acc, part) => acc && acc[part], obj); - }; + const getColor = (obj, path) => + path.split('.').reduce((acc, part) => acc && acc[part], obj); return ( - {/* BORDER COLORS */} - - Border Colors - + + + + Border Colors + + Border colors for different emphasis levels @@ -64,12 +75,13 @@ export default function BorderAndIconColors() { sx={{ p: 2, borderRadius: '12px', - border: '1px solid #eee', + border: `1px solid ${palette.border.default}`, textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1, + backgroundColor: palette.surface?.primary, }} > - {label} - {desc} + + {label} + + {desc} {getColor(borderColors, key)} @@ -103,9 +118,17 @@ export default function BorderAndIconColors() { ))} - {/* Border Examples */} - - + + + Border Examples @@ -119,6 +142,7 @@ export default function BorderAndIconColors() { py: 1, minWidth: 120, textAlign: 'center', + color: palette.text.default, }} > {label} Border @@ -128,10 +152,18 @@ export default function BorderAndIconColors() { - {/* ICON COLORS */} - - Icon Colors - + + + Icon Colors + + Icon colors for different contexts and states @@ -143,12 +175,13 @@ export default function BorderAndIconColors() { sx={{ p: 2, borderRadius: '12px', - border: '1px solid #eee', + border: `1px solid ${palette.border.default}`, textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1, + backgroundColor: palette.surface?.primary, }} > - {label} - {desc} + + {label} + + {desc} {getColor(iconColors, key)} @@ -183,9 +219,9 @@ export default function BorderAndIconColors() { ))} - {/* Icon Examples */} - - + + + Icon Examples @@ -198,7 +234,7 @@ export default function BorderAndIconColors() { - {/* Snackbar */} + setOpen(true); - const handleClose = () => setOpen(false); - - const flattenColors = (obj, prefix = "lightMode") => { - let colors = []; - Object.keys(obj).forEach((key) => { - const value = obj[key]; - if (typeof value === "string") { - colors.push({ token: `${prefix}.${key}`, color: value }); - } else if (typeof value === "object") { - colors = colors.concat(flattenColors(value, `${prefix}.${key}`)); - } - }); - return colors; - }; - const allColors = flattenColors(lightModePalette.border); - return ( -
- - - - Light Mode Border Interactive Palette - - - {allColors.map(({ token, color }) => ( - - - navigator.clipboard.writeText(color)} - > - - {token.split(".").pop()?.toUpperCase()} - - - - - ))} - - - - - - -
- ); -} diff --git a/examples/next-12/components/Footer/index.jsx b/examples/next-12/components/Footer/index.jsx index 524a32642..a0e1ad164 100644 --- a/examples/next-12/components/Footer/index.jsx +++ b/examples/next-12/components/Footer/index.jsx @@ -30,14 +30,14 @@ export default function Footer() { variant="subtitle1" sx={{ fontWeight: 700, - color: palette.text.default, // 👈 heading color + color: palette.text.default, }} > Design System Palette Comprehensive color system with {mode} mode active @@ -47,9 +47,9 @@ export default function Footer() { sx={{ padding: "0.4rem 0.8rem", borderRadius: "10px", - border: `2px solid ${palette.border.strong}`, // 👈 badge border - color: palette.text.default, // 👈 badge text color - backgroundColor: palette.background.secondary, // 👈 badge bg + border: `2px solid ${palette.border.strong}`, + color: palette.text.default, + backgroundColor: palette.background.secondary, textTransform: "none", fontSize: "0.75rem", fontWeight: 600, diff --git a/examples/next-12/components/Icon/index.jsx b/examples/next-12/components/Icon/index.jsx index fb3a7a7a0..a9acb040d 100644 --- a/examples/next-12/components/Icon/index.jsx +++ b/examples/next-12/components/Icon/index.jsx @@ -73,7 +73,7 @@ export default function IconColorDemo() { onClick={() => handleCopy(color)} sx={{ color: color, - fontSize: 32, // bigger icon for easier clicking + fontSize: 32, "&:hover": { opacity: 0.8, }, diff --git a/examples/next-12/components/Interactive/index.jsx b/examples/next-12/components/Interactive/index.jsx index 2356e429e..9dbe6f5f6 100644 --- a/examples/next-12/components/Interactive/index.jsx +++ b/examples/next-12/components/Interactive/index.jsx @@ -13,12 +13,14 @@ import { Paper } from '@mui/material'; import { useContext } from 'react'; - import * as React from 'react'; export default function Interactive() { - const {mode} = useContext(ThemeContext) - const surfaceColors = mode==="dark"?lightModePalette.interactive:darkModePalette.interactive; + const { mode } = useContext(ThemeContext); + + + const palette = mode === 'dark' ? darkModePalette : lightModePalette; + const interactiveColors = palette.interactive; const [snackbarOpen, setSnackbarOpen] = React.useState(false); const [copiedText, setCopiedText] = React.useState(''); @@ -29,7 +31,7 @@ export default function Interactive() { setSnackbarOpen(true); }; - const handleClose = (event, reason) => { + const handleClose = (_event, reason) => { if (reason === 'clickaway') return; setSnackbarOpen(false); }; @@ -38,18 +40,31 @@ export default function Interactive() { - Interactive Tokens - + + Interactive Tokens + + Colors for buttons, links, and interactive elements with all states - {/* Token Grid */} - {Object.entries(surfaceColors).map(([name, value]) => { + {Object.entries(interactiveColors).map(([name, value]) => { const isGradient = typeof value === 'string' && value.includes('gradient'); const displayValue = isGradient ? 'Gradient' : value; @@ -72,7 +87,7 @@ export default function Interactive() { display: 'flex', flexDirection: 'column', borderRadius: '20px', - border: '1px solid oklch(0.922 0 0)', + border: `1px solid ${palette.border.normal}`, paddingY: '10px', alignItems: 'center', textAlign: 'center', @@ -94,16 +109,22 @@ export default function Interactive() { {name.charAt(0).toUpperCase() + name.slice(1)} - + {isGradient ? 'Highlight surfaces' : name === 'primary' @@ -124,7 +145,7 @@ export default function Interactive() { @@ -135,27 +156,33 @@ export default function Interactive() { })} - {/* Interactive Demo Section */} + - Interactive Demo + + Interactive Demo + - {Object.entries(surfaceColors).map(([name, value]) => ( + {Object.entries(interactiveColors).map(([name, value]) => ( - -
+ + Modal Title + + + + + + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac + facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum + at eros. + + + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. + + + Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. + + + + + + ); diff --git a/examples/next-12/components/Footer/index.jsx b/examples/next-12/components/Footer/index.jsx index 75633eddb..501000624 100644 --- a/examples/next-12/components/Footer/index.jsx +++ b/examples/next-12/components/Footer/index.jsx @@ -1,28 +1,27 @@ -"use client"; +'use client'; -import * as React from "react"; -import { Container, Box, Typography } from "@mui/material"; -import { ThemeContext } from "../../lib/context/AppThemeContext"; -import { lightModePalette, darkModePalette } from "../../pages/themes-explorer/palette"; +import { Box, Container, Typography } from '@mui/material'; +import * as React from 'react'; +import { ThemeContext } from '../../lib/context/AppThemeContext'; +import { darkModePalette, lightModePalette } from '../../lib/palette'; export default function Footer() { const { mode } = React.useContext(ThemeContext); - - const palette = mode === "dark" ? darkModePalette : lightModePalette; + const palette = mode === 'dark' ? darkModePalette : lightModePalette; return ( - + @@ -30,29 +29,26 @@ export default function Footer() { variant="subtitle1" sx={{ fontWeight: 700, - color: palette.text.default, + color: palette.text.default }} > Design System Palette - + Comprehensive color system with {mode} mode active 9 Color Categories diff --git a/examples/next-12/components/Icon/index.jsx b/examples/next-12/components/Icon/index.jsx index a9acb040d..3a9680ce4 100644 --- a/examples/next-12/components/Icon/index.jsx +++ b/examples/next-12/components/Icon/index.jsx @@ -1,25 +1,25 @@ -"use client"; +'use client'; -import * as React from "react"; +import { lightModePalette } from '@/lib/palette'; +import InfoIcon from '@mui/icons-material/Info'; import { + Alert, + Box, Button, Dialog, - DialogTitle, - DialogContent, DialogActions, + DialogContent, + DialogTitle, Grid, - Tooltip, IconButton, Snackbar, - Alert, - Box, -} from "@mui/material"; -import InfoIcon from "@mui/icons-material/Info"; -import { lightModePalette } from "@/pages/themes-explorer/palette"; + Tooltip +} from '@mui/material'; +import * as React from 'react'; export default function IconColorDemo() { const [open, setOpen] = React.useState(false); - const [copied, setCopied] = React.useState(""); + const [copied, setCopied] = React.useState(''); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); @@ -29,17 +29,17 @@ export default function IconColorDemo() { setCopied(color); }; - const flattenColors = (obj ,prefix = "lightMode", seen = new Set()) => { + const flattenColors = (obj, prefix = 'lightMode', seen = new Set()) => { let colors = []; Object.keys(obj).forEach((key) => { const value = obj[key]; - if (typeof value === "string") { + if (typeof value === 'string') { const token = `${prefix}.${key}`; if (!seen.has(token)) { colors.push({ token, color: value }); seen.add(token); } - } else if (typeof value === "object") { + } else if (typeof value === 'object') { colors = colors.concat(flattenColors(value, `${prefix}.${key}`, seen)); } }); @@ -64,19 +64,19 @@ export default function IconColorDemo() { handleCopy(color)} sx={{ color: color, - fontSize: 32, - "&:hover": { - opacity: 0.8, - }, + fontSize: 32, + '&:hover': { + opacity: 0.8 + } }} > @@ -97,10 +97,10 @@ export default function IconColorDemo() { setCopied("")} - anchorOrigin={{ vertical: "bottom", horizontal: "center" }} + onClose={() => setCopied('')} + anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} > - + Copied {copied} to clipboard! diff --git a/examples/next-12/components/Interactive/index.jsx b/examples/next-12/components/Interactive/index.jsx index 7c5ac2fc6..852ac0457 100644 --- a/examples/next-12/components/Interactive/index.jsx +++ b/examples/next-12/components/Interactive/index.jsx @@ -1,24 +1,14 @@ 'use client'; -import { ThemeContext } from '../../lib/context/AppThemeContext'; -import { darkModePalette, lightModePalette } from '../../pages/themes-explorer/palette'; -import { - Alert, - Box, - Button, - Container, - Snackbar, - Tooltip, - Typography, - Paper -} from '@mui/material'; -import { useContext } from 'react'; +import { Alert, Box, Button, Container, Paper, Snackbar, Tooltip, Typography } from '@mui/material'; import * as React from 'react'; +import { useContext } from 'react'; +import { ThemeContext } from '../../lib/context/AppThemeContext'; +import { darkModePalette, lightModePalette } from '../../lib/palette'; export default function Interactive() { const { mode } = useContext(ThemeContext); - const palette = mode === 'dark' ? darkModePalette : lightModePalette; const interactiveColors = palette.interactive; @@ -40,28 +30,24 @@ export default function Interactive() { Interactive Tokens - + Colors for buttons, links, and interactive elements with all states @@ -87,7 +73,7 @@ export default function Interactive() { display: 'flex', flexDirection: 'column', borderRadius: '20px', - border: `1px solid ${palette.border.normal}`, + border: `1px solid ${palette.border.normal}`, paddingY: '10px', alignItems: 'center', textAlign: 'center', @@ -112,7 +98,7 @@ export default function Interactive() { variant="subtitle2" sx={{ fontWeight: 600, - color: palette.text.default + color: palette.text.default }} > {name.charAt(0).toUpperCase() + name.slice(1)} @@ -120,7 +106,7 @@ export default function Interactive() { @@ -156,19 +142,16 @@ export default function Interactive() { })} - - + Interactive Demo @@ -180,9 +163,7 @@ export default function Interactive() { disabled={name === 'disabled'} sx={{ backgroundColor: value, - color: name === 'disabled' - ? palette.text.secondary - : palette.text.inverse, + color: name === 'disabled' ? palette.text.secondary : palette.text.inverse, textTransform: 'capitalize', '&:hover': { backgroundColor: value @@ -196,7 +177,6 @@ export default function Interactive() { - Copied: {copiedText} diff --git a/examples/next-12/components/Menus/index.jsx b/examples/next-12/components/Menus/index.jsx index 96709ad5c..644f675d5 100644 --- a/examples/next-12/components/Menus/index.jsx +++ b/examples/next-12/components/Menus/index.jsx @@ -1,10 +1,10 @@ -"use client"; +'use client'; -import * as React from "react"; -import { Box, Button, Tooltip } from "@mui/material"; -import { lightModePalette } from "@/pages/themes-explorer/palette"; +import { lightModePalette } from '@/lib/palette'; +import { Box, Button, Tooltip } from '@mui/material'; +import * as React from 'react'; -const navItems = ["Home", "About", "Services", "Contact"]; +const navItems = ['Home', 'About', 'Services', 'Contact']; export default function NavigationMenu() { const [activeIndex, setActiveIndex] = React.useState(0); @@ -12,11 +12,11 @@ export default function NavigationMenu() { return ( {navItems.map((item, index) => ( @@ -24,15 +24,13 @@ export default function NavigationMenu() {