explico 0.13.0 → 0.14.0

package/src/styles/zones.css

@@ -0,0 +1,277 @@
+/* Zones (`appearance.zones` in the course settings, `course-config.ts`): how
+   the page tells its four parts apart — the header (the site's tools), the
+   course's sidebar, the page's contents sidebar and the reading column.
+
+     tonal          both sidebars one step of the neutral grey (Starlight's
+                    own hue), the header a step further, the reading column
+                    as it was. The default.
+     accent-header  the header a deep band of the course accent in both
+                    themes, drawn on dark-theme colours; sidebars as tonal.
+     paper          header and sidebars are a desk, the reading column a
+                    sheet lying on it: its edge casts a soft shadow, and in
+                    the dark theme it is a step lighter than the desk.
+     none           Starlight's own colours.
+
+   `LayoutHeader.astro` writes the course's choice on `[data-explico-zones]`
+   and each style below is one set of tokens per theme, selected with
+   `:root:has(…)`, so the first painted frame has it. `tonal` needs no
+   attribute: a page without the header still gets it. Every style block
+   sets every token in both themes — a style's dark block outranks `tonal`'s
+   light one, and its own light block puts the light values back.
+
+   Whatever the style, a hovered row fills with its sidebar's colour mixed
+   with 10 % ink, and the part holding the open page is tinted with the
+   sidebar's own accent tint, a step darker than the course's: neither can
+   come out the colour of the surface under it. Colours apply on screen only;
+   print keeps Starlight's print palette. Dark is Starlight's base theme
+   (`:root`), light its override. */
+
+:root {
+  /* tonal, dark */
+  --ex-zone-header: hsl(224 16% 20%);
+  --ex-zone-header-edge: hsl(224 12% 27%);
+  --ex-zone-rail: hsl(224 13% 14.5%);
+  --ex-zone-toc: hsl(224 13% 14.5%);
+  --ex-zone-rail-edge: hsl(224 10% 21%);
+  --ex-zone-toc-edge: hsl(224 10% 21%);
+
+  --ex-zone-rail-hover: color-mix(in srgb, var(--sl-color-white) 10%, var(--ex-zone-rail));
+  --ex-zone-toc-hover: color-mix(in srgb, var(--sl-color-white) 10%, var(--ex-zone-toc));
+  --ex-zone-rail-accent: color-mix(in srgb, var(--sl-color-accent-low) 88%, var(--sl-color-accent));
+  /* The course's title in the header: its accent, a step toward the ink, so
+     it keeps 4.5:1 on a tinted header as it had on Starlight's paler one. */
+  --ex-zone-title: color-mix(in oklab, var(--sl-color-text-accent) 80%, var(--sl-color-white));
+
+  /* The page's own colours, for what opens from an `accent-header` band
+     (its menus, the search dialog) to take back. */
+  --ex-page-white: var(--sl-color-white);
+  --ex-page-gray-1: var(--sl-color-gray-1);
+  --ex-page-gray-2: var(--sl-color-gray-2);
+  --ex-page-gray-3: var(--sl-color-gray-3);
+  --ex-page-gray-4: var(--sl-color-gray-4);
+  --ex-page-gray-5: var(--sl-color-gray-5);
+  --ex-page-gray-6: var(--sl-color-gray-6);
+  --ex-page-gray-7: var(--sl-color-gray-7);
+  --ex-page-black: var(--sl-color-black);
+  --ex-page-text: var(--sl-color-text);
+  --ex-page-text-accent: var(--sl-color-text-accent);
+  --ex-page-text-invert: var(--sl-color-text-invert);
+  --ex-page-accent: var(--sl-color-accent);
+  --ex-page-accent-low: var(--sl-color-accent-low);
+  --ex-page-accent-high: var(--sl-color-accent-high);
+  --ex-page-bg: var(--sl-color-bg);
+  --ex-page-bg-nav: var(--sl-color-bg-nav);
+  --ex-page-bg-inline-code: var(--sl-color-bg-inline-code);
+  --ex-page-hairline-light: var(--sl-color-hairline-light);
+  --ex-page-hairline: var(--sl-color-hairline);
+  --ex-page-hairline-shade: var(--sl-color-hairline-shade);
+}
+
+:root[data-theme='light'] {
+  /* tonal, light */
+  --ex-zone-header: hsl(222 26% 90%);
+  --ex-zone-header-edge: hsl(222 16% 81%);
+  --ex-zone-rail: hsl(222 30% 95.5%);
+  --ex-zone-toc: hsl(222 30% 95.5%);
+  --ex-zone-rail-edge: hsl(222 18% 87%);
+  --ex-zone-toc-edge: hsl(222 18% 87%);
+}
+
+/* accent-header: the band is the course accent taken deep, so a course
+   with its own accent gets its own band. */
+:root:has([data-explico-zones='accent-header']) {
+  --ex-zone-header: color-mix(in oklab, var(--sl-color-accent) 24%, var(--sl-color-black));
+  --ex-zone-header-edge: color-mix(in oklab, var(--sl-color-accent) 34%, var(--sl-color-black));
+  --ex-zone-band-accent: var(--sl-color-accent-high);
+  --ex-zone-title: hsl(0 0% 100%);
+  --ex-zone-rail: hsl(224 13% 14.5%);
+  --ex-zone-toc: hsl(224 13% 14.5%);
+  --ex-zone-rail-edge: hsl(224 10% 21%);
+  --ex-zone-toc-edge: hsl(224 10% 21%);
+}
+:root[data-theme='light']:has([data-explico-zones='accent-header']) {
+  --ex-zone-header: color-mix(in oklab, var(--sl-color-accent) 72%, black);
+  --ex-zone-header-edge: color-mix(in oklab, var(--sl-color-accent) 58%, black);
+  --ex-zone-band-accent: var(--sl-color-accent-low);
+  --ex-zone-title: hsl(0 0% 100%);
+  --ex-zone-rail: hsl(222 30% 95.5%);
+  --ex-zone-toc: hsl(222 30% 95.5%);
+  --ex-zone-rail-edge: hsl(222 18% 87%);
+  --ex-zone-toc-edge: hsl(222 18% 87%);
+}
+
+/* paper: the desk is the header and the sidebars; the sheet is the page's
+   own background, lifted a step in the dark theme (below). */
+:root:has([data-explico-zones='paper']) {
+  --ex-zone-header: hsl(224 12% 5.5%);
+  --ex-zone-header-edge: hsl(224 10% 3.5%);
+  --ex-zone-rail: hsl(224 11% 9.5%);
+  --ex-zone-toc: hsl(224 11% 9.5%);
+  --ex-zone-rail-edge: transparent;
+  --ex-zone-toc-edge: transparent;
+  --ex-zone-paper: hsl(224 10% 12.5%);
+  --ex-zone-paper-shadow: 0 0 0 1px hsl(224 10% 17%), 0 0 24px hsla(0 0% 0% / 0.55);
+  --ex-zone-paper-cast: hsla(0 0% 0% / 0.6);
+}
+:root[data-theme='light']:has([data-explico-zones='paper']) {
+  --ex-zone-header: hsl(224 20% 90%);
+  --ex-zone-header-edge: hsl(224 14% 82%);
+  --ex-zone-rail: hsl(224 22% 95%);
+  --ex-zone-toc: hsl(224 22% 95%);
+  --ex-zone-rail-edge: transparent;
+  --ex-zone-toc-edge: transparent;
+  --ex-zone-paper: hsl(0 0% 100%);
+  --ex-zone-paper-shadow: 0 0 0 1px hsl(224 16% 88%), 0 0 22px hsla(224 30% 20% / 0.1);
+  --ex-zone-paper-cast: hsla(224 30% 20% / 0.14);
+}
+
+/* none: Starlight's colours, and its hairlines where it draws them. */
+:root:has([data-explico-zones='none']) {
+  --ex-zone-title: var(--sl-color-text-accent);
+  --ex-zone-header: var(--sl-color-gray-6);
+  --ex-zone-header-edge: var(--sl-color-black);
+  --ex-zone-rail: var(--sl-color-gray-6);
+  --ex-zone-toc: var(--sl-color-black);
+  --ex-zone-rail-edge: var(--sl-color-black);
+  --ex-zone-toc-edge: var(--sl-color-gray-6);
+}
+:root[data-theme='light']:has([data-explico-zones='none']) {
+  --ex-zone-header: var(--sl-color-gray-7);
+  --ex-zone-header-edge: var(--sl-color-gray-6);
+  --ex-zone-rail: var(--sl-color-black);
+  --ex-zone-toc: var(--sl-color-black);
+  --ex-zone-rail-edge: var(--sl-color-gray-6);
+  --ex-zone-toc-edge: var(--sl-color-gray-6);
+}
+
+/* Each sidebar's rows hover with its own fill (`global.css`). */
+.layout-navigation-content {
+  --ex-row-hover: var(--ex-zone-rail-hover);
+}
+.layout-page-sidebar-content {
+  --ex-row-hover: var(--ex-zone-toc-hover);
+}
+
+@media screen {
+  :root {
+    --sl-color-bg-sidebar: var(--ex-zone-rail);
+  }
+
+  /* Starlight's `PageFrame` paints the outer header; its `Header` is the
+     inner `.header`. */
+  header.header {
+    background-color: var(--ex-zone-header);
+    border-bottom-color: var(--ex-zone-header-edge);
+  }
+  header.header .site-title {
+    color: var(--ex-zone-title);
+  }
+
+  .sidebar-pane {
+    --sl-color-accent-low: var(--ex-zone-rail-accent);
+  }
+
+  :root:has([data-explico-zones='paper']) {
+    --sl-color-bg: var(--ex-zone-paper);
+  }
+}
+
+@media screen and (min-width: 50rem) {
+  .sidebar-pane {
+    border-inline-end-color: var(--ex-zone-rail-edge);
+  }
+
+  :root:has([data-explico-zones='paper']) body {
+    background-color: var(--ex-zone-rail);
+  }
+  /* No position or z-index: the sheet stays in the page's flow, so nothing
+     inside it (a card, an expanded table, Present mode) is held under the
+     sidebars. Its outer shadow shows where the desk does; where a sidebar
+     covers it, the sidebar's inner edge takes the shadow. */
+  :root:has([data-explico-zones='paper']) .main-pane {
+    min-height: calc(100vh - var(--sl-nav-height));
+    background-color: var(--sl-color-bg);
+    box-shadow: var(--ex-zone-paper-shadow);
+  }
+  :root:has([data-explico-zones='paper']) .sidebar-pane {
+    box-shadow: inset -12px 0 12px -12px var(--ex-zone-paper-cast);
+  }
+}
+
+@media screen and (min-width: 72rem) {
+  .right-sidebar {
+    border-inline-start-color: var(--ex-zone-toc-edge);
+  }
+}
+
+/* accent-header: the band draws on dark-theme colours in both themes, so
+   its title, search field, buttons, hovers and focus rings follow without a
+   rule each; what opens from it takes the page's colours back. */
+@media screen {
+  :root:has([data-explico-zones='accent-header']) header.header > .header {
+    --sl-color-white: hsl(0 0% 100%);
+    --sl-color-gray-1: color-mix(in oklab, white 92%, var(--ex-zone-header));
+    --sl-color-gray-2: color-mix(in oklab, white 84%, var(--ex-zone-header));
+    --sl-color-gray-3: color-mix(in oklab, white 66%, var(--ex-zone-header));
+    --sl-color-gray-4: color-mix(in oklab, white 46%, var(--ex-zone-header));
+    --sl-color-gray-5: color-mix(in oklab, white 22%, var(--ex-zone-header));
+    --sl-color-gray-6: color-mix(in oklab, white 12%, var(--ex-zone-header));
+    --sl-color-gray-7: color-mix(in oklab, white 6%, var(--ex-zone-header));
+    --sl-color-black: var(--ex-zone-header);
+    --sl-color-text: var(--sl-color-gray-2);
+    --sl-color-text-accent: var(--ex-zone-band-accent);
+    --sl-color-text-invert: var(--ex-zone-header);
+    --sl-color-accent: var(--ex-zone-band-accent);
+    --sl-color-accent-low: color-mix(in oklab, white 16%, var(--ex-zone-header));
+    --sl-color-accent-high: hsl(0 0% 100%);
+    --sl-color-bg: var(--ex-zone-header);
+    --sl-color-bg-nav: var(--ex-zone-header);
+    --sl-color-bg-inline-code: var(--sl-color-gray-5);
+    --sl-color-hairline-light: var(--sl-color-gray-5);
+    --sl-color-hairline: var(--sl-color-gray-6);
+    --sl-color-hairline-shade: var(--ex-zone-header-edge);
+    color: var(--sl-color-text);
+    color-scheme: dark;
+  }
+  :root:has([data-explico-zones='accent-header'])
+    header.header
+    > .header
+    :is(.about-body, .explico-downloads, dialog, option) {
+    --sl-color-white: var(--ex-page-white);
+    --sl-color-gray-1: var(--ex-page-gray-1);
+    --sl-color-gray-2: var(--ex-page-gray-2);
+    --sl-color-gray-3: var(--ex-page-gray-3);
+    --sl-color-gray-4: var(--ex-page-gray-4);
+    --sl-color-gray-5: var(--ex-page-gray-5);
+    --sl-color-gray-6: var(--ex-page-gray-6);
+    --sl-color-gray-7: var(--ex-page-gray-7);
+    --sl-color-black: var(--ex-page-black);
+    --sl-color-text: var(--ex-page-text);
+    --sl-color-text-accent: var(--ex-page-text-accent);
+    --sl-color-text-invert: var(--ex-page-text-invert);
+    --sl-color-accent: var(--ex-page-accent);
+    --sl-color-accent-low: var(--ex-page-accent-low);
+    --sl-color-accent-high: var(--ex-page-accent-high);
+    --sl-color-bg: var(--ex-page-bg);
+    --sl-color-bg-nav: var(--ex-page-bg-nav);
+    --sl-color-bg-inline-code: var(--ex-page-bg-inline-code);
+    --sl-color-hairline-light: var(--ex-page-hairline-light);
+    --sl-color-hairline: var(--ex-page-hairline);
+    --sl-color-hairline-shade: var(--ex-page-hairline-shade);
+    color: var(--sl-color-text);
+  }
+  :root[data-theme='light']:has([data-explico-zones='accent-header'])
+    header.header
+    > .header
+    :is(.about-body, .explico-downloads, dialog, option) {
+    color-scheme: light;
+  }
+  /* A course with a mark for each theme shows its dark-theme mark on the
+     band in both; a single mark has to read on a dark ground. */
+  :root[data-theme='light']:has([data-explico-zones='accent-header']) .site-title img.light\:sl-hidden {
+    display: block;
+  }
+  :root[data-theme='light']:has([data-explico-zones='accent-header']) .site-title img.dark\:sl-hidden {
+    display: none;
+  }
+}