Update packages

.vitepress/theme/style.css

@@ -1,41 +1,95 @@
+
 /**
- * Customize default theme styling by overriding CSS variables:
- * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
- */
+  * Customize default theme styling by overriding CSS variables:
+  * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+  */
 
 /**
- * Colors
- * -------------------------------------------------------------------------- */
+* Colors
+*
+* Each colors have exact same color scale system with 3 levels of solid
+* colors with different brightness, and 1 soft color.
+* 
+* - `XXX-1`: The most solid color used mainly for colored text. It must
+*   satisfy the contrast ratio against when used on top of `XXX-soft`.
+*
+* - `XXX-2`: The color used mainly for hover state of the button.
+*
+* - `XXX-3`: The color for solid background, such as bg color of the button.
+*   It must satisfy the contrast ratio with pure white (#ffffff) text on
+*   top of it.
+*
+* - `XXX-soft`: The color used for subtle background such as custom container
+*   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+*   on top of it.
+*
+*   The soft color must be semi transparent alpha channel. This is crucial
+*   because it allows adding multiple "soft" colors on top of each other
+*   to create a accent, such as when having inline code block inside
+*   custom containers.
+*
+* - `default`: The color used purely for subtle indication without any
+*   special meanings attched to it such as bg color for menu hover state.
+*
+* - `brand`: Used for primary brand colors, such as link text, button with
+*   brand theme, etc.
+*
+* - `tip`: Used to indicate useful information. The default theme uses the
+*   brand color for this by default.
+*
+* - `warning`: Used to indicate warning to the users. Used in custom
+*   container, badges, etc.
+*
+* - `danger`: Used to show error, or dangerous message to the users. Used
+*   in custom container, badges, etc.
+* -------------------------------------------------------------------------- */
 
- :root {
-  --vp-c-brand: #ce712b;
-  --vp-c-brand-light: #e39254;
-  --vp-c-brand-lighter: #eaa36c;
-  --vp-c-brand-lightest: #fddabf;
-  --vp-c-brand-dark: #b46427;
-  --vp-c-brand-darker: #864717;
-  --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
+:root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: #ce712b;
+  --vp-c-brand-2: #b05f26;
+  --vp-c-brand-3: #8f4f20;
+  --vp-c-brand-soft: rgba(142, 82, 31, 0.14);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
 }
 
 /**
- * Component: Button
- * -------------------------------------------------------------------------- */
+* Component: Button
+* -------------------------------------------------------------------------- */
 
 :root {
-  --vp-button-brand-border: var(--vp-c-brand-light);
+  --vp-button-brand-border: transparent;
   --vp-button-brand-text: var(--vp-c-white);
-  --vp-button-brand-bg: var(--vp-c-brand);
-  --vp-button-brand-hover-border: var(--vp-c-brand-light);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
   --vp-button-brand-hover-text: var(--vp-c-white);
-  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
-  --vp-button-brand-active-border: var(--vp-c-brand-light);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
   --vp-button-brand-active-text: var(--vp-c-white);
-  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
 }
 
 /**
- * Component: Home
- * -------------------------------------------------------------------------- */
+* Component: Home
+* -------------------------------------------------------------------------- */
 
 :root {
   --vp-home-hero-name-color: transparent;
@@ -66,27 +120,22 @@
 }
 
 /**
- * Component: Custom Block
- * -------------------------------------------------------------------------- */
+* Component: Custom Block
+* -------------------------------------------------------------------------- */
 
 :root {
-  --vp-custom-block-tip-border: var(--vp-c-brand);
-  --vp-custom-block-tip-text: var(--vp-c-brand-darker);
-  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
-}
-
-.dark {
-  --vp-custom-block-tip-border: var(--vp-c-brand);
-  --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
-  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
 }
 
 /**
- * Component: Algolia
- * -------------------------------------------------------------------------- */
+* Component: Algolia
+* -------------------------------------------------------------------------- */
 
 .DocSearch {
-  --docsearch-primary-color: var(--vp-c-brand) !important;
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
 
 /**
@@ -100,4 +149,4 @@
 
 .footnote-item > p{
   line-height: 21px !important;
-}
+}