fix: update color variables and improve background styles in theme

Author: ErwanDecoster

.vitepress/theme/style.css

@@ -105,18 +105,14 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  /* --vp-c-text-1: #3c3c43; */
   --vp-c-text-1: #1d1d24;
-  /* --vp-c-text-2: #67676c; */
   --vp-c-text-2: #5d5d69;
   --vp-c-text-3: #929295;
 }
 
 .dark {
-  /* --vp-c-text-1: #dfdfd6; */
   --vp-c-text-1: #fff;
-  /* --vp-c-text-2: #98989f; */
-  --vp-c-text-2: #a3a3a8;
+  --vp-c-text-2: #d3d3d8;
   --vp-c-text-3: #6a6a71;
 }
 
@@ -202,32 +198,96 @@
   --vp-c-warning-soft: #312720;
 }
 
+/**
+ * Colors: Background
+ *
+ * - `bg`: The bg color used for main screen.
+ *
+ * - `bg-alt`: The alternative bg color used in places such as "sidebar",
+ *   or "code block".
+ *
+ * - `bg-elv`: The elevated bg color. This is used at parts where it "floats",
+ *   such as "dialog".
+ *
+ * - `bg-soft`: The bg color to slightly distinguish some components from
+ *   the page. Used for things like "carbon ads" or "table".
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-bg: #ffffff;
+  --vp-c-bg-alt: #f7f9fd;
+  --vp-c-bg-elv: #ffffff;
+  --vp-c-bg-soft: #f7f9fd;
+}
+
+.dark {
+  --vp-c-bg: #14141b;
+  --vp-c-bg-alt: #161618;
+  --vp-c-bg-elv: #202127;
+  --vp-c-bg-soft: #202127;
+}
+
 /**
  * Component: Button
  * -------------------------------------------------------------------------- */
 
 :root {
   --vp-button-brand-border: transparent;
-  --vp-button-brand-text: var(--vp-c-white);
-  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-text: #1b1b1f;
+  --vp-button-brand-bg: #fcd15a;
   --vp-button-brand-hover-border: transparent;
-  --vp-button-brand-hover-text: var(--vp-c-white);
-  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-hover-text: #1b1b1f;
+  --vp-button-brand-hover-bg: #f9dd90;
   --vp-button-brand-active-border: transparent;
-  --vp-button-brand-active-text: var(--vp-c-white);
-  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+  --vp-button-brand-active-text: #1b1b1f;
+  --vp-button-brand-active-bg: #f9dd90;
+
+  --vp-button-alt-border: var(--vp-c-border);
+  --vp-button-alt-text: var(--vp-c-text-1);
+  --vp-button-alt-bg: transparent;
+  --vp-button-alt-hover-border: var(--vp-c-border);
+  --vp-button-alt-hover-text: var(--vp-c-text-1);
+  --vp-button-alt-hover-bg: #ffffff10;
+  --vp-button-alt-active-border: var(--vp-c-border);
+  --vp-button-alt-active-text: var(--vp-c-text-1);
+  --vp-button-alt-active-bg: var(--vp-c-default-1);
 }
 
 .dark {
   --vp-button-brand-border: transparent;
   --vp-button-brand-text: #1b1b1f;
-  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-bg: #fcd15a;
   --vp-button-brand-hover-border: transparent;
-  --vp-button-brand-hover-text: var(--vp-c-white);
-  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-hover-text: #1b1b1f;
+  --vp-button-brand-hover-bg: #f9dd90;
   --vp-button-brand-active-border: transparent;
-  --vp-button-brand-active-text: var(--vp-c-white);
-  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+  --vp-button-brand-active-text: #1b1b1f;
+  --vp-button-brand-active-bg: #f9dd90;
+}
+
+/**
+ * Colors: Borders
+ *
+ * - `divider`: This is used for separators. This is used to divide sections
+ *   within the same components, such as having separator on "h2" heading.
+ *
+ * - `border`: This is designed for borders on interactive components.
+ *   For example this should be used for a button outline.
+ *
+ * - `gutter`: This is used to divide components in the page. For example
+ *   the header and the lest of the page.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-border: #c2c2c4;
+  --vp-c-divider: #d3d3d8;
+  --vp-c-gutter: #e2e2e3;
+}
+
+.dark {
+  --vp-c-border: #3c3f44;
+  --vp-c-divider: #5d5d69;
+  --vp-c-gutter: #000000;
 }
 
 /**
@@ -345,20 +405,22 @@ input {
 
 :root {
   --vp-home-hero-name-color: var(--vp-c-text-1);
-  --vp-button-brand-bg: #fcd15a;
-  --vp-button-brand-hover-bg: #fcd15a;
 }
 
-.VPHero .VPButton {
-  @apply font-medium transition hover:-translate-y-0.5 hover:shadow-md;
+.VPHero.has-image.VPHomeHero {
+  @apply lg:pb-0;
 }
 
-.VPHero .VPButton.brand {
-  @apply text-[var(--vp-c-black)]!;
+.VPHero.has-image.VPHomeHero p {
+  @apply font-normal text-[var(--vp-home-hero-name-color)];
 }
 
-.VPImage.image-src {
-  @apply max-h-none max-w-none lg:size-[448px]!;
+.VPLink.link.VPFeature {
+  @apply relative rounded-[32px] border bg-gradient-to-b from-[var(--vp-c-white)] to-[var(--vp-c-white)] transition-all duration-300 *:relative *:z-20 after:absolute after:inset-px after:z-10 after:rounded-[31px] after:bg-[var(--vp-c-bg-soft)] hover:shadow-lg;
+}
+
+.dark .VPLink.link.VPFeature {
+  @apply from-[var(--c-border)] to-transparent;
 }
 
 article.box .icon {
@@ -368,28 +430,30 @@ article.box .icon {
     12.835px 12.835px 21.392px 0 var(--vp-c-bg);
 }
 
-.image .image-container {
-  @apply relative flex items-center justify-center;
+article.box .icon ._stroke {
+  @apply stroke-[var(--vp-c-brand-1)];
 }
 
-.image .image-container::before {
-  @apply pointer-events-none absolute top-[60%] left-1/2 -z-10 h-[929px] w-[995px] -translate-x-1/2 -translate-y-1/2 bg-contain bg-center bg-no-repeat;
-  content: '';
-  background-image: url('/bg-gradient.svg');
+article.box .icon ._fill {
+  @apply fill-[var(--vp-c-brand-1)];
 }
 
-.image .image-container .VPImage.image-src {
-  @apply relative z-10;
+/* Image */
+
+.VPImage.image-src {
+  @apply lg:size-[448px]! lg:max-h-none lg:max-w-none;
 }
 
-.VPHero.has-image.VPHomeHero {
-  @apply pb-0;
+.image .image-container {
+  @apply relative flex items-center justify-center;
 }
 
-.VPLink.link.VPFeature {
-  @apply relative rounded-[32px] border bg-gradient-to-b from-[var(--vp-c-white)] to-[var(--vp-c-white)] transition-all duration-300 *:relative *:z-20 after:absolute after:inset-px after:z-10 after:rounded-[31px] after:bg-[var(--vp-c-bg-soft)] hover:shadow-lg;
+.image .image-container::before {
+  @apply pointer-events-none absolute top-[60%] left-1/2 -z-10 size-[724px] -translate-x-1/2 -translate-y-1/2 bg-contain bg-center bg-no-repeat lg:h-[929px] lg:w-[995px];
+  content: '';
+  background-image: url('/bg-gradient.svg');
 }
 
-.dark .VPLink.link.VPFeature {
-  @apply from-[var(--c-border)] to-transparent;
+.image .image-container .VPImage.image-src {
+  @apply z-10 lg:relative;
 }