Tailwind: Move customization into CSS (#5477)

* 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>

src/assets/css/style.css

@@ -7,7 +7,6 @@
 
 @config '../../../tailwind.config.ts';
 
-
 :root {
   --fg-color: #000;
   --bg-color: #fff;
@@ -48,6 +47,91 @@
   }
 }
 
+@theme {
+  --text-xxs: 0.625rem;
+  --text-xxs--line-height: calc(1 / 0.625);
+
+  /* Palette Colors */
+  --color-charcoal-100: #171718;
+  --color-charcoal-200: #202121;
+  --color-charcoal-300: #262729;
+  --color-charcoal-400: #2d2e32;
+  --color-charcoal-500: #313235;
+  --color-charcoal-600: #3c3d42;
+  --color-charcoal-700: #494a50;
+  --color-charcoal-800: #55565e;
+
+  --color-stone-100: #444444;
+  --color-stone-200: #828282;
+  --color-stone-300: #bbbbbb;
+
+  --color-ivory-100: #fdfbfa;
+  --color-ivory-200: #faf9f5;
+  --color-ivory-300: #f0eee6;
+
+  --color-gray-100: #f3f3f3;
+  --color-gray-200: #e9e9e9;
+  --color-gray-300: #e1e1e1;
+  --color-gray-400: #d9d9d9;
+  --color-gray-500: #c5c5c5;
+  --color-gray-600: #b4b4b4;
+  --color-gray-700: #a0a0a0;
+  --color-gray-800: #8a8a8a;
+
+  --color-sand-100: #e1ded5;
+  --color-sand-200: #d6cfc2;
+  --color-sand-300: #888682;
+
+  --color-slate-100: #9c9eab;
+  --color-slate-200: #9fa2bd;
+  --color-slate-300: #5b5e7d;
+
+  --color-brand-yellow: #f0ff41;
+  --color-brand-blue: #172dd7;
+
+  --color-blue-100: #0b8ce9;
+  --color-blue-200: #31b9f4;
+  --color-success-100: #00cd72;
+  --color-success-200: #47e469;
+  --color-warning-100: #fd9903;
+  --color-warning-200: #fcbf64;
+  --color-danger-100: #c02323;
+  --color-danger-200: #d62952;
+
+  --color-error: #962a2a;
+
+  --color-blue-selection: rgb( from var(--color-blue-100) r g b / 0.3); 
+  --color-node-hover-100: rgb( from var(--color-charcoal-800) r g b/ 0.15);
+  --color-node-hover-200: rgb(from var(--color-charcoal-800) r g b/ 0.1);
+  --color-modal-tag: rgb(from var(--color-gray-400) r g b/ 0.4);
+
+  /* PrimeVue pulled colors */
+  --color-muted: var(--p-text-muted-color);
+  --color-highlight: var(--p-primary-color);
+
+  /* Special Colors (temporary) */
+  --color-dark-elevation-1.5: rgba(from white r g b/ 0.015);
+  --color-dark-elevation-2: rgba(from white r g b / 0.03);
+}
+
+@custom-variant dark-theme {
+  .dark-theme & {
+    @slot;
+  }
+}
+
+@utility scrollbar-hide {
+  scrollbar-width: none;
+  &::-webkit-scrollbar { 
+    width: 1px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+}
+
+/* Everthing below here to be cleaned up over time. */
+
 body {
   width: 100vw;
   height: 100vh;
@@ -790,7 +874,7 @@ audio.comfy-audio.empty-audio-widget {
 .comfy-load-3d,
 .comfy-load-3d-animation,
 .comfy-preview-3d,
-.comfy-preview-3d-animation{
+.comfy-preview-3d-animation {
   display: flex;
   flex-direction: column;
   background: transparent;
@@ -803,7 +887,7 @@ audio.comfy-audio.empty-audio-widget {
 .comfy-load-3d-animation canvas,
 .comfy-preview-3d canvas,
 .comfy-preview-3d-animation canvas,
-.comfy-load-3d-viewer canvas{
+.comfy-load-3d-viewer canvas {
   display: flex;
   width: 100% !important;
   height: 100% !important;
@@ -880,7 +964,9 @@ audio.comfy-audio.empty-audio-widget {
 
 .lg-node .lg-slot,
 .lg-node .lg-widget {
-  transition: opacity 0.1s ease, font-size 0.1s ease;
+  transition:
+    opacity 0.1s ease,
+    font-size 0.1s ease;
 }
 
 /* Performance optimization during canvas interaction */
@@ -912,4 +998,3 @@ audio.comfy-audio.empty-audio-widget {
   /* Use solid colors only */
   background-image: none !important;
 }
-

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -7,17 +7,16 @@
     :data-node-id="nodeData.id"
     :class="
       cn(
-        'bg-white dark-theme:bg-charcoal-primary',
+        'bg-white dark-theme:bg-charcoal-100',
         'min-w-[445px]',
         'lg-node absolute border border-solid rounded-2xl',
-        'outline outline-transparent outline-2',
+        'outline-transparent outline-2',
         {
           'outline-black dark-theme:outline-white': isSelected
         },
         {
           'border-blue-500 ring-2 ring-blue-300': isSelected,
-          'border-sand-primary dark-theme:border-charcoal-tertiary':
-            !isSelected,
+          'border-sand-100 dark-theme:border-charcoal-300': !isSelected,
           'animate-pulse': executing,
           'opacity-50': nodeData.mode === 4,
           'border-red-500 bg-red-50': error,

tailwind.config.ts

@@ -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)
-    }
+    })
   ]
 }