const semanticColors = ['primary', 'secondary', 'neutral', 'success', 'warning', 'error', 'info'];
const generateSemanticPaletteJSX = (colors: string[]) => {
const numberHeadings = `
${[...Array(12).keys()].map(i => `${i + 1}`).join('')}
`;
const rows = colors.map((color: string) => `
${color}
${[...Array(12).keys()].map(i => ``).join('')}
`).join('');
return `
${numberHeadings}${rows}
`;
};
const generateUtilityColorsGridJSX = () => {
const headers = `
Contrast
Surface
Indicator
Track
`;
const rows = `
primary
secondary
neutral
success
warning
error
info
`;
return `
${headers}${rows}
`;
};
export const colorsExamples = {
name: "Colors",
examples: {
"semantic-colors": {
name: "Semantic Colors",
jsx: `
Primary
Secondary
Neutral
Success
Warning
Error
Info
`
},
"palette": {
name: "Palette",
jsx: `${generateSemanticPaletteJSX(['primary', 'secondary', 'neutral', 'success', 'warning', 'error', 'info'])}`
},
"utility-colors": {
name: "Utility Colors",
jsx: `
${generateUtilityColorsGridJSX()}
`
}
}
};