polaris_tokens 2.17.0 → 2.21.1

data/dist/index.d.ts

@@ -1,77 +1,149 @@
-declare interface Tokens {
-  colorBlack: "rgb(0, 0, 0)";
-  colorBlue: "rgb(0, 111, 187)";
-  colorBlueDark: "rgb(8, 78, 138)";
-  colorBlueDarker: "rgb(0, 20, 41)";
-  colorBlueLight: "rgb(180, 225, 250)";
-  colorBlueLighter: "rgb(235, 245, 250)";
-  colorBlueText: "rgb(62, 78, 87)";
-  colorGreen: "rgb(80, 184, 60)";
-  colorGreenDark: "rgb(16, 128, 67)";
-  colorGreenDarker: "rgb(23, 54, 48)";
-  colorGreenLight: "rgb(187, 229, 179)";
-  colorGreenLighter: "rgb(227, 241, 223)";
-  colorGreenText: "rgb(65, 79, 62)";
-  colorIndigo: "rgb(92, 106, 196)";
-  colorIndigoDark: "rgb(32, 46, 120)";
-  colorIndigoDarker: "rgb(0, 6, 57)";
-  colorIndigoLight: "rgb(179, 188, 245)";
-  colorIndigoLighter: "rgb(244, 245, 250)";
-  colorIndigoText: "rgb(62, 65, 85)";
-  colorInk: "rgb(33, 43, 54)";
-  colorInkLight: "rgb(69, 79, 91)";
-  colorInkLighter: "rgb(99, 115, 129)";
-  colorInkLightest: "rgb(145, 158, 171)";
-  colorOrange: "rgb(244, 147, 66)";
-  colorOrangeDark: "rgb(192, 87, 23)";
-  colorOrangeDarker: "rgb(74, 21, 4)";
-  colorOrangeLight: "rgb(255, 197, 139)";
-  colorOrangeLighter: "rgb(252, 235, 219)";
-  colorOrangeText: "rgb(89, 68, 48)";
-  colorPurple: "rgb(156, 106, 222)";
-  colorPurpleDark: "rgb(80, 36, 143)";
-  colorPurpleDarker: "rgb(35, 0, 81)";
-  colorPurpleLight: "rgb(227, 208, 255)";
-  colorPurpleLighter: "rgb(246, 240, 253)";
-  colorPurpleText: "rgb(80, 73, 90)";
-  colorRed: "rgb(222, 54, 24)";
-  colorRedDark: "rgb(191, 7, 17)";
-  colorRedDarker: "rgb(51, 1, 1)";
-  colorRedLight: "rgb(254, 173, 154)";
-  colorRedLighter: "rgb(251, 234, 229)";
-  colorRedText: "rgb(88, 60, 53)";
-  colorSky: "rgb(223, 227, 232)";
-  colorSkyDark: "rgb(196, 205, 213)";
-  colorSkyLight: "rgb(244, 246, 248)";
-  colorSkyLighter: "rgb(249, 250, 251)";
-  colorTeal: "rgb(71, 193, 191)";
-  colorTealDark: "rgb(0, 132, 142)";
-  colorTealDarker: "rgb(0, 49, 53)";
-  colorTealLight: "rgb(183, 236, 236)";
-  colorTealLighter: "rgb(224, 245, 245)";
-  colorTealText: "rgb(64, 83, 82)";
-  colorWhite: "rgb(255, 255, 255)";
-  colorYellow: "rgb(238, 194, 0)";
-  colorYellowDark: "rgb(138, 97, 22)";
-  colorYellowDarker: "rgb(87, 59, 0)";
-  colorYellowLight: "rgb(255, 234, 138)";
-  colorYellowLighter: "rgb(252, 241, 205)";
-  colorYellowText: "rgb(89, 81, 48)";
-  durationBase: 200;
-  durationFast: 100;
-  durationNone: 0;
-  durationSlow: 300;
-  durationSlower: 400;
-  durationSlowest: 500;
-  fontStackBase: "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif";
-  fontStackMonospace: "Monaco, Consolas, 'Lucida Console', monospace";
-  spacingBase: "16px";
-  spacingBaseTight: "12px";
-  spacingExtraLoose: "32px";
-  spacingExtraTight: "4px";
-  spacingLoose: "20px";
-  spacingNone: 0;
-  spacingTight: "8px";
-}
-declare let tokens: Tokens;
-export = tokens;
+export declare const colorPurpleText = "rgb(80, 73, 90)";
+export declare const colorPurpleDarker = "rgb(35, 0, 81)";
+export declare const colorPurpleDark = "rgb(80, 36, 143)";
+export declare const colorPurple = "rgb(156, 106, 222)";
+export declare const colorPurpleLight = "rgb(227, 208, 255)";
+export declare const colorPurpleLighter = "rgb(246, 240, 253)";
+export declare const colorIndigoText = "rgb(62, 65, 85)";
+export declare const colorIndigoDarker = "rgb(0, 6, 57)";
+export declare const colorIndigoDark = "rgb(32, 46, 120)";
+export declare const colorIndigo = "rgb(92, 106, 196)";
+export declare const colorIndigoLight = "rgb(179, 188, 245)";
+export declare const colorIndigoLighter = "rgb(244, 245, 250)";
+export declare const colorBlueText = "rgb(62, 78, 87)";
+export declare const colorBlueDarker = "rgb(0, 20, 41)";
+export declare const colorBlueDark = "rgb(8, 78, 138)";
+export declare const colorBlue = "rgb(0, 111, 187)";
+export declare const colorBlueLight = "rgb(180, 225, 250)";
+export declare const colorBlueLighter = "rgb(235, 245, 250)";
+export declare const colorTealText = "rgb(64, 83, 82)";
+export declare const colorTealDarker = "rgb(0, 49, 53)";
+export declare const colorTealDark = "rgb(0, 132, 142)";
+export declare const colorTeal = "rgb(71, 193, 191)";
+export declare const colorTealLight = "rgb(183, 236, 236)";
+export declare const colorTealLighter = "rgb(224, 245, 245)";
+export declare const colorGreenText = "rgb(65, 79, 62)";
+export declare const colorGreenDarker = "rgb(23, 54, 48)";
+export declare const colorGreenDark = "rgb(16, 128, 67)";
+export declare const colorGreen = "rgb(80, 184, 60)";
+export declare const colorGreenLight = "rgb(187, 229, 179)";
+export declare const colorGreenLighter = "rgb(227, 241, 223)";
+export declare const colorYellowText = "rgb(89, 81, 48)";
+export declare const colorYellowDarker = "rgb(87, 59, 0)";
+export declare const colorYellowDark = "rgb(138, 97, 22)";
+export declare const colorYellow = "rgb(238, 194, 0)";
+export declare const colorYellowLight = "rgb(255, 234, 138)";
+export declare const colorYellowLighter = "rgb(252, 241, 205)";
+export declare const colorOrangeText = "rgb(89, 68, 48)";
+export declare const colorOrangeDarker = "rgb(74, 21, 4)";
+export declare const colorOrangeDark = "rgb(192, 87, 23)";
+export declare const colorOrange = "rgb(244, 147, 66)";
+export declare const colorOrangeLight = "rgb(255, 197, 139)";
+export declare const colorOrangeLighter = "rgb(252, 235, 219)";
+export declare const colorRedText = "rgb(88, 60, 53)";
+export declare const colorRedDarker = "rgb(51, 1, 1)";
+export declare const colorRedDark = "rgb(191, 7, 17)";
+export declare const colorRed = "rgb(222, 54, 24)";
+export declare const colorRedLight = "rgb(254, 173, 154)";
+export declare const colorRedLighter = "rgb(251, 234, 229)";
+export declare const colorInk = "rgb(33, 43, 54)";
+export declare const colorInkLight = "rgb(69, 79, 91)";
+export declare const colorInkLighter = "rgb(99, 115, 129)";
+export declare const colorInkLightest = "rgb(145, 158, 171)";
+export declare const colorSkyDark = "rgb(196, 205, 213)";
+export declare const colorSky = "rgb(223, 227, 232)";
+export declare const colorSkyLight = "rgb(244, 246, 248)";
+export declare const colorSkyLighter = "rgb(249, 250, 251)";
+export declare const colorBlack = "rgb(0, 0, 0)";
+export declare const colorWhite = "rgb(255, 255, 255)";
+export declare const durationNone = 0;
+export declare const durationFast = 100;
+export declare const durationBase = 200;
+export declare const durationSlow = 300;
+export declare const durationSlower = 400;
+export declare const durationSlowest = 500;
+export declare const spacingNone = 0;
+export declare const spacingExtraTight = "4px";
+export declare const spacingTight = "8px";
+export declare const spacingBaseTight = "12px";
+export declare const spacingBase = "16px";
+export declare const spacingLoose = "20px";
+export declare const spacingExtraLoose = "32px";
+export declare const fontStackBase = "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif";
+export declare const fontStackMonospace = "Monaco, Consolas, 'Lucida Console', monospace";
+declare const _default: {
+    colorPurpleText: string;
+    colorPurpleDarker: string;
+    colorPurpleDark: string;
+    colorPurple: string;
+    colorPurpleLight: string;
+    colorPurpleLighter: string;
+    colorIndigoText: string;
+    colorIndigoDarker: string;
+    colorIndigoDark: string;
+    colorIndigo: string;
+    colorIndigoLight: string;
+    colorIndigoLighter: string;
+    colorBlueText: string;
+    colorBlueDarker: string;
+    colorBlueDark: string;
+    colorBlue: string;
+    colorBlueLight: string;
+    colorBlueLighter: string;
+    colorTealText: string;
+    colorTealDarker: string;
+    colorTealDark: string;
+    colorTeal: string;
+    colorTealLight: string;
+    colorTealLighter: string;
+    colorGreenText: string;
+    colorGreenDarker: string;
+    colorGreenDark: string;
+    colorGreen: string;
+    colorGreenLight: string;
+    colorGreenLighter: string;
+    colorYellowText: string;
+    colorYellowDarker: string;
+    colorYellowDark: string;
+    colorYellow: string;
+    colorYellowLight: string;
+    colorYellowLighter: string;
+    colorOrangeText: string;
+    colorOrangeDarker: string;
+    colorOrangeDark: string;
+    colorOrange: string;
+    colorOrangeLight: string;
+    colorOrangeLighter: string;
+    colorRedText: string;
+    colorRedDarker: string;
+    colorRedDark: string;
+    colorRed: string;
+    colorRedLight: string;
+    colorRedLighter: string;
+    colorInk: string;
+    colorInkLight: string;
+    colorInkLighter: string;
+    colorInkLightest: string;
+    colorSkyDark: string;
+    colorSky: string;
+    colorSkyLight: string;
+    colorSkyLighter: string;
+    colorBlack: string;
+    colorWhite: string;
+    durationNone: number;
+    durationFast: number;
+    durationBase: number;
+    durationSlow: number;
+    durationSlower: number;
+    durationSlowest: number;
+    spacingNone: number;
+    spacingExtraTight: string;
+    spacingTight: string;
+    spacingBaseTight: string;
+    spacingBase: string;
+    spacingLoose: string;
+    spacingExtraLoose: string;
+    fontStackBase: string;
+    fontStackMonospace: string;
+};
+export default _default;

data/dist/index.esm.js

@@ -0,0 +1,166 @@
+export const colorPurpleText = 'rgb(80, 73, 90)';
+export const colorPurpleDarker = 'rgb(35, 0, 81)';
+export const colorPurpleDark = 'rgb(80, 36, 143)';
+export const colorPurple = 'rgb(156, 106, 222)';
+export const colorPurpleLight = 'rgb(227, 208, 255)';
+export const colorPurpleLighter = 'rgb(246, 240, 253)';
+export const colorIndigoText = 'rgb(62, 65, 85)';
+export const colorIndigoDarker = 'rgb(0, 6, 57)';
+export const colorIndigoDark = 'rgb(32, 46, 120)';
+export const colorIndigo = 'rgb(92, 106, 196)';
+export const colorIndigoLight = 'rgb(179, 188, 245)';
+export const colorIndigoLighter = 'rgb(244, 245, 250)';
+export const colorBlueText = 'rgb(62, 78, 87)';
+export const colorBlueDarker = 'rgb(0, 20, 41)';
+export const colorBlueDark = 'rgb(8, 78, 138)';
+export const colorBlue = 'rgb(0, 111, 187)';
+export const colorBlueLight = 'rgb(180, 225, 250)';
+export const colorBlueLighter = 'rgb(235, 245, 250)';
+export const colorTealText = 'rgb(64, 83, 82)';
+export const colorTealDarker = 'rgb(0, 49, 53)';
+export const colorTealDark = 'rgb(0, 132, 142)';
+export const colorTeal = 'rgb(71, 193, 191)';
+export const colorTealLight = 'rgb(183, 236, 236)';
+export const colorTealLighter = 'rgb(224, 245, 245)';
+export const colorGreenText = 'rgb(65, 79, 62)';
+export const colorGreenDarker = 'rgb(23, 54, 48)';
+export const colorGreenDark = 'rgb(16, 128, 67)';
+export const colorGreen = 'rgb(80, 184, 60)';
+export const colorGreenLight = 'rgb(187, 229, 179)';
+export const colorGreenLighter = 'rgb(227, 241, 223)';
+export const colorYellowText = 'rgb(89, 81, 48)';
+export const colorYellowDarker = 'rgb(87, 59, 0)';
+export const colorYellowDark = 'rgb(138, 97, 22)';
+export const colorYellow = 'rgb(238, 194, 0)';
+export const colorYellowLight = 'rgb(255, 234, 138)';
+export const colorYellowLighter = 'rgb(252, 241, 205)';
+export const colorOrangeText = 'rgb(89, 68, 48)';
+export const colorOrangeDarker = 'rgb(74, 21, 4)';
+export const colorOrangeDark = 'rgb(192, 87, 23)';
+export const colorOrange = 'rgb(244, 147, 66)';
+export const colorOrangeLight = 'rgb(255, 197, 139)';
+export const colorOrangeLighter = 'rgb(252, 235, 219)';
+export const colorRedText = 'rgb(88, 60, 53)';
+export const colorRedDarker = 'rgb(51, 1, 1)';
+export const colorRedDark = 'rgb(191, 7, 17)';
+export const colorRed = 'rgb(222, 54, 24)';
+export const colorRedLight = 'rgb(254, 173, 154)';
+export const colorRedLighter = 'rgb(251, 234, 229)';
+export const colorInk = 'rgb(33, 43, 54)';
+export const colorInkLight = 'rgb(69, 79, 91)';
+export const colorInkLighter = 'rgb(99, 115, 129)';
+export const colorInkLightest = 'rgb(145, 158, 171)';
+export const colorSkyDark = 'rgb(196, 205, 213)';
+export const colorSky = 'rgb(223, 227, 232)';
+export const colorSkyLight = 'rgb(244, 246, 248)';
+export const colorSkyLighter = 'rgb(249, 250, 251)';
+export const colorBlack = 'rgb(0, 0, 0)';
+export const colorWhite = 'rgb(255, 255, 255)';
+export const durationNone = 0;
+export const durationFast = 100;
+export const durationBase = 200;
+export const durationSlow = 300;
+export const durationSlower = 400;
+export const durationSlowest = 500;
+export const spacingNone = 0;
+export const spacingExtraTight = '4px';
+export const spacingTight = '8px';
+export const spacingBaseTight = '12px';
+export const spacingBase = '16px';
+export const spacingLoose = '20px';
+export const spacingExtraLoose = '32px';
+export const fontStackBase = "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif";
+export const fontStackMonospace = "Monaco, Consolas, 'Lucida Console', monospace";
+
+// When this package shipped only CJS, bundlers applied some cjs-to-esm interop
+// dark magic that meant you could access content from index.common.js from an
+// esm file in many ways.
+// The following were all valid ways to access tokens:
+//
+// import {colorInk as namedImport} from '@shopify/polaris-tokens'
+// import * as namespaceImport from '@shopify/polaris-tokens'
+// import defaultImport from '@shopify/polaris-tokens'
+// console.log(colorInk, namespaceImport.colorInk, defaultImport.colorInk)
+//
+// In order to avoid adding this esm file being a breaking change, we must
+// provide a default export to maintain compatibility.
+// This is a deprecated way of accessing tokens. Consumers should use either
+// named imports (`import {colorInk}`) or a namespace import
+// (`import * as tokens`).
+// This default export should be removed in polaris-tokens v3 if we don't
+// remove this file entirely.
+export default {
+  colorPurpleText,
+  colorPurpleDarker,
+  colorPurpleDark,
+  colorPurple,
+  colorPurpleLight,
+  colorPurpleLighter,
+  colorIndigoText,
+  colorIndigoDarker,
+  colorIndigoDark,
+  colorIndigo,
+  colorIndigoLight,
+  colorIndigoLighter,
+  colorBlueText,
+  colorBlueDarker,
+  colorBlueDark,
+  colorBlue,
+  colorBlueLight,
+  colorBlueLighter,
+  colorTealText,
+  colorTealDarker,
+  colorTealDark,
+  colorTeal,
+  colorTealLight,
+  colorTealLighter,
+  colorGreenText,
+  colorGreenDarker,
+  colorGreenDark,
+  colorGreen,
+  colorGreenLight,
+  colorGreenLighter,
+  colorYellowText,
+  colorYellowDarker,
+  colorYellowDark,
+  colorYellow,
+  colorYellowLight,
+  colorYellowLighter,
+  colorOrangeText,
+  colorOrangeDarker,
+  colorOrangeDark,
+  colorOrange,
+  colorOrangeLight,
+  colorOrangeLighter,
+  colorRedText,
+  colorRedDarker,
+  colorRedDark,
+  colorRed,
+  colorRedLight,
+  colorRedLighter,
+  colorInk,
+  colorInkLight,
+  colorInkLighter,
+  colorInkLightest,
+  colorSkyDark,
+  colorSky,
+  colorSkyLight,
+  colorSkyLighter,
+  colorBlack,
+  colorWhite,
+  durationNone,
+  durationFast,
+  durationBase,
+  durationSlow,
+  durationSlower,
+  durationSlowest,
+  spacingNone,
+  spacingExtraTight,
+  spacingTight,
+  spacingBaseTight,
+  spacingBase,
+  spacingLoose,
+  spacingExtraLoose,
+  fontStackBase,
+  fontStackMonospace,
+}

data/index.js

@@ -1 +1,5 @@
+// This file used to be the main entrpoint for the package, but now main points
+// directly to `dist/index.common.js`. This file is left in the unlikely event
+// that somebody is importing `@shopify/polaris-tokens/index.js`.
+// This file can be removed as a breaking change in polaris-tokens v3.
 module.exports = require('./dist/index.common.js');

data/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@shopify/polaris-tokens",
-  "version": "2.17.0",
+  "version": "2.21.1",
   "description": "Design Tokens for the Polaris Design System",
-  "main": "index.js",
+  "main": "dist/index.common.js",
+  "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "test": "sewing-kit test",
@@ -12,7 +13,7 @@
     "build:ts": "tsc -p tsconfig.build.json",
     "build:gulp": "gulp",
     "postbuild": "yarn run format",
-    "format": "prettier './dist-modern/**/*.{js,json}' --write && prettier './dist-modern/**/*.ts' --write --parser typescript",
+    "format": "prettier './dist-modern/**/*.{js,json,css}' --write && prettier './dist-modern/**/*.ts' --write --parser typescript",
     "type-check": "sewing-kit type-check",
     "lint": "sewing-kit lint"
   },

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: polaris_tokens
 version: !ruby/object:Gem::Version
-  version: 2.17.0
+  version: 2.21.1
 platform: ruby
 authors:
 - Shopify
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-01-14 00:00:00.000000000 Z
+date: 2021-03-03 00:00:00.000000000 Z
 dependencies: []
 description: Design Tokens for the Polaris Design System
 email:
@@ -23,11 +23,24 @@ files:
 - dist-modern/palette/base.dark.figma.json
 - dist-modern/palette/base.dark.ios.json
 - dist-modern/palette/base.dark.json
+- dist-modern/palette/base.dark.polaris.custom-properties.css
 - dist-modern/palette/base.light.android.xml
 - dist-modern/palette/base.light.figma.json
 - dist-modern/palette/base.light.ios.json
 - dist-modern/palette/base.light.json
+- dist-modern/palette/base.light.polaris.custom-properties.css
+- dist-modern/palette/mfp-ui.dark.android.xml
+- dist-modern/palette/mfp-ui.dark.figma.json
+- dist-modern/palette/mfp-ui.dark.ios.json
+- dist-modern/palette/mfp-ui.dark.json
+- dist-modern/palette/mfp-ui.dark.polaris.custom-properties.css
+- dist-modern/palette/mfp-ui.light.android.xml
+- dist-modern/palette/mfp-ui.light.figma.json
+- dist-modern/palette/mfp-ui.light.ios.json
+- dist-modern/palette/mfp-ui.light.json
+- dist-modern/palette/mfp-ui.light.polaris.custom-properties.css
 - dist-modern/theme/base.json
+- dist-modern/theme/mfp-ui.json
 - dist/Polaris.ase
 - dist/Polaris.clr
 - dist/Polaris.sketchpalette
@@ -57,6 +70,7 @@ files:
 - dist/index.common.js
 - dist/index.custom-properties.css
 - dist/index.d.ts
+- dist/index.esm.js
 - dist/index.json
 - dist/index.map.scss
 - dist/index.raw.json