design.explain

{
  "type": "object",
  "additionalProperties": false,
  "properties": {
    "token": {
      "type": "string",
      "description": "A role (`fg`), a status (`ok`), a state word (`succeeded`), a type step (`meta`), a\npalette entry (`gray-600`), or the custom property any of them becomes (`--mj-fg`)."
    }
  },
  "required": [
    "token"
  ],
  "description": "The input of `design.explain`: one token by name.",
  "title": "ExplainTokenInput"
}

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "The name as declared."
    },
    "kind": {
      "$ref": "#/$defs/TokenKind",
      "description": "What kind of token."
    },
    "about": {
      "type": "string",
      "description": "What it is for, from the declaration."
    },
    "css": {
      "type": "array",
      "items": {
        "type": "string"
      },
      "description": "The custom properties and Tailwind utilities it becomes."
    },
    "parts": {
      "type": "array",
      "items": {
        "$ref": "#/$defs/ColourPart"
      },
      "description": "For a colour token: its parts, each resolved per theme."
    },
    "value": {
      "type": [
        "string",
        "null"
      ],
      "description": "For a scalar token: the value."
    },
    "role": {
      "type": [
        "string",
        "null"
      ],
      "description": "For a state word: the status it is filed under."
    },
    "states": {
      "type": "array",
      "items": {
        "type": "string"
      },
      "description": "For a status: the state words filed under it."
    },
    "aliases": {
      "type": "array",
      "items": {
        "type": "string"
      },
      "description": "The Flowbite names that are synonyms of it."
    },
    "projections": {
      "type": "array",
      "items": {
        "type": "string"
      },
      "description": "The generated files the token reaches."
    }
  },
  "required": [
    "name",
    "kind",
    "about",
    "css",
    "projections"
  ],
  "description": "One token, explained: where it came from, what it resolves to, what reads it.",
  "title": "Token",
  "$defs": {
    "TokenKind": {
      "oneOf": [
        {
          "type": "string",
          "const": "font",
          "description": "A type stack."
        },
        {
          "type": "string",
          "const": "palette",
          "description": "A raw palette entry."
        },
        {
          "type": "string",
          "const": "role",
          "description": "A semantic surface role."
        },
        {
          "type": "string",
          "const": "status",
          "description": "A status meaning."
        },
        {
          "type": "string",
          "const": "state",
          "description": "A state word, filed under a status."
        },
        {
          "type": "string",
          "const": "tone",
          "description": "A tone: a hue for identity, never for meaning."
        },
        {
          "type": "string",
          "const": "type",
          "description": "A step of the type scale."
        },
        {
          "type": "string",
          "const": "tracking",
          "description": "A letter-spacing."
        },
        {
          "type": "string",
          "const": "layout",
          "description": "A shared layout value."
        },
        {
          "type": "string",
          "const": "radius",
          "description": "A corner radius."
        },
        {
          "type": "string",
          "const": "motion",
          "description": "A duration."
        },
        {
          "type": "string",
          "const": "theme",
          "description": "The theme contract."
        }
      ],
      "description": "What kind of thing a token is."
    },
    "ColourPart": {
      "type": "object",
      "properties": {
        "part": {
          "type": "string",
          "description": "`fg`, `bg` or `line`."
        },
        "css": {
          "type": "string",
          "description": "The custom property a surface reads."
        },
        "light": {
          "$ref": "#/$defs/Resolved",
          "description": "In the light theme."
        },
        "dark": {
          "$ref": "#/$defs/Resolved",
          "description": "In the dark theme."
        }
      },
      "required": [
        "part",
        "css",
        "light",
        "dark"
      ],
      "description": "One part of a colour token — a role has one, a status has its text, ground and border."
    },
    "Resolved": {
      "type": "object",
      "properties": {
        "reference": {
          "type": "string",
          "description": "The palette entry or role the declaration named."
        },
        "css": {
          "type": "string",
          "description": "The CSS value a stylesheet gets: the literal of a palette entry, or `var(--mj-<role>)`."
        },
        "literal": {
          "type": "string",
          "description": "The literal after every reference is followed."
        }
      },
      "required": [
        "reference",
        "css",
        "literal"
      ],
      "description": "What a colour reference resolved to."
    }
  }
}