@commercetools-uikit/design-system - npm Package Compare versions

Comparing version 0.0.0-canary-202010215528 to 0.0.0-canary-2020102215347

CHANGELOG.md

 # @commercetools-uikit/design-system
 
-## 0.0.0-canary-202010215528
+## 0.0.0-canary-2020102215347
+
 ### Patch Changes
 
+- [`3c522ed`](https://github.com/commercetools/ui-kit/commit/3c522ed7576af3a6bc6dca30777df76202ca8834) [#1688](https://github.com/commercetools/ui-kit/pull/1688) Thanks [@emmenko](https://github.com/emmenko)! - Bundling setup
 
+## 10.42.0
 
+### Minor Changes
+
+- [`04ea8ab`](https://github.com/commercetools/ui-kit/commit/04ea8abdfbada5fedd9a932743323762fb790fd0) [#1671](https://github.com/commercetools/ui-kit/pull/1671) Thanks [@emmenko](https://github.com/emmenko)! - Compile and bundle packages using [preconstruct](https://preconstruct.tools)
+
+## 10.40.0
+
+### Minor Changes
+
+- [`a2c1615`](https://github.com/commercetools/ui-kit/commit/a2c1615512b416c464310d3e67a9ee220dde47d8) [#1632](https://github.com/commercetools/ui-kit/pull/1632) Thanks [@jonnybel](https://github.com/jonnybel)! - Add new constraint design tokens system (from 0.5 to 8, with units of 0.5) and update "classic" system (xs, s, m, l, xl) to match values of the new one.
+
+## 10.39.8
+
+### Patch Changes
+
+- [`3bebfed`](https://github.com/commercetools/ui-kit/commit/3bebfed8f7468f247be2cef30e274088138166e5) [#1662](https://github.com/commercetools/ui-kit/pull/1662) Thanks [@emmenko](https://github.com/emmenko)! - Explicitly get Emotion theme from context instead of relying on the implicit behavior
+
+## 10.39.7
+
+### Patch Changes
+
+- [`050af75`](https://github.com/commercetools/ui-kit/commit/050af75aabefd0f11b498b48f5926383e7cfcf8b) [#1659](https://github.com/commercetools/ui-kit/pull/1659) Thanks [@renovate](https://github.com/apps/renovate)! - chore(deps): update all dependencies
+
+## 10.39.6
+
+### Patch Changes
+
+- [`bcb2d29`](https://github.com/commercetools/ui-kit/commit/bcb2d29956c959b09c32a1cedaee5ae2fadf034e) [#1657](https://github.com/commercetools/ui-kit/pull/1657) Thanks [@emmenko](https://github.com/emmenko)! - Fix Rollup: keep `process.env.NODE_ENV` in production bundles.
+
+## 10.39.4
+
+### Patch Changes
+
+- [`a635fcc`](https://github.com/commercetools/ui-kit/commit/a635fcc8105b81545baaa684751432769cc0d94a) [#1652](https://github.com/commercetools/ui-kit/pull/1652) Thanks [@emmenko](https://github.com/emmenko)! - Fix spacings package name (regression).
+
+## 10.39.3
+
+### Patch Changes
+
+- [`1d12f65`](https://github.com/commercetools/ui-kit/commit/1d12f65d06e237b500b27749e9ee93b4fababacb) [#1650](https://github.com/commercetools/ui-kit/pull/1650) Thanks [@emmenko](https://github.com/emmenko)! - Rebundle all packages due to a fix in Rollup.
+
+## 10.39.2
+
+### Patch Changes
+
+- [`efde835`](https://github.com/commercetools/ui-kit/commit/efde83584d00f1e3147d179f3ee8233a325b515b) [#1646](https://github.com/commercetools/ui-kit/pull/1646) Thanks [@emmenko](https://github.com/emmenko)! - Improve Rollup configuration, use babel runtime helpers
+
+## 10.39.1
+
+### Patch Changes
+
 - [`7897ced`](https://github.com/commercetools/ui-kit/commit/7897cede31440e29ce8afdb2b17fa23462f6f211) [#1642](https://github.com/commercetools/ui-kit/pull/1642) Thanks [@emmenko](https://github.com/emmenko)! - Ensure each package.json of each package has all the necessary fields.

dist/design-system.cjs.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var customProperties = {
-  colorPrimary: '#00b39e',
-  colorPrimary25: 'hsl(172.9608938547486, 100%, 25%)',
-  colorPrimary40: 'hsl(172.9608938547486, 100%, 40%)',
-  colorPrimary85: 'hsl(172.9608938547486, 100%, 85%)',
-  colorPrimary95: 'hsl(172.9608938547486, 100%, 95%)',
-  colorAccent: '#213c45',
-  colorAccent30: 'hsl(195, 35.2941176471%, 30%)',
-  colorAccent40: 'hsl(195, 35.2941176471%, 40%)',
-  colorAccent95: 'hsl(195, 35.2941176471%, 95%)',
-  colorAccent98: 'hsl(195, 35.2941176471%, 98%)',
-  colorNeutral: '#ccc',
-  colorNeutral60: 'hsl(0, 0%, 60%)',
-  colorNeutral90: 'hsl(0, 0%, 90%)',
-  colorNeutral95: 'hsl(0, 0%, 95%)',
-  colorInfo: '#078cdf',
-  colorInfo85: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
-  colorInfo95: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
-  colorWarning: '#f16d0e',
-  colorWarning95: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
-  colorError: '#e60050',
-  colorError95: 'hsl(339.1304347826087, 100%, 95%)',
-  colorSolid: '#1a1a1a',
-  colorSurface: '#fff',
-  borderRadius1: '1px',
-  borderRadius2: '2px',
-  borderRadius4: '4px',
-  borderRadius6: '6px',
-  borderRadius20: '20px',
-  fontFamilyBody: "'Open Sans', sans-serif",
-  fontSizeM: '1rem',
-  shadow1: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
-  shadow2: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)',
-  shadow3: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)',
-  shadow4: '0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)',
-  shadow5: '0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)',
-  shadow6: '0 -1px 2px 0 rgba(0, 0, 0, 0.2)',
-  shadow7: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
-  shadow8: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
-  shadow9: 'inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)',
-  shadow10: '0 0 0 1px rgba(224, 230, 237, 0.5)',
-  shadow11: '0 1px 0.5px rgba(0, 0, 0, 0.24), 0 -1px 0.75px rgba(0, 0, 0, 0.12)',
-  shadow12: '0 0 1px rgba(0, 0, 0, 0.25)',
-  shadow13: '0 0 1px rgba(0, 0, 0, 0.25)',
-  shadow14: '0 0 0.5px rgba(0, 0, 0, 0.1)',
-  shadow15: '0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)',
-  shadow16: '0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25)',
-  constraintScale: '100%',
-  constraintXs: '50px',
-  constraintS: '132px',
-  constraintM: '355px',
-  constraintL: '496px',
-  constraintXl: '768px',
-  spacingXs: '4px',
-  spacingS: '8px',
-  spacingM: '16px',
-  spacingL: '24px',
-  spacingXl: '32px',
-  transitionLinear80Ms: '80ms linear',
-  transitionEaseinout150Ms: '150ms ease-in-out',
-  transitionStandard: '200ms ease',
-  breakPointMobile: '768px',
-  breakPointDesktop: '1024px',
-  breakPointBiggerdesktop: '1280px',
-  breakPointGiantdesktop: '1680px',
-  breakPointJumbodesktop: '1920px',
-  backgroundColorForInput: '#fff',
-  backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)',
-  backgroundColorForInputWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
-  backgroundColorForInputWhenHovered: 'hsl(0, 0%, 90%)',
-  backgroundColorForTag: 'hsl(0, 0%, 95%)',
-  backgroundColorForTagWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
-  borderColorForInput: 'hsl(0, 0%, 60%)',
-  borderColorForInputWhenFocused: '#00b39e',
-  borderColorForInputWhenDisabled: '#ccc',
-  borderColorForInputWhenReadonly: '#ccc',
-  borderColorForInputWhenError: '#e60050',
-  borderColorForInputWhenWarning: '#f16d0e',
-  borderColorForTag: 'hsl(0, 0%, 60%)',
-  borderColorForTagWarning: '#f16d0e',
-  borderColorForTagWhenFocused: '#00b39e',
-  borderRadiusForInput: '6px',
-  borderRadiusForTag: '2px',
-  fontColorForInput: '#1a1a1a',
-  fontColorForInputWhenDisabled: 'hsl(0, 0%, 60%)',
-  fontColorForInputWhenError: '#e60050',
-  fontColorForInputWhenReadonly: 'hsl(0, 0%, 60%)',
-  fontColorForInputWhenWarning: '#f16d0e',
-  fontColorForTag: '#1a1a1a',
-  fontColorForTagWhenDisabled: 'hsl(0, 0%, 60%)',
-  fontColorForTextWhenInverted: '#fff',
-  fontFamily: "'Open Sans', sans-serif",
-  placeholderFontColorForInput: 'hsl(0, 0%, 60%)',
-  fontSizeForInput: '1rem',
-  shadowBoxTagWhenHovered: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
-  bigButtonHeight: '32px',
-  smallButtonHeight: '24px',
-  sizeHeightInput: '32px',
-  fontFamilyDefault: "'Open Sans', sans-serif",
-  fontSizeDefault: '1rem',
-  fontSizeSmall: '0.9231rem',
-  shadowBoxTagHover: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
-  sizeHeightTag: '26px',
-  standardInputHeight: '32px'
-};
-
-var designTokens = {
-  backgroundColorForInput: 'colorSurface',
-  backgroundColorForInputWhenSelected: 'colorAccent95',
-  backgroundColorForInputWhenDisabled: 'colorAccent98',
-  backgroundColorForInputWhenHovered: 'colorNeutral90',
-  backgroundColorForTag: 'colorNeutral95',
-  backgroundColorForTagWarning: 'colorWarning95',
-  borderColorForInput: 'colorNeutral60',
-  borderColorForInputWhenFocused: 'colorPrimary',
-  borderColorForInputWhenDisabled: 'colorNeutral',
-  borderColorForInputWhenReadonly: 'colorNeutral',
-  borderColorForInputWhenError: 'colorError',
-  borderColorForInputWhenWarning: 'colorWarning',
-  borderColorForTag: 'colorNeutral60',
-  borderColorForTagWarning: 'colorWarning',
-  borderColorForTagWhenFocused: 'colorPrimary',
-  borderRadiusForInput: 'borderRadius6',
-  borderRadiusForTag: 'borderRadius2',
-  fontColorForInput: 'colorSolid',
-  fontColorForInputWhenDisabled: 'colorNeutral60',
-  fontColorForInputWhenError: 'colorError',
-  fontColorForInputWhenReadonly: 'colorNeutral60',
-  fontColorForInputWhenWarning: 'colorWarning',
-  fontColorForTag: 'colorSolid',
-  fontColorForTagWhenDisabled: 'colorNeutral60',
-  fontColorForTextWhenInverted: 'colorSurface',
-  fontFamily: 'fontFamilyBody',
-  placeholderFontColorForInput: 'colorNeutral60',
-  fontSizeForInput: 'fontSizeM',
-  shadowBoxTagWhenHovered: 'shadow1'
-};
-
-var version = '0.0.0-canary-202010215528';
-
-exports.customProperties = customProperties;
-exports.designTokens = designTokens;
-exports.version = version;
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./design-system.cjs.prod.js");
+} else {
+  module.exports = require("./design-system.cjs.dev.js");
+}

dist/design-system.esm.js

@@ -0,1 +1,7 @@
+/*
+  THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+
+  This file is created by the 'scripts/generate-custom-properties.js' script.
+  The variables should be updated in 'materials/internals/definition.yaml'.
+*/
 var customProperties = {
@@ -49,7 +55,23 @@ colorPrimary: '#00b39e',
   constraintScale: '100%',
-  constraintXs: '50px',
-  constraintS: '132px',
-  constraintM: '355px',
-  constraintL: '496px',
-  constraintXl: '768px',
+  constraint1: '42px',
+  constraintXs: '42px',
+  constraint2: '84px',
+  constraint3: '142px',
+  constraintS: '142px',
+  constraint4: '184px',
+  constraint5: '242px',
+  constraint6: '284px',
+  constraint7: '342px',
+  constraintM: '342px',
+  constraint8: '384px',
+  constraint9: '442px',
+  constraint10: '484px',
+  constraintL: '484px',
+  constraint11: '542px',
+  constraint12: '584px',
+  constraint13: '642px',
+  constraint14: '684px',
+  constraint15: '742px',
+  constraint16: '784px',
+  constraintXl: '784px',
   spacingXs: '4px',
@@ -108,2 +130,8 @@ spacingS: '8px',
 
+/*
+  THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+
+  This file is created by the 'scripts/generate-custom-properties.js' script.
+  The variables should be updated in 'materials/internals/definition.yaml'.
+*/
 var designTokens = {
@@ -141,4 +169,5 @@ backgroundColorForInput: 'colorSurface',
 
-var version = '0.0.0-canary-202010215528';
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2020102215347';
 
 export { customProperties, designTokens, version };

materials/custom-properties.js

@@ -60,7 +60,23 @@ /*
   constraintScale: '100%',
-  constraintXs: '50px',
-  constraintS: '132px',
-  constraintM: '355px',
-  constraintL: '496px',
-  constraintXl: '768px',
+  constraint1: '42px',
+  constraintXs: '42px',
+  constraint2: '84px',
+  constraint3: '142px',
+  constraintS: '142px',
+  constraint4: '184px',
+  constraint5: '242px',
+  constraint6: '284px',
+  constraint7: '342px',
+  constraintM: '342px',
+  constraint8: '384px',
+  constraint9: '442px',
+  constraint10: '484px',
+  constraintL: '484px',
+  constraint11: '542px',
+  constraint12: '584px',
+  constraint13: '642px',
+  constraint14: '684px',
+  constraint15: '742px',
+  constraint16: '784px',
+  constraintXl: '784px',
   spacingXs: '4px',
@@ -67,0 +83,0 @@ spacingS: '8px',

materials/custom-properties.json

@@ -49,7 +49,23 @@ {
   "--constraint-scale": "100%",
-  "--constraint-xs": "50px",
-  "--constraint-s": "132px",
-  "--constraint-m": "355px",
-  "--constraint-l": "496px",
-  "--constraint-xl": "768px",
+  "--constraint-1": "42px",
+  "--constraint-xs": "42px",
+  "--constraint-2": "84px",
+  "--constraint-3": "142px",
+  "--constraint-s": "142px",
+  "--constraint-4": "184px",
+  "--constraint-5": "242px",
+  "--constraint-6": "284px",
+  "--constraint-7": "342px",
+  "--constraint-m": "342px",
+  "--constraint-8": "384px",
+  "--constraint-9": "442px",
+  "--constraint-10": "484px",
+  "--constraint-l": "484px",
+  "--constraint-11": "542px",
+  "--constraint-12": "584px",
+  "--constraint-13": "642px",
+  "--constraint-14": "684px",
+  "--constraint-15": "742px",
+  "--constraint-16": "784px",
+  "--constraint-xl": "784px",
   "--spacing-xs": "4px",
@@ -56,0 +72,0 @@ "--spacing-s": "8px",

materials/custom-properties.ts

@@ -56,7 +56,23 @@ /*
   constraintScale: '100%',
-  constraintXs: '50px',
-  constraintS: '132px',
-  constraintM: '355px',
-  constraintL: '496px',
-  constraintXl: '768px',
+  constraint1: '42px',
+  constraintXs: '42px',
+  constraint2: '84px',
+  constraint3: '142px',
+  constraintS: '142px',
+  constraint4: '184px',
+  constraint5: '242px',
+  constraint6: '284px',
+  constraint7: '342px',
+  constraintM: '342px',
+  constraint8: '384px',
+  constraint9: '442px',
+  constraint10: '484px',
+  constraintL: '484px',
+  constraint11: '542px',
+  constraint12: '584px',
+  constraint13: '642px',
+  constraint14: '684px',
+  constraint15: '742px',
+  constraint16: '784px',
+  constraintXl: '784px',
   spacingXs: '4px',
@@ -166,7 +182,23 @@ spacingS: '8px',
   constraintScale: '100%',
-  constraintXs: '50px',
-  constraintS: '132px',
-  constraintM: '355px',
-  constraintL: '496px',
-  constraintXl: '768px',
+  constraint1: '42px',
+  constraintXs: '42px',
+  constraint2: '84px',
+  constraint3: '142px',
+  constraintS: '142px',
+  constraint4: '184px',
+  constraint5: '242px',
+  constraint6: '284px',
+  constraint7: '342px',
+  constraintM: '342px',
+  constraint8: '384px',
+  constraint9: '442px',
+  constraint10: '484px',
+  constraintL: '484px',
+  constraint11: '542px',
+  constraint12: '584px',
+  constraint13: '642px',
+  constraint14: '684px',
+  constraint15: '742px',
+  constraint16: '784px',
+  constraintXl: '784px',
   spacingXs: '4px',
@@ -173,0 +205,0 @@ spacingS: '8px',

materials/internals/tokens.story.js

@@ -9,3 +9,6 @@ import React from 'react';
 import definition from './definition.yaml';
+import deprecatedTokens from './deprecated-tokens';
 
+const getIsDeprecated = (token) => deprecatedTokens.includes(token);
+
 const Table = styled.table`
@@ -120,3 +123,6 @@ border: 1px solid #ccc;
               <td>
-                <Token>{name}</Token>
+                <>
+                  <Token>{name}</Token>
+                  {getIsDeprecated(name) && <DeprecationBadge />}
+                </>
               </td>
@@ -123,0 +129,0 @@ <td>{props.renderSample(value, name)}</td>

package.json

 {
   "name": "@commercetools-uikit/design-system",
   "description": "Core package of the commercetools design system.",
-  "version": "0.0.0-canary-202010215528",
+  "version": "0.0.0-canary-2020102215347",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
@@ -32,7 +32,9 @@ "repository": {
     "prepare": "../scripts/version.js replace",
-    "prebuild": "rimraf dist && yarn build:tokens",
-    "build": "cross-env NODE_ENV=production rollup -c ../rollup.config.js -i ./index.js",
     "build:tokens": "node ./scripts/generate-custom-properties.js",
     "build:tokens:watch": "nodemon -e yaml --quiet --watch materials/internals --exec 'yarn build:tokens'"
+  },
+  "dependencies": {
+    "@babel/runtime": "7.12.5",
+    "@babel/runtime-corejs3": "7.12.5"
   }
 }

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

91047

increased by18.44%

Number of package files

17

increased by21.43%

Lines of code

1734

increased by21.77%

Worsened metrics

Dependency count

2

increased byInfinity%

Number of low supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@babel/runtime@7.12.5

• + Added@babel/runtime-corejs3@7.12.5

• + Added@babel/runtime@7.12.5(transitive)

• + Added@babel/runtime-corejs3@7.12.5(transitive)

• + Addedcore-js-pure@3.40.0(transitive)

• + Addedregenerator-runtime@0.13.11(transitive)