@oneonefour/rkui 0.0.0-stage → 0.0.3

package/src/tokens/shadows.css

@@ -0,0 +1,127 @@
+/* rkui shadow tokens: the light direction, shade, depth and the hard shadows. */
+
+:root {
+  /* The way shadows fall, as a multiple of each shadow length on each axis: 1 1 is down and to
+     the right. LightDirection sets them on <html>. */
+  --rkui-shadow-dx: 1;
+  --rkui-shadow-dy: 1;
+}
+
+/* A fill's shade, a quarter of the way to the outline colour: the sticky note's fold and the colour
+   shadow's extrusions. Set --rkui-shade-of to the fill; declared on every element, so each one
+   mixes its own. */
+* {
+  --rkui-shade: color-mix(in oklab, var(--rkui-shade-of) 75%, var(--rkui-line));
+}
+
+/* Depth: data-depth="deep" on <html>, on any container or on one element makes every shadow,
+   inset and pop in it 1.5 times as deep. data-depth="normal" switches back inside it. */
+:root,
+[data-depth='normal'] {
+  --rkui-shadow-depth: 1;
+}
+
+[data-depth='deep'] {
+  --rkui-shadow-depth: 1.5;
+}
+
+/* Hard shadows and the pop's moves, built from the light, the depth and the shadow colours. A
+   custom property resolves its var()s on the element that declares it, so these are declared on
+   every element: each one builds them from its own inputs, wherever those were last set. */
+* {
+  --rkui-shadow-offset: calc(var(--rkui-shadow-depth) * 4px);
+  --rkui-shadow-offset-x: calc(var(--rkui-shadow-dx) * var(--rkui-shadow-offset));
+  --rkui-shadow-offset-y: calc(var(--rkui-shadow-dy) * var(--rkui-shadow-offset));
+  --rkui-shadow-offset-hover: calc(var(--rkui-shadow-depth) * 6px);
+  --rkui-shadow-offset-pressed: calc(var(--rkui-shadow-depth) * 2px);
+  /* Pressing moves an element onto --rkui-shadow-pressed; the move plus that shadow is
+     --rkui-shadow. */
+  --rkui-press-offset: calc(var(--rkui-shadow-depth) * 2px);
+  --rkui-press-offset-x: calc(var(--rkui-shadow-dx) * var(--rkui-press-offset));
+  --rkui-press-offset-y: calc(var(--rkui-shadow-dy) * var(--rkui-press-offset));
+  --rkui-lift-offset: calc(var(--rkui-shadow-depth) * 1px);
+  --rkui-lift-offset-x: calc(var(--rkui-shadow-dx) * var(--rkui-lift-offset));
+  --rkui-lift-offset-y: calc(var(--rkui-shadow-dy) * var(--rkui-lift-offset));
+  /* For gaps between raised neighbours: grows half as fast as the shadow (1.25 when deep). */
+  --rkui-depth-gap-scale: calc((1 + var(--rkui-shadow-depth)) / 2);
+
+  /* Each shadow is two layers: the shadow, on a copy widened by --rkui-outline-width in
+     --rkui-shadow-edge. */
+  --rkui-shadow:
+    var(--rkui-shadow-offset-x) var(--rkui-shadow-offset-y) 0 var(--rkui-shadow-color),
+    var(--rkui-shadow-offset-x) var(--rkui-shadow-offset-y) 0 var(--rkui-outline-width)
+      var(--rkui-shadow-edge);
+  --rkui-shadow-hover:
+    calc(var(--rkui-shadow-dx) * var(--rkui-shadow-offset-hover))
+      calc(var(--rkui-shadow-dy) * var(--rkui-shadow-offset-hover)) 0 var(--rkui-shadow-color),
+    calc(var(--rkui-shadow-dx) * var(--rkui-shadow-offset-hover))
+      calc(var(--rkui-shadow-dy) * var(--rkui-shadow-offset-hover)) 0 var(--rkui-outline-width)
+      var(--rkui-shadow-edge);
+  --rkui-shadow-pressed:
+    calc(var(--rkui-shadow-dx) * var(--rkui-shadow-offset-pressed))
+      calc(var(--rkui-shadow-dy) * var(--rkui-shadow-offset-pressed)) 0 var(--rkui-shadow-color),
+    calc(var(--rkui-shadow-dx) * var(--rkui-shadow-offset-pressed))
+      calc(var(--rkui-shadow-dy) * var(--rkui-shadow-offset-pressed)) 0 var(--rkui-outline-width)
+      var(--rkui-shadow-edge);
+  --rkui-shadow-inset: inset calc(var(--rkui-shadow-dx) * var(--rkui-shadow-offset-pressed))
+    calc(var(--rkui-shadow-dy) * var(--rkui-shadow-offset-pressed)) 0 var(--rkui-line);
+}
+
+/* Shadow: data-shadow on <html> or any container sets how hard shadows look in dark mode, and
+   another value switches back inside it. Light mode is the same in all three.
+   - "outline", the default: the near-black shadow on a cream rim (--rkui-fg), so it shows on the
+     page, whatever the highlight;
+   - "block": the near-black shadow with no rim;
+   - "color": each raised thing with a fill casts its shadow in that fill, darkened
+     (shadow-color.css). Browsers without @scope draw the outline instead.
+   The near-black shadow is set again on each data-shadow, so one inside "color" switches back.
+   :where() keeps it below the "color" rule, so data-shadow="color" on a button or card itself
+   works too. */
+:root,
+:where([data-shadow]) {
+  --rkui-shadow-color: var(--rkui-line);
+}
+
+/* The rim is cream unless --rkui-shadow-rim is set. initial unsets it again, so "outline" or
+   "color" inside "block" switches the rim back on. */
+[data-shadow='outline'],
+[data-shadow='color'] {
+  --rkui-shadow-rim: initial;
+}
+
+[data-shadow='block'] {
+  --rkui-shadow-rim: transparent;
+}
+
+/* Declared on every element, so the rim follows the nearest data-shadow. */
+* {
+  --rkui-shadow-edge: light-dark(transparent, var(--rkui-shadow-rim, var(--rkui-fg)));
+}
+
+/* The inset: a code panel, a drawer's tray or an inset card, sunk into the page. Two hard steps
+   inside the sides towards the light, 3px each (4.5px when deep): the shadow colour, then
+   --rkui-recess-shade, and the raised shadow's rim just past them. So it follows data-shadow as
+   raised shadows do: a cream rim in dark mode with "outline", none with "block", and with "color"
+   the first step is --rkui-shadow-lit, or the element's own extrusion. The component sets
+   --rkui-recess-floor to its fill; the shade is that floor 60% of the way to the outline colour.
+   Declared on every element, so each recess mixes its own. */
+* {
+  --rkui-recess-step: calc(var(--rkui-shadow-depth) * 3px);
+  --rkui-recess-x: calc(var(--rkui-shadow-dx) * var(--rkui-recess-step));
+  --rkui-recess-y: calc(var(--rkui-shadow-dy) * var(--rkui-recess-step));
+  --rkui-recess-shade: color-mix(in srgb, var(--rkui-recess-floor), var(--rkui-line) 60%);
+  --rkui-shadow-recess:
+    inset var(--rkui-recess-x) var(--rkui-recess-y) 0 var(--rkui-shadow-color),
+    inset calc(2 * var(--rkui-recess-x)) calc(2 * var(--rkui-recess-y)) 0 var(--rkui-recess-shade),
+    inset calc(2 * var(--rkui-recess-x) + var(--rkui-shadow-dx) * var(--rkui-outline-width))
+      calc(2 * var(--rkui-recess-y) + var(--rkui-shadow-dy) * var(--rkui-outline-width)) 0
+      var(--rkui-shadow-edge);
+}
+
+/* Nothing moves under reduced motion; shadows still change. */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    --rkui-press-offset: 0px;
+    --rkui-lift-offset: 0px;
+  }
+}

package/src/tokens/space.css

@@ -0,0 +1,20 @@
+/* rkui spacing, radius and outline and focus widths. */
+
+:root {
+  /* Spacing */
+  --rkui-space-1: 0.25rem;
+  --rkui-space-2: 0.5rem;
+  --rkui-space-3: 0.75rem;
+  --rkui-space-4: 1rem;
+  --rkui-space-5: 1.5rem;
+  --rkui-space-6: 2rem;
+  --rkui-space-7: 3rem;
+  --rkui-space-8: 4rem;
+
+  /* Shape */
+  --rkui-radius: 10px;
+  --rkui-radius-pill: 999px;
+  --rkui-outline-width: 2px;
+  --rkui-focus-width: 6px;
+  --rkui-focus-offset: 0;
+}

package/src/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  // Type-checks the Vue components (`vue-tsc -p src`, part of `npm run build`), and the scripts
+  // they import. `astro check` covers the .astro files and the docs site.
+  "compilerOptions": {
+    "target": "es2022",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "lib": ["es2022", "dom", "dom.iterable"],
+    "strict": true,
+    "noEmit": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    // import.meta.env.SSR, which CodeBlock uses to highlight on the server only.
+    "types": ["vite/client"]
+  },
+  "include": ["**/*.vue", "components/*/*-element.ts"]
+}