split out scss to a separate package

packages/kerosene-styles/package.json

@@ -0,0 +1,31 @@
+{
+    "name": "@kablamo/kerosene-styles",
+    "version": "0.0.1",
+    "repository": {
+      "type": "git",
+      "url": "https://github.com/KablamoOSS/kerosene.git",
+      "directory": "packages/kerosene-styles"
+    },
+    "bugs": {
+      "url": "https://github.com/KablamoOSS/kerosene/issues"
+    },
+    "homepage": "https://github.com/KablamoOSS/kerosene",
+    "private": false,
+    "license": "MIT",
+    "main": "lib/index.js",
+    "module": "es/index.js",
+    "sideEffects": false,
+    "directories": {
+      "doc": "readme.md"
+    },
+    "publishConfig": {
+      "access": "public"
+    },
+    "engines": {
+      "node": ">= 6"
+    },
+    "dependencies": {
+      "@kablamo/kerosene": "^0.0.6"
+    }
+  }
+

packages/kerosene-styles/readme.md

@@ -0,0 +1,62 @@
+# 🔥 Kerosene-styles
+
+```
+yarn add @kablamo/kerosene-styles
+
+npm install @kablamo/kerosene-styles
+```
+
+## Available SCSS
+
+---
+
+### [media.scss](scss/mixins/media.scss)
+
+```scss
+@import '~@kablamo/kablamo-styles/scss/mixins/media.scss';
+```
+
+#### Available Functions
+
+#### `mq(width, type)`
+
+
+
+Returns a media query based on a width, defined by a breakpoint, as well as the min or max type.
+
+###### Example Usage
+
+```scss
+@include mq('desktop', max) {
+    display: none;
+}
+```
+
+###### Associated breakpoints
+
+```scss
+$breakpoints: (
+    "phone":        400px,
+    "phone-wide":   480px,
+    "phablet":      560px,
+    "tablet-small": 640px,
+    "tablet":       768px,
+    "tablet-wide":  1024px,
+    "desktop":      1248px,
+    "desktop-wide": 1440px
+);
+```
+
+#### `aspect-ratio(width, height)`
+
+Maintains the given ratio for the element it is included in.
+
+###### Example Usage
+
+```scss
+@include aspect-ratio(16,9)
+```
+
+---
+
+kablamo.com.au

packages/kerosene-ui/readme.md

@@ -88,44 +88,6 @@ Returns `{ capture: true, passive: true }` when capture passive event listeners
 
 Returns `{ capture: true }` when capture passive event listeners are supported, otherwise `true`.
 
-## Available SCSS
-
-### `mq(width, type)`
-
-Returns a media query based on a width, defined by a breakpoint, as well as the min or max type.
-##### Example Usage
-
-```scss
-@include mq('desktop', max) {
-    display: none;
-}
-```
-
-##### Associated breakpoints
-
-```scss
-$breakpoints: (
-    "phone":        400px,
-    "phone-wide":   480px,
-    "phablet":      560px,
-    "tablet-small": 640px,
-    "tablet":       768px,
-    "tablet-wide":  1024px,
-    "desktop":      1248px,
-    "desktop-wide": 1440px
-);
-```
-
-### `aspect-ratio(width, height)`
-
-Maintains the given ratio for the element it is included in.
-
-##### Example Usage
-
-```scss
-@include aspect-ratio(16,9)
-```
-
 ---
 
 kablamo.com.au