@oneonefour/rkui 0.0.0-stage → 0.0.3

package/src/components/logo/Logo.vue

@@ -0,0 +1,128 @@
+<!--
+  The rkui logo as a home link: four outlined tiles, r k u i, raised on the hard shadow, that pop
+  like a button. Without `href` it is a plain `<span>` that doesn't pop: it plays every motif once
+  when the page loads, then again while the pointer is over it. `class`, `style` and other
+  attributes go on the `<a>` or `<span>`.
+
+  @example
+  <Logo href="/" label="rkui home" variant="motifs" size="3rem" />
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useComponentId } from '../../shared/component-id'
+
+interface Props {
+  /**
+   * Where the link goes: the site's home page; a plain `<span>`, only shown, when left out.
+   */
+  href?: string
+  /** The logo's accessible name; "Home" when left out, or "rkui" for a logo with no link. */
+  label?: string
+  /**
+   * 'motifs': on hover and focus the corner lifts, the wave rolls, the stripes march and the dot
+   * hops; 'lift' (the pop only) when left out. A logo with no link ignores it and plays every
+   * motif. Open, see DECISIONS ("Logo").
+   */
+  variant?: 'lift' | 'motifs'
+  /** The logo's width as a CSS length; 6rem when left out. */
+  size?: string
+}
+
+const { href, label, variant = 'lift', size } = defineProps<Props>()
+const id = useComponentId('logo')
+
+/** The accessible name: a link goes home, a logo on its own is just the name. */
+const name = computed(() => label ?? (href ? 'Home' : 'rkui'))
+
+/** The size as a custom property, when it is set. */
+const vars = computed(() => (size ? { '--rkui-logo-size': size } : {}))
+</script>
+
+<template>
+  <component
+    :is="href ? 'a' : 'span'"
+    :href="href"
+    :class="['rkui-logo', { 'rkui-logo--motifs': variant === 'motifs' }]"
+    :style="vars"
+  >
+    <svg viewBox="-11.5 -11.5 1175 1175" aria-hidden="true">
+      <defs>
+        <path class="rkui-logo-shape" :id="`${id}-r`" d="M150 0h426v576H0V150z" />
+        <path
+          class="rkui-logo-shape"
+          :id="`${id}-k`"
+          d="M576 0h462a114 114 0 0 1 114 114v462H576z"
+        />
+        <path
+          class="rkui-logo-shape"
+          :id="`${id}-u`"
+          d="M0 576h576v576H114A114 114 0 0 1 0 1038z"
+        />
+        <path
+          class="rkui-logo-shape"
+          :id="`${id}-i`"
+          d="M576 576h576v462a114 114 0 0 1-114 114H576z"
+        />
+        <clipPath :id="`${id}-k-clip`">
+          <use :href="`#${id}-k`" />
+        </clipPath>
+        <clipPath :id="`${id}-u-clip`">
+          <use :href="`#${id}-u`" />
+        </clipPath>
+      </defs>
+
+      <g class="rkui-logo-r">
+        <use class="rkui-logo-tile" :href="`#${id}-r`" />
+        <path
+          class="rkui-logo-letter"
+          d="M192.7 450.4V410l32.8-7.1V247l-36.1-7.1v-40.4h99.3l2.8 36.6q9.3-20.8 22.8-31c9-7 20.4-10.4 32.8-10.4q6.3.1 13.3 1 7 .7 12.8 2.8l-7.1 62.3-33.7-2c-9.5-.4-17.6 1.5-23.3 4.8q-9.3 5.6-15.7 16.2v123l32.3 7.1v40.4z"
+        />
+        <use class="rkui-logo-edge" :href="`#${id}-r`" />
+        <g class="rkui-logo-flap">
+          <path class="rkui-logo-flap-fill" d="M0 150h150V0z" />
+          <path class="rkui-logo-edge" d="M0 150h150V0z" />
+        </g>
+      </g>
+
+      <g class="rkui-logo-k">
+        <use class="rkui-logo-tile" :href="`#${id}-k`" />
+        <g :clip-path="`url(#${id}-k-clip)`">
+          <path
+            class="rkui-logo-wave"
+            d="M576 381.2c0 0 42.7 47.5 96 47.5s96-47.5 96-47.5c0 0 42.7-47.5 96-47.5s96 47.5 96 47.5c0 0 42.7 47.5 96 47.5s96-47.5 96-47.5c0 0 42.7-47.5 96-47.5s96 47.5 96 47.5c0 0 42.7 47.5 96 47.5s96-47.5 96-47.5V640H576z"
+          />
+        </g>
+        <path
+          class="rkui-logo-letter"
+          d="M705 487v-40.3l32.7-7.1V173l-36-7.1V125h103.5v314.5l29 7v40.5zm159.5 0v-38.4l19.5-4.3-1-1-49.3-67.9 43.2-44.1L959 439l31.3 7.6V487zM798 418.8l-32.7-38 109.2-99.8.5-1-25.7-3.3v-40.3h130.2v40.3l-32.3 8.6z"
+        />
+        <use class="rkui-logo-edge" :href="`#${id}-k`" />
+      </g>
+
+      <g class="rkui-logo-u">
+        <use class="rkui-logo-tile" :href="`#${id}-u`" />
+        <g :clip-path="`url(#${id}-u-clip)`">
+          <path
+            class="rkui-logo-stripes"
+            d="M-632 576h55.5l576 576h-55.5zm110.9 0h55.5l576 576h-55.5zm110.9 0h55.5l576 576h-55.5zm110.9 0h55.5l576 576h-55.5zm110.9 0h55.5l576 576h-55.5zm110.9 0h55.5l576 576h-55.5zm110.9 0h55.5l576 576h-55.5zm110.9 0h55.5l576 576h-55.5zm110.9 0h55.5l576 576h-55.5zm110.9 0h55.5l576 576h-55.5zm110.9 0h55.5l576 576h-55.5z"
+          />
+        </g>
+        <path
+          class="rkui-logo-letter"
+          d="M283 1026.4q-36.3.1-63.2-11.9-27.8-12-42.8-34.1C166.6 966 161.8 949 161.8 930V770.4H234v146.8q-.1 22.7 13.3 36c9 9.6 21 13.8 35.7 13.8 14.2 0 25.1-4.2 33.2-13.7 8.6-9 12.4-21 12.4-36.1V770.4h72.6V930c0 19-5.2 36.1-15.2 50.4-9.5 14.7-23.7 26-41.3 34.1q-26.3 12-61.7 12z"
+        />
+        <use class="rkui-logo-edge" :href="`#${id}-u`" />
+      </g>
+
+      <g class="rkui-logo-i">
+        <use class="rkui-logo-tile" :href="`#${id}-i`" />
+        <g class="rkui-logo-letter">
+          <path d="M809.7 1026.6V777.3H882v249.3z" />
+          <path class="rkui-logo-dot" d="M808.3 743.5v-69.3h75v69.3z" />
+        </g>
+        <use class="rkui-logo-edge" :href="`#${id}-i`" />
+      </g>
+    </svg>
+    <span class="rkui-visually-hidden">{{ name }}</span>
+  </component>
+</template>

package/src/components/logo/logo.css

@@ -0,0 +1,233 @@
+/* Logo: rkui's mark as a home link, four outlined tiles (r, k, u, i) raised on the hard shadow.
+   It pops like a button (interactive.css). The tiles carry the library's motifs: the folded
+   corner, the water and the stripes. Logo.vue has the drawing.
+
+   <a class="rkui-logo rkui-logo--motifs" href="/"><svg viewBox="-11.5 -11.5 1175 1175"
+     aria-hidden="true">…</svg><span class="rkui-visually-hidden">Home</span></a>
+
+   Variants (open, DECISIONS "Logo"): with no modifier, the pop only; .rkui-logo--motifs plays each
+   tile's motif on hover and focus: the corner lifts, the wave rolls, the stripes march and the
+   dot hops. Without an href the logo is a span: it doesn't pop, and plays every motif once as the
+   page loads, then again while the pointer is over it. Nothing moves under reduced motion. */
+
+.rkui-logo {
+  --rkui-logo-size: 6rem;
+  /* The drawn outline is a 51st of the logo's width, and never thinner than the house outline. */
+  --rkui-logo-line: max(var(--rkui-outline-width), calc(var(--rkui-logo-size) / 51));
+
+  /* The layout places the pressed pose, as for every control resting in a row (DESIGN.md, "Pressed,
+     checked and busy"): at rest the logo sits back towards the light by the press offset, so
+     pressed it lines up with what's around it. */
+  position: relative;
+  inset-block-start: calc(-1 * var(--rkui-press-offset-y));
+  inset-inline-start: calc(-1 * var(--rkui-press-offset-x));
+  display: inline-block;
+  inline-size: var(--rkui-logo-size);
+  aspect-ratio: 1;
+  vertical-align: middle;
+  /* The drawing's corners, in its 1175 units: the folded corner cut 150 in, the rest rounded 125.
+     The shadow and the focus band follow them. Without corner-shape (Safari and Firefox) the
+     folded corner is rounded like the others. */
+  border-radius: 12.8% 10.6% 10.6%;
+  corner-shape: bevel round round round;
+}
+
+/* Visible overflow, since at small sizes the outline grows a little past the drawing. */
+.rkui-logo svg {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: visible;
+}
+
+/* The tiles' fills. */
+.rkui-logo-r > .rkui-logo-tile {
+  fill: var(--rkui-coral);
+}
+
+.rkui-logo-k > .rkui-logo-tile {
+  fill: var(--rkui-teal-tint);
+}
+
+.rkui-logo-u > .rkui-logo-tile {
+  fill: var(--rkui-yellow);
+}
+
+.rkui-logo-i > .rkui-logo-tile {
+  fill: var(--rkui-green);
+}
+
+.rkui-logo-letter {
+  fill: var(--rkui-on-fill);
+}
+
+.rkui-logo-stripes {
+  fill: var(--rkui-yellow-tint);
+}
+
+.rkui-logo-flap-fill {
+  fill: var(--rkui-coral-tint);
+}
+
+/* The wave line is drawn at about two thirds of the outline. */
+.rkui-logo-wave {
+  fill: var(--rkui-teal);
+  stroke: var(--rkui-teal-deep);
+  stroke-width: calc(var(--rkui-logo-line) * 0.64);
+  vector-effect: non-scaling-stroke;
+}
+
+/* The logo looks the same in both themes, in the drawing's colours: the tokens' light values,
+   except the coral, the green and the outline, which take their dark values. */
+.rkui-logo svg {
+  color-scheme: light;
+}
+
+.rkui-logo-r > .rkui-logo-tile,
+.rkui-logo-i > .rkui-logo-tile,
+.rkui-logo-edge {
+  color-scheme: dark;
+}
+
+.rkui-logo-edge {
+  fill: none;
+  stroke: var(--rkui-line);
+  stroke-width: var(--rkui-logo-line);
+  stroke-linejoin: round;
+}
+
+/* vector-effect isn't inherited, so the tile shapes that the edges reuse carry it themselves.
+   They are matched by class alone: a reused copy has no ancestors to match. */
+.rkui-logo-shape,
+.rkui-logo-edge {
+  vector-effect: non-scaling-stroke;
+}
+
+/* The folded corner folds across its crease: a squash along the crease's normal, made by turning
+   the axes to the crease and back, so the flap itself never turns. */
+.rkui-logo-flap {
+  transform-box: fill-box;
+  transform-origin: center;
+  transform: rotate(45deg) scaleX(1) rotate(-45deg);
+}
+
+/* The dot is pinned to its base, so a squash keeps it on the ground. */
+.rkui-logo-dot {
+  transform-box: fill-box;
+  transform-origin: bottom;
+}
+
+/* Motifs: the wave rolls like the water's, the stripes march like an indeterminate progress
+   bar's, the corner lifts and the dot hops. Each part names its keyframes and loop. Hover only
+   counts where there is a pointer, so a tap doesn't start them. */
+.rkui-logo-wave {
+  --rkui-logo-motif: rkui-logo-roll var(--rkui-loop-long) linear;
+}
+
+.rkui-logo-stripes {
+  --rkui-logo-motif: rkui-logo-march var(--rkui-loop-short) linear;
+}
+
+.rkui-logo-flap {
+  --rkui-logo-motif: rkui-logo-lift var(--rkui-loop-medium) ease-in-out;
+}
+
+.rkui-logo-dot {
+  --rkui-logo-motif: rkui-logo-hop var(--rkui-loop-medium);
+}
+
+/* A logo with no link plays each motif once as the page loads. */
+@media (prefers-reduced-motion: no-preference) {
+  span.rkui-logo :is(.rkui-logo-wave, .rkui-logo-stripes, .rkui-logo-flap, .rkui-logo-dot) {
+    animation: var(--rkui-logo-motif);
+  }
+
+  .rkui-logo--motifs:focus-visible
+    :is(.rkui-logo-wave, .rkui-logo-stripes, .rkui-logo-flap, .rkui-logo-dot) {
+    animation: var(--rkui-logo-motif) infinite;
+  }
+}
+
+/* Hovered, the motifs loop. On a logo with no link the loop is listed between two copies of the
+   one it played on load: browsers pair the old and new animations of the same name from
+   different ends of the list, and the middle one is new in all of them, so it starts from the
+   beginning instead of carrying on from the load. */
+@media (prefers-reduced-motion: no-preference) and (hover: hover) {
+  .rkui-logo--motifs:hover
+    :is(.rkui-logo-wave, .rkui-logo-stripes, .rkui-logo-flap, .rkui-logo-dot) {
+    animation: var(--rkui-logo-motif) infinite;
+  }
+
+  span.rkui-logo:hover :is(.rkui-logo-wave, .rkui-logo-stripes, .rkui-logo-flap, .rkui-logo-dot) {
+    animation:
+      var(--rkui-logo-motif),
+      var(--rkui-logo-motif) infinite,
+      var(--rkui-logo-motif);
+  }
+}
+
+/* Forced colours keep the drawing's own colours; the link's focus outline still takes the
+   system's. */
+@media (forced-colors: active) {
+  .rkui-logo svg {
+    forced-color-adjust: none;
+  }
+}
+
+/* One wavelength of the wave, in the drawing's units. */
+@keyframes rkui-logo-roll {
+  to {
+    translate: -384px 0;
+  }
+}
+
+/* One pair of stripes. */
+@keyframes rkui-logo-march {
+  to {
+    translate: 110.9px 0;
+  }
+}
+
+/* The corner lifts towards the crease and lies back down. The functions match the rest pose's,
+   so only the scale blends. */
+@keyframes rkui-logo-lift {
+  0%,
+  50%,
+  100% {
+    transform: rotate(45deg) scaleX(1) rotate(-45deg);
+  }
+
+  25% {
+    transform: rotate(45deg) scaleX(0.3) rotate(-45deg);
+  }
+}
+
+/* A hop: squash, up stretched, land squashed, settle, then hold. */
+@keyframes rkui-logo-hop {
+  0%,
+  60%,
+  100% {
+    translate: 0 0;
+    scale: 1;
+  }
+
+  6% {
+    scale: 1.15 0.85;
+    animation-timing-function: ease-out;
+  }
+
+  24% {
+    translate: 0 -70px;
+    scale: 0.9 1.1;
+    animation-timing-function: ease-in;
+  }
+
+  42% {
+    translate: 0 0;
+    scale: 1.25 0.8;
+  }
+
+  50% {
+    scale: 0.95 1.05;
+  }
+}

package/src/components/maths/Equation.vue

@@ -0,0 +1,64 @@
+<!--
+  A display equation: the TeX in `tex`, rendered by KaTeX on the server when the page is built, so
+  it needs no JavaScript in the page. `\tag{n}` numbers it, once for the whole display or once per
+  row of an `align`. The wrapper is a scroll region for an equation too wide for the column, which
+  the keyboard can scroll too, and is named after the equation's numbers ("Equation 2"). `id`,
+  `class`, `style` and other attributes go on the wrapper; give it an `id` for an
+  `EquationReference` to link to.
+
+  The site installs `katex` and loads its stylesheet before rkui's:
+  import 'katex/dist/katex.min.css'. A TeX error stops the build.
+
+  @example
+  <Equation id="eq-flow" tex="\frac{\mathrm{d}\mathbf{x}}{\mathrm{d}t} = \mathbf{f}(\mathbf{x}) \tag{1}" />
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { renderMaths } from './render-maths'
+
+interface Props {
+  /**
+   * The TeX source. In MDX write it as a quoted attribute, which keeps backslashes, braces and
+   * underscores as they are.
+   */
+  tex: string
+  /**
+   * The frame: 'panel' (a panel), 'rule' (a rule down the left) or 'key' (a raised dashed
+   * panel, for a key result); none when left out.
+   */
+  variant?: 'panel' | 'rule' | 'key'
+  /**
+   * The look of the dots at the edges of an equation too wide for the column, written as
+   * `data-rkui-dots` on the wrapper: 'plain', or 'pill' for dots in a raised pill; the page's
+   * setting when left out. The 'rule' and 'key' frames show a scrollbar in place of the dots.
+   */
+  dots?: 'plain' | 'pill'
+}
+
+const { tex, variant, dots } = defineProps<Props>()
+
+const html = computed(() => renderMaths(tex, true))
+
+/** The region's name: "Equation 1", "Equations 2, 3, 4", or "Equation" when it has no number. */
+const label = computed(() => {
+  const numbers = [...tex.matchAll(/\\tag\{([^}]*)\}/g)].map((match) => match[1])
+  return `${numbers.length > 1 ? 'Equations' : 'Equation'} ${numbers.join(', ')}`.trim()
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'rkui-equation',
+      'rkui-scroll',
+      variant && `rkui-equation--${variant}`,
+      // A frame with side borders of its own shows a scrollbar in place of the scroll dots.
+      { 'rkui-scroll--bar': variant === 'rule' || variant === 'key' },
+    ]"
+    tabindex="0"
+    role="region"
+    :aria-label="label"
+    :data-rkui-dots="dots"
+    v-html="html"
+  />
+</template>

package/src/components/maths/EquationReference.vue

@@ -0,0 +1,31 @@
+<!--
+  A link in prose to a numbered `Equation`, drawn as a pill like the equation's number. Its
+  brackets are hidden spans, so it still reads "(2)" without CSS. With `long` it leads with the
+  function icon and the word "Equation", for a reference that starts or carries a sentence.
+  `class`, `style` and other attributes go on the `<a>`. Inside larger maths, link with KaTeX's own
+  `\href{#eq-…}{(2)}` instead.
+
+  @example
+  <p><EquationReference to="eq-lorenz" number="2" long /> is chaotic, unlike <EquationReference to="eq-flow" number="1" />.</p>
+-->
+<script setup lang="ts">
+import FunctionIcon from '@oneonefour/rkui/icons/function.vue'
+
+interface Props {
+  /** The `id` of the `Equation` it links to, e.g. "eq-lorenz". */
+  to: string
+  /** The equation's number, as its `\tag` gives it. */
+  number: number | string
+  /** Leads with the function icon and "Equation", for the start of a sentence; "(2)" when left out. */
+  long?: boolean
+}
+
+const { to, number, long } = defineProps<Props>()
+</script>
+
+<template>
+  <a class="rkui-eqref" :href="`#${to}`">
+    <template v-if="long"><FunctionIcon class="rkui-icon" aria-hidden="true" />Equation </template>
+    <span>(</span>{{ number }}<span>)</span>
+  </a>
+</template>

package/src/components/maths/Maths.vue

@@ -0,0 +1,32 @@
+<!--
+  Inline maths in running text: the TeX in `tex`, rendered by KaTeX on the server when the page is
+  built, so it needs no JavaScript in the page. `\teal{…}` and the other term macros put a hue's
+  tint behind a term, here and in `Equation`. `class`, `style` and other attributes go on the
+  `<span>` around it.
+
+  The site installs `katex` and loads its stylesheet before rkui's:
+  import 'katex/dist/katex.min.css'. A TeX error stops the build.
+
+  @example
+  <p>With <Maths tex="\sigma = 10" /> and <Maths tex="\rho = 28" />, each <Maths tex="x_i(t)" /> stays bounded.</p>
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { renderMaths } from './render-maths'
+
+interface Props {
+  /**
+   * The TeX source. In MDX write it as a quoted attribute, which keeps backslashes, braces and
+   * underscores as they are.
+   */
+  tex: string
+}
+
+const { tex } = defineProps<Props>()
+
+const html = computed(() => renderMaths(tex, false))
+</script>
+
+<template>
+  <span v-html="html" />
+</template>