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

components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/renderer/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

src/renderer/styles/globals.css

@@ -24,6 +24,14 @@
     --input: 0 0% 90%;
     --ring: 11 79% 51%;
     --radius: 0.5rem;
+    --shadow-sm: 0 1px 2px rgba(13, 11, 9, 0.06);
+    --shadow-md: 0 4px 12px rgba(13, 11, 9, 0.08), 0 0 0 1px rgba(13, 11, 9, 0.04);
+    --shadow-lg: 0 12px 32px rgba(13, 11, 9, 0.12), 0 0 0 1px rgba(13, 11, 9, 0.06);
+    --shadow-glow-brand: 0 0 24px rgba(229, 70, 31, 0.25);
+    --glass-bg-light: rgba(255, 255, 255, 0.72);
+    --glass-bg-dark: rgba(13, 11, 9, 0.72);
+    --glass-border-light: rgba(255, 255, 255, 0.4);
+    --glass-border-dark: rgba(255, 255, 255, 0.08);
   }
 
   .dark {
@@ -46,6 +54,14 @@
     --border: 30 6% 15%;
     --input: 30 6% 15%;
     --ring: 11 79% 51%;
+    --shadow-sm: 0 1px 2px rgba(13, 11, 9, 0.06);
+    --shadow-md: 0 4px 12px rgba(13, 11, 9, 0.08), 0 0 0 1px rgba(13, 11, 9, 0.04);
+    --shadow-lg: 0 12px 32px rgba(13, 11, 9, 0.12), 0 0 0 1px rgba(13, 11, 9, 0.06);
+    --shadow-glow-brand: 0 0 24px rgba(229, 70, 31, 0.25);
+    --glass-bg-light: rgba(255, 255, 255, 0.72);
+    --glass-bg-dark: rgba(13, 11, 9, 0.72);
+    --glass-border-light: rgba(255, 255, 255, 0.4);
+    --glass-border-dark: rgba(255, 255, 255, 0.08);
   }
 
   * {

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',
+        warning: 'hsl(45 93% 47%)',
-        danger: '#ef4444',
+        danger: 'hsl(0 84% 60%)',
-        info: '#0ea5e9',
+        info: 'hsl(199 89% 48%)',
         warm: {
-          50: '#fafbfc',
+          50: '#fafbfc', 100: '#f5f5f5', 200: '#e3e3e3', 300: '#d1d1d1',
-          100: '#f5f5f5',
+          400: '#b0b0b0', 500: '#9a9696', 600: '#7a7878', 700: '#5a5858',
-          200: '#e3e3e3',
+          800: '#4e4e4e', 900: '#464646', 950: '#0d0b09',
-          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: {
+      keyframes: {
-        lg: '0.75rem',
+        'accordion-down': { from: { height: '0' }, to: { height: 'var(--radix-accordion-content-height)' } },
-        md: '0.5rem',
+        'accordion-up': { from: { height: 'var(--radix-accordion-content-height)' }, to: { height: '0' } },
-        sm: '0.25rem',
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
       },
     },
   },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [animate],
-};
+}