@bolio-ui/core 1.0.0

package/esm/text/stories.js

@@ -0,0 +1,104 @@
+import Text from '.';
+import Grid from '../grid';
+export default {
+  title: 'General/Text',
+  component: Text
+};
+export var Heading = function Heading() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
+    h1: true
+  }, "Hello my friend, have fun with Bolio UI \uD83E\uDD77\uD83C\uDFFC")));
+};
+export var Paragraph = function Paragraph() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
+    p: true
+  }, "Make your development more creative and with amazing tools for React."), /*#__PURE__*/React.createElement(Text, {
+    p: true,
+    b: true
+  }, "Make your development more creative and with amazing tools for React.")));
+};
+export var Small = function Small() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
+    small: true
+  }, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."), /*#__PURE__*/React.createElement(Text, {
+    small: true,
+    i: true
+  }, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.")));
+};
+export var Blockquote = function Blockquote() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
+    blockquote: true,
+    my: 0
+  }, "Build encapsulated components that manage their own state, then compose them to make complex UIs.")));
+};
+export var Types = function Types() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
+    b: true,
+    i: true,
+    style: {
+      letterSpacing: '0.6px'
+    }
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
+    span: true,
+    type: "default"
+  }, "Text colored")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
+    span: true,
+    type: "primary"
+  }, "Text colored")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
+    span: true,
+    type: "secondary"
+  }, "Text colored")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
+    span: true,
+    type: "success"
+  }, "Text colored")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
+    span: true,
+    type: "warning"
+  }, "Text colored")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
+    span: true,
+    type: "error"
+  }, "Text colored")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
+    span: true,
+    type: "info"
+  }, "Text colored")))));
+};
+export var Sizes = function Sizes() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
+    font: "12px",
+    mt: 0
+  }, "Font Size: 12px;"), /*#__PURE__*/React.createElement(Text, {
+    font: "14px"
+  }, "Font Size: 14px;"), /*#__PURE__*/React.createElement(Text, {
+    font: "1rem"
+  }, "Font Size: 1rem;"), /*#__PURE__*/React.createElement(Text, {
+    scale: 1.25,
+    mb: 0
+  }, "Font Size Scale: 1.25;")));
+};
+export var Compose = function Compose() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
+    p: true,
+    mt: 0
+  }, "Build encapsulated components that manage their own state, then compose them to make complex UIs."), /*#__PURE__*/React.createElement(Text, {
+    mb: 0
+  }, /*#__PURE__*/React.createElement(Text, {
+    small: true,
+    del: true
+  }, "Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM."), /*#__PURE__*/React.createElement(Text, {
+    small: true,
+    b: true
+  }, "We don\u2019t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code."))));
+};

package/esm/text/text.js

@@ -0,0 +1,94 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "children", "className"];
+import React, { useMemo } from 'react';
+import TextChild from './child';
+import { withScale } from '../use-scale';
+
+var getModifierChild = function getModifierChild(tags, children) {
+  if (!tags.length) return children;
+  var nextTag = tags.slice(1, tags.length);
+  return /*#__PURE__*/React.createElement(TextChild, {
+    tag: tags[0]
+  }, getModifierChild(nextTag, children));
+};
+
+function TextComponent(_ref) {
+  var _ref$h = _ref.h1,
+      h1 = _ref$h === void 0 ? false : _ref$h,
+      _ref$h2 = _ref.h2,
+      h2 = _ref$h2 === void 0 ? false : _ref$h2,
+      _ref$h3 = _ref.h3,
+      h3 = _ref$h3 === void 0 ? false : _ref$h3,
+      _ref$h4 = _ref.h4,
+      h4 = _ref$h4 === void 0 ? false : _ref$h4,
+      _ref$h5 = _ref.h5,
+      h5 = _ref$h5 === void 0 ? false : _ref$h5,
+      _ref$h6 = _ref.h6,
+      h6 = _ref$h6 === void 0 ? false : _ref$h6,
+      _ref$p = _ref.p,
+      p = _ref$p === void 0 ? false : _ref$p,
+      _ref$b = _ref.b,
+      b = _ref$b === void 0 ? false : _ref$b,
+      _ref$small = _ref.small,
+      small = _ref$small === void 0 ? false : _ref$small,
+      _ref$i = _ref.i,
+      i = _ref$i === void 0 ? false : _ref$i,
+      _ref$span = _ref.span,
+      span = _ref$span === void 0 ? false : _ref$span,
+      _ref$del = _ref.del,
+      del = _ref$del === void 0 ? false : _ref$del,
+      _ref$em = _ref.em,
+      em = _ref$em === void 0 ? false : _ref$em,
+      _ref$blockquote = _ref.blockquote,
+      blockquote = _ref$blockquote === void 0 ? false : _ref$blockquote,
+      children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var elements = {
+    h1: h1,
+    h2: h2,
+    h3: h3,
+    h4: h4,
+    h5: h5,
+    h6: h6,
+    p: p,
+    blockquote: blockquote
+  };
+  var inlineElements = {
+    span: span,
+    small: small,
+    b: b,
+    em: em,
+    i: i,
+    del: del
+  };
+  var names = Object.keys(elements).filter(function (name) {
+    return elements[name];
+  });
+  var inlineNames = Object.keys(inlineElements).filter(function (name) {
+    return inlineElements[name];
+  });
+  var tag = useMemo(function () {
+    if (names[0]) return names[0];
+    if (inlineNames[0]) return inlineNames[0];
+    return 'p';
+  }, [names, inlineNames]);
+  var renderableChildElements = inlineNames.filter(function (name) {
+    return name !== tag;
+  });
+  var modifers = useMemo(function () {
+    if (!renderableChildElements.length) return children;
+    return getModifierChild(renderableChildElements, children);
+  }, [renderableChildElements, children]);
+  return /*#__PURE__*/React.createElement(TextChild, _extends({
+    className: className,
+    tag: tag
+  }, props), modifers);
+}
+
+TextComponent.displayName = 'BolioUIText';
+var Text = withScale(TextComponent);
+export default Text;

package/esm/textarea/index.js

@@ -0,0 +1,2 @@
+import Textarea from './textarea';
+export default Textarea;

package/esm/textarea/stories.js

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import Textarea from '.';
+import Grid from '../grid';
+import Button from '../button';
+import useInput from '../use-input';
+export default {
+  title: 'Data Entry/Textarea',
+  component: Textarea
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
+    placeholder: "Enter a message."
+  })));
+};
+export var Disabled = function Disabled() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
+    width: "100%",
+    disabled: true,
+    placeholder: "This documentation always reflects the latest stable version of React. Since React 16, you can find older versions of the documentation on a separate page. Note that documentation for past versions is snapshotted at the time of the release, and isn\u2019t being continuously updated."
+  })));
+};
+export var Type = function Type() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
+    height: "65px",
+    value: "Default"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
+    type: "primary",
+    height: "65px",
+    value: "Primary"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
+    type: "secondary",
+    height: "65px",
+    value: "Secondary"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
+    type: "success",
+    height: "65px",
+    value: "Success"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
+    type: "warning",
+    height: "65px",
+    value: "Warning"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
+    type: "error",
+    height: "65px",
+    value: "Error"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
+    type: "info",
+    height: "65px",
+    value: "Info"
+  })));
+};
+export var GetChange = function GetChange() {
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var handler = function handler(e) {
+    setValue(e.target.value);
+    console.log(e.target.value);
+  };
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, {
+    width: "100%",
+    value: value,
+    onChange: handler,
+    placeholder: "This documentation always reflects the latest stable version of React. Since React 16, you can find older versions of the documentation on a separate page. Note that documentation for past versions is snapshotted at the time of the release, and isn\u2019t being continuously updated."
+  })));
+};
+export var WithUseInput = function WithUseInput() {
+  var _useInput = useInput('This documentation always reflects the latest stable version of React. Since React 16, you can find older versions of the documentation on a separate page. Note that documentation for past versions is snapshotted at the time of the release, and isn’t being continuously updated.'),
+      setState = _useInput.setState,
+      reset = _useInput.reset,
+      bindings = _useInput.bindings;
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Textarea, _extends({
+    width: "100%"
+  }, bindings))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    type: "secondary",
+    scale: 1 / 3,
+    onClick: function onClick() {
+      return setState(Math.random().toString(32));
+    }
+  }, "insert value")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    scale: 1 / 3,
+    onClick: function onClick() {
+      return reset();
+    }
+  }, "clear value")));
+};

package/esm/textarea/textarea.js

@@ -0,0 +1,116 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "resize"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useRef, useImperativeHandle, useEffect, useMemo, useState } from 'react';
+import useTheme from '../use-theme';
+import { tuple } from '../utils/prop-types';
+import { getColors } from '../input/styles';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var resizeTypes = tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
+var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+      onFocus = _ref.onFocus,
+      onBlur = _ref.onBlur,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$initialValue = _ref.initialValue,
+      initialValue = _ref$initialValue === void 0 ? '' : _ref$initialValue,
+      onChange = _ref.onChange,
+      value = _ref.value,
+      placeholder = _ref.placeholder,
+      _ref$resize = _ref.resize,
+      resize = _ref$resize === void 0 ? 'none' : _ref$resize,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var textareaRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return textareaRef.current;
+  });
+  var isControlledComponent = useMemo(function () {
+    return value !== undefined;
+  }, [value]);
+
+  var _useState = useState(initialValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      selfValue = _useState2[0],
+      setSelfValue = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hover = _useState4[0],
+      setHover = _useState4[1];
+
+  var _useMemo = useMemo(function () {
+    return getColors(theme.palette, type);
+  }, [theme.palette, type]),
+      color = _useMemo.color,
+      borderColor = _useMemo.borderColor,
+      hoverBorder = _useMemo.hoverBorder;
+
+  var classes = useClasses('wrapper', {
+    hover: hover,
+    disabled: disabled
+  }, className);
+
+  var changeHandler = function changeHandler(event) {
+    if (disabled || readOnly) return;
+    setSelfValue(event.target.value);
+    onChange && onChange(event);
+  };
+
+  var focusHandler = function focusHandler(e) {
+    setHover(true);
+    onFocus && onFocus(e);
+  };
+
+  var blurHandler = function blurHandler(e) {
+    setHover(false);
+    onBlur && onBlur(e);
+  };
+
+  useEffect(function () {
+    if (isControlledComponent) {
+      setSelfValue(value);
+    }
+  }, [isControlledComponent, value]);
+  var controlledValue = isControlledComponent ? {
+    value: selfValue
+  } : {
+    defaultValue: initialValue
+  };
+
+  var textareaProps = _extends({}, props, controlledValue);
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1283886166", [theme.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.palette.background]]]) + " " + (classes || "")
+  }, /*#__PURE__*/React.createElement("textarea", _extends({
+    ref: textareaRef,
+    disabled: disabled,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    onFocus: focusHandler,
+    onBlur: blurHandler,
+    onChange: changeHandler
+  }, textareaProps, {
+    className: _JSXStyle.dynamic([["1283886166", [theme.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.palette.background]]]) + " " + (textareaProps && textareaProps.className != null && textareaProps.className || "")
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1283886166",
+    dynamic: [theme.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.palette.background]
+  }, ".wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:".concat(theme.layout.radius, ";border:1px solid ").concat(borderColor, ";color:").concat(color, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;min-width:12.5rem;max-width:95vw;--textarea-font-size:").concat(SCALES.font(0.875), ";--textarea-height:").concat(SCALES.height(1, 'auto'), ";width:").concat(SCALES.width(1, 'initial'), ";height:var(--textarea-height);margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}.wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}textarea.__jsx-style-dynamic-selector{background-color:transparent;box-shadow:none;display:block;font-family:").concat(theme.font.sans, ";font-size:var(--textarea-font-size);width:100%;height:var(--textarea-height);border:none;outline:none;padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.5), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.5), ";resize:").concat(resize, ";}.disabled.__jsx-style-dynamic-selector>textarea.__jsx-style-dynamic-selector{cursor:not-allowed;}textarea.__jsx-style-dynamic-selector:-webkit-autofill,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;}")));
+});
+TextareaComponent.displayName = 'BolioUITextarea';
+var Textarea = withScale(TextareaComponent);
+export default Textarea;

package/esm/themes/index.js

@@ -0,0 +1,2 @@
+import Themes from './themes';
+export default Themes;

package/esm/themes/presets/dark.js

@@ -0,0 +1,67 @@
+import { defaultFont, defaultBreakpoints, defaultLayout } from './shared';
+export var palette = {
+  background: '#000',
+  foreground: '#fff',
+  accents_1: '#111',
+  accents_2: '#333',
+  accents_3: '#444',
+  accents_4: '#666',
+  accents_5: '#888',
+  accents_6: '#999',
+  accents_7: '#eaeaea',
+  accents_8: '#fafafa',
+  selection: '#f81ce5',
+  code: '#C25FFF',
+  border: '#333',
+  primary: '#0072F6',
+  primaryLight: '#96C1F3',
+  primaryLighter: '#CEE4FF',
+  primaryDark: '#00254E',
+  secondary: '#7828C9',
+  secondaryLighter: '#D1B1F1',
+  secondaryLight: '#EADCF9',
+  secondaryDark: '#290E45',
+  error: '#F31261',
+  errorLight: '#FAA8C6',
+  errorLighter: '#FDD8E6',
+  errorDark: '#4E041F',
+  success: '#17C965',
+  successLight: '#ADF5CD',
+  successLighter: '#DAFBE9',
+  successDark: '#06371C',
+  warning: '#F5A525',
+  warningLight: '#FBDBA8',
+  warningLighter: '#FDEFD9',
+  warningDark: '#4E3105',
+  info: '#06B7DC',
+  infoLighter: '#A5EEFE',
+  infoLight: '#D7F8FF',
+  infoDark: '#053B49',
+  purple: '#f81ce5',
+  alert: '#ff0080',
+  link: '#3291ff',
+  pre: '#363450'
+};
+export var expressiveness = {
+  linkStyle: 'none',
+  linkHoverStyle: 'none',
+  dropdownBoxShadow: '0 0 0 1px #333',
+  scrollerStart: 'rgba(255, 255, 255, 1)',
+  scrollerEnd: 'rgba(255, 255, 255, 0)',
+  shadowSmall: '0 0 0 1px #333',
+  shadowMedium: '0 0 0 1px #333',
+  shadowLarge: '0 0 0 1px #333',
+  portalOpacity: 0.75
+};
+export var font = defaultFont;
+export var breakpoints = defaultBreakpoints;
+export var layout = defaultLayout;
+export var themes = {
+  type: 'dark',
+  font: font,
+  layout: layout,
+  palette: palette,
+  breakpoints: breakpoints,
+  expressiveness: expressiveness
+};
+export default themes;

package/esm/themes/presets/default.js

@@ -0,0 +1,67 @@
+import { defaultFont, defaultBreakpoints, defaultLayout } from './shared';
+export var palette = {
+  background: '#fff',
+  foreground: '#000',
+  accents_1: '#fafafa',
+  accents_2: '#eaeaea',
+  accents_3: '#999',
+  accents_4: '#888',
+  accents_5: '#666',
+  accents_6: '#444',
+  accents_7: '#333',
+  accents_8: '#111',
+  selection: '#cee4fe',
+  code: '#C25FFF',
+  border: '#eaeaea',
+  primary: '#0072F6',
+  primaryLight: '#96C1F3',
+  primaryLighter: '#CEE4FF',
+  primaryDark: '#00254E',
+  secondary: '#7828C9',
+  secondaryLighter: '#D1B1F1',
+  secondaryLight: '#EADCF9',
+  secondaryDark: '#290E45',
+  error: '#F31261',
+  errorLight: '#FAA8C6',
+  errorLighter: '#FDD8E6',
+  errorDark: '#4E041F',
+  success: '#17C965',
+  successLight: '#ADF5CD',
+  successLighter: '#DAFBE9',
+  successDark: '#06371C',
+  warning: '#F5A525',
+  warningLight: '#FBDBA8',
+  warningLighter: '#FDEFD9',
+  warningDark: '#4E3105',
+  info: '#06B7DC',
+  infoLighter: '#A5EEFE',
+  infoLight: '#D7F8FF',
+  infoDark: '#053B49',
+  purple: '#f81ce5',
+  alert: '#ff0080',
+  link: '#0070f3',
+  pre: '#363450'
+};
+export var expressiveness = {
+  linkStyle: 'none',
+  linkHoverStyle: 'none',
+  dropdownBoxShadow: '0 4px 4px 0 rgba(0, 0, 0, 0.02)',
+  scrollerStart: 'rgba(255, 255, 255, 1)',
+  scrollerEnd: 'rgba(255, 255, 255, 0)',
+  shadowSmall: '0 5px 10px rgba(0, 0, 0, 0.12)',
+  shadowMedium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+  shadowLarge: '0 30px 60px rgba(0, 0, 0, 0.12)',
+  portalOpacity: 0.25
+};
+export var font = defaultFont;
+export var breakpoints = defaultBreakpoints;
+export var layout = defaultLayout;
+export var themes = {
+  type: 'light',
+  font: font,
+  layout: layout,
+  palette: palette,
+  breakpoints: breakpoints,
+  expressiveness: expressiveness
+};
+export default themes;

package/esm/themes/presets/index.js

@@ -0,0 +1 @@
+export {};

package/esm/themes/presets/shared.js

@@ -0,0 +1,42 @@
+export var defaultFont = {
+  sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+  mono: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace',
+  prism: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono", "Courier New", monospace'
+};
+export var defaultBreakpoints = {
+  xs: {
+    min: '0',
+    max: '650px'
+  },
+  sm: {
+    min: '650px',
+    max: '900px'
+  },
+  md: {
+    min: '900px',
+    max: '1280px'
+  },
+  lg: {
+    min: '1280px',
+    max: '1920px'
+  },
+  xl: {
+    min: '1920px',
+    max: '10000px'
+  }
+};
+export var defaultLayout = {
+  gap: '16pt',
+  gapNegative: '-16pt',
+  gapHalf: '8pt',
+  gapHalfNegative: '-8pt',
+  gapQuarter: '4pt',
+  gapQuarterNegative: '-4pt',
+  pageMargin: '16pt',
+  pageWidth: '900pt',
+  pageWidthWithMargin: '930pt',
+  breakpointMobile: defaultBreakpoints.xs.max,
+  breakpointTablet: defaultBreakpoints.sm.max,
+  radius: '6px',
+  unit: '16px'
+};