Add colors in JS and Color Palette (#18)
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Shahan Nedadahandeh 2022-07-01 14:30:57 -04:00
parent 67aa21fd65
commit 126a61fc28
5 changed files with 91 additions and 1 deletions

View File

@ -41,7 +41,11 @@
"files.eol": "\n",
"[markdown]": {
"editor.wordWrap": "on",
"editor.quickSuggestions": false,
"editor.quickSuggestions": {
"comments": "off",
"strings": "off",
"other": "off"
},
"editor.tabSize": 4
}
}

View File

@ -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);
}

View File

@ -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>
</>
);
}

View File

@ -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 />
</>
);
}

38
utils/Color.ts Normal file
View File

@ -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)",
};