@flodesk/grain 2.7.4 → 2.8.0

package/es/components/button/index.js

@@ -1,41 +1,106 @@
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.object.freeze.js";
-import "core-js/modules/es.object.define-properties.js";
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.array.index-of.js";
-import "core-js/modules/es.symbol.js";
-var _excluded = ["children", "size", "weight", "color", "tag"];
+"use strict";
 
-var _templateObject, _templateObject2;
+require("core-js/modules/es.object.define-property.js");
 
-import "core-js/modules/es.object.assign.js";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = void 0;
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-import { getColor, getRadius, getTextSize, getWeight } from '../../utilities';
-import React from "react";
-import styled from "@emotion/styled";
-var Wrapper = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  font-size: ", ";\n  font-weight: ", ";\n  cursor: pointer;\n  background-color: ", ";\n  color: ", ";\n  border-radius: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-buttonTextBoxPaddingX-m);\n"])), getTextSize('m'), getWeight('medium'), getColor('body'), getColor('white'), getRadius('m'));
-var ButtonText = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  --opticalCompensation: -0.3px;\n\n  position: relative;\n  top: var(--opticalCompensation);\n"])));
-export var Button = function Button(_ref) {
+require("core-js/modules/es.array.concat.js");
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _utilities = require("../../utilities");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["children", "tag", "variant", "isDisabled"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var __jsx = _react.default.createElement;
+var variants = {
+  neutral: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    color: inherit;\n    background-color: transparent;\n    border-color: ", ";\n\n    &:hover {\n      border-color: ", ";\n    }\n    &:active {\n      border-color: ", ";\n    }\n  "])), (0, _utilities.getColor)('buttonBorder'), (0, _utilities.getColor)('buttonBorderHover'), (0, _utilities.getColor)('buttonBorderActive')),
+  primary: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    color: white;\n    background-color: ", ";\n    border-color: transparent;\n\n    &:hover {\n      background-color: ", ";\n    }\n    &:active {\n      color: ", ";\n      background-color: black;\n    }\n  "])), (0, _utilities.getColor)('body'), (0, _utilities.getColor)('grey7'), (0, _utilities.getColor)('grey2'))
+};
+
+var Wrapper = _styled.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: ", ";\n  border-radius: ", ";\n  transition: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-buttonTextBoxPaddingX-m);\n  \n  ", ";\n  \n  ", ";\n  \n  &:hover {\n    transition: ", ";\n  }\n  \n  &:active {\n    transition: 0s;\n  }\n"])), (0, _utilities.getWeight)('medium'), (0, _utilities.getRadius)('s'), (0, _utilities.getTransition)('slow'), function (p) {
+  return !p.isDisabled && variants[p.variant];
+}, function (p) {
+  return p.isDisabled && "\n    color: ".concat((0, _utilities.getColor)('disabledContent'), ";\n    background-color: ").concat((0, _utilities.getColor)('disabledBackground'), ";\n    border-color: transparent;\n    cursor: default;\n  ");
+}, (0, _utilities.getTransition)('fast'));
+
+var ButtonText = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  --opticalCompensation: -0.3px;\n\n  position: relative;\n  top: var(--opticalCompensation);\n"])));
+
+var Button = function Button(_ref) {
   var children = _ref.children,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'm' : _ref$size,
-      _ref$weight = _ref.weight,
-      weight = _ref$weight === void 0 ? 'normal' : _ref$weight,
-      color = _ref.color,
       tag = _ref.tag,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
-    size: size,
-    weight: weight,
-    color: color,
-    as: tag
-  }, props), /*#__PURE__*/React.createElement(ButtonText, null, children));
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'neutral' : _ref$variant,
+      isDisabled = _ref.isDisabled,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return __jsx(Wrapper, (0, _extends2.default)({
+    as: tag,
+    variant: variant,
+    isDisabled: isDisabled
+  }, props), __jsx(ButtonText, null, children));
 };
-Button.propTypes = {};
+
+exports.Button = Button;
+Button.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Button",
+  "props": {
+    "variant": {
+      "defaultValue": {
+        "value": "'neutral'",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"neutral\"",
+          "computed": false
+        }, {
+          "value": "\"primary\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "isDisabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};

package/es/components/index.js

@@ -1,4 +1,39 @@
-export { Text } from "./text";
-export { Box } from "./box";
-export { Button } from "./button";
-export { Input } from "./input";
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Text", {
+  enumerable: true,
+  get: function get() {
+    return _text.Text;
+  }
+});
+Object.defineProperty(exports, "Box", {
+  enumerable: true,
+  get: function get() {
+    return _box.Box;
+  }
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _button.Button;
+  }
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function get() {
+    return _input.Input;
+  }
+});
+
+var _text = require("./text");
+
+var _box = require("./box");
+
+var _button = require("./button");
+
+var _input = require("./input");

package/es/components/input/index.js

@@ -1,45 +1,75 @@
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.object.freeze.js";
-import "core-js/modules/es.object.define-properties.js";
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.array.index-of.js";
-import "core-js/modules/es.symbol.js";
-var _excluded = ["value", "placeholder", "size"];
+"use strict";
 
-var _templateObject;
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-import "core-js/modules/es.object.assign.js";
+var _utilities = require("../../utilities");
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+var _react = _interopRequireDefault(require("react"));
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _types = require("../../types");
 
-import { getColor, getRadius, getSpace, getTextSize, getWeight } from '../../utilities';
-import { PropTypes } from 'prop-types';
-import React from "react";
-import styled from "@emotion/styled";
-import { types } from '../../types';
-var Wrapper = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  background-color: transparent;\n  color: inherit;\n  font-size: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  height: ", ";\n  padding: 0 ", ";\n  width: 100%;\n"])), function (p) {
-  return getTextSize(p.size);
-}, getRadius('m'), getColor('grey3'), function (p) {
+var _excluded = ["value", "placeholder", "size"];
+
+var _templateObject;
+
+var __jsx = _react.default.createElement;
+
+var Wrapper = _styled.default.input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  background-color: transparent;\n  color: inherit;\n  font-size: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  height: ", ";\n  padding: 0 ", ";\n  width: 100%;\n"])), function (p) {
+  return (0, _utilities.getTextSize)(p.size);
+}, (0, _utilities.getRadius)('m'), (0, _utilities.getColor)('grey3'), function (p) {
   return "var(--grn-textBoxHeight-".concat(p.size, ")");
 }, function (p) {
   return "var(--grn-fieldTextBoxPaddingX-".concat(p.size, ")");
 });
-export var Input = function Input(_ref) {
+
+var Input = function Input(_ref) {
   var value = _ref.value,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? 'Placeholder' : _ref$placeholder,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'm' : _ref$size,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return __jsx(Wrapper, (0, _extends2.default)({
     value: value,
     placeholder: placeholder,
     size: size
   }, props));
 };
-Input.propTypes = {};
+
+exports.Input = Input;
+Input.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Input",
+  "props": {
+    "placeholder": {
+      "defaultValue": {
+        "value": "'Placeholder'",
+        "computed": false
+      },
+      "required": false
+    },
+    "size": {
+      "defaultValue": {
+        "value": "'m'",
+        "computed": false
+      },
+      "required": false
+    }
+  }
+};

package/es/components/text/index.js

@@ -1,32 +1,40 @@
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.object.freeze.js";
-import "core-js/modules/es.object.define-properties.js";
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.array.index-of.js";
-import "core-js/modules/es.symbol.js";
-var _excluded = ["children", "size", "weight", "color", "tag", "hasEllipsis", "ellipsisLines", "align"];
+"use strict";
 
-var _templateObject;
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Text = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-import "core-js/modules/es.object.assign.js";
+var _utilities = require("../../utilities");
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+var _react = _interopRequireDefault(require("react"));
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _types = require("../../types");
 
-import { getColor, getTextSize, getWeight } from '../../utilities';
-import { PropTypes } from 'prop-types';
-import React from "react";
-import styled from "@emotion/styled";
-import { types } from '../../types';
-var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  text-align: ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
-  return getTextSize(p.size);
+var _excluded = ["children", "size", "weight", "color", "tag", "hasEllipsis", "ellipsisLines", "align"];
+
+var _templateObject;
+
+var __jsx = _react.default.createElement;
+
+var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  text-align: ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
+  return (0, _utilities.getTextSize)(p.size);
 }, function (p) {
-  return getWeight(p.weight);
+  return (0, _utilities.getWeight)(p.weight);
 }, function (p) {
-  return getColor(p.color);
+  return (0, _utilities.getColor)(p.color);
 }, function (p) {
   return p.align;
 }, function (p) {
@@ -36,7 +44,8 @@ var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateL
 }, function (p) {
   return p.hasEllipsis && p.ellipsisLines && "\n    display: -webkit-box;\n    -webkit-line-clamp: ".concat(p.ellipsisLines, ";\n    -webkit-box-orient: vertical;\n  ");
 });
-export var Text = function Text(_ref) {
+
+var Text = function Text(_ref) {
   var children = _ref.children,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'm' : _ref$size,
@@ -47,9 +56,8 @@ export var Text = function Text(_ref) {
       hasEllipsis = _ref.hasEllipsis,
       ellipsisLines = _ref.ellipsisLines,
       align = _ref.align,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return __jsx(Wrapper, (0, _extends2.default)({
     size: size,
     weight: weight,
     color: color,
@@ -59,12 +67,127 @@ export var Text = function Text(_ref) {
     align: align
   }, props), children);
 };
-Text.propTypes = {
-  size: types.textSize,
-  weight: types.weight,
-  color: types.color,
-  align: types.textAlign,
-  tag: PropTypes.string,
-  hasEllipsis: PropTypes.bool,
-  ellipsisLines: PropTypes.number
+
+exports.Text = Text;
+Text.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Text",
+  "props": {
+    "size": {
+      "defaultValue": {
+        "value": "'m'",
+        "computed": false
+      },
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "weight": {
+      "defaultValue": {
+        "value": "'normal'",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"normal\"",
+          "computed": false
+        }, {
+          "value": "\"medium\"",
+          "computed": false
+        }, {
+          "value": "\"semiBold\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "color": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"greys\"",
+            "computed": false
+          }, {
+            "value": "\"baseColors\"",
+            "computed": false
+          }, {
+            "value": "\"semanticColors\"",
+            "computed": false
+          }]
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "align": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"left\"",
+          "computed": false
+        }, {
+          "value": "\"center\"",
+          "computed": false
+        }, {
+          "value": "\"right\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "tag": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "hasEllipsis": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "ellipsisLines": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
 };

package/es/index.js

@@ -1,2 +1,38 @@
-export * from "./components";
-export { vars } from "./variables";
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.keys.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  vars: true
+};
+Object.defineProperty(exports, "vars", {
+  enumerable: true,
+  get: function get() {
+    return _variables.vars;
+  }
+});
+
+var _components = require("./components");
+
+Object.keys(_components).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _components[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _components[key];
+    }
+  });
+});
+
+var _variables = require("./variables");

package/es/styles/components-variables.css

@@ -1,9 +1,15 @@
 :root {
-  --grn-textBoxHeight-s: calc(var(--grn-unit) * 3.5);
-  --grn-textBoxHeight-m: calc(var(--grn-unit) * 5);
-  
-  --grn-fieldTextBoxPaddingX-s: calc(var(--grn-unit) * 1);
-  --grn-fieldTextBoxPaddingX-m: calc(var(--grn-unit) * 1.5);
-  
-  --grn-buttonTextBoxPaddingX-m: calc(var(--grn-unit) * 2.5);
+  --grn-textBoxHeight-s: 28px;
+  --grn-textBoxHeight-m: 40px;
+
+  --grn-fieldTextBoxPaddingX-s: 8px;
+  --grn-fieldTextBoxPaddingX-m: 12px;
+
+  --grn-buttonTextBoxPaddingX-m: 20px;
+}
+
+:root {
+  --grn-color-buttonBorder: hsl(var(--grn-color-grey8-HSL) / 30%);
+  --grn-color-buttonBorderHover: hsl(var(--grn-color-grey8-HSL) / 50%);
+  --grn-color-buttonBorderActive: hsl(var(--grn-color-grey8-HSL) / 80%);
 }

package/es/styles/variables.css

@@ -31,6 +31,11 @@
   --grn-radius-l: 15px;
 }
 
+:root {
+  --grn-transition-slow: 400ms;
+  --grn-transition-fast: 200ms;
+}
+
 :root {
   --grn-color-grey8-HSL: 0 0% 7%;
 
@@ -42,10 +47,14 @@
   --grn-color-grey3: hsl(0 0% 83%);
   --grn-color-grey2: hsl(0 0% 93%);
   --grn-color-grey1: hsl(0 0% 98%);
+}
 
+:root {
   --grn-color-blue: hsl(218 74% 54%);
   --grn-color-red: hsl(6 66% 65%);
+}
 
+:root {
   --grn-color-body: var(--grn-color-grey8);
   --grn-color-bodyDimmed: hsl(var(--grn-color-grey8-HSL) / 50%);
   --grn-color-accent: var(--grn-color-grey8);
@@ -55,6 +64,8 @@
   --grn-color-border: hsl(var(--grn-color-grey8-HSL) / 15%);
   --grn-color-selection: var(--grn-color-blue);
   --grn-color-danger: var(--grn-color-red);
+  --grn-color-disabledContent: var(--grn-color-grey5);
+  --grn-color-disabledBackground: hsl(var(--grn-color-grey8-HSL) / 12%);
 }
 
 :root {

package/es/types/index.js

@@ -1,14 +1,31 @@
-import "core-js/modules/es.object.keys.js";
-import PropTypes from "prop-types";
-import { vars } from "../variables";
-export var types = {
-  color: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.colors)), PropTypes.string]),
-  space: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.spaces)), PropTypes.number, PropTypes.string]),
-  side: PropTypes.oneOf(["all", "left", "right", "top", "bottom", "x", "y"]),
-  radius: PropTypes.oneOfType([PropTypes.oneOf(["s", "m", "l"]), PropTypes.string]),
-  position: PropTypes.oneOf(["static", "relative", "fixed", "absolute", "sticky"]),
-  textSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.textSizes)), PropTypes.number, PropTypes.string]),
-  weight: PropTypes.oneOf(Object.keys(vars.weights)),
-  textAlign: PropTypes.oneOf(["left", "center", "right"]),
-  overflow: PropTypes.oneOf(["visible", "hidden", "scroll", "auto"])
-};
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.types = void 0;
+
+require("core-js/modules/es.object.keys.js");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _variables = require("../variables");
+
+var types = {
+  color: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.colors)), _propTypes.default.string]),
+  space: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.spaces)), _propTypes.default.number, _propTypes.default.string]),
+  dimension: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  side: _propTypes.default.oneOf(["all", "left", "right", "top", "bottom", "x", "y"]),
+  radius: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.radiuses)), _propTypes.default.string]),
+  shadow: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.shadows)), _propTypes.default.string]),
+  position: _propTypes.default.oneOf(["static", "relative", "fixed", "absolute", "sticky"]),
+  textSize: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.textSizes)), _propTypes.default.number, _propTypes.default.string]),
+  weight: _propTypes.default.oneOf(Object.keys(_variables.vars.weights)),
+  textAlign: _propTypes.default.oneOf(["left", "center", "right"]),
+  overflow: _propTypes.default.oneOf(["visible", "hidden", "scroll", "auto"])
+};
+exports.types = types;