@microsoft/atlas-css/dist/tokens.ts

Styles backing the Atlas Design System used by Microsoft's Developer Relations.

// To parse this data:
//
//   import { Convert, AtlasTokens } from "./file";
//
//   const atlasTokens = Convert.toAtlasTokens(json);
//
// These functions will throw an error if the JSON doesn't
// match the expected interface, even if the JSON is valid.

export interface AtlasTokens {
    animation:    Animation;
    border:       Border;
    breakpoints:  Breakpoints;
    colors:       Colors;
    container:    Container;
    direction:    Direction;
    display:      Display;
    focus:        Focus;
    "font-stack": FontStack;
    layout:       Layout;
    palette:      Palette;
    position:     Position;
    schemes:      Schemes;
    shadow:       Shadow;
    spacing:      Spacing;
    themes:       Themes;
    typography:   Typography;
    "z-index":    ZIndex;
}

export interface Animation {
    name:     string;
    location: string;
    tokens:   AnimationTokens;
}

export interface AnimationTokens {
    "$input-timing-function":       string;
    "$input-transition-duration":   string;
    "$nav-bar-transition-duration": string;
}

export interface Border {
    name:     string;
    location: string;
    tokens:   BorderTokens;
}

export interface BorderTokens {
    "$border-width":          string;
    "$border-width-md":       string;
    "$border-width-lg":       string;
    "$border-radius-sm":      string;
    "$border-radius":         string;
    "$border-radius-lg":      string;
    "$border-radius-rounded": string;
}

export interface Breakpoints {
    name:     string;
    location: string;
    tokens:   BreakpointsTokens;
}

export interface BreakpointsTokens {
    "$container-gap":         string;
    "$breakpoint-tablet":     string;
    "$breakpoint-desktop":    string;
    "$breakpoint-widescreen": string;
}

export interface Colors {
    name:     string;
    location: string;
    tokens:   ColorsTokens;
}

export interface ColorsTokens {
    "$white-static":                              string;
    "$black-static":                              string;
    $text:                                        string;
    "$text-subtle":                               string;
    "$text-invert":                               string;
    $hyperlink:                                   string;
    "$hyperlink-hover":                           string;
    "$text-glow-high-contrast":                   string;
    "$box-shadow-color-light":                    string;
    "$box-shadow-color-medium":                   string;
    "$box-shadow-color-heavy":                    string;
    "$box-shadow-color-extra-heavy":              string;
    "$body-background":                           string;
    "$body-background-medium":                    string;
    "$body-background-accent":                    string;
    "$alternate-background":                      string;
    "$alternate-background-medium":               string;
    $overlay:                                     string;
    "$overlay-invert":                            string;
    "$overlay-static":                            string;
    $border:                                      string;
    "$border-accent":                             string;
    "$card-background":                           string;
    "$code-header":                               string;
    "$code-block":                                string;
    "$inline-code":                               string;
    "$control-border":                            string;
    "$control-border-bottom":                     string;
    "$table-header":                              string;
    "$table-row":                                 string;
    "$table-row-header":                          string;
    "$table-border-dark":                         string;
    "$facepile-red":                              string;
    "$facepile-teal":                             string;
    "$facepile-blue":                             string;
    "$gradient-text-purple":                      string;
    "$gradient-text-blue":                        string;
    "$gradient-vivid-start":                      string;
    "$gradient-vivid-end":                        string;
    "$default-hover":                             string;
    "$default-hover-invert":                      string;
    "$border-white-high-contrast":                string;
    "$border-yellow-high-contrast":               string;
    "$code-highlight-background":                 string;
    $visited:                                     string;
    "$selected-background":                       string;
    "$selected-background-subtle":                string;
    "$selected-stroke":                           string;
    "$selected-foreground":                       string;
    "$score-low-off":                             string;
    "$score-low":                                 string;
    "$score-medium-off":                          string;
    "$score-medium":                              string;
    "$score-high-off":                            string;
    "$score-high":                                string;
    $primary:                                     string;
    "$primary-background":                        string;
    "$primary-background-hover":                  string;
    "$primary-background-glow-high-contrast":     string;
    "$primary-dark":                              string;
    "$primary-dark-hover":                        string;
    "$primary-hover":                             string;
    "$primary-active":                            string;
    "$primary-invert":                            string;
    "$primary-box-shadow":                        string;
    "$primary-selected":                          string;
    "$primary-background-selected":               string;
    "$primary-foreground-selected":               string;
    "$primary-foreground-selected-invert":        string;
    "$primary-stroke-selected":                   string;
    $secondary:                                   string;
    "$secondary-background":                      string;
    "$secondary-background-hover":                string;
    "$secondary-background-glow-high-contrast":   string;
    "$secondary-dark":                            string;
    "$secondary-dark-hover":                      string;
    "$secondary-hover":                           string;
    "$secondary-active":                          string;
    "$secondary-invert":                          string;
    "$secondary-box-shadow":                      string;
    "$secondary-background-selected":             string;
    "$secondary-selected":                        string;
    "$secondary-foreground-selected":             string;
    "$secondary-foreground-selected-invert":      string;
    "$secondary-stroke-selected":                 string;
    $tertiary:                                    string;
    "$tertiary-background":                       string;
    "$tertiary-background-hover":                 string;
    "$tertiary-background-glow-high-contrast":    string;
    "$tertiary-dark":                             string;
    "$tertiary-dark-hover":                       string;
    "$tertiary-hover":                            string;
    "$tertiary-active":                           string;
    "$tertiary-invert":                           string;
    "$tertiary-box-shadow":                       string;
    "$tertiary-background-selected":              string;
    "$tertiary-selected":                         string;
    "$tertiary-foreground-selected":              string;
    "$tertiary-foreground-selected-invert":       string;
    "$tertiary-stroke-selected":                  string;
    $success:                                     string;
    "$success-background":                        string;
    "$success-background-hover":                  string;
    "$success-background-glow-high-contrast":     string;
    "$success-dark":                              string;
    "$success-dark-hover":                        string;
    "$success-hover":                             string;
    "$success-active":                            string;
    "$success-invert":                            string;
    "$success-box-shadow":                        string;
    "$success-background-selected":               string;
    "$success-selected":                          string;
    "$success-foreground-selected":               string;
    "$success-foreground-selected-invert":        string;
    "$success-stroke-selected":                   string;
    $info:                                        string;
    "$info-background":                           string;
    "$info-background-hover":                     string;
    "$info-background-glow-high-contrast":        string;
    "$info-dark":                                 string;
    "$info-dark-hover":                           string;
    "$info-hover":                                string;
    "$info-active":                               string;
    "$info-invert":                               string;
    "$info-box-shadow":                           string;
    "$info-background-selected":                  string;
    "$info-selected":                             string;
    "$info-foreground-selected":                  string;
    "$info-foreground-selected-invert":           string;
    "$info-stroke-selected":                      string;
    $warning:                                     string;
    "$warning-background":                        string;
    "$warning-background-hover":                  string;
    "$warning-background-glow-high-contrast":     string;
    "$warning-dark":                              string;
    "$warning-dark-hover":                        string;
    "$warning-hover":                             string;
    "$warning-active":                            string;
    "$warning-invert":                            string;
    "$warning-box-shadow":                        string;
    "$warning-background-selected":               string;
    "$warning-selected":                          string;
    "$warning-foreground-selected":               string;
    "$warning-foreground-selected-invert":        string;
    "$warning-stroke-selected":                   string;
    $danger:                                      string;
    "$danger-background":                         string;
    "$danger-background-hover":                   string;
    "$danger-background-glow-high-contrast":      string;
    "$danger-dark":                               string;
    "$danger-dark-hover":                         string;
    "$danger-hover":                              string;
    "$danger-active":                             string;
    "$danger-invert":                             string;
    "$danger-box-shadow":                         string;
    "$danger-background-selected":                string;
    "$danger-selected":                           string;
    "$danger-foreground-selected":                string;
    "$danger-foreground-selected-invert":         string;
    "$danger-stroke-selected":                    string;
    $colors:                                      ColorsClass;
    "$color-index-base":                          string;
    "$color-index-background":                    string;
    "$color-index-dark":                          string;
    "$color-index-hover":                         string;
    "$color-index-active":                        string;
    "$color-index-invert":                        string;
    "$color-index-box-shadow":                    string;
    "$color-index-background-glow-high-contrast": string;
    "$color-index-background-hover":              string;
    "$color-index-dark-hover":                    string;
    "$color-index-selected":                      string;
    "$color-index-background-selected":           string;
    "$color-index-stroke-selected":               string;
    "$color-index-foreground-selected":           string;
    "$color-index-foreground-selected-invert":    string;
    $gradients:                                   Gradients;
    "$gradient-color-start-index":                string;
    "$gradient-color-end-index":                  string;
}

export interface ColorsClass {
    primary:   string;
    secondary: string;
    tertiary:  string;
    success:   string;
    info:      string;
    warning:   string;
    danger:    string;
}

export interface Gradients {
    vivid:         string;
    "purple-blue": string;
}

export interface Container {
    name:     string;
    location: string;
    tokens:   ContainerTokens;
}

export interface ContainerTokens {
    "$container-query-md": string;
}

export interface Direction {
    name:     string;
    location: string;
    tokens:   DirectionTokens;
}

export interface DirectionTokens {
    "$user-text-direction":        string;
    "$user-left":                  string;
    "$user-right":                 string;
    "$user-translate-x-direction": string;
    $directions:                   Directions;
    "$logical-directions":         Directions;
}

export interface Directions {
    top:    string;
    right:  string;
    bottom: string;
    left:   string;
}

export interface Display {
    name:     string;
    location: string;
    tokens:   DisplayTokens;
}

export interface DisplayTokens {
    $displays: string;
}

export interface Focus {
    name:     string;
    location: string;
    tokens:   FocusTokens;
}

export interface FocusTokens {
    "$focus-width":                string;
    "$focus-style":                string;
    "$focus-outline-offset":       string;
    "$focus-visible-use-polyfill": boolean;
}

export interface FontStack {
    name:     string;
    location: string;
    tokens:   FontStackTokens;
}

export interface FontStackTokens {
    "$monospace-font-stack": string;
    "$normal-font-stack":    string;
    "$quote-font-stack":     string;
}

export interface Layout {
    name:     string;
    location: string;
    tokens:   LayoutTokens;
}

export interface LayoutTokens {
    "$column-gap":                                          string;
    "$large-column-gap":                                    string;
    "$reading-max-width":                                   string;
    "$layout-gap":                                          string;
    "$layout-widescreen-width":                             string;
    "$layout-widescreen-gap":                               string;
    "$layout-gap-custom-property-name":                     string;
    "$layout-gap-scalable-custom-property-name":            string;
    "$layout-flyout-width-name":                            string;
    "$layout-flyout-width-desktop-custom-property-name":    string;
    "$layout-flyout-width-widescreen-custom-property-name": string;
}

export interface Palette {
    name:     string;
    location: string;
    tokens:   { [key: string]: string };
}

export interface Position {
    name:     string;
    location: string;
    tokens:   PositionTokens;
}

export interface PositionTokens {
    $positions: string;
}

export interface Schemes {
    name:     string;
    location: string;
    tokens:   SchemesTokens;
}

export interface SchemesTokens {
    "$color-schemes": ColorSchemes;
}

export interface ColorSchemes {
    light:           string;
    dark:            string;
    "high-contrast": string;
}

export interface Shadow {
    name:     string;
    location: string;
    tokens:   ShadowTokens;
}

export interface ShadowTokens {
    "$box-shadow-light":       string;
    "$box-shadow-medium":      string;
    "$box-shadow-heavy":       string;
    "$box-shadow-extra-heavy": string;
}

export interface Spacing {
    name:     string;
    location: string;
    tokens:   SpacingTokens;
}

export interface SpacingTokens {
    "$layout-0":  string;
    "$layout-1":  string;
    "$layout-2":  string;
    "$layout-3":  string;
    "$layout-4":  string;
    "$layout-5":  string;
    "$layout-6":  string;
    "$layout-7":  string;
    "$layout-8":  string;
    "$spacer-0":  string;
    "$spacer-1":  string;
    "$spacer-2":  string;
    "$spacer-3":  string;
    "$spacer-4":  string;
    "$spacer-5":  string;
    "$spacer-6":  string;
    "$spacer-7":  string;
    "$spacer-8":  string;
    "$spacer-9":  string;
    "$spacer-10": string;
}

export interface Themes {
    name:     string;
    location: string;
    tokens:   ThemesTokens;
}

export interface ThemesTokens {
    $themes: ThemesClass;
}

export interface ThemesClass {
    light:           { [key: string]: string };
    dark:            { [key: string]: string };
    "high-contrast": { [key: string]: string };
}

export interface Typography {
    name:     string;
    location: string;
    tokens:   TypographyTokens;
}

export interface TypographyTokens {
    "$document-font-size":    string;
    "$font-size-9":           string;
    "$font-size-8":           string;
    "$font-size-7":           string;
    "$font-size-6":           string;
    "$font-size-5":           string;
    "$font-size-4":           string;
    "$font-size-3":           string;
    "$font-size-2":           string;
    "$font-size-1":           string;
    "$font-size-0":           string;
    "$weight-light":          string;
    "$weight-semilight":      string;
    "$weight-normal":         string;
    "$weight-semibold":       string;
    "$weight-bold":           string;
    "$letter-spacing-medium": string;
    "$letter-spacing-wide":   string;
    "$line-height-normal":    string;
}

export interface ZIndex {
    name:     string;
    location: string;
    tokens:   ZIndexTokens;
}

export interface ZIndexTokens {
    "$zindex-active":         string;
    "$zindex-hover":          string;
    "$zindex-focus":          string;
    "$zindex-multi":          string;
    "$zindex-dropdown":       string;
    "$zindex-sticky":         string;
    "$zindex-fixed":          string;
    "$zindex-modal-backdrop": string;
    "$zindex-modal":          string;
    "$zindex-popover":        string;
    "$zindex-tooltip":        string;
    "$zindex-stretched-link": string;
}

// Converts JSON strings to/from your types
// and asserts the results of JSON.parse at runtime
export class Convert {
    public static toAtlasTokens(json: string): AtlasTokens {
        return cast(JSON.parse(json), r("AtlasTokens"));
    }

    public static atlasTokensToJson(value: AtlasTokens): string {
        return JSON.stringify(uncast(value, r("AtlasTokens")), null, 2);
    }
}

function invalidValue(typ: any, val: any, key: any, parent: any = ''): never {
    const prettyTyp = prettyTypeName(typ);
    const parentText = parent ? ` on ${parent}` : '';
    const keyText = key ? ` for key "${key}"` : '';
    throw Error(`Invalid value${keyText}${parentText}. Expected ${prettyTyp} but got ${JSON.stringify(val)}`);
}

function prettyTypeName(typ: any): string {
    if (Array.isArray(typ)) {
        if (typ.length === 2 && typ[0] === undefined) {
            return `an optional ${prettyTypeName(typ[1])}`;
        } else {
            return `one of [${typ.map(a => { return prettyTypeName(a); }).join(", ")}]`;
        }
    } else if (typeof typ === "object" && typ.literal !== undefined) {
        return typ.literal;
    } else {
        return typeof typ;
    }
}

function jsonToJSProps(typ: any): any {
    if (typ.jsonToJS === undefined) {
        const map: any = {};
        typ.props.forEach((p: any) => map[p.json] = { key: p.js, typ: p.typ });
        typ.jsonToJS = map;
    }
    return typ.jsonToJS;
}

function jsToJSONProps(typ: any): any {
    if (typ.jsToJSON === undefined) {
        const map: any = {};
        typ.props.forEach((p: any) => map[p.js] = { key: p.json, typ: p.typ });
        typ.jsToJSON = map;
    }
    return typ.jsToJSON;
}

function transform(val: any, typ: any, getProps: any, key: any = '', parent: any = ''): any {
    function transformPrimitive(typ: string, val: any): any {
        if (typeof typ === typeof val) return val;
        return invalidValue(typ, val, key, parent);
    }

    function transformUnion(typs: any[], val: any): any {
        // val must validate against one typ in typs
        const l = typs.length;
        for (let i = 0; i < l; i++) {
            const typ = typs[i];
            try {
                return transform(val, typ, getProps);
            } catch (_) {}
        }
        return invalidValue(typs, val, key, parent);
    }

    function transformEnum(cases: string[], val: any): any {
        if (cases.indexOf(val) !== -1) return val;
        return invalidValue(cases.map(a => { return l(a); }), val, key, parent);
    }

    function transformArray(typ: any, val: any): any {
        // val must be an array with no invalid elements
        if (!Array.isArray(val)) return invalidValue(l("array"), val, key, parent);
        return val.map(el => transform(el, typ, getProps));
    }

    function transformDate(val: any): any {
        if (val === null) {
            return null;
        }
        const d = new Date(val);
        if (isNaN(d.valueOf())) {
            return invalidValue(l("Date"), val, key, parent);
        }
        return d;
    }

    function transformObject(props: { [k: string]: any }, additional: any, val: any): any {
        if (val === null || typeof val !== "object" || Array.isArray(val)) {
            return invalidValue(l(ref || "object"), val, key, parent);
        }
        const result: any = {};
        Object.getOwnPropertyNames(props).forEach(key => {
            const prop = props[key];
            const v = Object.prototype.hasOwnProperty.call(val, key) ? val[key] : undefined;
            result[prop.key] = transform(v, prop.typ, getProps, key, ref);
        });
        Object.getOwnPropertyNames(val).forEach(key => {
            if (!Object.prototype.hasOwnProperty.call(props, key)) {
                result[key] = transform(val[key], additional, getProps, key, ref);
            }
        });
        return result;
    }

    if (typ === "any") return val;
    if (typ === null) {
        if (val === null) return val;
        return invalidValue(typ, val, key, parent);
    }
    if (typ === false) return invalidValue(typ, val, key, parent);
    let ref: any = undefined;
    while (typeof typ === "object" && typ.ref !== undefined) {
        ref = typ.ref;
        typ = typeMap[typ.ref];
    }
    if (Array.isArray(typ)) return transformEnum(typ, val);
    if (typeof typ === "object") {
        return typ.hasOwnProperty("unionMembers") ? transformUnion(typ.unionMembers, val)
            : typ.hasOwnProperty("arrayItems")    ? transformArray(typ.arrayItems, val)
            : typ.hasOwnProperty("props")         ? transformObject(getProps(typ), typ.additional, val)
            : invalidValue(typ, val, key, parent);
    }
    // Numbers can be parsed by Date but shouldn't be.
    if (typ === Date && typeof val !== "number") return transformDate(val);
    return transformPrimitive(typ, val);
}

function cast<T>(val: any, typ: any): T {
    return transform(val, typ, jsonToJSProps);
}

function uncast<T>(val: T, typ: any): any {
    return transform(val, typ, jsToJSONProps);
}

function l(typ: any) {
    return { literal: typ };
}

function a(typ: any) {
    return { arrayItems: typ };
}

function u(...typs: any[]) {
    return { unionMembers: typs };
}

function o(props: any[], additional: any) {
    return { props, additional };
}

function m(additional: any) {
    return { props: [], additional };
}

function r(name: string) {
    return { ref: name };
}

const typeMap: any = {
    "AtlasTokens": o([
        { json: "animation", js: "animation", typ: r("Animation") },
        { json: "border", js: "border", typ: r("Border") },
        { json: "breakpoints", js: "breakpoints", typ: r("Breakpoints") },
        { json: "colors", js: "colors", typ: r("Colors") },
        { json: "container", js: "container", typ: r("Container") },
        { json: "direction", js: "direction", typ: r("Direction") },
        { json: "display", js: "display", typ: r("Display") },
        { json: "focus", js: "focus", typ: r("Focus") },
        { json: "font-stack", js: "font-stack", typ: r("FontStack") },
        { json: "layout", js: "layout", typ: r("Layout") },
        { json: "palette", js: "palette", typ: r("Palette") },
        { json: "position", js: "position", typ: r("Position") },
        { json: "schemes", js: "schemes", typ: r("Schemes") },
        { json: "shadow", js: "shadow", typ: r("Shadow") },
        { json: "spacing", js: "spacing", typ: r("Spacing") },
        { json: "themes", js: "themes", typ: r("Themes") },
        { json: "typography", js: "typography", typ: r("Typography") },
        { json: "z-index", js: "z-index", typ: r("ZIndex") },
    ], false),
    "Animation": o([
        { json: "name", js: "name", typ: "" },
        { json: "location", js: "location", typ: "" },
        { json: "tokens", js: "tokens", typ: r("AnimationTokens") },
    ], false),
    "AnimationTokens": o([
        { json: "$input-timing-function", js: "$input-timing-function", typ: "" },
        { json: "$input-transition-duration", js: "$input-transition-duration", typ: "" },
        { json: "$nav-bar-transition-duration", js: "$nav-bar-transition-duration", typ: "" },
    ], false),
    "Border": o([
        { json: "name", js: "name", typ: "" },
        { json: "location", js: "location", typ: "" },
        { json: "tokens", js: "tokens", typ: r("BorderTokens") },
    ], false),
    "BorderTokens": o([
        { json: "$border-width", js: "$border-width", typ: "" },
        { json: "$border-width-md", js: "$border-width-md", typ: "" },
        { json: "$border-width-lg", js: "$border-width-lg", typ: "" },
        { json: "$border-radius-sm", js: "$border-radius-sm", typ: "" },
        { json: "$border-radius", js: "$border-radius", typ: "" },
        { json: "$border-radius-lg", js: "$border-radius-lg", typ: "" },
        { json: "$border-radius-rounded", js: "$border-radius-rounded", typ: "" },
    ], false),
    "Breakpoints": o([
        { json: "name", js: "name", typ: "" },
        { json: "location", js: "location", typ: "" },
        { json: "tokens", js: "tokens", typ: r("BreakpointsTokens") },
    ], false),
    "BreakpointsTokens": o([
        { json: "$container-gap", js: "$container-gap", typ: "" },
        { json: "$breakpoint-tablet", js: "$breakpoint-tablet", typ: "" },
        { json: "$breakpoint-desktop", js: "$breakpoint-desktop", typ: "" },
        { json: "$breakpoint-widescreen", js: "$breakpoint-widescreen", typ: "" },
    ], false),
    "Colors": o([
        { json: "name", js: "name", typ: "" },
        { json: "location", js: "location", typ: "" },
        { json: "tokens", js: "tokens", typ: r("ColorsTokens") },
    ], false),
    "ColorsTokens": o([
        { json: "$white-static", js: "$white-static", typ: "" },
        { json: "$black-static", js: "$black-static", typ: "" },
        { json: "$text", js: "$text", typ: "" },
        { json: "$text-subtle", js: "$text-subtle", typ: "" },
        { json: "$text-invert", js: "$text-invert", typ: "" },
        { json: "$hyperlink", js: "$hyperlink", typ: "" },
        { json: "$hyperlink-hover", js: "$hyperlink-hover", typ: "" },
        { json: "$text-glow-high-contrast", js: "$text-glow-high-contrast", typ: "" },
        { json: "$box-shadow-color-light", js: "$box-shadow-color-light", typ: "" },
        { json: "$box-shadow-color-medium", js: "$box-shadow-color-medium", typ: "" },
        { json: "$box-shadow-color-heavy", js: "$box-shadow-color-heavy", typ: "" },
        { json: "$box-shadow-color-extra-heavy", js: "$box-shadow-color-extra-heavy", typ: "" },
        { json: "$body-background", js: "$body-background", typ: "" },
        { json: "$body-background-medium", js: "$body-background-medium", typ: "" },
        { json: "$body-background-accent", js: "$body-background-accent", typ: "" },
        { json: "$alternate-background", js: "$alternate-background", typ: "" },
        { json: "$alternate-background-medium", js: "$alternate-background-medium", typ: "" },
        { json: "$overlay", js: "$overlay", typ: "" },
        { json: "$overlay-invert", js: "$overlay-invert", typ: "" },
        { json: "$overlay-static", js: "$overlay-static", typ: "" },
        { json: "$border", js: "$border", typ: "" },
        { json: "$border-accent", js: "$border-accent", typ: "" },
        { json: "$card-background", js: "$card-background", typ: "" },
        { json: "$code-header", js: "$code-header", typ: "" },
        { json: "$code-block", js: "$code-block", typ: "" },
        { json: "$inline-code", js: "$inline-code", typ: "" },
        { json: "$control-border", js: "$control-border", typ: "" },
        { json: "$control-border-bottom", js: "$control-border-bottom", typ: "" },
        { json: "$table-header", js: "$table-header", typ: "" },
        { json: "$table-row", js: "$table-row", typ: "" },
        { json: "$table-row-header", js: "$table-row-header", typ: "" },
        { json: "$table-border-dark", js: "$table-border-dark", typ: "" },
        { json: "$facepile-red", js: "$facepile-red", typ: "" },
        { json: "$facepile-teal", js: "$facepile-teal", typ: "" },
        { json: "$facepile-blue", js: "$facepile-blue", typ: "" },
        { json: "$gradient-text-purple", js: "$gradient-text-purple", typ: "" },
        { json: "$gradient-text-blue", js: "$gradient-text-blue", typ: "" },
        { json: "$gradient-vivid-start", js: "$gradient-vivid-start", typ: "" },
        { json: "$gradient-vivid-end", js: "$gradient-vivid-end", typ: "" },
        { json: "$default-hover", js: "$default-hover", typ: "" },
        { json: "$default-hover-invert", js: "$default-hover-invert", typ: "" },
        { json: "$border-white-high-contrast", js: "$border-white-high-contrast", typ: "" },
        { json: "$border-yellow-high-contrast", js: "$border-yellow-high-contrast", typ: "" },
        { json: "$code-highlight-background", js: "$code-highlight-background", typ: "" },
        { json: "$visited", js: "$visited", typ: "" },
        { json: "$selected-background", js: "$selected-background", typ: "" },
        { json: "$selected-background-subtle", js: "$selected-background-subtle", typ: "" },
        { json: "$selected-stroke", js: "$selected-stroke", typ: "" },
        { json: "$selected-foreground", js: "$selected-foreground", typ: "" },
        { json: "$score-low-off", js: "$score-low-off", typ: "" },
        { json: "$score-low", js: "$score-low", typ: "" },
        { json: "$score-medium-off", js: "$score-medium-off", typ: "" },
        { json: "$score-medium", js: "$score-medium", typ: "" },
        { json: "$score-high-off", js: "$score-high-off", typ: "" },
        { json: "$score-high", js: "$score-high", typ: "" },
        { json: "$primary", js: "$primary", typ: "" },
        { json: "$primary-background", js: "$primary-background", typ: "" },
        { json: "$primary-background-hover", js: "$primary-background-hover", typ: "" },
        { json: "$primary-background-glow-high-contrast", js: "$primary-background-glow-high-contrast", typ: "" },
        { json: "$primary-dark", js: "$primary-dark", typ: "" },
        { json: "$primary-dark-hover", js: "$primary-dark-hover", typ: "" },
        { json: "$primary-hover", js: "$primary-hover", typ: "" },
        { json: "$primary-active", js: "$primary-active", typ: "" },
        { json: "$primary-invert", js: "$primary-invert", typ: "" },
        { json: "$primary-box-shadow", js: "$primary-box-shadow", typ: "" },
        { json: "$primary-selected", js: "$primary-selected", typ: "" },
        { json: "$primary-background-selected", js: "$primary-background-selected", typ: "" },
        { json: "$primary-foreground-selected", js: "$primary-foreground-selected", typ: "" },
        { json: "$primary-foreground-selected-invert", js: "$primary-foreground-selected-invert", typ: "" },
        { json: "$primary-stroke-selected", js: "$primary-stroke-selected", typ: "" },
        { json: "$secondary", js: "$secondary", typ: "" },
        { json: "$secondary-background", js: "$secondary-background", typ: "" },
        { json: "$secondary-background-hover", js: "$secondary-background-hover", typ: "" },
        { json: "$secondary-background-glow-high-contrast", js: "$secondary-background-glow-high-contrast", typ: "" },
        { json: "$secondary-dark", js: "$secondary-dark", typ: "" },
        { json: "$secondary-dark-hover", js: "$secondary-dark-hover", typ: "" },
        { json: "$secondary-hover", js: "$secondary-hover", typ: "" },
        { json: "$secondary-active", js: "$secondary-active", typ: "" },
        { json: "$secondary-invert", js: "$secondary-invert", typ: "" },
        { json: "$secondary-box-shadow", js: "$secondary-box-shadow", typ: "" },
        { json: "$secondary-background-selected", js: "$secondary-background-selected", typ: "" },
        { json: "$secondary-selected", js: "$secondary-selected", typ: "" },
        { json: "$secondary-foreground-selected", js: "$secondary-foreground-selected", typ: "" },
        { json: "$secondary-foreground-selected-invert", js: "$secondary-foreground-selected-invert", typ: "" },
        { json: "$secondary-stroke-selected", js: "$secondary-stroke-selected", typ: "" },
        { json: "$tertiary", js: "$tertiary", typ: "" },
        { json: "$tertiary-background", js: "$tertiary-background", typ: "" },
        { json: "$tertiary-background-hover", js: "$tertiary-background-hover", typ: "" },
        { json: "$tertiary-background-glow-high-contrast", js: "$tertiary-background-glow-high-contrast", typ: "" },
        { json: "$tertiary-dark", js: "$tertiary-dark", typ: "" },
        { json: "$tertiary-dark-hover", js: "$tertiary-dark-hover", typ: "" },
        { json: "$tertiary-hover", js: "$tertiary-hover", typ: "" },
        { json: "$tertiary-active", js: "$tertiary-active", typ: "" },
        { json: "$tertiary-invert", js: "$tertiary-invert", typ: "" },
        { json: "$tertiary-box-shadow", js: "$tertiary-box-shadow", typ: "" },
        { json: "$tertiary-background-selected", js: "$tertiary-background-selected", typ: "" },
        { json: "$tertiary-selected", js: "$tertiary-selected", typ: "" },
        { json: "$tertiary-foreground-selected", js: "$tertiary-foreground-selected", typ: "" },
        { json: "$tertiary-foreground-selected-invert", js: "$tertiary-foreground-selected-invert", typ: "" },
        { json: "$tertiary-stroke-selected", js: "$tertiary-stroke-selected", typ: "" },
        { json: "$success", js: "$success", typ: "" },
        { json: "$success-background", js: "$success-background", typ: "" },
        { json: "$success-background-hover", js: "$success-background-hover", typ: "" },
        { json: "$success-background-glow-high-contrast", js: "$success-background-glow-high-contrast", typ: "" },
        { json: "$success-dark", js: "$success-dark", typ: "" },
        { json: "$success-dark-hover", js: "$success-dark-hover", typ: "" },
        { json: "$success-hover", js: "$success-hover", typ: "" },
        { json: "$success-active", js: "$success-active", typ: "" },
        { json: "$success-invert", js: "$success-invert", typ: "" },
        { json: "$success-box-shadow", js: "$success-box-shadow", typ: "" },
        { json: "$success-background-selected", js: "$success-background-selected", typ: "" },
        { json: "$success-selected", js: "$success-selected", typ: "" },
        { json: "$success-foreground-selected", js: "$success-foreground-selected", typ: "" },
        { json: "$success-foreground-selected-invert", js: "$success-foreground-selected-invert", typ: "" },
        { json: "$success-stroke-selected", js: "$success-stroke-selected", typ: "" },
        { json: "$info", js: "$info", typ: "" },
        { json: "$info-background", js: "$info-background", typ: "" },
        { json: "$info-background-hover", js: "$info-background-hover", typ: "" },
        { json: "$info-background-glow-high-contrast", js: "$info-background-glow-high-contrast", typ: "" },
        { json: "$info-dark", js: "$info-dark", typ: "" },
        { json: "$info-dark-hover", js: "$info-dark-hover", typ: "" },
        { json: "$info-hover", js: "$info-hover", typ: "" },
        { json: "$info-active", js: "$info-active", typ: "" },
        { json: "$info-invert", js: "$info-invert", typ: "" },
        { json: "$info-box-shadow", js: "$info-box-shadow", typ: "" },
        { json: "$info-background-selected", js: "$info-background-selected", typ: "" },
        { json: "$info-selected", js: "$info-selected", typ: "" },
        { json: "$info-foreground-selected", js: "$info-foreground-selected", typ: "" },
        { json: "$info-foreground-selected-invert", js: "$info-foreground-selected-invert", typ: "" },
        { json: "$info-stroke-selected", js: "$info-stroke-selected", typ: "" },
        { json: "$warning", js: "$warning", typ: "" },
        { json: "$warning-background", js: "$warning-background", typ: "" },
        { json: "$warning-background-hover", js: "$warning-background-hover", typ: "" },
        { json: "$warning-background-glow-high-contrast", js: "$warning-background-glow-high-contrast", typ: "" },
        { json: "$warning-dark", js: "$warning-dark", typ: "" },
        { json: "$warning-dark-hover", js: "$warning-dark-hover", typ: "" },
        { json: "$warning-hover", js: "$warning-hover", typ: "" },
        { json: "$warning-active", js: "$warning-active", typ: "" },
        { json: "$warning-invert", js: "$warning-invert", typ: "" },
        { json: "$warning-box-shadow", js: "$warning-box-shadow", typ: "" },
        { json: "$warning-background-selected", js: "$warning-background-selected", typ: "" },
        { json: "$warning-selected", js: "$warning-selected", typ: "" },
        { json: "$warning-foreground-selected", js: "$warning-foreground-selected", typ: "" },
        { json: "$warning-foreground-selected-invert", js: "$warning-foreground-selected-invert", typ: "" },
        { json: "$warning-stroke-selected", js: "$warning-stroke-selected", typ: "" },
        { json: "$danger", js: "$danger", typ: "" },
        { json: "$danger-background", js: "$danger-background", typ: "" },
        { json: "$danger-background-hover", js: "$danger-background-hover", typ: "" },
        { json: "$danger-background-glow-high-contrast", js: "$danger-background-glow-high-contrast", typ: "" },
        { json: "$danger-dark", js: "$danger-dark", typ: "" },
        { json: "$danger-dark-hover", js: "$danger-dark-hover", typ: "" },
        { json: "$danger-hover", js: "$danger-hover", typ: "" },
        { json: "$danger-active", js: "$danger-active", typ: "" },
        { json: "$danger-invert", js: "$danger-invert", typ: "" },
        { json: "$danger-box-shadow", js: "$danger-box-shadow", typ: "" },
        { json: "$danger-background-selected", js: "$danger-background-selected", typ: "" },
        { json: "$danger-selected", js: "$danger-selected", typ: "" },
        { json: "$danger-foreground-selected", js: "$danger-foreground-selected", typ: "" },
        { json: "$danger-foreground-selected-invert", js: "$danger-foreground-selected-invert", typ: "" },
        { json: "$danger-stroke-selected", js: "$danger-stroke-selected", typ: "" },
        { json: "$colors", js: "$colors", typ: r("ColorsClass") },
        { json: "$color-index-base", js: "$color-index-base", typ: "" },
        { json: "$color-index-background", js: "$color-index-background", typ: "" },
        { json: "$color-index-dark", js: "$color-index-dark", typ: "" },
        { json: "$color-index-hover", js: "$color-index-hover", typ: "" },
        { json: "$color-index-active", js: "$color-index-active", typ: "" },
        { json: "$color-index-invert", js: "$color-index-invert", typ: "" },
        { json: "$color-index-box-shadow", js: "$color-index-box-shadow", typ: "" },
        { json: "$color-index-background-glow-high-contrast", js: "$color-index-background-glow-high-contrast", typ: "" },
        { json: "$color-index-background-hover", js: "$color-index-background-hover", typ: "" },
        { json: "$color-index-dark-hover", js: "$color-index-dark-hover", typ: "" },
        { json: "$color-index-selected", js: "$color-index-selected", typ: "" },
        { json: "$color-index-background-selected", js: "$color-index-background-selected", typ: "" },
        { json: "$color-index-stroke-selected", js: "$color-index-stroke-selected", typ: "" },
        { json: "$color-index-foreground-selected", js: "$color-index-foreground-selected", typ: "" },
        { json: "$color-index-foreground-selected-invert", js: "$color-index-foreground-selected-invert", typ: "" },
        { json: "$gradients", js: "$gradients", typ: r("Gradients") },
        { json: "$gradient-color-start-index", js: "$gradient-color-start-index", typ: "" },
        { json: "$gradient-color-end-index", js: "$gradient-color-end-index", typ: "" },
    ], false),
    "ColorsClass": o([
        { json: "primary", js: "primary", typ: "" },
        { json: "secondary", js: "secondary", typ: "" },
        { json: "tertiary", js: "tertiary", typ: "" },
        { json: "success", js: "success", typ: "" },
        { json: "info", js: "info", typ: "" },
        { json: "warning", js: "warning", typ: "" },
        { json: "danger", js: "danger", typ: "" },
    ], false),
    "Gradients": o([
        { json: "vivid", js: "vivid", typ: "" },
        { json: "purple-blue", js: "purple-blue", typ: "" },
    ], false),
    "Container": o([
        { json: "name", js: "name", typ: "" },
        { json: "location", js: "location", typ: "" },
        { json: "tokens", js: "tokens", typ: r("ContainerTokens") },
    ], false),
    "ContainerTokens": o([
        { json: "$container-query-md", js: "$container-query-md", typ: "" },
    ], false),
    "Direction": o([
        { json: "name", js: "name", typ: "" },
        { json: "location", js: "location", typ: "" },
        { json: "tokens", js: "tokens", typ: r("DirectionTokens") },
    ], false),
    "DirectionTokens": o([
        { json: "$user-text-direction", js: "$user-text-direction", typ: "" },
        { json: "$user-left", js: "$user-left", typ: "" },
        { json: "$user-right", js: "$user-right", typ: "" },
        { json: "$user-translate-x-direction", js: "$user-translate-x-direction", typ: "" },
        { json: "$directions", js: "$directions", typ: r("Directions") },
        { json: "$logical-directions", js: "$logical-directions", typ: r("Directions") },
    ], false),
    "Directions": o([
        { json: "top", js: "top", typ: "" },
        { json: "right", js: "right", typ: "" },
        { json: "bottom", js: "bottom", typ: "" },
        { json: "left", js: "left", typ: "" },
    ], false),
    "Display": o([
        { json: "name", js: "name", typ: "" },
        { json: "location", js: "location", typ: "" },
        { json: "tokens", js: "tokens", typ: r("DisplayTokens") },
    ], false),
    "DisplayTokens": o([
        { json: "$displays", js: "$displays", typ: "" },
    ], false),
    "Focus": o([
        { json: "name", js: "name", typ: "" },
        { json: "location", js: "location", typ: "" },
        { json: "tokens", js: "tokens", typ: r("FocusTokens") },
    ], false),
    "FocusTokens": o([
        { json: "$focus-width", js: "$focus-width", typ: "" },
        { json: "$focus-style", js: "$focus-style", typ: "" },
        { json: "$focus-outline-offset", js: "$focus-outline-offset", typ: "" },
        { json: "$focus-visible-use-polyfill", js: "$focus-visible-use-polyfill", typ: true },
    ], false),
    "FontStack": o([
        { json: "name", js: "name", typ: "" },
        { json: "location", js: "location", typ: "" },
        { json: "tokens", js: "tokens", typ: r("FontStackTokens") },
    ], false),
    "FontStackTokens": o([
        { json: "$monospace-font-stack", js: "$monospace-font-stack", typ: "" },
        { json: "$normal-font-stack", js: "$normal-font-stack", typ: "" },
        { json: "$quote-font-stack", js: "$quote-font-stack", typ: "" },
    ], false),
    "Layout": o([
        { json: "name", js: "name", typ: "" },
        { json: "location", js: "location", typ: "" },
        { json: "tokens", js: "tokens", typ: r("LayoutTokens") },
    ], false),
    "LayoutTokens": o([
        { json: "$column-gap", js: "$column-gap", typ: "" },
        { json: "$large-column-gap", js: "$large-column-gap", typ: "" },
        { json: "$reading-max-width", js: "$reading-max-width", typ: "" },
        { json: "$layout-gap", js: "$layout-gap", typ: "" },
        { json: "$layout-widescreen-width", js: "$layout-widescreen-width", typ: "" },
        { json: "$layout-widescreen-gap", js: "$layout-widescreen-gap", typ: "" },
        { json: "$layout-gap-custom-property-name", js: "$layout-gap-custom-property-name", typ: "" },
        { json: "$layout-gap-scalable-custom-property-name", js: "$layout-gap-scalable-custom-property-name", typ: "" },
        { json: "$layout-flyout-width-name", js: "$layout-flyout-width-name", typ: "" },
        { json: "$layout-flyout-width-desktop-custom-property-name", js: "$layout-flyout-width-desktop-custom-property-name", typ: "" },
        { json: "$layout-flyout-width-widescreen-custom-property-name", js: "$layout-flyout-width-widescreen-custom-property-name", typ: "" },
    ], false),
    "Palette": o([
        { json: "name", js: "name", typ: "" },
        { json: "location", js: "location", typ: "" },
        { json: "tokens", js: "tokens", typ: m("") },
    ], false),
    "Position": o([
        { json: "name", js: "name", typ: "" },
        { json: "location", js: "location", typ: "" },
        { json: "tokens", js: "tokens", typ: r("PositionTokens") },
    ], false),
    "PositionTokens": o([
        { json: "$positions", js: "$positions", typ: "" },
    ], false),
    "Schemes": o([
        { json: "name", js: "name", typ: "" },
        { json: "location", js: "location", typ: "" },
        { json: "tokens", js: "tokens", typ: r("SchemesTokens") },
    ], false),
    "SchemesTokens": o([
        { json: "$color-schemes", js: "$color-schemes", typ: r("ColorSchemes") },
    ], false),
    "ColorSchemes": o([
        { json: "light", js: "light", typ: "" },
        { json: "dark", js: "dark", typ: "" },
        { json: "high-contrast", js: "high-contrast", typ: "" },
    ], false),
    "Shadow": o([
        { json: "name", js: "name", typ: "" },
        { json: "location", js: "location", typ: "" },
        { json: "tokens", js: "tokens", typ: r("ShadowTokens") },
    ], false),
    "ShadowTokens": o([
        { json: "$box-shadow-light", js: "$box-shadow-light", typ: "" },
        { json: "$box-shadow-medium", js: "$box-shadow-medium", typ: "" },
        { json: "$box-shadow-heavy", js: "$box-shadow-heavy", typ: "" },
        { json: "$box-shadow-extra-heavy", js: "$box-shadow-extra-heavy", typ: "" },
    ], false),
    "Spacing": o([
        { json: "name", js: "name", typ: "" },
        { json: "location", js: "location", typ: "" },
        { json: "tokens", js: "tokens", typ: r("SpacingTokens") },
    ], false),
    "SpacingTokens": o([
        { json: "$layout-0", js: "$layout-0", typ: "" },
        { json: "$layout-1", js: "$layout-1", typ: "" },
        { json: "$layout-2", js: "$layout-2", typ: "" },
        { json: "$layout-3", js: "$layout-3", typ: "" },
        { json: "$layout-4", js: "$layout-4", typ: "" },
        { json: "$layout-5", js: "$layout-5", typ: "" },
        { json: "$layout-6", js: "$layout-6", typ: "" },
        { json: "$layout-7", js: "$layout-7", typ: "" },
        { json: "$layout-8", js: "$layout-8", typ: "" },
        { json: "$spacer-0", js: "$spacer-0", typ: "" },
        { json: "$spacer-1", js: "$spacer-1", typ: "" },
        { json: "$spacer-2", js: "$spacer-2", typ: "" },
        { json: "$spacer-3", js: "$spacer-3", typ: "" },
        { json: "$spacer-4", js: "$spacer-4", typ: "" },
        { json: "$spacer-5", js: "$spacer-5", typ: "" },
        { json: "$spacer-6", js: "$spacer-6", typ: "" },
        { json: "$spacer-7", js: "$spacer-7", typ: "" },
        { json: "$spacer-8", js: "$spacer-8", typ: "" },
        { json: "$spacer-9", js: "$spacer-9", typ: "" },
        { json: "$spacer-10", js: "$spacer-10", typ: "" },
    ], false),
    "Themes": o([
        { json: "name", js: "name", typ: "" },
        { json: "location", js: "location", typ: "" },
        { json: "tokens", js: "tokens", typ: r("ThemesTokens") },
    ], false),
    "ThemesTokens": o([
        { json: "$themes", js: "$themes", typ: r("ThemesClass") },
    ], false),
    "ThemesClass": o([
        { json: "light", js: "light", typ: m("") },
        { json: "dark", js: "dark", typ: m("") },
        { json: "high-contrast", js: "high-contrast", typ: m("") },
    ], false),
    "Typography": o([
        { json: "name", js: "name", typ: "" },
        { json: "location", js: "location", typ: "" },
        { json: "tokens", js: "tokens", typ: r("TypographyTokens") },
    ], false),
    "TypographyTokens": o([
        { json: "$document-font-size", js: "$document-font-size", typ: "" },
        { json: "$font-size-9", js: "$font-size-9", typ: "" },
        { json: "$font-size-8", js: "$font-size-8", typ: "" },
        { json: "$font-size-7", js: "$font-size-7", typ: "" },
        { json: "$font-size-6", js: "$font-size-6", typ: "" },
        { json: "$font-size-5", js: "$font-size-5", typ: "" },
        { json: "$font-size-4", js: "$font-size-4", typ: "" },
        { json: "$font-size-3", js: "$font-size-3", typ: "" },
        { json: "$font-size-2", js: "$font-size-2", typ: "" },
        { json: "$font-size-1", js: "$font-size-1", typ: "" },
        { json: "$font-size-0", js: "$font-size-0", typ: "" },
        { json: "$weight-light", js: "$weight-light", typ: "" },