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;
   .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;
   .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;
   .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

@@ -145,10 +145,12 @@
       "aspect-video",
       "bake-action",
       "bg-amber-light",
+      "bg-background",
       "bg-background-light",
       "bg-background-toc",
       "bg-black/50",
       "bg-black/70",
+      "bg-blue",
       "bg-blue-400",
       "bg-blue-500",
       "bg-blue-light",
@@ -158,18 +160,24 @@
       "bg-gradient-to-br",
       "bg-gradient-to-r",
       "bg-gradient-to-t",
+      "bg-gray-00",
       "bg-gray-100",
+      "bg-gray-200",
+      "bg-gray-400",
+      "bg-gray-50",
       "bg-gray-light-100",
       "bg-gray-light-200",
       "bg-gray-light-400",
       "bg-gray-light-700",
+      "bg-green-500",
       "bg-green-light",
       "bg-green-light-400",
       "bg-pattern-blue",
       "bg-pattern-purple",
       "bg-pattern-verde",
       "bg-red-light",
       "bg-transparent",
+      "bg-violet-500",
       "bg-violet-light",
       "bg-white",
       "bg-white/10",
@@ -180,6 +188,7 @@
       "border-b-4",
       "border-blue-light-500",
       "border-divider-light",
+      "border-gray-100",
       "border-gray-light-100",
       "border-gray-light-200",
       "border-gray-light-400",
@@ -205,28 +214,37 @@
       "containerd-image-store",
       "cursor-pointer",
       "dark:bg-amber-dark",
+      "dark:bg-background",
       "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-300",
+      "dark:bg-gray-400",
       "dark:bg-gray-700",
       "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-300",
       "dark:bg-green-dark",
       "dark:bg-green-dark-400",
       "dark:bg-red-dark",
+      "dark:bg-violet-300",
       "dark:bg-violet-dark",
       "dark:block",
       "dark:border-b-blue-dark-600",
       "dark:border-divider-dark",
+      "dark:border-gray-700",
+      "dark:border-gray-700-400",
       "dark:border-gray-dark-200",
       "dark:border-gray-dark-400",
       "dark:border-green-dark-400",
@@ -244,9 +262,17 @@
       "dark:from-blue-dark-400",
       "dark:from-gray-dark-100",
       "dark:hidden",
+      "dark:hover:bg-blue",
+      "dark:hover:bg-blue-300",
+      "dark:hover:bg-blue-400",
       "dark:hover:bg-blue-500",
+      "dark:hover:bg-blue-800",
+      "dark:hover:bg-blue-800flex",
+      "dark:hover:bg-blue-800max-w-fit",
+      "dark:hover:bg-blue-800mt-20",
       "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",
@@ -255,21 +281,29 @@
       "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-300",
+      "dark:text-gray-700",
+      "dark:text-gray-800",
       "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:text-violet-dark",
       "dark:text-white",
       "dark:to-background-dark",
       "dark:to-blue-100",
       "dark:to-blue-500",
       "dark:to-blue-dark-100",
+      "dark:to-magenta-400",
       "dark:to-magenta-dark-400",
       "docker/bake-action",
       "docker/build-push-action",
@@ -278,6 +312,7 @@
       "drop-shadow",
       "drop-shadow-xs",
       "duration-300",
+      "fill-blue",
       "fill-blue-300",
       "fill-blue-400",
       "fill-blue-500",
@@ -302,6 +337,7 @@
       "footnotes",
       "from-20%",
       "from-background-light",
+      "from-blue-400",
       "from-blue-600",
       "from-blue-light-400",
       "from-blue-light-600",
@@ -336,23 +372,35 @@
       "hidden'",
       "hiddenml-3",
       "highlight",
+      "hover:bg-blue",
       "hover:bg-blue-400",
+      "hover:bg-blue-400-400",
       "hover:bg-blue-500",
       "hover:bg-blue-light-400",
+      "hover:bg-gray-100",
+      "hover:bg-gray-200",
+      "hover:bg-gray-600",
       "hover:bg-gray-light-100",
       "hover:bg-gray-light-200",
       "hover:bg-gray-light-300",
       "hover:bg-white/20",
+      "hover:border-gray-200",
       "hover:border-gray-light-200",
       "hover:border-white/20",
       "hover:dark:bg-blue-400",
       "hover:dark:bg-blue-500",
+      "hover:dark:bg-gray-500",
+      "hover:dark:bg-gray-700",
       "hover:dark:bg-gray-dark-200",
       "hover:dark:bg-gray-dark-300",
+      "hover:dark:border-gray-300",
+      "hover:dark:border-gray-600",
+      "hover:dark:border-gray-700",
       "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",
@@ -509,6 +557,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 +584,15 @@
       "text-2xl",
       "text-base",
       "text-black",
+      "text-blue",
       "text-blue-light",
       "text-divider-light",
+      "text-gray",
+      "text-gray-200",
+      "text-gray-300",
+      "text-gray-500",
+      "text-gray-800",
+      "text-gray-border-gray-200",
       "text-gray-light",
       "text-gray-light-200",
       "text-gray-light-300",
@@ -544,6 +602,7 @@
       "text-lg",
       "text-magenta-light",
       "text-sm",
+      "text-violet",
       "text-violet-light",
       "text-white",
       "text-xl",
@@ -555,6 +614,7 @@
       "to-blue-400",
       "to-blue-500",
       "to-blue-light",
+      "to-magenta-400",
       "to-magenta-light-400",
       "to-transparent",
       "to-white",