Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-21 23:09:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Tailwind: Move customization into CSS (#5477)

Browse Source 
* tailwind: Migrate out of the js/ts config part 1

* tailwind: Migrate custom variant and utility

* Update test expectations [skip ci]

* tailwind: Use relative colors for alpha variants

* fix: Use the new numbered color tokens

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Alexander Brown
2025-09-10 18:39:37 -07:00
committed by GitHub
parent 2e64c64ac7
commit ca220440b2
9 changed files with 94 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

313
tailwind.config.ts
View File

@@ -6,298 +6,6 @@ import { iconCollection } from './build/customIconCollection'
export default {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
fontSize: {
xxs: '0.625rem',
xs: '0.75rem',
sm: '0.875rem',
base: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '4rem'
},
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
'3xl': '1800px',
'4xl': '2500px',
'5xl': '3200px'
},
spacing: {
px: '1px',
0: '0px',
0.5: '0.125rem',
1: '0.25rem',
1.5: '0.375rem',
2: '0.5rem',
2.5: '0.625rem',
3: '0.75rem',
3.5: '0.875rem',
4: '1rem',
4.5: '1.125rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem',
11: '2.75rem',
12: '3rem',
14: '3.5rem',
16: '4rem',
18: '4.5rem',
20: '5rem',
24: '6rem',
28: '7rem',
32: '8rem',
36: '9rem',
40: '10rem',
44: '11rem',
48: '12rem',
52: '13rem',
56: '14rem',
60: '15rem',
64: '16rem',
72: '18rem',
75: '18.75rem',
80: '20rem',
84: '22rem',
90: '24rem',
96: '26rem',
100: '28rem',
110: '32rem'
},
extend: {
colors: {
zinc: {
50: '#fafafa',
100: '#8282821a',
200: '#e4e4e7',
300: '#d4d4d8',
400: '#A1A3AE',
500: '#71717a',
600: '#52525b',
700: '#38393b',
800: '#262729',
900: '#18181b',
950: '#09090b'
},
gray: {
50: '#f8fbfc',
100: '#f3f6fa',
200: '#edf2f7',
300: '#e2e8f0',
400: '#cbd5e0',
500: '#a0aec0',
600: '#718096',
700: '#4a5568',
800: '#2d3748',
900: '#1a202c',
950: '#0a1016'
},
teal: {
50: '#f0fdfa',
100: '#e0fcff',
200: '#bef8fd',
300: '#87eaf2',
400: '#54d1db',
500: '#38bec9',
600: '#2cb1bc',
700: '#14919b',
800: '#0e7c86',
900: '#005860',
950: '#022c28'
},
blue: {
50: '#eff6ff',
100: '#ebf8ff',
200: '#bee3f8',
300: '#90cdf4',
400: '#63b3ed',
500: '#4299e1',
600: '#3182ce',
700: '#2b6cb0',
800: '#2c5282',
900: '#2a4365',
950: '#172554'
},
green: {
50: '#fcfff5',
100: '#fafff3',
200: '#eaf9c9',
300: '#d1efa0',
400: '#b2e16e',
500: '#96ce4c',
600: '#7bb53d',
700: '#649934',
800: '#507b2e',
900: '#456829',
950: '#355819'
},
fuchsia: {
50: '#fdf4ff',
100: '#fae8ff',
200: '#f5d0fe',
300: '#f0abfc',
400: '#e879f9',
500: '#d946ef',
600: '#c026d3',
700: '#a21caf',
800: '#86198f',
900: '#701a75',
950: '#4a044e'
},
orange: {
50: '#fff7ed',
100: '#ffedd5',
200: '#fedbb8',
300: '#fbd38d',
400: '#f6ad55',
500: '#ed8936',
600: '#dd6b20',
700: '#c05621',
800: '#9c4221',
900: '#7b341e',
950: '#431407'
},
yellow: {
50: '#fffef5',
100: '#fffce8',
200: '#fff8c5',
300: '#fff197',
400: '#ffcc00',
500: '#ffc000',
600: '#e6a800',
700: '#cc9600',
800: '#b38400',
900: '#997200',
950: '#664d00'
},
// Base colors
'pure-black': '#000000',
'pure-white': '#FFFFFF',
// Charcoal palette
'charcoal-100': '#171718',
'charcoal-200': '#202121',
'charcoal-300': '#262729',
'charcoal-400': '#2D2E32',
'charcoal-500': '#313235',
'charcoal-600': '#3C3D42',
'charcoal-700': '#494A50',
'charcoal-800': '#55565E',
// Stone palette
'stone-100': '#444444',
'stone-200': '#828282',
'stone-300': '#BBBBBB',
// Ivory palette
'ivory-100': '#FDFBFA',
'ivory-200': '#FAF9F5',
'ivory-300': '#F0EEE6',
// Gray palette
'gray-100': '#F3F3F3',
'gray-200': '#E9E9E9',
'gray-300': '#E1E1E1',
'gray-400': '#D9D9D9',
'gray-500': '#C5C5C5',
'gray-600': '#B4B4B4',
'gray-700': '#A0A0A0',
'gray-800': '#8A8A8A',
// Sand palette
'sand-100': '#E1DED5',
'sand-200': '#D6CFC2',
'sand-300': '#888682',
// Slate palette
'slate-100': '#9C9EAB',
'slate-200': '#9FA2BD',
'slate-300': '#5B5E7D',
// Brand colors
'brand-yellow': '#F0FF41',
'brand-blue': '#172DD7',
// Functional colors
'blue-100': '#0B8CE9',
'blue-200': '#31B9F4',
'success-100': '#00CD72',
'success-200': '#47E469',
'warning-100': '#FD9903',
'warning-200': '#FCBF64',
'danger-100': '#C02323',
'danger-200': '#D62952',
error: '#962A2A',
// Alpha variants
'blue-selection': 'rgba(11, 140, 233, 0.3)',
'node-hover-100': 'rgba(85, 86, 94, 0.15)',
'node-hover-200': 'rgba(85, 86, 94, 0.1)',
'modal-tag': 'rgba(217, 217, 217, 0.4)'
},
textColor: {
muted: 'var(--p-text-muted-color)',
highlight: 'var(--p-primary-color)'
},
/**
* Box shadows for different elevation levels
* https://m3.material.io/styles/elevation/overview
*/
boxShadow: {
'elevation-0': 'none',
'elevation-1':
'0 0 2px 0px rgb(0 0 0 / 0.01), 0 1px 2px -1px rgb(0 0 0 / 0.03), 0 1px 1px -1px rgb(0 0 0 / 0.01)',
'elevation-1.5':
'0 0 2px 0px rgb(0 0 0 / 0.025), 0 1px 2px -1px rgb(0 0 0 / 0.03), 0 1px 1px -1px rgb(0 0 0 / 0.01)',
'elevation-2':
'0 0 10px 0px rgb(0 0 0 / 0.06), 0 6px 8px -2px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.04)',
'elevation-3':
'0 0 15px 0px rgb(0 0 0 / 0.10), 0 8px 12px -3px rgb(0 0 0 / 0.09), 0 3px 5px -4px rgb(0 0 0 / 0.06)',
'elevation-4':
'0 0 18px 0px rgb(0 0 0 / 0.12), 0 10px 15px -3px rgb(0 0 0 / 0.11), 0 4px 6px -4px rgb(0 0 0 / 0.08)',
'elevation-5':
'0 0 20px 0px rgb(0 0 0 / 0.14), 0 12px 16px -4px rgb(0 0 0 / 0.13), 0 5px 7px -5px rgb(0 0 0 / 0.10)'
},
/**
* Background colors for different elevation levels
* https://m3.material.io/styles/elevation/overview
*/
backgroundColor: {
'dark-elevation-0': 'rgba(255, 255, 255, 0)',
'dark-elevation-1': 'rgba(255, 255, 255, 0.01)',
'dark-elevation-1.5': 'rgba(255, 255, 255, 0.015)',
'dark-elevation-2': 'rgba(255, 255, 255, 0.03)',
'dark-elevation-3': 'rgba(255, 255, 255, 0.04)',
'dark-elevation-4': 'rgba(255, 255, 255, 0.08)',
'dark-elevation-5': 'rgba(2 55, 255, 255, 0.12)'
}
}
},
plugins: [
addDynamicIconSelectors({
iconSets: {
@@ -305,25 +13,6 @@ export default {
lucide
},
prefix: 'icon'
}),
function ({ addVariant }) {
addVariant('dark-theme', '.dark-theme &')
},
function ({ addUtilities }) {
const newUtilities = {
'.scrollbar-hide': {
/* Firefox */
'scrollbar-width': 'none',
/* Webkit-based browsers */
'&::-webkit-scrollbar': {
width: '1px'
},
'&::-webkit-scrollbar-thumb': {
'background-color': 'transparent'
}
}
}
addUtilities(newUtilities)
}
})
]
}