Initial commit.

.gitignore

@@ -0,0 +1,3 @@
+.idea
+.DS_Store
+node_modules

README.md

@@ -0,0 +1,142 @@
+# Assets for the rock.systems ecosystem
+
+Make sure every bundle uses consistent assets.
+
+* [Installation](#installation)
+* [CSS](#css)
+  * [Mixins](#mixins)
+    * [Utilities](#utilities)
+      * [svg](#svg)
+      * [contains-svg](#contains-svg)
+      * [space](#space)
+    * [Components](#components)
+      * [Button](#button)
+  * [Variables](#variables)
+    * [Import Variables](#import-variables)
+
+## Installation
+
+```shell
+yarn add braunstetter/rock
+```
+
+## CSS
+
+We are using the [postcss-mixins](https://github.com/postcss/postcss-mixins) library.
+
+### Mixins
+
+To use our mixins you have to enable it first.
+
+```js
+
+// example configuration of postcss.config.js
+const path = require("path");
+
+module.exports = {
+    plugins: [
+        require('autoprefixer'),
+        require('postcss-mixins')({
+            mixinsFiles: path.join(__dirname, '/node_modules/@braunstetter/rock/js/mixins', '**/*.js')
+        }),
+        require('postcss-simple-vars'),
+        require('postcss-import'),
+        require('postcss-nested'),
+        require('cssnano')({
+            preset: 'default',
+        }),
+    ]
+}
+```
+
+Afterward you will be able to use the mixins:
+
+```css
+@mixin btn md;
+```
+
+#### Utilities
+
+##### svg
+
+Svg images are used quite often in modern UI components. So this utility mixin focuses on standardizing svg images.
+
+```css
+svg {
+    @mixin svg md;
+}
+```
+
+Available sizes:
+
+**md**  
+height: 1.25rem  
+width: 1.25rem
+
+##### contains-svg
+
+This utility mixin mirrors the [svg mixin](#svg) - but you don't have to put it inside a `svg` css-selector.
+
+```css
+.my-container {
+    @mixin contains-svg md;
+}
+```
+
+##### space
+
+This utility is controlling the space between child elements.
+
+You can use all spacing [variables](#variables):
+
+```css
+/* 3 means it uses the $_3 variable */
+@mixin space x, 3;
+```
+
+> be aware - additionally, variables have to be [imported](#import-variables) before you can use them.
+
+#### Components
+
+##### Button
+
+```css
+/* parameter: size, color */
+@mixin btn md, primary;
+```
+
+Available sizes:
+**md**
+
+Available colors:
+**primary**
+
+If you are using this component **without** the color parameter, no styling will be applied except for the padding and
+spacing of the `size` parameter:
+
+```css
+@mixin btn md;
+```
+
+### Variables
+
+We are using the [`postcss-simple-vars`](https://github.com/postcss/postcss-simple-vars) plugin.
+
+#### Import variables
+
+Before you can use the variables, you have to import them first into your css document:
+
+```css
+/* all variables available */
+@import "@braunstetter/rock/css/variables.css";
+
+/* just a subset */
+@import "@braunstetter/rock/css/variables/color.css";
+```
+
+
+
+
+
+
+

css/variables.css

@@ -0,0 +1,2 @@
+@import "variables/color.css";
+@import "variables/spacing.css";

css/variables/color.css

@@ -0,0 +1,4 @@
+$dark: #1E293B;
+$light_dark: #64748b;
+$dark_light: #e2e8f0;
+$light: #ffffff;

css/variables/spacing.css

@@ -0,0 +1,6 @@
+$_1:    0.25rem;
+$_2:    0.5rem;
+$_3:    0.75rem;
+$_4:    1rem;
+$_5:    1.25rem;
+$_56:   14rem;

js/helper/utils.js

@@ -0,0 +1,32 @@
+module.exports = {
+    spaceBetween(direction, size) {
+        const directionString = this.getDirectionByIdentifier(direction)
+
+        if (directionString) {
+            return {
+                '> * + * ': {
+                    ['margin-' + directionString]: '$_' + size
+                }
+            }
+        }
+    },
+    getDirectionByIdentifier(identifier) {
+        return identifier === 'x' ? 'left' : identifier === 'y' ? 'top' : undefined
+    },
+    getSvgSpacingSizeBySizeString(size) {
+        if (size === 'md') {
+            return '$_5'
+        }
+
+        return null;
+    },
+    getSvgStyleset(size) {
+        const sizeString = this.getSvgSpacingSizeBySizeString(size)
+
+        return {
+            'flex-shrink': 1,
+            'height': sizeString,
+            'width': sizeString,
+        }
+    }
+}

js/mixins/btn.js

@@ -0,0 +1,28 @@
+const _ = require("lodash")
+const button = require("../styles/btn")
+
+module.exports = (mixin, size, color) => {
+
+    let styles = _.clone(button.default);
+
+    styles = addStylesForSize(size, styles);
+    styles = addStylesForColor(color, styles);
+
+    return styles
+}
+
+
+function addStylesForSize(size = 'default', styles) {
+    if (size === 'md') {
+        styles = _.merge(styles, button.size.md)
+    }
+    return styles;
+}
+
+function addStylesForColor(color = 'default', styles) {
+
+    if (color === 'primary') {
+        styles = _.merge(styles, button.color.primary, button.border.default)
+    }
+    return styles;
+}

js/mixins/contains-svg.js

@@ -0,0 +1,5 @@
+const helper = require("../helper/utils");
+
+module.exports = (mixin, size) => {
+    return !!helper.getSvgSpacingSizeBySizeString(size) ? {'> svg': helper.getSvgStyleset(size)} : null
+}

js/mixins/space.js

@@ -0,0 +1,5 @@
+const helper = require('./../helper/utils')
+
+module.exports = (mixin, direction, size) => {
+    return helper.spaceBetween(direction, size)
+}

js/mixins/svg.js

@@ -0,0 +1,5 @@
+const helper = require('./../helper/utils')
+
+module.exports = (mixin, size) => {
+    return !!helper.getSvgSpacingSizeBySizeString(size) ? {'&': helper.getSvgStyleset(size)} : null
+}

js/styles/btn.js

@@ -0,0 +1,39 @@
+const helper = require("../helper/utils");
+
+module.exports = {
+    default: {
+        'z-index': 50,
+        'cursor': 'pointer',
+        'display': 'inline-flex',
+        'justify-content': 'center',
+        'align-items': 'center',
+        'border-radius': '0.375rem',
+        '&:focus': {
+            'outline': 'none'
+        }
+    },
+    size: {
+        'md': {
+            'padding': '0.5rem 1rem',
+            '& > svg': helper.getSvgStyleset('md')
+        }
+    },
+    color: {
+        'primary': {
+            'border-color': '$light_dark',
+            'box-shadow': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+            'background-color': '$dark',
+            'color': 'white',
+            'font-weight': '500',
+            'transition-property': 'background-color',
+            'transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
+            'transition-duration': '150ms'
+        }
+    },
+    border: {
+        default: {
+            'border-style': 'solid',
+            'border-width': '1px'
+        }
+    }
+}

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@braunstetter/rock",
+  "version": "1.0.0",
+  "description": "Assets for the rock.systems ecosystem. Reuse it everywhere.",
+  "main": "index.js",
+  "author": "Michael Brauner",
+  "license": "MIT",
+  "private": false,
+  "devDependencies": {
+    "lodash": "^4.17.21",
+    "postcss": "^8.3.5",
+    "postcss-import": "^14.1.0",
+    "postcss-mixins": "^9.0.3",
+    "postcss-simple-vars": "^6.0.3"
+  }
+}