margo-ui 1.2.3 → 1.3.0

package/src/components/progress_bar/progress_bar.tsx

@@ -1,7 +1,7 @@
 import { Tag } from "react-renderable";
 
 import { cn } from "../../utils/cn/cn.js";
-import { progressBarBaseClassName } from "./style.js";
+import { progressBarDefaultFill, progressBarBaseClassName } from "./style.js";
 
 import type { CSSProperties, ElementType } from "react";
 import type { ProgressBarProps } from "./type.js";
@@ -10,6 +10,7 @@ import "./progress_bar.css";
 
 export const ProgressBar = <T extends ElementType = "div">({
   animate = true,
+  fill = progressBarDefaultFill,
   mode = "indeterminate",
   style,
   value = 0,
@@ -26,9 +27,11 @@ export const ProgressBar = <T extends ElementType = "div">({
       aria-valuemin={isDeterminate ? 0 : undefined}
       aria-valuemax={isDeterminate ? 100 : undefined}
       aria-valuenow={isDeterminate ? progress : undefined}
-      data-mode={mode}
-      data-animate={animate}
-      style={{ ...style, "--margo-progress-bar-value": `${progress}%` } as CSSProperties}
+      data-margo-mode={mode}
+      data-margo-animate={animate}
+      style={
+        { ...style, "--margo-progress-bar-fill": fill, "--margo-progress-bar-value": `${progress}%` } as CSSProperties
+      }
       className={cn(progressBarBaseClassName, className)}
     />
   );

package/src/components/progress_bar/style.ts

@@ -1 +1,3 @@
+export const progressBarDefaultFill = "linear-gradient(to right, var(--margo-color-primary-darken), var(--margo-color-primary))";
+
 export const progressBarBaseClassName = "margo-progress-bar relative h-0.5 overflow-hidden";

package/src/components/progress_bar/type.ts

@@ -5,6 +5,7 @@ export type ProgressBarMode = "determinate" | "indeterminate";
 
 export type ProgressBarOwnProps = {
   animate?: boolean;
+  fill?: string;
   mode?: ProgressBarMode;
   value?: number;
 };

package/src/components/sheet/sheet.css

@@ -0,0 +1,41 @@
+.margo-sheet {
+  transition: translate var(--margo-layer-duration) var(--margo-layer-easing);
+}
+
+.margo-sheet[data-margo-side="start"] {
+  translate: -100% 0;
+}
+
+.margo-sheet[data-margo-side="end"] {
+  translate: 100% 0;
+}
+
+.margo-sheet[data-margo-side="top"] {
+  translate: 0 -100%;
+}
+
+.margo-sheet[data-margo-side="bottom"] {
+  translate: 0 100%;
+}
+
+dialog[open] .margo-sheet {
+  translate: 0 0;
+}
+
+@starting-style {
+  dialog[open] .margo-sheet[data-margo-side="start"] {
+    translate: -100% 0;
+  }
+
+  dialog[open] .margo-sheet[data-margo-side="end"] {
+    translate: 100% 0;
+  }
+
+  dialog[open] .margo-sheet[data-margo-side="top"] {
+    translate: 0 -100%;
+  }
+
+  dialog[open] .margo-sheet[data-margo-side="bottom"] {
+    translate: 0 100%;
+  }
+}

package/src/components/sheet/sheet.tsx

@@ -0,0 +1,32 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { sheetBaseClassName, sheetBodyClassName, sheetFooterClassName, sheetSideClassName } from "./style.js";
+
+import type { ElementType } from "react";
+import type { SheetBodyProps, SheetFooterProps, SheetProps } from "./type.js";
+
+import "./sheet.css";
+
+export const Sheet = <T extends ElementType = "div">({ side = "end", className, children, ...rest }: SheetProps<T>) => (
+  <Tag
+    {...Tag.forward<T>(rest)}
+    data-margo-side={side}
+    data-margo-travel={true}
+    className={cn(sheetBaseClassName, sheetSideClassName[side], className)}
+  >
+    {children}
+  </Tag>
+);
+
+Sheet.Body = <T extends ElementType = "div">({ className, children, ...rest }: SheetBodyProps<T>) => (
+  <Tag {...Tag.forward<T>(rest)} className={cn(sheetBodyClassName, className)}>
+    {children}
+  </Tag>
+);
+
+Sheet.Footer = <T extends ElementType = "div">({ className, children, ...rest }: SheetFooterProps<T>) => (
+  <Tag {...Tag.forward<T>(rest)} className={cn(sheetFooterClassName, className)}>
+    {children}
+  </Tag>
+);

package/src/components/sheet/style.ts

@@ -0,0 +1,14 @@
+import type { SheetSide } from "./type.js";
+
+export const sheetBaseClassName = "margo-sheet flex flex-col overflow-hidden border-border bg-main text-on-main";
+
+export const sheetSideClassName: Record<SheetSide, string> = {
+  start: "h-full w-[85%] max-w-[26rem] justify-self-start self-stretch border-r-2",
+  end: "h-full w-[85%] max-w-[26rem] justify-self-end self-stretch border-l-2",
+  top: "h-auto max-h-[40%] w-full self-start justify-self-stretch border-b-2",
+  bottom: "h-auto max-h-[40%] w-full self-end justify-self-stretch border-t-2",
+};
+
+export const sheetBodyClassName = "min-h-0 flex-1 overflow-y-auto px-5 py-4 text-sm";
+
+export const sheetFooterClassName = "flex items-center justify-end gap-2 border-t-2 border-border px-5 py-4";

package/src/components/sheet/type.ts

@@ -0,0 +1,14 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType } from "react";
+
+export type SheetSide = "start" | "end" | "top" | "bottom";
+
+export type SheetOwnProps = {
+  side?: SheetSide;
+};
+
+export type SheetProps<T extends ElementType = "div"> = TagProps<T, SheetOwnProps>;
+
+export type SheetBodyProps<T extends ElementType = "div"> = TagProps<T>;
+
+export type SheetFooterProps<T extends ElementType = "div"> = TagProps<T>;

package/src/components/snippet/highlight.ts

@@ -0,0 +1,83 @@
+import type { SnippetToken, SnippetTokenType } from "./type.js";
+
+const KEYWORDS = [
+  "as",
+  "async",
+  "await",
+  "break",
+  "case",
+  "catch",
+  "class",
+  "const",
+  "continue",
+  "default",
+  "delete",
+  "do",
+  "else",
+  "export",
+  "extends",
+  "false",
+  "for",
+  "from",
+  "function",
+  "if",
+  "implements",
+  "import",
+  "in",
+  "instanceof",
+  "interface",
+  "let",
+  "new",
+  "null",
+  "of",
+  "readonly",
+  "return",
+  "satisfies",
+  "switch",
+  "this",
+  "throw",
+  "true",
+  "try",
+  "type",
+  "typeof",
+  "undefined",
+  "var",
+  "void",
+  "while",
+  "yield",
+];
+
+const PATTERNS: readonly { type: SnippetTokenType; source: string }[] = [
+  { type: "comment", source: "\\/\\/[^\\n]*|\\/\\*[\\s\\S]*?\\*\\/" },
+  { type: "string", source: "\"(?:[^\"\\\\]|\\\\.)*\"|'(?:[^'\\\\]|\\\\.)*'|`(?:[^`\\\\]|\\\\.)*`" },
+  { type: "tag", source: "<\\/?[A-Za-z][\\w.$]*" },
+  { type: "keyword", source: `\\b(?:${KEYWORDS.join("|")})\\b` },
+  { type: "number", source: "\\b\\d+(?:\\.\\d+)?\\b" },
+  { type: "attr", source: "\\b[A-Za-z_$][\\w$]*(?=\\s*[=:](?!=))" },
+  { type: "fn", source: "\\b[A-Za-z_$][\\w$]*(?=\\s*\\()" },
+  { type: "type", source: "\\b[A-Z][\\w$]*\\b" },
+  { type: "punct", source: "[{}()\\[\\]<>=;,.:!?|&+\\-*/]" },
+];
+
+const TOKENIZER = new RegExp(PATTERNS.map((pattern) => `(${pattern.source})`).join("|"), "g");
+
+export const snippetHighlight = (code: string): SnippetToken[] => {
+  const tokens: SnippetToken[] = [];
+  let cursor = 0;
+  let match: RegExpExecArray | null;
+
+  TOKENIZER.lastIndex = 0;
+
+  while ((match = TOKENIZER.exec(code)) !== null) {
+    if (match.index > cursor) tokens.push({ type: "plain", value: code.slice(cursor, match.index) });
+
+    const groupIndex = PATTERNS.findIndex((_, index) => match![index + 1] !== undefined);
+
+    tokens.push({ type: PATTERNS[groupIndex].type, value: match[0] });
+    cursor = match.index + match[0].length;
+  }
+
+  if (cursor < code.length) tokens.push({ type: "plain", value: code.slice(cursor) });
+
+  return tokens;
+};

package/src/components/snippet/snippet.tsx

@@ -0,0 +1,63 @@
+import { useState } from "react";
+
+import { MdCheck, MdContentCopy } from "react-icons/md";
+
+import { Guard, List, Swap, Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { Button } from "../button/button.js";
+import { snippetHighlight } from "./highlight.js";
+import {
+  snippetBarClassName,
+  snippetBaseClassName,
+  snippetCodeClassName,
+  snippetCopyClassName,
+  snippetTitleClassName,
+  snippetTokenClassName,
+} from "./style.js";
+
+import type { ElementType } from "react";
+import type { SnippetProps } from "./type.js";
+
+export const Snippet = <T extends ElementType = "div">({ snippet, title, className, ...rest }: SnippetProps<T>) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const source = snippet.trim();
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(source);
+    setIsCopied(true);
+    window.setTimeout(() => setIsCopied(false), 1500);
+  };
+
+  return (
+    <Tag {...Tag.forward<T>(rest)} className={cn(snippetBaseClassName, className)}>
+      <div className={snippetBarClassName}>
+        <Guard guardIf={!title} shouldHide>
+          <span className={snippetTitleClassName}>{title}</span>
+        </Guard>
+        <Button onClickBlur={handleCopy} aria-label="copy" aria-pressed={isCopied} className={snippetCopyClassName}>
+          <Button.Icon
+            icon={
+              <Swap.Boolean
+                swapOn={isCopied}
+                components={[<MdContentCopy className="text-sm" />, <MdCheck className="text-sm" />]}
+              />
+            }
+          />
+        </Button>
+      </div>
+      <pre className={snippetCodeClassName}>
+        <code>
+          <List
+            array={snippetHighlight(source)}
+            itemExtractor={({ row, index }) => (
+              <span key={index} className={snippetTokenClassName[row.type]}>
+                {row.value}
+              </span>
+            )}
+          />
+        </code>
+      </pre>
+    </Tag>
+  );
+};

package/src/components/snippet/style.ts

@@ -0,0 +1,25 @@
+import type { SnippetTokenType } from "./type.js";
+
+export const snippetBaseClassName = "overflow-hidden rounded-lg border-2 border-border bg-(--margo-code-surface)";
+
+export const snippetBarClassName =
+  "flex items-center justify-between gap-4 border-b-2 border-border bg-(--margo-code-bar) px-3 py-2";
+
+export const snippetTitleClassName = "text-mc uppercase tracking-widest text-medium";
+
+export const snippetCopyClassName = "ml-auto bg-neutral/60";
+
+export const snippetCodeClassName = "overflow-x-auto p-4 text-xs leading-relaxed";
+
+export const snippetTokenClassName: Record<SnippetTokenType, string> = {
+  plain: "text-(--margo-code-plain)",
+  comment: "text-(--margo-code-comment) italic",
+  string: "text-(--margo-code-string)",
+  keyword: "text-(--margo-code-keyword)",
+  number: "text-(--margo-code-number)",
+  tag: "text-(--margo-code-tag)",
+  attr: "text-(--margo-code-attr)",
+  fn: "text-(--margo-code-fn)",
+  type: "text-(--margo-code-type)",
+  punct: "text-(--margo-code-punct)",
+};

package/src/components/snippet/type.ts

@@ -0,0 +1,26 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType } from "react";
+
+export type SnippetTokenType =
+  | "plain"
+  | "comment"
+  | "string"
+  | "keyword"
+  | "number"
+  | "tag"
+  | "attr"
+  | "fn"
+  | "type"
+  | "punct";
+
+export type SnippetToken = {
+  type: SnippetTokenType;
+  value: string;
+};
+
+export type SnippetOwnProps = {
+  snippet: string;
+  title?: string;
+};
+
+export type SnippetProps<T extends ElementType = "div"> = TagProps<T, SnippetOwnProps>;

package/src/components/table/style.ts

@@ -0,0 +1,13 @@
+export const tableWrapperClassName = "w-full overflow-x-auto rounded-lg border-2 border-border";
+
+export const tableBaseClassName = "w-full border-collapse text-xs text-on-main";
+
+export const tableHeadClassName = "border-b-2 border-border bg-neutral/40 text-left";
+
+export const tableBodyClassName = "align-top";
+
+export const tableRowClassName = "border-b-2 border-border last:border-b-0";
+
+export const tableHeadCellClassName = "px-3 py-2 font-medium whitespace-nowrap";
+
+export const tableCellClassName = "px-3 py-2 align-top whitespace-nowrap";

package/src/components/table/table.tsx

@@ -0,0 +1,60 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import {
+  tableBaseClassName,
+  tableBodyClassName,
+  tableCellClassName,
+  tableHeadCellClassName,
+  tableHeadClassName,
+  tableRowClassName,
+  tableWrapperClassName,
+} from "./style.js";
+
+import type { ElementType } from "react";
+import type {
+  TableBodyProps,
+  TableCellProps,
+  TableHeadCellProps,
+  TableHeadProps,
+  TableProps,
+  TableRowProps,
+} from "./type.js";
+
+export const Table = <T extends ElementType = "table">({ className, children, ...rest }: TableProps<T>) => (
+  <div className={tableWrapperClassName}>
+    <Tag {...Tag.forward<T>(rest, "table")} className={cn(tableBaseClassName, className)}>
+      {children}
+    </Tag>
+  </div>
+);
+
+Table.Head = <T extends ElementType = "thead">({ className, children, ...rest }: TableHeadProps<T>) => (
+  <Tag {...Tag.forward<T>(rest, "thead")} className={cn(tableHeadClassName, className)}>
+    {children}
+  </Tag>
+);
+
+Table.Body = <T extends ElementType = "tbody">({ className, children, ...rest }: TableBodyProps<T>) => (
+  <Tag {...Tag.forward<T>(rest, "tbody")} className={cn(tableBodyClassName, className)}>
+    {children}
+  </Tag>
+);
+
+Table.Row = <T extends ElementType = "tr">({ className, children, ...rest }: TableRowProps<T>) => (
+  <Tag {...Tag.forward<T>(rest, "tr")} className={cn(tableRowClassName, className)}>
+    {children}
+  </Tag>
+);
+
+Table.HeadCell = <T extends ElementType = "th">({ className, children, ...rest }: TableHeadCellProps<T>) => (
+  <Tag {...Tag.forward<T>(rest, "th")} className={cn(tableHeadCellClassName, className)}>
+    {children}
+  </Tag>
+);
+
+Table.Cell = <T extends ElementType = "td">({ className, children, ...rest }: TableCellProps<T>) => (
+  <Tag {...Tag.forward<T>(rest, "td")} className={cn(tableCellClassName, className)}>
+    {children}
+  </Tag>
+);

package/src/components/table/type.ts

@@ -0,0 +1,14 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType } from "react";
+
+export type TableProps<T extends ElementType = "table"> = TagProps<T>;
+
+export type TableHeadProps<T extends ElementType = "thead"> = TagProps<T>;
+
+export type TableBodyProps<T extends ElementType = "tbody"> = TagProps<T>;
+
+export type TableRowProps<T extends ElementType = "tr"> = TagProps<T>;
+
+export type TableHeadCellProps<T extends ElementType = "th"> = TagProps<T>;
+
+export type TableCellProps<T extends ElementType = "td"> = TagProps<T>;

package/src/components/tooltip/tooltip.tsx

@@ -15,19 +15,19 @@ import type { ElementType, ReactNode } from "react";
 import type { TooltipProps } from "./type.js";
 
 export const Tooltip = <T extends ElementType = "div">({
-  ariaLabel,
+  label,
   children,
   className,
   id,
-  placeholder,
+  content,
   position = "down",
   ...rest
 }: TooltipProps<T>) => {
-  const placeholderRef = useRef<ReactNode>(null);
+  const contentRef = useRef<ReactNode>(null);
 
-  const isFilled = placeholder !== null && placeholder !== undefined;
+  const isFilled = content !== null && content !== undefined;
 
-  if (isFilled) placeholderRef.current = placeholder;
+  if (isFilled) contentRef.current = content;
 
   return (
     <Tag {...Tag.forward<T>(rest)} className={cn(tooltipAnchorClassName, className)}>
@@ -35,7 +35,7 @@ export const Tooltip = <T extends ElementType = "div">({
       <span
         id={id}
         role="tooltip"
-        aria-label={isFilled ? undefined : ariaLabel}
+        aria-label={isFilled ? undefined : label}
         className={cn(
           tooltipBubbleClassName,
           tooltipTransitionClassName,
@@ -43,7 +43,7 @@ export const Tooltip = <T extends ElementType = "div">({
           tooltipPositionClassName[position],
         )}
       >
-        {placeholderRef.current}
+        {contentRef.current}
       </span>
     </Tag>
   );

package/src/components/tooltip/type.ts

@@ -4,9 +4,9 @@ import type { ElementType, ReactNode } from "react";
 export type TooltipPosition = "up" | "down" | "left" | "right";
 
 export type TooltipOwnProps = {
-  ariaLabel?: string;
+  label?: string;
   id?: string;
-  placeholder?: ReactNode;
+  content?: ReactNode;
   position?: TooltipPosition;
   children?: ReactNode;
 };

package/src/css/grid.css

@@ -88,6 +88,26 @@
   margin-inline: calc(var(--margo-grid-bleed) * -1);
 }
 
+/*
+ * Bleed padding: the exact counterpart of the bleed margins above. An element
+ * that bled off an edge gets its content back on the grid by padding it by the
+ * same distance, so the background reaches the viewport while the text stays
+ * aligned with the columns.
+ *
+ * Use on: a bled sidebar, band or bar whose children must keep the alignment.
+ */
+@utility margo-pl-bleed {
+  padding-inline-start: var(--margo-grid-bleed);
+}
+
+@utility margo-pr-bleed {
+  padding-inline-end: var(--margo-grid-bleed);
+}
+
+@utility margo-px-bleed {
+  padding-inline: var(--margo-grid-bleed);
+}
+
 /*
  * Back to the centered content area (all 12 columns), dropping any bleed.
  * Use to reset an element that a variant put on `full` at another breakpoint.

package/src/css/theme.css

@@ -26,8 +26,16 @@
   /* Shadows */
   --shadow-card: var(--margo-shadow-card);
   --shadow-button: var(--margo-shadow-button);
+  --shadow-item: var(--margo-shadow-item);
   --shadow-chip: var(--margo-shadow-chip);
 
+  /* Durations */
+  --duration-layer: var(--margo-layer-duration);
+  --ease-layer: var(--margo-layer-easing);
+
+  /* Layers */
+  --z-index-layer: var(--margo-layer-z-index);
+
   /* Border widths */
   --border-width-2: var(--margo-border-width-2);
 

package/src/css/variables.css

@@ -31,6 +31,10 @@
 
   --margo-border-width-2: 1.5px;
 
+  --margo-layer-duration: 750ms;
+  --margo-layer-easing: cubic-bezier(0.32, 0.72, 0, 1);
+  --margo-layer-z-index: 100;
+
   --margo-grid-max-width: 80rem;
   --margo-grid-padding: 1rem;
   --margo-grid-gutter-x: 2rem;
@@ -43,17 +47,31 @@
 
   --margo-color-neutral: #ffffff;
   --margo-color-on-neutral: #000000;
-  --margo-color-main: #f6f6f6;
+  --margo-color-main: #e7e7e7;
   --margo-color-on-main: #151515;
   --margo-color-primary: #57e550;
   --margo-color-primary-darken: #45b93f;
   --margo-color-secondary: #d3d3d3;
-  --margo-color-medium: #7e7e7e;
-  --margo-color-border: #cfcfcf;
+  --margo-color-medium: #858585;
+  --margo-color-border: #cecece;
 
   --margo-shadow-card: 0 8px 6px -4px rgb(220, 220, 220, 0.5);
   --margo-shadow-button: 0px 2px 3px -1px rgb(220, 220, 220, 0.6);
+  --margo-shadow-item: 0px 2px 3px -1px rgb(220, 220, 220, 0.6);
   --margo-shadow-chip: 0 1px 3px -1px rgb(0, 0, 0, 0.6);
+
+  --margo-code-surface: #fbfbfb;
+  --margo-code-bar: #f1f1f1;
+  --margo-code-plain: #24292f;
+  --margo-code-comment: #8b949e;
+  --margo-code-string: #0a7d3f;
+  --margo-code-keyword: #a5309a;
+  --margo-code-number: #b3510f;
+  --margo-code-tag: #1f6fd6;
+  --margo-code-attr: #7a5cd6;
+  --margo-code-fn: #0f7c93;
+  --margo-code-type: #1f6fd6;
+  --margo-code-punct: #6e7781;
 }
 
 .dark {
@@ -71,5 +89,25 @@
 
   --margo-shadow-card: 0 4px 12px -4px rgb(0, 0, 0, 0.5);
   --margo-shadow-button: 0 2px 6px -2px rgb(0, 0, 0, 0.5);
+  --margo-shadow-item: 0 2px 6px -2px rgb(0, 0, 0, 0.5);
   --margo-shadow-chip: 0 1px 3px -1px rgb(0, 0, 0, 0.5);
+
+  --margo-code-surface: #0d0d0d;
+  --margo-code-bar: #161616;
+  --margo-code-plain: #e6e6e6;
+  --margo-code-comment: #6b6b6b;
+  --margo-code-string: #7ee787;
+  --margo-code-keyword: #ff7bd5;
+  --margo-code-number: #ffab70;
+  --margo-code-tag: #79c0ff;
+  --margo-code-attr: #c3a6ff;
+  --margo-code-fn: #56d4dd;
+  --margo-code-type: #79c0ff;
+  --margo-code-punct: #8b949e;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --margo-layer-duration: 1ms;
+  }
 }

package/src/hoc/background_glow/background_glow.css

@@ -7,26 +7,36 @@
   opacity: 0;
   border-radius: inherit;
   background: radial-gradient(
-    var(--margo-background-glow-size) circle at var(--margo-background-glow-x, 50%) var(--margo-background-glow-y, 50%),
+    var(--margo-background-glow-size, 480px) circle at var(--margo-background-glow-x, 50%) var(--margo-background-glow-y, 50%),
     var(--color-primary),
     transparent 70%
   );
   transition: opacity 300ms ease-out;
 }
 
+.margo-background-glow::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  opacity: 0;
+  border-radius: inherit;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-size: var(--margo-background-glow-noise-tile, 120px);
+  mix-blend-mode: overlay;
+  transition: opacity 300ms ease-out;
+}
+
 .margo-background-glow:hover::before,
 .margo-background-glow:focus-within::before {
   opacity: var(--margo-background-glow-opacity, 0.1);
 }
 
-.margo-background-glow--size-sm {
-  --margo-background-glow-size: 200px;
+.margo-background-glow:hover::after,
+.margo-background-glow:focus-within::after {
+  opacity: var(--margo-background-glow-noise-opacity, 0.04);
 }
 
-.margo-background-glow--size-md {
-  --margo-background-glow-size: 320px;
-}
 
-.margo-background-glow--size-lg {
-  --margo-background-glow-size: 480px;
-}
+