68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import { defineConfig, presetWind4 } from 'unocss'
|
|
|
|
export default defineConfig({
|
|
presets: [
|
|
presetWind4(),
|
|
],
|
|
// Wind4 uses color-mix with oklch - opacity modifiers (bg-surface/50)
|
|
// don't work with CSS variables. Use color-mix shortcuts instead.
|
|
shortcuts: {
|
|
'bg-glass-surface': '[background:color-mix(in_srgb,var(--v0-surface)_70%,transparent)] backdrop-blur-12',
|
|
'border-subtle': '[border-color:color-mix(in_srgb,var(--v0-divider)_50%,transparent)]',
|
|
'sr-only': 'absolute w-1px h-1px p-0 -m-1px overflow-hidden whitespace-nowrap border-0',
|
|
},
|
|
preflights: [
|
|
{
|
|
getCSS: () => `
|
|
html {
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
button:not(:disabled),
|
|
[role="button"]:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
*:focus-visible {
|
|
outline: 2px solid var(--v0-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
`,
|
|
},
|
|
],
|
|
theme: {
|
|
colors: {
|
|
'primary': 'var(--v0-primary)',
|
|
'secondary': 'var(--v0-secondary)',
|
|
'error': 'var(--v0-error)',
|
|
'info': 'var(--v0-info)',
|
|
'success': 'var(--v0-success)',
|
|
'warning': 'var(--v0-warning)',
|
|
'background': 'var(--v0-background)',
|
|
'surface': 'var(--v0-surface)',
|
|
'surface-tint': 'var(--v0-surface-tint)',
|
|
'surface-variant': 'var(--v0-surface-variant)',
|
|
'divider': 'var(--v0-divider)',
|
|
'on-primary': 'var(--v0-on-primary)',
|
|
'on-secondary': 'var(--v0-on-secondary)',
|
|
'on-error': 'var(--v0-on-error)',
|
|
'on-info': 'var(--v0-on-info)',
|
|
'on-success': 'var(--v0-on-success)',
|
|
'on-warning': 'var(--v0-on-warning)',
|
|
'on-background': 'var(--v0-on-background)',
|
|
'on-surface': 'var(--v0-on-surface)',
|
|
'on-surface-variant': 'var(--v0-on-surface-variant)',
|
|
},
|
|
},
|
|
})
|