@roast-cms/react-sugar-styled - npm Package Compare versions

Comparing version 0.1.1 to 1.0.0

dist/index.js

@@ -6,130 +6,175 @@ "use strict";
 });
-exports.Sugar = undefined;
+exports.breakpoints = exports.max = exports.min = exports.exact = exports.Sugar = undefined;
 
-var _templateObject = _taggedTemplateLiteral(["\n        font-family: Arial, sans-serif;\n        letter-spacing: 0.005em;\n        line-height: ", "em;\n        font-weight: 700;\n        margin: 0;\n        /* in some cases this vv doesn't work and causes garbage CSS */\n        .fonts-loaded-headers & {\n          ", ";\n        }\n      "], ["\n        font-family: Arial, sans-serif;\n        letter-spacing: 0.005em;\n        line-height: ", "em;\n        font-weight: 700;\n        margin: 0;\n        /* in some cases this vv doesn't work and causes garbage CSS */\n        .fonts-loaded-headers & {\n          ", ";\n        }\n      "]),
-    _templateObject2 = _taggedTemplateLiteral(["\n        font-family: ", ";\n      "], ["\n        font-family: ", ";\n      "]),
-    _templateObject3 = _taggedTemplateLiteral(["\n        font-family: Georgia, serif;\n        letter-spacing: 0.05em;\n        line-height: ", "em;\n        .fonts-loaded & {\n          ", ";\n        }\n      "], ["\n        font-family: Georgia, serif;\n        letter-spacing: 0.05em;\n        line-height: ", "em;\n        .fonts-loaded & {\n          ", ";\n        }\n      "]),
-    _templateObject4 = _taggedTemplateLiteral(["\n        ", " ", " ", " ", ";\n      "], ["\n        ", " ", " ", " ", ";\n      "]),
-    _templateObject5 = _taggedTemplateLiteral(["font-size: \t", "px;"], ["font-size: \t", "px;"]),
-    _templateObject6 = _taggedTemplateLiteral(["font-size:\t", "px;"], ["font-size:\t", "px;"]);
+var _templateObject = _taggedTemplateLiteral(["\n          color: ", ";\n          font-family: ", ";\n          letter-spacing: 0.025em;\n          line-height: ", "em;\n          font-weight: ", ";\n          margin: 0;\n        "], ["\n          color: ", ";\n          font-family: ", ";\n          letter-spacing: 0.025em;\n          line-height: ", "em;\n          font-weight: ", ";\n          margin: 0;\n        "]),
+    _templateObject2 = _taggedTemplateLiteral(["\n          color: ", ";\n          font-family: ", ";\n          letter-spacing: 0.025em;\n          line-height: ", "em;\n        "], ["\n          color: ", ";\n          font-family: ", ";\n          letter-spacing: 0.025em;\n          line-height: ", "em;\n        "]),
+    _templateObject3 = _taggedTemplateLiteral(["\n        ", " ", " ", " ", ";\n      "], ["\n        ", " ", " ", " ", ";\n      "]),
+    _templateObject4 = _taggedTemplateLiteral(["font-size: \t", "px;"], ["font-size: \t", "px;"]),
+    _templateObject5 = _taggedTemplateLiteral(["font-size:\t", "px;"], ["font-size:\t", "px;"]);
 
+var _utils = require("./utils");
+
+Object.defineProperty(exports, "exact", {
+  enumerable: true,
+  get: function get() {
+    return _utils.exact;
+  }
+});
+Object.defineProperty(exports, "min", {
+  enumerable: true,
+  get: function get() {
+    return _utils.min;
+  }
+});
+Object.defineProperty(exports, "max", {
+  enumerable: true,
+  get: function get() {
+    return _utils.max;
+  }
+});
+Object.defineProperty(exports, "breakpoints", {
+  enumerable: true,
+  get: function get() {
+    return _utils.breakpoints;
+  }
+});
+
 var _styledComponents = require("styled-components");
 
-var _utils = require("./utils");
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); } //
+// tools and utilities
 
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Sugar = exports.Sugar = {
-  color: {
-    brand: "#00a7ff",
-    foreground: "#525252",
-    background: "#fff",
-    highlight: "#8cff00",
-    alpha: {
+//
+// theme object
+var Sugar = exports.Sugar = function Sugar() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  //
+  // theme defaults
+  var palette = {
+    //
+    // colours
+    color_brand: options.color_brand || "rgb(208,110,27)",
+    color_foreground: options.color_foreground || "rgb(82,82,82)",
+    color_background: options.color_background || "rgb(255,255,255)",
+    color_highlight: options.color_highlight || "rgb(255,255,0)",
+    //
+    // fonts
+    font_heading: options.font_heading || "Arial, sans-serif",
+    font_heading_weight: options.font_heading_weight || 700,
+    get font_body() {
+      return options.font_body || this.font_heading;
+    },
+    //
+    // size
+    size_base: options.size_base || 18,
+    size_column_medium: options.size_column_medium || 700,
+    size_column_large: options.size_column_large || 900,
+    size_block_spacing: options.size_block_spacing || 0.75,
+    size_block_padding: options.size_block_padding || 1.5,
+    size_block_border: options.size_block_border || 4,
+
+    effects_border_radius: options.effects_border_radius !== undefined ? options.effects_border_radius : 0.45
+    //
+    // return theme defaults object
+  };return {
+    color: {
+      brand: function brand(alpha) {
+        return (0, _utils.rgba)(palette.color_brand, alpha);
+      },
       foreground: function foreground(alpha) {
-        return "rgba(82, 82, 82, " + alpha + ")";
+        return (0, _utils.rgba)(palette.color_foreground, alpha);
       },
-      brand: function brand(alpha) {
-        return "rgba(0, 167, 255, " + alpha + ")";
+      background: function background(alpha) {
+        return (0, _utils.rgba)(palette.color_background, alpha);
       },
       highlight: function highlight(alpha) {
-        return "rgba(140, 255, 0, " + alpha + ")";
+        return (0, _utils.rgba)(palette.color_highlight, alpha);
       }
-    }
-  },
-  opacity: {
-    most: 0.85,
-    half: 0.5,
-    least: 0.125
-  },
-  effects: {
-    borderRadius: {
-      // base: multiplier
-      small: 0.5,
-      med: 1
-    }
-  },
-  typography: {
-    font: {
-      sans: "Arial, sans-serif",
-      serif: "Georgia, serif"
     },
-    title: {
-      auto: (0, _styledComponents.css)(_templateObject, function () {
-        return Sugar.typography.title.lineHeight;
-      }, function () {
-        return Sugar.typography.title.fontsLoaded;
-      }),
-      fontsLoaded: (0, _styledComponents.css)(_templateObject2, function () {
-        return Sugar.typography.font.sans;
-      }),
-      lineHeight: 1.15 // base: multiplier
+    typography: {
+      title: {
+        auto: (0, _styledComponents.css)(_templateObject, function () {
+          return Sugar(palette).color.foreground();
+        }, palette.font_heading, function () {
+          return Sugar(palette).typography.title.lineHeight;
+        }, palette.font_heading_weight),
+        lineHeight: 1.15
+      },
+      text: {
+        auto: (0, _styledComponents.css)(_templateObject2, function () {
+          return Sugar(palette).color.foreground();
+        }, palette.font_body, function () {
+          return Sugar(palette).typography.text.lineHeight;
+        }),
+        lineHeight: 1.75
+      }
     },
-    text: {
-      auto: (0, _styledComponents.css)(_templateObject3, function () {
-        return Sugar.typography.text.lineHeight;
-      }, function () {
-        return Sugar.typography.text.fontsLoaded;
-      }),
-      fontsLoaded: (0, _styledComponents.css)(_templateObject2, function () {
-        return Sugar.typography.font.serif;
-      }),
-      lineHeight: 1.75 // base: multiplier
-    }
-  },
-  size: {
-    breakpoint: {
-      exact: _utils.exact,
-      min: _utils.min,
-      max: _utils.max,
-      stops: {
-        min: _utils.breakpoints.xs[1],
-        max: _utils.breakpoints.xl[1]
+    effects: {
+      borderRadius: {
+        med: palette.effects_border_radius,
+        small: function small() {
+          return Sugar(palette).effects.borderRadius.med / 2;
+        }
       }
     },
-    font: {
-      // base: pixels
-      l: 20,
-      m: 18,
-      s: 14,
-      xs: 12,
-      make: {
-        // base: multiplier
-        larger: 2,
-        normal: 1,
-        smaller: 0.85,
-        tiny: 0.5
+    size: {
+      breakpoint: {
+        exact: _utils.exact,
+        min: _utils.min,
+        max: _utils.max,
+        stops: {
+          min: _utils.breakpoints.xs[1],
+          max: _utils.breakpoints.xl[1]
+        }
       },
-      // automatically set font size based on screen size; should be at the top of most components' css
-      auto: (0, _styledComponents.css)(_templateObject4, _utils.min.m(_templateObject5, function () {
-        return Sugar.size.font.m;
-      }), _utils.max.s(_templateObject5, function () {
-        return Sugar.size.font.s;
-      }), _utils.max.xs(_templateObject5, function () {
-        return Sugar.size.font.xs;
-      }), _utils.min.xxl(_templateObject6, function () {
-        return Sugar.size.font.l;
-      }))
-    },
-    block: {
-      column: {
-        maxwidth: {
-          // base: pixels
-          m: 700,
-          l: 900
+      font: {
+        m: palette.size_base,
+        //
+        l: palette.size_base * 1.15,
+        s: palette.size_base * 0.9,
+        xs: palette.size_base * 0.85,
+        //
+        make: {
+          larger: 2,
+          normal: 1,
+          smaller: 0.85,
+          tiny: 0.5
         },
-        safety: 1.5 // base: multiplier
+        auto: (0, _styledComponents.css)(_templateObject3, _utils.min.m(_templateObject4, function () {
+          return Sugar(palette).size.font.m;
+        }), _utils.max.s(_templateObject4, function () {
+          return Sugar(palette).size.font.s;
+        }), _utils.max.xs(_templateObject4, function () {
+          return Sugar(palette).size.font.xs;
+        }), _utils.min.xxl(_templateObject5, function () {
+          return Sugar(palette).size.font.l;
+        }))
       },
-      spacing: 0.75, // base: multiplier
-      border: 4, // base: pixels
-      minFigureWIdth: 320 // base: pixels
+      block: {
+        column: {
+          m: palette.size_column_medium,
+          l: palette.size_column_large
+        },
+        padding: palette.size_block_padding,
+        spacing: palette.size_block_spacing,
+        border: palette.size_block_border
+      }
+    },
+    layer: {
+      overlay: 40,
+      card: 30,
+      nav: 20,
+      up: 10,
+      tuck: -1
+    },
+    opacity: {
+      most: 0.85,
+      half: 0.5,
+      least: 0.125
     }
-  },
-  layer: {
-    overlay: 40,
-    card: 30,
-    nav: 20,
-    up: 10,
-    tuck: -1
-  }
-};
+  };
+};
+//
+// convenience exports

dist/utils.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.max = exports.min = exports.exact = exports.breakpoints = undefined;
+exports.max = exports.min = exports.exact = exports.rgba = exports.breakpoints = undefined;
 
@@ -33,2 +33,9 @@ var _templateObject = _taggedTemplateLiteral(["\n\t\t@media (min-width: ", "em) and (max-width: ", "em) {\n\t\t\t", "\n\t\t}\n\t"], ["\n\t\t@media (min-width: ", "em) and (max-width: ", "em) {\n\t\t\t", "\n\t\t}\n\t"]),
 
+//
+// function to convert rgb value to rgba
+var rgba = exports.rgba = function rgba(rgb) {
+  var a = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  return rgb.replace(")", "").replace("rgb", "rgba") + ", " + a + ")";
+};
+
 // print media queries for exact range:
@@ -35,0 +42,0 @@ var exact = exports.exact = Object.keys(breakpoints).reduce(function (accumulator, label) {

package.json

 {
   "name": "@roast-cms/react-sugar-styled",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "Tools and magic numbers for styled-components theme used with roast-cms React components.",
@@ -17,7 +17,14 @@ "main": "dist/index.js",
     "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.11",
+    "file-loader": "^1.1.11",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "style-loader": "^0.20.3",
+    "styled-components": "3.0.2",
+    "typeface-lobster-two": "^0.0.54",
+    "typeface-yanone-kaffeesatz": "^0.0.54",
+    "typeface-indie-flower": "^0.0.54",
     "webpack": "^3.11.0",
     "webpack-dev-server": "^2.11.1",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "styled-components": "3.0.2"
+    "url-loader": "^1.0.1"
   },
@@ -30,3 +37,4 @@ "peerDependencies": {
     "prepare": "babel src --presets babel-preset-es2015 --out-dir dist"
-  }
+  },
+  "dependencies": {}
 }

README.md

 # react-sugar-styled
 ![GitHub version](https://badge.fury.io/gh/roast-cms%2Freact-sugar-styled.svg)
-> 🍬 Tools and magic numbers for styled-components theme used within roast-cms React components.
+> 🍬 Customizable and extendable theming dictionary for Styled Components.
 
-### What is this?
+![demo](/graphics/demo.gif?raw=true)
 
-This is a list of defaults (colours, sizes, fonts etc.) which all or most React components under `roast-cms` use with help from [https://github.com/styled-components/styled-components](styled-components).
+- Create **more flexible designs** with React and Styled Components.
+- **Pre-built design system** that works across all your projects.
+- **Focus on design**, not variables.
 
-### What you will need.
-This package requires `styled-components`.
-
+## Installation:
 ```
-# first you'll need the package:
 yarn add @roast-cms/react-sugar-styled
 ```
+Then, in your project:
+```javascript
+import styled, { ThemeProvider } from "styled-components"
+import { Sugar } from "@roast-cms/react-sugar-styled"
+//
+// you can access the dictionary values from Styled Components within
+// any component that's wrapped in <ThemeProvider />
+const MyComponent = styled.div`
+  color: ${props => props.theme.color.brand()};
+`
+//
+// pass the dictionary Sugar() as a theme to your app:
+const App = props =>
+  <ThemeProvider theme={Sugar()}><MyComponent /></ThemeProvider>
+```
 
-### How to use.
+## Why?
+[Styled Components](https://github.com/styled-components/styled-components) lets you apply CSS to your React components with ease. Their [theming support](https://www.styled-components.com/docs/advanced#theming) adds a level of flexibility and organization to your application. You can make your components visually behave in an organized fashion, while remaining independent.
+
+Theming in this context works as defining a dictionary of values which could be reused across the children components. **However**, what those values are is a mystery until you finish building your project.
+
+`react-sugar-styled` provides you with a set of defaults that you can easily customize and extend. They include basics like colours, fonts, key sizes, and more. A set of convenience functions also helps you with responsive design (breakpoints), as well as size and colour modifications.
+
+## Theme globals.
+All of the values in the theme object are accessible across all your components which are children of `<ThemeProvider/>`. Here's what they do and how to access them:
+
+To access a value within your CSS (that you wrote with Styled Components) simply include `${props => props.theme.[OBJECT REFERENCE]}`, where **OBJECT REFERENCE** is one of the following:
+
+#### Colours
+
+**OBJECT REFERENCE** | Description | Usage Example
+--- | --- | ---
+`color.brand(alpha)` | An rgba value for your "special" theme colour. | `color: ${props => props.theme.color.brand()};`
+`color.foreground(alpha)` | An rgba value for your foreground colour, typically the colour of your body text. | `color: ${props => props.theme.color.foreground()};`
+`color.background(alpha)` | An rgba value for your background colour, typically the colour of your background. | `background: ${props => props.theme.color.background()};`
+
+#### Typography
+
+**OBJECT REFERENCE** | Description | Usage Example
+--- | --- | ---
+`typography.title.auto` | Return CSS that sets `color`, `font-family`, `letter-spacing`, `line-height`, `font-weight`, and `margin` designed for title/heading tags. | `h1 { ${props => props.theme.typography.title.auto} }`
+`typography.text.auto` | Same as above, but for body text. | `p { ${props => props.theme.typography.text.auto} }`
+
+#### Block measuring sizes
+**OBJECT REFERENCE** | Description | Usage Example
+--- | --- | ---
+`size.block.padding` | Returns a number meant to be used as `em` value for standard padding width | `padding: ${props => props.theme.size.block.padding}em;`
+`size.block.padding` | Returns a number meant to be used as `em` value for standard spacing between blocks | `margin: ${props => props.theme.size.block.spacing}em;`
+`size.block.border` | Returns a number meant to be used as `px` value for standard border widths | `border: ${props => props.theme.size.block.border}px solid;`
+`size.block.column.m` | Returns a number meant to be used as `px` value for a medium-width content column | `article { width: ${props => props.theme.size.column.m} }`
+`size.block.column.l` | Same as above, but for wider screens | `article { width: ${props => props.theme.size.column.l} }`
+
+#### Complete list can be found [here](/THEME_GLOBALS.md)
+
+## Customizing & extending the theme.
+Although you can immediately start designing your components using the default theme dictionary, you may want to customize it. Luckily there's an easy way to do this:
+
 ```javascript
-import { ThemeProvider } from "styled-components"
-import { Sugar } from "../src/index"
+<ThemeProvider
+  theme={Sugar({
+      color_brand: "rgb(189,67,54)",
+      color_background: "rgb(44,44,44)",
+      color_foreground: "rgb(224,213,255)",
+      //
+      font_heading: "'Yanone Kaffeesatz', sans-serif",
+      font_heading_weight: 400,
+      //
+      font_body: "'Lobster Two', serif",
+      //
+      size_base: 28,
+      size_column_medium: 700,
+      size_column_large: 900,
+      size_block_padding: 2,
+      size_block_spacing: 1.5,
+      size_block_border: 10,
+      //
+      effects_border_radius: 1
+    })
+  }
+>
+{/* components */}
+</ThemeProvider>
+```
 
-const ThemedComponent = props =>
-    <ThemeProvider theme={Sugar}>
-      Whatever.
-    </ThemeProvider>
+You can also extend the theme with your own dictionary values or system using ES6 spread operator:
+
+```javascript
+<ThemeProvider
+  theme={{
+    ...Sugar(),
+    font_special: "'Indie Flower', cursive"
+  }}
+>
+{/* components */}
+</ThemeProvider>
 ```
 
-### Contributing
-PRs and issue reports are welcome. Please submit all PRs to `develop` branch. To test, run `yarn start`
+## Contributions welcome!
+To get started with the code: clone the repo, run `yarn install` then `yarn start` and open up `http://localhost:3002` in your browser.

webpack.config.js

@@ -8,4 +8,6 @@ module.exports = {
   module: {
-    loaders: [
+    rules: [
       {
+        test: /\.js$/,
+        exclude: /node_modules/,
         loader: "babel-loader",
@@ -15,5 +17,18 @@ query: {
           plugins: ["transform-object-rest-spread"]
-        },
-        test: /\.js$/,
-        exclude: /node_modules/
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [{ loader: "style-loader" }, { loader: "css-loader" }]
+      },
+      {
+        test: /\.(woff(2)?|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, //to support @font-face rule
+        loader: "url-loader",
+        query: {
+          limit: "10000",
+          name: "[name].[ext]",
+          outputPath: "fonts/"
+          //the fonts will be emmited to public/assets/fonts/ folder
+          //the fonts will be put in the DOM <style> tag as eg. @font-face{ src:url(assets/fonts/font.ttf); }
+        }
       }
@@ -25,6 +40,6 @@ ]
     historyApiFallback: {
-      index: 'examples/index.html',
-    },
+      index: "examples/index.html"
+    }
   },
   devtool: "inline-source-map"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

114

increased by280%

Worsened metrics

Total package byte prevSize

44266

decreased by-76.76%

Dev dependency count

18

increased by63.64%

Number of package files

8

decreased by-38.46%

Lines of code

388

decreased by-28.41%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes