feat(ui): unified primary color

src/components/column/card.tsx

@@ -154,18 +154,18 @@ function NewsCard({ id, inView, handleListeners }: NewsCardProps) {
         <div className={clsx("flex gap-2 text-lg", `color-${sources[id].color}`)}>
           <button
             type="button"
-            className={clsx("i-ph:arrow-counter-clockwise-duotone", query.isFetching && "animate-spin i-ph:circle-dashed-duotone")}
+            className={clsx("btn i-ph:arrow-counter-clockwise-duotone", query.isFetching && "animate-spin i-ph:circle-dashed-duotone")}
             onClick={manualRefetch}
           />
           <button
             type="button"
-            className={clsx(focusSources.includes(id) ? "i-ph:star-fill" : "i-ph:star-duotone")}
+            className={clsx("btn", focusSources.includes(id) ? "i-ph:star-fill" : "i-ph:star-duotone")}
             onClick={addFocusList}
           />
           <button
             {...handleListeners}
             type="button"
-            className={clsx("i-ph:dots-six-vertical-duotone", "cursor-grab")}
+            className={clsx("btn", "i-ph:dots-six-vertical-duotone", "cursor-grab")}
           />
         </div>
       </div>

src/components/column/index.tsx

@@ -18,7 +18,7 @@ export function Column({ id }: { id: ColumnID }) {
     <>
       <div className="w-full flex justify-center">
         <span className={clsx([
-          "flex gap-2 mb-4 py-3 px-6 rounded-2xl bg-primary/1 shadow shadow-red/20 hover:shadow-red/50 transition-shadow duration-500",
+          "flex gap-2 mb-4 py-3 px-6 rounded-2xl bg-primary/1 shadow shadow-primary/20 hover:shadow-primary/50 transition-shadow duration-500",
           "md:(z-100 mb-6)",
         ])}
         >

src/components/header.tsx

@@ -15,7 +15,7 @@ function ThemeToggle() {
     <button
       type="button"
       title="Toggle Dark Mode"
-      className="i-ph-sun-dim-duotone dark:i-ph-moon-stars-duotone btn-pure"
+      className="i-ph-sun-dim-duotone dark:i-ph-moon-stars-duotone btn"
       onClick={toggleDark}
     />
   )
@@ -31,7 +31,7 @@ function LoginIn() {
     return (
       <button
         type="button"
-        className="btn-pure"
+        className="btn"
         title={info?.name ?? ""}
         onClick={() => {
           // setJwt("")
@@ -51,7 +51,7 @@ function LoginIn() {
   return (
     <a
       title="Login in with GitHub"
-      className="i-ph:sign-in-duotone btn-pure"
+      className="i-ph:sign-in-duotone btn"
       href={`https://github.com/login/oauth/authorize?client_id=${__G_CLIENT_ID__}`}
     />
   )
@@ -64,14 +64,14 @@ function GoTop() {
       <button
         type="button"
         title="Go To Top"
-        className="i-ph:arrow-fat-up-duotone btn-pure"
+        className="i-ph:arrow-fat-up-duotone btn"
         onClick={goToTop}
       />
     )
   )
 }
 export function GithubIcon() {
-  return <a className="i-ph-github-logo-duotone inline-block btn-pure" href={Homepage} title="Project Homepage" />
+  return <a className="i-ph-github-logo-duotone inline-block btn" href={Homepage} title="Project Homepage" />
 }
 
 function RefreshButton() {
@@ -95,7 +95,7 @@ function RefreshButton() {
     <button
       type="button"
       title="Refresh"
-      className={clsx("i-ph:arrow-counter-clockwise-duotone btn-pure", isFetching && "animate-spin i-ph:circle-dashed-duotone")}
+      className={clsx("i-ph:arrow-counter-clockwise-duotone btn", isFetching && "animate-spin i-ph:circle-dashed-duotone")}
       onClick={refreshAll}
     />
   )
@@ -110,12 +110,12 @@ export function Header() {
           <span className="text-2xl font-brand line-height-none!">
             <p>News</p>
             <p className="mt--1">
-              <span className="color-red-6">N</span>
+              <span className="color-primary-6">N</span>
               <span>ow</span>
             </p>
           </span>
         </Link>
-        <a className="btn-pure text-sm ml-1 font-mono">
+        <a className="btn text-sm ml-1 font-mono">
           {`v${Version}`}
         </a>
       </span>

src/styles/globals.css

@@ -20,7 +20,7 @@ html.dark {
 }
 
 body {
-  --at-apply: color-base bg-base sprinkle-red;
+  --at-apply: color-base bg-base sprinkle-primary;
   -moz-user-select: none;
   -webkit-user-select: none;
   user-select: none;

uno.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig, presetIcons, presetUno, transformerDirectives, transformerVariantGroup } from "unocss"
 import { hex2rgba } from "@unocss/rule-utils"
-import { colors } from "unocss/preset-mini"
 import { sources } from "./shared/sources"
 
 export default defineConfig({
@@ -13,15 +12,15 @@ export default defineConfig({
     }),
   ],
   rules: [
-    [/^sprinkle-(.+)$/, ([_, d]) => {
-      if (d in colors) {
+    [/^sprinkle-(.+)$/, ([_, d], { theme }) => {
+      // @ts-expect-error >_<
+      if (theme.colors[d]) {
         // @ts-expect-error >_<
-        const hex: any = colors[d]?.[400]
+        const hex: any = theme.colors[d]?.[400]
         if (hex) {
           return {
             "background-image": `radial-gradient(ellipse 80% 80% at 50% -30%,
-         rgba(${hex2rgba(hex)?.join(", ")}, 0.3),
-        rgba(255, 255, 255, 0));`,
+         rgba(${hex2rgba(hex)?.join(", ")}, 0.3), rgba(255, 255, 255, 0));`,
           }
         }
       }
@@ -37,15 +36,10 @@ export default defineConfig({
   shortcuts: {
     "color-base": "color-neutral-800 dark:color-neutral-300",
     "bg-base": "bg-white dark:bg-dark-600",
-
-    "color-active": "color-primary-600 dark:color-primary-400",
-    "border-active": "border-primary-600/25 dark:border-primary-400/25",
-    "bg-active": "bg-primary-400/10",
-
-    "btn-pure": "op50 hover:op75",
+    "btn": "op50 hover:op85",
   },
   safelist: [
-    ...["bg", "color", "border", "sprinkle", "shadow"].map(t => Object.values(sources).map(c => `${t}-${c.color}`)).flat(1),
+    ...["bg", "color", "border", "sprinkle", "shadow"].map(t => [...Object.values(sources)].map(c => `${t}-${c.color}`)).flat(1),
   ],
   extendTheme: (theme) => {
     // @ts-expect-error >_<