slippers-ui - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

package.json

 {
   "name": "slippers-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Gitlab Marketing Design System",
@@ -10,2 +10,3 @@ "main": "index.js",
   "scripts": {
+    "start" : "yarn storybook & yarn watch:css",
     "storybook": "start-storybook -p 6006",
@@ -12,0 +13,0 @@ "watch:css": "postcss src/styles.css -o dist/compiled.css -w",

README.md

@@ -9,2 +9,3 @@ # Slippers
 1. `yarn` to install `storybook`, `tailwindcss`, and their dependencies
+1. `yarn watch:css` to watch for changes within `html` files within `./stories` directory.
 1. `yarn storybook` to run on port 6006
@@ -15,10 +16,6 @@ 1. `yarn build-storybook` to build to  `/storybook-static` directory
 # Storybook
-
 ## Notes
 * Storybook currently must use PostCSSv7, while Tailwindv2 is using PostCSSv8. Because of this, Tailwind was installed to be compatible with PostCSSv7. [Tailwind Docs on compatibility](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build).
 * This contains an HTML community-maintained edition of Storybook. Because of that, much of [Storybook](https://storybook.js.org/docs/html/get-started/introduction) is built and written with JS frameworks/Web Components in mind.
-* Before running Storybook, I am building CSS with `yarn build:css` at roughly 3.9MB in size. In the future, this will have the optimized for a production environement. Tailwind does support this process out of the box, but we have yet to set it up ourselves. 
 
-<!--What we would want is for PostCSS to understand what classes are being used at at the Storybook directory, and for those and some core utilities we define to be included everywhere.
-  -->
 
@@ -29,3 +26,11 @@ # TailwindCSS
 * TailwindCSS was installed as a PostCSS Plugin. [Tailwind Installation Instructions](https://tailwindcss.com/docs/installation#add-tailwind-as-a-post-css-plugin).
+* Tailwind config lives within `tailwind.config.js`, were
+* Recommended VSCode Extension: [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
+* Building CSS without using CSSPurge makes CSS file 3.9MB in size.
 
+# PostCSS
+## Notes
+* [Autoprefixer](https://autoprefixer.github.io/): PostCSS Plugin adds ventor browser prefixes
+* [PostCSS Import]():
+
 <!-- File will be minified + optimized with autoprefixer -->

tailwind.config.js

 module.exports = {
-  purge: [],
+  purge: {
+    enabled: true,
+    content: [
+      './stories/**/*.html'
+    ],
+    options: {
+      safelist: [''],
+    }
+  },
   darkMode: false, // or 'media' or 'class'
   theme: {
-    extend: {},
+    colors: {
+      white: '#FFF',
+      black: '#333',
+      brand: {
+        yellow: '#FCA121',
+        orange: '#FC6D26',
+        red: '#DB3B21',
+        turquoise: '#52CDB7',
+        purple: '#9B51E0'
+      },
+      grayscale: {
+        DEFAULT: '#999',
+        gray2: '#5E5E5E',
+        gray3: '#404040'
+      },
+      ui: {
+        primary: {
+          DEFAULT: '#FA7035',
+          light: '#FF8D5D',
+          dark: '#DD6531'
+        },
+        secondary: {
+          DEFAULT: '#9B51E0',
+          light: '#B37DE6',
+          dark: '#7D2BD9'
+        },
+        tertiary: {
+          DEFAULT: '#52CDB7',
+          light: '#9EEBDD',
+          dark: '#1DBA9E'
+        }
+      },
+      status: {
+        success: '#48A651',
+        warning: '#FFA561',
+        error: '#F24F63',
+        info: '#A2CEFF'
+      }
+    }
   },
@@ -7,0 +53,0 @@ variants: {

New alerts

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

Non-existent author

Supply chain risk

The package was published by an npm account that no longer exists.

Found 1 instance in 1 package

Improved metrics

Number of package files

13

increased by18.18%

Number of lines in readme file

33

increased by17.86%

Number of high supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

18350

decreased by-99.53%

Lines of code

646

decreased by-99.55%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes