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

Comparing version 0.0.0-canary-20201011131630 to 0.0.0-canary-2020101711349

CHANGELOG.md

 # @commercetools-uikit/design-system
 
-## 0.0.0-canary-20201011131630
+## 0.0.0-canary-2020101711349
 
+### 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
@@ -6,0 +12,0 @@

dist/design-system.cjs.js

@@ -59,7 +59,23 @@ 'use strict';
   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',
@@ -157,3 +173,3 @@ spacingS: '8px',
 // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '0.0.0-canary-20201011131630';
+var version = '0.0.0-canary-2020101711349';
 
@@ -160,0 +176,0 @@ exports.customProperties = customProperties;

dist/design-system.es.js

@@ -55,7 +55,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',
@@ -153,5 +169,5 @@ spacingS: '8px',
 // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '0.0.0-canary-20201011131630';
+var version = '0.0.0-canary-2020101711349';
 
 export { customProperties, designTokens, version };
 //# sourceMappingURL=design-system.es.js.map

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-20201011131630",
+  "version": "0.0.0-canary-2020101711349",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
@@ -6,0 +6,0 @@ "repository": {

No alert changes

Improved metrics

Total package byte prevSize

112142

increased by5.87%

Number of package files

17

increased by6.25%

Lines of code

1573

increased by8.63%

No dependency changes