From 958f3fd74dfa2d0934ac0184236d32249bf40ce9 Mon Sep 17 00:00:00 2001 From: itziarZG Date: Fri, 6 Mar 2026 10:58:46 +0100 Subject: [PATCH 1/2] feat: add new design tokens and toogle mode --- src/components/LanguagePicker.astro | 14 +++--- src/components/Navigation.astro | 32 ++++++++------ src/components/ResponsiveToggle.astro | 2 +- src/components/ThemeToggle.astro | 62 +++++++++++++++++++++++++++ src/layouts/Layout.astro | 36 +++++++++++++--- src/pages/[lang]/sponsors.astro | 2 +- src/style/global.css | 43 +++++++++++++++++++ tailwind.config.mjs | 1 + 8 files changed, 167 insertions(+), 25 deletions(-) create mode 100644 src/components/ThemeToggle.astro diff --git a/src/components/LanguagePicker.astro b/src/components/LanguagePicker.astro index e7f11ae..2ab0138 100644 --- a/src/components/LanguagePicker.astro +++ b/src/components/LanguagePicker.astro @@ -35,7 +35,7 @@ const getPathForLang = (targetLang: string) => { { variant === 'desktop' ? (
@@ -50,7 +50,7 @@ const getPathForLang = (targetLang: string) => { 'px-2 py-1 text-sm font-outfit rounded transition-colors outline-none', lang === currentLang ? 'text-pycon-red-100 font-bold underline' - : 'text-pycon-orange-500 hover:text-white focus-visible:text-pycon-red-500', + : 'text-pycon-orange hover:text-pycon-black dark:hover:text-white focus-visible:text-pycon-red-75', ]} > {t.label[lang as keyof typeof t.label]} @@ -58,7 +58,11 @@ const getPathForLang = (targetLang: string) => { ))}
) : ( -
+
Idioma
{languages.map((lang) => ( @@ -71,8 +75,8 @@ const getPathForLang = (targetLang: string) => { class:list={[ 'px-3 py-2 text-sm font-outfit rounded transition-colors outline-none', lang === currentLang - ? 'bg-blue-600 text-white font-bold' - : 'bg-white/5 text-slate-300 hover:bg-white/10 focus-visible:bg-blue-600 focus-visible:text-white', + ? 'bg-pycon-orange text-white font-bold' + : 'bg-pycon-black/5 dark:bg-white/5 text-slate-600 dark:text-slate-300 hover:bg-pycon-black/10 dark:hover:bg-white/10 focus-visible:bg-pycon-orange focus-visible:text-white', ]} > {t.label[lang as keyof typeof t.label]} diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro index 479f8d1..b519640 100644 --- a/src/components/Navigation.astro +++ b/src/components/Navigation.astro @@ -1,6 +1,7 @@ --- import ResponsiveToggle from './ResponsiveToggle.astro' import LanguagePicker from './LanguagePicker.astro' +import ThemeToggle from './ThemeToggle.astro' import { getRelativeLocaleUrl } from 'astro:i18n' import { menuTexts } from '../i18n/menu' @@ -55,13 +56,13 @@ const { items } = menuTexts[currentLang] - + \ No newline at end of file diff --git a/src/style/global.css b/src/style/global.css index e954f05..d1e66c5 100644 --- a/src/style/global.css +++ b/src/style/global.css @@ -1,5 +1,7 @@ @import 'tailwindcss'; +@custom-variant dark (&:where(.dark, .dark *)); + html { scroll-behavior: smooth; scroll-padding-top: 6rem; /* Adjust based on your header height */ @@ -53,9 +55,50 @@ html { --color-pycon-red-50: #fca09c; --color-pycon-red-25: #fdcfcd; + --color-pycon-mute: #cc6600; + --color-pycon-mute-100: #cc6600; + + --color-pycon-gray: #4a4a48; + --color-pycon-gray-100: #4a4a48; + --color-pycon-black: #1d1d1b; --color-pycon-black-100: #1d1d1b; --color-pycon-black-75: #555554; --color-pycon-black-50: #8e8e8d; --color-pycon-black-25: #c6c6c6; + + --color-pycon-white: #ffffff; + + /*DS colors*/ + --color-pantone-151c: --color-pycon-orange-100; + --color-pantone-123c: --color-pycon-yellow-100; + --color-pantone-warm-red: --color-pycon-red-100; + --color-pantone-black-c: --color-pycon-black-100; + --color-pantone-yellow-100: --color-pycon-yellow; + --color-pantone-yellow-75: --color-pycon-yellow-75; + --color-pantone-yellow-50: --color-pycon-yellow-50; + --color-pantone-yellow-25: --color-pycon-yellow-25; + --color-pantone-warm-red-100: --color-pycon-red; + --color-pantone-warm-red-75: --color-pycon-red-75; + --color-pantone-warm-red-50: --color-pycon-red-50; + --color-pantone-warm-red-25: --color-pycon-red-25; + + --color-tier-main: --color-pycon-yellow; + --color-tier-platinum: --color-pycon-orange; + --color-tier-gold: --color-pycon-red; + --color-tier-silver: --color-pycon-mute; + --color-tier-bronze: --color-pycon-gray; +} + +@layer base { + :root { + --bg-color: #ffffff; + --text-color: #1d1d1b; + --bg-symbol: url('/images/symbol-black-dark.svg'); + color-scheme: light dark; + } + .dark { + --bg-color: #1d1d1b; + --text-color: #ffffff; + } } diff --git a/tailwind.config.mjs b/tailwind.config.mjs index b9b98ef..b62efaa 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -1,5 +1,6 @@ /** @type {import('tailwindcss').Config} */ export default { + darkMode: 'class', content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], plugins: [], } From 552ce07c850c56900abb5956928b07d015961c4d Mon Sep 17 00:00:00 2001 From: Dani H Date: Fri, 6 Mar 2026 16:46:25 +0100 Subject: [PATCH 2/2] Feat: Improve a11y --- src/components/LanguagePicker.astro | 2 +- src/components/Navigation.astro | 28 +++++++++++++--------------- src/components/ThemeToggle.astro | 7 ++++--- 3 files changed, 18 insertions(+), 19 deletions(-) diff --git a/src/components/LanguagePicker.astro b/src/components/LanguagePicker.astro index 2ab0138..08df5be 100644 --- a/src/components/LanguagePicker.astro +++ b/src/components/LanguagePicker.astro @@ -71,7 +71,7 @@ const getPathForLang = (targetLang: string) => { hreflang={lang} lang={lang} aria-current={lang === currentLang ? 'page' : undefined} - aria-label={`${t['labelariadesc']} ${t.label[lang as keyof typeof t.label]}`} + aria-label={t['labelariadesc'][lang as keyof typeof t.labelariadesc]} class:list={[ 'px-3 py-2 text-sm font-outfit rounded transition-colors outline-none', lang === currentLang diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro index b519640..6437ccc 100644 --- a/src/components/Navigation.astro +++ b/src/components/Navigation.astro @@ -132,16 +132,16 @@ const { items } = menuTexts[currentLang] )) } - - -
  • - -
    - -
    • + + +
    @@ -202,15 +202,13 @@ const { items } = menuTexts[currentLang] )) } - - -
  • - - -
    • + + +
    + + +
    diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro index 4489c41..210c951 100644 --- a/src/components/ThemeToggle.astro +++ b/src/components/ThemeToggle.astro @@ -1,7 +1,8 @@