@shopify/polaris-tokens/dist/index.custom-properties.css

Design Tokens for the Polaris Design System

:root {
  --color-purple-lighter: rgb(246, 240, 253);
  --color-purple-light: rgb(227, 208, 255);
  --color-purple-base: rgb(156, 106, 222);
  --color-purple-dark: rgb(80, 36, 143);
  --color-purple-darker: rgb(35, 0, 81);
  --color-purple-text: rgb(80, 73, 90);
  --color-indigo-lighter: rgb(244, 245, 250);
  --color-indigo-light: rgb(179, 188, 245);
  --color-indigo-base: rgb(92, 106, 196);
  --color-indigo-dark: rgb(32, 46, 120);
  --color-indigo-darker: rgb(0, 6, 57);
  --color-indigo-text: rgb(62, 65, 85);
  --color-blue-lighter: rgb(235, 245, 250);
  --color-blue-light: rgb(180, 225, 250);
  --color-blue-base: rgb(0, 122, 206);
  --color-blue-dark: rgb(8, 78, 138);
  --color-blue-darker: rgb(0, 20, 41);
  --color-blue-text: rgb(62, 78, 87);
  --color-teal-lighter: rgb(224, 245, 245);
  --color-teal-light: rgb(183, 236, 236);
  --color-teal-base: rgb(71, 193, 191);
  --color-teal-dark: rgb(0, 132, 142);
  --color-teal-darker: rgb(0, 49, 53);
  --color-teal-text: rgb(64, 83, 82);
  --color-green-lighter: rgb(227, 241, 223);
  --color-green-light: rgb(187, 229, 179);
  --color-green-base: rgb(80, 184, 60);
  --color-green-dark: rgb(16, 128, 67);
  --color-green-darker: rgb(23, 54, 48);
  --color-green-text: rgb(65, 79, 62);
  --color-yellow-lighter: rgb(252, 241, 205);
  --color-yellow-light: rgb(255, 234, 138);
  --color-yellow-base: rgb(238, 194, 0);
  --color-yellow-dark: rgb(156, 111, 25);
  --color-yellow-darker: rgb(87, 59, 0);
  --color-yellow-text: rgb(89, 81, 48);
  --color-orange-lighter: rgb(252, 235, 219);
  --color-orange-light: rgb(255, 197, 139);
  --color-orange-base: rgb(244, 147, 66);
  --color-orange-dark: rgb(192, 87, 23);
  --color-orange-darker: rgb(74, 21, 4);
  --color-orange-text: rgb(89, 68, 48);
  --color-red-lighter: rgb(251, 234, 229);
  --color-red-light: rgb(254, 173, 154);
  --color-red-base: rgb(222, 54, 24);
  --color-red-dark: rgb(191, 7, 17);
  --color-red-darker: rgb(51, 1, 1);
  --color-red-text: rgb(88, 60, 53);
  --color-white-base: rgb(255, 255, 255);
  --color-sky-lighter: rgb(249, 250, 251);
  --color-sky-light: rgb(244, 246, 248);
  --color-sky-base: rgb(223, 227, 232);
  --color-sky-dark: rgb(196, 205, 213);
  --color-ink-lightest: rgb(145, 158, 171);
  --color-ink-lighter: rgb(99, 115, 129);
  --color-ink-light: rgb(69, 79, 91);
  --color-ink-base: rgb(33, 43, 54);
  --color-black-base: rgb(0, 0, 0);
  --spacing-none: 0;
  --spacing-extra-tight: 4px;
  --spacing-tight: 8px;
  --spacing-base: 16px;
  --spacing-loose: 20px;
  --spacing-extra-loose: 32px;
  --font-stack-base: "-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif";
  --font-stack-monospace: "Monaco, Consolas, 'Lucida Console', monospace";
}