msb-public
/
vitepress
mirror of https://github.com/vuejs/vitepress
2
1
Code Issues Projects Releases Wiki Activity

refactor(theme)!: rebuild the base styles on tailwind's preflight

Browse Source 
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>
pull/5335/head
Divyansh Singh 2 months ago
parent 829288ddec
commit f1ee91335e
1 changed files with 211 additions and 156 deletions
Show Stats Download Patch File Download Diff File

367
src/client/theme-default/styles/base.css
Unescape View File

@ -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 */
}

Write Preview
Loading…
Cancel
Save