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

Zoom, better sizes, color picker, sidebar footer

Browse Source
This commit is contained in:
Gregory Schier
2023-03-08 19:22:04 -08:00
parent c37cfaf0e4
commit 6c8f4c943a
26 changed files with 424 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
tailwind.config.cjs
View File

@@ -1,56 +1,65 @@
/** @type {import('tailwindcss').Config} */
/** @type {import("tailwindcss").Config} */
module.exports = {
darkMode: ['class', '[data-appearance="dark"]'],
content: [
"./index.html",
"./src-web/**/*.{html,tsx}",
],
theme: {
extend: {},
fontFamily: {
'mono': ['JetBrains Mono', "Menlo", 'monospace'],
},
borderRadius: {
none: '0px',
sm: 'var(--border-radius-sm)',
DEFAULT: 'var(--border-radius)',
md: 'var(--border-radius-md)',
lg: 'var(--border-radius-lg)',
full: '9999px',
},
colors: {
transparent: 'transparent',
white: 'hsl(0 100% 100% / <alpha-value>)',
black: 'hsl(0 100% 0% / <alpha-value>)',
background: 'hsl(var(--color-background) / <alpha-value>)',
placeholder: 'hsl(var(--color-gray-300) / <alpha-value>)',
red: color('red'),
orange: color('orange'),
yellow: color('yellow'),
gray: color('gray'),
blue: color('blue'),
green: color('green'),
pink: color('pink'),
violet: color('violet'),
}
darkMode: ["class", "[data-appearance=\"dark\"]"],
content: [
"./index.html",
"./src-web/**/*.{html,tsx}"
],
theme: {
extend: {},
fontFamily: {
"mono": ["JetBrains Mono", "Menlo", "monospace"]
},
plugins: [],
}
fontSize: {
sm: "0.9rem",
base: "1rem",
xl: "1.25rem",
"2xl": "1.563rem",
"3xl": "1.953rem",
"4xl": "2.441rem",
"5xl": "3.052rem"
},
borderRadius: {
none: "0px",
sm: "var(--border-radius-sm)",
DEFAULT: "var(--border-radius)",
md: "var(--border-radius-md)",
lg: "var(--border-radius-lg)",
full: "9999px"
},
colors: {
transparent: "transparent",
white: "hsl(0 100% 100% / <alpha-value>)",
black: "hsl(0 100% 0% / <alpha-value>)",
background: "hsl(var(--color-background) / <alpha-value>)",
placeholder: "hsl(var(--color-gray-400) / <alpha-value>)",
red: color("red"),
orange: color("orange"),
yellow: color("yellow"),
gray: color("gray"),
blue: color("blue"),
green: color("green"),
pink: color("pink"),
violet: color("violet")
}
},
plugins: []
};
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>)`,
};
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>)`
};
}