diff --git a/examples/next-12/components/AllColors/index.jsx b/examples/next-12/components/AllColors/index.jsx
new file mode 100644
index 000000000..32d39910f
--- /dev/null
+++ b/examples/next-12/components/AllColors/index.jsx
@@ -0,0 +1,305 @@
+'use client';
+
+import { Alert, Box, Chip, Container, Paper, Snackbar, Typography } from '@mui/material';
+import { useContext, useState } from 'react';
+import { ThemeContext } from '../../lib/context/AppThemeContext';
+import { darkModePalette, lightModePalette } from '../../lib/palette';
+
+// Helper function to flatten nested objects and get all color values
+const flattenColors = (obj, prefix = '', seen = new Set()) => {
+ let colors = [];
+
+ Object.entries(obj).forEach(([key, value]) => {
+ const fullKey = prefix ? `${prefix}.${key}` : key;
+
+ if (typeof value === 'string') {
+ if (!seen.has(fullKey)) {
+ colors.push({
+ token: fullKey,
+ color: value,
+ category: prefix || 'root'
+ });
+ seen.add(fullKey);
+ }
+ } else if (typeof value === 'object' && value !== null) {
+ colors = colors.concat(flattenColors(value, fullKey, seen));
+ }
+ });
+
+ return colors;
+};
+
+export default function AllColors() {
+ const { mode } = useContext(ThemeContext);
+ const palette = mode === 'dark' ? darkModePalette : lightModePalette;
+
+ const [snackbarOpen, setSnackbarOpen] = useState(false);
+ const [copiedText, setCopiedText] = useState('');
+
+ const handleCopy = (value) => {
+ navigator.clipboard.writeText(value);
+ setCopiedText(value);
+ setSnackbarOpen(true);
+ };
+
+ const handleClose = () => setSnackbarOpen(false);
+
+ // Get all colors from the palette
+ const allColors = flattenColors(palette);
+
+ // Group colors by category
+ const groupedColors = allColors.reduce((acc, color) => {
+ const category = color.category;
+ if (!acc[category]) {
+ acc[category] = [];
+ }
+ acc[category].push(color);
+ return acc;
+ }, {});
+
+ const categoryNames = {
+ root: 'Primary Colors',
+ surface: 'Surface Colors',
+ interactive: 'Interactive Colors',
+ navigation: 'Navigation Colors',
+ background: 'Background Colors',
+ text: 'Text Colors',
+ border: 'Border Colors',
+ icon: 'Icon Colors',
+ primary: 'Primary Palette',
+ secondary: 'Secondary Palette'
+ };
+
+ const getCategoryDescription = (category) => {
+ const descriptions = {
+ root: 'Main palette colors',
+ surface: 'Background surfaces with proper contrast',
+ interactive: 'Colors for buttons, links, and interactive elements',
+ navigation: 'Navigation bar and menu colors',
+ background: 'Extended background color options',
+ text: 'Text color variations',
+ border: 'Border and divider colors',
+ icon: 'Icon color variations',
+ primary: 'Primary color palette',
+ secondary: 'Secondary color palette'
+ };
+ return descriptions[category] || 'Color variations';
+ };
+
+ return (
+
+
+
+ All Colors Tokens
+
+
+ Complete color palette explorer with all color tokens from the {mode} mode -{' '}
+ {allColors.length} total colors
+
+
+ {Object.entries(groupedColors).map(([category, colors]) => (
+
+
+ {categoryNames[category] || category.charAt(0).toUpperCase() + category.slice(1)}
+
+
+
+ {getCategoryDescription(category)}
+
+
+
+ {colors.map(({ token, color }) => (
+ handleCopy(color)}
+ >
+
+ {color.includes('gradient') && (
+
+ GRADIENT
+
+ )}
+
+
+
+ {token}
+
+
+
+ {color}
+
+
+ ))}
+
+
+ ))}
+
+
+
+ Palette Summary
+
+
+
+
+ • Total Colors: {allColors.length} | Categories: {Object.keys(groupedColors).length} |
+ Mode: {mode.charAt(0).toUpperCase() + mode.slice(1)}
+
+
+
+ • Primary: {palette.primary?.main || 'N/A'} | Surface:{' '}
+ {palette.surface?.primary || 'N/A'} | Text: {palette.text?.default || 'N/A'}
+
+
+
+
+
+
+
+ Copied: {copiedText}
+
+
+
+ );
+}
diff --git a/examples/next-12/components/BorderAndIcons/index.jsx b/examples/next-12/components/BorderAndIcons/index.jsx
new file mode 100644
index 000000000..0d6241e08
--- /dev/null
+++ b/examples/next-12/components/BorderAndIcons/index.jsx
@@ -0,0 +1,259 @@
+'use client';
+
+import { Palette, RemoveRedEye, Send, Star, WbSunny } from '@mui/icons-material';
+import { Alert, Box, Container, Grid, Paper, Snackbar, Typography } from '@mui/material';
+import { useContext, useState } from 'react';
+import { ThemeContext } from '../../lib/context/AppThemeContext';
+import { darkModePalette, lightModePalette } from '../../lib/palette';
+
+export default function BorderAndIconColors() {
+ 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('');
+
+ 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' }
+ ];
+
+ const getColor = (obj, path) => path.split('.').reduce((acc, part) => acc && acc[part], obj);
+
+ return (
+
+
+
+ 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 ${palette.border.default}33` }
+ }}
+ />
+
+ {label}
+
+
+ {desc}
+
+
+ {getColor(borderColors, key)}
+
+
+
+ ))}
+
+
+
+
+ Border Examples
+
+
+ {borderSwatches.slice(0, 4).map(({ key, label }) => (
+
+ {label} Border
+
+ ))}
+
+
+
+
+
+
+ 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 ${palette.border.normal}`,
+ '&:hover': { boxShadow: `0 0 0 3px ${palette.border.default}33` }
+ }}
+ />
+
+ {label}
+
+
+ {desc}
+
+
+ {getColor(iconColors, key)}
+
+
+
+ ))}
+
+
+
+
+ Icon Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Copied: {copiedText}
+
+
+
+ );
+}
diff --git a/examples/next-12/components/DefaultModal/index.jsx b/examples/next-12/components/DefaultModal/index.jsx
index ce37b6063..87eaad62b 100644
--- a/examples/next-12/components/DefaultModal/index.jsx
+++ b/examples/next-12/components/DefaultModal/index.jsx
@@ -1,3 +1,4 @@
+import { lightModePalette } from '@/lib/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,32 +27,39 @@ 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..501000624
--- /dev/null
+++ b/examples/next-12/components/Footer/index.jsx
@@ -0,0 +1,59 @@
+'use client';
+
+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;
+
+ 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..3a9680ce4
--- /dev/null
+++ b/examples/next-12/components/Icon/index.jsx
@@ -0,0 +1,109 @@
+'use client';
+
+import { lightModePalette } from '@/lib/palette';
+import InfoIcon from '@mui/icons-material/Info';
+import {
+ Alert,
+ Box,
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ Grid,
+ IconButton,
+ Snackbar,
+ 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 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 (
+
+
+
+
+
+
setCopied('')}
+ anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+ >
+
+ Copied {copied} to clipboard!
+
+
+