design-constraint-validator 1.0.0

package/tokens/tokens.schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.schema.d.ts","sourceRoot":"","sources":["tokens.schema.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AA6KxB,6CAA6C;AAE7C,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMvB,CAAC;AAGH,MAAM,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAElD,0CAA0C"}

package/tokens/tokens.schema.js

@@ -0,0 +1,148 @@
+// tokens.schema.ts
+import { z } from "zod";
+/** ---------- Helpers ---------- */
+// Simple alias format: {namespace.path.to.token}
+const AliasRef = z.string().regex(/^\{[a-zA-Z0-9_.-]+\}$/, {
+    message: "Expected an alias like {color.role.accent.default} or a concrete value.",
+});
+// Very lightweight color/string formats (OKLCH, hex, rgb[a], hsl[a], color()).
+// You can tighten these later if you want stricter parsing.
+const ColorLiteral = z
+    .string()
+    .regex(/^(oklch\(.+\)|#([0-9a-fA-F]{3,8})\b|rgba?\(.+\)|hsla?\(.+\)|color\(.+\))$/, "Expected a color (oklch(...), #hex, rgb/rgba(...), hsl/hsla(...), or color(...))");
+const DurationLiteral = z
+    .string()
+    .regex(/^\d+(\.\d+)?(ms|s)$/i, "Expected a CSS time like '150ms' or '0.2s'");
+const DimensionLiteral = z
+    .string()
+    .regex(/^-?\d+(\.\d+)?(px|rem|em|ch|vh|vw|%)$/i, "Expected a CSS length like '1rem', '12px', '50%'");
+const ShadowLiteral = z
+    .string()
+    .regex(/^(none|[-0-9a-zA-Z ().,/%]+)$/, "Expected a box-shadow string (e.g., '0 1px 2px rgba(0,0,0,.1)')");
+const EasingLiteral = z
+    .string()
+    .regex(/^(linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier\(.+\))$/i, "Expected an easing like 'ease' or 'cubic-bezier(...)'");
+const FontFamilyLiteral = z.string(); // keep loose; real-world lists vary
+const FontSizeLiteral = z.string(); // allow 'clamp(...)', '1rem', etc.
+const LineHeightLiteral = z.union([z.number(), z.string()]); // 1.6 or '1.6'
+/** ---------- Token leaf kinds ---------- */
+const TokenTypeEnum = z.enum([
+    // color
+    "color",
+    // dimensions / sizes
+    "dimension",
+    "borderRadius",
+    "fontSize",
+    "shadow",
+    "duration",
+    "easing",
+    // typography
+    "fontFamily",
+    "lineHeight",
+]);
+// By $type, what values are allowed?
+const ValueByType = {
+    color: z.union([ColorLiteral, AliasRef]),
+    dimension: z.union([DimensionLiteral, AliasRef]),
+    borderRadius: z.union([DimensionLiteral, AliasRef]),
+    fontSize: z.union([FontSizeLiteral, AliasRef]),
+    shadow: z.union([ShadowLiteral, AliasRef]),
+    duration: z.union([DurationLiteral, AliasRef]),
+    easing: z.union([EasingLiteral, AliasRef]),
+    fontFamily: z.union([FontFamilyLiteral, AliasRef]),
+    lineHeight: z.union([LineHeightLiteral, AliasRef]),
+};
+// Generic "leaf" token: { $type: 'color' | ..., $value: ... }
+const TokenLeaf = z
+    .object({
+    $type: TokenTypeEnum,
+    $value: z.any(), // refined below based on $type
+})
+    .superRefine((val, ctx) => {
+    const validator = ValueByType[val.$type];
+    const res = validator.safeParse(val.$value);
+    if (!res.success) {
+        res.error.issues.forEach((issue) => ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Invalid $value for $type="${val.$type}": ${issue.message}`,
+        }));
+    }
+});
+/** ---------- Namespaces / structure ---------- */
+// We'll allow arbitrary numeric keys like "0", "600", "700", etc.
+const StringKeyRecord = (schema) => z.record(z.string(), schema);
+// ---- color.palette (brand/gray/white/...) ----
+const ColorScale = StringKeyRecord(TokenLeaf); // e.g., {"600": {...}, "700": {...}}
+const ColorFamily = z.union([
+    ColorScale, // For scales like gray: { "0": {...}, "900": {...} }
+    TokenLeaf, // For direct tokens like white: { "$type": "color", "$value": "..." }
+]);
+const ColorPalette = z.object({
+    // open-ended families (brand, gray, white, success, etc.)
+    // Example file uses brand, gray, white.
+    ...{},
+}).catchall(ColorFamily);
+// ---- color.role (text/bg/accent/on/focus) ----
+const ColorRole = z.object({
+    // text: default, muted...
+    text: z
+        .object({
+        default: TokenLeaf,
+        muted: TokenLeaf,
+    })
+        .partial()
+        .passthrough(),
+    // bg: surface...
+    bg: z.object({ surface: TokenLeaf }).partial().passthrough(),
+    // accent: default, hover...
+    accent: z.object({ default: TokenLeaf, hover: TokenLeaf }).partial().passthrough(),
+    // on: accent...
+    on: z.object({ accent: TokenLeaf }).partial().passthrough(),
+    // focus: ring...
+    focus: z.object({ ring: TokenLeaf }).partial().passthrough(),
+})
+    .partial()
+    .passthrough();
+// ---- color root ----
+const ColorRoot = z.object({
+    palette: ColorPalette,
+    role: ColorRole,
+});
+// ---- size namespace (spacing, radius, border) ----
+const SizeSpacing = StringKeyRecord(TokenLeaf); // {"2": {...}, "4": {...}}
+const SizeRadius = StringKeyRecord(TokenLeaf); // {"md": {...}}
+const SizeBorder = StringKeyRecord(TokenLeaf); // {"1": {...}}
+const SizeRoot = z.object({
+    spacing: SizeSpacing,
+    radius: SizeRadius,
+    border: SizeBorder,
+});
+// ---- typography namespace ----
+const TypographyRoot = z.object({
+    font: z.object({ body: TokenLeaf }).partial().passthrough(),
+    size: z.object({ body: TokenLeaf }).partial().passthrough(),
+    lineHeight: z.object({ body: TokenLeaf }).partial().passthrough(),
+});
+// ---- motion namespace ----
+const MotionRoot = z.object({
+    duration: z.object({ fast: TokenLeaf }).partial().passthrough(),
+    easing: z.object({ standard: TokenLeaf }).partial().passthrough(),
+});
+// ---- elevation namespace ----
+const ElevationRoot = StringKeyRecord(TokenLeaf); // {"1": {...}, "2": {...}}
+/** ---------- Top-level schema ---------- */
+export const TokensSchema = z.object({
+    color: ColorRoot,
+    size: SizeRoot,
+    typography: TypographyRoot,
+    motion: MotionRoot,
+    elevation: ElevationRoot,
+});
+/** ---------- Example usage ---------- */
+// import tokens from "./tokens.example.json";
+// const result = TokensSchema.safeParse(tokens);
+// if (!result.success) {
+//   console.error(JSON.stringify(result.error.format(), null, 2));
+//   process.exit(1);
+// }
+// console.log("✅ tokens.json is valid!");

package/tokens/tokens.schema.ts

@@ -0,0 +1,196 @@
+// tokens.schema.ts
+import { z } from "zod";
+
+/** ---------- Helpers ---------- */
+
+// Simple alias format: {namespace.path.to.token}
+const AliasRef = z.string().regex(/^\{[a-zA-Z0-9_.-]+\}$/, {
+  message:
+    "Expected an alias like {color.role.accent.default} or a concrete value.",
+});
+
+// Very lightweight color/string formats (OKLCH, hex, rgb[a], hsl[a], color()).
+// You can tighten these later if you want stricter parsing.
+const ColorLiteral = z
+  .string()
+  .regex(
+    /^(oklch\(.+\)|#([0-9a-fA-F]{3,8})\b|rgba?\(.+\)|hsla?\(.+\)|color\(.+\))$/,
+    "Expected a color (oklch(...), #hex, rgb/rgba(...), hsl/hsla(...), or color(...))"
+  );
+
+const DurationLiteral = z
+  .string()
+  .regex(/^\d+(\.\d+)?(ms|s)$/i, "Expected a CSS time like '150ms' or '0.2s'");
+
+const DimensionLiteral = z
+  .string()
+  .regex(
+    /^-?\d+(\.\d+)?(px|rem|em|ch|vh|vw|%)$/i,
+    "Expected a CSS length like '1rem', '12px', '50%'"
+  );
+
+const ShadowLiteral = z
+  .string()
+  .regex(
+    /^(none|[-0-9a-zA-Z ().,/%]+)$/,
+    "Expected a box-shadow string (e.g., '0 1px 2px rgba(0,0,0,.1)')"
+  );
+
+const EasingLiteral = z
+  .string()
+  .regex(
+    /^(linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier\(.+\))$/i,
+    "Expected an easing like 'ease' or 'cubic-bezier(...)'"
+  );
+
+const FontFamilyLiteral = z.string(); // keep loose; real-world lists vary
+const FontSizeLiteral = z.string(); // allow 'clamp(...)', '1rem', etc.
+const LineHeightLiteral = z.union([z.number(), z.string()]); // 1.6 or '1.6'
+
+/** ---------- Token leaf kinds ---------- */
+
+const TokenTypeEnum = z.enum([
+  // color
+  "color",
+  // dimensions / sizes
+  "dimension",
+  "borderRadius",
+  "fontSize",
+  "shadow",
+  "duration",
+  "easing",
+  // typography
+  "fontFamily",
+  "lineHeight",
+]);
+
+// By $type, what values are allowed?
+const ValueByType: Record<
+  z.infer<typeof TokenTypeEnum>,
+  z.ZodTypeAny
+> = {
+  color: z.union([ColorLiteral, AliasRef]),
+  dimension: z.union([DimensionLiteral, AliasRef]),
+  borderRadius: z.union([DimensionLiteral, AliasRef]),
+  fontSize: z.union([FontSizeLiteral, AliasRef]),
+  shadow: z.union([ShadowLiteral, AliasRef]),
+  duration: z.union([DurationLiteral, AliasRef]),
+  easing: z.union([EasingLiteral, AliasRef]),
+  fontFamily: z.union([FontFamilyLiteral, AliasRef]),
+  lineHeight: z.union([LineHeightLiteral, AliasRef]),
+};
+
+// Generic "leaf" token: { $type: 'color' | ..., $value: ... }
+const TokenLeaf = z
+  .object({
+    $type: TokenTypeEnum,
+    $value: z.any(), // refined below based on $type
+  })
+  .superRefine((val, ctx) => {
+    const validator = ValueByType[val.$type];
+    const res = validator.safeParse(val.$value);
+    if (!res.success) {
+      res.error.issues.forEach((issue) =>
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: `Invalid $value for $type="${val.$type}": ${issue.message}`,
+        })
+      );
+    }
+  });
+
+/** ---------- Namespaces / structure ---------- */
+
+// We'll allow arbitrary numeric keys like "0", "600", "700", etc.
+const StringKeyRecord = <T extends z.ZodTypeAny>(schema: T) =>
+  z.record(z.string(), schema);
+
+// ---- color.palette (brand/gray/white/...) ----
+const ColorScale = StringKeyRecord(TokenLeaf); // e.g., {"600": {...}, "700": {...}}
+const ColorFamily = z.union([
+  ColorScale, // For scales like gray: { "0": {...}, "900": {...} }
+  TokenLeaf,  // For direct tokens like white: { "$type": "color", "$value": "..." }
+]);
+const ColorPalette = z.object({
+  // open-ended families (brand, gray, white, success, etc.)
+  // Example file uses brand, gray, white.
+  ...({} as Record<string, z.ZodTypeAny>),
+}).catchall(ColorFamily);
+
+// ---- color.role (text/bg/accent/on/focus) ----
+const ColorRole = z.object({
+  // text: default, muted...
+  text: z
+    .object({
+      default: TokenLeaf,
+      muted: TokenLeaf,
+    })
+    .partial()
+    .passthrough(),
+  // bg: surface...
+  bg: z.object({ surface: TokenLeaf }).partial().passthrough(),
+  // accent: default, hover...
+  accent: z.object({ default: TokenLeaf, hover: TokenLeaf }).partial().passthrough(),
+  // on: accent...
+  on: z.object({ accent: TokenLeaf }).partial().passthrough(),
+  // focus: ring...
+  focus: z.object({ ring: TokenLeaf }).partial().passthrough(),
+})
+  .partial()
+  .passthrough();
+
+// ---- color root ----
+const ColorRoot = z.object({
+  palette: ColorPalette,
+  role: ColorRole,
+});
+
+// ---- size namespace (spacing, radius, border) ----
+const SizeSpacing = StringKeyRecord(TokenLeaf); // {"2": {...}, "4": {...}}
+const SizeRadius = StringKeyRecord(TokenLeaf); // {"md": {...}}
+const SizeBorder = StringKeyRecord(TokenLeaf); // {"1": {...}}
+
+const SizeRoot = z.object({
+  spacing: SizeSpacing,
+  radius: SizeRadius,
+  border: SizeBorder,
+});
+
+// ---- typography namespace ----
+const TypographyRoot = z.object({
+  font: z.object({ body: TokenLeaf }).partial().passthrough(),
+  size: z.object({ body: TokenLeaf }).partial().passthrough(),
+  lineHeight: z.object({ body: TokenLeaf }).partial().passthrough(),
+});
+
+// ---- motion namespace ----
+const MotionRoot = z.object({
+  duration: z.object({ fast: TokenLeaf }).partial().passthrough(),
+  easing: z.object({ standard: TokenLeaf }).partial().passthrough(),
+});
+
+// ---- elevation namespace ----
+const ElevationRoot = StringKeyRecord(TokenLeaf); // {"1": {...}, "2": {...}}
+
+/** ---------- Top-level schema ---------- */
+
+export const TokensSchema = z.object({
+  color: ColorRoot,
+  size: SizeRoot,
+  typography: TypographyRoot,
+  motion: MotionRoot,
+  elevation: ElevationRoot,
+});
+
+// Export the TypeScript type you can use in your app/CI.
+export type Tokens = z.infer<typeof TokensSchema>;
+
+/** ---------- Example usage ---------- */
+
+// import tokens from "./tokens.example.json";
+// const result = TokensSchema.safeParse(tokens);
+// if (!result.success) {
+//   console.error(JSON.stringify(result.error.format(), null, 2));
+//   process.exit(1);
+// }
+// console.log("✅ tokens.json is valid!");

package/tokens/tokens.test.json

@@ -0,0 +1,38 @@
+{
+  "$schemaVersion": "1.0.0",
+
+  "color": {
+    "palette": {
+      "gray": {
+        "0":   { "$type": "color", "$value": "oklch(0.99 0.001 95)" },
+        "300": { "$type": "color", "$value": "oklch(0.75 0.01 95)" },
+        "400": { "$type": "color", "$value": "oklch(0.65 0.015 95)" },
+        "500": { "$type": "color", "$value": "oklch(0.55 0.02 95)" },
+        "600": { "$type": "color", "$value": "oklch(0.45 0.02 95)" },
+        "900": { "$type": "color", "$value": "oklch(0.20 0.02 95)" }
+      },
+      "brand": {
+        "400": { "$type": "color", "$value": "oklch(0.70 0.15 260)" },
+        "500": { "$type": "color", "$value": "oklch(0.66 0.16 260)" },
+        "600": { "$type": "color", "$value": "oklch(0.62 0.18 260)" },
+        "700": { "$type": "color", "$value": "oklch(0.56 0.19 260)" }
+      }
+    }
+  },
+
+  "typography": {
+    "size": {
+      "h1": { "$type": "fontSize", "$value": "20px" },
+      "h2": { "$type": "fontSize", "$value": "24px" },
+      "h3": { "$type": "fontSize", "$value": "18px" },
+      "h4": { "$type": "fontSize", "$value": "16px" },
+      "h5": { "$type": "fontSize", "$value": "14px" },
+      "h6": { "$type": "fontSize", "$value": "12px" },
+      "xl": { "$type": "fontSize", "$value": "20px" },
+      "lg": { "$type": "fontSize", "$value": "18px" },
+      "base": { "$type": "fontSize", "$value": "16px" },
+      "sm": { "$type": "fontSize", "$value": "14px" },
+      "xs": { "$type": "fontSize", "$value": "12px" }
+    }
+  }
+}

package/tokens/tokens.touch-violation.json

@@ -0,0 +1,8 @@
+{
+  "$schemaVersion": "1.0.0",
+  "control": {
+    "size": {
+      "min": { "$type": "dimension", "$value": "30px" }
+    }
+  }
+}

package/tokens/typography.classes.css

@@ -0,0 +1,11 @@
+.t-root { font-family: var(--t-font-family); }
+
+.t-h1 { font-size: var(--t-h1-size); line-height: var(--t-h1-leading); font-weight: var(--t-h1-weight); letter-spacing: var(--t-h1-track); margin: var(--t-block-gap) 0; }
+
+.t-h2 { font-size: var(--t-h2-size); line-height: var(--t-h2-leading); font-weight: var(--t-h2-weight); letter-spacing: var(--t-h2-track); margin: calc(var(--t-block-gap) * .9) 0; }
+
+.t-h3 { font-size: var(--t-h3-size); line-height: var(--t-h3-leading); font-weight: var(--t-h3-weight); letter-spacing: var(--t-h3-track); margin: calc(var(--t-block-gap) * .8) 0; }
+
+.t-body { font-size: var(--t-body-size); line-height: var(--t-body-leading); font-weight: var(--t-body-weight); letter-spacing: var(--t-body-track); }
+
+.t-button { font: inherit; font-weight: 600; }

package/tokens/typography.css

@@ -0,0 +1,20 @@
+:root {
+  --t-font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  --t-h1-size: clamp(2rem, 1.4rem + 2vw, 3rem);
+  --t-h2-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
+  --t-h3-size: clamp(1.25rem, 1rem + .6vw, 1.5rem);
+  --t-body-size: 1rem;
+  --t-h1-leading: 1.2;
+  --t-h2-leading: 1.25;
+  --t-h3-leading: 1.3;
+  --t-body-leading: 1.6;
+  --t-h1-weight: 700;
+  --t-h2-weight: 700;
+  --t-h3-weight: 600;
+  --t-body-weight: 400;
+  --t-h1-track: -0.01em;
+  --t-h2-track: -0.005em;
+  --t-h3-track: 0;
+  --t-body-track: 0;
+  --t-block-gap: 1rem;
+}