feat: put all styles in `@layer` for lowered specificity

src/client/theme-default/styles/base.css

@@ -1,3 +1,4 @@
+@layer vitepress.base {
   @media (prefers-reduced-motion: reduce) {
     *,
     ::before,
@@ -249,3 +250,4 @@ mjx-container > svg {
     display: inline-block;
     margin: auto;
   }
+}

src/client/theme-default/styles/components/custom-block.css

@@ -1,3 +1,4 @@
+@layer vitepress.components.customblock {
   .custom-block {
     border: 1px solid transparent;
     border-radius: 8px;
@@ -206,3 +207,4 @@
     font-size: var(--vp-custom-block-font-size);
     color: inherit;
   }
+}

src/client/theme-default/styles/components/vp-code-group.css

@@ -1,3 +1,4 @@
+@layer vitepress.components.codegroup {
   .vp-code-group {
     margin-top: 16px;
   }
@@ -83,3 +84,4 @@
   .vp-block {
     padding: 20px 24px;
   }
+}

src/client/theme-default/styles/components/vp-code.css

@@ -1,3 +1,4 @@
+@layer vitepress.components.code {
   .dark .vp-code span {
     color: var(--shiki-dark, inherit);
   }
@@ -5,3 +6,4 @@
   html:not(.dark) .vp-code span {
     color: var(--shiki-light, inherit);
   }
+}

src/client/theme-default/styles/components/vp-doc.css

@@ -1,3 +1,4 @@
+@layer vitepress.components.doc {
   /**
  * Headings
  * -------------------------------------------------------------------------- */
@@ -299,7 +300,10 @@
 
   .vp-doc div[class*='language-'] + div[class*='language-'],
   .vp-doc div[class$='-api'] + div[class*='language-'],
-.vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
+  .vp-doc
+    div[class*='language-']
+    + div[class$='-api']
+    > div[class*='language-'] {
     margin-top: -8px;
   }
 
@@ -576,3 +580,4 @@
   content: '';
   color: currentColor;
 }
+}

src/client/theme-default/styles/components/vp-sponsor.css

@@ -1,3 +1,4 @@
+@layer vitepress.components.sponsor {
   /**
  * VPSponsors styles are defined as global because a new class gets
  * allied in onMounted` hook and we can't use scoped style.
@@ -153,3 +154,4 @@
   .dark .vp-sponsor-grid-image {
     filter: grayscale(1) invert(1);
   }
+}

src/client/theme-default/styles/icons.css

@@ -1,3 +1,4 @@
+@layer vitepress.icons {
   [class^='vpi-'],
   [class*=' vpi-'],
   .vp-icon {
@@ -121,3 +122,4 @@
   .vpi-social-youtube {
     --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
   }
+}

src/client/theme-default/styles/utils.css

@@ -1,3 +1,4 @@
+@layer vitepress.utils {
   .visually-hidden {
     position: absolute;
     width: 1px;
@@ -7,3 +8,4 @@
     clip-path: inset(50%);
     overflow: hidden;
   }
+}

src/client/theme-default/styles/vars.css

@@ -1,3 +1,4 @@
+@layer vitepress.vars {
   /**
  * Colors: Solid
  * -------------------------------------------------------------------------- */
@@ -262,7 +263,8 @@
 
   :root {
     --vp-font-family-base: 'Inter', ui-sans-serif, system-ui, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+      'Noto Color Emoji';
     --vp-font-family-mono: ui-monospace, 'Menlo', 'Monaco', 'Consolas',
       'Liberation Mono', 'Courier New', monospace;
     font-optical-sizing: auto;
@@ -283,8 +285,10 @@
     --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
     --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
     --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
-  --vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
-  --vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
+    --vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12),
+      0 3px 9px rgba(0, 0, 0, 0.12);
+    --vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16),
+      0 4px 12px rgba(0, 0, 0, 0.16);
   }
 
   /**
@@ -566,3 +570,4 @@
     --vp-local-search-highlight-bg: var(--vp-c-brand-1);
     --vp-local-search-highlight-text: var(--vp-c-neutral-inverse);
   }
+}