@shopify/polaris-tokens/dist/colors.raw.json

Design Tokens for the Polaris Design System

{
  "aliases": {
    "color-yellow-base": {
      "value": "#eec200"
    },
    "color-sky-light": {
      "value": "#f4f6f8"
    },
    "color-ink-lightest": {
      "value": "#919eab"
    },
    "color-green-text": {
      "value": "#414f3e"
    },
    "color-orange-light": {
      "value": "#ffc58b"
    },
    "color-indigo-base": {
      "value": "#5c6ac4"
    },
    "color-orange-text": {
      "value": "#594430"
    },
    "color-green-light": {
      "value": "#bbe5b3"
    },
    "color-ink-base": {
      "value": "#212b36"
    },
    "color-green-base": {
      "value": "#50b83c"
    },
    "color-indigo-light": {
      "value": "#b3bcf5"
    },
    "color-yellow-dark": {
      "value": "#9c6f19"
    },
    "color-ink-light": {
      "value": "#454f5b"
    },
    "color-orange-base": {
      "value": "#f49342"
    },
    "color-yellow-light": {
      "value": "#ffea8a"
    },
    "color-indigo-dark": {
      "value": "#202e78"
    },
    "color-sky-base": {
      "value": "#dfe3e8"
    },
    "color-red-darker": {
      "value": "#330101"
    },
    "color-black-base": {
      "value": "#000000"
    },
    "color-green-dark": {
      "value": "#108043"
    },
    "color-purple-darker": {
      "value": "#230051"
    },
    "color-teal-darker": {
      "value": "#003135"
    },
    "color-orange-dark": {
      "value": "#c05717"
    },
    "color-blue-darker": {
      "value": "#001429"
    },
    "color-sky-dark": {
      "value": "#c4cdd5"
    },
    "color-sky-lighter": {
      "value": "#f9fafb"
    },
    "color-blue-light": {
      "value": "#b4e1fa"
    },
    "color-orange-lighter": {
      "value": "#fcebdb"
    },
    "color-purple-light": {
      "value": "#e3d0ff"
    },
    "color-green-lighter": {
      "value": "#e3f1df"
    },
    "color-teal-light": {
      "value": "#b7ecec"
    },
    "color-red-light": {
      "value": "#fead9a"
    },
    "color-yellow-darker": {
      "value": "#573b00"
    },
    "color-ink-lighter": {
      "value": "#637381"
    },
    "color-indigo-lighter": {
      "value": "#f4f5fa"
    },
    "color-red-text": {
      "value": "#583c35"
    },
    "color-teal-text": {
      "value": "#405352"
    },
    "color-indigo-darker": {
      "value": "#000639"
    },
    "color-purple-text": {
      "value": "#50495a"
    },
    "color-yellow-lighter": {
      "value": "#fcf1cd"
    },
    "color-blue-text": {
      "value": "#3e4e57"
    },
    "color-red-base": {
      "value": "#de3618"
    },
    "color-green-darker": {
      "value": "#173630"
    },
    "color-teal-base": {
      "value": "#47c1bf"
    },
    "color-orange-darker": {
      "value": "#4a1504"
    },
    "color-purple-base": {
      "value": "#9c6ade"
    },
    "color-blue-base": {
      "value": "#007ace"
    },
    "color-blue-lighter": {
      "value": "#ebf5fa"
    },
    "color-red-dark": {
      "value": "#bf0711"
    },
    "color-purple-lighter": {
      "value": "#f6f0fd"
    },
    "color-yellow-text": {
      "value": "#595130"
    },
    "color-teal-lighter": {
      "value": "#e0f5f5"
    },
    "color-teal-dark": {
      "value": "#00848e"
    },
    "color-purple-dark": {
      "value": "#50248f"
    },
    "color-red-lighter": {
      "value": "#fbeae5"
    },
    "color-indigo-text": {
      "value": "#3e4155"
    },
    "color-white-base": {
      "value": "#ffffff"
    },
    "color-blue-dark": {
      "value": "#084e8a"
    }
  },
  "props": {
    "color-purple-lighter": {
      "type": "color",
      "category": "background-color",
      "name": "color-purple-lighter",
      "value": "rgb(246, 240, 253)",
      "originalValue": "{!color-purple-lighter}"
    },
    "color-purple-light": {
      "type": "color",
      "category": "background-color",
      "name": "color-purple-light",
      "value": "rgb(227, 208, 255)",
      "originalValue": "{!color-purple-light}"
    },
    "color-purple-base": {
      "type": "color",
      "category": "background-color",
      "name": "color-purple-base",
      "value": "rgb(156, 106, 222)",
      "originalValue": "{!color-purple-base}"
    },
    "color-purple-dark": {
      "type": "color",
      "category": "background-color",
      "name": "color-purple-dark",
      "value": "rgb(80, 36, 143)",
      "originalValue": "{!color-purple-dark}"
    },
    "color-purple-darker": {
      "type": "color",
      "category": "background-color",
      "name": "color-purple-darker",
      "value": "rgb(35, 0, 81)",
      "originalValue": "{!color-purple-darker}"
    },
    "color-purple-text": {
      "type": "color",
      "category": "text-color",
      "name": "color-purple-text",
      "value": "rgb(80, 73, 90)",
      "originalValue": "{!color-purple-text}"
    },
    "color-indigo-lighter": {
      "type": "color",
      "category": "background-color",
      "name": "color-indigo-lighter",
      "value": "rgb(244, 245, 250)",
      "originalValue": "{!color-indigo-lighter}"
    },
    "color-indigo-light": {
      "type": "color",
      "category": "background-color",
      "name": "color-indigo-light",
      "value": "rgb(179, 188, 245)",
      "originalValue": "{!color-indigo-light}"
    },
    "color-indigo-base": {
      "type": "color",
      "category": "background-color",
      "name": "color-indigo-base",
      "value": "rgb(92, 106, 196)",
      "originalValue": "{!color-indigo-base}"
    },
    "color-indigo-dark": {
      "type": "color",
      "category": "background-color",
      "name": "color-indigo-dark",
      "value": "rgb(32, 46, 120)",
      "originalValue": "{!color-indigo-dark}"
    },
    "color-indigo-darker": {
      "type": "color",
      "category": "background-color",
      "name": "color-indigo-darker",
      "value": "rgb(0, 6, 57)",
      "originalValue": "{!color-indigo-darker}"
    },
    "color-indigo-text": {
      "type": "color",
      "category": "text-color",
      "name": "color-indigo-text",
      "value": "rgb(62, 65, 85)",
      "originalValue": "{!color-indigo-text}"
    },
    "color-blue-lighter": {
      "type": "color",
      "category": "background-color",
      "name": "color-blue-lighter",
      "value": "rgb(235, 245, 250)",
      "originalValue": "{!color-blue-lighter}"
    },
    "color-blue-light": {
      "type": "color",
      "category": "background-color",
      "name": "color-blue-light",
      "value": "rgb(180, 225, 250)",
      "originalValue": "{!color-blue-light}"
    },
    "color-blue-base": {
      "type": "color",
      "category": "background-color",
      "name": "color-blue-base",
      "value": "rgb(0, 122, 206)",
      "originalValue": "{!color-blue-base}"
    },
    "color-blue-dark": {
      "type": "color",
      "category": "background-color",
      "name": "color-blue-dark",
      "value": "rgb(8, 78, 138)",
      "originalValue": "{!color-blue-dark}"
    },
    "color-blue-darker": {
      "type": "color",
      "category": "background-color",
      "name": "color-blue-darker",
      "value": "rgb(0, 20, 41)",
      "originalValue": "{!color-blue-darker}"
    },
    "color-blue-text": {
      "type": "color",
      "category": "text-color",
      "name": "color-blue-text",
      "value": "rgb(62, 78, 87)",
      "originalValue": "{!color-blue-text}"
    },
    "color-teal-lighter": {
      "type": "color",
      "category": "background-color",
      "name": "color-teal-lighter",
      "value": "rgb(224, 245, 245)",
      "originalValue": "{!color-teal-lighter}"
    },
    "color-teal-light": {
      "type": "color",
      "category": "background-color",
      "name": "color-teal-light",
      "value": "rgb(183, 236, 236)",
      "originalValue": "{!color-teal-light}"
    },
    "color-teal-base": {
      "type": "color",
      "category": "background-color",
      "name": "color-teal-base",
      "value": "rgb(71, 193, 191)",
      "originalValue": "{!color-teal-base}"
    },
    "color-teal-dark": {
      "type": "color",
      "category": "background-color",
      "name": "color-teal-dark",
      "value": "rgb(0, 132, 142)",
      "originalValue": "{!color-teal-dark}"
    },
    "color-teal-darker": {
      "type": "color",
      "category": "background-color",
      "name": "color-teal-darker",
      "value": "rgb(0, 49, 53)",
      "originalValue": "{!color-teal-darker}"
    },
    "color-teal-text": {
      "type": "color",
      "category": "text-color",
      "name": "color-teal-text",
      "value": "rgb(64, 83, 82)",
      "originalValue": "{!color-teal-text}"
    },
    "color-green-lighter": {
      "type": "color",
      "category": "background-color",
      "name": "color-green-lighter",
      "value": "rgb(227, 241, 223)",
      "originalValue": "{!color-green-lighter}"
    },
    "color-green-light": {
      "type": "color",
      "category": "background-color",
      "name": "color-green-light",
      "value": "rgb(187, 229, 179)",
      "originalValue": "{!color-green-light}"
    },
    "color-green-base": {
      "type": "color",
      "category": "background-color",
      "name": "color-green-base",
      "value": "rgb(80, 184, 60)",
      "originalValue": "{!color-green-base}"
    },
    "color-green-dark": {
      "type": "color",
      "category": "background-color",
      "name": "color-green-dark",
      "value": "rgb(16, 128, 67)",
      "originalValue": "{!color-green-dark}"
    },
    "color-green-darker": {
      "type": "color",
      "category": "background-color",
      "name": "color-green-darker",
      "value": "rgb(23, 54, 48)",
      "originalValue": "{!color-green-darker}"
    },
    "color-green-text": {
      "type": "color",
      "category": "text-color",
      "name": "color-green-text",
      "value": "rgb(65, 79, 62)",
      "originalValue": "{!color-green-text}"
    },
    "color-yellow-lighter": {
      "type": "color",
      "category": "background-color",
      "name": "color-yellow-lighter",
      "value": "rgb(252, 241, 205)",
      "originalValue": "{!color-yellow-lighter}"
    },
    "color-yellow-light": {
      "type": "color",
      "category": "background-color",
      "name": "color-yellow-light",
      "value": "rgb(255, 234, 138)",
      "originalValue": "{!color-yellow-light}"
    },
    "color-yellow-base": {
      "type": "color",
      "category": "background-color",
      "name": "color-yellow-base",
      "value": "rgb(238, 194, 0)",
      "originalValue": "{!color-yellow-base}"
    },
    "color-yellow-dark": {
      "type": "color",
      "category": "background-color",
      "name": "color-yellow-dark",
      "value": "rgb(156, 111, 25)",
      "originalValue": "{!color-yellow-dark}"
    },
    "color-yellow-darker": {
      "type": "color",
      "category": "background-color",
      "name": "color-yellow-darker",
      "value": "rgb(87, 59, 0)",
      "originalValue": "{!color-yellow-darker}"
    },
    "color-yellow-text": {
      "type": "color",
      "category": "text-color",
      "name": "color-yellow-text",
      "value": "rgb(89, 81, 48)",
      "originalValue": "{!color-yellow-text}"
    },
    "color-orange-lighter": {
      "type": "color",
      "category": "background-color",
      "name": "color-orange-lighter",
      "value": "rgb(252, 235, 219)",
      "originalValue": "{!color-orange-lighter}"
    },
    "color-orange-light": {
      "type": "color",
      "category": "background-color",
      "name": "color-orange-light",
      "value": "rgb(255, 197, 139)",
      "originalValue": "{!color-orange-light}"
    },
    "color-orange-base": {
      "type": "color",
      "category": "background-color",
      "name": "color-orange-base",
      "value": "rgb(244, 147, 66)",
      "originalValue": "{!color-orange-base}"
    },
    "color-orange-dark": {
      "type": "color",
      "category": "background-color",
      "name": "color-orange-dark",
      "value": "rgb(192, 87, 23)",
      "originalValue": "{!color-orange-dark}"
    },
    "color-orange-darker": {
      "type": "color",
      "category": "background-color",
      "name": "color-orange-darker",
      "value": "rgb(74, 21, 4)",
      "originalValue": "{!color-orange-darker}"
    },
    "color-orange-text": {
      "type": "color",
      "category": "text-color",
      "name": "color-orange-text",
      "value": "rgb(89, 68, 48)",
      "originalValue": "{!color-orange-text}"
    },
    "color-red-lighter": {
      "type": "color",
      "category": "background-color",
      "name": "color-red-lighter",
      "value": "rgb(251, 234, 229)",
      "originalValue": "{!color-red-lighter}"
    },
    "color-red-light": {
      "type": "color",
      "category": "background-color",
      "name": "color-red-light",
      "value": "rgb(254, 173, 154)",
      "originalValue": "{!color-red-light}"
    },
    "color-red-base": {
      "type": "color",
      "category": "background-color",
      "name": "color-red-base",
      "value": "rgb(222, 54, 24)",
      "originalValue": "{!color-red-base}"
    },
    "color-red-dark": {
      "type": "color",
      "category": "background-color",
      "name": "color-red-dark",
      "value": "rgb(191, 7, 17)",
      "originalValue": "{!color-red-dark}"
    },
    "color-red-darker": {
      "type": "color",
      "category": "background-color",
      "name": "color-red-darker",
      "value": "rgb(51, 1, 1)",
      "originalValue": "{!color-red-darker}"
    },
    "color-red-text": {
      "type": "color",
      "category": "text-color",
      "name": "color-red-text",
      "value": "rgb(88, 60, 53)",
      "originalValue": "{!color-red-text}"
    },
    "color-white-base": {
      "type": "color",
      "category": "background-color",
      "name": "color-white-base",
      "value": "rgb(255, 255, 255)",
      "originalValue": "{!color-white-base}"
    },
    "color-sky-lighter": {
      "type": "color",
      "category": "background-color",
      "name": "color-sky-lighter",
      "value": "rgb(249, 250, 251)",
      "originalValue": "{!color-sky-lighter}"
    },
    "color-sky-light": {
      "type": "color",
      "category": "background-color",
      "name": "color-sky-light",
      "value": "rgb(244, 246, 248)",
      "originalValue": "{!color-sky-light}"
    },
    "color-sky-base": {
      "type": "color",
      "category": "background-color",
      "name": "color-sky-base",
      "value": "rgb(223, 227, 232)",
      "originalValue": "{!color-sky-base}"
    },
    "color-sky-dark": {
      "type": "color",
      "category": "background-color",
      "name": "color-sky-dark",
      "value": "rgb(196, 205, 213)",
      "originalValue": "{!color-sky-dark}"
    },
    "color-ink-lightest": {
      "type": "color",
      "category": "background-color",
      "name": "color-ink-lightest",
      "value": "rgb(145, 158, 171)",
      "originalValue": "{!color-ink-lightest}"
    },
    "color-ink-lighter": {
      "type": "color",
      "category": "background-color",
      "name": "color-ink-lighter",
      "value": "rgb(99, 115, 129)",
      "originalValue": "{!color-ink-lighter}"
    },
    "color-ink-light": {
      "type": "color",
      "category": "background-color",
      "name": "color-ink-light",
      "value": "rgb(69, 79, 91)",
      "originalValue": "{!color-ink-light}"
    },
    "color-ink-base": {
      "type": "color",
      "category": "background-color",
      "name": "color-ink-base",
      "value": "rgb(33, 43, 54)",
      "originalValue": "{!color-ink-base}"
    },
    "color-black-base": {
      "type": "color",
      "category": "background-color",
      "name": "color-black-base",
      "value": "rgb(0, 0, 0)",
      "originalValue": "{!color-black-base}"
    }
  }
}