starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-11 03:26:58 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Theme system refactor (#31)

Browse Source
This commit is contained in:
Gregory Schier
2024-05-21 17:56:06 -07:00
committed by GitHub
parent 8606940dee
commit 83aaeb94f6
82 changed files with 909 additions and 739 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
tailwind.config.cjs
View File

@@ -50,58 +50,45 @@ module.exports = {
'4xs': '0.6rem',
'3xs': '0.675rem',
'2xs': '0.75rem',
xs: '0.8rem',
sm: '0.9rem',
base: '1rem',
xl: '1.25rem',
'xs': '0.8rem',
'sm': '0.9rem',
'base': '1rem',
'xl': '1.25rem',
'2xl': '1.5rem',
'3xl': '2rem',
'4xl': '2.5rem',
'5xl': '3rem',
},
colors: {
selection: 'hsl(var(--color-violet-500) / 0.3)',
focus: 'hsl(var(--color-blue-500) / 0.7)',
invalid: 'hsl(var(--color-red-500))',
highlight: 'hsl(var(--color-gray-500) / 0.3)',
highlightSecondary: 'hsl(var(--color-gray-500) / 0.15)',
transparent: 'transparent',
white: 'hsl(0 100% 100% / <alpha-value>)',
black: 'hsl(0 100% 0% / <alpha-value>)',
placeholder: 'hsl(var(--color-gray-400) / <alpha-value>)',
red: color('red'),
orange: color('orange'),
yellow: color('yellow'),
blue: color('blue'),
green: color('green'),
pink: color('pink'),
violet: color('violet'),
gray: color('gray'),
'transparent': 'transparent',
'placeholder': 'var(--fg-subtler)',
'selection': 'var(--background-selection)',
// New theme values
'border-focus': 'var(--border-focus)',
'fg': 'var(--fg)',
'fg-danger': 'var(--fg-danger)',
'fg-subtle': 'var(--fg-subtle)',
'fg-subtler': 'var(--fg-subtler)',
'fg-primary': 'var(--fg-primary)',
'fg-secondary': 'var(--fg-secondary)',
'fg-success': 'var(--fg-success)',
'fg-info': 'var(--fg-info)',
'fg-notice': 'var(--fg-notice)',
'fg-warning': 'var(--fg-warning)',
'background': 'var(--background)',
'background-active': 'var(--background-active)',
'background-highlight': 'var(--background-highlight)',
'background-highlight-secondary': 'var(--background-highlight-secondary)',
'background-backdrop': 'var(--background-backdrop)',
},
},
plugins: [
require('@tailwindcss/container-queries'),
plugin(function ({ addVariant }) {
plugin(function ({addVariant}) {
addVariant('hocus', ['&:hover', '&:focus-visible', '&.focus:focus']);
addVariant('focus-visible-or-class', ['&:focus-visible', '&.focus:focus']);
addVariant('focus-visible-or-class', ['&:focus-visible']);
}),
],
};
function color(name) {
return {
0: `hsl(var(--color-${name}-0) / <alpha-value>)`,
50: `hsl(var(--color-${name}-50) / <alpha-value>)`,
100: `hsl(var(--color-${name}-100) / <alpha-value>)`,
200: `hsl(var(--color-${name}-200) / <alpha-value>)`,
300: `hsl(var(--color-${name}-300) / <alpha-value>)`,
400: `hsl(var(--color-${name}-400) / <alpha-value>)`,
500: `hsl(var(--color-${name}-500) / <alpha-value>)`,
600: `hsl(var(--color-${name}-600) / <alpha-value>)`,
700: `hsl(var(--color-${name}-700) / <alpha-value>)`,
800: `hsl(var(--color-${name}-800) / <alpha-value>)`,
900: `hsl(var(--color-${name}-900) / <alpha-value>)`,
950: `hsl(var(--color-${name}-950) / <alpha-value>)`,
1000: `hsl(var(--color-${name}-1000) / <alpha-value>)`,
};
}