Add colors in JS and Color Palette (#18)
parent
67aa21fd65
commit
126a61fc28
@ -0,0 +1,21 @@ |
||||
.box { |
||||
width: calc(100rem / 16); |
||||
height: calc(100rem / 16); |
||||
margin-bottom: calc(10rem / 16); |
||||
} |
||||
|
||||
.wrapper { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-around; |
||||
flex-wrap: wrap; |
||||
} |
||||
|
||||
.item { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
text-align: center; |
||||
margin: calc(10rem / 16); |
||||
width: calc(150rem / 16); |
||||
} |
@ -0,0 +1,24 @@ |
||||
import React from "react"; |
||||
import { Color } from "utils/Color"; |
||||
|
||||
import styles from "./ColorPalette.module.css"; |
||||
|
||||
export function ColorPalette() { |
||||
return ( |
||||
<> |
||||
<h2>Color Palette</h2> |
||||
<div className={styles.wrapper}> |
||||
{Object.entries(Color).map(([colorName, colorCSSName]) => ( |
||||
<div key={colorName} className={styles.item}> |
||||
<div |
||||
className={styles.box} |
||||
style={{ backgroundColor: colorCSSName }} |
||||
key={colorName} |
||||
/> |
||||
<span>{colorName}</span> |
||||
</div> |
||||
))} |
||||
</div> |
||||
</> |
||||
); |
||||
} |
@ -1,10 +1,13 @@ |
||||
import React from "react"; |
||||
|
||||
import { ColorPalette } from "../components/ColorPalette"; |
||||
|
||||
export default function Home() { |
||||
return ( |
||||
<> |
||||
<h1>Playground</h1> |
||||
<p>Show off your components here!</p> |
||||
<ColorPalette /> |
||||
</> |
||||
); |
||||
} |
||||
|
@ -0,0 +1,38 @@ |
||||
const colorNames = [ |
||||
"primaryBackground", |
||||
"secondaryBackground", |
||||
"tertiaryBackground", |
||||
"primaryAccent", |
||||
"primaryAccentLight", |
||||
"primaryAccentLighter", |
||||
"secondaryAccent", |
||||
"secondaryAccentLight", |
||||
"primaryHeading", |
||||
"secondaryHeading", |
||||
"link", |
||||
"linkHover", |
||||
"primaryText", |
||||
"cardBackground", |
||||
"label", |
||||
] as const; |
||||
|
||||
// This type is needed for smart autocomplete
|
||||
type ColorName = typeof colorNames[number]; |
||||
|
||||
export const Color: { [key in ColorName]: string } = { |
||||
primaryBackground: "var(--primary-background)", |
||||
secondaryBackground: "var(--secondary-background)", |
||||
tertiaryBackground: "var(--tertiary-background)", |
||||
primaryAccent: "var(--primary-accent)", |
||||
primaryAccentLight: "var(--primary-accent-light)", |
||||
primaryAccentLighter: "var(--primary-accent-lighter)", |
||||
secondaryAccent: "var(--secondary-accent)", |
||||
secondaryAccentLight: "var(--secondary-accent-light)", |
||||
primaryHeading: "var(--primary-heading)", |
||||
secondaryHeading: "var(--secondary-heading)", |
||||
link: "var(--link)", |
||||
linkHover: "var(--link-hover)", |
||||
primaryText: "var(--primary-text)", |
||||
cardBackground: "var(--card-background)", |
||||
label: "var(--label)", |
||||
}; |
Loading…
Reference in new issue