From 05d9d418602663f655f16a1f1c32fd3b66fd034a Mon Sep 17 00:00:00 2001 From: MacRimi Date: Thu, 2 Oct 2025 17:10:27 +0200 Subject: [PATCH] Update AppImage --- AppImage/app/globals.css | 114 +++++++++++++++++--------------- AppImage/tailwind.config.js | 126 +++++++++++++++--------------------- 2 files changed, 112 insertions(+), 128 deletions(-) diff --git a/AppImage/app/globals.css b/AppImage/app/globals.css index 30f6371..31e5aad 100644 --- a/AppImage/app/globals.css +++ b/AppImage/app/globals.css @@ -1,8 +1,9 @@ -@import "tailwindcss"; -@import "tw-animate-css"; - -@custom-variant dark (&:is(.dark *)); +@tailwind base; +@tailwind components; +@tailwind utilities; +/* ==== Design tokens (CSS variables) ==== */ +/* Ajustes suaves: bajamos ligeramente el contraste de --border, --ring y tonos secundarios */ :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); @@ -12,73 +13,80 @@ --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.97 0 0); + --secondary: oklch(0.975 0 0); /* + suave */ --secondary-foreground: oklch(0.205 0 0); - --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); - --accent: oklch(0.97 0 0); + --muted: oklch(0.975 0 0); /* + suave */ + --muted-foreground: oklch(0.56 0 0); + --accent: oklch(0.975 0 0); /* + suave */ --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); - --ring: oklch(0.708 0 0); + + /* SUAVIZADO CLAVE EN BORDES/LÍNEAS */ + --border: oklch(0.94 0 0); /* antes 0.922 */ + --input: oklch(0.94 0 0); + --ring: oklch(0.76 0 0); /* antes 0.708, un poco menos gris = más limpio */ + + /* Charts */ --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); + --radius: 0.625rem; - --sidebar: oklch(0.985 0 0); + + /* Sidebar */ + --sidebar: oklch(0.99 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent: oklch(0.975 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); + --sidebar-border: oklch(0.94 0 0); + --sidebar-ring: oklch(0.76 0 0); } -@theme inline { - /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */ - --color-background: var(--background); - --color-foreground: var(--foreground); - --color-card: var(--card); - --color-card-foreground: var(--card-foreground); - --color-popover: var(--popover); - --color-popover-foreground: var(--popover-foreground); - --color-primary: var(--primary); - --color-primary-foreground: var(--primary-foreground); - --color-secondary: var(--secondary); - --color-secondary-foreground: var(--secondary-foreground); - --color-muted: var(--muted); - --color-muted-foreground: var(--muted-foreground); - --color-accent: var(--accent); - --color-accent-foreground: var(--accent-foreground); - --color-destructive: var(--destructive); - --color-destructive-foreground: var(--destructive-foreground); - --color-border: var(--border); - --color-input: var(--input); - --color-ring: var(--ring); - --color-chart-1: var(--chart-1); - --color-chart-2: var(--chart-2); - --color-chart-3: var(--chart-3); - --color-chart-4: var(--chart-4); - --color-chart-5: var(--chart-5); - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); - --color-sidebar: var(--sidebar); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-ring: var(--sidebar-ring); +.dark { + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.145 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.145 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.985 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.29 0 0); /* + suave */ + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.29 0 0); /* + suave */ + --muted-foreground: oklch(0.72 0 0); + --accent: oklch(0.29 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.396 0.141 25.723); + --destructive-foreground: oklch(0.637 0.237 25.331); + + /* SUAVIZADO CLAVE EN DARK */ + --border: oklch(0.315 0 0); /* antes 0.269 */ + --input: oklch(0.315 0 0); + --ring: oklch(0.47 0 0); /* antes 0.439 */ + + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + + --sidebar: oklch(0.215 0 0); /* un pelín más claro que 0.205 */ + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.29 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(0.315 0 0); + --sidebar-ring: oklch(0.47 0 0); } +/* ===== Base (v3): ya sin @theme inline ni @custom-variant ===== */ @layer base { * { @apply border-border outline-ring/50; diff --git a/AppImage/tailwind.config.js b/AppImage/tailwind.config.js index 0109d88..7f45e33 100644 --- a/AppImage/tailwind.config.js +++ b/AppImage/tailwind.config.js @@ -1,89 +1,65 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - darkMode: ["class"], - content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], - prefix: "", + content: [ + "./app/**/*.{ts,tsx,js,jsx}", + "./components/**/*.{ts,tsx,js,jsx}", + "./pages/**/*.{ts,tsx,js,jsx}", + "./src/**/*.{ts,tsx,js,jsx}", + ], + darkMode: "class", 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))", - }, - chart: { - 1: "hsl(var(--chart-1))", - 2: "hsl(var(--chart-2))", - 3: "hsl(var(--chart-3))", - 4: "hsl(var(--chart-4))", - 5: "hsl(var(--chart-5))", - }, - sidebar: { - DEFAULT: "hsl(var(--sidebar-background))", - foreground: "hsl(var(--sidebar-foreground))", - primary: "hsl(var(--sidebar-primary))", - "primary-foreground": "hsl(var(--sidebar-primary-foreground))", - accent: "hsl(var(--sidebar-accent))", - "accent-foreground": "hsl(var(--sidebar-accent-foreground))", - border: "hsl(var(--sidebar-border))", - ring: "hsl(var(--sidebar-ring))", - }, + background: "var(--background)", + foreground: "var(--foreground)", + + card: "var(--card)", + "card-foreground": "var(--card-foreground)", + + popover: "var(--popover)", + "popover-foreground": "var(--popover-foreground)", + + primary: "var(--primary)", + "primary-foreground": "var(--primary-foreground)", + + secondary: "var(--secondary)", + "secondary-foreground": "var(--secondary-foreground)", + + muted: "var(--muted)", + "muted-foreground": "var(--muted-foreground)", + + accent: "var(--accent)", + "accent-foreground": "var(--accent-foreground)", + + destructive: "var(--destructive)", + "destructive-foreground": "var(--destructive-foreground)", + + border: "var(--border)", + input: "var(--input)", + ring: "var(--ring)", + + "chart-1": "var(--chart-1)", + "chart-2": "var(--chart-2)", + "chart-3": "var(--chart-3)", + "chart-4": "var(--chart-4)", + "chart-5": "var(--chart-5)", + + sidebar: "var(--sidebar)", + "sidebar-foreground": "var(--sidebar-foreground)", + "sidebar-primary": "var(--sidebar-primary)", + "sidebar-primary-foreground": "var(--sidebar-primary-foreground)", + "sidebar-accent": "var(--sidebar-accent)", + "sidebar-accent-foreground": "var(--sidebar-accent-foreground)", + "sidebar-border": "var(--sidebar-border)", + "sidebar-ring": "var(--sidebar-ring)", }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", - }, - 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", + xl: "calc(var(--radius) + 4px)", }, }, }, plugins: [require("tailwindcss-animate")], -} +};