@shopify/polaris-tokens
Version:
Design Tokens for the Polaris Design System
645 lines (644 loc) • 17.3 kB
JSON
{
"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}"
},
"spacing-none": {
"type": "number",
"category": "spacing",
"name": "spacing-none",
"value": 0,
"originalValue": 0
},
"spacing-extra-tight": {
"type": "number",
"category": "spacing",
"name": "spacing-extra-tight",
"value": "4px",
"originalValue": "4px"
},
"spacing-tight": {
"type": "number",
"category": "spacing",
"name": "spacing-tight",
"value": "8px",
"originalValue": "8px"
},
"spacing-base": {
"type": "number",
"category": "spacing",
"name": "spacing-base",
"value": "16px",
"originalValue": "16px"
},
"spacing-loose": {
"type": "number",
"category": "spacing",
"name": "spacing-loose",
"value": "20px",
"originalValue": "20px"
},
"spacing-extra-loose": {
"type": "number",
"category": "spacing",
"name": "spacing-extra-loose",
"value": "32px",
"originalValue": "32px"
},
"font-stack-base": {
"type": "string",
"category": "font-family",
"name": "font-stack-base",
"value":
"-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif",
"originalValue":
"-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif"
},
"font-stack-monospace": {
"type": "string",
"category": "font-family",
"name": "font-stack-monospace",
"value": "Monaco, Consolas, 'Lucida Console', monospace",
"originalValue": "Monaco, Consolas, 'Lucida Console', monospace"
}
}
}