Viren070/AIOStreams
1
0
Fork 0
mirror of https://github.com/Viren070/AIOStreams.git synced 2025-12-01 23:14:04 +01:00
Code Issues Packages Projects Releases Wiki Activity
Files
48dbaddf67acd3c028f0218e7e61ba74ffcb71c7
AIOStreams/packages/frontend/tailwind.config.ts
T
Viren070 52179e1bd8 feat(frontend): update ui
2025-07-26 17:15:39 +01:00

507 lines
13 KiB
TypeScript
Raw Blame History

import type { Config } from 'tailwindcss';
const config: Config = {
darkMode: 'class',
content: [
'./src/**/*.{ts,tsx,mdx}',
'./src/app/**/*.{ts,tsx,mdx}',
'./src/pages/**/*.{ts,tsx,mdx}',
'./src/components/**/*.{ts,tsx,mdx}',
],
safelist: [
'bg-amber-900',
'bg-amber-800',
'bg-amber-700',
'bg-amber-600',
'bg-amber-500',
'bg-amber-400',
'bg-amber-400',
'bg-amber-300',
'text-amber-300',
'text-amber-200',
'bg-green-900',
'bg-green-800',
'bg-green-700',
'bg-green-600',
'bg-green-500',
'bg-green-400',
'bg-green-400',
'bg-green-300',
'text-green-300',
'text-green-200',
'bg-gray-900',
'bg-gray-800',
'bg-gray-700',
'bg-gray-600',
'bg-gray-500',
'bg-gray-400',
'bg-gray-400',
'bg-gray-300',
'text-gray-300',
'bg-indigo-900',
'bg-indigo-800',
'bg-indigo-700',
'bg-indigo-600',
'bg-indigo-500',
'bg-indigo-400',
'bg-indigo-400',
'bg-indigo-300',
'text-indigo-300',
'text-indigo-200',
'bg-lime-900',
'bg-lime-800',
'bg-lime-700',
'bg-lime-600',
'bg-lime-500',
'bg-lime-400',
'bg-lime-400',
'bg-lime-300',
'text-lime-300',
'text-lime-200',
'text-lime-400',
'text-lime-500',
'bg-red-900',
'bg-red-800',
'bg-red-700',
'bg-red-600',
'bg-red-500',
'bg-red-400',
'bg-red-400',
'bg-red-300',
'text-red-300',
'text-red-200',
'bg-emerald-900',
'bg-emerald-800',
'bg-emerald-700',
'bg-emerald-600',
'bg-emerald-500',
'bg-emerald-400',
'bg-emerald-400',
'bg-emerald-300',
'text-emerald-300',
'text-emerald-200',
'text-emerald-400',
'text-emerald-500',
'bg-purple-900',
'bg-purple-800',
'bg-purple-700',
'bg-purple-600',
'bg-purple-500',
'bg-purple-400',
'bg-purple-400',
'bg-green-300',
'text-green-300',
'text-green-200',
'text-green-400',
'text-green-500',
'bg-opacity-70',
'bg-opacity-80',
'bg-opacity-70',
'bg-opacity-60',
'bg-opacity-50',
'bg-opacity-30',
'bg-opacity-20',
'bg-opacity-10',
'bg-opacity-5',
'text-audienceScore-100',
'text-audienceScore-200',
'text-audienceScore-300',
'text-audienceScore-400',
'text-audienceScore-500',
'text-audienceScore-600',
'text-audienceScore-700',
'text-audienceScore-800',
'text-audienceScore-900',
'drop-shadow-sm',
'-top-10 top-10',
{
pattern:
/bg-(red|green|blue|gray|brand|orange|yellow)-(100|200|300|400|500|600|700|800|900|950)/,
variants: ['hover'],
},
// {
// pattern: /text-(red|green|blue|gray|brand|orange|yellow)-(100|200|300|400|500|600|700|800|900|950)/,
// variants: ['hover'],
// },
// {
// pattern: /border-(red|green|blue|gray|brand|orange|yellow)-(100|200|300|400|500|600|700|800|900|950)/,
// },
{
pattern: /p-[0-9]+/,
},
{
pattern: /m-[0-9]+/,
},
{
pattern: /gap-[0-9]+/,
},
{
pattern: /(px|py|pt|pb|pl|pr)-[0-9]+/,
},
{
pattern: /(mx|my|mt|mb|ml|mr)-[0-9]+/,
},
{
pattern: /grid-cols-[1-9]+/,
variants: ['lg'],
},
{
pattern: /col-span-[1-9]+/,
variants: ['lg'],
},
'flex',
'inline-flex',
'grid',
'inline-grid',
'flex-row',
'flex-col',
'flex-row-reverse',
'flex-col-reverse',
'flex-wrap',
'flex-nowrap',
'flex-wrap-reverse',
'items-start',
'items-center',
'items-end',
'items-baseline',
'items-stretch',
'justify-start',
'justify-center',
'justify-end',
'justify-between',
'justify-around',
'justify-evenly',
{
pattern:
/flex|inline-flex|grid|inline-grid|flex-row|flex-col|flex-row-reverse|flex-col-reverse|flex-wrap|flex-nowrap|flex-wrap-reverse|items-start|items-center|items-end|items-baseline|items-stretch|justify-start|justify-center|justify-end|justify-between|justify-around|justify-evenly/,
variants: ['lg', 'md'],
},
// {
// pattern: /w-[0-9]+/,
// variants: ['lg', 'md', 'sm', 'xl', '2xl'],
// },
// {
// pattern: /h-[0-9]+/,
// variants: ['lg', 'md', 'sm', 'xl', '2xl'],
// },
'w-full',
'h-full',
'w-screen',
'h-screen',
'w-auto',
'h-auto',
'min-w-0',
'min-h-0',
'max-w-none',
'max-h-none',
{
pattern: /text-xs|text-sm|text-base|text-lg|text-xl|text-2xl|text-3xl/,
variants: ['lg', 'md'],
},
{
pattern:
/font-thin|font-light|font-normal|font-medium|font-semibold|font-bold/,
variants: ['lg', 'md'],
},
{
pattern: /text-left|text-center|text-right|text-justify/,
variants: ['lg', 'md'],
},
'uppercase',
'lowercase',
'capitalize',
'normal-case',
'truncate',
'overflow-ellipsis',
'overflow-clip',
'rounded-none',
'rounded-sm',
'rounded',
'rounded-md',
'rounded-lg',
'rounded-xl',
'rounded-2xl',
'rounded-3xl',
'rounded-full',
'border',
'border-0',
'border-2',
'border-4',
'border-8',
// {
// pattern: /border-[0-9]+/,
// variants: ['lg', 'md', 'sm', 'xl', '2xl', 'hover', 'focus'],
// },
'shadow-sm',
'shadow',
'shadow-md',
'shadow-lg',
'shadow-xl',
'shadow-2xl',
'shadow-inner',
'shadow-none',
'opacity-0',
'opacity-25',
'opacity-50',
'opacity-75',
'opacity-100',
// "transition", "transition-all", "transition-colors", "transition-opacity", "transition-shadow", "transition-transform",
// "duration-75", "duration-100", "duration-150", "duration-200", "duration-300", "duration-500", "duration-700", "duration-1000",
// "ease-linear", "ease-in", "ease-out", "ease-in-out",
// "scale-0", "scale-50", "scale-75", "scale-90", "scale-95", "scale-100", "scale-105", "scale-110", "scale-125", "scale-150",
// "rotate-0", "rotate-45", "rotate-90", "rotate-180", "-rotate-45", "-rotate-90", "-rotate-180",
// "translate-x-0", "translate-x-1", "translate-x-2", "translate-x-4", "translate-x-8",
// "translate-y-0", "translate-y-1", "translate-y-2", "translate-y-4", "translate-y-8",
'cursor-pointer',
'cursor-not-allowed',
'cursor-wait',
'cursor-text',
'cursor-move',
'cursor-help',
'select-none',
'select-text',
'select-all',
'select-auto',
'pointer-events-none',
'pointer-events-auto',
'resize',
'resize-none',
'resize-y',
'resize-x',
'static',
'fixed',
'absolute',
'relative',
'sticky',
'top-0',
'right-0',
'bottom-0',
'left-0',
'z-0',
'z-10',
'z-20',
'z-30',
'z-40',
'z-50',
'z-auto',
'block',
'inline-block',
'inline',
'hidden',
{
pattern: /hidden|block|inline|inline-block/,
variants: ['lg', 'md'],
},
'overflow-auto',
'overflow-hidden',
'overflow-visible',
'overflow-scroll',
'overflow-x-auto',
'overflow-y-auto',
'overflow-x-hidden',
'overflow-y-hidden',
],
theme: {
container: {
center: true,
padding: {
DEFAULT: '1rem',
sm: '2rem',
lg: '4rem',
xl: '5rem',
'2xl': '6rem',
},
screens: {
'2xl': '1400px',
'3xl': '1600px',
'4xl': '1800px',
'5xl': '2000px',
'6xl': '2200px',
'7xl': '2400px',
},
},
data: {
checked: 'checked',
selected: 'selected',
disabled: 'disabled',
highlighted: 'highlighted',
},
extend: {
screens: {
'3xl': '1600px',
'4xl': '1800px',
'5xl': '2000px',
'6xl': '2200px',
'7xl': '2400px',
},
animationDuration: {
DEFAULT: '0.25s',
},
keyframes: {
'accordion-down': {
from: { height: '0' },
to: { height: 'var(--radix-accordion-content-height)' },
},
'accordion-up': {
from: { height: 'var(--radix-accordion-content-height)' },
to: { height: '0' },
},
'slide-down': {
from: { transform: 'translateY(-1rem)', opacity: '0' },
to: { transform: 'translateY(0)', opacity: '1' },
},
'slide-up': {
from: { transform: 'translateY(0)', opacity: '1' },
to: { transform: 'translateY(-1rem)', opacity: '0' },
},
'indeterminate-progress': {
'0%': { transform: ' translateX(0) scaleX(0)' },
'40%': { transform: 'translateX(0) scaleX(0.4)' },
'100%': { transform: 'translateX(100%) scaleX(0.5)' },
},
},
animation: {
'accordion-down': 'accordion-down 0.15s linear',
'accordion-up': 'accordion-up 0.15s linear',
'slide-down': 'slide-down 0.15s ease-in-out',
'slide-up': 'slide-up 0.15s ease-in-out',
'indeterminate-progress': 'indeterminate-progress 1s infinite ease-out',
},
transformOrigin: {
'left-right': '0% 100%',
},
boxShadow: {
md: '0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06)',
},
colors: {
brand: {
50: 'rgb(var(--color-brand-50) / <alpha-value>)',
100: 'rgb(var(--color-brand-100) / <alpha-value>)',
200: 'rgb(var(--color-brand-200) / <alpha-value>)',
300: 'rgb(var(--color-brand-300) / <alpha-value>)',
400: 'rgb(var(--color-brand-400) / <alpha-value>)',
500: 'rgb(var(--color-brand-500) / <alpha-value>)',
600: 'rgb(var(--color-brand-600) / <alpha-value>)',
700: 'rgb(var(--color-brand-700) / <alpha-value>)',
800: 'rgb(var(--color-brand-800) / <alpha-value>)',
900: 'rgb(var(--color-brand-900) / <alpha-value>)',
950: 'rgb(var(--color-brand-950) / <alpha-value>)',
DEFAULT: 'rgb(var(--color-brand-500) / <alpha-value>)',
},
gray: {
50: 'rgb(var(--color-gray-50) / <alpha-value>)',
100: 'rgb(var(--color-gray-100) / <alpha-value>)',
200: 'rgb(var(--color-gray-200) / <alpha-value>)',
300: 'rgb(var(--color-gray-300) / <alpha-value>)',
400: 'rgb(var(--color-gray-400) / <alpha-value>)',
500: 'rgb(var(--color-gray-500) / <alpha-value>)',
600: 'rgb(var(--color-gray-600) / <alpha-value>)',
700: 'rgb(var(--color-gray-700) / <alpha-value>)',
800: 'rgb(var(--color-gray-800) / <alpha-value>)',
900: 'rgb(var(--color-gray-900) / <alpha-value>)',
950: 'rgb(var(--color-gray-950) / <alpha-value>)',
DEFAULT: 'rgb(var(--color-gray-500) / <alpha-value>)',
},
green: {
50: '#e6f7ea',
100: '#cfead6',
200: '#7bd0a7',
300: '#68b695',
400: '#57a181',
500: '#258c60',
600: '#1a6444',
700: '#154f37',
800: '#103b29',
900: '#0a2318',
950: '#05130d',
DEFAULT: '#258c60',
},
audienceScore: {
300: '#b45d5d',
500: '#9d8741',
600: '#a0b974',
700: '#57a181',
},
background: {
500: 'rgb(var(--background) / <alpha-value>)',
DEFAULT: 'rgb(var(--background) / <alpha-value>)',
},
},
},
},
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
require('@headlessui/tailwindcss'),
require('tailwind-scrollbar-hide'),
require('tailwindcss-animate'),
addVariablesForColors,
function ({
addVariant,
}: {
addVariant: (variant: string, selector: string) => void;
}) {
addVariant('firefox', ':-moz-any(&)');
},
],
};
export default config;
function addVariablesForColors({ addBase, theme }: any) {
let allColors = flattenColorPalette(theme('colors'));
let newVars = Object.fromEntries(
Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
);
addBase({
':root': newVars,
});
}
type Colors = {
[key: string | number]: string | Colors;
};
function flattenColorPalette(colors: Colors) {
let result: Record<string, string> = {};
for (let [root, children] of Object.entries(colors ?? {})) {
if (root === '__CSS_VALUES__') continue;
if (typeof children === 'object' && children !== null) {
for (let [parent, value] of Object.entries(
flattenColorPalette(children)
)) {
result[`${root}${parent === 'DEFAULT' ? '' : `-${parent}`}`] = value;
}
} else {
result[root] = children;
}
}
if ('__CSS_VALUES__' in colors) {
for (let [key, value] of Object.entries(colors.__CSS_VALUES__)) {
if ((Number(value) & (1 << 2)) === 0) {
result[key] = colors[key] as string;
}
}
}
return result;
}
Reference in New Issue View Git Blame Copy Permalink