rei-kit 1.0.2 → 2.0.0

package/dist/materials/brutal.css

@@ -0,0 +1,32 @@
+/* rei-kit material: brutal.
+ *
+ * Hard edges, hard shadows, no rounding and no apology. The shadow is drawn in
+ * the ink colour rather than cast by a light, which is what makes it read as
+ * printed rather than lit — and it inverts with the theme for free, because in
+ * dark mode the ink is the light colour.
+ *
+ * Pressing a control moves it *into* its own shadow and drops the shadow, so
+ * a press looks like a press rather than a shrink. */
+[data-material='brutal'] {
+  --surface-border-width: 2px;
+  --control-border-width: 2px;
+  --surface-border-color: var(--color-ink);
+
+  --radius-cell: 0px;
+  --radius-card: 0px;
+  --radius-shell: 0px;
+
+  --shadow-card: 4px 4px 0 var(--color-ink);
+  --shadow-raised: 6px 6px 0 var(--color-ink);
+  --shadow-overlay: 10px 10px 0 var(--color-ink);
+  --shadow-control: 3px 3px 0 var(--color-ink);
+  --shadow-control-pressed: 0 0 0 var(--color-ink);
+
+  --press-scale: 1;
+  --press-offset: 3px;
+
+  /* Snappy rather than smooth: a brutalist interface does not glide. */
+  --ease-standard: cubic-bezier(0.7, 0, 0.3, 1);
+  --duration-fast: 90ms;
+  --duration-base: 120ms;
+}

package/dist/materials/glass.css

@@ -0,0 +1,104 @@
+/* rei-kit material: glass.
+ *
+ * Surfaces you can see through, over a page that has colour to see. Covers
+ * what gets called glassmorphism, and the frosted, lit-edge look that spatial
+ * interfaces and Apple's liquid glass made familiar. It does not refract: real
+ * refraction needs a shader, and a kit that promised it in CSS would be
+ * promising something it cannot keep on every component at once.
+ *
+ * Put the page on the `canvas` utility, or there is nothing behind the glass
+ * to blur — a frosted panel over flat white is a grey panel.
+ *
+ * One cost worth knowing: a surface with a backdrop filter becomes the
+ * containing block for its `position: fixed` descendants. The kit's own
+ * overlays teleport out of the tree, so they are unaffected; an app that
+ * positions something fixed *inside* a glass card will see it pinned to the
+ * card instead of the viewport. */
+[data-material='glass'] {
+  --surface-opacity: 56%;
+  --control-opacity: 42%;
+  --surface-backdrop: blur(20px) saturate(1.6);
+  --surface-border-color: color-mix(in oklab, #ffffff 60%, transparent);
+
+  --radius-cell: 10px;
+  --radius-card: 22px;
+  --radius-shell: 36px;
+
+  /* The lit edge along the top is what separates glass from a translucent
+     rectangle: light catching the rim. */
+  --shadow-card:
+    inset 0 1px 0 rgb(255 255 255 / 0.6),
+    0 8px 24px -12px color-mix(in oklab, var(--shadow-color) 22%, transparent);
+  --shadow-raised:
+    inset 0 1px 0 rgb(255 255 255 / 0.65),
+    0 18px 40px -16px color-mix(in oklab, var(--shadow-color) 30%, transparent);
+  --shadow-overlay:
+    inset 0 1px 0 rgb(255 255 255 / 0.7),
+    0 32px 64px -20px color-mix(in oklab, var(--shadow-color) 42%, transparent);
+  --shadow-control:
+    inset 0 1px 0 rgb(255 255 255 / 0.55),
+    0 2px 8px -3px color-mix(in oklab, var(--shadow-color) 14%, transparent);
+
+  /* What there is to see through. Built from the palette's own roles, so a
+     glass app in a violet palette glows violet without a separate file. */
+  --canvas-backdrop:
+    radial-gradient(
+      60% 50% at 12% 8%,
+      color-mix(in oklab, var(--color-primary) 40%, transparent),
+      transparent 72%
+    ),
+    radial-gradient(
+      50% 45% at 88% 18%,
+      color-mix(in oklab, var(--color-accent) 34%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      55% 50% at 72% 92%,
+      color-mix(in oklab, var(--color-positive) 28%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      45% 40% at 8% 88%,
+      color-mix(in oklab, var(--color-warning) 22%, transparent),
+      transparent 70%
+    );
+
+  --ease-standard: cubic-bezier(0.2, 0.9, 0.2, 1);
+}
+
+.dark[data-material='glass'],
+.dark [data-material='glass'] {
+  --surface-opacity: 40%;
+  --control-opacity: 28%;
+  --surface-border-color: color-mix(in oklab, #ffffff 14%, transparent);
+
+  --shadow-card:
+    inset 0 1px 0 rgb(255 255 255 / 0.08),
+    0 8px 24px -12px color-mix(in oklab, var(--shadow-color) 60%, transparent);
+  --shadow-raised:
+    inset 0 1px 0 rgb(255 255 255 / 0.1),
+    0 18px 40px -16px color-mix(in oklab, var(--shadow-color) 70%, transparent);
+  --shadow-overlay:
+    inset 0 1px 0 rgb(255 255 255 / 0.12),
+    0 32px 64px -20px color-mix(in oklab, var(--shadow-color) 80%, transparent);
+  --shadow-control: inset 0 1px 0 rgb(255 255 255 / 0.07);
+}
+
+/* No backdrop filter to be had: an almost-solid surface reads correctly, a
+   translucent one without the blur reads as a rendering fault. */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  [data-material='glass'] {
+    --surface-opacity: 94%;
+    --control-opacity: 94%;
+  }
+}
+
+/* A reader who asked for less transparency gets none, and the page stays
+   legible — the backdrop colours remain, the see-through goes. */
+@media (prefers-reduced-transparency: reduce) {
+  [data-material='glass'] {
+    --surface-opacity: 100%;
+    --control-opacity: 100%;
+    --surface-backdrop: none;
+  }
+}

package/dist/materials/quiet.css

@@ -0,0 +1,39 @@
+/* rei-kit material: quiet.
+ *
+ * The kit's default, which needs no file to be active: with no attribute at
+ * all, this is what the tokens already are. It exists for one case — putting
+ * a quiet region *inside* a page that is set to another material, which a
+ * nested attribute cannot do unless something re-declares the defaults.
+ *
+ * Every value here is copied from tokens.css, and a test asserts they match,
+ * so a change to the default cannot leave this file describing the old one. */
+[data-material='quiet'] {
+  --radius-cell: 3px;
+  --radius-card: 16px;
+  --radius-shell: 30px;
+  --shadow-card:
+    0 1px 2px color-mix(in oklab, var(--shadow-color) 4%, transparent),
+    0 2px 8px -2px color-mix(in oklab, var(--shadow-color) 6%, transparent);
+  --shadow-raised:
+    0 1px 2px color-mix(in oklab, var(--shadow-color) 6%, transparent),
+    0 12px 28px -10px color-mix(in oklab, var(--shadow-color) 18%, transparent);
+  --shadow-overlay:
+    0 4px 12px -4px color-mix(in oklab, var(--shadow-color) 10%, transparent),
+    0 24px 48px -16px color-mix(in oklab, var(--shadow-color) 28%, transparent);
+  --shadow-control: 0 1px 2px color-mix(in oklab, var(--shadow-color) 5%, transparent);
+  --shadow-control-pressed: none;
+  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
+  --surface-opacity: 100%;
+  --surface-backdrop: none;
+  --surface-border-width: 1px;
+  --surface-border-color: var(--color-hair);
+  --control-opacity: 100%;
+  --control-border-width: 1px;
+  --canvas-backdrop: none;
+  --press-scale: 0.97;
+  --press-offset: 0px;
+  --duration-fast: 150ms;
+  --duration-base: 200ms;
+  --duration-slow: 340ms;
+  --duration-slower: 420ms;
+}

package/dist/materials/soft.css

@@ -0,0 +1,57 @@
+/* rei-kit material: soft.
+ *
+ * Rounded, raised and a little squashy — the family that neumorphism and
+ * claymorphism belong to. Surfaces are lit from above: a highlight along the
+ * top edge, a gentle shade along the bottom, and a soft shadow under the whole
+ * thing, so each card sits on the page like something you could pick up.
+ *
+ * Accessible where the look usually is not. Pure neumorphism draws surfaces in
+ * the page colour and relies on shadow alone to find their edges, which fails
+ * every contrast rule there is. Here a surface keeps its own colour and a
+ * faint edge, so the depth is decoration and never the only boundary.
+ *
+ * Pressing sinks a control into the surface instead of shrinking it. */
+[data-material='soft'] {
+  --surface-border-color: color-mix(in oklab, var(--color-hair) 55%, transparent);
+
+  --radius-cell: 14px;
+  --radius-card: 26px;
+  --radius-shell: 42px;
+
+  --shadow-card:
+    inset 0 2px 1px rgb(255 255 255 / 0.75),
+    inset 0 -3px 8px color-mix(in oklab, var(--shadow-color) 5%, transparent),
+    0 10px 24px -10px color-mix(in oklab, var(--shadow-color) 20%, transparent);
+  --shadow-raised:
+    inset 0 2px 1px rgb(255 255 255 / 0.8),
+    inset 0 -4px 10px color-mix(in oklab, var(--shadow-color) 6%, transparent),
+    0 18px 36px -14px color-mix(in oklab, var(--shadow-color) 28%, transparent);
+  --shadow-overlay:
+    inset 0 2px 1px rgb(255 255 255 / 0.8),
+    0 30px 60px -20px color-mix(in oklab, var(--shadow-color) 38%, transparent);
+  --shadow-control:
+    inset 0 1px 1px rgb(255 255 255 / 0.6),
+    inset 0 -2px 4px color-mix(in oklab, var(--shadow-color) 8%, transparent),
+    0 4px 10px -4px color-mix(in oklab, var(--shadow-color) 18%, transparent);
+  --shadow-control-pressed: inset 0 3px 6px
+    color-mix(in oklab, var(--shadow-color) 20%, transparent);
+
+  --press-scale: 0.98;
+
+  /* A small overshoot: things arrive with a little give, which is the whole
+     personality of this material. */
+  --ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.dark[data-material='soft'],
+.dark [data-material='soft'] {
+  --shadow-card:
+    inset 0 1px 1px rgb(255 255 255 / 0.07), inset 0 -3px 8px rgb(0 0 0 / 0.25),
+    0 10px 24px -10px rgb(0 0 0 / 0.6);
+  --shadow-raised:
+    inset 0 1px 1px rgb(255 255 255 / 0.08), inset 0 -4px 10px rgb(0 0 0 / 0.3),
+    0 18px 36px -14px rgb(0 0 0 / 0.7);
+  --shadow-overlay: inset 0 1px 1px rgb(255 255 255 / 0.08), 0 30px 60px -20px rgb(0 0 0 / 0.8);
+  --shadow-control: inset 0 1px 1px rgb(255 255 255 / 0.06), inset 0 -2px 4px rgb(0 0 0 / 0.3);
+  --shadow-control-pressed: inset 0 3px 6px rgb(0 0 0 / 0.45);
+}

package/dist/materials.css

@@ -0,0 +1,15 @@
+/* rei-kit materials, all of them.
+ *
+ * Import this after `tokens.css` and choose one with an attribute:
+ *
+ *   <html data-material="glass">
+ *
+ * or at runtime with `applyMaterial('glass')` / `useMaterial()`. No attribute
+ * is the quiet material the kit ships by default.
+ *
+ * An app that only ever wants one can import that file alone —
+ * `rei-kit/materials/glass.css` — and set the attribute once. */
+@import './materials/quiet.css';
+@import './materials/glass.css';
+@import './materials/brutal.css';
+@import './materials/soft.css';