@flodesk/grain 5.4.2 → 5.5.0

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 (13) hide show
  1. package/README.md +3 -3
  2. package/es/components/button.js +1 -1
  3. package/es/components/icon-toggle.js +2 -2
  4. package/es/components/icon.js +2 -2
  5. package/es/components/slider.js +2 -2
  6. package/es/components/spinner.js +1 -1
  7. package/es/components/tab.js +2 -2
  8. package/es/components/text-toggle.js +2 -2
  9. package/es/foundational/index.js +1 -1
  10. package/es/styles/base.css +3 -3
  11. package/es/styles/variables.css +24 -7
  12. package/es/variables.js +30 -12
  13. package/package.json +1 -1
package/README.md CHANGED
@@ -11,7 +11,7 @@ npm install @flodesk/grain
11
11
  `base.css` contains all Grain global styles. Import it in the highest component possible so that it's accessible everywhere in the UI.
12
12
 
13
13
  ```js
14
- import "@flodesk/grain/es/styles/base.css";
14
+ import '@flodesk/grain/es/styles/base.css';
15
15
  ```
16
16
 
17
17
  ### Add text styles context
@@ -33,7 +33,7 @@ In the future, once Grain is widely adopted, we will remove these classes and ap
33
33
  ### Component usage
34
34
 
35
35
  ```jsx
36
- import { Text, Button, Input } from "@flodesk/grain";
36
+ import { Text, Button, Input } from '@flodesk/grain';
37
37
 
38
38
  <Text>Content</Text>;
39
39
  ```
@@ -44,6 +44,6 @@ import { Text, Button, Input } from "@flodesk/grain";
44
44
  .dashboard-header {
45
45
  font-size: var(--grn-text-xl);
46
46
  margin-bottom: var(--grn-space-l);
47
- color: var(--grn-color-bodyDimmed);
47
+ color: var(--grn-color-contentDimmed);
48
48
  }
49
49
  ```
package/es/components/button.js CHANGED
@@ -35,7 +35,7 @@ var Wrapper = styled.button(_templateObject4 || (_templateObject4 = _taggedTempl
35
35
  return !p.isDisabled && variants[p.variant];
36
36
  }, function (p) {
37
37
  return p.hasFullWidth && "width: 100%";
38
- }, getColor('disabledContent'), getColor('disabledBackground'));
38
+ }, getColor('contentDisabled'), getColor('backgroundDisabled'));
39
39
 
40
40
  var checkDeprecatedVariant = function checkDeprecatedVariant(variant) {
41
41
  if (variant === 'primary') {
package/es/components/icon-toggle.js CHANGED
@@ -26,8 +26,8 @@ import { css } from '@emotion/react';
26
26
  import { types } from '../types';
27
27
  var variables = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n --grn-borderColor-hover: var(--grn-color-fade4);\n --grn-borderColor-active: var(--grn-color-grey8);\n --grn-width: calc(var(--grn-textBoxHeight-m) + 2px);\n"])));
28
28
  var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n border: 1px solid var(--grn-color-border);\n border-radius: var(--grn-radius-s);\n width: fit-content;\n"])));
29
- var ItemWrapper = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", ";\n appearance: none;\n border: none;\n border-left: 1px solid transparent;\n padding: 0;\n font-family: inherit;\n font-size: inherit;\n font-weight: ", ";\n cursor: pointer;\n min-width: var(--grn-width);\n height: calc(var(--grn-textBoxHeight-m) - 2px);\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n color: var(--grn-color-bodyDimmed);\n transition: color ", ";\n\n ", ";\n\n & + .IconToggle {\n border-color: var(--grn-color-border);\n }\n\n &:after {\n content: '';\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition: ", ";\n ", ";\n }\n\n &:first-of-type {\n min-width: calc(var(--grn-width) - 1px);\n }\n\n &:first-of-type:after {\n width: calc(100% + 1px);\n left: -1px;\n border-radius: var(--grn-radius-s) 0 0 var(--grn-radius-s);\n }\n\n &:last-child:after {\n border-radius: 0 var(--grn-radius-s) var(--grn-radius-s) 0;\n }\n\n &:hover {\n color: var(--grn-color-body);\n }\n"])), variables, getWeight('medium'), getTransition('fast'), function (p) {
30
- return p.isActive && "\n color: var(--grn-color-body);\n ";
29
+ var ItemWrapper = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", ";\n appearance: none;\n border: none;\n border-left: 1px solid transparent;\n padding: 0;\n font-family: inherit;\n font-size: inherit;\n font-weight: ", ";\n cursor: pointer;\n min-width: var(--grn-width);\n height: calc(var(--grn-textBoxHeight-m) - 2px);\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n color: var(--grn-color-contentDimmed);\n transition: color ", ";\n\n ", ";\n\n & + .IconToggle {\n border-color: var(--grn-color-border);\n }\n\n &:after {\n content: '';\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition: ", ";\n ", ";\n }\n\n &:first-of-type {\n min-width: calc(var(--grn-width) - 1px);\n }\n\n &:first-of-type:after {\n width: calc(100% + 1px);\n left: -1px;\n border-radius: var(--grn-radius-s) 0 0 var(--grn-radius-s);\n }\n\n &:last-child:after {\n border-radius: 0 var(--grn-radius-s) var(--grn-radius-s) 0;\n }\n\n &:hover {\n color: var(--grn-color-content);\n }\n"])), variables, getWeight('medium'), getTransition('fast'), function (p) {
30
+ return p.isActive && "\n color: var(--grn-color-content);\n ";
31
31
  }, getTransition('xFast'), function (p) {
32
32
  return p.isActive && "box-shadow: 0 0 0 1px var(--grn-color-grey6)";
33
33
  });
package/es/components/icon.js CHANGED
@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
21
21
  import React, { forwardRef } from 'react';
22
22
  import styled from '@emotion/styled';
23
23
  import { types } from '../types';
24
- var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: block;\n width: ", ";\n color: ", ";\n \n svg {\n display: block;\n height: ", ";\n ", "\n"])), function (p) {
24
+ var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: block;\n width: ", ";\n color: ", ";\n\n svg {\n display: block;\n height: ", ";\n ", "\n"])), function (p) {
25
25
  return getColor(p.color);
26
26
  }, function (p) {
27
27
  return getColor(p.color);
@@ -35,7 +35,7 @@ export var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
35
35
  _ref$size = _ref.size,
36
36
  size = _ref$size === void 0 ? 'm' : _ref$size,
37
37
  _ref$color = _ref.color,
38
- color = _ref$color === void 0 ? 'body' : _ref$color,
38
+ color = _ref$color === void 0 ? 'content' : _ref$color,
39
39
  hasEvenBoundary = _ref.hasEvenBoundary,
40
40
  props = _objectWithoutProperties(_ref, _excluded);
41
41
 
package/es/components/slider.js CHANGED
@@ -20,9 +20,9 @@ import { PropTypes } from 'prop-types';
20
20
  import React from 'react';
21
21
  import styled from '@emotion/styled';
22
22
  import { css } from '@emotion/react';
23
- var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n --trackHeight: 2px;\n --sliderHeight: 16px;\n --thumbSize: var(--sliderHeight);\n\n position: relative;\n\n &:after {\n content: '';\n width: 100%;\n height: var(--trackHeight);\n top: 0;\n bottom: 0;\n margin: auto;\n background: linear-gradient(\n 90deg,\n var(--grn-color-body) 0 var(--value),\n var(--grn-color-fade2) var(--value) 100%\n );\n display: block;\n position: absolute;\n border-radius: 100px;\n }\n"])));
23
+ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n --trackHeight: 2px;\n --sliderHeight: 16px;\n --thumbSize: var(--sliderHeight);\n\n position: relative;\n\n &:after {\n content: '';\n width: 100%;\n height: var(--trackHeight);\n top: 0;\n bottom: 0;\n margin: auto;\n background: linear-gradient(\n 90deg,\n var(--grn-color-content) 0 var(--value),\n var(--grn-color-fade2) var(--value) 100%\n );\n display: block;\n position: absolute;\n border-radius: 100px;\n }\n"])));
24
24
  var trackStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n height: var(--sliderHeight);\n cursor: pointer;\n background: transparent;\n"])));
25
- var thumbStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n -webkit-appearance: none;\n height: var(--thumbSize);\n width: var(--thumbSize);\n border-radius: 100px;\n background: var(--grn-color-body);\n cursor: pointer;\n"])));
25
+ var thumbStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n -webkit-appearance: none;\n height: var(--thumbSize);\n width: var(--thumbSize);\n border-radius: 100px;\n background: var(--grn-color-content);\n cursor: pointer;\n"])));
26
26
  var InputWrapper = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n -webkit-appearance: none;\n width: 100%;\n margin: 0;\n display: block;\n background: transparent;\n\n &::-webkit-slider-runnable-track {\n ", "\n }\n &::-moz-range-track {\n ", "\n }\n\n &::-webkit-slider-thumb {\n ", "\n }\n &::-moz-range-thumb {\n ", "\n }\n"])), trackStyles, trackStyles, thumbStyles, thumbStyles);
27
27
  export var Slider = function Slider(_ref) {
28
28
  var _ref$min = _ref.min,
package/es/components/spinner.js CHANGED
@@ -37,7 +37,7 @@ export var Spinner = function Spinner(_ref) {
37
37
  var _ref$size = _ref.size,
38
38
  size = _ref$size === void 0 ? 3 : _ref$size,
39
39
  _ref$color = _ref.color,
40
- color = _ref$color === void 0 ? 'body' : _ref$color,
40
+ color = _ref$color === void 0 ? 'content' : _ref$color,
41
41
  props = _objectWithoutProperties(_ref, _excluded);
42
42
 
43
43
  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
package/es/components/tab.js CHANGED
@@ -25,8 +25,8 @@ import { types } from '../types';
25
25
  var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n gap: var(--grn-space-l);\n width: fit-content;\n align-items: stretch;\n height: ", ";\n"])), function (p) {
26
26
  return getDimension(p.height);
27
27
  });
28
- var TabWrapper = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n appearance: none;\n border: none;\n padding: 0;\n font-family: inherit;\n font-size: inherit;\n font-weight: ", ";\n cursor: pointer;\n height: 100%;\n background-color: transparent;\n color: var(--grn-color-bodyDimmed);\n border-radius: 0;\n white-space: nowrap;\n transition: color ", ", box-shadow ", ";\n\n &:hover {\n color: var(--grn-color-body);\n }\n\n ", ";\n"])), getWeight('medium'), getTransition('fast'), getTransition('xFast'), function (p) {
29
- return p.isActive && "\n box-shadow: inset 0 -2px 0 var(--grn-color-grey6);\n color: var(--grn-color-body);\n ";
28
+ var TabWrapper = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n appearance: none;\n border: none;\n padding: 0;\n font-family: inherit;\n font-size: inherit;\n font-weight: ", ";\n cursor: pointer;\n height: 100%;\n background-color: transparent;\n color: var(--grn-color-contentDimmed);\n border-radius: 0;\n white-space: nowrap;\n transition: color ", ", box-shadow ", ";\n\n &:hover {\n color: var(--grn-color-content);\n }\n\n ", ";\n"])), getWeight('medium'), getTransition('fast'), getTransition('xFast'), function (p) {
29
+ return p.isActive && "\n box-shadow: inset 0 -2px 0 var(--grn-color-grey6);\n color: var(--grn-color-content);\n ";
30
30
  });
31
31
  export var Tab = function Tab(_ref) {
32
32
  var children = _ref.children,
package/es/components/text-toggle.js CHANGED
@@ -22,8 +22,8 @@ import React from 'react';
22
22
  import styled from '@emotion/styled';
23
23
  import PropTypes from 'prop-types';
24
24
  var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n border: 1px solid var(--grn-color-border);\n border-radius: 1000px;\n width: fit-content;\n"])));
25
- var ItemWrapper = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n appearance: none;\n border: none;\n padding: 0 16px;\n font-family: inherit;\n font-size: inherit;\n font-weight: ", ";\n cursor: pointer;\n height: calc(var(--grn-textBoxHeight-m) - 2px);\n background-color: transparent;\n position: relative;\n color: var(--grn-color-bodyDimmed);\n border-radius: 1000px;\n white-space: nowrap;\n transition: color ", ", box-shadow ", ";\n\n &:hover {\n color: var(--grn-color-body);\n }\n\n ", ";\n"])), getWeight('medium'), getTransition('fast'), getTransition('xFast'), function (p) {
26
- return p.isActive && "\n box-shadow: 0 0 0 1px var(--grn-color-grey6);\n color: var(--grn-color-body);\n ";
25
+ var ItemWrapper = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n appearance: none;\n border: none;\n padding: 0 16px;\n font-family: inherit;\n font-size: inherit;\n font-weight: ", ";\n cursor: pointer;\n height: calc(var(--grn-textBoxHeight-m) - 2px);\n background-color: transparent;\n position: relative;\n color: var(--grn-color-contentDimmed);\n border-radius: 1000px;\n white-space: nowrap;\n transition: color ", ", box-shadow ", ";\n\n &:hover {\n color: var(--grn-color-content);\n }\n\n ", ";\n"])), getWeight('medium'), getTransition('fast'), getTransition('xFast'), function (p) {
26
+ return p.isActive && "\n box-shadow: 0 0 0 1px var(--grn-color-grey6);\n color: var(--grn-color-content);\n ";
27
27
  });
28
28
  export var TextToggle = function TextToggle(_ref) {
29
29
  var children = _ref.children,
package/es/foundational/index.js CHANGED
@@ -10,4 +10,4 @@ import styled from '@emotion/styled';
10
10
  import { css } from '@emotion/react';
11
11
  import { getColor, getRadius, getTransition, getWeight } from '../utilities';
12
12
  export var transitions = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n transition: ", ";\n\n &:hover {\n transition: ", ";\n }\n\n &:active {\n transition: 0s;\n }\n"])), getTransition('slow'), getTransition('fast'));
13
- export var ClearButtonBox = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", ";\n --grn-borderColor-active: var(--grn-color-fade5);\n\n appearance: none;\n border: 1px solid transparent;\n padding: 0;\n font-family: inherit;\n font-size: inherit;\n cursor: pointer;\n font-weight: ", ";\n border-radius: ", ";\n height: var(--grn-clearButtonHeight-m);\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n background-color: var(--grn-color-overlay);\n }\n\n &:active {\n border-color: var(--grn-borderColor-active);\n outline-color: var(--grn-borderColor-active);\n background-color: transparent;\n }\n\n &:disabled {\n color: ", ";\n cursor: default;\n border-color: transparent;\n\n &:hover {\n background-color: transparent;\n }\n }\n"])), transitions, getWeight('medium'), getRadius('s'), getColor('disabledContent'));
13
+ export var ClearButtonBox = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", ";\n --grn-borderColor-active: var(--grn-color-fade5);\n\n appearance: none;\n border: 1px solid transparent;\n padding: 0;\n font-family: inherit;\n font-size: inherit;\n cursor: pointer;\n font-weight: ", ";\n border-radius: ", ";\n height: var(--grn-clearButtonHeight-m);\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n background-color: var(--grn-color-backgroundOverlay);\n }\n\n &:active {\n border-color: var(--grn-borderColor-active);\n outline-color: var(--grn-borderColor-active);\n background-color: transparent;\n }\n\n &:disabled {\n color: ", ";\n cursor: default;\n border-color: transparent;\n\n &:hover {\n background-color: transparent;\n }\n }\n"])), transitions, getWeight('medium'), getRadius('s'), getColor('contentDisabled'));
package/es/styles/base.css CHANGED
@@ -9,7 +9,7 @@
9
9
  --grn-lineHeight-fixed: 7px;
10
10
  --grn-lineHeight-relative: 0.9em;
11
11
  --grn-lineHeight-global: calc(var(--grn-lineHeight-fixed) + var(--grn-lineHeight-relative));
12
-
12
+
13
13
  --grn-font-global: 'Beausite Classic', sans-serif;
14
14
  }
15
15
 
@@ -21,7 +21,7 @@
21
21
 
22
22
  .grn-context {
23
23
  font-family: var(--grn-font-global);
24
- color: var(--grn-color-body);
24
+ color: var(--grn-color-content);
25
25
  font-size: var(--grn-text-m);
26
26
  -webkit-font-smoothing: antialiased;
27
27
  -moz-osx-font-smoothing: grayscale;
@@ -29,5 +29,5 @@
29
29
 
30
30
  *, *:before, *:after {
31
31
  box-sizing: border-box;
32
- }
32
+ }
33
33
 
package/es/styles/variables.css CHANGED
@@ -76,17 +76,34 @@
76
76
  }
77
77
 
78
78
  :root {
79
- --grn-color-body: var(--grn-color-grey8);
80
- --grn-color-bodyDimmed: var(--grn-color-fade7);
79
+ /* internal */
81
80
  --grn-color-accent: var(--grn-color-grey8);
81
+ --grn-color-backgroundOverlay: var(--grn-color-fade1);
82
+
83
+ /* generic */
84
+ --grn-color-danger: var(--grn-color-red);
85
+ --grn-color-selection: var(--grn-color-blue);
86
+
87
+ /* content */
88
+ --grn-color-content: var(--grn-color-grey8);
89
+ --grn-color-contentDimmed: var(--grn-color-fade7);
90
+ --grn-color-contentDisabled: var(--grn-color-grey5);
91
+
92
+ /* background */
93
+ --grn-color-background: white;
94
+ --grn-color-backgroundLow: var(--grn-color-grey1);
95
+ --grn-color-backgroundDisabled: var(--grn-color-fade1);
96
+
97
+ /* border */
98
+ --grn-color-border: var(--grn-color-fade2);
99
+
100
+ /* deprecated */
82
101
  --grn-color-backgroundSecondary: white;
83
- --grn-color-background: var(--grn-color-grey1);
84
102
  --grn-color-overlay: var(--grn-color-fade1);
85
- --grn-color-border: var(--grn-color-fade2);
86
- --grn-color-selection: var(--grn-color-blue);
87
- --grn-color-danger: var(--grn-color-red);
88
- --grn-color-disabledContent: var(--grn-color-grey5);
89
103
  --grn-color-disabledBackground: var(--grn-color-fade1);
104
+ --grn-color-body: var(--grn-color-grey8);
105
+ --grn-color-bodyDimmed: var(--grn-color-fade7);
106
+ --grn-color-disabledContent: var(--grn-color-grey5);
90
107
  }
91
108
 
92
109
  :root {
package/es/variables.js CHANGED
@@ -40,17 +40,35 @@ export var colors = {
40
40
  red: 'red'
41
41
  },
42
42
  semantics: {
43
- body: 'body',
44
- bodyDimmed: 'bodyDimmed',
45
- accent: 'accent',
46
- backgroundSecondary: 'backgroundSecondary',
47
- background: 'background',
48
- overlay: 'overlay',
49
- border: 'border',
50
- selection: 'selection',
51
- danger: 'danger',
52
- disabledContent: 'disabledContent',
53
- disabledBackground: 'disabledBackground'
43
+ internal: {
44
+ accent: 'accent',
45
+ backgroundOverlay: 'backgroundOverlay'
46
+ },
47
+ generic: {
48
+ danger: 'danger',
49
+ selection: 'selection'
50
+ },
51
+ content: {
52
+ content: 'contentBody',
53
+ contentDimmed: 'contentBodyDimmed',
54
+ contentDisabled: 'contentDisabled'
55
+ },
56
+ background: {
57
+ background: 'background',
58
+ backgroundLow: 'backgroundLow',
59
+ backgroundDisabled: 'backgroundDisabled'
60
+ },
61
+ border: {
62
+ border: 'border'
63
+ },
64
+ deprecated: {
65
+ body: 'body',
66
+ bodyDimmed: 'bodyDimmed',
67
+ disabledContent: 'disabledContent',
68
+ backgroundSecondary: 'backgroundSecondary',
69
+ overlay: 'overlay',
70
+ disabledBackground: 'disabledBackground'
71
+ }
54
72
  }
55
73
  };
56
74
  export var vars = {
@@ -96,7 +114,7 @@ export var vars = {
96
114
  fast: 'fast',
97
115
  xFast: 'xFast'
98
116
  },
99
- colors: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colors.greys), colors.fades), colors.bases), colors.semantics)
117
+ colors: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colors.greys), colors.fades), colors.bases), colors.semantics.internal), colors.semantics.generic), colors.semantics.content), colors.semantics.background), colors.semantics.border), colors.semantics.deprecated)
100
118
  };
101
119
  export var varInfo = {
102
120
  texts: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flodesk/grain",
3
- "version": "5.4.2",
3
+ "version": "5.5.0",
4
4
  "description": "Flodesk design system",
5
5
  "module": "es/index.js",
6
6
  "author": "Flodesk",