forgejo/tailwind.config.js
silverwind def21375b7
Change --border-radius-circle to --border-radius-full (gitea#30936)
Cherry-pick of 2ced31e81d adapted to Forgejo releases UI.

Percentage-based `border-radius` [creates undesirable
ellipse](https://jsfiddle.net/silverwind/j9ko5wnt/4/) on non-square
content. Instead, use pixel value and use same wording `full` like
tailwind does, but increast to 99999px over their 9999px.

(cherry picked from commit 2ced31e81dd9e45659660c1abff529d0192fd8ed)
Adapted by @0ko

(cherry picked from commit afa1380672)
(cherry picked from commit 7b7318255e68ee7e4d0f5b1b8e5ef91cd72a59e5)
2024-05-29 13:52:42 +02:00

102 lines
3.1 KiB
JavaScript

import {readFileSync} from 'node:fs';
import {env} from 'node:process';
import {parse} from 'postcss';
const isProduction = env.NODE_ENV !== 'development';
function extractRootVars(css) {
const root = parse(css);
const vars = new Set();
root.walkRules((rule) => {
if (rule.selector !== ':root') return;
rule.each((decl) => {
if (decl.value && decl.prop.startsWith('--')) {
vars.add(decl.prop.substring(2));
}
});
});
return Array.from(vars);
}
const vars = extractRootVars([
readFileSync(new URL('web_src/css/themes/theme-gitea-light.css', import.meta.url), 'utf8'),
readFileSync(new URL('web_src/css/themes/theme-gitea-dark.css', import.meta.url), 'utf8'),
].join('\n'));
export default {
prefix: 'tw-',
important: true, // the frameworks are mixed together, so tailwind needs to override other framework's styles
content: [
isProduction && '!./templates/devtest/**/*',
isProduction && '!./web_src/js/standalone/devtest.js',
'!./templates/swagger/v1_json.tmpl',
'!./templates/user/auth/oidc_wellknown.tmpl',
'!**/*_test.go',
'!./modules/{public,options,templates}/bindata.go',
'./{build,models,modules,routers,services}/**/*.go',
'./templates/**/*.tmpl',
'./web_src/js/**/*.{js,vue}',
].filter(Boolean),
blocklist: [
// classes that don't work without CSS variables from "@tailwind base" which we don't use
'transform', 'shadow', 'ring', 'blur', 'grayscale', 'invert', '!invert', 'filter', '!filter',
'backdrop-filter',
// we use double-class tw-hidden defined in web_src/css/helpers.css for increased specificity
'hidden',
// unneeded classes
'[-a-zA-Z:0-9_.]',
],
theme: {
colors: {
// make `tw-bg-red` etc work with our CSS variables
...Object.fromEntries(vars.filter((prop) => prop.startsWith('color-')).map((prop) => {
const color = prop.substring(6);
return [color, `var(--color-${color})`];
})),
inherit: 'inherit',
current: 'currentcolor',
transparent: 'transparent',
},
borderRadius: {
'none': '0',
'sm': '2px',
'DEFAULT': 'var(--border-radius)', // 4px
'md': 'var(--border-radius-medium)', // 6px
'lg': '8px',
'xl': '12px',
'2xl': '16px',
'3xl': '24px',
'full': 'var(--border-radius-full)',
},
fontFamily: {
sans: 'var(--fonts-regular)',
mono: 'var(--fonts-monospace)',
},
fontWeight: {
light: 'var(--font-weight-light)',
normal: 'var(--font-weight-normal)',
medium: 'var(--font-weight-medium)',
semibold: 'var(--font-weight-semibold)',
bold: 'var(--font-weight-bold)',
},
fontSize: { // not using `rem` units because our root is currently 14px
'xs': '12px',
'sm': '14px',
'base': '16px',
'lg': '18px',
'xl': '20px',
'2xl': '24px',
'3xl': '30px',
'4xl': '36px',
'5xl': '48px',
'6xl': '60px',
'7xl': '72px',
'8xl': '96px',
'9xl': '128px',
...Object.fromEntries(Array.from({length: 100}, (_, i) => {
return [`${i}`, `${i === 0 ? '0' : `${i}px`}`];
})),
},
},
};