@flodesk/grain 1.5.0 → 1.5.1

package/es/base-styles.css

@@ -40,7 +40,7 @@
   --grn-color-primary: var(--grn-color-grey8);
   --grn-color-backgroundSecondary: hsl(0 0% 100%);
   --grn-color-background: var(--grn-color-grey1);
-  --grn-color-border: hsl(0 0% 7% / 15%);
+  --grn-color-border: hsl(0 0% 7% / 9%);
 }
 
 * {

package/es/components/text/index.js

@@ -9,8 +9,8 @@ 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 styled from "@emotion/styled";
-import { varOptions } from '../../variables';
 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);
 }, function (p) {
@@ -32,7 +32,7 @@ export var Text = function Text(_ref) {
   }, children);
 };
 Text.propTypes = {
-  size: PropTypes.oneOf(varOptions.textSizes),
-  weight: PropTypes.oneOf(varOptions.weights),
-  color: PropTypes.oneOfType([PropTypes.oneOf(varOptions.weights), PropTypes.string])
+  size: PropTypes.oneOf(cssVarOptions.textSizes),
+  weight: PropTypes.oneOf(cssVarOptions.weights),
+  color: PropTypes.oneOfType([PropTypes.oneOf(cssVarOptions.weights), PropTypes.string])
 };

package/es/utilities/index.js

@@ -1,23 +1,29 @@
+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 "core-js/modules/es.array.concat.js";
-import { grnPrefix, varOptions, varPrefixes } from "../variables";
+import { cssVarOptions, grnPrefix } from "../variables";
+export var getCssVarCore = function getCssVarCore(type, value) {
+  return "".concat(grnPrefix).concat(type, "-").concat(value);
+};
+export var getCssVar = function getCssVar(type, value) {
+  return "var(".concat(getCssVarCore(type, value), ")");
+};
 export var getColor = function getColor(color) {
-  if (varOptions.allColors.includes(color)) {
-    return "var(".concat(grnPrefix).concat(varPrefixes.color).concat(color, ")");
+  if (cssVarOptions.colors.includes(color)) {
+    return getCssVar("color", color);
   }
 
   return color;
 };
 export var getTextSize = function getTextSize(size) {
-  if (varOptions.textSizes.includes(size)) {
-    return "var(".concat(grnPrefix).concat(varPrefixes.text).concat(size, ")");
+  if (cssVarOptions.textSizes.includes(size)) {
+    return getCssVar("text", size);
   }
 
   return size;
 };
 export var getWeight = function getWeight(weight) {
-  if (varOptions.weights.includes(weight)) {
-    return "var(".concat(grnPrefix).concat(varPrefixes.weight).concat(weight, ")");
+  if (cssVarOptions.weights.includes(weight)) {
+    return getCssVar("weight", weight);
   }
 };

package/es/variables/index.js

@@ -30,17 +30,11 @@ for (var step = 1; step < greysAmount + 1; step++) {
 }
 
 export var grnPrefix = "--grn-";
-export var varPrefixes = {
-  space: "space-",
-  weight: "weight-",
-  text: "text-",
-  color: "color-"
-};
 export var greys = greysArray.reverse();
 export var semanticColors = ["body", "bodyDimmed", "primary", "backgroundSecondary", "background", "border"];
-export var varOptions = {
+export var cssVarOptions = {
   textSizes: ["s", "m", "l", "xl", "xxl"],
   spaces: ["xs", "s", "m", "l", "xl", "xxl"],
   weights: ["normal", "medium", "semiBold"],
-  allColors: [].concat(_toConsumableArray(greys), semanticColors)
+  colors: [].concat(_toConsumableArray(greys), semanticColors)
 };

package/package.json

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