@flodesk/grain 5.5.0 → 5.5.3

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 (7) hide show
  1. package/README.md +1 -1
  2. package/es/components/icon-toggle.js +1 -1
  3. package/es/components/tab.js +1 -1
  4. package/es/components/text-toggle.js +1 -1
  5. package/es/styles/variables.css +6 -4
  6. package/es/variables.js +8 -6
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -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-contentDimmed);
47
+ color: var(--grn-color-content2);
48
48
  }
49
49
  ```
package/es/components/icon-toggle.js CHANGED
@@ -26,7 +26,7 @@ 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-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) {
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-content2);\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
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)";
package/es/components/tab.js CHANGED
@@ -25,7 +25,7 @@ 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-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) {
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-content2);\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
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) {
package/es/components/text-toggle.js CHANGED
@@ -22,7 +22,7 @@ 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-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) {
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-content2);\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
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) {
package/es/styles/variables.css CHANGED
@@ -79,6 +79,8 @@
79
79
  /* internal */
80
80
  --grn-color-accent: var(--grn-color-grey8);
81
81
  --grn-color-backgroundOverlay: var(--grn-color-fade1);
82
+ --grn-color-contentDisabled: var(--grn-color-grey5);
83
+ --grn-color-backgroundDisabled: var(--grn-color-fade1);
82
84
 
83
85
  /* generic */
84
86
  --grn-color-danger: var(--grn-color-red);
@@ -86,13 +88,13 @@
86
88
 
87
89
  /* content */
88
90
  --grn-color-content: var(--grn-color-grey8);
89
- --grn-color-contentDimmed: var(--grn-color-fade7);
90
- --grn-color-contentDisabled: var(--grn-color-grey5);
91
+ --grn-color-content2: var(--grn-color-fade7);
92
+ --grn-color-content3: var(--grn-color-fade5);
91
93
 
92
94
  /* background */
93
95
  --grn-color-background: white;
94
- --grn-color-backgroundLow: var(--grn-color-grey1);
95
- --grn-color-backgroundDisabled: var(--grn-color-fade1);
96
+ --grn-color-background2: var(--grn-color-grey1);
97
+ --grn-color-background3: var(--grn-color-grey2);
96
98
 
97
99
  /* border */
98
100
  --grn-color-border: var(--grn-color-fade2);
package/es/variables.js CHANGED
@@ -42,21 +42,23 @@ export var colors = {
42
42
  semantics: {
43
43
  internal: {
44
44
  accent: 'accent',
45
- backgroundOverlay: 'backgroundOverlay'
45
+ backgroundOverlay: 'backgroundOverlay',
46
+ contentDisabled: 'contentDisabled',
47
+ backgroundDisabled: 'backgroundDisabled'
46
48
  },
47
49
  generic: {
48
50
  danger: 'danger',
49
51
  selection: 'selection'
50
52
  },
51
53
  content: {
52
- content: 'contentBody',
53
- contentDimmed: 'contentBodyDimmed',
54
- contentDisabled: 'contentDisabled'
54
+ content: 'content',
55
+ content2: 'content2',
56
+ content3: 'content3'
55
57
  },
56
58
  background: {
57
59
  background: 'background',
58
- backgroundLow: 'backgroundLow',
59
- backgroundDisabled: 'backgroundDisabled'
60
+ background2: 'background2',
61
+ background3: 'background3'
60
62
  },
61
63
  border: {
62
64
  border: 'border'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flodesk/grain",
3
- "version": "5.5.0",
3
+ "version": "5.5.3",
4
4
  "description": "Flodesk design system",
5
5
  "module": "es/index.js",
6
6
  "author": "Flodesk",