diff --git a/README.md b/README.md index d925b68..0056345 100644 --- a/README.md +++ b/README.md @@ -33,7 +33,7 @@ DreamFolio es el portafolio público de Dreamcoder08: una superficie de evidenci ## Características - **Arquitectura 100% estática** — Astro genera HTML puro; el sitio no envía JavaScript de framework al navegador. -- **Tema dual claro/oscuro** — tokens definidos en `src/styles/global.css`, oscuro por defecto (superficie `#000000` pura con capas `#0d0d10` / `#17171c` y acento `#ff7a18`) con overrides `[data-theme="light"]` (`#f3eadc` / `#8a4e26`). El modo oscuro respeta `prefers-contrast: more`. +- **Tema dual claro/oscuro** — tokens definidos en `src/styles/global.css`, oscuro por defecto (superficie `#000000` pura con capas `#0b0b0b` / `#0d0d0f` y acento `#a5b4fc`) con overrides `[data-theme="light"]` (`#f3eadc` / `#824f16`). El modo oscuro respeta `prefers-contrast: more`. - **Cobertura e2e con Playwright** — specs en `tests/` para home, listado de proyectos y detalle de proyecto (Page Object Model), corridos en CI. - **Tipografías autohospedadas** — Inter y JetBrains Mono variables (subset latin) servidas desde `/fonts/`. Ninguna visita contacta a Google Fonts. - **Contacto directo por WhatsApp** — botón flotante en todas las páginas, CTA principal en la sección de contacto y comando en la consola ⌘K, todos enlaces `wa.me` sin widget de terceros. El número vive en `siteConfig.contact.whatsapp` (`src/lib/site.ts`). diff --git a/src/styles/global/01-theme-tokens.css b/src/styles/global/01-theme-tokens.css index 5c907a1..2111ad3 100644 --- a/src/styles/global/01-theme-tokens.css +++ b/src/styles/global/01-theme-tokens.css @@ -4,24 +4,25 @@ ============================================ */ @theme { - /* ---- SURFACES ---- */ + /* ---- SURFACES (Dreamcoder Dark: OLED canvas, surface0-3 tiers) ---- */ --color-surface: #000000; - --color-surface-alt: #0d0d10; - --color-surface-elevated: #17171c; - --color-surface-hover: #1e1e24; - --color-surface-active: #26262e; + --color-surface-alt: #0b0b0b; + --color-surface-elevated: #0d0d0f; + --color-surface-hover: #1f1f1f; + --color-surface-active: #2e2e2e; - /* ---- TEXT ---- */ - --color-text: #ededeb; + /* ---- TEXT (Dreamcoder Dark text; secondary/tertiary keep the repo's + legibility-tuned ramp, which the press state contract needs) ---- */ + --color-text: #e6e6e6; --color-text-secondary: #b7b8b3; --color-text-tertiary: #96978f; - /* ---- ACCENTS ---- */ - --color-accent: #ff7a18; - --color-accent-muted: rgba(255, 122, 24, 0.08); - --color-accent-hover: #ff8f42; - --color-accent-active: #ffa25e; - --color-on-accent: #0a0a0a; + /* ---- ACCENTS (Dreamcoder Dark: indigo accent, violet secondary) ---- */ + --color-accent: #a5b4fc; + --color-accent-muted: rgba(165, 180, 252, 0.12); + --color-accent-hover: #d4b5fd; + --color-accent-active: #ddd6fe; + --color-on-accent: #000000; /* ---- BORDERS ---- */ --color-border: rgba(255, 255, 255, 0.16); @@ -30,12 +31,12 @@ --color-border-interactive-hover: rgba(255, 255, 255, 0.56); /* ---- FOCUS (aliases --color-accent / --color-on-accent by value) ---- */ - --color-focus: #ff7a18; - --color-on-focus: #0a0a0a; + --color-focus: #a5b4fc; + --color-on-focus: #000000; /* ---- SEMANTIC ---- */ - --color-danger: #ff6b6b; - --color-on-danger: #0a0a0a; + --color-danger: #fb8585; + --color-on-danger: #000000; /* ---- TYPOGRAPHY ---- */ --font-sans: "Inter", system-ui, sans-serif; diff --git a/src/styles/global/02-theme-modes.css b/src/styles/global/02-theme-modes.css index 132fabd..2c7e16f 100644 --- a/src/styles/global/02-theme-modes.css +++ b/src/styles/global/02-theme-modes.css @@ -8,18 +8,18 @@ --color-text: #17120d; --color-text-secondary: #6b5947; --color-text-tertiary: #746555; - --color-accent: #8a4e26; - --color-accent-muted: rgba(138, 78, 38, 0.1); - --color-accent-hover: #7a4522; - --color-accent-active: #6b3c1c; + --color-accent: #824f16; + --color-accent-muted: rgba(130, 79, 22, 0.1); + --color-accent-hover: #6f4211; + --color-accent-active: #5f380e; --color-on-accent: #fff7ea; --color-border: rgba(0, 0, 0, 0.1); --color-border-strong: rgba(0, 0, 0, 0.22); --color-border-interactive: rgba(0, 0, 0, 0.18); --color-border-interactive-hover: rgba(0, 0, 0, 0.3); - --color-focus: #8a4e26; + --color-focus: #824f16; --color-on-focus: #fff7ea; - --color-danger: #b3261e; + --color-danger: #842f24; --color-on-danger: #fff7ea; } diff --git a/src/styles/portfolio/18-interaction-states.css b/src/styles/portfolio/18-interaction-states.css index 4736df0..31d8871 100644 --- a/src/styles/portfolio/18-interaction-states.css +++ b/src/styles/portfolio/18-interaction-states.css @@ -28,7 +28,7 @@ border-color: var(--color-border-interactive-hover); } /* `.contact-section .solid-link` rests at --color-surface on --color-text = - 17.91:1, the palette ceiling. No state can exceed it and any fill swap must + 16.83:1, the palette ceiling. No state can exceed it and any fill swap must lower it, so per the design's own rule for max-brightness elements this variant signals through geometry rather than colour, and keeps its contrast. */ .contact-section .solid-link:hover { @@ -39,8 +39,8 @@ } /* Max-brightness elements must not swap their fill on hover. `.desktop-nav .nav-contact` and `.circle-link` rest on `--color-text` over the canvas — - 17.91:1 dark, 17.49:1 light on a card — and the accent pill their own hover - rules applied flipped the ink and dropped the label to 6.17:1 light, below its + 16.83:1 dark, 17.49:1 light on a card — and the accent pill their own hover + rules applied flipped the ink and dropped the label to 6.41:1 light, below its own at-rest ratio. The design's rule for these states is to signal through border and motion rather than colour, and the icon translate plus the `:active` transform already do that. Restating the rest colour keeps the ratio identical @@ -69,8 +69,8 @@ color: var(--color-text); background: var(--color-surface-active); } -/* The ordinary `.solid-link` press passes on its own terms (rest 7.59:1 -> - press 9.98:1), so it keeps the accent fill. */ +/* The ordinary `.solid-link` press passes on its own terms (rest 10.53:1 -> + press 15.12:1), so it keeps the accent fill. */ .solid-link:active { background: var(--color-accent-active); color: var(--color-on-accent);