@bolio-ui/core 1.0.7 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/dist/Avatar/index.js +31 -31
  2. package/dist/Badge/index.js +33 -33
  3. package/dist/BolioUIProvider/index.js +37 -37
  4. package/dist/Breadcrumbs/index.js +30 -30
  5. package/dist/Button/index.js +37 -37
  6. package/dist/ButtonDropdown/index.js +91 -80
  7. package/dist/ButtonDropdown/styles.d.ts +1 -0
  8. package/dist/ButtonGroup/index.js +31 -29
  9. package/dist/Capacity/index.js +26 -26
  10. package/dist/Card/Card.d.ts +1 -0
  11. package/dist/Card/index.js +62 -52
  12. package/dist/Checkbox/index.js +187 -169
  13. package/dist/Code/index.js +26 -26
  14. package/dist/Collapse/index.js +26 -26
  15. package/dist/Container/index.js +26 -26
  16. package/dist/CssBaseline/index.js +26 -26
  17. package/dist/Description/index.js +26 -26
  18. package/dist/Display/index.js +26 -26
  19. package/dist/Divider/index.js +26 -26
  20. package/dist/Dot/index.js +26 -26
  21. package/dist/Drawer/index.js +26 -26
  22. package/dist/Fieldset/index.js +26 -26
  23. package/dist/Grid/index.js +26 -26
  24. package/dist/Image/index.js +26 -26
  25. package/dist/Input/InputBlockLabel.d.ts +2 -1
  26. package/dist/Input/InputProps.d.ts +3 -0
  27. package/dist/Input/index.js +92 -66
  28. package/dist/Input/styles.d.ts +3 -1
  29. package/dist/Keyboard/index.js +26 -26
  30. package/dist/Link/index.js +26 -26
  31. package/dist/Loading/index.js +26 -26
  32. package/dist/MdxWidgets/index.js +26 -26
  33. package/dist/Modal/index.js +37 -37
  34. package/dist/Note/index.js +26 -26
  35. package/dist/Page/index.js +26 -26
  36. package/dist/Pagination/index.js +26 -26
  37. package/dist/Popover/index.js +26 -26
  38. package/dist/Progress/index.js +26 -26
  39. package/dist/Radio/index.js +26 -26
  40. package/dist/Rating/index.js +26 -26
  41. package/dist/Row/index.js +26 -26
  42. package/dist/Section/index.js +26 -26
  43. package/dist/Select/index.js +101 -92
  44. package/dist/Select/styles.d.ts +6 -5
  45. package/dist/Slider/index.js +26 -26
  46. package/dist/Snippet/index.js +26 -26
  47. package/dist/Spacer/index.js +26 -26
  48. package/dist/Spinner/index.js +26 -26
  49. package/dist/Table/index.js +26 -26
  50. package/dist/Tabs/index.js +29 -29
  51. package/dist/Tag/index.js +26 -26
  52. package/dist/Text/index.js +26 -26
  53. package/dist/Textarea/index.js +69 -45
  54. package/dist/Themes/index.js +26 -26
  55. package/dist/Toggle/index.js +33 -33
  56. package/dist/Tooltip/index.js +26 -26
  57. package/dist/index.js +349 -273
  58. package/dist/use-all-themes/index.js +26 -26
  59. package/dist/use-media-query/index.js +26 -26
  60. package/dist/use-scale/index.js +26 -26
  61. package/dist/use-theme/index.js +26 -26
  62. package/esm/Avatar/Avatar.js +5 -5
  63. package/esm/Badge/Badge.js +7 -7
  64. package/esm/Badge/stories.js +1 -1
  65. package/esm/Breadcrumbs/Breadcrumbs.js +4 -4
  66. package/esm/Button/Button.js +3 -3
  67. package/esm/Button/styles.js +8 -8
  68. package/esm/ButtonDropdown/ButtonDropdown.js +13 -13
  69. package/esm/ButtonDropdown/ButtonDropdownItem.js +3 -3
  70. package/esm/ButtonDropdown/Icon.js +1 -1
  71. package/esm/ButtonDropdown/styles.d.ts +1 -0
  72. package/esm/ButtonDropdown/styles.js +48 -37
  73. package/esm/ButtonGroup/ButtonGroup.js +5 -3
  74. package/esm/Capacity/stories.js +40 -10
  75. package/esm/Card/Card.d.ts +1 -0
  76. package/esm/Card/Card.js +8 -7
  77. package/esm/Card/stories.js +56 -7
  78. package/esm/Card/styles.js +28 -19
  79. package/esm/Checkbox/Checkbox.js +6 -6
  80. package/esm/Checkbox/CheckboxIcon.js +34 -16
  81. package/esm/Input/Input.js +17 -16
  82. package/esm/Input/InputBlockLabel.d.ts +2 -1
  83. package/esm/Input/InputBlockLabel.js +6 -5
  84. package/esm/Input/InputProps.d.ts +3 -0
  85. package/esm/Input/styles.d.ts +3 -1
  86. package/esm/Input/styles.js +36 -8
  87. package/esm/Select/Select.js +11 -16
  88. package/esm/Select/SelectDropdown.js +4 -4
  89. package/esm/Select/SelectIconClear.js +7 -7
  90. package/esm/Select/SelectMultipleValue.js +4 -4
  91. package/esm/Select/SelectOption.js +6 -6
  92. package/esm/Select/styles.d.ts +6 -5
  93. package/esm/Select/styles.js +43 -29
  94. package/esm/Tabs/TabsItem.js +3 -3
  95. package/esm/Textarea/Textarea.js +7 -11
  96. package/esm/Themes/Presets/Dark.js +14 -14
  97. package/esm/Themes/Presets/Default.js +11 -11
  98. package/esm/Themes/Presets/Shared.js +1 -1
  99. package/esm/Toggle/Toggle.js +7 -7
  100. package/package.json +1 -1
package/esm/Select/styles.js CHANGED
@@ -1,48 +1,62 @@
1
- export var getColors = function getColors(palette, status) {
1
+ export var getColors = function getColors(palette, status, disabled) {
2
2
  var colors = {
3
3
  "default": {
4
- border: palette.border,
5
- borderActive: palette.foreground,
6
- iconBorder: palette.accents_5,
7
- placeholderColor: palette.accents_3
4
+ color: palette.foreground,
5
+ bgColor: palette.accents_2,
6
+ borderColor: palette.accents_3,
7
+ hoverBgColor: palette.accents_2,
8
+ hoverBorder: palette.accents_6
8
9
  },
9
10
  primary: {
10
- border: palette.primary,
11
- borderActive: palette.primary,
12
- iconBorder: palette.primary,
13
- placeholderColor: palette.accents_3
11
+ color: palette.primaryDark,
12
+ bgColor: palette.primaryLight,
13
+ borderColor: palette.primary,
14
+ hoverBgColor: palette.primaryLight,
15
+ hoverBorder: palette.primary
14
16
  },
15
17
  secondary: {
16
- border: palette.secondary,
17
- borderActive: palette.secondary,
18
- iconBorder: palette.secondary,
19
- placeholderColor: palette.accents_3
18
+ color: palette.secondaryDark,
19
+ bgColor: palette.secondaryLight,
20
+ borderColor: palette.secondary,
21
+ hoverBgColor: palette.secondaryLight,
22
+ hoverBorder: palette.secondary
20
23
  },
21
24
  success: {
22
- border: palette.success,
23
- borderActive: palette.success,
24
- iconBorder: palette.success,
25
- placeholderColor: palette.accents_3
25
+ color: palette.successDark,
26
+ bgColor: palette.successLight,
27
+ borderColor: palette.success,
28
+ hoverBgColor: palette.successLight,
29
+ hoverBorder: palette.success
26
30
  },
27
31
  warning: {
28
- border: palette.warning,
29
- borderActive: palette.warning,
30
- iconBorder: palette.warning,
31
- placeholderColor: palette.accents_3
32
+ color: palette.warningDark,
33
+ bgColor: palette.warningLight,
34
+ borderColor: palette.warning,
35
+ hoverBgColor: palette.warningLight,
36
+ hoverBorder: palette.warning
32
37
  },
33
38
  error: {
34
- border: palette.error,
35
- borderActive: palette.error,
36
- iconBorder: palette.error,
37
- placeholderColor: palette.error
39
+ color: palette.errorDark,
40
+ bgColor: palette.errorLight,
41
+ borderColor: palette.error,
42
+ hoverBgColor: palette.errorLight,
43
+ hoverBorder: palette.error
38
44
  },
39
45
  info: {
40
- border: palette.info,
41
- borderActive: palette.info,
42
- iconBorder: palette.info,
43
- placeholderColor: palette.accents_3
46
+ color: palette.infoDark,
47
+ bgColor: palette.infoLight,
48
+ borderColor: palette.info,
49
+ hoverBgColor: palette.infoLight,
50
+ hoverBorder: palette.info
44
51
  }
45
52
  };
53
+ if (disabled) return {
54
+ color: palette.accents_5,
55
+ bgColor: palette.accents_3,
56
+ borderColor: palette.accents_4,
57
+ hoverBgColor: palette.accents_3,
58
+ hoverBorder: palette.accents_4
59
+ };
46
60
  if (!status) return colors["default"];
47
61
  return colors[status];
48
62
  };
package/esm/Tabs/TabsItem.js CHANGED
@@ -57,11 +57,11 @@ function TabsItemComponent(_ref) {
57
57
  onClick: clickHandler,
58
58
  style: active ? activeStyle : {},
59
59
  "data-bolioui": "tab-item",
60
- className: _JSXStyle.dynamic([["605786882", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.875), SCALES.pr(0.55), SCALES.pb(0.875), SCALES.pl(0.55), SCALES.mt(0), SCALES.mr(0.2), SCALES.mb(0), SCALES.ml(0.2), SCALES.pl(0.28), SCALES.pr(0.28), theme.palette.foreground, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3, label]]]) + " " + (classes || "")
60
+ className: _JSXStyle.dynamic([["243163264", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.875), SCALES.pr(0.55), SCALES.pb(0.875), SCALES.pl(0.55), SCALES.mt(0), SCALES.mr(0.2), SCALES.mb(0), SCALES.ml(0.2), SCALES.pl(0.28), SCALES.pr(0.28), theme.palette.foreground, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3, label]]]) + " " + (classes || "")
61
61
  }, label, /*#__PURE__*/React.createElement(_JSXStyle, {
62
- id: "605786882",
62
+ id: "243163264",
63
63
  dynamic: [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.875), SCALES.pr(0.55), SCALES.pb(0.875), SCALES.pl(0.55), SCALES.mt(0), SCALES.mr(0.2), SCALES.mb(0), SCALES.ml(0.2), SCALES.pl(0.28), SCALES.pr(0.28), theme.palette.foreground, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3, label]
64
- }, ".tab.__jsx-style-dynamic-selector{position:relative;box-sizing:border-box;cursor:pointer;outline:0;text-transform:capitalize;white-space:nowrap;background-color:transparent;color:".concat(theme.palette.accents_5, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:").concat(SCALES.font(0.875), ";line-height:normal;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.875), " ").concat(SCALES.pr(0.55), " ").concat(SCALES.pb(0.875), " ").concat(SCALES.pl(0.55), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0.2), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0.2), ";z-index:1;--tabs-item-hover-left:calc(-1 * ").concat(SCALES.pl(0.28), ");--tabs-item-hover-right:calc(-1 * ").concat(SCALES.pr(0.28), ");}.tab.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}.tab.__jsx-style-dynamic-selector:after{position:absolute;content:'';bottom:-1px;left:0;right:0;width:100%;height:2px;border-radius:4px;-webkit-transform:scaleX(0.75);-ms-transform:scaleX(0.75);transform:scaleX(0.75);background-color:").concat(theme.palette.foreground, ";-webkit-transition:opacity,-webkit-transform 200ms ease-in;-webkit-transition:opacity,transform 200ms ease-in;transition:opacity,transform 200ms ease-in;opacity:0;}.active.__jsx-style-dynamic-selector:after{opacity:1;-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}.tab.__jsx-style-dynamic-selector svg{max-height:1em;margin-right:5px;}.tab.__jsx-style-dynamic-selector:first-of-type{margin-left:0;}.active.__jsx-style-dynamic-selector{color:").concat(theme.palette.foreground, ";}.disabled.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_3, ";cursor:not-allowed;}.hide-border.__jsx-style-dynamic-selector:before{display:block;content:").concat(label, ";font-weight:500;height:0;overflow:hidden;visibility:hidden;}.hide-border.__jsx-style-dynamic-selector:after{display:none;}.hide-border.active.__jsx-style-dynamic-selector{font-weight:500;}")));
64
+ }, ".tab.__jsx-style-dynamic-selector{position:relative;box-sizing:border-box;cursor:pointer;outline:0;white-space:nowrap;background-color:transparent;color:".concat(theme.palette.accents_5, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:").concat(SCALES.font(0.875), ";line-height:normal;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.875), " ").concat(SCALES.pr(0.55), " ").concat(SCALES.pb(0.875), " ").concat(SCALES.pl(0.55), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0.2), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0.2), ";z-index:1;--tabs-item-hover-left:calc(-1 * ").concat(SCALES.pl(0.28), ");--tabs-item-hover-right:calc(-1 * ").concat(SCALES.pr(0.28), ");}.tab.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}.tab.__jsx-style-dynamic-selector:after{position:absolute;content:'';bottom:-1px;left:0;right:0;width:100%;height:2px;border-radius:4px;-webkit-transform:scaleX(0.75);-ms-transform:scaleX(0.75);transform:scaleX(0.75);background-color:").concat(theme.palette.foreground, ";-webkit-transition:opacity,-webkit-transform 200ms ease-in;-webkit-transition:opacity,transform 200ms ease-in;transition:opacity,transform 200ms ease-in;opacity:0;}.active.__jsx-style-dynamic-selector:after{opacity:1;-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}.tab.__jsx-style-dynamic-selector svg{max-height:1em;margin-right:5px;}.tab.__jsx-style-dynamic-selector:first-of-type{margin-left:0;}.active.__jsx-style-dynamic-selector{color:").concat(theme.palette.foreground, ";}.disabled.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_3, ";cursor:not-allowed;}.hide-border.__jsx-style-dynamic-selector:before{display:block;content:").concat(label, ";font-weight:500;height:0;overflow:hidden;visibility:hidden;}.hide-border.__jsx-style-dynamic-selector:after{display:none;}.hide-border.active.__jsx-style-dynamic-selector{font-weight:500;}")));
65
65
  };
66
66
 
67
67
  TabsInternalCell.displayName = 'BolioUITabsInternalCell';
package/esm/Textarea/Textarea.js CHANGED
@@ -53,13 +53,9 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
53
53
  hover = _useState4[0],
54
54
  setHover = _useState4[1];
55
55
 
56
- var _useMemo = useMemo(function () {
56
+ var colors = useMemo(function () {
57
57
  return getColors(theme.palette, type);
58
- }, [theme.palette, type]),
59
- color = _useMemo.color,
60
- borderColor = _useMemo.borderColor,
61
- hoverBorder = _useMemo.hoverBorder;
62
-
58
+ }, [theme.palette, type]);
63
59
  var classes = useClasses('wrapper', {
64
60
  hover: hover,
65
61
  disabled: disabled
@@ -95,7 +91,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
95
91
  var textareaProps = _extends({}, props, controlledValue);
96
92
 
97
93
  return /*#__PURE__*/React.createElement("div", {
98
- 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 || "")
94
+ className: _JSXStyle.dynamic([["2097224582", [theme.layout.radius, colors.borderColor, colors.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), colors.hoverBorder, colors.hoverBgColor, theme.palette.accents_2, theme.palette.accents_3, colors.bgColor, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.layout.radius, colors.hoverBorder, colors.hoverBgColor, theme.palette.background]]]) + " " + (classes || "")
99
95
  }, /*#__PURE__*/React.createElement("textarea", _extends({
100
96
  ref: textareaRef,
101
97
  disabled: disabled,
@@ -105,11 +101,11 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
105
101
  onBlur: blurHandler,
106
102
  onChange: changeHandler
107
103
  }, textareaProps, {
108
- 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 || "")
104
+ className: _JSXStyle.dynamic([["2097224582", [theme.layout.radius, colors.borderColor, colors.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), colors.hoverBorder, colors.hoverBgColor, theme.palette.accents_2, theme.palette.accents_3, colors.bgColor, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.layout.radius, colors.hoverBorder, colors.hoverBgColor, theme.palette.background]]]) + " " + (textareaProps && textareaProps.className != null && textareaProps.className || "")
109
105
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
110
- id: "1283886166",
111
- 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]
112
- }, ".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;}")));
106
+ id: "2097224582",
107
+ dynamic: [theme.layout.radius, colors.borderColor, colors.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), colors.hoverBorder, colors.hoverBgColor, theme.palette.accents_2, theme.palette.accents_3, colors.bgColor, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.layout.radius, colors.hoverBorder, colors.hoverBgColor, theme.palette.background]
108
+ }, ".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(colors.borderColor, ";color:").concat(colors.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(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}.wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_2, ";border-color:").concat(theme.palette.accents_3, ";cursor:not-allowed;}textarea.__jsx-style-dynamic-selector{background-color:").concat(colors.bgColor, ";box-shadow:none;display:block;font-family:").concat(theme.font.sans, ";font-size:var(--textarea-font-size);width:100%;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, ";border-radius:").concat(theme.layout.radius, ";}.disabled.__jsx-style-dynamic-selector>textarea.__jsx-style-dynamic-selector{cursor:not-allowed;}textarea.active.__jsx-style-dynamic-selector,textarea.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background:").concat(colors.hoverBgColor, ";}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;}")));
113
109
  });
114
110
  TextareaComponent.displayName = 'BolioUITextarea';
115
111
  var Textarea = withScale(TextareaComponent);
package/esm/Themes/Presets/Dark.js CHANGED
@@ -10,32 +10,32 @@ export var palette = {
10
10
  accents_6: '#999',
11
11
  accents_7: '#eaeaea',
12
12
  accents_8: '#fafafa',
13
- selection: '#f81ce5',
13
+ selection: 'rgba(248,28,229, 0.5)',
14
14
  code: '#C25FFF',
15
15
  border: '#333',
16
16
  primary: '#0072F6',
17
- primaryLight: '#96C1F3',
18
- primaryLighter: '#CEE4FF',
17
+ primaryLight: '#CEE4FF',
18
+ primaryLighter: '#96C1F3',
19
19
  primaryDark: '#00254E',
20
20
  secondary: '#7828C9',
21
- secondaryLighter: '#D1B1F1',
22
21
  secondaryLight: '#EADCF9',
22
+ secondaryLighter: '#D1B1F1',
23
23
  secondaryDark: '#290E45',
24
24
  error: '#F31261',
25
- errorLight: '#FAA8C6',
26
- errorLighter: '#FDD8E6',
25
+ errorLight: '#FDD8E6',
26
+ errorLighter: '#FAA8C6',
27
27
  errorDark: '#4E041F',
28
28
  success: '#17C965',
29
- successLight: '#ADF5CD',
30
- successLighter: '#DAFBE9',
29
+ successLight: '#DAFBE9',
30
+ successLighter: '#ADF5CD',
31
31
  successDark: '#06371C',
32
32
  warning: '#F5A525',
33
- warningLight: '#FBDBA8',
34
- warningLighter: '#FDEFD9',
33
+ warningLight: '#FDEFD9',
34
+ warningLighter: '#FBDBA8',
35
35
  warningDark: '#4E3105',
36
36
  info: '#06B7DC',
37
- infoLighter: '#A5EEFE',
38
37
  infoLight: '#D7F8FF',
38
+ infoLighter: '#A5EEFE',
39
39
  infoDark: '#053B49',
40
40
  purple: '#f81ce5',
41
41
  alert: '#ff0080',
@@ -48,9 +48,9 @@ export var expressiveness = {
48
48
  dropdownBoxShadow: '0 0 0 1px #333',
49
49
  scrollerStart: 'rgba(255, 255, 255, 1)',
50
50
  scrollerEnd: 'rgba(255, 255, 255, 0)',
51
- shadowSmall: '0 0 0 1px #333',
52
- shadowMedium: '0 0 0 1px #333',
53
- shadowLarge: '0 0 0 1px #333',
51
+ shadowSmall: '0 5px 10px rgba(255, 255, 255, 0.12)',
52
+ shadowMedium: '0 8px 30px rgba(255, 255, 255, 0.12)',
53
+ shadowLarge: '0 30px 60px rgba(255, 255, 255, 0.12)',
54
54
  portalOpacity: 0.75
55
55
  };
56
56
  export var font = defaultFont;
package/esm/Themes/Presets/Default.js CHANGED
@@ -10,32 +10,32 @@ export var palette = {
10
10
  accents_6: '#444',
11
11
  accents_7: '#333',
12
12
  accents_8: '#111',
13
- selection: '#cee4fe',
13
+ selection: 'rgba(206,228,254, 0.5)',
14
14
  code: '#C25FFF',
15
15
  border: '#eaeaea',
16
16
  primary: '#0072F6',
17
- primaryLight: '#96C1F3',
18
- primaryLighter: '#CEE4FF',
17
+ primaryLight: '#CEE4FF',
18
+ primaryLighter: '#96C1F3',
19
19
  primaryDark: '#00254E',
20
20
  secondary: '#7828C9',
21
- secondaryLighter: '#D1B1F1',
22
21
  secondaryLight: '#EADCF9',
22
+ secondaryLighter: '#D1B1F1',
23
23
  secondaryDark: '#290E45',
24
24
  error: '#F31261',
25
- errorLight: '#FAA8C6',
26
- errorLighter: '#FDD8E6',
25
+ errorLight: '#FDD8E6',
26
+ errorLighter: '#FAA8C6',
27
27
  errorDark: '#4E041F',
28
28
  success: '#17C965',
29
- successLight: '#ADF5CD',
30
- successLighter: '#DAFBE9',
29
+ successLight: '#DAFBE9',
30
+ successLighter: '#ADF5CD',
31
31
  successDark: '#06371C',
32
32
  warning: '#F5A525',
33
- warningLight: '#FBDBA8',
34
- warningLighter: '#FDEFD9',
33
+ warningLight: '#FDEFD9',
34
+ warningLighter: '#FBDBA8',
35
35
  warningDark: '#4E3105',
36
36
  info: '#06B7DC',
37
- infoLighter: '#A5EEFE',
38
37
  infoLight: '#D7F8FF',
38
+ infoLighter: '#A5EEFE',
39
39
  infoDark: '#053B49',
40
40
  purple: '#f81ce5',
41
41
  alert: '#ff0080',
package/esm/Themes/Presets/Shared.js CHANGED
@@ -37,6 +37,6 @@ export var defaultLayout = {
37
37
  pageWidthWithMargin: '930pt',
38
38
  breakpointMobile: defaultBreakpoints.xs.max,
39
39
  breakpointTablet: defaultBreakpoints.sm.max,
40
- radius: '6px',
40
+ radius: '10px',
41
41
  unit: '16px'
42
42
  };
package/esm/Toggle/Toggle.js CHANGED
@@ -60,21 +60,21 @@ function ToggleComponent(_ref) {
60
60
  setSelfChecked(checked);
61
61
  }, [checked]);
62
62
  return /*#__PURE__*/React.createElement("label", _extends({}, props, {
63
- className: _JSXStyle.dynamic([["3938822023", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (props && props.className != null && props.className || className || "")
63
+ className: _JSXStyle.dynamic([["2317841100", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (props && props.className != null && props.className || className || "")
64
64
  }), /*#__PURE__*/React.createElement("input", {
65
65
  type: "checkbox",
66
66
  disabled: disabled,
67
67
  checked: selfChecked,
68
68
  onChange: changeHandle,
69
- className: _JSXStyle.dynamic([["3938822023", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]])
69
+ className: _JSXStyle.dynamic([["2317841100", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]])
70
70
  }), /*#__PURE__*/React.createElement("div", {
71
- className: _JSXStyle.dynamic([["3938822023", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (classes || "")
71
+ className: _JSXStyle.dynamic([["2317841100", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (classes || "")
72
72
  }, /*#__PURE__*/React.createElement("span", {
73
- className: _JSXStyle.dynamic([["3938822023", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + "inner"
73
+ className: _JSXStyle.dynamic([["2317841100", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + "inner"
74
74
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
75
- id: "3938822023",
76
- dynamic: [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]
77
- }, "label.__jsx-style-dynamic-selector{-webkit-tap-highlight-color:transparent;display:inline-block;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";--toggle-font-size:").concat(SCALES.font(1), ";--toggle-height:").concat(SCALES.height(0.875), ";width:").concat(SCALES.width(1.75), ";height:var(--toggle-height);padding:").concat(SCALES.pt(0.1875), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0.1875), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}input.__jsx-style-dynamic-selector{overflow:hidden;visibility:hidden;height:0;opacity:0;width:0;position:absolute;background-color:transparent;z-index:-1;}.toggle.__jsx-style-dynamic-selector{height:var(--toggle-height);width:100%;border-radius:var(--toggle-height);-webkit-transition-delay:0.12s;transition-delay:0.12s;-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-property:background,border;transition-property:background,border;-webkit-transition-timing-function:cubic-bezier(0,0,0.2,1);transition-timing-function:cubic-bezier(0,0,0.2,1);position:relative;border:1px solid transparent;background-color:").concat(theme.palette.accents_2, ";padding:0;}.inner.__jsx-style-dynamic-selector{width:calc(var(--toggle-height) - 2px);height:calc(var(--toggle-height) - 2px);position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:1px;box-shadow:rgba(0,0,0,0.2) 0 1px 2px 0, rgba(0,0,0,0.1) 0 1px 3px 0;-webkit-transition:left 280ms cubic-bezier(0,0,0.2,1);transition:left 280ms cubic-bezier(0,0,0.2,1);border-radius:50%;background-color:").concat(theme.palette.background, ";}.disabled.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_2, ";background-color:").concat(theme.palette.accents_1, ";}.disabled.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_2, ";}.disabled.checked.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_4, ";}.checked.__jsx-style-dynamic-selector{background-color:").concat(bg, ";}.checked.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{left:calc(100% - (var(--toggle-height) - 2px));box-shadow:none;}")));
75
+ id: "2317841100",
76
+ dynamic: [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]
77
+ }, "label.__jsx-style-dynamic-selector{-webkit-tap-highlight-color:transparent;display:inline-block;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";--toggle-font-size:").concat(SCALES.font(1), ";--toggle-height:").concat(SCALES.height(1), ";width:").concat(SCALES.width(1.75), ";height:var(--toggle-height);padding:").concat(SCALES.pt(0.1875), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0.1875), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}input.__jsx-style-dynamic-selector{overflow:hidden;visibility:hidden;height:0;opacity:0;width:0;position:absolute;background-color:transparent;z-index:-1;}.toggle.__jsx-style-dynamic-selector{height:calc(var(--toggle-height) + 2px);width:100%;border-radius:var(--toggle-height);-webkit-transition-delay:0.12s;transition-delay:0.12s;-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-property:background,border;transition-property:background,border;-webkit-transition-timing-function:cubic-bezier(0,0,0.2,1);transition-timing-function:cubic-bezier(0,0,0.2,1);position:relative;border:1px solid transparent;background-color:").concat(theme.palette.accents_2, ";padding:0;}.inner.__jsx-style-dynamic-selector{width:calc(var(--toggle-height) - 2px);height:calc(var(--toggle-height) - 2px);position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:1px;box-shadow:rgba(0,0,0,0.2) 0 1px 2px 0, rgba(0,0,0,0.1) 0 1px 3px 0;-webkit-transition:left 280ms cubic-bezier(0,0,0.2,1);transition:left 280ms cubic-bezier(0,0,0.2,1);border-radius:50%;background-color:").concat(theme.palette.accents_1, ";}.disabled.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_2, ";background-color:").concat(theme.palette.accents_1, ";}.disabled.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_2, ";}.disabled.checked.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_4, ";}.checked.__jsx-style-dynamic-selector{background-color:").concat(bg, ";}.checked.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{left:calc(100% - (var(--toggle-height) - 1px));box-shadow:none;}")));
78
78
  }
79
79
 
80
80
  ToggleComponent.displayName = 'BolioUIToggle';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bolio-ui/core",
3
- "version": "1.0.7",
3
+ "version": "1.0.9",
4
4
  "description": "Amazing, modern and creative tools for React UI. 🥷🏼",
5
5
  "keywords": [
6
6
  "bolio",