vitepress 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/client/theme-default/styles/base.css

@@ -1,251 +1,319 @@
-@media (prefers-reduced-motion: reduce) {
+@layer __vitepress_base {
+  /* #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 {
-    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;
+  ::backdrop,
+  ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
   }
-}
 
-*,
-::before,
-::after {
-  box-sizing: border-box;
-}
+  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 {
-  line-height: 1.4;
-  font-size: 16px;
-  -webkit-text-size-adjust: 100%;
-}
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
 
-html.dark {
-  color-scheme: dark;
-}
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
 
-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);
-  font-synthesis: style;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
 
-main {
-  display: block;
-}
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 0;
-  line-height: 24px;
-  font-size: 16px;
-  font-weight: 400;
-}
+  b,
+  strong {
+    font-weight: 600;
+  }
 
-p {
-  margin: 0;
-}
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--vp-font-family-mono);
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    font-size: 1em;
+  }
 
-strong,
-b {
-  font-weight: 600;
-}
+  small {
+    font-size: 80%;
+  }
 
-/**
- * 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;
-}
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
 
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
+  sub {
+    bottom: -0.25em;
+  }
 
-ol,
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
+  sup {
+    top: -0.5em;
+  }
 
-blockquote {
-  margin: 0;
-}
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
 
-pre,
-code,
-kbd,
-samp {
-  font-family: var(--vp-font-family-mono);
-}
+  :-moz-focusring:where(:not(iframe)) {
+    outline: auto;
+  }
 
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block;
-}
+  progress {
+    vertical-align: baseline;
+  }
 
-figure {
-  margin: 0;
-}
+  summary {
+    display: list-item;
+  }
 
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
 
-button,
-input,
-optgroup,
-select,
-textarea {
-  border: 0;
-  padding: 0;
-  line-height: inherit;
-  color: inherit;
-}
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+  }
 
-button {
-  padding: 0;
-  font-family: inherit;
-  background-color: transparent;
-  background-image: none;
-}
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
 
-button:enabled,
-[role='button']:enabled {
-  cursor: pointer;
-}
+  button,
+  input,
+  select,
+  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:focus,
-button:focus-visible {
-  outline: 1px dotted;
-  outline: 4px auto -webkit-focus-ring-color;
-}
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: 600;
+  }
 
-button:focus:not(:focus-visible) {
-  outline: none !important;
-}
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 1.25rem;
+  }
 
-input:focus,
-textarea:focus,
-select:focus {
-  outline: none;
-}
+  ::file-selector-button {
+    margin-inline-end: 0.25rem;
+  }
 
-table {
-  border-collapse: collapse;
-}
+  ::placeholder {
+    opacity: 1;
+  }
 
-input {
-  background-color: transparent;
-}
+  @supports (not (-webkit-appearance: -apple-pay-button)) or
+    (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
 
-input:-ms-input-placeholder,
-textarea:-ms-input-placeholder {
-  color: var(--vp-c-text-3);
-}
+  textarea {
+    resize: vertical;
+  }
 
-input::-ms-input-placeholder,
-textarea::-ms-input-placeholder {
-  color: var(--vp-c-text-3);
-}
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
 
-input::placeholder,
-textarea::placeholder {
-  color: var(--vp-c-text-3);
-}
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
 
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
 
-input[type='number'] {
-  -moz-appearance: textfield;
-}
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
 
-textarea {
-  resize: vertical;
-}
+  ::-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;
+  }
 
-select {
-  -webkit-appearance: none;
-}
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
 
-fieldset {
-  margin: 0;
-  padding: 0;
-}
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-li,
-p {
-  overflow-wrap: break-word;
-}
+  button,
+  input:where([type='button'], [type='reset'], [type='submit']),
+  ::file-selector-button {
+    appearance: button;
+  }
 
-vite-error-overlay {
-  z-index: 9999;
-}
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
 
-mjx-container {
-  overflow-x: auto;
-}
+  [hidden]:where(:not([hidden='until-found'])) {
+    display: none !important;
+  }
+
+  /* #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;
+    }
+  }
+
+  :root {
+    &:is(.dark) {
+      color-scheme: dark;
+    }
+    &:not(.dark) {
+      color-scheme: light;
+    }
+  }
+
+  body {
+    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;
+  }
+
+  pre,
+  code,
+  kbd,
+  samp {
+    text-autospace: no-autospace;
+  }
+
+  button:enabled,
+  [role='button']:enabled {
+    cursor: pointer;
+  }
+
+  button:focus,
+  input:focus,
+  textarea:focus,
+  select:focus {
+    outline: none;
+  }
+
+  button:focus-visible {
+    outline: 1px dotted;
+    outline: 4px auto -webkit-focus-ring-color;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--vp-c-text-3);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  li,
+  p {
+    overflow-wrap: break-word;
+  }
+
+  vite-error-overlay {
+    z-index: 9999;
+  }
+
+  mjx-container {
+    overflow-x: auto;
+  }
+
+  mjx-container > svg {
+    display: inline-block;
+    margin: auto;
+  }
 
-mjx-container > svg {
-  display: inline-block;
-  margin: auto;
+  /* #endregion */
 }

package/dist/client/theme-default/styles/components/custom-block.css

@@ -1,12 +1,17 @@
 .custom-block {
   border: 1px solid transparent;
-  border-radius: 8px;
-  padding: 16px 16px 8px;
-  line-height: 24px;
+  border-radius: 0.5rem;
+  padding: 0.5rem 1rem;
+  line-height: 1.7142857;
   font-size: var(--vp-custom-block-font-size);
   color: var(--vp-c-text-2);
 }
 
+/* containers rendered with `{no-title}` keep the reduced padding */
+.custom-block:has(> .custom-block-title, > summary) {
+  padding-top: 1rem;
+}
+
 .custom-block.info {
   border-color: var(--vp-custom-block-info-border);
   color: var(--vp-custom-block-info-text);
@@ -171,25 +176,25 @@
 }
 
 .custom-block p + p {
-  margin: 8px 0;
+  margin: 0.5rem 0;
 }
 
 .custom-block.details summary {
-  margin: 0 0 8px;
+  margin: 0 0 0.5rem;
   font-weight: 700;
   cursor: pointer;
   user-select: none;
 }
 
 .custom-block.details summary + p {
-  margin: 8px 0;
+  margin: 0.5rem 0;
 }
 
 .custom-block a {
   color: inherit;
   font-weight: 600;
   text-decoration: underline;
-  text-underline-offset: 2px;
+  text-underline-offset: 0.125rem;
   transition: opacity 0.25s;
 }
 

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

@@ -1,24 +1,22 @@
 .vp-code-group {
-  margin-top: 16px;
+  margin-top: 1rem;
 }
 
 .vp-code-group .tabs {
   position: relative;
   display: flex;
-  margin-right: -24px;
-  margin-left: -24px;
-  padding: 0 12px;
+  margin-inline: -1.5rem;
+  padding: 0 0.75rem;
   background-color: var(--vp-code-tab-bg);
   overflow-x: auto;
   overflow-y: hidden;
   box-shadow: inset 0 -1px var(--vp-code-tab-divider);
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .vp-code-group .tabs {
-    margin-right: 0;
-    margin-left: 0;
-    border-radius: 8px 8px 0 0;
+    margin-inline: 0;
+    border-radius: 0.5rem 0.5rem 0 0;
   }
 }
 
@@ -32,9 +30,9 @@
   position: relative;
   display: inline-block;
   border-bottom: 1px solid transparent;
-  padding: 0 12px;
-  line-height: 48px;
-  font-size: 14px;
+  padding: 0 0.75rem;
+  line-height: 3.4285714;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-code-tab-text-color);
   white-space: nowrap;
@@ -44,9 +42,8 @@
 
 .vp-code-group .tabs label::after {
   position: absolute;
-  right: 8px;
+  inset-inline: 0.5rem;
   bottom: -1px;
-  left: 8px;
   z-index: 1;
   height: 2px;
   border-radius: 2px;
@@ -71,8 +68,8 @@
 .vp-block {
   display: none;
   margin-top: 0 !important;
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
+  border-start-start-radius: 0 !important;
+  border-start-end-radius: 0 !important;
 }
 
 .vp-code-group div[class*='language-'].active,
@@ -81,5 +78,5 @@
 }
 
 .vp-block {
-  padding: 20px 24px;
+  padding: 1.25rem 1.5rem;
 }

package/dist/client/theme-default/styles/components/vp-code.css

@@ -1,7 +1,15 @@
-.dark .vp-code span {
+.dark .shiki span {
   color: var(--shiki-dark, inherit);
+  text-decoration: var(--shiki-dark-text-decoration, inherit);
+  font-weight: var(--shiki-dark-font-weight, inherit);
 }
 
-html:not(.dark) .vp-code span {
+html:not(.dark) .shiki span {
   color: var(--shiki-light, inherit);
+  text-decoration: var(--shiki-light-text-decoration, inherit);
+  font-weight: var(--shiki-light-font-weight, inherit);
+}
+
+.shiki span {
+  unicode-bidi: isolate;
 }