chore: use better colours for channels (#163)

Author: kashike

src/components/data/SoftwareBuilds.tsx

@@ -24,11 +24,10 @@ const SoftwareBuilds = ({ project, version, builds, eol }: SoftwareBuildsProps)
               href={build.downloads["server:default"].url}
               target="_blank"
               className={clsx(
-                "text-gray-100 text-sm text-center font-medium rounded-full p-2 min-w-16 mr-4 inline-flex items-center gap-1",
+                "text-sm text-center font-medium rounded-full p-2 min-w-16 mr-4 inline-flex items-center gap-1",
+                eol ? "bg-channel-eol-primary" : `bg-channel-${build?.channel?.toLowerCase()}-primary`,
+                eol ? "text-channel-eol-secondary" : `text-channel-${build?.channel?.toLowerCase()}-secondary`,
               )}
-              style={{
-                backgroundColor: `var(${eol ? "--channel-eol" : `--channel-${build.channel.toLowerCase()}`})`,
-              }}
             >
               <DownloadIcon className="w-4 h-4" />#{build.id}
             </a>

src/components/data/SoftwareBuildsTable.tsx

@@ -31,10 +31,11 @@ const SoftwareBuildsTable = ({ project, version, builds, eol }: SoftwareBuildsTa
             <tr key={build.id}>
               <td>
                 <span
-                  className={clsx("text-sm font-medium text-gray-100 rounded-full py-2 px-3 min-w-16")}
-                  style={{
-                    backgroundColor: `var(${eol ? "--channel-eol" : `--channel-${build.channel.toLowerCase()}`})`,
-                  }}
+                  className={clsx(
+                    "text-sm font-medium text-gray-100 rounded-full py-2 px-3 min-w-16",
+                    eol ? "bg-channel-eol-primary" : `bg-channel-${build?.channel?.toLowerCase()}-primary`,
+                    eol ? "text-channel-eol-secondary" : `text-channel-${build?.channel?.toLowerCase()}-secondary`,
+                  )}
                 >
                   #{build.id}
                 </span>

src/components/input/SoftwareDownloadButton.tsx

@@ -35,12 +35,11 @@ const SoftwareDownloadButton = ({ projectId, project, build, version, compact, e
     <Menu as="div" className="relative w-max">
       <div
         className={clsx(
-          "rounded-lg flex flex-row ransition-shadow text-white transition-color hover:shadow-lg",
+          "rounded-lg flex flex-row ransition-shadow transition-color hover:shadow-lg",
           !compact && "w-full md:w-100",
+          eol ? "bg-channel-eol-primary" : `bg-channel-${build?.channel?.toLowerCase()}-primary`,
+          eol ? "text-channel-eol-secondary" : `text-channel-${build?.channel?.toLowerCase()}-secondary`,
         )}
-        style={{
-          backgroundColor: `var(${eol ? "--channel-eol" : `--channel-${build?.channel.toLowerCase()}`})`,
-        }}
       >
         {/* eslint-disable-next-line react/jsx-no-target-blank */}
         <a
@@ -62,7 +61,7 @@ const SoftwareDownloadButton = ({ projectId, project, build, version, compact, e
                 <span className="font-medium text-lg">
                   {project?.name ?? projectId} {version}
                 </span>
-                <p className="text-gray-100">{build && `Build #${build.id}`}</p>
+                <p>{build && `Build #${build.id}`}</p>
               </>
             ) : (
               <>

src/components/layout/SoftwareDownload.tsx

@@ -64,9 +64,9 @@ const SoftwareDownload = ({
           <h2 className="font-medium leading-normal lg:text-5xl lg:leading-normal text-4xl">
             Get {project.name}&nbsp;
             <span
-              style={{
-                color: `var(${eol ? "--channel-eol" : `--channel-${latestBuild?.channel.toLowerCase()}`})`,
-              }}
+              className={clsx(
+                eol ? "text-channel-eol-primary" : `text-channel-${latestBuild?.channel?.toLowerCase()}-primary`,
+              )}
             >
               {version}
             </span>

styles/globals.css

@@ -2,6 +2,9 @@
 
 @custom-variant dark (@media (prefers-color-scheme: dark));
 
+@source inline("bg-channel-alpha-primary bg-channel-alpha-secondary bg-channel-beta-primary bg-channel-beta-secondary bg-channel-stable-primary bg-channel-stable-secondary bg-channel-recommended-primary bg-channel-recommended-secondary bg-channel-eol-primary bg-channel-eol-secondary");
+@source inline("text-channel-alpha-primary text-channel-alpha-secondary text-channel-beta-primary text-channel-beta-secondary text-channel-stable-primary text-channel-stable-secondary text-channel-recommended-primary text-channel-recommended-secondary text-channel-eol-primary text-channel-eol-secondary");
+
 @theme {
   --font-sans: Poppins, Roboto, Open Sans, ui-sans-serif, system-ui, sans-serif;
 
@@ -47,6 +50,34 @@
   --scale-120: 1.2;
 }
 
+@theme {
+  /* These colours come from Fill - changes must be synchronized. */
+  --color-channel-alpha-primary: #ea5b6f;
+  --color-channel-alpha-secondary: var(--color-white);
+  --color-channel-beta-primary: #ffc859;
+  --color-channel-beta-secondary: var(--color-black);
+  --color-channel-stable-primary: var(--color-blue-500);
+  --color-channel-stable-secondary: var(--color-white);
+  --color-channel-recommended-primary: #4ecb8b;
+  --color-channel-recommended-secondary: var(--color-white);
+  --color-channel-eol: #374151;
+  --color-channel-eol: #374151;
+}
+
+@variant dark {
+  :root {
+    /* These colours come from Fill - changes must be synchronized. */
+    --color-channel-alpha-primary: #e42e47;
+    --color-channel-alpha-secondary: var(--color-white);
+    --color-channel-beta-primary: #f9da22;
+    --color-channel-beta-secondary: var(--color-black);
+    --color-channel-stable-primary: var(--color-blue-500);
+    --color-channel-stable-secondary: var(--color-white);
+    --color-channel-recommended-primary: #4ecb8b;
+    --color-channel-recommended-secondary: var(--color-white);
+  }
+}
+
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still
@@ -80,12 +111,3 @@ body {
 #__next {
     @apply flex flex-col h-screen;
 }
-
-/* Add our channel colors to the global CSS */
-:root {
-    --channel-alpha: #ea1500;
-    --channel-beta: #d8c200;
-    --channel-stable: #0a9ada;
-    --channel-recommended: #409c93;
-    --channel-eol: #374151;
-}