feat: replaced dark colors with contrast palette, updated seo alternate pages

Manuel Schächinger · Manuel Schächinger · commit 28601999ac29 · 2025-06-07T01:27:17.000+02:00
diff --git a/app/[locale]/(legal)/imprint/page.tsx b/app/[locale]/(legal)/imprint/page.tsx
@@ -42,7 +42,7 @@ const ImprintPage = async () => {
         </p>
 
         <p>
-          <strong className="dark:text-dark-50">{t('odr.title')}:</strong>&nbsp;
+          <strong className="dark:text-contrast-50">{t('odr.title')}:</strong>&nbsp;
           {t.rich('odr.text', {
             link: () => (
               <Link href="https://ec.europa.eu/consumers/odr" inline>ec.europa.eu/consumers/odr</Link>
@@ -56,22 +56,22 @@ const ImprintPage = async () => {
         <h2 className="text-h2">{t('liability')}</h2>
 
         <p className="mb-2">
-          <strong className="dark:text-dark-50">{t('disclaimer.title')}:</strong>&nbsp;
+          <strong className="dark:text-contrast-50">{t('disclaimer.title')}:</strong>&nbsp;
           {t('disclaimer.text')}
         </p>
 
         <p className="mb-2">
-          <strong className="dark:text-dark-50">{t('links.title')}:</strong>&nbsp;
+          <strong className="dark:text-contrast-50">{t('links.title')}:</strong>&nbsp;
           {t('links.text')}
         </p>
 
         <p className="mb-2">
-          <strong className="dark:text-dark-50">{t('copyright.title')}:</strong>&nbsp;
+          <strong className="dark:text-contrast-50">{t('copyright.title')}:</strong>&nbsp;
           {t('copyright.text')}
         </p>
 
         <p>
-          <strong className="dark:text-dark-50">{t('violations.title')}:</strong>&nbsp;
+          <strong className="dark:text-contrast-50">{t('violations.title')}:</strong>&nbsp;
           {t('violations.text')}
         </p>
       </PageSection>
diff --git a/app/[locale]/about/page.tsx b/app/[locale]/about/page.tsx
@@ -42,7 +42,7 @@ const AboutPage = async () => {
             src={wallpaper}
             alt={t('profile.imageAlt')}
             sizes="(max-width: 640px) 100vw, 640px"
-            className="border-y-2 sm:border-x-2 sm:rounded-md border-neutral-300/30 dark:border-dark-600/50"
+            className="border-y-2 sm:border-x-2 sm:rounded-md border-contrast-200/80 dark:border-contrast-700/80"
             priority
           />
           <p className="text-sm mt-2 px-4 sm:px-2">{t('profile.imageAlt')}</p>
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -50,7 +50,7 @@ const RootLayout = async ({ children, params }: LayoutProps) => {
       <head>
         <link type="text/plain" rel="author" href={`${WEB_HOST}/humans.txt`} />
       </head>
-      <body className="text-dark-950 dark:text-dark-200 bg-dark-50 dark:bg-dark-800 font-sans">
+      <body className="text-contrast-950 dark:text-contrast-200 bg-contrast-50 dark:bg-contrast-950 font-sans">
         <ThemeProvider>
           <NextIntlClientProvider>
             <div className="w-full mx-auto">
diff --git a/app/brandbook/SplitSection.tsx b/app/brandbook/SplitSection.tsx
@@ -12,10 +12,10 @@ const SplitSection = ({ children, id, label }: Props) => (
       </div>
     )}
     <div className="flex flex-col sm:flex-row">
-      <div className="flex-1 p-4 text-dark-950 bg-dark-50">
+      <div className="flex-1 p-4 text-contrast-950 bg-contrast-50">
         {children}
       </div>
-      <div className="flex-1 p-4 dark text-dark-200 bg-dark-800">
+      <div className="flex-1 p-4 dark text-contrast-200 bg-contrast-950">
         {children}
       </div>
     </div>
diff --git a/app/brandbook/page.tsx b/app/brandbook/page.tsx
@@ -88,10 +88,8 @@ const BrandBook = () => {
         <SplitSection id="colors" label="Color Palette">
           <div className="flex flex-col gap-2">
             <div className="flex gap-2">
-              <div className="w-8 h-8 rounded-full bg-primary-dark" title="primary" />
-              <div className="w-8 h-8 rounded-full bg-primary-light" title="discreet-shade" />
-              <div className="w-8 h-8 rounded-full bg-discreet-light" title="discreet-light" />
-              <div className="w-8 h-8 rounded-full bg-discreet-egg" title="discreet-egg" />
+              <div className="w-8 h-8 rounded-full bg-primary-dark" title="primary-dark" />
+              <div className="w-8 h-8 rounded-full bg-primary-light" title="primary-light" />
               <div className="w-8 h-8 rounded-full bg-squash-red" title="squash-red" />
               <div className="w-8 h-8 rounded-full bg-squash-green" title="sqash-green" />
             </div>
@@ -103,12 +101,17 @@ const BrandBook = () => {
               <div className="w-8 h-8 rounded-full bg-warning-800" title="warning-800" />
             </div>
             <div className="flex gap-2">
-              <div className="w-8 h-8 rounded-full bg-dark-50" title="dark-50" />
-              <div className="w-8 h-8 rounded-full bg-dark-200" title="dark-200" />
-              <div className="w-8 h-8 rounded-full bg-dark-600" title="dark-600" />
-              <div className="w-8 h-8 rounded-full bg-dark-700" title="dark-700" />
-              <div className="w-8 h-8 rounded-full bg-dark-800" title="dark-800" />
-              <div className="w-8 h-8 rounded-full bg-dark-950" title="dark-950" />
+              <div className="w-8 h-8 rounded-full bg-contrast-50" title="contrast-50" />
+              <div className="w-8 h-8 rounded-full bg-contrast-100" title="contrast-100" />
+              <div className="w-8 h-8 rounded-full bg-contrast-200" title="contrast-200" />
+              <div className="w-8 h-8 rounded-full bg-contrast-300" title="contrast-300" />
+              <div className="w-8 h-8 rounded-full bg-contrast-400" title="contrast-400" />
+              <div className="w-8 h-8 rounded-full bg-contrast-500" title="contrast-500" />
+              <div className="w-8 h-8 rounded-full bg-contrast-600" title="contrast-600" />
+              <div className="w-8 h-8 rounded-full bg-contrast-700" title="contrast-700" />
+              <div className="w-8 h-8 rounded-full bg-contrast-800" title="contrast-800" />
+              <div className="w-8 h-8 rounded-full bg-contrast-900" title="contrast-900" />
+              <div className="w-8 h-8 rounded-full bg-contrast-950" title="contrast-950" />
             </div>
           </div>
         </SplitSection>
diff --git a/app/components/atoms/InputField.tsx b/app/components/atoms/InputField.tsx
@@ -24,7 +24,7 @@ const InputField = ({ className, disabled, error, label, name, required, type =
       />
       <label
         htmlFor={name}
-        className="absolute text-sm text-dark-800 dark:text-slate-200 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-primary-light peer-focus:dark:text-primary-dark peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
+        className="absolute text-sm text-contrast-900 dark:text-slate-200 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-primary-light peer-focus:dark:text-primary-dark peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
       >{label}</label>
     </div>
     {!!error && <p className="peer text-sm text-squash-red mt-1">{error}</p>}
diff --git a/app/components/atoms/LanguageToggle.tsx b/app/components/atoms/LanguageToggle.tsx
@@ -24,7 +24,7 @@ const LanguageToggle = ({ className }: Props) => {
       href={page}
       locale={switchLocale}
       title={language.name[switchLocale]}
-      className={clsx('-ml-1 w-8 h-8 relative flex justify-center items-center rounded-full transition-colors hover:bg-primary-light/60 hover:dark:bg-primary-dark/80 hover:text-dark-800 hover:dark:text-dark-50', className)}
+      className={clsx('-ml-1 w-8 h-8 relative flex justify-center items-center rounded-full transition-colors hover:bg-primary-light/60 hover:dark:bg-primary-dark/80 hover:text-contrast-800 hover:dark:text-contrast-50', className)}
     >
       <span>{switchLocale}</span>
       <span className="sr-only">{language.name[switchLocale]}</span>
diff --git a/app/components/atoms/Logo.tsx b/app/components/atoms/Logo.tsx
@@ -12,9 +12,9 @@ const Logo = ({ slim }: Props) => (
       <span className="text-primary-light dark:text-primary-dark font-thin">
         M<span className={clsx(slim && 'hidden sm:inline-block')}>anuel</span>
       </span>
-      <span className="text-dark-950 dark:text-dark-50 font-normal">Schächinger</span>
+      <span className="text-contrast-950 dark:text-contrast-50 font-normal">Schächinger</span>
     </p>
-    <p className={clsx(slim && 'hidden sm:block', 'text-xs sm:text-sm text-dark-950 dark:text-dark-50 tracking-wide font-normal')}>
+    <p className={clsx(slim && 'hidden sm:block', 'text-xs sm:text-sm text-contrast-950 dark:text-contrast-50 tracking-wide font-normal')}>
       Fullstack JavaScript Engineer
     </p>
   </Link>
diff --git a/app/components/atoms/NavigationItem.tsx b/app/components/atoms/NavigationItem.tsx
@@ -23,7 +23,7 @@ const NavigationItem = ({ active, href, icon: Icon, label, onClick }: Props) =>
   >
     {Icon && <Icon className={clsx(
       'text-2xl inline-block -mt-1 mr-4',
-      active ? 'text-dark-950 dark:text-dark-50' : 'text-dark-950/80 dark:text-dark-50/80',
+      active ? 'text-contrast-950 dark:text-contrast-50' : 'text-contrast-950/80 dark:text-contrast-50/80',
       'group-hover:text-current'
       )} />}
     {label}
diff --git a/app/components/atoms/SnesButtons.tsx b/app/components/atoms/SnesButtons.tsx
@@ -3,14 +3,14 @@ import clsx from 'clsx';
 import Link from '@components/atoms/Link';
 
 const SnesButtons = () => {
-  const className = 'absolute w-6 h-6 text-center font-bold rounded-full transition-colors border border-dark-200 dark:border-dark-600 text-dark-200 dark:text-dark-600';
+  const className = 'absolute w-6 h-6 text-center font-bold rounded-full transition-colors border border-contrast-200 dark:border-contrast-700 text-contrast-200 dark:text-contrast-700';
 
   return (
     <div className="relative text-base h-[72px]">
-      <span className={clsx('left-0 top-6 hover:bg-snes-y hover:text-dark-50', className)}>Y</span>
-      <span className={clsx('left-6 top-0 hover:bg-snes-x hover:text-dark-50', className)}>X</span>
-      <span className={clsx('left-12 top-6 hover:bg-snes-a hover:text-dark-50', className)}>A</span>
-      <Link href="/" className={clsx('left-6 top-12 hover:bg-snes-b hover:text-dark-950 hover:dark:text-dark-950', className)}>B</Link>
+      <span className={clsx('left-0 top-6 hover:bg-snes-y hover:text-contrast-50', className)}>Y</span>
+      <span className={clsx('left-6 top-0 hover:bg-snes-x hover:text-contrast-50', className)}>X</span>
+      <span className={clsx('left-12 top-6 hover:bg-snes-a hover:text-contrast-50', className)}>A</span>
+      <Link href="/" className={clsx('left-6 top-12 hover:bg-snes-b hover:text-contrast-950 hover:dark:text-contrast-950', className)}>B</Link>
     </div>
   );
 };
diff --git a/app/components/atoms/SubmitButton.tsx b/app/components/atoms/SubmitButton.tsx
@@ -6,7 +6,7 @@ type Props = {
 const SubmitButton = ({ children, disabled }: Props) => (
   <button
     type="submit"
-    className="font-bold tracking-wide px-4 py-2.5 bg-primary-light dark:bg-primary-dark hover:bg-primary-light/80 hover:dark:bg-primary-dark/60 border-none text-dark-50 disabled:bg-primary-light/40 disabled:text-slate-500 disabled:cursor-not-allowed transition-colors border-0 rounded-lg"
+    className="font-bold tracking-wide px-4 py-2.5 bg-primary-light dark:bg-primary-dark hover:bg-primary-light/80 hover:dark:bg-primary-dark/60 border-none text-contrast-50 disabled:bg-primary-light/40 disabled:text-slate-500 disabled:cursor-not-allowed transition-colors border-0 rounded-lg"
     aria-disabled={disabled}
     disabled={disabled}
   >{children}</button>
diff --git a/app/components/atoms/TextArea.tsx b/app/components/atoms/TextArea.tsx
@@ -23,7 +23,7 @@ const TextArea = ({ className, disabled, error, label, name, required }: Props)
        />
       <label
         htmlFor={name}
-        className="absolute text-sm text-dark-800 dark:text-slate-200 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-primary-light peer-focus:dark:text-primary-dark peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto"
+        className="absolute text-sm text-contrast-900 dark:text-slate-200 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-primary-light peer-focus:dark:text-primary-dark peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto"
       >{label}</label>
     </div>
     {!!error && <p className="text-sm text-squash-red mt-1">{error}</p>}
diff --git a/app/components/atoms/ThemeToggle.tsx b/app/components/atoms/ThemeToggle.tsx
@@ -14,13 +14,13 @@ const ThemeToggle = ({ translations }: Props) => {
 
   const toggleTheme = () => {
     const nextTheme = 'light' === resolvedTheme ? 'dark' : 'light';
-    setTheme(nextTheme === (systemTheme || 'light') ? 'system' : nextTheme);
+    setTheme(nextTheme === (systemTheme ?? 'light') ? 'system' : nextTheme);
   };
 
   return (
     <button
       onClick={toggleTheme}
-      className="-ml-1 w-8 h-8 relative self-center flex justify-center items-center rounded-full transition-colors lg:hover:bg-slate-800 lg:hover:dark:bg-amber-400 dark:text-dark-50 lg:hover:text-dark-50 lg:hover:dark:text-dark-800 z-50"
+      className="-ml-1 w-8 h-8 relative self-center flex justify-center items-center rounded-full transition-colors duration-300 hover:bg-contrast-200/80 hover:dark:bg-contrast-800/80 dark:text-contrast-50 hover:text-contrast-800/80 hover:dark:text-amber-400/80 z-50"
       title={translations.toggle}
     >
       <Sun className="text-2xl absolute left-1 top-1 scale-0 dark:scale-100" />
diff --git a/app/components/atoms/YearInFigures.tsx b/app/components/atoms/YearInFigures.tsx
@@ -54,7 +54,7 @@ const YearInFigures = async () => {
               <div key={figure.type} className={clsx('flex-1 flex items-center', figure.className)}>
                 <Icon className={clsx('text-3xl mr-3', figure.iconClassName)} />
                 <div>
-                  <div className="text-xl dark:text-dark-50">{figure.count}</div>
+                  <div className="text-xl dark:text-contrast-50">{figure.count}</div>
                   <div className="text-sm">{t(figure.type as 'coffees', { count: figure.count })}</div>
                 </div>
               </div>
diff --git a/app/components/molecules/KonamiCode.tsx b/app/components/molecules/KonamiCode.tsx
@@ -42,35 +42,35 @@ const KonamiCode = ({ translations }: Props) => {
     <PageSection id="konami" dense>
       <p className="flex gap-2">
         { 1 > index
-          ? <ArrowRight className="mt-0.5 -rotate-90 text-dark-200 dark:text-dark-700" />
+          ? <ArrowRight className="mt-0.5 -rotate-90 text-contrast-200 dark:text-contrast-800" />
           : <span>&#x30b3;</span> }
         { 2 > index
-          ? <ArrowRight className="mt-0.5 -rotate-90 text-dark-200 dark:text-dark-700" />
+          ? <ArrowRight className="mt-0.5 -rotate-90 text-contrast-200 dark:text-contrast-800" />
           : <span>&#x30ca;</span> }
         { 3 > index
-          ? <ArrowRight className="mt-0.5 rotate-90 text-dark-200 dark:text-dark-700" />
+          ? <ArrowRight className="mt-0.5 rotate-90 text-contrast-200 dark:text-contrast-800" />
           : <span>&#x30df;</span> }
         { 4 > index
-          ? <ArrowRight className="mt-0.5 rotate-90 text-dark-200 dark:text-dark-700" />
+          ? <ArrowRight className="mt-0.5 rotate-90 text-contrast-200 dark:text-contrast-800" />
           : <span>&#x30b3;</span> }
         { 5 > index
-          ? <ArrowRight className="mt-0.5 rotate-180 text-dark-200 dark:text-dark-700" />
+          ? <ArrowRight className="mt-0.5 rotate-180 text-contrast-200 dark:text-contrast-800" />
           : <span>&#x30de;</span> }
         { 6 > index
-          ? <ArrowRight className="mt-0.5 text-dark-200 dark:text-dark-700"/>
+          ? <ArrowRight className="mt-0.5 text-contrast-200 dark:text-contrast-800"/>
           : <span>&#x30f3;</span> }
         { 7 > index
-          ? <ArrowRight className="mt-0.5 rotate-180 text-dark-200 dark:text-dark-700" />
+          ? <ArrowRight className="mt-0.5 rotate-180 text-contrast-200 dark:text-contrast-800" />
           : <span>&#x30c9;</span> }
         { 8 > index
-          ? <ArrowRight className="mt-0.5 text-dark-200 dark:text-dark-700" />
+          ? <ArrowRight className="mt-0.5 text-contrast-200 dark:text-contrast-800" />
           : <ArrowRight className="mt-0.5"/> }
         { 9 > index
-          ? <span className="inline-block text-center w-6 h-6 text-dark-200 dark:text-dark-700">B</span>
-          : <span className="inline-block text-center w-6 h-6 rounded-full bg-snes-b text-dark-950">B</span> }
+          ? <span className="inline-block text-center w-6 h-6 text-contrast-200 dark:text-contrast-800">B</span>
+          : <span className="inline-block text-center w-6 h-6 rounded-full bg-snes-b text-contrast-950">B</span> }
         { 10 > index
-          ? <span className="inline-block text-center w-6 h-6 text-dark-200 dark:text-dark-700">A</span>
-          : <span className="inline-block text-center w-6 h-6 rounded-full bg-snes-a text-dark-50">A</span> }
+          ? <span className="inline-block text-center w-6 h-6 text-contrast-200 dark:text-contrast-800">A</span>
+          : <span className="inline-block text-center w-6 h-6 rounded-full bg-snes-a text-contrast-50">A</span> }
       </p>
 
       { 10 <= index
diff --git a/app/components/molecules/Navigation.tsx b/app/components/molecules/Navigation.tsx
@@ -43,7 +43,7 @@ const WideNavigation = ({ themeTranslations, translations }: Props) => {
               <Image
                 src={image}
                 alt="Manuel Schächinger"
-                className="w-24 rounded-full border-2 border-neutral-200/50 dark:border-dark-600/50"
+                className="w-24 rounded-full border-2 border-contrast-200/50 dark:border-contrast-700/80"
                 sizes="96px"
                 loading="lazy"
               />
diff --git a/app/components/molecules/ProjectImages.tsx b/app/components/molecules/ProjectImages.tsx
@@ -28,7 +28,7 @@ const ProjectImages = ({ slug, images }: Props) => {
               width={1024}
               height={768}
               alt={description}
-              className="h-auto max-w-full border-y-2 sm:border-x-2 sm:rounded-md border-neutral-300/30 dark:border-dark-600/50"
+              className="h-auto max-w-full border-y-2 sm:border-x-2 sm:rounded-md border-contrast-200/80 dark:border-contrast-700/80"
               sizes="(max-width: 640px) 100vw, 1024px"
               priority
             />
@@ -44,7 +44,7 @@ const ProjectImages = ({ slug, images }: Props) => {
                   height={120}
                   alt={getImageLabel(image, locale)}
                   sizes="(max-width: 1024px) 17vw, 139px"
-                  className={clsx('h-auto max-w-full rounded-sm border-neutral-300/30 dark:border-dark-600/50', i !== selected && 'border-2')}
+                  className={clsx('h-auto max-w-full rounded-sm border-contrast-200/80 dark:border-contrast-700/80', i !== selected && 'border-2')}
                 />
               </div>
             )) }
diff --git a/app/components/molecules/SocialLinks.tsx b/app/components/molecules/SocialLinks.tsx
@@ -9,28 +9,28 @@ const SocialLinks = () => (
     <SocialLink
       href="https://linkedin.com/in/schaechinger"
       className="hover:text-social-linkedin hover:dark:text-social-linkedin"
-      iconClassName="group-hover:text-dark-50 group-hover:dark:text-dark-50 group-hover:bg-social-linkedin"
+      iconClassName="group-hover:text-contrast-50 group-hover:dark:text-contrast-50 group-hover:bg-social-linkedin"
       title="LinkedIn"
       icon={<LinkedIn />}
     />
     <SocialLink
       href="https://xing.com/profile/Manuel_Schaechinger"
       className="hover:text-social-xing hover:dark:text-social-xing"
-      iconClassName="group-hover:text-dark-50 group-hover:dark:text-dark-50 group-hover:bg-social-xing"
+      iconClassName="group-hover:text-contrast-50 group-hover:dark:text-contrast-50 group-hover:bg-social-xing"
       title="Xing"
       icon={<Xing />}
     />
     <SocialLink
       href="https://github.com/schaechinger"
-      className="hover:text-social-github hover:dark:text-dark-50"
-      iconClassName="group-hover:text-dark-50 group-hover:dark:text-social-github group-hover:bg-social-github group-hover:dark:bg-dark-50"
+      className="hover:text-social-github hover:dark:text-contrast-50"
+      iconClassName="group-hover:text-contrast-50 group-hover:dark:text-social-github group-hover:bg-social-github group-hover:dark:bg-contrast-50"
       title="GitHub"
       icon={<GitHub />}
     />
     <SocialLink
       href="https://instagram.com/theschaechinger"
       className="hover:text-social-instagram hover:dark:text-social-instagram"
-      iconClassName="group-hover:text-dark-50 group-hover:dark:text-dark-50 group-hover:bg-social-instagram"
+      iconClassName="group-hover:text-contrast-50 group-hover:dark:text-contrast-50 group-hover:bg-social-instagram"
       title="Instagram"
       icon={<Instagram />}
     />
diff --git a/app/components/organisms/Header.tsx b/app/components/organisms/Header.tsx
diff --git a/app/lib/seo.ts b/app/lib/seo.ts
diff --git a/css/style.scss b/css/style.scss
diff --git a/package.json b/package.json
diff --git a/tailwind.config.ts b/tailwind.config.ts

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ const LanguageToggle = ({ className }: Props) => {`
`24`	`24`	`href={page}`
`25`	`25`	`locale={switchLocale}`
`26`	`26`	`title={language.name[switchLocale]}`
`27`		`- className={clsx('-ml-1 w-8 h-8 relative flex justify-center items-center rounded-full transition-colors hover:bg-primary-light/60 hover:dark:bg-primary-dark/80 hover:text-dark-800 hover:dark:text-dark-50', className)}`
	`27`	`+ className={clsx('-ml-1 w-8 h-8 relative flex justify-center items-center rounded-full transition-colors hover:bg-primary-light/60 hover:dark:bg-primary-dark/80 hover:text-contrast-800 hover:dark:text-contrast-50', className)}`
`28`	`28`	`>`
`29`	`29`	`<span>{switchLocale}</span>`
`30`	`30`	`<span className="sr-only">{language.name[switchLocale]}</span>`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ const NavigationItem = ({ active, href, icon: Icon, label, onClick }: Props) =>`
`23`	`23`	`>`
`24`	`24`	`{Icon && <Icon className={clsx(`
`25`	`25`	`'text-2xl inline-block -mt-1 mr-4',`
`26`		`- active ? 'text-dark-950 dark:text-dark-50' : 'text-dark-950/80 dark:text-dark-50/80',`
	`26`	`+ active ? 'text-contrast-950 dark:text-contrast-50' : 'text-contrast-950/80 dark:text-contrast-50/80',`
`27`	`27`	`'group-hover:text-current'`
`28`	`28`	`)} />}`
`29`	`29`	`{label}`