@looker/design-tokens - npm Package Compare versions

Comparing version 0.7.8 to 0.7.10-alpha.0

dist/cjs/helpers/animations.js

 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var styled_components_1 = require("styled-components");
-exports.fadeIn = styled_components_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {opacity: 0;}\n  100% {opacity: 1;}\n"], ["\n  0% {opacity: 0;}\n  100% {opacity: 1;}\n"])));
-exports.fadeOut = styled_components_1.keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% {opacity: 100;}\n  100% {opacity: 0;}\n"], ["\n  0% {opacity: 100;}\n  100% {opacity: 0;}\n"])));
-exports.quarterFade = styled_components_1.keyframes(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  0% {opacity: 1;}\n  100% {opacity: 0.25;}\n"], ["\n  0% {opacity: 1;}\n  100% {opacity: 0.25;}\n"])));
-var templateObject_1, templateObject_2, templateObject_3;
+const styled_components_1 = require("styled-components");
+exports.fadeIn = styled_components_1.keyframes `
+  0% {opacity: 0;}
+  100% {opacity: 1;}
+`;
+exports.fadeOut = styled_components_1.keyframes `
+  0% {opacity: 100;}
+  100% {opacity: 0;}
+`;
+exports.quarterFade = styled_components_1.keyframes `
+  0% {opacity: 1;}
+  100% {opacity: 0.25;}
+`;
 //# sourceMappingURL=animations.js.map

dist/cjs/helpers/omit.js

 "use strict";
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -13,3 +6,3 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-var omit_1 = __importDefault(require("lodash/omit"));
+const omit_1 = __importDefault(require("lodash/omit"));
 exports.typographyProps = [
@@ -24,3 +17,3 @@ 'fontFamily',
 ];
-var borderProps = [
+const borderProps = [
     'BorderWidthProps',
@@ -35,4 +28,4 @@ 'BorderStyleProps',
 ];
-var colorProps = ['backgroundColor', 'bg', 'color', 'opacity'];
-var flexProps = [
+const colorProps = ['backgroundColor', 'bg', 'color', 'opacity'];
+const flexProps = [
     'AlignItemsProps',
@@ -52,4 +45,4 @@ 'AlignContentProps',
 ];
-var positionProps = ['bottom', 'left', 'position', 'right', 'top', 'zIndex'];
-var layoutProps = [
+const positionProps = ['bottom', 'left', 'position', 'right', 'top', 'zIndex'];
+const layoutProps = [
     'display',
@@ -68,3 +61,3 @@ 'height',
 ];
-var spaceProps = [
+const spaceProps = [
     'm',
@@ -99,10 +92,19 @@ 'mb',
 ];
-var otherProps = ['animation', 'color'];
-var pseudoProps = ['activeStyle', 'focusStyle', 'hoverStyle', 'userSelect'];
-var styledSystemProps = __spreadArrays(borderProps, [
-    'boxShaodw'
-], colorProps, flexProps, positionProps, layoutProps, spaceProps, exports.typographyProps, otherProps, pseudoProps);
-exports.omitStyledProps = function (props) {
+const otherProps = ['animation', 'color'];
+const pseudoProps = ['activeStyle', 'focusStyle', 'hoverStyle', 'userSelect'];
+const styledSystemProps = [
+    ...borderProps,
+    'boxShaodw',
+    ...colorProps,
+    ...flexProps,
+    ...positionProps,
+    ...layoutProps,
+    ...spaceProps,
+    ...exports.typographyProps,
+    ...otherProps,
+    ...pseudoProps,
+];
+exports.omitStyledProps = (props) => {
     return omit_1.default(props, styledSystemProps);
 };
 //# sourceMappingURL=omit.js.map

dist/cjs/system/cursor.js

 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var styled_components_1 = require("styled-components");
-exports.cursor = function (props) { return styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: ", ";\n"], ["\n  cursor: ", ";\n"])), props.cursor); };
-var templateObject_1;
+const styled_components_1 = require("styled-components");
+exports.cursor = (props) => styled_components_1.css `
+  cursor: ${props.cursor};
+`;
 //# sourceMappingURL=cursor.js.map

dist/cjs/system/pseudo.js

 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var styled_components_1 = require("styled-components");
-var pseudoClassHover = function (props) {
-    return (props.hoverStyle && styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      :hover {\n        ", ";\n      }\n    "], ["\n      :hover {\n        ", ";\n      }\n    "])), props.hoverStyle));
+const styled_components_1 = require("styled-components");
+const pseudoClassHover = (props) => {
+    return (props.hoverStyle &&
+        styled_components_1.css `
+      :hover {
+        ${props.hoverStyle};
+      }
+    `);
 };
-var pseudoClassFocus = function (props) {
-    return (props.focusStyle && styled_components_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      :focus {\n        ", ";\n      }\n    "], ["\n      :focus {\n        ", ";\n      }\n    "])), props.focusStyle));
+const pseudoClassFocus = (props) => {
+    return (props.focusStyle &&
+        styled_components_1.css `
+      :focus {
+        ${props.focusStyle};
+      }
+    `);
 };
-var pseudoClassActive = function (props) {
-    return (props.activeStyle && styled_components_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      :active {\n        ", ";\n      }\n    "], ["\n      :active {\n        ", ";\n      }\n    "])), props.activeStyle));
+const pseudoClassActive = (props) => {
+    return (props.activeStyle &&
+        styled_components_1.css `
+      :active {
+        ${props.activeStyle};
+      }
+    `);
 };
-exports.pseudoClasses = styled_components_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  /**\n   * Pseudo classes can be styled by passing a CSS.Properties type to the\n   * corresponding pseudo class helper prop. For example: <Box\n   * hoverStyle={{border: '1px solid black'}}/>\n   */\n  ", "\n  ", "\n  ", "\n"], ["\n  /**\n   * Pseudo classes can be styled by passing a CSS.Properties type to the\n   * corresponding pseudo class helper prop. For example: <Box\n   * hoverStyle={{border: '1px solid black'}}/>\n   */\n  ", "\n  ", "\n  ", "\n"])), pseudoClassHover, pseudoClassFocus, pseudoClassActive);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+exports.pseudoClasses = styled_components_1.css `
+  /**
+   * Pseudo classes can be styled by passing a CSS.Properties type to the
+   * corresponding pseudo class helper prop. For example: <Box
+   * hoverStyle={{border: '1px solid black'}}/>
+   */
+  ${pseudoClassHover}
+  ${pseudoClassFocus}
+  ${pseudoClassActive}
+`;
 //# sourceMappingURL=pseudo.js.map

dist/cjs/system/reset.js

 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var styled_components_1 = require("styled-components");
-exports.defaultReset = function () {
-    var simpleReset = {
-        border: 0,
-        boxSizing: 'border-box',
-        font: 'inherit',
-        fontSize: '100%',
-        margin: 0,
-        padding: 0,
-        verticalAlign: 'baseline',
-    };
-    return simpleReset;
-};
-exports.reset = styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /**\n     * Global reset applied to prevent styling on top level tags outside of Looker \n     * UI Components from interfering with styles.\n     *\n     * This **must** be first.\n     */\n  ", "\n"], ["\n  /**\n     * Global reset applied to prevent styling on top level tags outside of Looker \n     * UI Components from interfering with styles.\n     *\n     * This **must** be first.\n     */\n  ", "\n"])), function (props) { return props.theme.reset && props.theme.reset(); });
-var templateObject_1;
+const styled_components_1 = require("styled-components");
+exports.reset = styled_components_1.css `
+  /**
+    * Global reset applied to prevent styling on top level tags outside of Looker
+    * UI Components from interfering with styles.
+    **/
+  ${props => props.theme.reset && props.theme.reset()}
+`;
 //# sourceMappingURL=reset.js.map

dist/cjs/system/typography/text_decoration.js

 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var styled_components_1 = require("styled-components");
-exports.textDecoration = function (props) { return styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: ", ";\n"], ["\n  text-decoration: ", ";\n"])), props.textDecoration); };
-var templateObject_1;
+const styled_components_1 = require("styled-components");
+exports.textDecoration = (props) => styled_components_1.css `
+  text-decoration: ${props.textDecoration};
+`;
 //# sourceMappingURL=text_decoration.js.map

dist/cjs/system/typography/text_transform.js

 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var styled_components_1 = require("styled-components");
-exports.textTransform = function (props) { return styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-transform: ", ";\n"], ["\n  text-transform: ", ";\n"])), props.textTransform); };
-var templateObject_1;
+const styled_components_1 = require("styled-components");
+exports.textTransform = (props) => styled_components_1.css `
+  text-transform: ${props.textTransform};
+`;
 //# sourceMappingURL=text_transform.js.map

dist/cjs/system/userSelect.js

 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var styled_components_1 = require("styled-components");
-exports.userSelect = function (props) {
-    return styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    user-select: ", ";\n  "], ["\n    user-select: ", ";\n  "])), props.userSelect);
-};
-var templateObject_1;
+const styled_components_1 = require("styled-components");
+exports.userSelect = (props) => styled_components_1.css `
+    user-select: ${props.userSelect};
+  `;
 //# sourceMappingURL=userSelect.js.map

dist/cjs/theme.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var system_1 = require("./system");
-var tokens_1 = require("./tokens");
+const tokens_1 = require("./tokens");
 exports.theme = {
@@ -14,3 +13,2 @@ breakpoints: tokens_1.breakpoints,
     radii: tokens_1.radii,
-    reset: system_1.defaultReset,
     shadows: tokens_1.shadows,
@@ -17,0 +15,0 @@ space: tokens_1.space,

dist/cjs/tokens/color/semantic_colors.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var palette_1 = require("./palette");
-var blue500 = palette_1.palette.blue500, charcoal000 = palette_1.palette.charcoal000, charcoal100 = palette_1.palette.charcoal100, charcoal300 = palette_1.palette.charcoal300, charcoal400 = palette_1.palette.charcoal400, charcoal500 = palette_1.palette.charcoal500, charcoal600 = palette_1.palette.charcoal600, primary500 = palette_1.palette.primary500, primary600 = palette_1.palette.primary600, primary700 = palette_1.palette.primary700, purple000 = palette_1.palette.purple000, purple100 = palette_1.palette.purple100, purple400 = palette_1.palette.purple400, purple500 = palette_1.palette.purple500, purple600 = palette_1.palette.purple600, red000 = palette_1.palette.red000, red100 = palette_1.palette.red100, red400 = palette_1.palette.red400, red500 = palette_1.palette.red500, red600 = palette_1.palette.red600, red700 = palette_1.palette.red700, white = palette_1.palette.white;
+const palette_1 = require("./palette");
+const { blue500, charcoal000, charcoal100, charcoal300, charcoal400, charcoal500, charcoal600, primary500, primary600, primary700, purple000, purple100, purple400, purple500, purple600, red000, red100, red400, red500, red600, red700, white, } = palette_1.palette;
 exports.semanticColors = {
@@ -6,0 +6,0 @@ danger: {

dist/cjs/tokens/space.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var polished_1 = require("polished");
+const polished_1 = require("polished");
 exports.space = {
@@ -5,0 +5,0 @@ none: polished_1.rem(0),

dist/cjs/tokens/typography/font_families.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fontFamilies = {
-    brand: "'Open Sans', Helvetica, Arial, sans-serif",
-    code: "'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace",
+    brand: `'Open Sans', Helvetica, Arial, sans-serif`,
+    code: `'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace`,
 };
 //# sourceMappingURL=font_families.js.map

dist/cjs/tokens/typography/font_sizes.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var polished_1 = require("polished");
+const polished_1 = require("polished");
 exports.fontSizes = {
@@ -5,0 +5,0 @@ xxxxlarge: polished_1.rem(46),

dist/cjs/tokens/typography/line_heights.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var polished_1 = require("polished");
+const polished_1 = require("polished");
 exports.lineHeights = {
@@ -5,0 +5,0 @@ xxxxlarge: polished_1.rem(64),

dist/esm/helpers/animations.js

@@ -1,10 +0,14 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { keyframes } from 'styled-components';
-export var fadeIn = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {opacity: 0;}\n  100% {opacity: 1;}\n"], ["\n  0% {opacity: 0;}\n  100% {opacity: 1;}\n"])));
-export var fadeOut = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% {opacity: 100;}\n  100% {opacity: 0;}\n"], ["\n  0% {opacity: 100;}\n  100% {opacity: 0;}\n"])));
-export var quarterFade = keyframes(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  0% {opacity: 1;}\n  100% {opacity: 0.25;}\n"], ["\n  0% {opacity: 1;}\n  100% {opacity: 0.25;}\n"])));
-var templateObject_1, templateObject_2, templateObject_3;
+export const fadeIn = keyframes `
+  0% {opacity: 0;}
+  100% {opacity: 1;}
+`;
+export const fadeOut = keyframes `
+  0% {opacity: 100;}
+  100% {opacity: 0;}
+`;
+export const quarterFade = keyframes `
+  0% {opacity: 1;}
+  100% {opacity: 0.25;}
+`;
 //# sourceMappingURL=animations.js.map

dist/esm/helpers/omit.js

@@ -1,10 +0,3 @@
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
 import omit from 'lodash/omit';
-export var typographyProps = [
+export const typographyProps = [
     'fontFamily',
@@ -18,3 +11,3 @@ 'fontSize',
 ];
-var borderProps = [
+const borderProps = [
     'BorderWidthProps',
@@ -29,4 +22,4 @@ 'BorderStyleProps',
 ];
-var colorProps = ['backgroundColor', 'bg', 'color', 'opacity'];
-var flexProps = [
+const colorProps = ['backgroundColor', 'bg', 'color', 'opacity'];
+const flexProps = [
     'AlignItemsProps',
@@ -46,4 +39,4 @@ 'AlignContentProps',
 ];
-var positionProps = ['bottom', 'left', 'position', 'right', 'top', 'zIndex'];
-var layoutProps = [
+const positionProps = ['bottom', 'left', 'position', 'right', 'top', 'zIndex'];
+const layoutProps = [
     'display',
@@ -62,3 +55,3 @@ 'height',
 ];
-var spaceProps = [
+const spaceProps = [
     'm',
@@ -93,10 +86,19 @@ 'mb',
 ];
-var otherProps = ['animation', 'color'];
-var pseudoProps = ['activeStyle', 'focusStyle', 'hoverStyle', 'userSelect'];
-var styledSystemProps = __spreadArrays(borderProps, [
-    'boxShaodw'
-], colorProps, flexProps, positionProps, layoutProps, spaceProps, typographyProps, otherProps, pseudoProps);
-export var omitStyledProps = function (props) {
+const otherProps = ['animation', 'color'];
+const pseudoProps = ['activeStyle', 'focusStyle', 'hoverStyle', 'userSelect'];
+const styledSystemProps = [
+    ...borderProps,
+    'boxShaodw',
+    ...colorProps,
+    ...flexProps,
+    ...positionProps,
+    ...layoutProps,
+    ...spaceProps,
+    ...typographyProps,
+    ...otherProps,
+    ...pseudoProps,
+];
+export const omitStyledProps = (props) => {
     return omit(props, styledSystemProps);
 };
 //# sourceMappingURL=omit.js.map

dist/esm/system/cursor.js

@@ -1,8 +0,5 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { css } from 'styled-components';
-export var cursor = function (props) { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: ", ";\n"], ["\n  cursor: ", ";\n"])), props.cursor); };
-var templateObject_1;
+export const cursor = (props) => css `
+  cursor: ${props.cursor};
+`;
 //# sourceMappingURL=cursor.js.map

dist/esm/system/pseudo.js

@@ -1,17 +0,36 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { css } from 'styled-components';
-var pseudoClassHover = function (props) {
-    return (props.hoverStyle && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      :hover {\n        ", ";\n      }\n    "], ["\n      :hover {\n        ", ";\n      }\n    "])), props.hoverStyle));
+const pseudoClassHover = (props) => {
+    return (props.hoverStyle &&
+        css `
+      :hover {
+        ${props.hoverStyle};
+      }
+    `);
 };
-var pseudoClassFocus = function (props) {
-    return (props.focusStyle && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      :focus {\n        ", ";\n      }\n    "], ["\n      :focus {\n        ", ";\n      }\n    "])), props.focusStyle));
+const pseudoClassFocus = (props) => {
+    return (props.focusStyle &&
+        css `
+      :focus {
+        ${props.focusStyle};
+      }
+    `);
 };
-var pseudoClassActive = function (props) {
-    return (props.activeStyle && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      :active {\n        ", ";\n      }\n    "], ["\n      :active {\n        ", ";\n      }\n    "])), props.activeStyle));
+const pseudoClassActive = (props) => {
+    return (props.activeStyle &&
+        css `
+      :active {
+        ${props.activeStyle};
+      }
+    `);
 };
-export var pseudoClasses = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  /**\n   * Pseudo classes can be styled by passing a CSS.Properties type to the\n   * corresponding pseudo class helper prop. For example: <Box\n   * hoverStyle={{border: '1px solid black'}}/>\n   */\n  ", "\n  ", "\n  ", "\n"], ["\n  /**\n   * Pseudo classes can be styled by passing a CSS.Properties type to the\n   * corresponding pseudo class helper prop. For example: <Box\n   * hoverStyle={{border: '1px solid black'}}/>\n   */\n  ", "\n  ", "\n  ", "\n"])), pseudoClassHover, pseudoClassFocus, pseudoClassActive);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+export const pseudoClasses = css `
+  /**
+   * Pseudo classes can be styled by passing a CSS.Properties type to the
+   * corresponding pseudo class helper prop. For example: <Box
+   * hoverStyle={{border: '1px solid black'}}/>
+   */
+  ${pseudoClassHover}
+  ${pseudoClassFocus}
+  ${pseudoClassActive}
+`;
 //# sourceMappingURL=pseudo.js.map

dist/esm/system/reset.js

@@ -1,20 +0,9 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { css } from 'styled-components';
-export var defaultReset = function () {
-    var simpleReset = {
-        border: 0,
-        boxSizing: 'border-box',
-        font: 'inherit',
-        fontSize: '100%',
-        margin: 0,
-        padding: 0,
-        verticalAlign: 'baseline',
-    };
-    return simpleReset;
-};
-export var reset = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /**\n     * Global reset applied to prevent styling on top level tags outside of Looker \n     * UI Components from interfering with styles.\n     *\n     * This **must** be first.\n     */\n  ", "\n"], ["\n  /**\n     * Global reset applied to prevent styling on top level tags outside of Looker \n     * UI Components from interfering with styles.\n     *\n     * This **must** be first.\n     */\n  ", "\n"])), function (props) { return props.theme.reset && props.theme.reset(); });
-var templateObject_1;
+export const reset = css `
+  /**
+    * Global reset applied to prevent styling on top level tags outside of Looker
+    * UI Components from interfering with styles.
+    **/
+  ${props => props.theme.reset && props.theme.reset()}
+`;
 //# sourceMappingURL=reset.js.map

dist/esm/system/typography/text_decoration.js

@@ -1,8 +0,5 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { css } from 'styled-components';
-export var textDecoration = function (props) { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: ", ";\n"], ["\n  text-decoration: ", ";\n"])), props.textDecoration); };
-var templateObject_1;
+export const textDecoration = (props) => css `
+  text-decoration: ${props.textDecoration};
+`;
 //# sourceMappingURL=text_decoration.js.map

dist/esm/system/typography/text_transform.js

@@ -1,8 +0,5 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { css } from 'styled-components';
-export var textTransform = function (props) { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-transform: ", ";\n"], ["\n  text-transform: ", ";\n"])), props.textTransform); };
-var templateObject_1;
+export const textTransform = (props) => css `
+  text-transform: ${props.textTransform};
+`;
 //# sourceMappingURL=text_transform.js.map

dist/esm/system/userSelect.js

@@ -1,10 +0,5 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { css } from 'styled-components';
-export var userSelect = function (props) {
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    user-select: ", ";\n  "], ["\n    user-select: ", ";\n  "])), props.userSelect);
-};
-var templateObject_1;
+export const userSelect = (props) => css `
+    user-select: ${props.userSelect};
+  `;
 //# sourceMappingURL=userSelect.js.map

dist/esm/theme.js

@@ -1,17 +0,15 @@
-import { defaultReset, } from './system';
 import { breakpoints, easings, fontFamilies, fontSizes, fontWeights, lineHeights, palette, radii, semanticColors, shadows, space, transitions, } from './tokens';
-export var theme = {
-    breakpoints: breakpoints,
-    colors: { palette: palette, semanticColors: semanticColors },
-    easings: easings,
-    fontSizes: fontSizes,
-    fontWeights: fontWeights,
+export const theme = {
+    breakpoints,
+    colors: { palette, semanticColors },
+    easings,
+    fontSizes,
+    fontWeights,
     fonts: fontFamilies,
-    lineHeights: lineHeights,
-    radii: radii,
-    reset: defaultReset,
-    shadows: shadows,
-    space: space,
-    transitions: transitions,
+    lineHeights,
+    radii,
+    shadows,
+    space,
+    transitions,
 };
 //# sourceMappingURL=theme.js.map

dist/esm/tokens/breakpoints.js

@@ -1,2 +0,2 @@
-export var breakpoints = ['30rem', '48rem', '64rem', '75rem', '90rem'];
+export const breakpoints = ['30rem', '48rem', '64rem', '75rem', '90rem'];
 //# sourceMappingURL=breakpoints.js.map

dist/esm/tokens/color/palette.js

@@ -1,2 +0,2 @@
-export var palette = {
+export const palette = {
     textInverted: '#FFFFFF',
@@ -3,0 +3,0 @@ transparent: 'transparent',

dist/esm/tokens/color/semantic_colors.js

 import { palette } from './palette';
-var blue500 = palette.blue500, charcoal000 = palette.charcoal000, charcoal100 = palette.charcoal100, charcoal300 = palette.charcoal300, charcoal400 = palette.charcoal400, charcoal500 = palette.charcoal500, charcoal600 = palette.charcoal600, primary500 = palette.primary500, primary600 = palette.primary600, primary700 = palette.primary700, purple000 = palette.purple000, purple100 = palette.purple100, purple400 = palette.purple400, purple500 = palette.purple500, purple600 = palette.purple600, red000 = palette.red000, red100 = palette.red100, red400 = palette.red400, red500 = palette.red500, red600 = palette.red600, red700 = palette.red700, white = palette.white;
-export var semanticColors = {
+const { blue500, charcoal000, charcoal100, charcoal300, charcoal400, charcoal500, charcoal600, primary500, primary600, primary700, purple000, purple100, purple400, purple500, purple600, red000, red100, red400, red500, red600, red700, white, } = palette;
+export const semanticColors = {
     danger: {
@@ -5,0 +5,0 @@ altText: red400,

dist/esm/tokens/easings.js

@@ -1,2 +0,2 @@
-export var easings = {
+export const easings = {
     ease: 'cubic-bezier(0.86, 0, 0.07, 1)',
@@ -3,0 +3,0 @@ easeIn: 'cubic-bezier(0.895, 0.03, 0.685, 0.22);',

dist/esm/tokens/radii.js

@@ -1,2 +0,2 @@
-export var radii = {
+export const radii = {
     none: '0rem',
@@ -3,0 +3,0 @@ xsmall: '0.0625rem',

dist/esm/tokens/shadows.js

@@ -1,2 +0,2 @@
-export var shadows = {
+export const shadows = {
     1: '0px 1px 8px rgba(0, 0, 0, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.05)',
@@ -3,0 +3,0 @@ 2: '0 2px 12px rgba(0, 0, 0, 0.11), 0 1px 4px rgba(0, 0, 0, 0.04)',

dist/esm/tokens/space.js

 import { rem } from 'polished';
-export var space = {
+export const space = {
     none: rem(0),
@@ -4,0 +4,0 @@ xxsmall: rem(4),

dist/esm/tokens/transitions.js

@@ -1,2 +0,2 @@
-export var transitions = {
+export const transitions = {
     durationRapid: '100ms',
@@ -3,0 +3,0 @@ durationQuick: '150ms',

dist/esm/tokens/typography/font_families.js

@@ -1,5 +0,5 @@
-export var fontFamilies = {
-    brand: "'Open Sans', Helvetica, Arial, sans-serif",
-    code: "'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace",
+export const fontFamilies = {
+    brand: `'Open Sans', Helvetica, Arial, sans-serif`,
+    code: `'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace`,
 };
 //# sourceMappingURL=font_families.js.map

dist/esm/tokens/typography/font_sizes.js

 import { rem } from 'polished';
-export var fontSizes = {
+export const fontSizes = {
     xxxxlarge: rem(46),
@@ -4,0 +4,0 @@ xxxlarge: rem(36),

dist/esm/tokens/typography/font_weights.js

@@ -1,2 +0,2 @@
-export var fontWeights = {
+export const fontWeights = {
     light: 300,
@@ -3,0 +3,0 @@ normal: 400,

dist/esm/tokens/typography/line_heights.js

 import { rem } from 'polished';
-export var lineHeights = {
+export const lineHeights = {
     xxxxlarge: rem(64),
@@ -4,0 +4,0 @@ xxxlarge: rem(52),

dist/types/system/reset.d.ts

@@ -1,2 +0,1 @@
-export declare const defaultReset: () => import("styled-components").CSSObject;
 export declare const reset: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;

dist/types/theme.d.ts

@@ -15,3 +15,3 @@ import { InterpolationValue } from 'styled-components';
     radii: Radii;
-    reset: () => InterpolationValue;
+    reset?: () => InterpolationValue;
     shadows: Shadows;
@@ -18,0 +18,0 @@ space: SpaceRamp;

package.json

 {
   "name": "@looker/design-tokens",
   "license": "MIT",
-  "version": "0.7.8",
+  "version": "0.7.10-alpha.0",
   "main": "dist/cjs/index.js",
@@ -20,6 +20,5 @@ "types": "dist/types/index.d.ts",
   "scripts": {
-    "build:all": "yarn clean && yarn run build:es2015 && yarn run build:esm && yarn run build:cjs",
-    "build:es2015": "ttsc --project tsconfig.build.json --module es2015 --target es2015 --outDir dist/es2015",
-    "build:esm": "ttsc --project tsconfig.build.json --module es2015 --target es5 --outDir dist/esm",
-    "build:cjs": "ttsc --project tsconfig.build.json --module commonjs --target es5 --outDir dist/cjs",
+    "build:all": "yarn clean && yarn run build:esm && yarn run build:cjs",
+    "build:esm": "ttsc --project tsconfig.build.json --module es2015 --target es6 --outDir dist/esm",
+    "build:cjs": "ttsc --project tsconfig.build.json --module commonjs --target es6 --outDir dist/cjs",
     "clean": "rm -Rf ./dist",
@@ -50,3 +49,3 @@ "declaration": "ttsc --project tsconfig.json",
   },
-  "gitHead": "9b21c0817b355ecdd5ce91602fa5f297b5e183c5"
+  "gitHead": "9e5c70a501156d64c7caa2d528bd47bad08b077b"
 }

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

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

Worsened metrics

Total package byte prevSize

71475

decreased by-34.47%

Number of package files

203

decreased by-28.27%

Lines of code

1215

decreased by-26.41%

No dependency changes