feat(styles): cut down CSS reset (#20960)

KaelWD · web-flow · commit ae3e8c9bc132 · 2025-12-19T18:41:16.000+11:00
closes #17633
diff --git a/packages/docs/src/App.vue b/packages/docs/src/App.vue
@@ -169,24 +169,13 @@
   a:not(:hover)
     text-decoration: none
 
-  p
-    margin-bottom: 1rem
-    line-height: 1.8
+  h1 + p
+    font-size: 1.25rem
+    font-weight: 300
+    margin-top: 0
 
-    a, a:visited
-      color: rgb(var(--v-theme-primary))
-
-  h1
-    + p
-      font-size: 1.25rem
-      font-weight: 300
-
-  ul:not([class]),
-  ol:not([class])
-    padding-left: 20px
-
-  ul:not([class]):not(li > ul)
-    margin-bottom: 16px
+  p :is(a, a:visited)
+    color: rgb(var(--v-theme-primary))
 
   // Theme transition
   .app-copy
diff --git a/packages/docs/src/components/PageFeatures.vue b/packages/docs/src/components/PageFeatures.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-4">
+  <div>
     <page-feature-chip
       v-if="!isGeneratedPage"
       :href="contribute"
diff --git a/packages/docs/src/components/app/Toc.vue b/packages/docs/src/components/app/Toc.vue
@@ -212,20 +212,23 @@
 </script>
 
 <style lang="sass" scoped>
-  #app-toc
-    ul
-      list-style-type: none
+  @layer vuetify.overrides
+    #app-toc
+      ul
+        list-style-type: none
+        margin: 0
+        padding: 0
 
-    li
-      border-left: 2px solid rgb(var(--v-theme-on-surface-variant))
+      li
+        border-left: 2px solid rgb(var(--v-theme-on-surface-variant))
 
-      &.router-link-active
-        border-left-color: currentColor
+        &.router-link-active
+          border-left-color: currentColor
 
-    .v-toc-link
-      color: inherit
+      .v-toc-link
+        color: inherit
 
-    :deep(.v-navigation-drawer__content)
-      height: auto
-      margin-right: 12px
+      :deep(.v-navigation-drawer__content)
+        height: auto
+        margin-right: 12px
 </style>
diff --git a/packages/docs/src/pages/en/getting-started/upgrade-guide.md b/packages/docs/src/pages/en/getting-started/upgrade-guide.md
@@ -20,6 +20,9 @@ This page contains a detailed list of breaking changes and the steps required to
 ## Styles
 
 - Cascade layers are now being used everywhere. If you have other styles that are not using `@layer` they will now always take priority over vuetify.
+- The CSS reset has been mostly removed, with style normalisation being moved to individual components instead.
+  - `<button>`, `<input>`, `<select>` have their browser native borders and background colors.
+  - `<ul>`, `<ol>` and headings have padding and margins.
 
 ## Themes
 
diff --git a/packages/vuetify/src/components/VAlert/VAlert.sass b/packages/vuetify/src/components/VAlert/VAlert.sass
@@ -84,6 +84,12 @@
     grid-area: content
     overflow: hidden
 
+    > :first-child
+      margin-top: 0
+
+    > :last-child
+      margin-bottom: 0
+
   .v-alert__append,
   .v-alert__close
     margin-inline-start: $alert-append-margin-inline-start
diff --git a/packages/vuetify/src/components/VChip/VChip.sass b/packages/vuetify/src/components/VChip/VChip.sass
@@ -58,6 +58,14 @@
     display: inline-flex
 
   .v-chip__close
+    padding: 0
+    margin: 0
+    font: inherit
+    overflow: visible
+    text-transform: none
+    background-color: transparent
+    border-style: none
+    color: inherit
     cursor: pointer
     flex: 0 1 auto
     font-size: $chip-close-size
diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.sass b/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.sass
@@ -22,15 +22,19 @@
       margin-inline-end: $color-picker-input-margin
 
     input
+      padding: 0
+      font: inherit
+      border-style: none
       border-radius: $color-picker-border-radius
-      margin-bottom: $color-picker-input-margin-bottom
+      margin: 0 0 $color-picker-input-margin-bottom
       min-width: 0
       outline: none
       text-align: center
       width: 100%
       height: $color-picker-input-height
       background: rgba(var(--v-theme-surface-variant), .2)
       color: rgba(var(--v-theme-on-surface))
+      -moz-appearance: textfield
 
       @media (forced-colors: active)
         border-style: solid
diff --git a/packages/vuetify/src/components/VDivider/VDivider.sass b/packages/vuetify/src/components/VDivider/VDivider.sass
@@ -6,8 +6,9 @@
     color: inherit
     display: block
     flex: $divider-flex
-    height: 0px
-    max-height: 0px
+    height: 0
+    max-height: 0
+    margin: 0
     opacity: $divider-opacity
     transition: inherit
 
diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass
@@ -119,10 +119,15 @@
     @include tools.elevation(2)
 
   .v-expansion-panel-title
+    background-color: transparent
+    border: none
+    margin: 0
+    appearance: none
     align-items: center
     text-align: start
     border-radius: inherit
     display: flex
+    font: inherit
     font-size: $expansion-panel-title-font-size
     line-height: 1
     min-height: $expansion-panel-title-min-height
diff --git a/packages/vuetify/src/components/VField/VField.sass b/packages/vuetify/src/components/VField/VField.sass
@@ -146,10 +146,13 @@
     input
       letter-spacing: inherit
 
-    @at-root
-      & input::placeholder,
-      input#{&}::placeholder,
-      textarea#{&}::placeholder
+    @at-root :where(& input, input#{&}, textarea#{&}, select#{&})
+      background-color: transparent
+      border-style: none
+      padding: 0
+      margin: 0
+
+      &::placeholder
         color: currentColor
         opacity: var(--v-disabled-opacity)
 
diff --git a/packages/vuetify/src/components/VOtpInput/VOtpInput.sass b/packages/vuetify/src/components/VOtpInput/VOtpInput.sass
@@ -42,6 +42,11 @@
         height: #{$otp-input-content-height + math.div($modifier, 2)}
 
   .v-otp-input__field
+    padding: 0
+    margin: 0
+    border-radius: 0
+    font: inherit
+    border-style: none
     color: inherit
     font-size: $otp-input-field-font-size
     height: 100%
diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.sass b/packages/vuetify/src/components/VStepper/VStepperItem.sass
@@ -4,6 +4,13 @@
 
 @include tools.layer('components')
   .v-stepper-item
+    margin: 0
+    font: inherit
+    overflow: visible
+    text-transform: none
+    background-color: transparent
+    border-style: none
+    color: inherit
     align-items: center
     align-self: stretch
     display: inline-flex
diff --git a/packages/vuetify/src/composables/__tests__/goto.spec.browser.tsx b/packages/vuetify/src/composables/__tests__/goto.spec.browser.tsx
@@ -54,7 +54,7 @@ describe('goto', () => {
     const bottom = screen.getByCSS('#bottom')
 
     await userEvent.click(top)
-    await expect.poll(() => window.scrollY).toBeCloseTo(1250, -1)
+    await expect.poll(() => window.scrollY).toBeCloseTo(1260, -1)
 
     await userEvent.click(bottom)
     await expect.poll(() => window.scrollY).toBe(0)
@@ -73,7 +73,7 @@ describe('goto', () => {
     const end = screen.getByCSS('#end')
 
     await userEvent.click(start)
-    await expect.poll(() => window.scrollX).toBeCloseTo(755, -1)
+    await expect.poll(() => window.scrollX).toBeCloseTo(770, -1)
 
     expect('target is not reachable').not.toHaveBeenTipped()
 
diff --git a/packages/vuetify/src/styles/generic/_reset.scss b/packages/vuetify/src/styles/generic/_reset.scss
