@shopify/polaris-tokens
Version:
Design Tokens for the Polaris Design System
70 lines (69 loc) • 2.63 kB
JavaScript
module.exports = {
colorPurpleLighter: 'rgb(246, 240, 253)',
colorPurpleLight: 'rgb(227, 208, 255)',
colorPurpleBase: 'rgb(156, 106, 222)',
colorPurpleDark: 'rgb(80, 36, 143)',
colorPurpleDarker: 'rgb(35, 0, 81)',
colorPurpleText: 'rgb(80, 73, 90)',
colorIndigoLighter: 'rgb(244, 245, 250)',
colorIndigoLight: 'rgb(179, 188, 245)',
colorIndigoBase: 'rgb(92, 106, 196)',
colorIndigoDark: 'rgb(32, 46, 120)',
colorIndigoDarker: 'rgb(0, 6, 57)',
colorIndigoText: 'rgb(62, 65, 85)',
colorBlueLighter: 'rgb(235, 245, 250)',
colorBlueLight: 'rgb(180, 225, 250)',
colorBlueBase: 'rgb(0, 122, 206)',
colorBlueDark: 'rgb(8, 78, 138)',
colorBlueDarker: 'rgb(0, 20, 41)',
colorBlueText: 'rgb(62, 78, 87)',
colorTealLighter: 'rgb(224, 245, 245)',
colorTealLight: 'rgb(183, 236, 236)',
colorTealBase: 'rgb(71, 193, 191)',
colorTealDark: 'rgb(0, 132, 142)',
colorTealDarker: 'rgb(0, 49, 53)',
colorTealText: 'rgb(64, 83, 82)',
colorGreenLighter: 'rgb(227, 241, 223)',
colorGreenLight: 'rgb(187, 229, 179)',
colorGreenBase: 'rgb(80, 184, 60)',
colorGreenDark: 'rgb(16, 128, 67)',
colorGreenDarker: 'rgb(23, 54, 48)',
colorGreenText: 'rgb(65, 79, 62)',
colorYellowLighter: 'rgb(252, 241, 205)',
colorYellowLight: 'rgb(255, 234, 138)',
colorYellowBase: 'rgb(238, 194, 0)',
colorYellowDark: 'rgb(156, 111, 25)',
colorYellowDarker: 'rgb(87, 59, 0)',
colorYellowText: 'rgb(89, 81, 48)',
colorOrangeLighter: 'rgb(252, 235, 219)',
colorOrangeLight: 'rgb(255, 197, 139)',
colorOrangeBase: 'rgb(244, 147, 66)',
colorOrangeDark: 'rgb(192, 87, 23)',
colorOrangeDarker: 'rgb(74, 21, 4)',
colorOrangeText: 'rgb(89, 68, 48)',
colorRedLighter: 'rgb(251, 234, 229)',
colorRedLight: 'rgb(254, 173, 154)',
colorRedBase: 'rgb(222, 54, 24)',
colorRedDark: 'rgb(191, 7, 17)',
colorRedDarker: 'rgb(51, 1, 1)',
colorRedText: 'rgb(88, 60, 53)',
colorWhiteBase: 'rgb(255, 255, 255)',
colorSkyLighter: 'rgb(249, 250, 251)',
colorSkyLight: 'rgb(244, 246, 248)',
colorSkyBase: 'rgb(223, 227, 232)',
colorSkyDark: 'rgb(196, 205, 213)',
colorInkLightest: 'rgb(145, 158, 171)',
colorInkLighter: 'rgb(99, 115, 129)',
colorInkLight: 'rgb(69, 79, 91)',
colorInkBase: 'rgb(33, 43, 54)',
colorBlackBase: 'rgb(0, 0, 0)',
spacingNone: 0,
spacingExtraTight: '4px',
spacingTight: '8px',
spacingBase: '16px',
spacingLoose: '20px',
spacingExtraLoose: '32px',
fontStackBase:
"-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif",
fontStackMonospace: "Monaco, Consolas, 'Lucida Console', monospace",
};