59fa51d75a
* Add theme colors from Figma * Rough-in of AppHeader * Add styled ActionButton * Add react-router and placeholder Settings page * Add ability to set persistent defaultDir * Add react-hot-toast for save success message * Add defaultProjectName setting * Handle case of stale empty defaultDir in storage * Wrap app in BrowserRouter * Wrap test App in BrowserRouter * Don't need BrowserRouter outside of testing because we use RouterProvider
43 lines
964 B
JavaScript
43 lines
964 B
JavaScript
const themeColorRamps = [
|
|
{ name: 'chalkboard', stops: 12 },
|
|
{ name: 'energy', stops: 12 },
|
|
{ name: 'liquid', stops: 12 },
|
|
{ name: 'fern', stops: 12 },
|
|
{ name: 'cool', stops: 12 },
|
|
{ name: 'river', stops: 12 },
|
|
{ name: 'berry', stops: 12 },
|
|
{ name: 'destroy', stops: 8 },
|
|
{ name: 'warn', stops: 8 },
|
|
{ name: 'succeed', stops: 8 },
|
|
]
|
|
const toOKLCHVar = val => `oklch(var(${val}) / <alpha-value>) `
|
|
|
|
const themeColors = Object.fromEntries(
|
|
themeColorRamps.map(({name, stops}) => [
|
|
name,
|
|
Object.fromEntries(
|
|
new Array(stops)
|
|
.fill(0)
|
|
.map((_, i) => [
|
|
(i + 1) * 10,
|
|
toOKLCHVar(`--_${name}-${(i + 1) * 10}`),
|
|
])
|
|
),
|
|
])
|
|
)
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
"./src/**/*.{js,jsx,ts,tsx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
...themeColors,
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|