@kirchdev/duxt 0.1.0

package/app/assets/css/duxt.css

@@ -0,0 +1,555 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+/* vue-sonner ships its own stylesheet; without it the toasts render as bare
+   text on the page background. */
+@import 'vue-sonner/style.css';
+@import './typeset.css';
+
+/* Tailwind auto-detects sources from the build root, which is the CONSUMER's
+   directory — the layer sits outside it and would be scanned by nobody, so
+   every utility used in these components would be missing from the output.
+   Relative to this file, so it holds wherever the layer is installed. */
+@source '../../../app';
+
+/* shadcn switches themes on a class, not a media query — @nuxtjs/color-mode
+   sets it with classSuffix: '' so the two agree. */
+@custom-variant dark (&:is(.dark *));
+
+/*
+ * The neutral base palette, in oklch. A consumer overrides a token by
+ * redefining it in its own stylesheet — no fork of this file needed.
+ *
+ * IN A CASCADE LAYER, so that override cannot lose a race. Unlayered CSS beats
+ * layered CSS whatever the source order — and source order is not something
+ * this file controls. Vite resolves the stylesheet's absolute path along two
+ * routes at once, `/_nuxt/@fs/<abs>` and `/_nuxt/<abs>`, and deduplicates
+ * neither, so a second copy of this file lands AFTER the consumer's own `css`
+ * entry. At equal specificity the values below then won on order alone, and
+ * which one painted first came down to which 313 kB response arrived first: a
+ * consumer's buttons and badges flashed neutral before turning branded, and
+ * differently on every reload.
+ *
+ * The layer is ANONYMOUS on purpose. A named one can be reordered by a consumer
+ * writing `@layer` itself, which would hand the race straight back; an
+ * anonymous layer cannot be named again, so nothing downstream can move its own
+ * rules below these.
+ *
+ * Only the tokens go in here. Everything further down this file styles the
+ * layer's own components, where a consumer overriding by name is meant to need
+ * the specificity it already takes.
+ */
+@layer {
+  :root {
+    --radius: 0.625rem;
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    /* shadcn's own value is oklch(0.556 0 0). Measured, that is 4.73:1 on the
+       page background — and 4.34:1 on --muted / --accent, which is where this
+       token actually lands: a hovered sidebar link, a badge, the sheet. So the
+       default fails AA on exactly the surfaces it is used on. 0.52 gives 5.51:1
+       and 5.05:1, and this token carries the page descriptions, the table of
+       contents and the breadcrumb — too much text to leave borderline. */
+    --muted-foreground: oklch(0.52 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --destructive-foreground: oklch(0.985 0 0);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    /* THE FOREGROUND FOLLOWS THE BACKGROUND'S LIGHTNESS, not the mode's. A pale
+       green with white on it reads as a badge and measures 3.12:1, which is a
+       badge nobody with low vision can read. Above roughly L 0.6 the pair takes
+       dark text, below it white — `--warning` already did, and success, info and
+       dark-mode destructive were simply missed. Enforced in
+       `tests/contrast.test.ts`; see the note on `--muted-foreground` above for
+       why the browser check cannot answer this. */
+    --success: oklch(0.63 0.17 149);
+    --success-foreground: oklch(0.145 0 0);
+    --warning: oklch(0.75 0.16 70);
+    --warning-foreground: oklch(0.145 0 0);
+    --info: oklch(0.62 0.16 244);
+    --info-foreground: oklch(0.145 0 0);
+  }
+
+  .dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    /* Same measurement in the dark: 7.63:1 on the background but 5.83:1 on
+       --muted. Lifted for the same reason, by less, because it starts higher. */
+    --muted-foreground: oklch(0.72 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --destructive-foreground: oklch(0.145 0 0);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --success: oklch(0.7 0.16 149);
+    --success-foreground: oklch(0.145 0 0);
+    --warning: oklch(0.8 0.15 70);
+    --warning-foreground: oklch(0.145 0 0);
+    --info: oklch(0.7 0.14 244);
+    --info-foreground: oklch(0.145 0 0);
+  }
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  /* The one line that tells the BROWSER which theme is on. Without it every
+     piece of native UI — scrollbars first, then form controls and the canvas
+     behind a short page — is drawn light on a dark site, which is why a
+     scrollbar inside an iframe looked nothing like the window's own.
+     `scrollbar-*` are inherited properties, so `:root` reaches every scroll
+     container in the page: the sidebar, the table of contents, a code block. */
+  :root {
+    color-scheme: light;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+  }
+
+  :root:is(.dark),
+  .dark {
+    color-scheme: dark;
+  }
+}
+
+/* The editor's own syntax colours, taken from the two Shiki themes the fences
+   use — `github-light` and `github-dark`, read off their token settings rather
+   than eyeballed: string `#032f62`/`#9ecbff`, every constant (number, boolean,
+   null) and every `support` scope (which is where a JSON property name lands)
+   `#005cc5`/`#79b8ff`, keyword `#d73a49`/`#f97583`.
+
+   Variables rather than two CodeMirror themes, for the reason the palette above
+   is variables: the editor is built once and would otherwise freeze whichever
+   mode was current when it mounted, and a consumer who wants other colours
+   redefines four names instead of forking a component. */
+:root {
+  --duxt-cm-key: #005cc5;
+  --duxt-cm-string: #032f62;
+  --duxt-cm-value: #005cc5;
+  --duxt-cm-keyword: #d73a49;
+  --duxt-cm-comment: #6a737d;
+}
+
+:root:is(.dark),
+.dark {
+  --duxt-cm-key: #79b8ff;
+  --duxt-cm-string: #9ecbff;
+  --duxt-cm-value: #79b8ff;
+  --duxt-cm-keyword: #f97583;
+}
+
+/* `defaultColor: false` emits BOTH themes as custom properties and sets no
+   colour at all, so a block highlighted that way renders flat until something
+   picks one. Content's own fences do not need this — they carry the light
+   colour inline and Content injects the dark rule — but every block this site
+   highlights itself does, which is why the two classes are named together:
+   forgetting the second is a box of grey text beside a coloured one. */
+.duxt-shell span,
+.duxt-code-body span {
+  color: var(--shiki-light);
+}
+
+.dark .duxt-shell span,
+.dark .duxt-code-body span {
+  color: var(--shiki-dark);
+}
+
+.duxt-shell pre {
+  margin: 0;
+  background: transparent !important;
+}
+
+/* The layer's typeset preset. Three controls — size, leading, flow — and
+   everything else derives from them; see the typeset docs. A consumer
+   redefines these in its own stylesheet rather than restyling elements. */
+.typeset-docs {
+  --typeset-size: 15px;
+  --typeset-leading: 1.7;
+  --typeset-flow: 1.25em;
+}
+
+/* Kept from the hand-written prose: a heading anchor in the margin, and code
+   blocks drawing their own surface rather than the highlighter's.
+
+   The surface matters: typeset gives every `pre` a muted background (its line
+   293), which lands on top of the card DuxtCodeBlock already draws — two
+   surfaces, and in dark mode the inner one reads as a highlighted row. Not
+   scoped to .typeset, because the package-manager block renders the same
+   markup outside a rendered page. */
+/* The heading link wraps the words, so it has to shed what `typeset` gives
+   every other link — the underline would draw a rule under every H2 on the
+   site. `relative` is what the marker below positions against: anchored to the
+   text rather than to the heading box, it lands the same distance out whatever
+   the heading's own margins are. */
+.typeset :where(.duxt-heading-link) {
+  @apply relative no-underline;
+  text-decoration-line: none;
+}
+
+.typeset :where(.duxt-anchor) {
+  @apply absolute -left-5 font-normal text-muted-foreground opacity-0 transition-opacity;
+}
+
+/* THE MARKER AS THE LINK ITSELF, where the heading already contains one and
+   cannot be wrapped in a second — see `headingHasLink`. It sits in the flow
+   rather than out in the margin, and it is always visible: a control revealed
+   only on hover is a control no touch device can reach, which is tolerable
+   while the words beside it are the same link and not at all once they are
+   somebody else's. */
+.typeset :where(.duxt-anchor-only) {
+  @apply relative left-auto mr-2 inline no-underline opacity-60 transition-opacity;
+}
+
+.typeset :where(.duxt-anchor-only:hover, .duxt-anchor-only:focus-visible) {
+  @apply opacity-100;
+}
+
+/* Revealed by hovering the heading, not the marker: the marker is 1.25rem
+   outside the text and nobody hunts for it. Focus does the same for the
+   keyboard, where the link is reached without a pointer at all. */
+.typeset :where(h2:hover, h3:hover, h4:hover) .duxt-anchor,
+.typeset :where(.duxt-heading-link:focus-visible) .duxt-anchor {
+  @apply opacity-100;
+}
+
+/* A SCHEMA ROW THAT OPENS. The whole row is the target and the tile is the
+   sign, because a 16-pixel box is under the size a fingertip can aim at — so
+   the click area is the summary and the tile only says that there is one.
+   
+   The marker `details` draws itself is removed in both spellings browsers
+   still need. */
+.duxt-schema-row {
+  @apply -mx-1.5 cursor-pointer rounded-lg px-1.5 py-0.5 transition-colors;
+  list-style: none;
+}
+
+.duxt-schema-row::-webkit-details-marker {
+  display: none;
+}
+
+.duxt-schema-row:hover {
+  background: color-mix(in oklch, var(--muted) 50%, transparent);
+}
+
+.duxt-schema-row:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: -2px;
+}
+
+/* A `+` that becomes a `−`, drawn by the icon set rather than by two
+   pseudo-elements: at this size the percentage insets that placed them rounded
+   to different thicknesses, so the cross had one heavy stroke and one thin.
+   Both icons ship in the markup and the state picks one — the alternative is a
+   `content` swap, which cannot draw an SVG. */
+.duxt-schema-tile {
+  @apply relative inline-flex size-4 shrink-0 items-center justify-center rounded border bg-muted/40 text-muted-foreground transition-colors;
+  align-self: center;
+}
+
+.duxt-schema-tile .duxt-schema-minus,
+details[open] > .duxt-schema-row .duxt-schema-tile .duxt-schema-plus {
+  display: none;
+}
+
+details[open] > .duxt-schema-row .duxt-schema-tile .duxt-schema-minus {
+  display: block;
+}
+
+/* The tile answers the hover of the ROW, not of itself: the row is what is
+   being aimed at, and a tile that lit only under the pointer would go dark
+   exactly when the reader is about to click the line beside it. */
+.duxt-schema-row:hover .duxt-schema-tile {
+  @apply border-foreground/20 bg-muted text-foreground;
+}
+
+/* The label a section of generated furniture is headed with — the release
+   page's groups, the reference's "parameters" and "responses", the overview's
+   "servers".
+   
+   ONE CLASS because there are six of them and they were six copies of five
+   utilities, which is exactly how the reference came to be set in
+   `text-sm font-semibold uppercase` at full strength while the changelog was
+   set at 0.6875rem in `muted-foreground`: the same idea, two sizes, two
+   weights, two colours, on pages a reader moves between.
+   
+   The colour is the DEFAULT and not the rule: a caller that has a tone of its
+   own — a changelog group — sets it after this class and wins. */
+.duxt-label {
+  @apply text-[0.6875rem] font-semibold tracking-[0.12em] text-muted-foreground uppercase;
+}
+
+/* A release group's ENTRIES, which arrive as ordinary Markdown in
+   `ChangelogGroup`'s slot and were therefore set as prose: 1.7 leading with a
+   paragraph's flow between them, so six one-line facts filled a screen and a
+   half and a release with twelve groups read as a document rather than as a
+   list. They are a list, and are set as one.
+
+   The MARKER IS MUTED, not the group's tone. The colour is already stated in
+   the label directly above these lines; stated again on every line it stops
+   being a signal — the same hint, repeated, is confetti. Drawn as a box rather
+   than through `::marker`, which takes a colour but not a size or a position.
+
+   Only the TOP level: a list nested inside an entry keeps the prose treatment,
+   because there the indent is what says it is nested. */
+.typeset :where(.duxt-release > ul) {
+  margin: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.typeset :where(.duxt-release > ul > li) {
+  position: relative;
+  margin: 0;
+  padding-left: 1.05rem;
+  line-height: 1.55;
+}
+
+.typeset :where(.duxt-release > ul > li + li) {
+  margin-top: 0.35rem;
+}
+
+.typeset :where(.duxt-release > ul > li)::before {
+  content: '';
+  position: absolute;
+  top: 0.6em;
+  left: 0;
+  height: 0.3125rem;
+  width: 0.3125rem;
+  border-radius: 999px;
+  background: var(--muted-foreground);
+}
+
+pre.shiki,
+.typeset :where(pre) {
+  background-color: transparent;
+}
+
+/* Content injects `html.dark .shiki span { background: var(--shiki-dark-bg) }`
+   inline in the document head — specificity (0,2,2), which outranks anything
+   sensible we could write against it. The tokens inherit that variable from
+   the <pre>, where Shiki sets it to the theme's own page colour, so in dark
+   mode every token drew a #24292e rectangle over the card.
+   
+   Redefining the variable is the way out: the rule still applies, it just has
+   nothing to paint. Set on the tokens rather than the <pre>, because there the
+   value is inline and would win. */
+.shiki span {
+  --shiki-light-bg: transparent;
+  --shiki-dark-bg: transparent;
+}
+
+/* A code block draws its own card with a filename header, so the `<pre>` inside
+   is that card's body rather than a block in the flow. typeset's block spacing
+   on `pre` therefore lands *inside* the border and opens a gap between the
+   header and the first line. */
+.typeset :where(.duxt-code pre) {
+  margin: 0;
+}
+
+/* Code this site highlighted itself rather than Content — a derived example, a
+   response, a `curl` sample — arrives as Shiki's own `<pre class="shiki">` with
+   no padding of its own. Content's fences get theirs from the MDC renderer, so
+   this is the same rule stated for the blocks that never went through it. Not
+   scoped to `.typeset`: the try-it client draws these outside a rendered
+   page. */
+.duxt-code-body pre {
+  margin: 0;
+  overflow-x: auto;
+  padding: 1rem;
+  font-size: 0.875rem;
+}
+
+.duxt-code-body pre code {
+  font-family: inherit;
+}
+
+/* A long unbroken token — a URL, a package name, a path — is the other way a
+   page grows wider than the phone holding it. Inline code may break; the
+   scrollable blocks (code fences, tables) keep their own overflow. */
+.typeset :where(:not(pre) > code) {
+  overflow-wrap: anywhere;
+}
+
+/* Honour a reader who has asked the system for less motion.
+ 
+   Blunt on purpose. The moving parts are the collapsible in the sidebar, the
+   mobile sheet and the toasts, but each of the three animates through a
+   different mechanism — tw-animate-css keyframes on a data-state, reka-ui's
+   presence, vue-sonner's own stylesheet — and naming them one by one leaves the
+   next component to be added moving again. A near-zero duration rather than
+   `none`: reka-ui waits for `animationend` before it unmounts a panel, and an
+   animation that never runs never ends. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Shiki's line annotations, which have classes and no styling of their own.
+   Four come from the transformers @nuxtjs/mdc enables by default, two more from
+   `mdc.config.ts`. Without these rules `// [!code highlight]` removes the
+   comment and changes nothing visible, which reads as the feature being off. */
+.shiki .line.highlighted {
+  background-color: color-mix(in oklab, var(--color-primary) 12%, transparent);
+  display: inline-block;
+  width: 100%;
+}
+
+.shiki .line.diff.add {
+  background-color: color-mix(in oklab, var(--color-success) 14%, transparent);
+  display: inline-block;
+  width: 100%;
+}
+
+.shiki .line.diff.remove {
+  background-color: color-mix(
+    in oklab,
+    var(--color-destructive) 14%,
+    transparent
+  );
+  display: inline-block;
+  width: 100%;
+  opacity: 0.7;
+}
+
+.shiki .line.diff.add::before {
+  content: '+';
+  color: var(--color-success);
+}
+
+.shiki .line.diff.remove::before {
+  content: '-';
+  color: var(--color-destructive);
+}
+
+.shiki .highlighted-word {
+  background-color: color-mix(in oklab, var(--color-primary) 16%, transparent);
+  border-radius: 3px;
+  padding: 1px 2px;
+}
+
+/* `focus` dims everything that is not the point. Not a filter on the code
+   itself: blur on text is unreadable for anyone who needs the contrast, so the
+   unfocused rows lose opacity and come back on hover. */
+.shiki:has(.line.focused) .line:not(.focused) {
+  opacity: 0.4;
+  transition: opacity 0.2s;
+}
+
+.shiki:hover .line:not(.focused) {
+  opacity: 1;
+}
+
+.shiki .line.error {
+  background-color: color-mix(
+    in oklab,
+    var(--color-destructive) 14%,
+    transparent
+  );
+  display: inline-block;
+  width: 100%;
+}
+
+.shiki .line.warning {
+  background-color: color-mix(in oklab, var(--color-warning) 16%, transparent);
+  display: inline-block;
+  width: 100%;
+}
+
+/* Line numbers, opt-in per fence with ```ts line-numbers.
+   A CSS counter rather than markup: the numbers are decoration, and a reader
+   copying the block must not get them in the clipboard. */
+.duxt-line-numbers code {
+  counter-reset: duxt-line;
+}
+
+.duxt-line-numbers .line::before {
+  counter-increment: duxt-line;
+  content: counter(duxt-line);
+  display: inline-block;
+  width: 2ch;
+  margin-right: 1.5ch;
+  text-align: right;
+  color: var(--color-muted-foreground);
+  user-select: none;
+}
+
+/* A page whose LAST band carries a background of its own runs straight into the
+   footer.
+
+   `DuxtFooter` sets `mt-16`, which is right for a documentation page: the prose
+   ends and the footer needs air under it. It is wrong after a tinted, bordered
+   section — the tint stops, four rems of page colour follow, and then the
+   footer's own rule draws a second line under the first. Three edges where the
+   design has one.
+
+   Written as a rule rather than as a margin the page removes, because the two
+   elements are siblings of the layout and neither can reach the other: the
+   section is inside `main`, and `main` is what stands next to the footer. */
+main:has(.duxt-flush-footer) + footer {
+  margin-top: 0;
+}