{
  "$description": "Kerbside design tokens, in the Design Tokens Community Group format. Three tiers: primitives (raw values), theme (what a value means, per light and dark) and component (where it is used). Components only ever use theme tokens, so a new theme never touches a component. The build turns this file into CSS custom properties prefixed --kb-.",
  "$extensions": {
    "prefix": "kb",
    "scope": ".kb-app"
  },
  "primitive": {
    "color": {
      "$type": "color",
      "asphalt": {
        "950": {
          "$value": "#101316",
          "$description": "Night road surface"
        },
        "900": {
          "$value": "#171B1F"
        },
        "800": {
          "$value": "#22272C"
        },
        "700": {
          "$value": "#2F353B"
        },
        "600": {
          "$value": "#454C54"
        },
        "500": {
          "$value": "#5F6770"
        },
        "400": {
          "$value": "#8A929B"
        },
        "300": {
          "$value": "#B7BDC3"
        },
        "200": {
          "$value": "#D9DDE1"
        },
        "100": {
          "$value": "#ECEEF0"
        },
        "50": {
          "$value": "#F6F7F8"
        }
      },
      "white": {
        "$value": "#FFFFFF"
      },
      "kerb": {
        "400": {
          "$value": "#FFD23F",
          "$description": "Double yellow line, on dark surfaces only"
        },
        "500": {
          "$value": "#F5C000"
        }
      },
      "go": {
        "600": {
          "$value": "#0B7A3B"
        },
        "400": {
          "$value": "#46C47A"
        }
      },
      "stop": {
        "600": {
          "$value": "#C2271D"
        },
        "400": {
          "$value": "#FF7A6E"
        }
      },
      "sign": {
        "600": {
          "$value": "#1A5FD6",
          "$description": "Focus and links"
        },
        "300": {
          "$value": "#8DB6FF"
        }
      }
    },
    "font": {
      "family": {
        "$type": "fontFamily",
        "text": {
          "$value": [
            "Atkinson Hyperlegible Next",
            "system-ui",
            "-apple-system",
            "Roboto",
            "sans-serif"
          ],
          "$description": "Made by the Braille Institute for low-vision legibility. Chosen for reading a price at a glance, at night, while walking."
        }
      },
      "size": {
        "$type": "dimension",
        "caption": {
          "$value": "13px"
        },
        "footnote": {
          "$value": "15px"
        },
        "body": {
          "$value": "17px",
          "$description": "The iOS default body size"
        },
        "title": {
          "$value": "22px"
        },
        "price": {
          "$value": "34px"
        }
      },
      "weight": {
        "$type": "fontWeight",
        "regular": {
          "$value": 400
        },
        "medium": {
          "$value": 560
        },
        "bold": {
          "$value": 720
        }
      }
    },
    "space": {
      "$type": "dimension",
      "1": {
        "$value": "4px"
      },
      "2": {
        "$value": "8px"
      },
      "3": {
        "$value": "12px"
      },
      "4": {
        "$value": "16px"
      },
      "5": {
        "$value": "20px"
      },
      "6": {
        "$value": "24px"
      },
      "8": {
        "$value": "32px"
      }
    },
    "radius": {
      "$type": "dimension",
      "sheet": {
        "$value": "24px"
      },
      "card": {
        "$value": "16px"
      },
      "button": {
        "$value": "14px"
      },
      "inner": {
        "$value": "8px",
        "$description": "Card radius minus its 8px padding, so nested corners stay concentric"
      },
      "pill": {
        "$value": "999px"
      }
    },
    "size": {
      "$type": "dimension",
      "target": {
        "$value": "48px",
        "$description": "Above Apple's 44pt minimum and equal to Material's 48dp"
      },
      "action": {
        "$value": "56px",
        "$description": "The one main action, at the bottom where a thumb reaches"
      }
    },
    "duration": {
      "$type": "duration",
      "quick": {
        "$value": "160ms"
      },
      "sheet": {
        "$value": "240ms"
      },
      "undo": {
        "$value": "5000ms",
        "$description": "Time to undo a booking made without asking"
      }
    }
  },
  "theme": {
    "light": {
      "color": {
        "$type": "color",
        "canvas": {
          "$value": "{primitive.color.asphalt.100}"
        },
        "surface": {
          "$value": "{primitive.color.white}"
        },
        "sunken": {
          "$value": "{primitive.color.asphalt.50}"
        },
        "text": {
          "$value": "{primitive.color.asphalt.900}"
        },
        "text-muted": {
          "$value": "{primitive.color.asphalt.600}"
        },
        "line": {
          "$value": "{primitive.color.asphalt.200}"
        },
        "firm": {
          "$value": "{primitive.color.asphalt.900}",
          "$description": "Solid outline: a price the provider commits to"
        },
        "estimate": {
          "$value": "{primitive.color.asphalt.500}",
          "$description": "Dashed outline: a price that may change"
        },
        "kerb-road": {
          "$value": "{primitive.color.asphalt.900}"
        },
        "kerb-line": {
          "$value": "{primitive.color.kerb.400}"
        },
        "action": {
          "$value": "{primitive.color.asphalt.900}"
        },
        "action-text": {
          "$value": "{primitive.color.kerb.400}"
        },
        "go": {
          "$value": "{primitive.color.go.600}"
        },
        "stop": {
          "$value": "{primitive.color.stop.600}"
        },
        "focus": {
          "$value": "{primitive.color.sign.600}"
        },
        "map-land": {
          "$value": "{primitive.color.asphalt.100}"
        },
        "map-road": {
          "$value": "{primitive.color.white}"
        },
        "map-route": {
          "$value": "{primitive.color.asphalt.900}"
        },
        "scrim": {
          "$value": "rgba(16, 19, 22, 0.45)"
        }
      }
    },
    "dark": {
      "color": {
        "$type": "color",
        "canvas": {
          "$value": "{primitive.color.asphalt.950}"
        },
        "surface": {
          "$value": "{primitive.color.asphalt.900}"
        },
        "sunken": {
          "$value": "{primitive.color.asphalt.800}"
        },
        "text": {
          "$value": "{primitive.color.asphalt.50}"
        },
        "text-muted": {
          "$value": "{primitive.color.asphalt.300}"
        },
        "line": {
          "$value": "{primitive.color.asphalt.700}"
        },
        "firm": {
          "$value": "{primitive.color.asphalt.50}"
        },
        "estimate": {
          "$value": "{primitive.color.asphalt.400}"
        },
        "kerb-road": {
          "$value": "{primitive.color.asphalt.950}"
        },
        "kerb-line": {
          "$value": "{primitive.color.kerb.400}"
        },
        "action": {
          "$value": "{primitive.color.kerb.400}"
        },
        "action-text": {
          "$value": "{primitive.color.asphalt.950}"
        },
        "go": {
          "$value": "{primitive.color.go.400}"
        },
        "stop": {
          "$value": "{primitive.color.stop.400}"
        },
        "focus": {
          "$value": "{primitive.color.sign.300}"
        },
        "map-land": {
          "$value": "{primitive.color.asphalt.900}"
        },
        "map-road": {
          "$value": "{primitive.color.asphalt.700}"
        },
        "map-route": {
          "$value": "{primitive.color.kerb.400}"
        },
        "scrim": {
          "$value": "rgba(0, 0, 0, 0.6)"
        }
      }
    }
  },
  "component": {
    "button": {
      "primary-bg": {
        "$type": "color",
        "$value": "{theme.color.action}"
      },
      "primary-text": {
        "$type": "color",
        "$value": "{theme.color.action-text}"
      },
      "height": {
        "$type": "dimension",
        "$value": "{primitive.size.action}"
      },
      "radius": {
        "$type": "dimension",
        "$value": "{primitive.radius.button}"
      }
    },
    "option": {
      "firm-border": {
        "$type": "color",
        "$value": "{theme.color.firm}"
      },
      "estimate-border": {
        "$type": "color",
        "$value": "{theme.color.estimate}"
      },
      "radius": {
        "$type": "dimension",
        "$value": "{primitive.radius.card}"
      }
    },
    "pick": {
      "kerb-road": {
        "$type": "color",
        "$value": "{theme.color.kerb-road}"
      },
      "kerb-line": {
        "$type": "color",
        "$value": "{theme.color.kerb-line}"
      },
      "price-size": {
        "$type": "dimension",
        "$value": "{primitive.font.size.price}"
      }
    },
    "sheet": {
      "bg": {
        "$type": "color",
        "$value": "{theme.color.surface}"
      },
      "radius": {
        "$type": "dimension",
        "$value": "{primitive.radius.sheet}"
      }
    },
    "undo": {
      "duration": {
        "$type": "duration",
        "$value": "{primitive.duration.undo}"
      }
    }
  }
}