feat: buttons with icons in tailwind

i am not proud of some of this code
This commit is contained in:
Samuel Gunter
2024-02-11 23:24:24 -06:00
parent 2eaf1b3c36
commit 000682b4db
6 changed files with 195 additions and 88 deletions

View File

@@ -3,10 +3,23 @@ import presetWebFonts from '@unocss/preset-web-fonts';
import transformerDirectives from '@unocss/transformer-directives';
import transformerVariantGroup from '@unocss/transformer-variant-group';
import { defineConfig } from 'unocss';
import { colors } from './src/shared/util/themeColors';
export default defineConfig({
rules: [
['btn-transition', { transition: 'color 180ms, border-color 150ms, background-color 150ms, transform 50ms' }],
[
'btn-shadow',
{
'box-shadow': '0px 1px 3px 1px var(--shadow-color-15), 0px 1px 2px 0px var(--shadow-color-30);',
},
],
[
'btn-shade',
{
'background-color': 'var(--bg-color-8)',
},
],
[
'ring-offset-0',
{
@@ -16,31 +29,14 @@ export default defineConfig({
],
shortcuts: {
focusable: 'outline-none ring-blue-500/50 dark:ring-blue-400/60 ring-0 focus-visible:ring-4',
btn: 'h-10 w-auto flex cursor-pointer justify-center items-center gap-2 rounded-1 px-4 py-0 text-4.5 btn-transition',
},
theme: {
easing: {
'in-out-expo': 'cubic-bezier(.46, 0, .21, 1)',
'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)',
},
colors: {
ut: {
'burnt-orange': '#BF5700',
black: '#333F48',
orange: '#f8971f',
yellow: '#ffd600',
'light-green': '#a6cd57',
green: '#579d42',
teal: '#00a9b7',
blue: '#005f86',
gray: '#9cadb7',
'off-white': '#d6d2c4',
concrete: '#95a5a6',
},
theme: {
red: '#af2e2d',
black: '#1a2024',
},
},
colors,
},
presets: [