@bolio-ui/core 1.0.3 → 1.0.5

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/Textarea/Textarea.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+declare const resizeTypes: ["none", "both", "horizontal", "vertical", "initial", "inherit"];
+export declare type TextareaResizes = typeof resizeTypes[number];
+export declare type TextareaTypes = NormalTypes;
+interface Props {
+    value?: string;
+    initialValue?: string;
+    placeholder?: string;
+    type?: TextareaTypes;
+    disabled?: boolean;
+    readOnly?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    className?: string;
+    resize?: TextareaResizes;
+}
+declare type NativeAttrs = Omit<React.TextareaHTMLAttributes<any>, keyof Props>;
+export declare type TextareaProps = Props & NativeAttrs;
+declare const Textarea: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & React.RefAttributes<HTMLTextAreaElement> & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;

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/Textarea/index.d.ts

@@ -0,0 +1,3 @@
+import Textarea from "./Textarea";
+export type { TextareaProps, TextareaResizes, TextareaTypes } from "./Textarea";
+export default Textarea;

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/Themes/Presets/Dark.d.ts

@@ -0,0 +1,8 @@
+import { BolioUIThemes, BolioUIThemesPalette, BolioUIThemesExpressiveness } from "./index";
+export declare const palette: BolioUIThemesPalette;
+export declare const expressiveness: BolioUIThemesExpressiveness;
+export declare const font: import("./index").BolioUIThemesFont;
+export declare const breakpoints: import("./index").BolioUIThemesBreakpoints;
+export declare const layout: import("./index").BolioUIThemesLayout;
+export declare const themes: BolioUIThemes;
+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: '#444',
+  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.d.ts

@@ -0,0 +1,8 @@
+import { BolioUIThemes, BolioUIThemesPalette, BolioUIThemesExpressiveness } from "./index";
+export declare const palette: BolioUIThemesPalette;
+export declare const expressiveness: BolioUIThemesExpressiveness;
+export declare const font: import("./index").BolioUIThemesFont;
+export declare const breakpoints: import("./index").BolioUIThemesBreakpoints;
+export declare const layout: import("./index").BolioUIThemesLayout;
+export declare const themes: BolioUIThemes;
+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: '#999',
+  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/Shared.d.ts

@@ -0,0 +1,4 @@
+import { BolioUIThemesBreakpoints, BolioUIThemesFont, BolioUIThemesLayout } from "./index";
+export declare const defaultFont: BolioUIThemesFont;
+export declare const defaultBreakpoints: BolioUIThemesBreakpoints;
+export declare const defaultLayout: BolioUIThemesLayout;

package/esm/Themes/Presets/index.d.ts

@@ -0,0 +1,93 @@
+export interface BolioUIThemesPalette {
+    background: string;
+    foreground: string;
+    accents_1: string;
+    accents_2: string;
+    accents_3: string;
+    accents_4: string;
+    accents_5: string;
+    accents_6: string;
+    accents_7: string;
+    accents_8: string;
+    selection: string;
+    code: string;
+    border: string;
+    success: string;
+    successLighter: string;
+    successLight: string;
+    successDark: string;
+    primary: string;
+    primaryLighter: string;
+    primaryLight: string;
+    primaryDark: string;
+    secondary: string;
+    secondaryLighter: string;
+    secondaryLight: string;
+    secondaryDark: string;
+    error: string;
+    errorLighter: string;
+    errorLight: string;
+    errorDark: string;
+    warning: string;
+    warningLighter: string;
+    warningLight: string;
+    warningDark: string;
+    info: string;
+    infoLighter: string;
+    infoLight: string;
+    infoDark: string;
+    link: string;
+    purple: string;
+    alert: string;
+    pre: string;
+}
+export interface BolioUIThemesExpressiveness {
+    linkStyle: string;
+    linkHoverStyle: string;
+    dropdownBoxShadow: string;
+    scrollerStart: string;
+    scrollerEnd: string;
+    shadowSmall: string;
+    shadowMedium: string;
+    shadowLarge: string;
+    portalOpacity: number;
+}
+export interface BolioUIThemesLayout {
+    gap: string;
+    gapNegative: string;
+    gapHalf: string;
+    gapHalfNegative: string;
+    gapQuarter: string;
+    gapQuarterNegative: string;
+    pageMargin: string;
+    pageWidth: string;
+    pageWidthWithMargin: string;
+    breakpointMobile: string;
+    breakpointTablet: string;
+    radius: string;
+    unit: string;
+}
+export interface BolioUIThemesFont {
+    sans: string;
+    mono: string;
+    prism: string;
+}
+export interface BreakpointsItem {
+    min: string;
+    max: string;
+}
+export interface BolioUIThemesBreakpoints {
+    xs: BreakpointsItem;
+    sm: BreakpointsItem;
+    md: BreakpointsItem;
+    lg: BreakpointsItem;
+    xl: BreakpointsItem;
+}
+export interface BolioUIThemes {
+    type: string;
+    font: BolioUIThemesFont;
+    layout: BolioUIThemesLayout;
+    palette: BolioUIThemesPalette;
+    breakpoints: BolioUIThemesBreakpoints;
+    expressiveness: BolioUIThemesExpressiveness;
+}

package/esm/Themes/Themes.d.ts

@@ -0,0 +1,18 @@
+import { BolioUIThemes } from "./Presets/index";
+import type { DeepPartial } from "../utils/types";
+export declare type BolioUIUserTheme = DeepPartial<BolioUIThemes> & {
+    type: string;
+};
+export declare const isObject: (target: unknown) => unknown;
+export declare const deepDuplicable: <T extends Record<string, unknown>>(source: T, target: T) => T;
+declare const Themes: {
+    isPresetTheme: (themeOrType?: string | BolioUIThemes | BolioUIUserTheme | undefined) => boolean;
+    isAvailableThemeType: (type?: string | undefined) => boolean;
+    hasUserCustomTheme: (themes?: Array<BolioUIThemes>) => boolean;
+    getPresets: () => Array<BolioUIThemes>;
+    getPresetStaticTheme: () => BolioUIThemes;
+    create: (base: BolioUIThemes, custom: BolioUIUserTheme) => BolioUIThemes;
+    createFromDark: (custom: BolioUIUserTheme) => BolioUIThemes;
+    createFromLight: (custom: BolioUIUserTheme) => BolioUIThemes;
+};
+export default Themes;