update page colors to match our new color palette

.gitignore

@@ -8,3 +8,5 @@ npm-debug.log*
 .pre-commit-config.yaml
 # Local Netlify folder
 .netlify
+
+colors.json

core/src/components/Footer.astro

@@ -11,20 +11,20 @@ const footerMenu = await getEntry('menus', 'footer');
 ---
 
 <footer>
-  <div class="bg-nix-blue-darker clear-both font-light text-white">
+  <div class="bg-afghani-blue-25 text-white-95 clear-both font-light">
     <Container>
       <div
         class="flex flex-col flex-wrap gap-x-4 gap-y-8 pt-12 pb-10 sm:flex-row"
       >
         {
           footerMenu.data.sections.map((menu) => (
             <div class="flex-1 basis-1/2 md:basis-0">
-              <h4 class="font-heading text-nix-blue-light mb-2 text-xl font-bold">
+              <h4 class="font-heading text-afghani-blue-85 mb-2 text-xl font-bold">
                 {menu.name}
               </h4>
               <ul class="font-extralight">
                 {menu.items.map((item) => (
-                  <li class="border-nix-blue-dark border-b-1 last:border-b-0">
+                  <li class="border-afghani-blue-55 border-b-1 last:border-b-0">
                     <Link
                       class:list={['block py-3 hover:underline md:py-2']}
                       href={item.link}
@@ -39,7 +39,7 @@ const footerMenu = await getEntry('menus', 'footer');
         }
       </div>
 
-      <hr class="border-nix-blue-light" />
+      <hr class="border-afghani-blue-55" />
 
       <div
         class="flex flex-col flex-wrap gap-4 py-4 font-extralight lg:flex-row lg:gap-0"
@@ -81,7 +81,7 @@ const footerMenu = await getEntry('menus', 'footer');
           </div>
         </div>
 
-        <hr class="border-nix-blue-light lg:hidden" />
+        <hr class="border-afghani-blue-75 lg:hidden" />
 
         <div
           class="flex basis-1/2 justify-between gap-4 font-extralight lg:justify-end"
@@ -91,7 +91,7 @@ const footerMenu = await getEntry('menus', 'footer');
             {
               footerMenu.data.social.map((item) => (
                 <Link
-                  class="hover:text-nix-blue-light text-white"
+                  class="hover:text-afghani-blue-75 text-white"
                   href={item.link}
                   aria-label={`Connect with us on ${item.name}`}
                 >
@@ -113,7 +113,7 @@ const footerMenu = await getEntry('menus', 'footer');
     <a
       href="#"
       id="scroll-to-top"
-      class="bg-nix-blue-darker hover:bg-nix-blue-dark absolute right-4 bottom-4 z-50 rounded-xl text-white drop-shadow-md transition-all duration-100 md:-right-14 md:bottom-8"
+      class="bg-afghani-blue-25 hover:bg-afghani-blue-45 absolute right-4 bottom-4 z-50 rounded-xl text-white drop-shadow-md transition-all duration-100 md:-right-14 md:bottom-8"
     >
       <Icon class="h-14 w-14 p-1" name="mdi:keyboard-arrow-up" />
     </a>

core/src/components/Header.astro

@@ -13,9 +13,9 @@ const currentBanner = await getEntry('banners', BANNER);
 
 const currentTopRoute = `/${Astro.url.pathname.split('/')[1]}`;
 
-const navbarItemStyle = `text-center text-nix-blue-dark md:text-black md:hover:border-b-nix-blue-light border-b-4`;
-const navbarItemInactiveStyle = `border-b-nix-blue-extralight md:border-b-transparent bg-nix-blue-extralight md:bg-transparent`;
-const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-white md:text-black md:bg-transparent font-bold`;
+const navbarItemStyle = `text-center text-afghani-blue-45 md:text-black md:hover:border-b-afghani-blue-65 border-b-4`;
+const navbarItemInactiveStyle = `border-b-afghani-blue-95 md:border-b-transparent bg-afghani-blue-95 md:bg-transparent`;
+const navbarItemActiveStyle = `border-b-afghani-blue-45 bg-afghani-blue-65 text-white md:text-black md:bg-transparent font-bold`;
 ---
 
 <header
@@ -61,7 +61,7 @@ const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-wh
 
       <button
         aria-label="Main Navigation Toggle"
-        class="bg-nix-blue-light block rounded-lg p-4 md:hidden"
+        class="bg-afghani-blue block rounded-lg p-4 md:hidden"
         id="navigation-toggle"
       >
         <span class="mb-1.5 block h-1 w-8 bg-white"></span>
@@ -98,7 +98,10 @@ const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-wh
         arial-label="Nixos package and options search"
         target="_self"
       >
-        <Icon class="text-nix-blue hidden h-8 w-8 md:block" name="mdi:search" />
+        <Icon
+          class="text-afghani-blue hidden h-8 w-8 md:block"
+          name="mdi:search"
+        />
         <span class="inline-block md:hidden">Search</span>
       </Link>
     </nav>

core/src/components/layout/CodeBlock.astro

@@ -12,7 +12,7 @@ const { lines, type = 'code' } = Astro.props;
     'my-2 mb-4 overflow-x-auto rounded-3xl border-1 bg-[#3a3a3a] px-4 py-4',
     { 'bg-[#3a3a3a] text-white': type === 'code' },
     {
-      'border-nix-blue-extralight bg-nix-blue-extralight font-mono font-[500] text-black shadow-inner':
+      'border-afghani-blue-95 bg-afghani-blue-95 font-mono font-[500] text-black shadow-inner':
         type === 'storepath',
     },
   ]}>

core/src/components/layout/CodeInline.astro

@@ -2,6 +2,7 @@
 
 ---
 
-<code class="text-nix-orange-dark rounded-lg border-1 bg-neutral-100 px-2 py-1"
+<code
+  class="text-nix-persian-orange-45 rounded-lg border-1 bg-neutral-100 px-2 py-1"
   ><slot /></code
 >

core/src/components/layout/PageHeader.astro

@@ -33,7 +33,7 @@ import Container from './Container.astro';
   </Container>
 </div>
 
-<div class="bg-nix-blue text-white md:hidden">
+<div class="bg-afghani-blue text-white md:hidden">
   <Container class="px-12 py-16">
     <h1 class="text-center text-3xl font-bold">
       {text}

core/src/components/layout/Tabs.astro

@@ -96,7 +96,7 @@ const uid = crypto.randomUUID();
   <Container class="grid w-full gap-8 px-12 pt-8 lg:grid-cols-[30%_auto]">
     <nav class:list={['tab-bar']}>
       <Container
-        class="bg-nix-blue-extralight grid gap-0 rounded-3xl px-0! py-8 md:grid-cols-1"
+        class="bg-afghani-blue-95 grid gap-0 rounded-3xl px-0! py-8 md:grid-cols-1"
       >
         {
           tabs.map(async (name, idx) => {
@@ -125,10 +125,10 @@ const uid = crypto.randomUUID();
                   <label
                     class:list={[
                       'tab',
-                      'text-nix-blue-light',
+                      'text-afghani-blue-75',
                       'text-lg',
                       'font-bold',
-                      'peer-checked:text-nix-blue',
+                      'peer-checked:text-afghani-blue',
                       'py-12',
                       'px-8',
                       'w-full',

core/src/components/pages/blog/BlogListEntry.astro

@@ -15,12 +15,12 @@ const { post } = Astro.props;
 >
   <a href={generatePathFromPost(post)}>
     <h2
-      class="font-ned, composition in a document, page, applicaextrabold font-heading text-nix-blue text-4xl leading-tight"
+      class="font-ned, composition in a document, page, applicaextrabold font-heading text-afghani-blue text-4xl leading-tight"
     >
       {post.data.title}
     </h2>
   </a>
-  <p class="mb-2 text-xs text-gray-700">
+  <p class="text-black-35 mb-2 text-xs">
     {createBlogSubheader(post)}
   </p>
   <p class="font-extralight">{createExcerpt(post.body)}...</p>

core/src/components/pages/community/CommunityPageListItem.astro

@@ -23,11 +23,11 @@ const effectiveType =
 
 <li
   class:list={[
-    'border-nix-blue hover:bg-nix-blue-extralight flex-1 cursor-pointer rounded-xl border-2 bg-white p-4 transition-all',
+    'border-afghani-blue hover:bg-afghani-blue-95 flex-1 cursor-pointer rounded-xl border-2 bg-white p-4 transition-all',
     effectiveType === 'icon' && 'flex flex-col items-center justify-center',
   ]}
 >
-  <a href={href} class="text-nix-blue! flex h-full flex-col no-underline!">
+  <a href={href} class="text-afghani-blue! flex h-full flex-col no-underline!">
     <div
       class:list={[
         'flex gap-2 text-xl font-bold',

core/src/components/pages/community/OfficialCommunityLink.astro

@@ -22,7 +22,7 @@ const {
 
 <li
   class:list={[
-    'bg-nix-blue hover:bg-nix-blue-dark flex-1 cursor-pointer rounded-xl p-4 transition-all',
+    'bg-afghani-blue hover:bg-afghani-blue-45 flex-1 cursor-pointer rounded-xl p-4 transition-all',
     type === 'icon' && 'flex flex-col items-center justify-center',
     extraClasses,
   ]}

core/src/components/pages/community/teams/MembersDisplay.astro

@@ -6,20 +6,20 @@ const {
   contact,
   class: extraClasses,
 } = Astro.props;
-const titleClasses = `text-3xl font-heading font-bold text-nix-blue`;
+const titleClasses = `text-3xl font-heading font-bold text-afghani-blue`;
 ---
 
 <aside
   class:list={[
-    !isSubteam && 'bg-nix-blue-extralight w-full rounded-xl px-4 py-3',
+    !isSubteam && 'bg-afghani-blue-95 w-full rounded-xl px-4 py-3',
     extraClasses,
   ]}
 >
   <h2 class={titleClasses}>{title}</h2>
   <ul class="mt-2 font-light">
     {
       members.map((member) => (
-        <li class="border-b-nix-blue-light-hover flex flex-col border-b-1 pt-2 pb-2 first:pt-0 last:border-b-0 last:pb-0">
+        <li class="border-b-afghani-blue-75-hover flex flex-col border-b-1 pt-2 pb-2 first:pt-0 last:border-b-0 last:pb-0">
           <span class="font-medium">
             {member.name}
             {member.discourse && (
@@ -43,7 +43,7 @@ const titleClasses = `text-3xl font-heading font-bold text-nix-blue`;
           </span>
           {member.title && <span>{member.title}</span>}
           {member.affiliation && (
-            <span class="text-sm text-gray-700">{member.affiliation}</span>
+            <span class="text-black-35 text-sm">{member.affiliation}</span>
           )}
         </li>
       ))
@@ -52,7 +52,7 @@ const titleClasses = `text-3xl font-heading font-bold text-nix-blue`;
   {
     contact && (
       <>
-        <h2 class="font-heading text-nix-blue mt-4 text-3xl font-bold">
+        <h2 class="font-heading text-afghani-blue mt-4 text-3xl font-bold">
           Contact
         </h2>
         <ul class="mt-2 ml-4 list-disc">

core/src/components/pages/download/DownloadAccordion.astro

@@ -26,11 +26,11 @@ let downloadOptions = (await getCollection('download'))
                 aria-expanded="true"
                 aria-controls={optionId}
                 class:list={[
-                  'bg-nix-blue-extralight',
+                  'bg-afghani-blue-95',
                   'flex',
-                  'text-nix-blue-dark',
-                  'hover:bg-nix-blue-lighter',
-                  'hover:text-nix-blue-darker',
+                  'text-afghani-blue-25',
+                  'hover:bg-afghani-blue-85',
+                  'hover:text-afghani-blue-15',
                   'cursor-pointer',
                   'text-lg',
                   'font-bold',
@@ -86,7 +86,7 @@ let downloadOptions = (await getCollection('download'))
   const accContentArea = acc.appendChild(document.createElement('div'));
   accContentArea.classList.add('col-span-2', 'mt-4', 'px-8');
   menuContainer.classList.add(
-    'md:bg-nix-blue-extralight',
+    'md:bg-afghani-blue-95',
     'md:py-8',
     'md:rounded-2xl',
     'self-start',
@@ -177,10 +177,10 @@ let downloadOptions = (await getCollection('download'))
     triggers[i].addEventListener('click', togglePanel);
     triggers[i].classList.add(
       'md:my-0',
-      'md:text-nix-blue',
+      'md:text-afghani-blue',
       'md:rounded-none',
       'md:aria-expanded:bg-white',
-      'md:aria-expanded:text-nix-blue-dark',
+      'md:aria-expanded:text-afghani-blue-45',
       'before:icon-[mdi--arrow-up-drop-circle]',
       'before:block',
       'before:absolute',

core/src/components/pages/download/DownloadHeader.astro

@@ -10,7 +10,9 @@ interface Props {
 const { title, subTitle, currentVersion } = Astro.props;
 ---
 
-<Container class="bg-nix-blue mt-16 grid grid-cols-2 py-8 text-white md:py-6">
+<Container
+  class="bg-afghani-blue-45 mt-16 grid grid-cols-2 py-8 text-white md:py-6"
+>
   <h1 class="font-heading self-center text-3xl leading-none font-bold">
     {title}
     <span class="hidden lg:inline">
@@ -24,7 +26,7 @@ const { title, subTitle, currentVersion } = Astro.props;
       </h2>
       <a
         href="#"
-        class="bg-nix-blue-darker rounded-2xl px-4 py-2 text-center text-2xl font-bold! text-white no-underline!"
+        class="bg-afghani-blue-15 rounded-2xl px-4 py-2 text-center text-2xl font-bold! text-white no-underline!"
         >{currentVersion}</a
       >
     </div>

core/src/components/pages/explore/TimelineCenter.astro

@@ -6,10 +6,12 @@ interface Props {
 const { number = 0 } = Astro.props;
 ---
 
-<div class="bg-nix-blue absolute top-0 left-[-3rem] hidden h-full w-1 md:block">
+<div
+  class="bg-afghani-blue absolute top-0 left-[-3rem] hidden h-full w-1 md:block"
+>
 </div>
 <div
-  class="bg-nix-blue-dark absolute top-0 left-[-5rem] hidden h-[4rem] w-[4rem] rounded-[2rem] text-center text-[3rem] leading-[4rem] font-bold text-white md:block"
+  class="bg-afghani-blue-45 absolute top-0 left-[-5rem] hidden h-[4rem] w-[4rem] rounded-[2rem] text-center text-[3rem] leading-[4rem] font-bold text-white md:block"
 >
   {number}
 </div>

core/src/components/pages/explore/TimelineText.astro

@@ -20,10 +20,12 @@ const {
 import Tag from '../../ui/Tag.astro';
 ---
 
-<h2 class="font-heading text-nix-blue text-[2rem] leading-[2.2rem] font-bold">
+<h2
+  class="font-heading text-afghani-blueafghani-blue text-[2rem] leading-[2.2rem] font-bold"
+>
   {heading}
 </h2>
-<p class="text-xl leading-[2.2rem] font-bold text-neutral-500">{subHeading}</p>
+<p class="text-black-55 text-xl leading-[2.2rem] font-bold">{subHeading}</p>
 <div
   class="flex flex-wrap gap-1"
   class:list={[

core/src/components/ui/Asciinema.astro

@@ -33,7 +33,9 @@ const demoId = 'asciinema-demo-' + src.split('/').pop().split('.')[0];
   {
     title && (
       <a href={`#${demoId}`} class="no-underline!" id={`${demoId}-link`}>
-        <h3 class="font-heading text-nix-blue text-xl font-bold">{title}</h3>
+        <h3 class="font-heading text-afghani-blue text-xl font-bold">
+          {title}
+        </h3>
       </a>
     )
   }