feat(renderer): configure shadcn/ui, extend design tokens for glassy aesthetic

tailwind.config.js

@@ -1,3 +1,5 @@
+const animate = require('tailwindcss-animate')
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ['class'],
@@ -6,42 +8,80 @@ module.exports = {
     './src/renderer/index.html',
   ],
   theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: { '2xl': '1400px' },
+    },
     extend: {
       colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
         brand: {
           DEFAULT: '#e5461f',
           dark: '#c93a18',
           light: '#ff6b47',
         },
         success: '#1a7a56',
-        warning: '#eab308',
-        danger: '#ef4444',
-        info: '#0ea5e9',
+        warning: 'hsl(45 93% 47%)',
+        danger: 'hsl(0 84% 60%)',
+        info: 'hsl(199 89% 48%)',
         warm: {
-          50: '#fafbfc',
-          100: '#f5f5f5',
-          200: '#e3e3e3',
-          300: '#d1d1d1',
-          400: '#b0b0b0',
-          500: '#9a9696',
-          600: '#7a7878',
-          700: '#5a5858',
-          800: '#4e4e4e',
-          900: '#464646',
-          950: '#0d0b09',
+          50: '#fafbfc', 100: '#f5f5f5', 200: '#e3e3e3', 300: '#d1d1d1',
+          400: '#b0b0b0', 500: '#9a9696', 600: '#7a7878', 700: '#5a5858',
+          800: '#4e4e4e', 900: '#464646', 950: '#0d0b09',
         },
       },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
       fontFamily: {
         sans: ['"Plus Jakarta Sans"', 'system-ui', 'sans-serif'],
         display: ['"Barlow Condensed"', 'system-ui', 'sans-serif'],
         mono: ['"JetBrains Mono"', '"Fira Code"', '"SF Mono"', 'Consolas', 'monospace'],
       },
-      borderRadius: {
-        lg: '0.75rem',
-        md: '0.5rem',
-        sm: '0.25rem',
+      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' } },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
       },
     },
   },
-  plugins: [require('tailwindcss-animate')],
-};
+  plugins: [animate],
+}