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

Auto-expand URL bar height

Browse Source
This commit is contained in:
Gregory Schier
2023-10-27 10:57:07 -07:00
parent 356eaf1713
commit 9dafe4f704
6 changed files with 284 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
tailwind.config.cjs
View File

@@ -1,89 +1,89 @@
const plugin = require('tailwindcss/plugin')
const plugin = require('tailwindcss/plugin');
const height = {
xs: '1.75rem',
sm: '2.0rem',
md: '2.5rem',
};
/** @type {import("tailwindcss").Config} */
module.exports = {
darkMode: ["class", "[data-appearance=\"dark\"]"],
content: [
"./index.html",
"./src-web/**/*.{html,js,jsx,ts,tsx}"
],
darkMode: ['class', '[data-appearance="dark"]'],
content: ['./index.html', './src-web/**/*.{html,js,jsx,ts,tsx}'],
theme: {
extend: {
opacity: {
"disabled": "0.3"
disabled: '0.3',
},
fontSize: {
"xs": "0.8rem"
},
height: {
"xs": "1.75rem",
"sm": "2.0rem",
"md": "2.5rem"
xs: '0.8rem',
},
height,
minHeight: height,
lineHeight: {
// HACK: Minus 2 to account for borders inside inputs
"xs": "calc(1.75rem - 2px)",
"sm": "calc(2.0rem - 2px)",
"md": "calc(2.5rem - 2px)"
xs: 'calc(1.75rem - 2px)',
sm: 'calc(2.0rem - 2px)',
md: 'calc(2.5rem - 2px)',
},
},
fontFamily: {
"mono": ["JetBrains Mono", "Menlo", "monospace"],
"sans": [
"Inter",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"Oxygen-Sans",
"Ubuntu",
"Cantarell",
"Helvetica Neue",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
mono: ['JetBrains Mono', 'Menlo', 'monospace'],
sans: [
'Inter',
'-apple-system',
'BlinkMacSystemFont',
'Segoe UI',
'Roboto',
'Oxygen-Sans',
'Ubuntu',
'Cantarell',
'Helvetica Neue',
'sans-serif',
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
],
},
fontSize: {
'3xs': "0.6rem",
'2xs': "0.7rem",
xs: "0.8rem",
sm: "0.9rem",
base: "1rem",
xl: "1.25rem",
"2xl": "1.563rem",
"3xl": "1.953rem",
"4xl": "2.441rem",
"5xl": "3.052rem"
'3xs': '0.6rem',
'2xs': '0.7rem',
xs: '0.8rem',
sm: '0.9rem',
base: '1rem',
xl: '1.25rem',
'2xl': '1.563rem',
'3xl': '1.953rem',
'4xl': '2.441rem',
'5xl': '3.052rem',
},
colors: {
selection: "hsl(var(--color-violet-500) / 0.4)",
focus: "hsl(var(--color-blue-500) / 0.6)",
invalid: "hsl(var(--color-red-500))",
highlight: "hsl(var(--color-gray-300) / 0.35)",
highlightSecondary: "hsl(var(--color-gray-300) / 0.2)",
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"),
gray: color("gray"),
blue: color("blue"),
green: color("green"),
pink: color("pink"),
violet: color("violet")
}
selection: 'hsl(var(--color-violet-500) / 0.4)',
focus: 'hsl(var(--color-blue-500) / 0.6)',
invalid: 'hsl(var(--color-red-500))',
highlight: 'hsl(var(--color-gray-300) / 0.35)',
highlightSecondary: 'hsl(var(--color-gray-300) / 0.2)',
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'),
gray: color('gray'),
blue: color('blue'),
green: color('green'),
pink: color('pink'),
violet: color('violet'),
},
},
plugins: [
require("@tailwindcss/container-queries"),
plugin(function({ addVariant }) {
addVariant('hocus', ['&:hover', '&:focus-visible', '&.focus:focus'])
addVariant('focus-visible-or-class', ['&:focus-visible', '&.focus:focus'])
})
]
require('@tailwindcss/container-queries'),
plugin(function ({ addVariant }) {
addVariant('hocus', ['&:hover', '&:focus-visible', '&.focus:focus']);
addVariant('focus-visible-or-class', ['&:focus-visible', '&.focus:focus']);
}),
],
};
function color(name) {
@@ -100,6 +100,6 @@ function color(name) {
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>)`
1000: `hsl(var(--color-${name}-1000) / <alpha-value>)`,
};
}