@utrecht/web-component-library-stencil 1.0.0-alpha.16 → 1.0.0-alpha.160

package/dist/collection/node_modules/@storybook/theming/dist/modern/animation.js

@@ -0,0 +1,48 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+import { css, keyframes } from '@emotion/core';
+export const easing = {
+  rubber: 'cubic-bezier(0.175, 0.885, 0.335, 1.05)'
+};
+const rotate360 = keyframes`
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+`;
+const glow = keyframes`
+  0%, 100% { opacity: 1; }
+  50% { opacity: .4; }
+`;
+const float = keyframes`
+  0% { transform: translateY(1px); }
+  25% { transform: translateY(0px); }
+  50% { transform: translateY(-3px); }
+  100% { transform: translateY(1px); }
+`;
+const jiggle = keyframes`
+  0%, 100% { transform:translate3d(0,0,0); }
+  12.5%, 62.5% { transform:translate3d(-4px,0,0); }
+  37.5%, 87.5% {  transform: translate3d(4px,0,0);  }
+`;
+const inlineGlow = /*#__PURE__*/css("animation:", glow, " 1.5s ease-in-out infinite;color:transparent;cursor:progress;;label:inlineGlow;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNzQiIsImZpbGUiOiIuLi8uLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */")); // hover & active state for links and buttons
+
+const hoverable = process.env.NODE_ENV === "production" ? {
+  name: "1o7rzh8-hoverable",
+  styles: "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);};label:hoverable;"
+} : {
+  name: "1o7rzh8-hoverable",
+  styles: "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);};label:hoverable;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NxQiIsImZpbGUiOiIuLi8uLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export const animation = {
+  rotate360,
+  glow,
+  float,
+  jiggle,
+  inlineGlow,
+  hoverable
+};

package/dist/collection/node_modules/@storybook/theming/dist/modern/base.js

@@ -0,0 +1,72 @@
+export const color = {
+  // Official color palette
+  primary: '#FF4785',
+  // coral
+  secondary: '#1EA7FD',
+  // ocean
+  tertiary: '#FAFBFC',
+  ancillary: '#22a699',
+  // for code
+  // Complimentary
+  orange: '#FC521F',
+  gold: '#FFAE00',
+  green: '#66BF3C',
+  seafoam: '#37D5D3',
+  purple: '#6F2CAC',
+  ultraviolet: '#2A0481',
+  // Monochrome
+  lightest: '#FFFFFF',
+  lighter: '#F8F8F8',
+  light: '#F3F3F3',
+  mediumlight: '#EEEEEE',
+  medium: '#DDDDDD',
+  mediumdark: '#999999',
+  dark: '#666666',
+  darker: '#444444',
+  darkest: '#333333',
+  // For borders
+  border: 'rgba(0,0,0,.1)',
+  // Status
+  positive: '#66BF3C',
+  negative: '#FF4400',
+  warning: '#E69D00',
+  critical: '#FFFFFF',
+  defaultText: '#333333',
+  inverseText: '#FFFFFF'
+};
+export const background = {
+  app: '#F6F9FC',
+  bar: '#FFFFFF',
+  content: color.lightest,
+  gridCellSize: 10,
+  hoverable: 'rgba(0,0,0,.05)',
+  // hover state for items in a list
+  // Notification, error, and warning backgrounds
+  positive: '#E1FFD4',
+  negative: '#FEDED2',
+  warning: '#FFF5CF',
+  critical: '#FF4400'
+};
+export const typography = {
+  fonts: {
+    base: ['"Nunito Sans"', '-apple-system', '".SFNSText-Regular"', '"San Francisco"', 'BlinkMacSystemFont', '"Segoe UI"', '"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif'].join(', '),
+    mono: ['"Operator Mono"', '"Fira Code Retina"', '"Fira Code"', '"FiraCode-Retina"', '"Andale Mono"', '"Lucida Console"', 'Consolas', 'Monaco', 'monospace'].join(', ')
+  },
+  weight: {
+    regular: 400,
+    bold: 700,
+    black: 900
+  },
+  size: {
+    s1: 12,
+    s2: 14,
+    s3: 16,
+    m1: 20,
+    m2: 24,
+    m3: 28,
+    l1: 32,
+    l2: 40,
+    l3: 48,
+    code: 90
+  }
+};

package/dist/collection/node_modules/@storybook/theming/dist/modern/convert.js

@@ -0,0 +1,158 @@
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import { opacify } from 'polished';
+import { background, typography, color } from './base';
+import { easing, animation } from './animation';
+import { create as createSyntax, chromeLight, chromeDark } from './modules/syntax';
+import { getPreferredColorScheme } from './utils';
+import { themes } from './create';
+const lightSyntaxColors = {
+  green1: '#008000',
+  red1: '#A31515',
+  red2: '#9a050f',
+  red3: '#800000',
+  red4: '#ff0000',
+  gray1: '#393A34',
+  cyan1: '#36acaa',
+  cyan2: '#2B91AF',
+  blue1: '#0000ff',
+  blue2: '#00009f'
+};
+const darkSyntaxColors = {
+  green1: '#7C7C7C',
+  red1: '#92C379',
+  red2: '#9a050f',
+  red3: '#A8FF60',
+  red4: '#96CBFE',
+  gray1: '#EDEDED',
+  cyan1: '#C6C5FE',
+  cyan2: '#FFFFB6',
+  blue1: '#B474DD',
+  blue2: '#00009f'
+};
+
+const createColors = vars => ({
+  // Changeable colors
+  primary: vars.colorPrimary,
+  secondary: vars.colorSecondary,
+  tertiary: color.tertiary,
+  ancillary: color.ancillary,
+  // Complimentary
+  orange: color.orange,
+  gold: color.gold,
+  green: color.green,
+  seafoam: color.seafoam,
+  purple: color.purple,
+  ultraviolet: color.ultraviolet,
+  // Monochrome
+  lightest: color.lightest,
+  lighter: color.lighter,
+  light: color.light,
+  mediumlight: color.mediumlight,
+  medium: color.medium,
+  mediumdark: color.mediumdark,
+  dark: color.dark,
+  darker: color.darker,
+  darkest: color.darkest,
+  // For borders
+  border: color.border,
+  // Status
+  positive: color.positive,
+  negative: color.negative,
+  warning: color.warning,
+  critical: color.critical,
+  defaultText: vars.textColor || color.darkest,
+  inverseText: vars.textInverseColor || color.lightest
+});
+
+export const convert = (inherit = themes[getPreferredColorScheme()]) => {
+  const {
+    base,
+    colorSecondary,
+    appBg,
+    appContentBg,
+    appBorderColor,
+    appBorderRadius,
+    fontBase,
+    fontCode,
+    textColor,
+    barTextColor,
+    barSelectedColor,
+    barBg,
+    inputBg,
+    inputBorder,
+    inputTextColor,
+    inputBorderRadius,
+    brandTitle,
+    brandUrl,
+    brandImage,
+    gridCellSize
+  } = inherit,
+        rest = _objectWithoutPropertiesLoose(inherit, ["base", "colorPrimary", "colorSecondary", "appBg", "appContentBg", "appBorderColor", "appBorderRadius", "fontBase", "fontCode", "textColor", "textInverseColor", "barTextColor", "barSelectedColor", "barBg", "inputBg", "inputBorder", "inputTextColor", "inputBorderRadius", "brandTitle", "brandUrl", "brandImage", "gridCellSize"]);
+
+  return Object.assign({}, rest || {}, {
+    base,
+    color: createColors(inherit),
+    background: {
+      app: appBg,
+      bar: barBg,
+      content: appContentBg,
+      gridCellSize: gridCellSize || background.gridCellSize,
+      hoverable: base === 'light' ? 'rgba(0,0,0,.05)' : 'rgba(250,250,252,.1)' || background.hoverable,
+      positive: background.positive,
+      negative: background.negative,
+      warning: background.warning,
+      critical: background.critical
+    },
+    typography: {
+      fonts: {
+        base: fontBase,
+        mono: fontCode
+      },
+      weight: typography.weight,
+      size: typography.size
+    },
+    animation,
+    easing,
+    input: {
+      border: inputBorder,
+      background: inputBg,
+      color: inputTextColor,
+      borderRadius: inputBorderRadius
+    },
+    // UI
+    layoutMargin: 10,
+    appBorderColor,
+    appBorderRadius,
+    // Toolbar default/active colors
+    barTextColor,
+    barSelectedColor: barSelectedColor || colorSecondary,
+    barBg,
+    // Brand logo/text
+    brand: {
+      title: brandTitle,
+      url: brandUrl,
+      image: brandImage || (brandTitle ? null : undefined)
+    },
+    code: createSyntax({
+      colors: base === 'light' ? lightSyntaxColors : darkSyntaxColors,
+      mono: fontCode
+    }),
+    // Addon actions theme
+    // API example https://github.com/xyc/react-inspector/blob/master/src/styles/themes/chromeLight.js
+    addonActionsTheme: Object.assign({}, base === 'light' ? chromeLight : chromeDark, {
+      BASE_FONT_FAMILY: fontCode,
+      BASE_FONT_SIZE: typography.size.s2 - 1,
+      BASE_LINE_HEIGHT: '18px',
+      BASE_BACKGROUND_COLOR: 'transparent',
+      BASE_COLOR: textColor,
+      ARROW_COLOR: opacify(0.2, appBorderColor),
+      ARROW_MARGIN_RIGHT: 4,
+      ARROW_FONT_SIZE: 8,
+      TREENODE_FONT_FAMILY: fontCode,
+      TREENODE_FONT_SIZE: typography.size.s2 - 1,
+      TREENODE_LINE_HEIGHT: '18px',
+      TREENODE_PADDING_LEFT: 12
+    })
+  });
+};

package/dist/collection/node_modules/@storybook/theming/dist/modern/create.js

@@ -0,0 +1,20 @@
+// This generates theme variables in the correct shape for the UI
+import lightThemeVars from './themes/light';
+import darkThemeVars from './themes/dark';
+import { getPreferredColorScheme } from './utils';
+export const themes = {
+  light: lightThemeVars,
+  dark: darkThemeVars,
+  normal: lightThemeVars
+};
+const preferredColorScheme = getPreferredColorScheme();
+export const create = (vars = {
+  base: preferredColorScheme
+}, rest) => {
+  const inherit = Object.assign({}, themes[preferredColorScheme], themes[vars.base] || {}, vars, {
+    base: themes[vars.base] ? vars.base : preferredColorScheme
+  });
+  return Object.assign({}, rest, inherit, {
+    barSelectedColor: vars.barSelectedColor || inherit.colorSecondary
+  });
+};

package/dist/collection/node_modules/@storybook/theming/dist/modern/ensure.js

@@ -0,0 +1,22 @@
+import { logger } from '@storybook/client-logger';
+import { deletedDiff } from 'deep-object-diff';
+import dedent from 'ts-dedent';
+import light from './themes/light';
+import { convert } from './convert';
+export const ensure = input => {
+  if (!input) {
+    return convert(light);
+  }
+
+  const missing = deletedDiff(light, input);
+
+  if (Object.keys(missing).length) {
+    logger.warn(dedent`
+          Your theme is missing properties, you should update your theme!
+
+          theme-data missing:
+        `, missing);
+  }
+
+  return convert(input);
+};

package/dist/collection/node_modules/@storybook/theming/dist/modern/global.js

@@ -0,0 +1,84 @@
+import memoize from 'memoizerific';
+export const createReset = memoize(1)(({
+  typography
+}) => ({
+  body: {
+    fontFamily: typography.fonts.base,
+    fontSize: typography.size.s3,
+    margin: 0,
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+    WebkitOverflowScrolling: 'touch'
+  },
+  '*': {
+    boxSizing: 'border-box'
+  },
+  'h1, h2, h3, h4, h5, h6': {
+    fontWeight: typography.weight.regular,
+    margin: 0,
+    padding: 0
+  },
+  'button, input, textarea, select': {
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    boxSizing: 'border-box'
+  },
+  sub: {
+    fontSize: '0.8em',
+    bottom: '-0.2em'
+  },
+  sup: {
+    fontSize: '0.8em',
+    top: '-0.2em'
+  },
+  'b, strong': {
+    fontWeight: typography.weight.bold
+  },
+  hr: {
+    border: 'none',
+    borderTop: '1px solid silver',
+    clear: 'both',
+    marginBottom: '1.25rem'
+  },
+  code: {
+    fontFamily: typography.fonts.mono,
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    display: 'inline-block',
+    paddingLeft: 2,
+    paddingRight: 2,
+    verticalAlign: 'baseline',
+    color: 'inherit'
+  },
+  pre: {
+    fontFamily: typography.fonts.mono,
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    lineHeight: '18px',
+    padding: '11px 1rem',
+    whiteSpace: 'pre-wrap',
+    color: 'inherit',
+    borderRadius: 3,
+    margin: '1rem 0'
+  }
+}));
+export const createGlobal = memoize(1)(({
+  color,
+  background,
+  typography
+}) => {
+  const resetStyles = createReset({
+    typography
+  });
+  return Object.assign({}, resetStyles, {
+    body: Object.assign({}, resetStyles.body, {
+      color: color.defaultText,
+      background: background.app,
+      overflow: 'hidden'
+    }),
+    hr: Object.assign({}, resetStyles.hr, {
+      borderTop: `1px solid ${color.border}`
+    })
+  });
+});

package/dist/collection/node_modules/@storybook/theming/dist/modern/index.js

@@ -0,0 +1,13 @@
+import _styled from "@emotion/styled";
+export const styled = _styled;
+export * from './base';
+export * from './types';
+export * from '@emotion/core';
+export * from 'emotion-theming';
+export { default as isPropValid } from '@emotion/is-prop-valid';
+export { createGlobal, createReset } from './global';
+export * from './create';
+export * from './convert';
+export * from './ensure';
+export { lightenColor as lighten, darkenColor as darken } from './utils';
+export const ignoreSsrWarning = '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';

package/dist/collection/node_modules/@storybook/theming/dist/modern/modules/syntax.js

@@ -0,0 +1,150 @@
+import "core-js/modules/es.array.reduce.js";
+import { mkColor } from '../utils';
+export const chromeDark = {
+  BASE_FONT_FAMILY: 'Menlo, monospace',
+  BASE_FONT_SIZE: '11px',
+  BASE_LINE_HEIGHT: 1.2,
+  BASE_BACKGROUND_COLOR: 'rgb(36, 36, 36)',
+  BASE_COLOR: 'rgb(213, 213, 213)',
+  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
+  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
+  OBJECT_NAME_COLOR: 'rgb(227, 110, 236)',
+  OBJECT_VALUE_NULL_COLOR: 'rgb(127, 127, 127)',
+  OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(127, 127, 127)',
+  OBJECT_VALUE_REGEXP_COLOR: 'rgb(233, 63, 59)',
+  OBJECT_VALUE_STRING_COLOR: 'rgb(233, 63, 59)',
+  OBJECT_VALUE_SYMBOL_COLOR: 'rgb(233, 63, 59)',
+  OBJECT_VALUE_NUMBER_COLOR: 'hsl(252, 100%, 75%)',
+  OBJECT_VALUE_BOOLEAN_COLOR: 'hsl(252, 100%, 75%)',
+  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(85, 106, 242)',
+  HTML_TAG_COLOR: 'rgb(93, 176, 215)',
+  HTML_TAGNAME_COLOR: 'rgb(93, 176, 215)',
+  HTML_TAGNAME_TEXT_TRANSFORM: 'lowercase',
+  HTML_ATTRIBUTE_NAME_COLOR: 'rgb(155, 187, 220)',
+  HTML_ATTRIBUTE_VALUE_COLOR: 'rgb(242, 151, 102)',
+  HTML_COMMENT_COLOR: 'rgb(137, 137, 137)',
+  HTML_DOCTYPE_COLOR: 'rgb(192, 192, 192)',
+  ARROW_COLOR: 'rgb(145, 145, 145)',
+  ARROW_MARGIN_RIGHT: 3,
+  ARROW_FONT_SIZE: 12,
+  ARROW_ANIMATION_DURATION: '0',
+  TREENODE_FONT_FAMILY: 'Menlo, monospace',
+  TREENODE_FONT_SIZE: '11px',
+  TREENODE_LINE_HEIGHT: 1.2,
+  TREENODE_PADDING_LEFT: 12,
+  TABLE_BORDER_COLOR: 'rgb(85, 85, 85)',
+  TABLE_TH_BACKGROUND_COLOR: 'rgb(44, 44, 44)',
+  TABLE_TH_HOVER_COLOR: 'rgb(48, 48, 48)',
+  TABLE_SORT_ICON_COLOR: 'black',
+  // 'rgb(48, 57, 66)',
+  TABLE_DATA_BACKGROUND_IMAGE: 'linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(51, 139, 255, 0.0980392) 50%, rgba(51, 139, 255, 0.0980392))',
+  TABLE_DATA_BACKGROUND_SIZE: '128px 32px'
+};
+export const chromeLight = {
+  BASE_FONT_FAMILY: 'Menlo, monospace',
+  BASE_FONT_SIZE: '11px',
+  BASE_LINE_HEIGHT: 1.2,
+  BASE_BACKGROUND_COLOR: 'white',
+  BASE_COLOR: 'black',
+  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
+  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
+  OBJECT_NAME_COLOR: 'rgb(136, 19, 145)',
+  OBJECT_VALUE_NULL_COLOR: 'rgb(128, 128, 128)',
+  OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(128, 128, 128)',
+  OBJECT_VALUE_REGEXP_COLOR: 'rgb(196, 26, 22)',
+  OBJECT_VALUE_STRING_COLOR: 'rgb(196, 26, 22)',
+  OBJECT_VALUE_SYMBOL_COLOR: 'rgb(196, 26, 22)',
+  OBJECT_VALUE_NUMBER_COLOR: 'rgb(28, 0, 207)',
+  OBJECT_VALUE_BOOLEAN_COLOR: 'rgb(28, 0, 207)',
+  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(13, 34, 170)',
+  HTML_TAG_COLOR: 'rgb(168, 148, 166)',
+  HTML_TAGNAME_COLOR: 'rgb(136, 18, 128)',
+  HTML_TAGNAME_TEXT_TRANSFORM: 'lowercase',
+  HTML_ATTRIBUTE_NAME_COLOR: 'rgb(153, 69, 0)',
+  HTML_ATTRIBUTE_VALUE_COLOR: 'rgb(26, 26, 166)',
+  HTML_COMMENT_COLOR: 'rgb(35, 110, 37)',
+  HTML_DOCTYPE_COLOR: 'rgb(192, 192, 192)',
+  ARROW_COLOR: '#6e6e6e',
+  ARROW_MARGIN_RIGHT: 3,
+  ARROW_FONT_SIZE: 12,
+  ARROW_ANIMATION_DURATION: '0',
+  TREENODE_FONT_FAMILY: 'Menlo, monospace',
+  TREENODE_FONT_SIZE: '11px',
+  TREENODE_LINE_HEIGHT: 1.2,
+  TREENODE_PADDING_LEFT: 12,
+  TABLE_BORDER_COLOR: '#aaa',
+  TABLE_TH_BACKGROUND_COLOR: '#eee',
+  TABLE_TH_HOVER_COLOR: 'hsla(0, 0%, 90%, 1)',
+  TABLE_SORT_ICON_COLOR: '#6e6e6e',
+  TABLE_DATA_BACKGROUND_IMAGE: 'linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))',
+  TABLE_DATA_BACKGROUND_SIZE: '128px 32px'
+};
+
+const convertColors = colors => Object.entries(colors).reduce((acc, [k, v]) => Object.assign({}, acc, {
+  [k]: mkColor(v)
+}), {});
+
+export const create = ({
+  colors,
+  mono
+}) => {
+  const colorsObjs = convertColors(colors);
+  return {
+    token: {
+      fontFamily: mono,
+      WebkitFontSmoothing: 'antialiased',
+      '&.tag': colorsObjs.red3,
+      '&.comment': Object.assign({}, colorsObjs.green1, {
+        fontStyle: 'italic'
+      }),
+      '&.prolog': Object.assign({}, colorsObjs.green1, {
+        fontStyle: 'italic'
+      }),
+      '&.doctype': Object.assign({}, colorsObjs.green1, {
+        fontStyle: 'italic'
+      }),
+      '&.cdata': Object.assign({}, colorsObjs.green1, {
+        fontStyle: 'italic'
+      }),
+      '&.string': colorsObjs.red1,
+      '&.url': colorsObjs.cyan1,
+      '&.symbol': colorsObjs.cyan1,
+      '&.number': colorsObjs.cyan1,
+      '&.boolean': colorsObjs.cyan1,
+      '&.variable': colorsObjs.cyan1,
+      '&.constant': colorsObjs.cyan1,
+      '&.inserted': colorsObjs.cyan1,
+      '&.atrule': colorsObjs.blue1,
+      '&.keyword': colorsObjs.blue1,
+      '&.attr-value': colorsObjs.blue1,
+      '&.punctuation': colorsObjs.gray1,
+      '&.operator': colorsObjs.gray1,
+      '&.function': colorsObjs.gray1,
+      '&.deleted': colorsObjs.red2,
+      '&.important': {
+        fontWeight: 'bold'
+      },
+      '&.bold': {
+        fontWeight: 'bold'
+      },
+      '&.italic': {
+        fontStyle: 'italic'
+      },
+      '&.class-name': colorsObjs.cyan2,
+      '&.selector': colorsObjs.red3,
+      '&.attr-name': colorsObjs.red4,
+      '&.property': colorsObjs.red4,
+      '&.regex': colorsObjs.red4,
+      '&.entity': colorsObjs.red4,
+      '&.directive.tag .tag': Object.assign({
+        background: '#ffff00'
+      }, colorsObjs.gray1)
+    },
+    'language-json .token.boolean': colorsObjs.blue1,
+    'language-json .token.number': colorsObjs.blue1,
+    'language-json .token.property': colorsObjs.cyan2,
+    namespace: {
+      opacity: 0.7
+    }
+  };
+};

package/dist/collection/node_modules/@storybook/theming/dist/modern/themes/dark.js

@@ -0,0 +1,31 @@
+import { color, typography } from '../base';
+const theme = {
+  base: 'dark',
+  // Storybook-specific color palette
+  colorPrimary: '#FF4785',
+  // coral
+  colorSecondary: '#1EA7FD',
+  // ocean
+  // UI
+  appBg: '#2f2f2f',
+  appContentBg: color.darkest,
+  appBorderColor: 'rgba(255,255,255,.1)',
+  appBorderRadius: 4,
+  // Fonts
+  fontBase: typography.fonts.base,
+  fontCode: typography.fonts.mono,
+  // Text colors
+  textColor: color.lightest,
+  textInverseColor: color.darkest,
+  textMutedColor: color.mediumdark,
+  // Toolbar default and active colors
+  barTextColor: '#999999',
+  barSelectedColor: color.secondary,
+  barBg: color.darkest,
+  // Form colors
+  inputBg: '#3f3f3f',
+  inputBorder: 'rgba(0,0,0,.3)',
+  inputTextColor: color.lightest,
+  inputBorderRadius: 4
+};
+export default theme;

package/dist/collection/node_modules/@storybook/theming/dist/modern/themes/light.js

@@ -0,0 +1,31 @@
+import { color, typography, background } from '../base';
+const theme = {
+  base: 'light',
+  // Storybook-specific color palette
+  colorPrimary: '#FF4785',
+  // coral
+  colorSecondary: '#1EA7FD',
+  // ocean
+  // UI
+  appBg: background.app,
+  appContentBg: color.lightest,
+  appBorderColor: color.border,
+  appBorderRadius: 4,
+  // Fonts
+  fontBase: typography.fonts.base,
+  fontCode: typography.fonts.mono,
+  // Text colors
+  textColor: color.darkest,
+  textInverseColor: color.lightest,
+  textMutedColor: color.dark,
+  // Toolbar default and active colors
+  barTextColor: color.mediumdark,
+  barSelectedColor: color.secondary,
+  barBg: color.lightest,
+  // Form colors
+  inputBg: color.lightest,
+  inputBorder: color.border,
+  inputTextColor: color.darkest,
+  inputBorderRadius: 4
+};
+export default theme;