[
  {
    "name": "border-radius-xs",
    "value": "2px",
    "token": "$border-radius-xs"
  },
  {
    "name": "border-radius-sm",
    "value": "4px",
    "token": "$border-radius-sm"
  },
  {
    "name": "border-radius-md",
    "value": "8px",
    "token": "$border-radius-md"
  },
  {
    "name": "border-radius-lg",
    "value": "16px",
    "token": "$border-radius-lg"
  },
  {
    "name": "box-shadow-sm",
    "value": "0 8px 12px 1px rgba(29, 17, 51, .04), 0 3px 16px 2px rgba(9, 32, 77, .12), 0 5px 10px -3px rgba(29, 17, 51, .12)",
    "token": "$box-shadow-sm"
  },
  {
    "name": "box-shadow-md",
    "value": "0 16px 24px 2px rgba(29, 17, 51, .04), 0 6px 32px 4px rgba(9, 32, 77, .12), 0 8px 12px -5px rgba(29, 17, 51, .12)",
    "token": "$box-shadow-md"
  },
  {
    "name": "box-shadow-lg",
    "value": "0 24px 38px 3px rgba(29, 17, 51, .04), 0 10px 48px 8px rgba(9, 32, 77, .12), 0 12px 16px -6px rgba(29, 17, 51, .12)",
    "token": "$box-shadow-lg"
  },
  {
    "name": "Green 05",
    "value": "#e3fff3",
    "token": "$color-green-05"
  },
  {
    "name": "Green 10",
    "value": "#d1ffee",
    "token": "$color-green-10"
  },
  {
    "name": "Green 20",
    "value": "#b3ffe3",
    "token": "$color-green-20"
  },
  {
    "name": "Green 30",
    "value": "#88ffd1",
    "token": "$color-green-30"
  },
  {
    "name": "Green 40",
    "value": "#54ffbd",
    "token": "$color-green-40"
  },
  {
    "name": "Green 50",
    "value": "#3fe1b0",
    "token": "$color-green-50"
  },
  {
    "name": "Green 60",
    "value": "#2ac3a2",
    "token": "$color-green-60"
  },
  {
    "name": "Green 70",
    "value": "#008787",
    "token": "$color-green-70"
  },
  {
    "name": "Green 80",
    "value": "#005e5e",
    "token": "$color-green-80"
  },
  {
    "name": "Green 90",
    "value": "#08403f",
    "token": "$color-green-90"
  },
  {
    "name": "Blue 05",
    "value": "#aaf2ff",
    "token": "$color-blue-05"
  },
  {
    "name": "Blue 10",
    "value": "#80ebff",
    "token": "$color-blue-10"
  },
  {
    "name": "Blue 20",
    "value": "#00ddff",
    "token": "$color-blue-20"
  },
  {
    "name": "Blue 30",
    "value": "#00b3f4",
    "token": "$color-blue-30"
  },
  {
    "name": "Blue 40",
    "value": "#0090ed",
    "token": "$color-blue-40"
  },
  {
    "name": "Blue 50",
    "value": "#0060df",
    "token": "$color-blue-50"
  },
  {
    "name": "Blue 60",
    "value": "#0250bb",
    "token": "$color-blue-60"
  },
  {
    "name": "Blue 70",
    "value": "#054096",
    "token": "$color-blue-70"
  },
  {
    "name": "Blue 80",
    "value": "#073072",
    "token": "$color-blue-80"
  },
  {
    "name": "Blue 90",
    "value": "#09204d",
    "token": "$color-blue-90"
  },
  {
    "name": "Violet 05",
    "value": "#e7dfff",
    "token": "$color-violet-05"
  },
  {
    "name": "Violet 10",
    "value": "#d9bfff",
    "token": "$color-violet-10"
  },
  {
    "name": "Violet 20",
    "value": "#cb9eff",
    "token": "$color-violet-20"
  },
  {
    "name": "Violet 30",
    "value": "#c689ff",
    "token": "$color-violet-30"
  },
  {
    "name": "Violet 40",
    "value": "#ab71ff",
    "token": "$color-violet-40"
  },
  {
    "name": "Violet 50",
    "value": "#9059ff",
    "token": "$color-violet-50"
  },
  {
    "name": "Violet 60",
    "value": "#7542e5",
    "token": "$color-violet-60"
  },
  {
    "name": "Violet 70",
    "value": "#592acb",
    "token": "$color-violet-70"
  },
  {
    "name": "Violet 80",
    "value": "#45278d",
    "token": "$color-violet-80"
  },
  {
    "name": "Violet 90",
    "value": "#321c64",
    "token": "$color-violet-90"
  },
  {
    "name": "Purple 05",
    "value": "#f7e2ff",
    "token": "$color-purple-05"
  },
  {
    "name": "Purple 10",
    "value": "#f6b8ff",
    "token": "$color-purple-10"
  },
  {
    "name": "Purple 20",
    "value": "#f68fff",
    "token": "$color-purple-20"
  },
  {
    "name": "Purple 30",
    "value": "#f770ff",
    "token": "$color-purple-30"
  },
  {
    "name": "Purple 40",
    "value": "#d74cf0",
    "token": "$color-purple-40"
  },
  {
    "name": "Purple 50",
    "value": "#b833e1",
    "token": "$color-purple-50"
  },
  {
    "name": "Purple 60",
    "value": "#952bb9",
    "token": "$color-purple-60"
  },
  {
    "name": "Purple 70",
    "value": "#722291",
    "token": "$color-purple-70"
  },
  {
    "name": "Purple 80",
    "value": "#4e1a69",
    "token": "$color-purple-80"
  },
  {
    "name": "Purple 90",
    "value": "#2b1141",
    "token": "$color-purple-90"
  },
  {
    "name": "Pink 05",
    "value": "#ffdef0",
    "token": "$color-pink-05"
  },
  {
    "name": "Pink 10",
    "value": "#ffb4db",
    "token": "$color-pink-10"
  },
  {
    "name": "Pink 20",
    "value": "#ff8ac5",
    "token": "$color-pink-20"
  },
  {
    "name": "Pink 30",
    "value": "#ff6bba",
    "token": "$color-pink-30"
  },
  {
    "name": "Pink 40",
    "value": "#ff4aa2",
    "token": "$color-pink-40"
  },
  {
    "name": "Pink 50",
    "value": "#ff298a",
    "token": "$color-pink-50"
  },
  {
    "name": "Pink 60",
    "value": "#e31587",
    "token": "$color-pink-60"
  },
  {
    "name": "Pink 70",
    "value": "#c60084",
    "token": "$color-pink-70"
  },
  {
    "name": "Pink 80",
    "value": "#7f145b",
    "token": "$color-pink-80"
  },
  {
    "name": "Pink 90",
    "value": "#50134b",
    "token": "$color-pink-90"
  },
  {
    "name": "Red 05",
    "value": "#ffdfe7",
    "token": "$color-red-05"
  },
  {
    "name": "Red 10",
    "value": "#ffbdc5",
    "token": "$color-red-10"
  },
  {
    "name": "Red 20",
    "value": "#ff9aa2",
    "token": "$color-red-20"
  },
  {
    "name": "Red 30",
    "value": "#ff848b",
    "token": "$color-red-30"
  },
  {
    "name": "Red 40",
    "value": "#ff6a75",
    "token": "$color-red-40"
  },
  {
    "name": "Red 50",
    "value": "#ff4f5e",
    "token": "$color-red-50"
  },
  {
    "name": "Red 60",
    "value": "#e22850",
    "token": "$color-red-60"
  },
  {
    "name": "Red 70",
    "value": "#c50042",
    "token": "$color-red-70"
  },
  {
    "name": "Red 80",
    "value": "#810220",
    "token": "$color-red-80"
  },
  {
    "name": "Red 90",
    "value": "#440306",
    "token": "$color-red-90"
  },
  {
    "name": "Orange 05",
    "value": "#fff4de",
    "token": "$color-orange-05"
  },
  {
    "name": "Orange 10",
    "value": "#ffd5b2",
    "token": "$color-orange-10"
  },
  {
    "name": "Orange 20",
    "value": "#ffb587",
    "token": "$color-orange-20"
  },
  {
    "name": "Orange 30",
    "value": "#ffa266",
    "token": "$color-orange-30"
  },
  {
    "name": "Orange 40",
    "value": "#ff8a50",
    "token": "$color-orange-40"
  },
  {
    "name": "Orange 50",
    "value": "#ff7139",
    "token": "$color-orange-50"
  },
  {
    "name": "Orange 60",
    "value": "#e25920",
    "token": "$color-orange-60"
  },
  {
    "name": "Orange 70",
    "value": "#cc3d00",
    "token": "$color-orange-70"
  },
  {
    "name": "Orange 80",
    "value": "#9e280b",
    "token": "$color-orange-80"
  },
  {
    "name": "Orange 90",
    "value": "#7c1504",
    "token": "$color-orange-90"
  },
  {
    "name": "Yellow 05",
    "value": "#ffffcc",
    "token": "$color-yellow-05"
  },
  {
    "name": "Yellow 10",
    "value": "#ffff98",
    "token": "$color-yellow-10"
  },
  {
    "name": "Yellow 20",
    "value": "#ffea80",
    "token": "$color-yellow-20"
  },
  {
    "name": "Yellow 30",
    "value": "#ffd567",
    "token": "$color-yellow-30"
  },
  {
    "name": "Yellow 40",
    "value": "#ffbd4f",
    "token": "$color-yellow-40"
  },
  {
    "name": "Yellow 50",
    "value": "#ffa436",
    "token": "$color-yellow-50"
  },
  {
    "name": "Yellow 60",
    "value": "#e27f2e",
    "token": "$color-yellow-60"
  },
  {
    "name": "Yellow 70",
    "value": "#c45a27",
    "token": "$color-yellow-70"
  },
  {
    "name": "Yellow 80",
    "value": "#a7341f",
    "token": "$color-yellow-80"
  },
  {
    "name": "Yellow 90",
    "value": "#960e18",
    "token": "$color-yellow-90"
  },
  {
    "name": "Light Gray 05",
    "value": "#ffffff",
    "token": "$color-light-gray-05"
  },
  {
    "name": "Light Gray 10",
    "value": "#f9f9fb",
    "token": "$color-light-gray-10"
  },
  {
    "name": "Light Gray 20",
    "value": "#f0f0f4",
    "token": "$color-light-gray-20"
  },
  {
    "name": "Light Gray 30",
    "value": "#e0e0e6",
    "token": "$color-light-gray-30"
  },
  {
    "name": "Light Gray 40",
    "value": "#cfcfd8",
    "token": "$color-light-gray-40"
  },
  {
    "name": "Light Gray 50",
    "value": "#bfbfc9",
    "token": "$color-light-gray-50"
  },
  {
    "name": "Light Gray 60",
    "value": "#afafba",
    "token": "$color-light-gray-60"
  },
  {
    "name": "Light Gray 70",
    "value": "#9f9fad",
    "token": "$color-light-gray-70"
  },
  {
    "name": "Light Gray 80",
    "value": "#8f8f9e",
    "token": "$color-light-gray-80"
  },
  {
    "name": "Light Gray 90",
    "value": "#80808f",
    "token": "$color-light-gray-90"
  },
  {
    "name": "Dark Gray 05",
    "value": "#5b5b66",
    "token": "$color-dark-gray-05"
  },
  {
    "name": "Dark Gray 10",
    "value": "#52525e",
    "token": "$color-dark-gray-10"
  },
  {
    "name": "Dark Gray 20",
    "value": "#4a4a55",
    "token": "$color-dark-gray-20"
  },
  {
    "name": "Dark Gray 30",
    "value": "#42414d",
    "token": "$color-dark-gray-30"
  },
  {
    "name": "Dark Gray 40",
    "value": "#3a3944",
    "token": "$color-dark-gray-40"
  },
  {
    "name": "Dark Gray 50",
    "value": "#32313c",
    "token": "$color-dark-gray-50"
  },
  {
    "name": "Dark Gray 60",
    "value": "#2b2a33",
    "token": "$color-dark-gray-60"
  },
  {
    "name": "Dark Gray 70",
    "value": "#23222b",
    "token": "$color-dark-gray-70"
  },
  {
    "name": "Dark Gray 80",
    "value": "#1c1b22",
    "token": "$color-dark-gray-80"
  },
  {
    "name": "Dark Gray 90",
    "value": "#15141a",
    "token": "$color-dark-gray-90"
  },
  {
    "name": "Marketing Gray 10",
    "value": "#f9f9fa",
    "token": "$color-marketing-gray-10"
  },
  {
    "name": "Marketing Gray 20",
    "value": "#ededf0",
    "token": "$color-marketing-gray-20"
  },
  {
    "name": "Marketing Gray 30",
    "value": "#cdcdd4",
    "token": "$color-marketing-gray-30"
  },
  {
    "name": "Marketing Gray 40",
    "value": "#b1b1bc",
    "token": "$color-marketing-gray-40"
  },
  {
    "name": "Marketing Gray 50",
    "value": "#9595a2",
    "token": "$color-marketing-gray-50"
  },
  {
    "name": "Marketing Gray 60",
    "value": "#7a7a8b",
    "token": "$color-marketing-gray-60"
  },
  {
    "name": "Marketing Gray 70",
    "value": "#5e5e72",
    "token": "$color-marketing-gray-70"
  },
  {
    "name": "Marketing Gray 80",
    "value": "#42425a",
    "token": "$color-marketing-gray-80"
  },
  {
    "name": "Marketing Gray 90",
    "value": "#1f2033",
    "token": "$color-marketing-gray-90"
  },
  {
    "name": "Marketing Gray 99",
    "value": "#20123a",
    "token": "$color-marketing-gray-99"
  },
  {
    "name": "Ink 05",
    "value": "#393473",
    "token": "$color-ink-05"
  },
  {
    "name": "Ink 10",
    "value": "#342f6d",
    "token": "$color-ink-10"
  },
  {
    "name": "Ink 20",
    "value": "#312a64",
    "token": "$color-ink-20"
  },
  {
    "name": "Ink 30",
    "value": "#2e255d",
    "token": "$color-ink-30"
  },
  {
    "name": "Ink 40",
    "value": "#2b2156",
    "token": "$color-ink-40"
  },
  {
    "name": "Ink 50",
    "value": "#291d4f",
    "token": "$color-ink-50"
  },
  {
    "name": "Ink 60",
    "value": "#271948",
    "token": "$color-ink-60"
  },
  {
    "name": "Ink 70",
    "value": "#241541",
    "token": "$color-ink-70"
  },
  {
    "name": "Ink 80",
    "value": "#20123a",
    "token": "$color-ink-80"
  },
  {
    "name": "Ink 90",
    "value": "#1d1133",
    "token": "$color-ink-90"
  },
  {
    "name": "Black",
    "value": "#000000",
    "token": "$color-black"
  },
  {
    "name": "White",
    "value": "#ffffff",
    "token": "$color-white"
  },
  {
    "name": "Link",
    "value": "#0060df",
    "token": "$color-link"
  },
  {
    "name": "Link:Hover",
    "value": "#0250bb",
    "token": "$color-link-hover"
  },
  {
    "name": "Link:Visited",
    "value": "#b833e1",
    "token": "$color-link-visited"
  },
  {
    "name": "Mozilla Black",
    "value": "#161616",
    "token": "$color-moz-black"
  },
  {
    "name": "Mozilla Black Strong",
    "value": "#000000",
    "token": "$color-moz-black-strong"
  },
  {
    "name": "Mozilla White",
    "value": "#fafafa",
    "token": "$color-moz-white"
  },
  {
    "name": "Mozilla White Strong",
    "value": "#ffffff",
    "token": "$color-moz-white-strong"
  },
  {
    "name": "Mozilla Green",
    "value": "#00d230",
    "token": "$color-moz-green"
  },
  {
    "name": "Mozilla Green +1",
    "value": "#d6ffcd",
    "token": "$color-moz-green-light"
  },
  {
    "name": "Mozilla Green -1",
    "value": "#28733f",
    "token": "$color-moz-green-mid"
  },
  {
    "name": "Mozilla Green -2",
    "value": "#022611",
    "token": "$color-moz-green-dark"
  },
  {
    "name": "Mozilla Orange",
    "value": "#ff9456",
    "token": "$color-moz-orange"
  },
  {
    "name": "Mozilla Orange +1",
    "value": "#faf0e6",
    "token": "$color-moz-orange-light"
  },
  {
    "name": "Mozilla Orange -1",
    "value": "#ff453f",
    "token": "$color-moz-orange-mid"
  },
  {
    "name": "Mozilla Orange -2",
    "value": "#330505",
    "token": "$color-moz-orange-dark"
  },
  {
    "name": "Mozilla Pink",
    "value": "#ff97e2",
    "token": "$color-moz-pink"
  },
  {
    "name": "Mozilla Pink +1",
    "value": "#fff1f8",
    "token": "$color-moz-pink-light"
  },
  {
    "name": "Mozilla Pink -1",
    "value": "#ae49ec",
    "token": "$color-moz-pink-mid"
  },
  {
    "name": "Mozilla Pink -2",
    "value": "#210340",
    "token": "$color-moz-pink-dark"
  },
  {
    "name": "Mozilla Gray",
    "value": "#B3B3B3",
    "token": "$color-moz-gray"
  },
  {
    "name": "Mozilla Gray +1",
    "value": "#e8e8e8",
    "token": "$color-moz-gray-light"
  },
  {
    "name": "Mozilla Gray -1",
    "value": "#6d6d6d",
    "token": "$color-moz-gray-mid"
  },
  {
    "name": "Mozilla Gray -2",
    "value": "#414141",
    "token": "$color-moz-gray-dark"
  },
  {
    "name": "Mozilla Aqua",
    "value": "#87e3cd",
    "token": "$color-moz-aqua"
  },
  {
    "name": "Mozilla Aqua +1",
    "value": "#cef5eb",
    "token": "$color-moz-aqua-light"
  },
  {
    "name": "Mozilla Aqua -1",
    "value": "#41bfae",
    "token": "$color-moz-aqua-mid"
  },
  {
    "name": "Mozilla Aqua -2",
    "value": "#0a5656",
    "token": "$color-moz-aqua-dark"
  },
  {
    "name": "Mozilla Seed",
    "value": "#ddef30",
    "token": "$color-moz-seed"
  },
  {
    "name": "Mozilla Seed +1",
    "value": "#eef797",
    "token": "$color-moz-seed-light"
  },
  {
    "name": "Mozilla Seed -1",
    "value": "#a99c23",
    "token": "$color-moz-seed-mid"
  },
  {
    "name": "Mozilla Seed -2",
    "value": "#423412",
    "token": "$color-moz-seed-dark"
  },
  {
    "name": "Mozilla Clay",
    "value": "#dadeb2",
    "token": "$color-moz-clay"
  },
  {
    "name": "Mozilla Clay +1",
    "value": "#eaecd0",
    "token": "$color-moz-clay-light"
  },
  {
    "name": "Mozilla Clay -1",
    "value": "#b2b895",
    "token": "$color-moz-clay-mid"
  },
  {
    "name": "Mozilla Clay -2",
    "value": "#697961",
    "token": "$color-moz-clay-dark"
  },
  {
    "name": "content-xs",
    "value": "304px",
    "token": "$content-xs"
  },
  {
    "name": "content-sm",
    "value": "432px",
    "token": "$content-sm"
  },
  {
    "name": "content-md",
    "value": "688px",
    "token": "$content-md"
  },
  {
    "name": "content-lg",
    "value": "928px",
    "token": "$content-lg"
  },
  {
    "name": "content-xl",
    "value": "1152px",
    "token": "$content-xl"
  },
  {
    "name": "content-max",
    "value": "1440px",
    "token": "$content-max"
  },
  {
    "name": "screen-xs",
    "value": "320px",
    "token": "$screen-xs"
  },
  {
    "name": "screen-sm",
    "value": "480px",
    "token": "$screen-sm"
  },
  {
    "name": "screen-md",
    "value": "768px",
    "token": "$screen-md"
  },
  {
    "name": "screen-lg",
    "value": "1024px",
    "token": "$screen-lg"
  },
  {
    "name": "screen-xl",
    "value": "1312px",
    "token": "$screen-xl"
  },
  {
    "name": "font-stack-base",
    "value": "Inter, X-LocaleSpecific, sans-serif",
    "token": "$font-stack-base"
  },
  {
    "name": "font-stack-firefox",
    "value": "Metropolis, X-LocaleSpecific, sans-serif",
    "token": "$font-stack-firefox"
  },
  {
    "name": "font-stack-mozilla-headline",
    "value": "'Mozilla Headline', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif",
    "token": "$font-stack-mozilla-headline"
  },
  {
    "name": "font-stack-mozilla-text",
    "value": "'Mozilla Text', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif",
    "token": "$font-stack-mozilla-text"
  },
  {
    "name": "font-stack-mono",
    "value": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
    "token": "$font-stack-mono"
  },
  {
    "name": "Warm Gradient",
    "value": "linear-gradient(45deg, #F5156C, #FF3750, #FF4F5E, #FF7139, #FF980E)",
    "token": "$gradient-warm"
  },
  {
    "name": "Cool Gradient",
    "value": "linear-gradient(90deg, #3A8EE6, #9059FF, #C139E6)",
    "token": "$gradient-cool"
  },
  {
    "name": "Highlight Gradient",
    "value": "linear-gradient(90deg, #FFFFFF, #FFF44F)",
    "token": "$gradient-highlight"
  },
  {
    "name": "mq-xs",
    "value": "(min-width: 320px)",
    "token": "$mq-xs"
  },
  {
    "name": "mq-sm",
    "value": "(min-width: 480px)",
    "token": "$mq-sm"
  },
  {
    "name": "mq-md",
    "value": "(min-width: 768px)",
    "token": "$mq-md"
  },
  {
    "name": "mq-lg",
    "value": "(min-width: 1024px)",
    "token": "$mq-lg"
  },
  {
    "name": "mq-xl",
    "value": "(min-width: 1312px)",
    "token": "$mq-xl"
  },
  {
    "name": "mq-max",
    "value": "(min-width: 1440px)",
    "token": "$mq-max"
  },
  {
    "name": "mq-short",
    "value": "(max-height: 599px)",
    "token": "$mq-short"
  },
  {
    "name": "mq-tall",
    "value": "(min-height: 600px)",
    "token": "$mq-tall"
  },
  {
    "name": "mq-high-res",
    "value": "only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi)",
    "token": "$mq-high-res"
  },
  {
    "name": "spacing-xs",
    "value": "4px",
    "token": "$spacing-xs"
  },
  {
    "name": "spacing-sm",
    "value": "8px",
    "token": "$spacing-sm"
  },
  {
    "name": "spacing-md",
    "value": "16px",
    "token": "$spacing-md"
  },
  {
    "name": "spacing-lg",
    "value": "24px",
    "token": "$spacing-lg"
  },
  {
    "name": "spacing-xl",
    "value": "32px",
    "token": "$spacing-xl"
  },
  {
    "name": "spacing-2xl",
    "value": "48px",
    "token": "$spacing-2xl"
  },
  {
    "name": "layout-2xs",
    "value": "16px",
    "token": "$layout-2xs"
  },
  {
    "name": "layout-xs",
    "value": "24px",
    "token": "$layout-xs"
  },
  {
    "name": "layout-sm",
    "value": "32px",
    "token": "$layout-sm"
  },
  {
    "name": "layout-md",
    "value": "48px",
    "token": "$layout-md"
  },
  {
    "name": "layout-lg",
    "value": "64px",
    "token": "$layout-lg"
  },
  {
    "name": "layout-xl",
    "value": "96px",
    "token": "$layout-xl"
  },
  {
    "name": "layout-2xl",
    "value": "192px",
    "token": "$layout-2xl"
  }
]