@lets-ship/brand-dna 2.0.0 → 3.1.0

package/dist/schema/design.js

@@ -0,0 +1,132 @@
+/**
+ * The design language of a brand: the decisions a design studio makes on top of the tokens.
+ * The tokens say which colours, faces and sizes exist; these primitives say how a page uses
+ * them: how dense it is, how sections alternate, how content is separated, how a headline
+ * marks its key words, how media sits on the page and how controls behave. The site theme
+ * compiles each one into theme-contract variables, so a template follows the brand without a
+ * brand fact in its code (SHIP Sites D25, D27).
+ */
+import { z } from "zod";
+import { Alias, ColorRole, Dimension } from "./tokens.js";
+const Slider = z.number().int().min(1).max(5);
+/** The background of one section. `base` is the page; the others set a section apart. */
+export const SECTION_TONES = ["base", "tint", "inverse", "brand"];
+export const SectionTone = z.enum(SECTION_TONES);
+/** How bold the brand looks, in the same 1 to 5 form as `voice.tone`. */
+export const VisualTone = z.strictObject({
+    /** 1: soft greys and tints; 5: black on white and dark bands. */
+    contrast: Slider,
+    /** 1: open, one idea per screen; 5: packed. */
+    density: Slider,
+    /** 1: plain; 5: patterns, markers and decoration. */
+    ornament: Slider,
+    /** 1: still; 5: animated. */
+    motion: Slider,
+});
+/** The point of view of the look, for agents and reviewers to judge a page against. */
+export const Visual = z.strictObject({
+    /** One or two sentences: what every page of the brand should feel like. */
+    direction: z.string().min(1),
+    tone: VisualTone,
+    /** Patterns the brand never uses, written so that a reviewer can check a page for them. */
+    avoid: z.array(z.string().min(1)).default([]),
+});
+/** Space between sections, by density. A brand's `space.section-*` tokens override a step. */
+export const DENSITIES = ["compact", "regular", "airy"];
+/** The band tones a texture may sit on. The page itself stays plain, so text on it reads first. */
+export const TEXTURE_TONES = ["tint", "inverse", "brand"];
+/**
+ * One of the DNA's patterns on some band tones, as a quiet texture under the content. The site
+ * draws the pattern's shapes in the band's own text colour, so it suits every band in both modes.
+ */
+export const Texture = z.strictObject({
+    /** The id of a pattern in the DNA's `patterns`. */
+    pattern: z.string().regex(/^[a-z0-9][a-z0-9_-]*$/, "Lowercase id"),
+    tones: z.array(z.enum(TEXTURE_TONES)).min(1),
+});
+/**
+ * How much of a page the brand's colours cover, after impeccable's four colour strategies:
+ * restrained (accents on a neutral page), committed (one brand colour carries the page), full
+ * (several brand colours share it) and drenched (the brand colour is the page).
+ */
+export const COLOUR_STRATEGIES = ["restrained", "committed", "full", "drenched"];
+export const ColourStrategy = z.enum(COLOUR_STRATEGIES);
+/** The most of a page, in percent of `colorPolicy.usage`, the brand roles cover per strategy. */
+export const STRATEGY_MAX_PERCENT = {
+    restrained: 15,
+    committed: 35,
+    full: 60,
+    drenched: 100,
+};
+/** The roles whose share of a page a colour strategy counts: the brand's colours, not its neutrals. */
+export const BRAND_COLOUR_ROLES = ["primary", "accent", "surface-brand"];
+export const Composition = z.strictObject({
+    /** Where section headings and short text sit: on the start edge or in the centre. */
+    align: z.enum(["start", "center"]),
+    /** The column weights of a two-column section, wider side first, such as [7, 5]. */
+    split: z.tuple([z.number().int().min(1).max(12), z.number().int().min(1).max(12)]),
+    /** The longest line, in characters: running text, and the lead under a headline. */
+    measure: z.strictObject({
+        body: z.number().int().min(30).max(100),
+        lead: z.number().int().min(20).max(70),
+    }),
+    density: z.enum(DENSITIES),
+    /** The section tones a page may use, and how many inverse bands one page may hold. */
+    tones: z.strictObject({
+        allowed: z.array(SectionTone).min(1),
+        maxInverse: z.number().int().min(0).max(4),
+    }),
+    texture: Texture.optional(),
+});
+/**
+ * How the brand separates things. `card` boxes an item with a fill, a border and a radius;
+ * `rule` sets items apart with a line; `plain` uses space alone. Media: `frame` puts a picture
+ * in a box, `plain` shows it with the media radius, `bleed` also lets it run to the page edge.
+ */
+export const Containers = z.strictObject({
+    list: z.enum(["card", "rule", "plain"]),
+    media: z.enum(["frame", "plain", "bleed"]),
+    quote: z.enum(["card", "rule", "plain"]),
+});
+/** How a headline marks its key words, and the colour role it marks them with. */
+export const Emphasis = z.strictObject({
+    style: z.enum(["colour", "marker", "underline", "italic", "none"]),
+    role: ColorRole,
+});
+/** The places the accent colour may appear. Anything else stays in the brand's other roles. */
+export const ACCENT_USES = ["marker", "rule", "numerals", "cta-inverse", "badge"];
+export const AccentPolicy = z.strictObject({
+    uses: z.array(z.enum(ACCENT_USES)),
+    /** How many accent marks one screen may hold. */
+    maxPerScreen: z.number().int().min(0).max(5),
+});
+/** Buttons and other controls: their heights, the focus ring and the hover change. */
+export const Controls = z.strictObject({
+    size: z.strictObject({ sm: Dimension, md: Dimension, lg: Dimension }),
+    focus: z.strictObject({ role: ColorRole, width: Dimension, offset: Dimension }),
+    /** How far a hovered fill moves toward the text colour, from 0 (no change) to 0.5. */
+    hover: z.strictObject({ mix: z.number().min(0).max(0.5) }),
+});
+/** Typographic details: the figures and the quote marks. */
+export const Details = z.strictObject({
+    /** `tabular` lines up prices, hours and ratings in columns. */
+    numerals: z.enum(["tabular", "proportional", "oldstyle"]),
+    /** Hang an opening quote mark outside the text edge. */
+    hangingPunctuation: z.boolean(),
+});
+/** How media looks on a site: the shapes a picture may take and its colour treatment. */
+export const MediaTreatment = z.strictObject({
+    /** Aspect ratios a picture may take, the first being the default, such as "4:5". */
+    aspects: z
+        .array(z.string().regex(/^[1-9]\d?:[1-9]\d?$/, "A ratio like 4:5 or 16:9"))
+        .min(1)
+        .max(4),
+    /** A two-colour treatment: the darkest tone of a photo becomes `shadow`, the lightest `highlight`. */
+    duotone: z.strictObject({ shadow: Alias, highlight: Alias }).optional(),
+    /** The corner radius of a picture, an alias into `radius`. */
+    radius: Alias,
+});
+/** The reveal of the opening section when a page loads. `none` keeps every page still. */
+export const PAGE_REVEALS = ["none", "fade", "rise"];
+export const PageReveal = z.enum(PAGE_REVEALS);
+//# sourceMappingURL=design.js.map

package/dist/schema/design.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design.js","sourceRoot":"","sources":["../../src/schema/design.ts"],"names":[],"mappings":"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"}

package/dist/schema/dna.d.ts

@@ -51,6 +51,11 @@ export declare const ContrastPair: z.ZodObject<{
         surface: "surface";
         "surface-alt": "surface-alt";
         "on-surface": "on-surface";
+        "surface-tint": "surface-tint";
+        "surface-inverse": "surface-inverse";
+        "on-surface-inverse": "on-surface-inverse";
+        "surface-brand": "surface-brand";
+        "on-surface-brand": "on-surface-brand";
         muted: "muted";
         border: "border";
         warning: "warning";
@@ -67,6 +72,11 @@ export declare const ContrastPair: z.ZodObject<{
         surface: "surface";
         "surface-alt": "surface-alt";
         "on-surface": "on-surface";
+        "surface-tint": "surface-tint";
+        "surface-inverse": "surface-inverse";
+        "on-surface-inverse": "on-surface-inverse";
+        "surface-brand": "surface-brand";
+        "on-surface-brand": "on-surface-brand";
         muted: "muted";
         border: "border";
         warning: "warning";
@@ -158,6 +168,11 @@ export declare const LogoVariant: z.ZodObject<{
         surface: "surface";
         "surface-alt": "surface-alt";
         "on-surface": "on-surface";
+        "surface-tint": "surface-tint";
+        "surface-inverse": "surface-inverse";
+        "on-surface-inverse": "on-surface-inverse";
+        "surface-brand": "surface-brand";
+        "on-surface-brand": "on-surface-brand";
         muted: "muted";
         border: "border";
         warning: "warning";
@@ -196,6 +211,11 @@ export declare const Logo: z.ZodObject<{
             surface: "surface";
             "surface-alt": "surface-alt";
             "on-surface": "on-surface";
+            "surface-tint": "surface-tint";
+            "surface-inverse": "surface-inverse";
+            "on-surface-inverse": "on-surface-inverse";
+            "surface-brand": "surface-brand";
+            "on-surface-brand": "on-surface-brand";
             muted: "muted";
             border: "border";
             warning: "warning";
@@ -227,9 +247,9 @@ export declare const Imagery: z.ZodObject<{
     illustration: z.ZodOptional<z.ZodString>;
     icons: z.ZodOptional<z.ZodObject<{
         style: z.ZodEnum<{
+            duotone: "duotone";
             outline: "outline";
             filled: "filled";
-            duotone: "duotone";
         }>;
         strokePx: z.ZodOptional<z.ZodNumber>;
         corner: z.ZodEnum<{
@@ -256,6 +276,11 @@ export declare const Imagery: z.ZodObject<{
             surface: "surface";
             "surface-alt": "surface-alt";
             "on-surface": "on-surface";
+            "surface-tint": "surface-tint";
+            "surface-inverse": "surface-inverse";
+            "on-surface-inverse": "on-surface-inverse";
+            "surface-brand": "surface-brand";
+            "on-surface-brand": "on-surface-brand";
             muted: "muted";
             border: "border";
             warning: "warning";
@@ -263,6 +288,14 @@ export declare const Imagery: z.ZodObject<{
         }>;
         opacity: z.ZodNumber;
     }, z.core.$strict>>;
+    media: z.ZodOptional<z.ZodObject<{
+        aspects: z.ZodArray<z.ZodString>;
+        duotone: z.ZodOptional<z.ZodObject<{
+            shadow: z.ZodString;
+            highlight: z.ZodString;
+        }, z.core.$strict>>;
+        radius: z.ZodString;
+    }, z.core.$strict>>;
     gradeStrength: z.ZodDefault<z.ZodNumber>;
     library: z.ZodDefault<z.ZodArray<z.ZodString>>;
     provenance: z.ZodOptional<z.ZodObject<{
@@ -438,6 +471,11 @@ export declare const Motion: z.ZodObject<{
         durationMs: z.ZodNumber;
         ease: z.ZodOptional<z.ZodString>;
     }, z.core.$strict>>;
+    pageReveal: z.ZodOptional<z.ZodEnum<{
+        none: "none";
+        fade: "fade";
+        rise: "rise";
+    }>>;
 }, z.core.$strict>;
 /** How much of a composition each role covers, and whether gradients are allowed. */
 export declare const ColorPolicy: z.ZodObject<{
@@ -453,6 +491,11 @@ export declare const ColorPolicy: z.ZodObject<{
             surface: "surface";
             "surface-alt": "surface-alt";
             "on-surface": "on-surface";
+            "surface-tint": "surface-tint";
+            "surface-inverse": "surface-inverse";
+            "on-surface-inverse": "on-surface-inverse";
+            "surface-brand": "surface-brand";
+            "on-surface-brand": "on-surface-brand";
             muted: "muted";
             border: "border";
             warning: "warning";
@@ -462,9 +505,25 @@ export declare const ColorPolicy: z.ZodObject<{
     }, z.core.$strict>>;
     gradients: z.ZodEnum<{
         none: "none";
-        subtle: "subtle";
         brand: "brand";
+        subtle: "subtle";
     }>;
+    strategy: z.ZodOptional<z.ZodEnum<{
+        restrained: "restrained";
+        committed: "committed";
+        full: "full";
+        drenched: "drenched";
+    }>>;
+    accent: z.ZodOptional<z.ZodObject<{
+        uses: z.ZodArray<z.ZodEnum<{
+            rule: "rule";
+            marker: "marker";
+            numerals: "numerals";
+            "cta-inverse": "cta-inverse";
+            badge: "badge";
+        }>>;
+        maxPerScreen: z.ZodNumber;
+    }, z.core.$strict>>;
 }, z.core.$strict>;
 /** The modular scale typography roles were derived from. */
 export declare const TypeScale: z.ZodObject<{
@@ -573,6 +632,11 @@ export declare const Dna: z.ZodObject<{
                 surface: "surface";
                 "surface-alt": "surface-alt";
                 "on-surface": "on-surface";
+                "surface-tint": "surface-tint";
+                "surface-inverse": "surface-inverse";
+                "on-surface-inverse": "on-surface-inverse";
+                "surface-brand": "surface-brand";
+                "on-surface-brand": "on-surface-brand";
                 muted: "muted";
                 border: "border";
                 warning: "warning";
@@ -625,6 +689,11 @@ export declare const Dna: z.ZodObject<{
                 surface: "surface";
                 "surface-alt": "surface-alt";
                 "on-surface": "on-surface";
+                "surface-tint": "surface-tint";
+                "surface-inverse": "surface-inverse";
+                "on-surface-inverse": "on-surface-inverse";
+                "surface-brand": "surface-brand";
+                "on-surface-brand": "on-surface-brand";
                 muted: "muted";
                 border: "border";
                 warning: "warning";
@@ -798,6 +867,7 @@ export declare const Dna: z.ZodObject<{
             }, z.core.$strict>>;
         }, z.core.$strict>;
         typography: z.ZodRecord<z.ZodEnum<{
+            "display-xl": "display-xl";
             display: "display";
             h1: "h1";
             h2: "h2";
@@ -847,6 +917,13 @@ export declare const Dna: z.ZodObject<{
                         rem: "rem";
                     }>;
                 }, z.core.$strict>, z.ZodString]>;
+                fontSizeMin: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
+                    value: z.ZodNumber;
+                    unit: z.ZodEnum<{
+                        px: "px";
+                        rem: "rem";
+                    }>;
+                }, z.core.$strict>, z.ZodString]>>;
                 fontWeight: z.ZodNumber;
                 lineHeight: z.ZodNumber;
                 letterSpacing: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
@@ -862,6 +939,7 @@ export declare const Dna: z.ZodObject<{
                     lowercase: "lowercase";
                     capitalize: "capitalize";
                 }>>;
+                fontFeatures: z.ZodOptional<z.ZodArray<z.ZodString>>;
             }, z.core.$strict>;
         }, z.core.$strict>>;
         space: z.ZodRecord<z.ZodString, z.ZodObject<{
@@ -1168,6 +1246,11 @@ export declare const Dna: z.ZodObject<{
                 surface: "surface";
                 "surface-alt": "surface-alt";
                 "on-surface": "on-surface";
+                "surface-tint": "surface-tint";
+                "surface-inverse": "surface-inverse";
+                "on-surface-inverse": "on-surface-inverse";
+                "surface-brand": "surface-brand";
+                "on-surface-brand": "on-surface-brand";
                 muted: "muted";
                 border: "border";
                 warning: "warning";
@@ -1184,6 +1267,11 @@ export declare const Dna: z.ZodObject<{
                 surface: "surface";
                 "surface-alt": "surface-alt";
                 "on-surface": "on-surface";
+                "surface-tint": "surface-tint";
+                "surface-inverse": "surface-inverse";
+                "on-surface-inverse": "on-surface-inverse";
+                "surface-brand": "surface-brand";
+                "on-surface-brand": "on-surface-brand";
                 muted: "muted";
                 border: "border";
                 warning: "warning";
@@ -1261,6 +1349,11 @@ export declare const Dna: z.ZodObject<{
                 surface: "surface";
                 "surface-alt": "surface-alt";
                 "on-surface": "on-surface";
+                "surface-tint": "surface-tint";
+                "surface-inverse": "surface-inverse";
+                "on-surface-inverse": "on-surface-inverse";
+                "surface-brand": "surface-brand";
+                "on-surface-brand": "on-surface-brand";
                 muted: "muted";
                 border: "border";
                 warning: "warning";
@@ -1292,9 +1385,9 @@ export declare const Dna: z.ZodObject<{
         illustration: z.ZodOptional<z.ZodString>;
         icons: z.ZodOptional<z.ZodObject<{
             style: z.ZodEnum<{
+                duotone: "duotone";
                 outline: "outline";
                 filled: "filled";
-                duotone: "duotone";
             }>;
             strokePx: z.ZodOptional<z.ZodNumber>;
             corner: z.ZodEnum<{
@@ -1321,6 +1414,11 @@ export declare const Dna: z.ZodObject<{
                 surface: "surface";
                 "surface-alt": "surface-alt";
                 "on-surface": "on-surface";
+                "surface-tint": "surface-tint";
+                "surface-inverse": "surface-inverse";
+                "on-surface-inverse": "on-surface-inverse";
+                "surface-brand": "surface-brand";
+                "on-surface-brand": "on-surface-brand";
                 muted: "muted";
                 border: "border";
                 warning: "warning";
@@ -1328,6 +1426,14 @@ export declare const Dna: z.ZodObject<{
             }>;
             opacity: z.ZodNumber;
         }, z.core.$strict>>;
+        media: z.ZodOptional<z.ZodObject<{
+            aspects: z.ZodArray<z.ZodString>;
+            duotone: z.ZodOptional<z.ZodObject<{
+                shadow: z.ZodString;
+                highlight: z.ZodString;
+            }, z.core.$strict>>;
+            radius: z.ZodString;
+        }, z.core.$strict>>;
         gradeStrength: z.ZodDefault<z.ZodNumber>;
         library: z.ZodDefault<z.ZodArray<z.ZodString>>;
         provenance: z.ZodOptional<z.ZodObject<{
@@ -1494,6 +1600,11 @@ export declare const Dna: z.ZodObject<{
                 surface: "surface";
                 "surface-alt": "surface-alt";
                 "on-surface": "on-surface";
+                "surface-tint": "surface-tint";
+                "surface-inverse": "surface-inverse";
+                "on-surface-inverse": "on-surface-inverse";
+                "surface-brand": "surface-brand";
+                "on-surface-brand": "on-surface-brand";
                 muted: "muted";
                 border: "border";
                 warning: "warning";
@@ -1503,9 +1614,25 @@ export declare const Dna: z.ZodObject<{
         }, z.core.$strict>>;
         gradients: z.ZodEnum<{
             none: "none";
-            subtle: "subtle";
             brand: "brand";
+            subtle: "subtle";
         }>;
+        strategy: z.ZodOptional<z.ZodEnum<{
+            restrained: "restrained";
+            committed: "committed";
+            full: "full";
+            drenched: "drenched";
+        }>>;
+        accent: z.ZodOptional<z.ZodObject<{
+            uses: z.ZodArray<z.ZodEnum<{
+                rule: "rule";
+                marker: "marker";
+                numerals: "numerals";
+                "cta-inverse": "cta-inverse";
+                badge: "badge";
+            }>>;
+            maxPerScreen: z.ZodNumber;
+        }, z.core.$strict>>;
     }, z.core.$strict>>;
     typeScale: z.ZodOptional<z.ZodObject<{
         basePx: z.ZodNumber;
@@ -1555,6 +1682,11 @@ export declare const Dna: z.ZodObject<{
             durationMs: z.ZodNumber;
             ease: z.ZodOptional<z.ZodString>;
         }, z.core.$strict>>;
+        pageReveal: z.ZodOptional<z.ZodEnum<{
+            none: "none";
+            fade: "fade";
+            rise: "rise";
+        }>>;
     }, z.core.$strict>>;
     patterns: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodObject<{
         description: z.ZodOptional<z.ZodString>;
@@ -1571,6 +1703,11 @@ export declare const Dna: z.ZodObject<{
                 surface: "surface";
                 "surface-alt": "surface-alt";
                 "on-surface": "on-surface";
+                "surface-tint": "surface-tint";
+                "surface-inverse": "surface-inverse";
+                "on-surface-inverse": "on-surface-inverse";
+                "surface-brand": "surface-brand";
+                "on-surface-brand": "on-surface-brand";
                 muted: "muted";
                 border: "border";
                 warning: "warning";
@@ -1592,6 +1729,11 @@ export declare const Dna: z.ZodObject<{
                 surface: "surface";
                 "surface-alt": "surface-alt";
                 "on-surface": "on-surface";
+                "surface-tint": "surface-tint";
+                "surface-inverse": "surface-inverse";
+                "on-surface-inverse": "on-surface-inverse";
+                "surface-brand": "surface-brand";
+                "on-surface-brand": "on-surface-brand";
                 muted: "muted";
                 border: "border";
                 warning: "warning";
@@ -1613,6 +1755,11 @@ export declare const Dna: z.ZodObject<{
                 surface: "surface";
                 "surface-alt": "surface-alt";
                 "on-surface": "on-surface";
+                "surface-tint": "surface-tint";
+                "surface-inverse": "surface-inverse";
+                "on-surface-inverse": "on-surface-inverse";
+                "surface-brand": "surface-brand";
+                "on-surface-brand": "on-surface-brand";
                 muted: "muted";
                 border: "border";
                 warning: "warning";
@@ -1636,6 +1783,11 @@ export declare const Dna: z.ZodObject<{
                 surface: "surface";
                 "surface-alt": "surface-alt";
                 "on-surface": "on-surface";
+                "surface-tint": "surface-tint";
+                "surface-inverse": "surface-inverse";
+                "on-surface-inverse": "on-surface-inverse";
+                "surface-brand": "surface-brand";
+                "on-surface-brand": "on-surface-brand";
                 muted: "muted";
                 border: "border";
                 warning: "warning";
@@ -1657,6 +1809,11 @@ export declare const Dna: z.ZodObject<{
                 surface: "surface";
                 "surface-alt": "surface-alt";
                 "on-surface": "on-surface";
+                "surface-tint": "surface-tint";
+                "surface-inverse": "surface-inverse";
+                "on-surface-inverse": "on-surface-inverse";
+                "surface-brand": "surface-brand";
+                "on-surface-brand": "on-surface-brand";
                 muted: "muted";
                 border: "border";
                 warning: "warning";
@@ -1701,6 +1858,169 @@ export declare const Dna: z.ZodObject<{
             note: z.ZodOptional<z.ZodString>;
         }, z.core.$strict>>;
     }, z.core.$strict>>>;
+    visual: z.ZodOptional<z.ZodObject<{
+        direction: z.ZodString;
+        tone: z.ZodObject<{
+            contrast: z.ZodNumber;
+            density: z.ZodNumber;
+            ornament: z.ZodNumber;
+            motion: z.ZodNumber;
+        }, z.core.$strict>;
+        avoid: z.ZodDefault<z.ZodArray<z.ZodString>>;
+    }, z.core.$strict>>;
+    composition: z.ZodOptional<z.ZodObject<{
+        align: z.ZodEnum<{
+            start: "start";
+            center: "center";
+        }>;
+        split: z.ZodTuple<[z.ZodNumber, z.ZodNumber], null>;
+        measure: z.ZodObject<{
+            body: z.ZodNumber;
+            lead: z.ZodNumber;
+        }, z.core.$strict>;
+        density: z.ZodEnum<{
+            compact: "compact";
+            regular: "regular";
+            airy: "airy";
+        }>;
+        tones: z.ZodObject<{
+            allowed: z.ZodArray<z.ZodEnum<{
+                base: "base";
+                tint: "tint";
+                inverse: "inverse";
+                brand: "brand";
+            }>>;
+            maxInverse: z.ZodNumber;
+        }, z.core.$strict>;
+        texture: z.ZodOptional<z.ZodObject<{
+            pattern: z.ZodString;
+            tones: z.ZodArray<z.ZodEnum<{
+                tint: "tint";
+                inverse: "inverse";
+                brand: "brand";
+            }>>;
+        }, z.core.$strict>>;
+    }, z.core.$strict>>;
+    containers: z.ZodOptional<z.ZodObject<{
+        list: z.ZodEnum<{
+            card: "card";
+            rule: "rule";
+            plain: "plain";
+        }>;
+        media: z.ZodEnum<{
+            plain: "plain";
+            frame: "frame";
+            bleed: "bleed";
+        }>;
+        quote: z.ZodEnum<{
+            card: "card";
+            rule: "rule";
+            plain: "plain";
+        }>;
+    }, z.core.$strict>>;
+    emphasis: z.ZodOptional<z.ZodObject<{
+        style: z.ZodEnum<{
+            italic: "italic";
+            none: "none";
+            colour: "colour";
+            marker: "marker";
+            underline: "underline";
+        }>;
+        role: z.ZodEnum<{
+            success: "success";
+            primary: "primary";
+            "on-primary": "on-primary";
+            secondary: "secondary";
+            "on-secondary": "on-secondary";
+            accent: "accent";
+            "on-accent": "on-accent";
+            surface: "surface";
+            "surface-alt": "surface-alt";
+            "on-surface": "on-surface";
+            "surface-tint": "surface-tint";
+            "surface-inverse": "surface-inverse";
+            "on-surface-inverse": "on-surface-inverse";
+            "surface-brand": "surface-brand";
+            "on-surface-brand": "on-surface-brand";
+            muted: "muted";
+            border: "border";
+            warning: "warning";
+            danger: "danger";
+        }>;
+    }, z.core.$strict>>;
+    controls: z.ZodOptional<z.ZodObject<{
+        size: z.ZodObject<{
+            sm: z.ZodObject<{
+                value: z.ZodNumber;
+                unit: z.ZodEnum<{
+                    px: "px";
+                    rem: "rem";
+                }>;
+            }, z.core.$strict>;
+            md: z.ZodObject<{
+                value: z.ZodNumber;
+                unit: z.ZodEnum<{
+                    px: "px";
+                    rem: "rem";
+                }>;
+            }, z.core.$strict>;
+            lg: z.ZodObject<{
+                value: z.ZodNumber;
+                unit: z.ZodEnum<{
+                    px: "px";
+                    rem: "rem";
+                }>;
+            }, z.core.$strict>;
+        }, z.core.$strict>;
+        focus: z.ZodObject<{
+            role: z.ZodEnum<{
+                success: "success";
+                primary: "primary";
+                "on-primary": "on-primary";
+                secondary: "secondary";
+                "on-secondary": "on-secondary";
+                accent: "accent";
+                "on-accent": "on-accent";
+                surface: "surface";
+                "surface-alt": "surface-alt";
+                "on-surface": "on-surface";
+                "surface-tint": "surface-tint";
+                "surface-inverse": "surface-inverse";
+                "on-surface-inverse": "on-surface-inverse";
+                "surface-brand": "surface-brand";
+                "on-surface-brand": "on-surface-brand";
+                muted: "muted";
+                border: "border";
+                warning: "warning";
+                danger: "danger";
+            }>;
+            width: z.ZodObject<{
+                value: z.ZodNumber;
+                unit: z.ZodEnum<{
+                    px: "px";
+                    rem: "rem";
+                }>;
+            }, z.core.$strict>;
+            offset: z.ZodObject<{
+                value: z.ZodNumber;
+                unit: z.ZodEnum<{
+                    px: "px";
+                    rem: "rem";
+                }>;
+            }, z.core.$strict>;
+        }, z.core.$strict>;
+        hover: z.ZodObject<{
+            mix: z.ZodNumber;
+        }, z.core.$strict>;
+    }, z.core.$strict>>;
+    details: z.ZodOptional<z.ZodObject<{
+        numerals: z.ZodEnum<{
+            tabular: "tabular";
+            proportional: "proportional";
+            oldstyle: "oldstyle";
+        }>;
+        hangingPunctuation: z.ZodBoolean;
+    }, z.core.$strict>>;
 }, z.core.$strict>;
 export type Dna = z.infer<typeof Dna>;
 export type DnaInput = z.input<typeof Dna>;