3ae5393dd7
* Tweak toaster look and feel * Add icons, tweak plus icon names * Rename commandBarMeta to commandBarConfig * Refactor command bar, add support for icons * Create a tailwind plugin for aria-pressed button state * Remove overlay from behind command bar * Clean up toolbar * Button and other style tweaks * Icon tweaks follow-up: make old icons work with new sizing * Delete unused static icons * More CSS tweaks * Small CSS tweak to project sidebar * Add command bar E2E test * fumpt * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * fix typo in a comment * Fix icon padding (built version only) * Update onboarding and warning banner icons padding * Misc minor style fixes --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
61 lines
1.7 KiB
JavaScript
61 lines
1.7 KiB
JavaScript
const plugin = require('tailwindcss/plugin')
|
|
|
|
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 = {
|
|
mode: 'jit',
|
|
content: ['./src/**/*.{js,jsx,ts,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
...themeColors,
|
|
},
|
|
},
|
|
},
|
|
darkMode: 'class',
|
|
plugins: [
|
|
require('@headlessui/tailwindcss'),
|
|
// custom plugin to add variants for aria-pressed
|
|
// To use, just add a class of 'group-pressed:<some-tailwind-class>' or 'pressed:<some-tailwind-class>'
|
|
// to your element. Based on https://dev.to/philw_/tying-tailwind-styling-to-aria-attributes-502f
|
|
plugin(function ({ addVariant, e }) {
|
|
addVariant('group-pressed', ({ modifySelectors, separator }) => {
|
|
modifySelectors(({ className }) => {
|
|
return `.group[aria-pressed='true'] .${e(
|
|
`group-pressed${separator}${className}`
|
|
)}`
|
|
})
|
|
})
|
|
addVariant('pressed', ({ modifySelectors, separator }) => {
|
|
modifySelectors(({ className }) => {
|
|
return `.${e(`pressed${separator}${className}`)}[aria-pressed='true']`
|
|
})
|
|
})
|
|
}),
|
|
],
|
|
}
|