@flodesk/grain 1.4.0 → 1.6.0

package/README.md

@@ -1,34 +1,35 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Grain design system
 
-## Getting Started
+## Installation
 
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
+```
+npm install @flodesk/grain
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+### Add base styles
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+`base-styles.css` contains all Grain global styles. Import it in the highest component possible so that it's accessible everywhere in the UI.
 
-## Learn More
+```js
+import "@flodesk/grain/es/base-styles.css";
+```
 
-To learn more about Next.js, take a look at the following resources:
+## Usage
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+### Component usage
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+```jsx
+import { Text, Button, Input } from "@flodesk/grain";
 
-## Deploy on Vercel
+<Text>Content</Text>;
+```
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+### CSS variable usage
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+```css
+.dashboard-header {
+  font-size: var(--grn-text-xl);
+  margin-bottom: var(--grn-space-l);
+  color: var(--grn-color-bodyDimmed);
+}
+```

package/es/base-styles.css

@@ -26,11 +26,9 @@
 }
 
 :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%);
+  --grey8-HSL: 0 0% 7%;
+
+  --grn-color-grey8: hsl(var(--grey8-HSL));
   --grn-color-grey7: hsl(0 0% 20%);
   --grn-color-grey6: hsl(0 0% 32%);
   --grn-color-grey5: hsl(0 0% 44%);
@@ -38,6 +36,19 @@
   --grn-color-grey3: hsl(0 0% 78%);
   --grn-color-grey2: hsl(0 0% 87%);
   --grn-color-grey1: hsl(0 0% 96%);
+
+  --grn-color-blue: hsl(218 74% 54%);
+  --grn-color-red: hsl(6 66% 65%);
+
+  --grn-color-body: var(--grn-color-grey8);
+  --grn-color-bodyDimmed: hsl(var(--grey8-HSL) / 50%);
+  --grn-color-accent: var(--grn-color-grey8);
+  --grn-color-backgroundSecondary: hsl(0 0% 100%);
+  --grn-color-background: var(--grn-color-grey1);
+  --grn-color-overlay: hsl(var(--grey8-HSL) / 7%);
+  --grn-color-border: hsl(var(--grey8-HSL) / 9%);
+  --grn-color-selection: var(--grn-color-blue);
+  --grn-color-danger: var(--grn-color-red);
 }
 
 * {
@@ -52,7 +63,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,9 +7,9 @@ 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 { cssVarOptions } 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(textSizes),
-  weight: PropTypes.oneOf(weights),
-  color: PropTypes.oneOfType([PropTypes.oneOf(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 { allColors, colorVarPrefix, cssVarPrefix, textSizes, textVarPrefix, weightVarPrefix, weights } 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 (allColors.includes(color)) {
-    return "var(".concat(cssVarPrefix).concat(colorVarPrefix).concat(color, ")");
+  if (cssVarOptions.colors.includes(color)) {
+    return getCssVar("color", color);
   }
 
   return color;
 };
 export var getTextSize = function getTextSize(size) {
-  if (textSizes.includes(size)) {
-    return "var(".concat(cssVarPrefix).concat(textVarPrefix).concat(size, ")");
+  if (cssVarOptions.textSizes.includes(size)) {
+    return getCssVar("text", size);
   }
 
   return size;
 };
 export var getWeight = function getWeight(weight) {
-  if (weights.includes(weight)) {
-    return "var(".concat(cssVarPrefix).concat(weightVarPrefix).concat(weight, ")");
+  if (cssVarOptions.weights.includes(weight)) {
+    return getCssVar("weight", weight);
   }
 };

package/es/variables/index.js

@@ -29,14 +29,13 @@ 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 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", "accent", "backgroundSecondary", "background", "overlay", "border", "selection", "danger"];
+export var baseColors = ["blue", "red"];
+export var cssVarOptions = {
+  textSizes: ["s", "m", "l", "xl", "xxl"],
+  spaces: ["xs", "s", "m", "l", "xl", "xxl"],
+  weights: ["normal", "medium", "semiBold"],
+  colors: [].concat(_toConsumableArray(greys), baseColors, semanticColors)
+};

package/package.json

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