@flodesk/grain 1.6.0 → 2.0.0

package/README.md

@@ -8,10 +8,10 @@ npm install @flodesk/grain
 
 ### Add base styles
 
-`base-styles.css` contains all Grain global styles. Import it in the highest component possible so that it's accessible everywhere in the UI.
+`base.css` contains all Grain global styles. Import it in the highest component possible so that it's accessible everywhere in the UI.
 
 ```js
-import "@flodesk/grain/es/base-styles.css";
+import "@flodesk/grain/es/styles/base.css";
 ```
 
 ## Usage

package/es/components/text/index.js

@@ -9,7 +9,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 import { getColor, getTextSize, getWeight } from '../../utilities';
 import PropTypes from 'prop-types';
 import React from "react";
-import { cssVarOptions } from '../../variables';
+import { cssVars } from '../../variables';
 import styled from "@emotion/styled";
 var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n"])), function (p) {
   return getTextSize(p.size);
@@ -32,7 +32,7 @@ export var Text = function Text(_ref) {
   }, children);
 };
 Text.propTypes = {
-  size: PropTypes.oneOf(cssVarOptions.textSizes),
-  weight: PropTypes.oneOf(cssVarOptions.weights),
-  color: PropTypes.oneOfType([PropTypes.oneOf(cssVarOptions.weights), PropTypes.string])
+  size: PropTypes.oneOf(cssVars.textSizes),
+  weight: PropTypes.oneOf(cssVars.weights),
+  color: PropTypes.oneOfType([PropTypes.oneOf(cssVars.weights), PropTypes.string])
 };

package/es/utilities/index.js

@@ -1,7 +1,7 @@
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.string.includes.js";
-import { cssVarOptions, grnPrefix } from "../variables";
+import { cssVars, grnPrefix } from "../variables";
 export var getCssVarCore = function getCssVarCore(type, value) {
   return "".concat(grnPrefix).concat(type, "-").concat(value);
 };
@@ -9,21 +9,21 @@ export var getCssVar = function getCssVar(type, value) {
   return "var(".concat(getCssVarCore(type, value), ")");
 };
 export var getColor = function getColor(color) {
-  if (cssVarOptions.colors.includes(color)) {
+  if (cssVars.colors.includes(color)) {
     return getCssVar("color", color);
   }
 
   return color;
 };
 export var getTextSize = function getTextSize(size) {
-  if (cssVarOptions.textSizes.includes(size)) {
+  if (cssVars.textSizes.includes(size)) {
     return getCssVar("text", size);
   }
 
   return size;
 };
 export var getWeight = function getWeight(weight) {
-  if (cssVarOptions.weights.includes(weight)) {
+  if (cssVars.weights.includes(weight)) {
     return getCssVar("weight", weight);
   }
 };

package/es/variables/index.js

@@ -33,7 +33,7 @@ export var grnPrefix = "--grn-";
 export var greys = greysArray.reverse();
 export var semanticColors = ["body", "bodyDimmed", "accent", "backgroundSecondary", "background", "overlay", "border", "selection", "danger"];
 export var baseColors = ["blue", "red"];
-export var cssVarOptions = {
+export var cssVars = {
   textSizes: ["s", "m", "l", "xl", "xxl"],
   spaces: ["xs", "s", "m", "l", "xl", "xxl"],
   weights: ["normal", "medium", "semiBold"],

package/package.json

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

package/es/hooks/use-window-size.js

@@ -1,67 +0,0 @@
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.symbol.description.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.symbol.iterator.js";
-import "core-js/modules/es.array.iterator.js";
-import "core-js/modules/es.string.iterator.js";
-import "core-js/modules/web.dom-collections.iterator.js";
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.array.from.js";
-import "core-js/modules/es.regexp.exec.js";
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-import { useEffect, useState } from "react";
-export function useWindowSize() {
-  var _useState = useState({
-    width: undefined,
-    height: undefined
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      windowSize = _useState2[0],
-      setWindowSize = _useState2[1];
-
-  useEffect(function () {
-    function handleResize() {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
-    }
-
-    window.addEventListener("resize", handleResize);
-    handleResize();
-    return function () {
-      return window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-  return windowSize;
-}
-export var useComputedStyle = function useComputedStyle(ref, property) {
-  var _useState3 = useState(),
-      _useState4 = _slicedToArray(_useState3, 2),
-      computedValue = _useState4[0],
-      setComputedValue = _useState4[1];
-
-  var windowSize = useWindowSize();
-  useEffect(function () {
-    if (typeof window !== "undefined") {
-      var getStyle = function getStyle(style) {
-        return window.getComputedStyle(ref.current).getPropertyValue(style);
-      };
-
-      setComputedValue(getStyle(property));
-    }
-  }, [windowSize]);
-  return computedValue;
-};