@looker/design-tokens - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0-alpha.0

CHANGELOG.md

@@ -6,2 +6,21 @@ # Change Log
 
+# [2.1.0-alpha.0](https://github.com/looker-open-source/components/compare/@looker/design-tokens@2.0.0...@looker/design-tokens@2.1.0-alpha.0) (2021-07-23)
+
+
+### Bug Fixes
+
+* move lodash to peer dependencies ([#2580](https://github.com/looker-open-source/components/issues/2580)) ([a1a94a3](https://github.com/looker-open-source/components/commit/a1a94a3f501b481aaf73ec5305123965853cc508)), closes [/github.com/looker-open-source/components/blame/12658bddd81bf4dc1625865de424cc674ea07e1c/packages/components/README.md#L15](https://github.com//github.com/looker-open-source/components/blame/12658bddd81bf4dc1625865de424cc674ea07e1c/packages/components/README.md/issues/L15)
+* **CardContent:** Properly absorb padding (pN) values ([#2494](https://github.com/looker-open-source/components/issues/2494)) ([148cd49](https://github.com/looker-open-source/components/commit/148cd4945be2bf4dffb91458a2f1761d6c54d6cd))
+
+
+### Features
+
+* **ComponentsProvider:** ThemeCustomizations should support overloading fontSources ([#2641](https://github.com/looker-open-source/components/issues/2641)) ([9dd88e7](https://github.com/looker-open-source/components/commit/9dd88e733af0ac726b924827934457c62ad2ecac))
+* Consistently support props across "Semantic Layout" components as well as `Grid` ([#2596](https://github.com/looker-open-source/components/issues/2596)) ([227eda3](https://github.com/looker-open-source/components/commit/227eda35b5977abb398dc1be3822a6ed76ecad49))
+* **Tree:** Add virtualization support ([#2481](https://github.com/looker-open-source/components/issues/2481)) ([dc2619d](https://github.com/looker-open-source/components/commit/dc2619d0fb541925cd1d5312ea4d04979e34edf6))
+
+
+
+
+
 # [2.0.0](https://github.com/looker-open-source/components/compare/@looker/design-tokens@2.0.0-alpha.1...@looker/design-tokens@2.0.0) (2021-06-22)
@@ -8,0 +27,0 @@

lib/cjs/color/types/blends.js

 "use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textColors = exports.uiColors = void 0;
+const uiColors = ['ui1', 'ui2', 'ui3', 'ui4', 'ui5'];
+exports.uiColors = uiColors;
+const textColors = ['text1', 'text2', 'text3', 'text4', 'text5'];
+exports.textColors = textColors;
 //# sourceMappingURL=blends.js.map

lib/cjs/color/types/derivative.js

 "use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.derivativeColors = void 0;
+const derivativeColors = ['field', 'inverse', 'inverseOn', 'neutral', 'linkInteractive', 'informAccent', 'positiveAccent', 'warnAccent'];
+exports.derivativeColors = derivativeColors;
 //# sourceMappingURL=derivative.js.map

lib/cjs/color/types/index.js

@@ -24,6 +24,6 @@ "use strict";
 });
-Object.defineProperty(exports, "textColor", {
+Object.defineProperty(exports, "specifiableTextColors", {
   enumerable: true,
   get: function get() {
-    return _textColor.textColor;
+    return _specifiable.specifiableTextColors;
   }
@@ -37,8 +37,36 @@ });
 });
+Object.defineProperty(exports, "uiColors", {
+  enumerable: true,
+  get: function get() {
+    return _blends.uiColors;
+  }
+});
+Object.defineProperty(exports, "textColors", {
+  enumerable: true,
+  get: function get() {
+    return _blends.textColors;
+  }
+});
+Object.defineProperty(exports, "derivativeColors", {
+  enumerable: true,
+  get: function get() {
+    return _derivative.derivativeColors;
+  }
+});
+Object.defineProperty(exports, "textColor", {
+  enumerable: true,
+  get: function get() {
+    return _textColor.textColor;
+  }
+});
 
 var _specifiable = require("./specifiable");
 
+var _backgroundColor = require("./backgroundColor");
+
+var _blends = require("./blends");
+
+var _derivative = require("./derivative");
+
 var _textColor = require("./textColor");
-
-var _backgroundColor = require("./backgroundColor");
 //# sourceMappingURL=index.js.map

lib/cjs/color/types/specifiable.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.specifiableColors = exports.intentColors = exports.coreColors = void 0;
+exports.specifiableColors = exports.specifiableTextColors = exports.intentColors = exports.coreColors = void 0;
 
@@ -13,6 +13,8 @@ require("core-js/modules/es.array.iterator.js");
 exports.coreColors = coreColors;
-const intentColors = ['link', 'critical', 'warn', 'positive', 'inform'];
+const intentColors = ['link', 'critical', 'warn', 'positive', 'inform', 'calculation', 'dimension', 'measure'];
 exports.intentColors = intentColors;
+const specifiableTextColors = ['title', 'body'];
+exports.specifiableTextColors = specifiableTextColors;
 const specifiableColors = [...coreColors, ...intentColors];
 exports.specifiableColors = specifiableColors;
 //# sourceMappingURL=specifiable.js.map

lib/cjs/system/index.js

@@ -8,3 +8,5 @@ "use strict";
   border: true,
+  borderRadius: true,
   boxShadow: true,
+  backgroundPosition: true,
   color: true,
@@ -14,4 +16,11 @@ display: true,
   fontSize: true,
+  fontFamily: true,
+  fontWeight: true,
+  lineHeight: true,
+  letterSpacing: true,
+  fontStyle: true,
   height: true,
   layout: true,
+  maxWidth: true,
+  minWidth: true,
   overflow: true,
@@ -22,3 +31,6 @@ padding: true,
   size: true,
+  system: true,
+  textAlign: true,
   typography: true,
+  variant: true,
   verticalAlign: true,
@@ -39,2 +51,8 @@ width: true,
 });
+Object.defineProperty(exports, "borderRadius", {
+  enumerable: true,
+  get: function get() {
+    return _styledSystem.borderRadius;
+  }
+});
 Object.defineProperty(exports, "boxShadow", {
@@ -46,2 +64,8 @@ enumerable: true,
 });
+Object.defineProperty(exports, "backgroundPosition", {
+  enumerable: true,
+  get: function get() {
+    return _styledSystem.backgroundPosition;
+  }
+});
 Object.defineProperty(exports, "color", {
@@ -71,2 +95,32 @@ enumerable: true,
 });
+Object.defineProperty(exports, "fontFamily", {
+  enumerable: true,
+  get: function get() {
+    return _styledSystem.fontFamily;
+  }
+});
+Object.defineProperty(exports, "fontWeight", {
+  enumerable: true,
+  get: function get() {
+    return _styledSystem.fontWeight;
+  }
+});
+Object.defineProperty(exports, "lineHeight", {
+  enumerable: true,
+  get: function get() {
+    return _styledSystem.lineHeight;
+  }
+});
+Object.defineProperty(exports, "letterSpacing", {
+  enumerable: true,
+  get: function get() {
+    return _styledSystem.letterSpacing;
+  }
+});
+Object.defineProperty(exports, "fontStyle", {
+  enumerable: true,
+  get: function get() {
+    return _styledSystem.fontStyle;
+  }
+});
 Object.defineProperty(exports, "height", {
@@ -84,2 +138,14 @@ enumerable: true,
 });
+Object.defineProperty(exports, "maxWidth", {
+  enumerable: true,
+  get: function get() {
+    return _styledSystem.maxWidth;
+  }
+});
+Object.defineProperty(exports, "minWidth", {
+  enumerable: true,
+  get: function get() {
+    return _styledSystem.minWidth;
+  }
+});
 Object.defineProperty(exports, "overflow", {
@@ -115,2 +181,14 @@ enumerable: true,
 });
+Object.defineProperty(exports, "system", {
+  enumerable: true,
+  get: function get() {
+    return _styledSystem.system;
+  }
+});
+Object.defineProperty(exports, "textAlign", {
+  enumerable: true,
+  get: function get() {
+    return _styledSystem.textAlign;
+  }
+});
 Object.defineProperty(exports, "typography", {
@@ -122,2 +200,8 @@ enumerable: true,
 });
+Object.defineProperty(exports, "variant", {
+  enumerable: true,
+  get: function get() {
+    return _styledSystem.variant;
+  }
+});
 Object.defineProperty(exports, "verticalAlign", {
@@ -124,0 +208,0 @@ enumerable: true,

lib/cjs/theme/utils/generateTheme.js

@@ -29,2 +29,3 @@ "use strict";
 
+  const fontSources = customizations.fontSources;
   const fonts = customizations.fontFamilies ? (0, _typography.generateFontFamilies)(theme.fonts, _tokens.defaultFontFallbacks, customizations.fontFamilies) : theme.fonts;
@@ -34,2 +35,3 @@ const colors = customizations.colors ? (0, _color.generateColors)(theme.colors, customizations.colors) : theme.colors;
     colors,
+    fontSources,
     fonts
@@ -36,0 +38,0 @@ });

lib/cjs/utils/index.js

@@ -46,2 +46,15 @@ "use strict";
 
+var _paddingDefaultsHelper = require("./paddingDefaultsHelper");
+
+Object.keys(_paddingDefaultsHelper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _paddingDefaultsHelper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _paddingDefaultsHelper[key];
+    }
+  });
+});
+
 var _pick = require("./pick");
@@ -48,0 +61,0 @@

lib/cjs/utils/typography/googleFontUrl.js

@@ -10,2 +10,4 @@ "use strict";
 
+require("core-js/modules/es.regexp.exec.js");
+
 require("core-js/modules/es.string.replace.js");
@@ -12,0 +14,0 @@

lib/cjs/utils/typography/sanitizeFont.js

@@ -10,2 +10,4 @@ "use strict";
 
+require("core-js/modules/es.regexp.exec.js");
+
 require("core-js/modules/es.string.split.js");
@@ -12,0 +14,0 @@

lib/color/types/blends.d.ts

@@ -10,2 +10,3 @@ export interface BlendColors extends TextColors, UIColors {
 }
+export declare const uiColors: Array<keyof UIColors>;
 export interface TextColors {
@@ -18,1 +19,2 @@ text1: string;
 }
+export declare const textColors: Array<keyof TextColors>;

lib/color/types/blends.js

@@ -1,2 +0,3 @@
-
+export var uiColors = ['ui1', 'ui2', 'ui3', 'ui4', 'ui5'];
+export var textColors = ['text1', 'text2', 'text3', 'text4', 'text5'];
 //# sourceMappingURL=blends.js.map

lib/color/types/derivative.d.ts

@@ -14,2 +14,3 @@ import { SpecifiableTextColors } from './specifiable';
 }
+export declare const derivativeColors: Array<keyof DerivativeColors>;
 export {};

lib/color/types/derivative.js

@@ -1,2 +0,2 @@
-
+export var derivativeColors = ['field', 'inverse', 'inverseOn', 'neutral', 'linkInteractive', 'informAccent', 'positiveAccent', 'warnAccent'];
 //# sourceMappingURL=derivative.js.map

lib/color/types/index.d.ts

@@ -14,3 +14,6 @@ import { BlendColors } from './blends';
 export type { TextColorProps } from './textColor';
+export { backgroundColor } from './backgroundColor';
+export { uiColors, textColors } from './blends';
+export { derivativeColors } from './derivative';
 export { textColor } from './textColor';
-export { backgroundColor } from './backgroundColor';
+export { specifiableTextColors } from './specifiable';

lib/color/types/index.js

 export { coreColors, intentColors, specifiableColors } from './specifiable';
+export { backgroundColor } from './backgroundColor';
+export { uiColors, textColors } from './blends';
+export { derivativeColors } from './derivative';
 export { textColor } from './textColor';
-export { backgroundColor } from './backgroundColor';
+export { specifiableTextColors } from './specifiable';
 //# sourceMappingURL=index.js.map

lib/color/types/specifiable.d.ts

@@ -24,3 +24,4 @@ export declare const coreColors: Array<keyof CoreColors>;
 }
+export declare const specifiableTextColors: string[];
 export declare type SpecifiableColors = CoreColors & IntentColors & Partial<SpecifiableTextColors>;
 export declare const specifiableColors: Array<keyof SpecifiableColors>;

lib/color/types/specifiable.js

 import "core-js/modules/es.array.concat.js";
 export var coreColors = ['key', 'background', 'text'];
-export var intentColors = ['link', 'critical', 'warn', 'positive', 'inform'];
+export var intentColors = ['link', 'critical', 'warn', 'positive', 'inform', 'calculation', 'dimension', 'measure'];
+export var specifiableTextColors = ['title', 'body'];
 export var specifiableColors = [].concat(coreColors, intentColors);
 //# sourceMappingURL=specifiable.js.map

lib/system/index.d.ts

 import { HTMLProps } from 'react';
-export { border, boxShadow, color, display, flexbox, fontSize, height, layout, overflow, padding, position, space, size, typography, verticalAlign, width, } from 'styled-system';
-export type { BackgroundColorProps, BorderProps, BorderRadiusProps, BoxShadowProps, DisplayProps, FlexboxProps, LayoutProps, OverflowProps, PaddingProps, PositionProps, SizeProps, VerticalAlignProps, WidthProps, } from 'styled-system';
+export { border, borderRadius, boxShadow, backgroundPosition, color, display, flexbox, fontSize, fontFamily, fontWeight, lineHeight, letterSpacing, fontStyle, height, layout, maxWidth, minWidth, overflow, padding, position, space, size, system, textAlign, typography, variant, verticalAlign, width, } from 'styled-system';
+export type { BackgroundColorProps, BackgroundPositionProps, BorderProps, BorderRadiusProps, BoxShadowProps, DisplayProps, FlexboxProps, HeightProps, LayoutProps, MaxHeightProps, MaxWidthProps, MinWidthProps, OpacityProps, OverflowProps, PaddingProps, PositionProps, ResponsiveValue, SizeProps, VerticalAlignProps, WidthProps, } from 'styled-system';
 export declare type CompatibleHTMLProps<T> = Omit<HTMLProps<T>, 'as' | 'color' | 'height' | 'label' | 'ref' | 'size' | 'width'>;
 export { userSelect } from './userSelect';
 export type { UserSelectProps } from './userSelect';
+export type { DensityProp, DensityRamp } from './density';
 export { cursor } from './cursor';
@@ -8,0 +9,0 @@ export type { CursorProps } from './cursor';

lib/system/index.js

@@ -1,2 +0,2 @@
-export { border, boxShadow, color, display, flexbox, fontSize, height, layout, overflow, padding, position, space, size, typography, verticalAlign, width } from 'styled-system';
+export { border, borderRadius, boxShadow, backgroundPosition, color, display, flexbox, fontSize, fontFamily, fontWeight, lineHeight, letterSpacing, fontStyle, height, layout, maxWidth, minWidth, overflow, padding, position, space, size, system, textAlign, typography, variant, verticalAlign, width } from 'styled-system';
 export { userSelect } from './userSelect';
@@ -3,0 +3,0 @@ export { cursor } from './cursor';

lib/theme/ThemeCustomizations.d.ts

 import { SpecifiableColors } from '../color';
-import { FontFamilyChoices } from '../system';
+import { FontFamilyChoices, FontSources } from '../system';
 export interface ThemeCustomizations {
     colors?: Partial<SpecifiableColors>;
     fontFamilies?: Partial<FontFamilyChoices>;
+    fontSources?: FontSources;
 }

lib/theme/utils/generateTheme.js

@@ -25,2 +25,3 @@ import "core-js/modules/es.object.define-property.js";
 
+  var fontSources = customizations.fontSources;
   var fonts = customizations.fontFamilies ? generateFontFamilies(theme.fonts, defaultFontFallbacks, customizations.fontFamilies) : theme.fonts;
@@ -30,2 +31,3 @@ var colors = customizations.colors ? generateColors(theme.colors, customizations.colors) : theme.colors;
     colors: colors,
+    fontSources: fontSources,
     fonts: fonts
@@ -32,0 +34,0 @@ });

lib/utils/index.d.ts

 export * from './animations';
 export * from './convertRemToPx';
 export * from './omit';
+export * from './paddingDefaultsHelper';
 export * from './pick';
 export * from './helpers';
 export * from './typography';

lib/utils/index.js

 export * from './animations';
 export * from './convertRemToPx';
 export * from './omit';
+export * from './paddingDefaultsHelper';
 export * from './pick';
@@ -5,0 +6,0 @@ export * from './helpers';

lib/utils/typography/generateFontFamilies.js

@@ -9,3 +9,3 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
@@ -12,0 +12,0 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

package.json

 {
   "name": "@looker/design-tokens",
   "license": "MIT",
-  "version": "2.0.0",
+  "version": "2.1.0-alpha.0",
   "main": "lib/cjs/index.js",
@@ -23,3 +23,2 @@ "module": "lib/index.js",
     "@styled-system/should-forward-prop": "5.1.5",
-    "lodash": "^4.17.20",
     "polished": "^4.1.2",
@@ -41,2 +40,3 @@ "styled-system": "^5.1.5"
   "peerDependencies": {
+    "lodash": "^4.17.20",
     "react": "^16.11",
@@ -47,3 +47,3 @@ "react-dom": "^16.11",
   },
-  "gitHead": "03d1c2119176add1f929bb2ce3bdd3245c715bbd"
+  "gitHead": "debaf76b096c4a3f988aab183cde0bd92ecef21b"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

536941

increased by11.25%

Number of package files

399

increased by3.91%

Lines of code

3691

increased by13.46%

Worsened metrics

Number of low quality alerts

2

increased by100%

Dependency changes

• - Removedlodash@^4.17.20