77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import { defineConfig, presetAttributify, presetUno, transformerDirectives, transformerVariantGroup } from 'unocss';
|
|
import { SCREEN_BREAK_POINTS, SHORTCUTS } from '@handpear/enums';
|
|
import presetRemToPx from '@unocss/preset-rem-to-px';
|
|
|
|
export default defineConfig({
|
|
presets: [presetUno(), presetRemToPx(), presetAttributify({ prefixedOnly: true })],
|
|
rules: [
|
|
[
|
|
/^(wh|hw)-(\d+)$/,
|
|
([, , d]) => ({ width: `${Number(d) / 4}rem`, height: `${Number(d) / 4}rem` }),
|
|
{ layer: 'utilities' },
|
|
],
|
|
],
|
|
safelist: [],
|
|
shortcuts: SHORTCUTS,
|
|
theme: {
|
|
breakpoints: {
|
|
xs: `${SCREEN_BREAK_POINTS.XS}px`,
|
|
sm: `${SCREEN_BREAK_POINTS.SM}px`,
|
|
md: `${SCREEN_BREAK_POINTS.MD}px`,
|
|
lg: `${SCREEN_BREAK_POINTS.LG}px`,
|
|
xl: `${SCREEN_BREAK_POINTS.XL}px`,
|
|
xxl: `${SCREEN_BREAK_POINTS.XXL}px`,
|
|
},
|
|
colors: {
|
|
dark: '#000000',
|
|
white: '#ffffff',
|
|
primary: {
|
|
DEFAULT: 'var(--color-primary)',
|
|
hover: 'var(--color-primary-hover)',
|
|
active: 'var(--color-primary-active)',
|
|
bg: {
|
|
DEFAULT: 'var(--color-primary-bg)',
|
|
hover: 'var(--color-primary-bg-hover)',
|
|
},
|
|
},
|
|
info: {
|
|
DEFAULT: 'var(--color-info)',
|
|
hover: 'var(--color-info-hover)',
|
|
active: 'var(--color-info-active)',
|
|
bg: {
|
|
DEFAULT: 'var(--color-info-bg)',
|
|
hover: 'var(--color-info-bg-hover)',
|
|
},
|
|
},
|
|
success: {
|
|
DEFAULT: 'var(--color-success)',
|
|
hover: 'var(--color-success-hover)',
|
|
active: 'var(--color-success-active)',
|
|
bg: {
|
|
DEFAULT: 'var(--color-success-bg)',
|
|
hover: 'var(--color-success-bg-hover)',
|
|
},
|
|
},
|
|
warning: {
|
|
DEFAULT: 'var(--color-warning)',
|
|
hover: 'var(--color-warning-hover)',
|
|
active: 'var(--color-warning-active)',
|
|
bg: {
|
|
DEFAULT: 'var(--color-warning-bg)',
|
|
hover: 'var(--color-warning-bg-hover)',
|
|
},
|
|
},
|
|
error: {
|
|
DEFAULT: 'var(--color-error)',
|
|
hover: 'var(--color-error-hover)',
|
|
active: 'var(--color-error-active)',
|
|
bg: {
|
|
DEFAULT: 'var(--color-error-bg)',
|
|
hover: 'var(--color-error-bg-hover)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
transformers: [transformerDirectives(), transformerVariantGroup()],
|
|
});
|