harmonize colors

Author: ArthurFlag

assets/css/theme.css

@@ -24,14 +24,15 @@
 
   --color-background-light: #f9f9fa;
   --color-background-dark: #10151b;
+  --color-primary-blue: var(--color-blue-500);
 
   --color-divider-light: hsla(0, 0%, 0%, 0.1);
   --color-divider-dark: hsla(0, 0%, 100%, 0.05);
 
   --card-bg-dark: #1d262d;
   --card-border-dark: #516980;
-  --color-gray-900: var(--card-bg-dark);
-  --color-gray-700: var(--card-border-dark);
+  --card-bg-dark: var(--color-gray-900);
+  --card-border-dark: var(--color-gray-700);
 
   --navbar-bg-light: #f9f9fa;
   --navbar-bg-dark: #0b0b0b;
@@ -51,6 +52,7 @@
   --color-black-outlinedborder: rgba(0, 0, 0, 0.56);
   --color-black-selected: rgba(0, 0, 0, 0.16);
 
+  --color-blue: var(--color-blue-400);
   --color-blue-100: rgba(217, 229, 252, 1);
   --color-blue-200: rgba(170, 196, 248, 1);
   --color-blue-300: rgba(123, 164, 244, 1);
@@ -68,6 +70,7 @@
   --color-blue-outlinedborder: rgba(37, 96, 255, 0.56);
   --color-blue-selected: rgba(37, 96, 255, 0.16);
 
+  --color-gray: var(--color-gray-600);
   --color-gray-100: rgba(231, 234, 239, 1);
   --color-gray-200: rgba(200, 207, 218, 1);
   --color-gray-300: rgba(169, 180, 198, 1);
@@ -78,7 +81,7 @@
   --color-gray-700: rgba(67, 76, 95, 1);
   --color-gray-800: rgba(44, 51, 63, 1);
   --color-gray-900: rgba(30, 33, 41, 1);
-  --color-gray-950: rgba(15, 18, 27, 1);
+  --color-gray-950: rgb(18, 21, 31);
   --color-gray-focus: rgba(108, 126, 157, 0.24);
   --color-gray-focusvisible: rgba(108, 126, 157, 0.32);
   --color-gray-hover: rgba(108, 126, 157, 0.12);
@@ -170,6 +173,7 @@
   --color-teal-outlinedborder: rgba(27, 189, 191, 0.56);
   --color-teal-selected: rgba(27, 189, 191, 0.16);
 
+  --color-violet: var(--color-violet-500);
   --color-violet-100: rgba(239, 224, 255, 1);
   --color-violet-200: rgba(211, 183, 255, 1);
   --color-violet-300: rgba(174, 130, 255, 1);

assets/css/utilities.css

@@ -31,7 +31,7 @@
 }
 
 @utility link {
-  @apply text-primary-blue no-underline dark:text-blue-700;
+  @apply text-blue no-underline dark:text-blue-400;
   font-weight: inherit;
   &:hover {
     @apply underline underline-offset-3;
@@ -43,24 +43,24 @@
 }
 
 @utility bg-pattern-blue {
-  background-color: var(--color-white-main);
+  background-color: rgba(255, 255, 255, 0.5);
   background-image: url("/assets/images/bg-pattern-blue.webp");
   background-blend-mode: overlay;
   background-size: cover;
-  background-repeat: none;
+  background-repeat: no-repeat;
   .dark & {
-    background-color: var(--color-black-main);
+    background-color: rgba(0, 0, 0, 0.741);
   }
 }
 
 @utility bg-pattern-purple {
-  background-color: var(--color-white-main);
+  background-color: rgba(255, 255, 255, 0.5);
   background-image: url("/assets/images/bg-pattern-purple.webp");
   background-blend-mode: overlay;
   background-size: cover;
-  background-repeat: none;
+  background-repeat: no-repeat;
   .dark & {
-    background-color: var(--color-black-main);
+    background-color: rgba(0, 0, 0, 0.741);
   }
 }
 
@@ -72,13 +72,13 @@
 }
 
 @utility bg-pattern-verde {
-  background-color: var(--color-white-main);
+  background-color: rgba(255, 255, 255, 0.5);
   background-image: url("/assets/images/bg-pattern-verde.webp");
   background-blend-mode: overlay;
   background-size: cover;
-  background-repeat: none;
+  background-repeat: no-repeat;
   .dark & {
-    background-color: var(--color-black-main);
+    background-color: rgba(0, 0, 0, 0.741);
   }
 }
 
@@ -210,3 +210,16 @@
     }
   }
 }
+
+@utility section-card {
+  @apply flex h-full flex-col gap-2 rounded-sm border p-4 drop-shadow-xs hover:drop-shadow-lg;
+  @apply text-gray dark:text-gray-200;
+  @apply border-gray-100 bg-gray-50 hover:border-gray-200 dark:border-gray-600 dark:bg-gray-900 hover:dark:border-gray-500;
+}
+
+@utility section-card-text {
+  @apply leading-snug text-gray-800 dark:text-gray-200;
+}
+@utility section-card-title {
+  @apply text-xl font-semibold text-gray-900 dark:text-gray-100;
+}

hugo_stats.json

@@ -144,12 +144,12 @@
       "admonition-warning",
       "aspect-video",
       "bake-action",
-      "bg-amber-light",
+      "bg-amber-500",
       "bg-background-light",
       "bg-background-toc",
       "bg-black/50",
       "bg-black/70",
-      "bg-blue-400",
+      "bg-blue",
       "bg-blue-500",
       "bg-blue-light",
       "bg-blue-light-400",
@@ -158,19 +158,22 @@
       "bg-gradient-to-br",
       "bg-gradient-to-r",
       "bg-gradient-to-t",
+      "bg-gray-00",
       "bg-gray-100",
+      "bg-gray-400",
+      "bg-gray-50",
       "bg-gray-light-100",
       "bg-gray-light-200",
       "bg-gray-light-400",
       "bg-gray-light-700",
-      "bg-green-light",
+      "bg-green-500",
       "bg-green-light-400",
       "bg-pattern-blue",
       "bg-pattern-purple",
       "bg-pattern-verde",
-      "bg-red-light",
+      "bg-red-500",
       "bg-transparent",
-      "bg-violet-light",
+      "bg-violet-500",
       "bg-white",
       "bg-white/10",
       "block",
@@ -180,7 +183,6 @@
       "border-b-4",
       "border-blue-light-500",
       "border-divider-light",
-      "border-gray-light-100",
       "border-gray-light-200",
       "border-gray-light-400",
       "border-green-light-400",
@@ -204,26 +206,26 @@
       "col-start-2",
       "containerd-image-store",
       "cursor-pointer",
-      "dark:bg-amber-dark",
+      "dark:bg-amber-300",
       "dark:bg-background-dark",
       "dark:bg-background-toc",
+      "dark:bg-blue",
       "dark:bg-blue-300",
       "dark:bg-blue-400",
       "dark:bg-blue-500",
-      "dark:bg-blue-dark",
       "dark:bg-blue-dark-400",
-      "dark:bg-gray-200",
-      "dark:bg-gray-700",
+      "dark:bg-gray-400",
       "dark:bg-gray-800",
       "dark:bg-gray-900",
+      "dark:bg-gray-950",
       "dark:bg-gray-dark-100",
       "dark:bg-gray-dark-200",
       "dark:bg-gray-dark-300",
       "dark:bg-gray-dark-400",
-      "dark:bg-green-dark",
+      "dark:bg-green-300",
       "dark:bg-green-dark-400",
-      "dark:bg-red-dark",
-      "dark:bg-violet-dark",
+      "dark:bg-red-300",
+      "dark:bg-violet-300",
       "dark:block",
       "dark:border-b-blue-dark-600",
       "dark:border-divider-dark",
@@ -232,64 +234,52 @@
       "dark:border-green-dark-400",
       "dark:border-l-magenta-dark",
       "dark:fill-blue-300",
-      "dark:fill-blue-400",
-      "dark:fill-blue-700",
-      "dark:fill-blue-dark",
       "dark:focus:ring-3-blue-dark",
       "dark:from-background-dark",
-      "dark:from-blue-200",
-      "dark:from-blue-400",
+      "dark:from-blue-300",
       "dark:from-blue-600",
-      "dark:from-blue-dark-200",
-      "dark:from-blue-dark-400",
       "dark:from-gray-dark-100",
       "dark:hidden",
+      "dark:hover:bg-blue-400",
       "dark:hover:bg-blue-500",
-      "dark:hover:bg-blue-dark",
       "dark:hover:bg-blue-dark-500",
+      "dark:hover:bg-gray-500",
       "dark:hover:bg-gray-dark-200",
       "dark:hover:bg-gray-dark-400",
-      "dark:hover:bg-gray-dark-500",
       "dark:hover:text-blue-dark",
       "dark:prose-invert",
       "dark:ring-3-blue-dark-400",
       "dark:ring-3-gray-dark-400",
       "dark:syntax-dark",
+      "dark:text-blue",
       "dark:text-blue-700",
       "dark:text-divider-dark",
+      "dark:text-gray",
+      "dark:text-gray-200",
       "dark:text-gray-dark",
       "dark:text-gray-dark-300",
       "dark:text-gray-dark-500",
       "dark:text-gray-dark-600",
-      "dark:text-gray-dark-700",
       "dark:text-gray-dark-800",
       "dark:text-magenta-dark",
-      "dark:text-violet-dark",
       "dark:text-white",
       "dark:to-background-dark",
-      "dark:to-blue-100",
+      "dark:to-blue-400",
       "dark:to-blue-500",
-      "dark:to-blue-dark-100",
-      "dark:to-magenta-dark-400",
       "docker/bake-action",
       "docker/build-push-action",
       "download-links",
       "download-links-subcontainer",
       "drop-shadow",
-      "drop-shadow-xs",
       "duration-300",
-      "fill-blue-300",
-      "fill-blue-400",
-      "fill-blue-500",
-      "fill-blue-light",
+      "fill-blue",
       "fixed",
       "flex",
       "flex-1",
       "flex-[2_2_0%]",
       "flex-col",
       "flex-col-reverse",
       "flex-grow",
-      "flex-grow-0",
       "flex-none",
       "flex-shrink",
       "flex-wrap",
@@ -302,17 +292,15 @@
       "footnotes",
       "from-20%",
       "from-background-light",
+      "from-blue-400",
       "from-blue-600",
-      "from-blue-light-400",
-      "from-blue-light-600",
       "gap-1",
       "gap-10",
       "gap-12",
       "gap-2",
       "gap-20",
       "gap-3",
       "gap-4",
-      "gap-6",
       "gap-8",
       "goat",
       "grid",
@@ -336,23 +324,24 @@
       "hidden'",
       "hiddenml-3",
       "highlight",
+      "hover:bg-blue",
       "hover:bg-blue-400",
       "hover:bg-blue-500",
       "hover:bg-blue-light-400",
+      "hover:bg-gray-100",
+      "hover:bg-gray-50",
       "hover:bg-gray-light-100",
       "hover:bg-gray-light-200",
       "hover:bg-gray-light-300",
       "hover:bg-white/20",
-      "hover:border-gray-light-200",
       "hover:border-white/20",
-      "hover:dark:bg-blue-400",
       "hover:dark:bg-blue-500",
+      "hover:dark:bg-gray-700",
       "hover:dark:bg-gray-dark-200",
       "hover:dark:bg-gray-dark-300",
-      "hover:dark:border-gray-dark",
       "hover:dark:text-blue-700",
-      "hover:drop-shadow-lg",
       "hover:opacity-90",
+      "hover:text-blue",
       "hover:text-blue-light",
       "hover:text-white",
       "hover:underline",
@@ -399,7 +388,6 @@
       "max-w-56",
       "max-w-[1920px]",
       "max-w-[840px]",
-      "max-w-fit",
       "max-w-full",
       "max-w-none",
       "max-w-xl",
@@ -509,6 +497,9 @@
       "scale-75",
       "scroll-mt-20",
       "scroll-mt-36",
+      "section-card",
+      "section-card-text",
+      "section-card-title",
       "select-none",
       "self-center",
       "self-start",
@@ -533,8 +524,11 @@
       "text-2xl",
       "text-base",
       "text-black",
+      "text-blue",
       "text-blue-light",
       "text-divider-light",
+      "text-gray",
+      "text-gray-800",
       "text-gray-light",
       "text-gray-light-200",
       "text-gray-light-300",
@@ -544,18 +538,14 @@
       "text-lg",
       "text-magenta-light",
       "text-sm",
-      "text-violet-light",
       "text-white",
       "text-xl",
       "text-xs",
       "to-30%",
       "to-50%",
       "to-75%",
-      "to-blue-300",
-      "to-blue-400",
+      "to-blue-200",
       "to-blue-500",
-      "to-blue-light",
-      "to-magenta-light-400",
       "to-transparent",
       "to-white",
       "toc",