@flodesk/grain 1.4.0 → 1.5.0

package/es/base-styles.css

@@ -26,10 +26,6 @@
 }
 
 :root {
-  --grn-color-body: hsl(0 0% 7%);
-  --grn-color-bodyDimmed: hsl(0 0% 7% / 50%);
-  --grn-color-primary: hsl(0 0% 7%);
-  
   --grn-color-grey8: hsl(0 0% 7%);
   --grn-color-grey7: hsl(0 0% 20%);
   --grn-color-grey6: hsl(0 0% 32%);
@@ -38,6 +34,13 @@
   --grn-color-grey3: hsl(0 0% 78%);
   --grn-color-grey2: hsl(0 0% 87%);
   --grn-color-grey1: hsl(0 0% 96%);
+
+  --grn-color-body: var(--grn-color-grey8);
+  --grn-color-bodyDimmed: hsl(0 0% 7% / 50%);
+  --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%);
 }
 
 * {
@@ -52,7 +55,7 @@
 } 
 
 body {
-  font-family: 'BeausiteClassic';
+  font-family: 'BeausiteClassic', sans-serif;
   color: var(--grn-color-body);
   font-size: var(--grn-text-m);
 }

package/es/components/text/index.js

@@ -7,10 +7,10 @@ var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 import { getColor, getTextSize, getWeight } from '../../utilities';
-import { textSizes, weights } from '../../variables';
 import PropTypes from 'prop-types';
 import React from "react";
 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(textSizes),
-  weight: PropTypes.oneOf(weights),
-  color: PropTypes.oneOfType([PropTypes.oneOf(weights), PropTypes.string])
+  size: PropTypes.oneOf(varOptions.textSizes),
+  weight: PropTypes.oneOf(varOptions.weights),
+  color: PropTypes.oneOfType([PropTypes.oneOf(varOptions.weights), PropTypes.string])
 };

package/es/utilities/index.js

@@ -1,23 +1,23 @@
 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 { allColors, colorVarPrefix, cssVarPrefix, textSizes, textVarPrefix, weightVarPrefix, weights } from "../variables";
+import { grnPrefix, varOptions, varPrefixes } from "../variables";
 export var getColor = function getColor(color) {
-  if (allColors.includes(color)) {
-    return "var(".concat(cssVarPrefix).concat(colorVarPrefix).concat(color, ")");
+  if (varOptions.allColors.includes(color)) {
+    return "var(".concat(grnPrefix).concat(varPrefixes.color).concat(color, ")");
   }
 
   return color;
 };
 export var getTextSize = function getTextSize(size) {
-  if (textSizes.includes(size)) {
-    return "var(".concat(cssVarPrefix).concat(textVarPrefix).concat(size, ")");
+  if (varOptions.textSizes.includes(size)) {
+    return "var(".concat(grnPrefix).concat(varPrefixes.text).concat(size, ")");
   }
 
   return size;
 };
 export var getWeight = function getWeight(weight) {
-  if (weights.includes(weight)) {
-    return "var(".concat(cssVarPrefix).concat(weightVarPrefix).concat(weight, ")");
+  if (varOptions.weights.includes(weight)) {
+    return "var(".concat(grnPrefix).concat(varPrefixes.weight).concat(weight, ")");
   }
 };

package/es/variables/index.js

@@ -29,14 +29,18 @@ for (var step = 1; step < greysAmount + 1; step++) {
   greysArray.push("grey" + step);
 }
 
-export var cssVarPrefix = "--grn-";
-export var spaceVarPrefix = "space-";
-export var weightVarPrefix = "weight-";
-export var textVarPrefix = "text-";
-export var colorVarPrefix = "color-";
+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"];
-export var textSizes = ["s", "m", "l", "xl", "xxl"];
-export var spaces = ["xs", "s", "m", "l", "xl", "xxl"];
-export var weights = ["normal", "medium", "semiBold"];
-export var allColors = [].concat(_toConsumableArray(greys), semanticColors);
+export var semanticColors = ["body", "bodyDimmed", "primary", "backgroundSecondary", "background", "border"];
+export var varOptions = {
+  textSizes: ["s", "m", "l", "xl", "xxl"],
+  spaces: ["xs", "s", "m", "l", "xl", "xxl"],
+  weights: ["normal", "medium", "semiBold"],
+  allColors: [].concat(_toConsumableArray(greys), semanticColors)
+};

package/package.json

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