From f1ee91335ecc562511f5e97214f41c043e6944fa Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sat, 25 Jul 2026 13:33:44 +0530
Subject: [PATCH] refactor(theme)!: rebuild the base styles on tailwind's
 preflight

base.css is now Tailwind's preflight (pinned to their e48c5e80) wrapped
in the vitepress cascade layer, with the font stacks pointing at the
vitepress variables and the bold weight at 600, followed by a section
with the vitepress-specific overrides. Compared to the old base this
picks up the universal margin/padding/border reset, tab-size: 4, iOS
tap-highlight removal, and the modern form and date-input
normalizations, and drops fossils like the touch-action click-delay
hack and main { display: block }.

BREAKING CHANGE: normalize-level defaults differ from the old reset -
native select and number-input chrome is restored, headings inherit
font size and weight, the hidden attribute is enforced with !important,
and every element starts with zero margin/padding and border-style:
solid. Sites layering custom CSS on the default theme may notice.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/client/theme-default/styles/base.css | 367 +++++++++++++----------
 1 file changed, 211 insertions(+), 156 deletions(-)

diff --git a/src/client/theme-default/styles/base.css b/src/client/theme-default/styles/base.css
index e8e4f9e4..ca379eb1 100644
--- a/src/client/theme-default/styles/base.css
+++ b/src/client/theme-default/styles/base.css
@@ -1,54 +1,40 @@
 @layer __vitepress_base {
-  @media (prefers-reduced-motion: reduce) {
-    *,
-    ::before,
-    ::after {
-      animation-delay: -1ms !important;
-      animation-duration: 1ms !important;
-      animation-iteration-count: 1 !important;
-      background-attachment: initial !important;
-      scroll-behavior: auto !important;
-      transition-duration: 0s !important;
-      transition-delay: 0s !important;
-    }
-  }
+  /* #region Tailwind Preflight */
+
+  /* Based on https://github.com/tailwindlabs/tailwindcss/blob/e48c5e80473c25fe5a27fe267fbaf4f6512424a3/packages/tailwindcss/preflight.css,
+     with the `--theme()` references replaced by vitepress variables, and `bolder` replaced by `600` */
 
   *,
+  ::after,
   ::before,
-  ::after {
+  ::backdrop,
+  ::file-selector-button {
     box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
   }
 
-  html {
-    line-height: 1.4;
-    font-size: 16px;
+  html,
+  :host {
+    line-height: 1.5;
     -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--vp-font-family-base);
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    -webkit-tap-highlight-color: transparent;
   }
 
-  html.dark {
-    color-scheme: dark;
-  }
-
-  body {
-    margin: 0;
-    width: 100%;
-    min-width: 320px;
-    min-height: 100vh;
-    line-height: 24px;
-    font-family: var(--vp-font-family-base);
-    font-size: 16px;
-    font-weight: 400;
-    color: var(--vp-c-text-1);
-    background-color: var(--vp-c-bg);
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-autospace: normal;
-    text-spacing-trim: normal;
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
   }
 
-  main {
-    display: block;
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
   }
 
   h1,
@@ -57,70 +43,73 @@
   h4,
   h5,
   h6 {
-    margin: 0;
-    line-height: 24px;
-    font-size: 16px;
-    font-weight: 400;
+    font-size: inherit;
+    font-weight: inherit;
   }
 
-  p {
-    margin: 0;
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
   }
 
-  strong,
-  b {
+  b,
+  strong {
     font-weight: 600;
   }
 
-  /**
-     * Avoid 300ms click delay on touch devices that support the `touch-action`
-     * CSS property.
-     *
-     * In particular, unlike most other browsers, IE11+Edge on Windows 10 on
-     * touch devices and IE Mobile 10-11 DON'T remove the click delay when
-     * `<meta name="viewport" content="width=device-width">` is present.
-     * However, they DO support removing the click delay via
-     * `touch-action: manipulation`.
-     *
-     * See:
-     * - http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
-     * - http://caniuse.com/#feat=css-touch-action
-     * - http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
-     */
-  a,
-  area,
-  button,
-  [role='button'],
-  input,
-  label,
-  select,
-  summary,
-  textarea {
-    touch-action: manipulation;
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--vp-font-family-mono);
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    font-size: 1em;
   }
 
-  a {
-    color: inherit;
-    text-decoration: inherit;
+  small {
+    font-size: 80%;
   }
 
-  ol,
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
   }
 
-  blockquote {
-    margin: 0;
+  sub {
+    bottom: -0.25em;
   }
 
-  pre,
-  code,
-  kbd,
-  samp {
-    font-family: var(--vp-font-family-mono);
-    text-autospace: no-autospace;
+  sup {
+    top: -0.5em;
+  }
+
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  :-moz-focusring:where(:not(iframe)) {
+    outline: auto;
+  }
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  ol,
+  ul,
+  menu {
+    list-style: none;
   }
 
   img,
@@ -134,10 +123,6 @@
     display: block;
   }
 
-  figure {
-    margin: 0;
-  }
-
   img,
   video {
     max-width: 100%;
@@ -146,87 +131,171 @@
 
   button,
   input,
-  optgroup,
   select,
-  textarea {
-    border: 0;
-    padding: 0;
-    line-height: inherit;
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
     color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
   }
 
-  button {
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: 600;
+  }
+
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+
+  ::placeholder {
+    opacity: 1;
+  }
+
+  @supports (not (-webkit-appearance: -apple-pay-button)) or
+    (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+
+  ::-webkit-datetime-edit-fields-wrapper {
     padding: 0;
-    font-family: inherit;
-    background-color: transparent;
-    background-image: none;
   }
 
-  button:enabled,
-  [role='button']:enabled {
-    cursor: pointer;
+  ::-webkit-datetime-edit,
+  ::-webkit-datetime-edit-year-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-minute-field,
+  ::-webkit-datetime-edit-second-field,
+  ::-webkit-datetime-edit-millisecond-field,
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
   }
 
-  button:focus,
-  button:focus-visible {
-    outline: 1px dotted;
-    outline: 4px auto -webkit-focus-ring-color;
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
   }
 
-  button:focus:not(:focus-visible) {
-    outline: none !important;
+  :-moz-ui-invalid {
+    box-shadow: none;
   }
 
-  input:focus,
-  textarea:focus,
-  select:focus {
-    outline: none;
+  button,
+  input:where([type='button'], [type='reset'], [type='submit']),
+  ::file-selector-button {
+    appearance: button;
   }
 
-  table {
-    border-collapse: collapse;
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
   }
 
-  input {
-    background-color: transparent;
+  [hidden]:where(:not([hidden='until-found'])) {
+    display: none !important;
   }
 
-  input:-ms-input-placeholder,
-  textarea:-ms-input-placeholder {
-    color: var(--vp-c-text-3);
+  /* #endregion */
+
+  /* #region VitePress Overrides */
+
+  /* https://web.dev/articles/prefers-reduced-motion#bonus_forcing_reduced_motion_on_all_websites */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      animation-delay: -1ms !important;
+      animation-duration: 1ms !important;
+      animation-iteration-count: 1 !important;
+      background-attachment: initial !important;
+      scroll-behavior: auto !important;
+      transition-duration: 0s !important;
+      transition-delay: 0s !important;
+    }
   }
 
-  input::-ms-input-placeholder,
-  textarea::-ms-input-placeholder {
-    color: var(--vp-c-text-3);
+  :root {
+    /* FIXME: pins rem-sized bits while the theme is px-based - remove when
+       moving to relative units (#570) */
+    font-size: 16px;
+
+    &:is(.dark) {
+      color-scheme: dark;
+    }
+    &:not(.dark) {
+      color-scheme: light;
+    }
   }
 
-  input::placeholder,
-  textarea::placeholder {
-    color: var(--vp-c-text-3);
+  body {
+    /* FIXME: unlike html's unitless 1.5, this is inherited as-is by elements
+       with other font sizes - make unitless with #570 */
+    line-height: 24px;
+    color: var(--vp-c-text-1);
+    background-color: var(--vp-c-bg);
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-autospace: normal;
+    text-spacing-trim: normal;
   }
 
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  pre,
+  code,
+  kbd,
+  samp {
+    text-autospace: no-autospace;
   }
 
-  input[type='number'] {
-    -moz-appearance: textfield;
+  button:enabled,
+  [role='button']:enabled {
+    cursor: pointer;
   }
 
-  textarea {
-    resize: vertical;
+  button:focus,
+  input:focus,
+  textarea:focus,
+  select:focus {
+    outline: none;
   }
 
-  select {
-    -webkit-appearance: none;
+  button:focus-visible {
+    outline: 1px dotted;
+    outline: 4px auto -webkit-focus-ring-color;
   }
 
-  fieldset {
-    margin: 0;
-    padding: 0;
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--vp-c-text-3);
   }
 
   h1,
@@ -240,22 +309,6 @@
     overflow-wrap: break-word;
   }
 
-  sub,
-  sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-
-  sub {
-    bottom: -0.25em;
-  }
-
-  sup {
-    top: -0.5em;
-  }
-
   vite-error-overlay {
     z-index: 9999;
   }
@@ -268,4 +321,6 @@
     display: inline-block;
     margin: auto;
   }
+
+  /* #endregion */
 }