@flodesk/grain 2.7.6 → 2.8.0

package/es/components/button/index.js

@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+require("core-js/modules/es.array.concat.js");
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _utilities = require("../../utilities");
@@ -21,30 +23,37 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _excluded = ["children", "size", "weight", "color", "tag"];
+var _react2 = require("@emotion/react");
+
+var _excluded = ["children", "tag", "variant", "isDisabled"];
 
-var _templateObject, _templateObject2;
+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(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _utilities.getTextSize)('m'), (0, _utilities.getWeight)('medium'), (0, _utilities.getColor)('body'), (0, _utilities.getColor)('white'), (0, _utilities.getRadius)('m'));
+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(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  --opticalCompensation: -0.3px;\n\n  position: relative;\n  top: var(--opticalCompensation);\n"])));
+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,
+      _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)({
-    size: size,
-    weight: weight,
-    color: color,
-    as: tag
+    as: tag,
+    variant: variant,
+    isDisabled: isDisabled
   }, props), __jsx(ButtonText, null, children));
 };
 
@@ -54,19 +63,44 @@ Button.__docgenInfo = {
   "methods": [],
   "displayName": "Button",
   "props": {
-    "size": {
+    "variant": {
       "defaultValue": {
-        "value": "'m'",
+        "value": "'neutral'",
         "computed": false
       },
-      "required": false
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"neutral\"",
+          "computed": false
+        }, {
+          "value": "\"primary\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
     },
-    "weight": {
-      "defaultValue": {
-        "value": "'normal'",
-        "computed": false
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "isDisabled": {
+      "type": {
+        "name": "bool"
       },
-      "required": false
+      "required": false,
+      "description": ""
     }
   }
 };

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/utilities/index.js

@@ -23,7 +23,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getBorder = exports.getSpace = exports.getRadius = exports.getWeight = exports.getTextSize = exports.getShadow = exports.getColor = exports.getCssVar = exports.getCssVarCore = exports.isBrowser = void 0;
+exports.getBorder = exports.getSpace = exports.getTransition = exports.getRadius = exports.getWeight = exports.getTextSize = exports.getShadow = exports.getColor = exports.getCssVar = exports.getCssVarCore = exports.isBrowser = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -104,6 +104,14 @@ var getRadius = function getRadius(radius) {
 
 exports.getRadius = getRadius;
 
+var getTransition = function getTransition(transition) {
+  if (transition in _variables.vars.transitions) {
+    return getCssVar("transition", transition);
+  }
+};
+
+exports.getTransition = getTransition;
+
 var getSpace = function getSpace(space) {
   if (isNaN(space)) {
     if (space in _variables.vars.spaces) {

package/es/variables/index.js

@@ -39,6 +39,10 @@ var vars = {
     m: "m",
     l: "l"
   },
+  transitions: {
+    slow: "slow",
+    fast: "fast"
+  },
   colors: {
     greys: {
       grey8: "grey8",
@@ -62,8 +66,13 @@ var vars = {
       background: "background",
       overlay: "overlay",
       border: "border",
+      buttonBorder: "buttonBorder",
+      buttonBorderHover: "buttonBorderHover",
+      buttonBorderActive: "buttonBorderActive",
       selection: "selection",
-      danger: "danger"
+      danger: "danger",
+      disabledContent: "disabledContent",
+      disabledBackground: "disabledBackground"
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "2.7.6",
+  "version": "2.8.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",