{
  "$schema": "./components.tokens.schema.json",
  "$description": "Component tokens in Design Tokens Community Group (DTCG) format. Aliases point at tokens.json: {color.*}, {size.*}, {spacing.*}, {space.*}, {radius.*}, {fontSize.*} (type ramp), {fontWeight.*}, {shadow.*}, {motion.*}. A token named \"default\" is the unsuffixed value. go generate ./... emits --ct-<component>-<path> custom properties; components/<component>.css reads each behind a --<component>-<path> override.",
  "button": {
    "$description": "Text actions. Default is the Brand-tint secondary; --primary fills with Brand; --ghost is a text link; --sm is the compact size.",
    "$extensions": {
      "app.chitransit": {
        "label": "Button"
      }
    },
    "height": {
      "default": {
        "$type": "dimension",
        "$value": "{size.minimumTapTarget}"
      },
      "sm": {
        "$type": "dimension",
        "$value": {
          "value": 36,
          "unit": "px"
        }
      }
    },
    "paddingX": {
      "default": {
        "$type": "dimension",
        "$value": {
          "value": 18,
          "unit": "px"
        }
      },
      "sm": {
        "$type": "dimension",
        "$value": "{space.s12}"
      }
    },
    "gap": {
      "$type": "dimension",
      "$value": "{space.s8}"
    },
    "radius": {
      "$type": "dimension",
      "$value": "{radius.card}"
    },
    "fontSize": {
      "default": {
        "$type": "dimension",
        "$value": "{fontSize.body}"
      },
      "sm": {
        "$type": "dimension",
        "$value": "{fontSize.sub}"
      }
    },
    "fontWeight": {
      "$type": "fontWeight",
      "$value": "{fontWeight.semibold}"
    },
    "iconSize": {
      "$type": "dimension",
      "$value": {
        "value": 18,
        "unit": "px"
      }
    },
    "background": {
      "default": {
        "$type": "color",
        "$value": "{color.accentTint}"
      },
      "primary": {
        "$type": "color",
        "$value": "{color.accent}"
      }
    },
    "color": {
      "default": {
        "$type": "color",
        "$value": "{color.accent}"
      },
      "primary": {
        "$type": "color",
        "$value": "{color.accentInk}"
      },
      "disabled": {
        "$type": "color",
        "$value": "{color.inactive}"
      }
    }
  },
  "iconButton": {
    "$description": "Round 44pt glyph buttons (live track, favorite, close). aria-pressed=true fills it.",
    "$extensions": {
      "app.chitransit": {
        "label": "Icon button"
      }
    },
    "size": {
      "$type": "dimension",
      "$value": "{size.iconButton}"
    },
    "glyphSize": {
      "$type": "dimension",
      "$value": "{size.controlGlyph}"
    },
    "radius": {
      "$type": "dimension",
      "$value": "{radius.pill}"
    },
    "background": {
      "default": {
        "$type": "color",
        "$value": "{color.accentTint}"
      },
      "pressed": {
        "$type": "color",
        "$value": "{color.accent}"
      }
    },
    "color": {
      "default": {
        "$type": "color",
        "$value": "{color.accent}"
      },
      "pressed": {
        "$type": "color",
        "$value": "{color.accentInk}"
      },
      "disabled": {
        "$type": "color",
        "$value": "{color.inactive}"
      }
    }
  },
  "segmented": {
    "$description": "Mutually exclusive choices. The current segment carries aria-pressed=true, aria-current or aria-selected=true.",
    "$extensions": {
      "app.chitransit": {
        "label": "Segmented control"
      }
    },
    "height": {
      "$type": "dimension",
      "$value": {
        "value": 36,
        "unit": "px"
      }
    },
    "padding": {
      "$type": "dimension",
      "$value": "{space.s2}"
    },
    "gap": {
      "$type": "dimension",
      "$value": "{space.s2}"
    },
    "radius": {
      "$type": "dimension",
      "$value": "{radius.control}"
    },
    "background": {
      "default": {
        "$type": "color",
        "$value": "{color.card2}"
      },
      "selected": {
        "$type": "color",
        "$value": "{color.paper}"
      }
    },
    "segment": {
      "radius": {
        "$type": "dimension",
        "$value": "{radius.segment}"
      },
      "paddingX": {
        "$type": "dimension",
        "$value": "{space.s12}"
      }
    },
    "fontSize": {
      "$type": "dimension",
      "$value": "{fontSize.sub}"
    },
    "fontWeight": {
      "default": {
        "$type": "fontWeight",
        "$value": "{fontWeight.medium}"
      },
      "selected": {
        "$type": "fontWeight",
        "$value": "{fontWeight.semibold}"
      }
    },
    "color": {
      "default": {
        "$type": "color",
        "$value": "{color.muted}"
      },
      "selected": {
        "$type": "color",
        "$value": "{color.ink}"
      }
    },
    "shadow": {
      "selected": {
        "$type": "shadow",
        "$value": "{shadow.control}"
      }
    }
  },
  "chip": {
    "$description": "Small labels: route type, change type, metadata. Variants: --muted, --accent, --solid, --outline, --good, --warn, --alert.",
    "$extensions": {
      "app.chitransit": {
        "label": "Chip"
      }
    },
    "height": {
      "$type": "dimension",
      "$value": {
        "value": 22,
        "unit": "px"
      }
    },
    "paddingX": {
      "$type": "dimension",
      "$value": "{space.s8}"
    },
    "radius": {
      "$type": "dimension",
      "$value": "{radius.chip}"
    },
    "fontSize": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "fontWeight": {
      "$type": "fontWeight",
      "$value": "{fontWeight.semibold}"
    },
    "background": {
      "$type": "color",
      "$value": "{color.card2}"
    },
    "color": {
      "$type": "color",
      "$value": "{color.ink}"
    },
    "outline": {
      "width": {
        "$type": "dimension",
        "$value": "{size.focusRingWidth}"
      }
    }
  },
  "badge": {
    "$description": "Pill-shaped labels with an optional glyph, e.g. a page's status.",
    "$extensions": {
      "app.chitransit": {
        "label": "Badge"
      }
    },
    "height": {
      "$type": "dimension",
      "$value": {
        "value": 30,
        "unit": "px"
      }
    },
    "paddingX": {
      "$type": "dimension",
      "$value": "{space.s12}"
    },
    "gap": {
      "$type": "dimension",
      "$value": "{space.s8}"
    },
    "radius": {
      "$type": "dimension",
      "$value": "{radius.pill}"
    },
    "fontSize": {
      "$type": "dimension",
      "$value": "{fontSize.sub}"
    },
    "fontWeight": {
      "$type": "fontWeight",
      "$value": "{fontWeight.bold}"
    },
    "background": {
      "$type": "color",
      "$value": "{color.accentTint}"
    },
    "color": {
      "$type": "color",
      "$value": "{color.accent}"
    }
  },
  "status": {
    "$description": "A status word first, colour second (Due, Delayed, alerts). --pill adds a tinted background.",
    "$extensions": {
      "app.chitransit": {
        "label": "Status"
      }
    },
    "fontWeight": {
      "$type": "fontWeight",
      "$value": "{fontWeight.bold}"
    },
    "pill": {
      "height": {
        "$type": "dimension",
        "$value": {
          "value": 22,
          "unit": "px"
        }
      },
      "paddingX": {
        "$type": "dimension",
        "$value": "{space.s8}"
      },
      "radius": {
        "$type": "dimension",
        "$value": "{radius.pill}"
      },
      "fontSize": {
        "$type": "dimension",
        "$value": "{fontSize.cap}"
      },
      "tint": {
        "$type": "number",
        "$value": 0.14
      }
    }
  },
  "card": {
    "$description": "The grey card on white, the layout unit. --empty centres a muted message.",
    "$extensions": {
      "app.chitransit": {
        "label": "Card"
      }
    },
    "background": {
      "$type": "color",
      "$value": "{color.card}"
    },
    "radius": {
      "$type": "dimension",
      "$value": "{radius.card}"
    },
    "padding": {
      "$type": "dimension",
      "$value": "{spacing.cardPadding}"
    },
    "gap": {
      "$type": "dimension",
      "$value": "{space.s8}"
    },
    "empty": {
      "paddingY": {
        "$type": "dimension",
        "$value": "{space.s20}"
      },
      "paddingX": {
        "$type": "dimension",
        "$value": "{space.s16}"
      },
      "fontSize": {
        "$type": "dimension",
        "$value": "{fontSize.sub}"
      },
      "color": {
        "$type": "color",
        "$value": "{color.muted}"
      }
    }
  },
  "routeToggle": {
    "$description": "Route filters: a line-colour circle (set --route) or a Brand bus capsule. aria-pressed=true shows the selection ring.",
    "$extensions": {
      "app.chitransit": {
        "label": "Route toggle"
      }
    },
    "size": {
      "default": {
        "$type": "dimension",
        "$value": {
          "value": 40,
          "unit": "px"
        }
      },
      "dense": {
        "$type": "dimension",
        "$value": {
          "value": 34,
          "unit": "px"
        }
      }
    },
    "bus": {
      "minWidth": {
        "$type": "dimension",
        "$value": {
          "value": 56,
          "unit": "px"
        }
      },
      "paddingX": {
        "$type": "dimension",
        "$value": "{space.s14}"
      },
      "radius": {
        "$type": "dimension",
        "$value": "{radius.control}"
      },
      "fontSize": {
        "$type": "dimension",
        "$value": "{fontSize.body}"
      },
      "fontWeight": {
        "$type": "fontWeight",
        "$value": "{fontWeight.bold}"
      }
    },
    "ring": {
      "gap": {
        "$type": "dimension",
        "$value": {
          "value": 3,
          "unit": "px"
        }
      },
      "width": {
        "$type": "dimension",
        "$value": "{size.focusRingWidth}"
      },
      "gapColor": {
        "$type": "color",
        "$value": "{color.paper}"
      },
      "color": {
        "$type": "color",
        "$value": "{color.ink}"
      }
    },
    "duration": {
      "$type": "duration",
      "$value": "{motion.controlDuration}"
    }
  },
  "table": {
    "$description": "Data tables with a muted header row; wrap in .ct-table-wrap to scroll sideways.",
    "$extensions": {
      "app.chitransit": {
        "label": "Table"
      }
    },
    "cell": {
      "paddingY": {
        "$type": "dimension",
        "$value": "{space.s10}"
      },
      "paddingX": {
        "$type": "dimension",
        "$value": "{space.s12}"
      }
    },
    "fontSize": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "head": {
      "fontSize": {
        "$type": "dimension",
        "$value": "{fontSize.cap}"
      },
      "tracking": {
        "$type": "dimension",
        "$value": {
          "value": 0.04,
          "unit": "em"
        },
        "$description": "Letter spacing as a fraction of the font size"
      },
      "color": {
        "$type": "color",
        "$value": "{color.muted}"
      },
      "background": {
        "$type": "color",
        "$value": "{color.card}"
      }
    },
    "rule": {
      "$type": "color",
      "$value": "{color.line}"
    }
  },
  "input": {
    "$description": "Text inputs, selects and the search field (.ct-search with a leading glyph). Pair with .ct-field for a label.",
    "$extensions": {
      "app.chitransit": {
        "label": "Input"
      }
    },
    "height": {
      "$type": "dimension",
      "$value": "{size.searchField}"
    },
    "radius": {
      "$type": "dimension",
      "$value": "{radius.card}"
    },
    "paddingX": {
      "$type": "dimension",
      "$value": "{space.s12}"
    },
    "gap": {
      "$type": "dimension",
      "$value": "{space.s10}"
    },
    "fontSize": {
      "$type": "dimension",
      "$value": "{fontSize.body}"
    },
    "iconSize": {
      "$type": "dimension",
      "$value": {
        "value": 18,
        "unit": "px"
      }
    },
    "background": {
      "$type": "color",
      "$value": "{color.card}"
    },
    "color": {
      "default": {
        "$type": "color",
        "$value": "{color.ink}"
      },
      "placeholder": {
        "$type": "color",
        "$value": "{color.muted}"
      }
    },
    "label": {
      "fontSize": {
        "$type": "dimension",
        "$value": "{fontSize.sub}"
      },
      "fontWeight": {
        "$type": "fontWeight",
        "$value": "{fontWeight.semibold}"
      },
      "color": {
        "$type": "color",
        "$value": "{color.muted}"
      },
      "gap": {
        "$type": "dimension",
        "$value": "{space.s6}"
      }
    }
  },
  "tooltip": {
    "$description": "A short hint on hover or focus: add data-tooltip to any element with .ct-tooltip.",
    "$extensions": {
      "app.chitransit": {
        "label": "Tooltip"
      }
    },
    "background": {
      "$type": "color",
      "$value": "{color.liveBg}"
    },
    "color": {
      "$type": "color",
      "$value": "{color.liveInk}"
    },
    "fontSize": {
      "$type": "dimension",
      "$value": "{fontSize.cap}"
    },
    "fontWeight": {
      "$type": "fontWeight",
      "$value": "{fontWeight.semibold}"
    },
    "paddingY": {
      "$type": "dimension",
      "$value": "{space.s4}"
    },
    "paddingX": {
      "$type": "dimension",
      "$value": "{space.s8}"
    },
    "radius": {
      "$type": "dimension",
      "$value": "{radius.chip}"
    },
    "offset": {
      "$type": "dimension",
      "$value": "{space.s6}"
    },
    "maxWidth": {
      "$type": "dimension",
      "$value": {
        "value": 240,
        "unit": "px"
      }
    },
    "duration": {
      "$type": "duration",
      "$value": "{motion.controlDuration}"
    }
  },
  "spinner": {
    "$description": "Indeterminate loading ring; .ct-icon-spin turns a glyph once (refresh).",
    "$extensions": {
      "app.chitransit": {
        "label": "Spinner"
      }
    },
    "size": {
      "$type": "dimension",
      "$value": {
        "value": 20,
        "unit": "px"
      }
    },
    "strokeWidth": {
      "$type": "dimension",
      "$value": "{size.focusRingWidth}"
    },
    "color": {
      "$type": "color",
      "$value": "{color.accent}"
    },
    "track": {
      "$type": "color",
      "$value": "{color.line}"
    },
    "duration": {
      "$type": "duration",
      "$value": "{motion.spinDuration}"
    }
  },
  "toast": {
    "$description": "Transient confirmation on the live surface. Add .is-visible (or data-visible) to show it.",
    "$extensions": {
      "app.chitransit": {
        "label": "Toast"
      }
    },
    "background": {
      "$type": "color",
      "$value": "{color.liveBg}"
    },
    "color": {
      "$type": "color",
      "$value": "{color.liveInk}"
    },
    "fontSize": {
      "$type": "dimension",
      "$value": "{fontSize.sub}"
    },
    "fontWeight": {
      "$type": "fontWeight",
      "$value": "{fontWeight.semibold}"
    },
    "paddingY": {
      "$type": "dimension",
      "$value": "{space.s10}"
    },
    "paddingX": {
      "$type": "dimension",
      "$value": "{space.s16}"
    },
    "radius": {
      "$type": "dimension",
      "$value": "{radius.pill}"
    },
    "offset": {
      "$type": "dimension",
      "$value": "{space.s24}"
    },
    "duration": {
      "$type": "duration",
      "$value": "{motion.liveSectionDuration}"
    }
  }
}