@flodesk/grain 1.2.2 → 1.3.0

package/es/base-styles.css

@@ -3,13 +3,11 @@
 }
 
 :root {
-  --textIncrement: calc(0.2vw + 2px);
-
   --grn-text-s: calc(var(--grn-unit) * 1.625);
   --grn-text-m: calc(var(--grn-unit) * 1.875);
-  --grn-text-l: calc(var(--grn-text-m) + var(--textIncrement));
-  --grn-text-xl: calc(var(--grn-text-l) + var(--textIncrement));
-  --grn-text-xxl: calc(var(--grn-text-xl) + var(--textIncrement));
+  --grn-text-l: calc(var(--grn-unit) * 2.5);
+  --grn-text-xl: calc(var(--grn-unit) * 3.125);
+  --grn-text-xxl: calc(var(--grn-unit) * 3.75);
 }
 
 :root {
@@ -24,13 +22,22 @@
   --grn-space-m: calc(var(--grn-unit) * 2);
   --grn-space-l: calc(var(--grn-unit) * 3);
   --grn-space-xl: calc(var(--grn-unit) * 5);
-  --grn-space-xxl: calc(var(--grn-unit) * 7);;
+  --grn-space-xxl: calc(var(--grn-unit) * 7);
 }
 
 :root {
   --grn-color-body: hsl(0 0% 7%);
   --grn-color-bodyDimmed: hsl(0 0% 7% / 40%);
   --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%);
+  --grn-color-grey5: hsl(0 0% 44%);
+  --grn-color-grey4: hsl(0 0% 63%);
+  --grn-color-grey3: hsl(0 0% 78%);
+  --grn-color-grey2: hsl(0 0% 87%);
+  --grn-color-grey1: hsl(0 0% 96%);
 }
 
 * {

package/es/components/text/index.js

@@ -6,12 +6,11 @@ var _templateObject;
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
+import { textSizes, weights } from '../../variables';
 import PropTypes from 'prop-types';
 import React from "react";
 import { getTextSize } from '../../utilities';
 import styled from "@emotion/styled";
-export var textSizes = ['s', 'm', 'l', 'xl', 'xxl'];
-export var weights = ['normal', 'medium', 'semiBold'];
 var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  font-size: ", ";\n  font-weight: var(--grn-weight-", ");\n"])), function (p) {
   return getTextSize(p.size);
 }, function (p) {

package/es/utilities/index.js

@@ -1,9 +1,10 @@
 import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.string.includes.js";
-import { textSizes } from "../components/text";
+import "core-js/modules/es.array.concat.js";
+import { cssVarPrefix, textSizes, textVarPrefix } from "../variables";
 export var getTextSize = function getTextSize(size) {
   if (textSizes.includes(size)) {
-    return "var(--grn-text-".concat(size, ")");
+    return "var(".concat(cssVarPrefix).concat(textVarPrefix).concat(size, ")");
   }
 
   return size;

package/es/variables/index.js

@@ -0,0 +1,16 @@
+import "core-js/modules/es.array.reverse.js";
+var greysAmount = 8;
+var greysArray = [];
+
+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 greys = greysArray.reverse();
+export var textSizes = ["s", "m", "l", "xl", "xxl"];
+export var spaces = ["xs", "s", "m", "l", "xl", "xxl"];
+export var weights = ["normal", "medium", "semiBold"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",
@@ -47,6 +47,7 @@
     "eslint-config-next": "12.1.6",
     "next": "12.1.6",
     "react-live": "^3.1.0",
-    "semantic-release": "^19.0.2"
+    "semantic-release": "^19.0.2",
+    "vercel": "^25.1.0"
   }
 }