Add colors in JS and Color Palette (#18)

pull/24/head
Shahan Nedadahandeh 3 months ago
parent 67aa21fd65
commit 126a61fc28
  1. 6
      .vscode/settings.json
  2. 21
      components/ColorPalette.module.css
  3. 24
      components/ColorPalette.tsx
  4. 3
      pages/playground.tsx
  5. 38
      utils/Color.ts

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

@ -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…
Cancel
Save