@wtfalch/design 0.11.0 → 0.13.0

package/dist/rich-text/schema.js

@@ -0,0 +1,88 @@
+import { z } from 'zod';
+/**
+ * What a rich-text value is, and the only shape `RichTextEditor` produces or
+ * `RichText` draws.
+ *
+ * **A restricted document, on purpose.** The editor is TipTap, which is
+ * ProseMirror, which will model tables, colours, fonts and arbitrary nesting
+ * given the chance. A system where every writer can reach all of that is one
+ * where two pages share nothing but a logo. What is left here is
+ * paragraphs, two heading levels, two kinds of list, bold, italic and links
+ * — the set a piece of prose actually needs.
+ *
+ * **The schema is the contract between three things**: what the toolbar can
+ * produce, what a consumer should store, and what the view can draw. A
+ * consumer validates with this on the way into its database, so a crafted
+ * request can no more insert a table than the editor can, and a node the
+ * view has no case for cannot arrive.
+ *
+ * Zod is an OPTIONAL peer dependency, and this file is the only one that
+ * reaches it — which is why it ships from `@wtfalch/design/rich-text` rather
+ * than the front door. A consumer that renders prose without validating it
+ * should not have to install a validator to load the package. The types and
+ * the pure helpers live in `./value`, which imports from here with `import
+ * type` and so compiles to nothing.
+ */
+/** The marks a run of text may carry. `link` is the only one with a value, and its href is checked. */
+export const richTextMarkSchema = z.discriminatedUnion('type', [
+    z.object({ type: z.literal('bold') }),
+    z.object({ type: z.literal('italic') }),
+    z.object({
+        type: z.literal('link'),
+        attrs: z.object({
+            /**
+             * http(s), mailto, or a path. `javascript:` and `data:` are the two
+             * that turn a link into script, and they are refused here rather than
+             * only in the editor: the editor is a convenience, this is the gate.
+             */
+            href: z
+                .string()
+                .trim()
+                .min(1)
+                .max(2048)
+                .refine((href) => /^(https?:\/\/|mailto:|\/)/i.test(href), 'A link must be http(s), mailto: or a path beginning with /'),
+            target: z.string().nullish(),
+        }),
+    }),
+]);
+const textNode = z.object({
+    type: z.literal('text'),
+    text: z.string().max(10_000),
+    marks: z.array(richTextMarkSchema).max(8).optional(),
+});
+const inline = z.array(textNode).max(500).optional();
+const paragraph = z.object({ type: z.literal('paragraph'), content: inline });
+const heading = z.object({
+    type: z.literal('heading'),
+    /**
+     * Two levels, and not level 1: the page's own `<h1>` is its title, and a
+     * second one in the body is the most common way a document stops being
+     * navigable to somebody reading it with a screen reader.
+     */
+    attrs: z.object({ level: z.union([z.literal(2), z.literal(3)]) }),
+    content: inline,
+});
+const listItem = z.object({
+    type: z.literal('listItem'),
+    content: z.array(paragraph).max(20),
+});
+const bulletList = z.object({
+    type: z.literal('bulletList'),
+    content: z.array(listItem).max(200).optional(),
+});
+const orderedList = z.object({
+    type: z.literal('orderedList'),
+    attrs: z.object({ start: z.number().int().min(1).max(999) }).optional(),
+    content: z.array(listItem).max(200).optional(),
+});
+export const blockNodeSchema = z.discriminatedUnion('type', [
+    paragraph,
+    heading,
+    bulletList,
+    orderedList,
+]);
+/** A whole value: what TipTap calls the document. */
+export const richTextSchema = z.object({
+    type: z.literal('doc'),
+    content: z.array(blockNodeSchema).max(400).optional(),
+});

package/dist/rich-text/value.d.ts

@@ -0,0 +1,25 @@
+import type { RichTextValue } from './schema.js';
+/**
+ * The parts of a rich-text value that need no validator.
+ *
+ * Split from `./schema` so the package's front door stays free of zod. The
+ * schema is a runtime object and zod is an optional peer dependency, so a
+ * consumer that renders prose and never validates it — a site, a preview —
+ * would otherwise fail to load the package at all for want of a dependency
+ * it has no use for. The type import above is erased at build, so nothing
+ * here reaches zod.
+ */
+/**
+ * A document with nothing in it — and one empty paragraph, not an empty
+ * array. ProseMirror's schema says a document is `block+`, so a `doc` with
+ * no children is not a document it can put a cursor in: the editor rendered
+ * an empty box with no paragraph, which meant no node to mark as empty and
+ * so no placeholder. The picture of that is why this reads the way it does.
+ * `isEmptyRichText` treats both forms as empty, and the schema accepts both,
+ * because a value that arrives from somewhere else may be either.
+ */
+export declare const emptyRichText: RichTextValue;
+/** Whether there is anything to draw, so a caller can skip an empty value rather than leave a gap. */
+export declare function isEmptyRichText(value: RichTextValue): boolean;
+/** The plain words, for a summary, a search index or a document's own `<title>`. */
+export declare function richTextToPlain(value: RichTextValue): string;

package/dist/rich-text/value.js

@@ -0,0 +1,41 @@
+/**
+ * The parts of a rich-text value that need no validator.
+ *
+ * Split from `./schema` so the package's front door stays free of zod. The
+ * schema is a runtime object and zod is an optional peer dependency, so a
+ * consumer that renders prose and never validates it — a site, a preview —
+ * would otherwise fail to load the package at all for want of a dependency
+ * it has no use for. The type import above is erased at build, so nothing
+ * here reaches zod.
+ */
+/**
+ * A document with nothing in it — and one empty paragraph, not an empty
+ * array. ProseMirror's schema says a document is `block+`, so a `doc` with
+ * no children is not a document it can put a cursor in: the editor rendered
+ * an empty box with no paragraph, which meant no node to mark as empty and
+ * so no placeholder. The picture of that is why this reads the way it does.
+ * `isEmptyRichText` treats both forms as empty, and the schema accepts both,
+ * because a value that arrives from somewhere else may be either.
+ */
+export const emptyRichText = { type: 'doc', content: [{ type: 'paragraph' }] };
+/** Whether there is anything to draw, so a caller can skip an empty value rather than leave a gap. */
+export function isEmptyRichText(value) {
+    return (value.content ?? []).every((node) => !('content' in node) || (node.content ?? []).length === 0);
+}
+/** The plain words, for a summary, a search index or a document's own `<title>`. */
+export function richTextToPlain(value) {
+    const parts = [];
+    const walk = (nodes) => {
+        for (const node of nodes) {
+            if (!node || typeof node !== 'object')
+                continue;
+            const record = node;
+            if (typeof record.text === 'string')
+                parts.push(record.text);
+            if (Array.isArray(record.content))
+                walk(record.content);
+        }
+    };
+    walk(value.content ?? []);
+    return parts.join(' ').replace(/\s+/g, ' ').trim();
+}

package/dist/rich-text.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The rich-text schema: `@wtfalch/design/rich-text`.
+ *
+ * What a consumer validates with on the way into its database, so that a
+ * crafted request can no more store a table than the toolbar can produce
+ * one. Separate from the front door because it is the only part of the
+ * package that needs zod, and separate from `./editor` because validating a
+ * value is a thing a server does and downloading an editor is not.
+ */
+export { type BlockNode, type RichTextMark, type RichTextValue, blockNodeSchema, richTextMarkSchema, richTextSchema, } from './rich-text/schema.js';
+export { emptyRichText, isEmptyRichText, richTextToPlain } from './rich-text/value.js';

package/dist/rich-text.js

@@ -0,0 +1,11 @@
+/**
+ * The rich-text schema: `@wtfalch/design/rich-text`.
+ *
+ * What a consumer validates with on the way into its database, so that a
+ * crafted request can no more store a table than the toolbar can produce
+ * one. Separate from the front door because it is the only part of the
+ * package that needs zod, and separate from `./editor` because validating a
+ * value is a thing a server does and downloading an editor is not.
+ */
+export { blockNodeSchema, richTextMarkSchema, richTextSchema, } from './rich-text/schema.js';
+export { emptyRichText, isEmptyRichText, richTextToPlain } from './rich-text/value.js';

package/dist/styles/index.css

@@ -37,6 +37,7 @@
     --text-2xs: var(--text-2xs);
     --text-md: var(--text-md);
     --font-weight-strong: var(--weight-strong);
+    --radius-DEFAULT: var(--radius);
     --radius-pill: var(--radius-pill);
     --color-text: var(--text);
     --color-muted: var(--muted);
@@ -173,6 +174,9 @@
   .min-h-0 {
     min-height: 0px;
   }
+  .min-h-\[calc\(var\(--space-15\)\*2\)\] {
+    min-height: calc(var(--space-15) * 2);
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -313,6 +317,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-\(--radius\) {
+    border-radius: var(--radius);
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -462,6 +469,9 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .italic {
+    font-style: italic;
+  }
   .tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
@@ -508,9 +518,16 @@
   .surface-bg {
     background: var(--bg);
   }
+  .surface-control {
+    background: var(--control);
+  }
   .surface-panel {
     background: var(--panel);
   }
+  .focus-within\:shadow-\(--focus-ring\):focus-within {
+    --tw-shadow: var(--focus-ring);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .disabled\:cursor-default:disabled {
     cursor: default;
   }
@@ -2540,8 +2557,10 @@ input[type='radio']:active:not(:disabled) {
 }
 
 /* Only where there is something to pick. A row without `row-hit` is not a
-   choice, and lighting it up on hover promises something that does not happen. */
-.rows-pick > .rows-row:has(.row-hit):hover {
+   choice, and lighting it up on hover promises something that does not happen.
+   Nor is a row whose hit is disabled: a waiting row lit up under its own
+   `not-allowed` cursor, and `disabled` would have made that permanent. */
+.rows-pick > .rows-row:has(.row-hit:enabled):hover {
   border-color: var(--accent);
   background: var(--panel-2);
 }
@@ -2593,9 +2612,16 @@ input[type='radio']:active:not(:disabled) {
 /* And nothing else can be chosen while it happens: picking a second model
    mid-load queues a second load, which is how a machine ends up swapping two
    sets of weights it cannot hold at once. */
-.rows-pick > .rows-row.is-waiting { opacity: 0.5; }
+.rows-pick > .rows-row.is-waiting,
+.rows-pick > .rows-row.is-disabled { opacity: 0.5; }
 
-.rows-pick > .rows-row.is-waiting .row-hit { cursor: not-allowed; }
+.rows-pick > .rows-row.is-waiting .row-hit,
+.rows-pick > .rows-row.is-disabled .row-hit { cursor: not-allowed; }
+
+/* Dimmed once. `.row-hit:disabled` dims the button as well, and under the
+   row's own opacity the hint of a disabled row, the line saying why it cannot
+   be chosen, came out at a quarter strength. */
+.rows-pick > .rows-row.is-disabled > .row-hit:disabled { opacity: 1; }
 
 @media (prefers-reduced-motion: reduce) {
   /* The border still says which one, without the breathing. */
@@ -2647,7 +2673,7 @@ input[type='radio']:active:not(:disabled) {
   margin-bottom: calc(var(--space-2) * -1);
 }
 
-.rows-pick > .rows-row.is-picked:has(.row-hit):hover {
+.rows-pick > .rows-row.is-picked:has(.row-hit:enabled):hover {
   background: color-mix(in srgb, var(--accent) 13%, var(--panel));
 }
 
@@ -2706,7 +2732,7 @@ input[type='radio']:active:not(:disabled) {
   border-radius: var(--radius-sm);
 }
 
-.row-hit:hover .truncate { color: var(--accent); }
+.row-hit:enabled:hover .truncate { color: var(--accent); }
 
 .row-hit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
 }
@@ -4692,3 +4718,97 @@ body.splitting * { cursor: inherit !important; }
 .ident-remove:focus-visible { outline: none; box-shadow: var(--focus-ring); }
 }
 
+/* Prose and the surface it is written on, added in 0.8.0. Last, because
+   `.prose` styles the elements the reset in `base.css` flattened and has to
+   win over it, and because the editor's box sits over nothing. */
+/* ---- ./richtext.css ---- */
+@layer components {
+/* Prose: one class, and the elements it styles are ones nobody wrote.
+ *
+ * That is the whole reason a class exists here rather than utilities. Inside
+ * the editor the paragraphs, headings and lists are ProseMirror's, built
+ * from the document — there is no JSX to hang a utility on, so the choice is
+ * descendant rules behind one class or an arbitrary variant per element,
+ * which is the same selector spelled worse. `Markdown` has the same problem
+ * for the same reason and answers it the same way, as `.md` in `base.css`.
+ *
+ * The editor and the view share the class on purpose. They have to look
+ * identical and one set of rules is what guarantees it; two sets maintained
+ * separately is precisely how a what-you-see-is-what-you-get editor stops
+ * being one. Everything the components *do* render — the box, the toolbar,
+ * the writing surface's own padding and focus ring — is utilities in the
+ * component, where it belongs.
+ *
+ * `.rich-text` and not `.prose`: this package's classes ship unprefixed into
+ * other people's stylesheets, and `.prose` is the one name in CSS most
+ * likely to already be taken — Tailwind's typography plugin defines exactly
+ * it. A consumer with that plugin and this package would have had two sets
+ * of margins fighting, and it would have read as a theming bug.
+ *
+ * Every value here is a token. The vertical rhythm is `--space-*`, four
+ * pixels a step and scaling with `--density`; the type steps are `--text-*`,
+ * scaling with `--font-size`. A heading two sizes apart from its body at one
+ * density is two sizes apart at every density.
+ */
+
+.rich-text > * {
+  margin: 0;
+}
+
+.rich-text > * + * {
+  margin-top: var(--space-3);
+}
+
+.rich-text h2 {
+  font-size: var(--text-lg);
+  font-weight: var(--weight-strong);
+  letter-spacing: -0.01em;
+}
+
+.rich-text h3 {
+  font-size: var(--text-md);
+  font-weight: var(--weight-strong);
+}
+
+/* A heading after prose needs more room above it than below: the space
+   belongs to the section it opens, not to the paragraph it follows. */
+.rich-text > * + :is(h2, h3) {
+  margin-top: var(--space-6);
+}
+
+.rich-text :is(ul, ol) {
+  padding-left: var(--space-5);
+}
+
+.rich-text li + li {
+  margin-top: var(--space-1);
+}
+
+.rich-text a {
+  color: var(--accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.rich-text strong {
+  font-weight: var(--weight-strong);
+}
+
+/* An empty editor says what goes in it. The placeholder extension puts the
+   words on the empty node as `data-placeholder` and marks it, so `attr()` is
+   reading an attribute of the element it is drawn on — which is the part a
+   hand-rolled rule got wrong twice: a rule on the paragraph cannot reach an
+   attribute on the box, and ProseMirror's empty paragraph holds a trailing
+   `<br>` so `:empty` never matches it either. `pointer-events: none` so a
+   click on the words still lands in the text.
+
+   Harmless on the view, which never produces the class. */
+.rich-text p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  color: var(--muted);
+  pointer-events: none;
+}
+}
+

package/dist/tf.css

@@ -307,6 +307,7 @@
     --text-2xs: var(--text-2xs);
     --text-md: var(--text-md);
     --font-weight-strong: var(--weight-strong);
+    --radius-DEFAULT: var(--radius);
     --radius-pill: var(--radius-pill);
     --color-text: var(--text);
     --color-muted: var(--muted);
@@ -443,6 +444,9 @@
   .min-h-0 {
     min-height: 0px;
   }
+  .min-h-\[calc\(var\(--space-15\)\*2\)\] {
+    min-height: calc(var(--space-15) * 2);
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -583,6 +587,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-\(--radius\) {
+    border-radius: var(--radius);
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -732,6 +739,9 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .italic {
+    font-style: italic;
+  }
   .tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
@@ -778,9 +788,16 @@
   .surface-bg {
     background: var(--bg);
   }
+  .surface-control {
+    background: var(--control);
+  }
   .surface-panel {
     background: var(--panel);
   }
+  .focus-within\:shadow-\(--focus-ring\):focus-within {
+    --tw-shadow: var(--focus-ring);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .disabled\:cursor-default:disabled {
     cursor: default;
   }
@@ -2810,8 +2827,10 @@ input[type='radio']:active:not(:disabled) {
 }
 
 /* Only where there is something to pick. A row without `row-hit` is not a
-   choice, and lighting it up on hover promises something that does not happen. */
-.rows-pick > .rows-row:has(.row-hit):hover {
+   choice, and lighting it up on hover promises something that does not happen.
+   Nor is a row whose hit is disabled: a waiting row lit up under its own
+   `not-allowed` cursor, and `disabled` would have made that permanent. */
+.rows-pick > .rows-row:has(.row-hit:enabled):hover {
   border-color: var(--accent);
   background: var(--panel-2);
 }
@@ -2863,9 +2882,16 @@ input[type='radio']:active:not(:disabled) {
 /* And nothing else can be chosen while it happens: picking a second model
    mid-load queues a second load, which is how a machine ends up swapping two
    sets of weights it cannot hold at once. */
-.rows-pick > .rows-row.is-waiting { opacity: 0.5; }
+.rows-pick > .rows-row.is-waiting,
+.rows-pick > .rows-row.is-disabled { opacity: 0.5; }
 
-.rows-pick > .rows-row.is-waiting .row-hit { cursor: not-allowed; }
+.rows-pick > .rows-row.is-waiting .row-hit,
+.rows-pick > .rows-row.is-disabled .row-hit { cursor: not-allowed; }
+
+/* Dimmed once. `.row-hit:disabled` dims the button as well, and under the
+   row's own opacity the hint of a disabled row, the line saying why it cannot
+   be chosen, came out at a quarter strength. */
+.rows-pick > .rows-row.is-disabled > .row-hit:disabled { opacity: 1; }
 
 @media (prefers-reduced-motion: reduce) {
   /* The border still says which one, without the breathing. */
@@ -2917,7 +2943,7 @@ input[type='radio']:active:not(:disabled) {
   margin-bottom: calc(var(--space-2) * -1);
 }
 
-.rows-pick > .rows-row.is-picked:has(.row-hit):hover {
+.rows-pick > .rows-row.is-picked:has(.row-hit:enabled):hover {
   background: color-mix(in srgb, var(--accent) 13%, var(--panel));
 }
 
@@ -2976,7 +3002,7 @@ input[type='radio']:active:not(:disabled) {
   border-radius: var(--radius-sm);
 }
 
-.row-hit:hover .truncate { color: var(--accent); }
+.row-hit:enabled:hover .truncate { color: var(--accent); }
 
 .row-hit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
 }
@@ -4961,6 +4987,100 @@ body.splitting * { cursor: inherit !important; }
 .ident-remove:hover { background: var(--panel); color: var(--text); }
 .ident-remove:focus-visible { outline: none; box-shadow: var(--focus-ring); }
 }
+
+/* Prose and the surface it is written on, added in 0.8.0. Last, because
+   `.prose` styles the elements the reset in `base.css` flattened and has to
+   win over it, and because the editor's box sits over nothing. */
+/* ---- ./richtext.css ---- */
+@layer components {
+/* Prose: one class, and the elements it styles are ones nobody wrote.
+ *
+ * That is the whole reason a class exists here rather than utilities. Inside
+ * the editor the paragraphs, headings and lists are ProseMirror's, built
+ * from the document — there is no JSX to hang a utility on, so the choice is
+ * descendant rules behind one class or an arbitrary variant per element,
+ * which is the same selector spelled worse. `Markdown` has the same problem
+ * for the same reason and answers it the same way, as `.md` in `base.css`.
+ *
+ * The editor and the view share the class on purpose. They have to look
+ * identical and one set of rules is what guarantees it; two sets maintained
+ * separately is precisely how a what-you-see-is-what-you-get editor stops
+ * being one. Everything the components *do* render — the box, the toolbar,
+ * the writing surface's own padding and focus ring — is utilities in the
+ * component, where it belongs.
+ *
+ * `.rich-text` and not `.prose`: this package's classes ship unprefixed into
+ * other people's stylesheets, and `.prose` is the one name in CSS most
+ * likely to already be taken — Tailwind's typography plugin defines exactly
+ * it. A consumer with that plugin and this package would have had two sets
+ * of margins fighting, and it would have read as a theming bug.
+ *
+ * Every value here is a token. The vertical rhythm is `--space-*`, four
+ * pixels a step and scaling with `--density`; the type steps are `--text-*`,
+ * scaling with `--font-size`. A heading two sizes apart from its body at one
+ * density is two sizes apart at every density.
+ */
+
+.rich-text > * {
+  margin: 0;
+}
+
+.rich-text > * + * {
+  margin-top: var(--space-3);
+}
+
+.rich-text h2 {
+  font-size: var(--text-lg);
+  font-weight: var(--weight-strong);
+  letter-spacing: -0.01em;
+}
+
+.rich-text h3 {
+  font-size: var(--text-md);
+  font-weight: var(--weight-strong);
+}
+
+/* A heading after prose needs more room above it than below: the space
+   belongs to the section it opens, not to the paragraph it follows. */
+.rich-text > * + :is(h2, h3) {
+  margin-top: var(--space-6);
+}
+
+.rich-text :is(ul, ol) {
+  padding-left: var(--space-5);
+}
+
+.rich-text li + li {
+  margin-top: var(--space-1);
+}
+
+.rich-text a {
+  color: var(--accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.rich-text strong {
+  font-weight: var(--weight-strong);
+}
+
+/* An empty editor says what goes in it. The placeholder extension puts the
+   words on the empty node as `data-placeholder` and marks it, so `attr()` is
+   reading an attribute of the element it is drawn on — which is the part a
+   hand-rolled rule got wrong twice: a rule on the paragraph cannot reach an
+   attribute on the box, and ProseMirror's empty paragraph holds a trailing
+   `<br>` so `:empty` never matches it either. `pointer-events: none` so a
+   click on the words still lands in the text.
+
+   Harmless on the view, which never produces the class. */
+.rich-text p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  color: var(--muted);
+  pointer-events: none;
+}
+}
 /* ---- tf: the themes ---- */
 :root[data-theme='night']{--bg:#0f1115;--panel:#161a21;--panel-2:#1c222b;--border:#262d38;--text:#e6e9ef;--muted:#8b94a4;--accent:#5b9dff;--accent-dim:#2a4877;--app-bg:#0f1115;color-scheme:dark}
 :root[data-theme='paper']{--bg:#f6f7f9;--panel:#ffffff;--panel-2:#f0f2f5;--border:#e4e8ec;--border-strong:#8792a1;--text:#191d23;--muted:#5d6773;--accent:#0e7872;--accent-dim:#7fbdb8;--on-accent:#ffffff;--good:#1c7a4a;--warn:#8a6216;--bad:#b3312c;--info:#216bc9;--shadow-1:0 4px 14px rgba(16, 24, 40, 0.08);--shadow-2:0 8px 24px rgba(16, 24, 40, 0.10);--shadow-3:0 12px 32px rgba(16, 24, 40, 0.12);--scrim:rgba(16, 24, 40, 0.32);color-scheme:light}