biings-ds - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

docs/doc-color.md

@@ -1,2 +0,2 @@
-<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Style</h6><h1 class="title is-1 has-text-weight-bold">Color</h1>
+<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Foundation</h6><h1 class="title is-1 has-text-weight-bold">Color</h1>
 <p class="subtitle is-5"><span class="has-text-weight-semibold">Color</span> brings a design to life. It is used to express emotion and tone, as well as place emphasis and create associations. Color should always be used in meaningful ways in order to create patterns and visual cues.</p>
@@ -22,23 +22,28 @@
     <div class="column is-3"><div class="notification has-background-blue"><br></div><span>blue</span><br>**Indigo**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#5A7BC9</span></div>
-    <div class="column is-3"><div class="notification has-background-purple"><br></div><span>purple</span><br>**Fuchsia Blue**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#715AC9</span></div>
+    <div class="column is-3"><div class="notification has-background-purple"><br></div><span>purple</span><br>**Blue Marguerite**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#735BCC</span></div>
     <div class="column is-3"><div class="notification has-background-red"><br></div><span>red</span><br>**Froly**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#EF626C</span></div>
     <div class="column is-12"></div>
-    <div class="column is-3"><div class="notification has-background-turquoise"><br></div><span>turquoise</span><br>**name**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#000000</span></div>
-    <div class="column is-3"><div class="notification has-background-green"><br></div><span>green</span><br>**Ocean Green**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#43AA8B</span></div>
-    <div class="column is-3"><div class="notification has-background-yellow"><br></div><span>yellow</span><br>**name**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#000000</span></div>
-    <div class="column is-3"><div class="notification has-background-orange"><br></div><span>orange</span><br>**name**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#000000</span></div>
+    <div class="column is-3"><div class="notification has-background-turquoise"><br></div><span>turquoise</span><br>**Bermuda**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#5DD9C1</span></div>
+    <div class="column is-3"><div class="notification has-background-green"><br></div><span>green</span><br>**Emerald**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#5bcc72</span></div>
+    <div class="column is-3"><div class="notification has-background-yellow"><br></div><span>yellow</span><br>**Casablanca**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#ffc15e</span></div>
+    <div class="column is-3"><div class="notification has-background-orange"><br></div><span>orange</span><br>**Carrot Orange**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#FF9505</span></div>
     <div class="column is-12"></div>
-    <div class="column is-3"><div class="notification has-background-white" style="box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);"><br></div><span>white</span><br>**name**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#FFFFFF</span></div>
-    <div class="column is-3"><div class="notification has-background-white-bis"><br></div><span>white-bis</span><br>**name**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#F9F8FC</span></div>
-    <div class="column is-3"><div class="notification has-background-white-ter"><br></div><span>white-ter</span><br>**name**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#F6F5FA</span></div>
-    <div class="column is-3"><div class="notification has-background-grey-lighter"><br></div><span>grey-lighter</span><br>**name**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#E9E8EC</span></div>
+    <div class="column is-3"><div class="notification has-background-pink"><br></div><span>pink</span><br>**Fuchsia Pink**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#cc5bb5</span></div>
+    <div class="column is-3"><div class="notification has-background-light"><br></div><span>name</span><br>** **<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#000000</span></div>
+    <div class="column is-3"><div class="notification has-background-light"><br></div><span>name</span><br>** **<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#000000</span></div>
+    <div class="column is-3"><div class="notification has-background-light"><br></div><span>name</span><br>** **<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#000000</span></div>
+    <div class="column is-12"></div>
+    <div class="column is-3"><div class="notification has-background-white" style="box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);"><br></div><span>white</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#FFFFFF</span></div>
+    <div class="column is-3"><div class="notification has-background-white-bis"><br></div><span>white-bis</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#F9F8FC</span></div>
+    <div class="column is-3"><div class="notification has-background-white-ter"><br></div><span>white-ter</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#F6F5FA</span></div>
+    <div class="column is-3"><div class="notification has-background-grey-lighter"><br></div><span>grey-lighter</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#E9E8EC</span></div>
     <div class="column is-12"></div>    
-    <div class="column is-3"><div class="notification has-background-grey-light"><br></div><span>grey-light</span><br>**name**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#DAD9DF</span></div>
-    <div class="column is-3"><div class="notification has-background-grey"><br></div><span>grey</span><br>**name**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#CBC9D3</span></div>
-    <div class="column is-3"><div class="notification has-background-grey-dark"><br></div><span>grey-dark</span><br>**name**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#474259</span></div>
-    <div class="column is-3"><div class="notification has-background-grey-darker"><br></div><span>grey-darker</span><br>**name**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#363244</span></div>
+    <div class="column is-3"><div class="notification has-background-grey-light"><br></div><span>grey-light</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#DAD9DF</span></div>
+    <div class="column is-3"><div class="notification has-background-grey"><br></div><span>grey</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#CBC9D3</span></div>
+    <div class="column is-3"><div class="notification has-background-grey-dark"><br></div><span>grey-dark</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#474259</span></div>
+    <div class="column is-3"><div class="notification has-background-grey-darker"><br></div><span>grey-darker</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#363244</span></div>
     <div class="column is-12"><br></div>
-    <div class="column is-3"><div class="notification has-background-black-ter"><br></div><span>black-ter</span><br>**name**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#302D3D</span></div>
-    <div class="column is-3"><div class="notification has-background-black-bis"><br></div><span>black-bis</span><br>**name**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#25222F</span></div>
-    <div class="column is-3"><div class="notification has-background-black"><br></div><span>black</span><br>**name**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#15141B</span></div>
+    <div class="column is-3"><div class="notification has-background-black-ter"><br></div><span>black-ter</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#302D3D</span></div>
+    <div class="column is-3"><div class="notification has-background-black-bis"><br></div><span>black-bis</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#25222F</span></div>
+    <div class="column is-3"><div class="notification has-background-black"><br></div><span>black</span><br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#15141B</span></div>
 </div>
@@ -45,0 +50,0 @@

docs/doc-columns.md

@@ -1,2 +0,2 @@
-<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold"> Layout</h6><h1 class="title is-1 has-text-weight-bold">Columns</h1>
+<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Components</h6><h1 class="title is-1 has-text-weight-bold">Columns</h1>
 <p class="subtitle is-5">
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Columns</span> are used for creating page layouts by structuring your content horizontally. Biings DS uses a responsive fluid system that automatically scales up to 12 columns.

docs/doc-divider.md

@@ -1,2 +0,2 @@
-<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold"> Layout</h6><h1 class="title is-1 has-text-weight-bold">Divider</h1>
+<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Components</h6><h1 class="title is-1 has-text-weight-bold">Divider</h1>
 <p class="subtitle is-5">
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Divider</span> is a visual helper for grouping related content together. It is used to define thematic changes in a layout.

docs/doc-dropdown.md

@@ -1,2 +0,2 @@
-<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Components</h6><h1 class="title is-1">Dropdown</h1>
+<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1">Dropdown</h1>
 <p class="subtitle is-5">
@@ -3,0 +3,0 @@ The <span class="has-text-weight-semibold">dropdown</span> allow users to choose from a list of different actions or choices.

docs/doc-icons.md

@@ -1,2 +0,2 @@
-<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Style</h6><h1 class="title is-1 has-text-weight-bold">Iconography</h1>
+<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Foundation</h6><h1 class="title is-1 has-text-weight-bold">Iconography</h1>
 <p class="subtitle is-5">
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Iconography</span> uses symbols to represent an object or an action visually. They should be used sparingly to provide clarity and reduce cognitive load.

docs/doc-panel.md

@@ -1,2 +0,2 @@
-<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Components</h6><h1 class="title is-1 has-text-weight-bold">Panel</h1>
+<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Panel</h1>
 <p class="subtitle is-5">A <span class="has-text-weight-semibold">panel</span> shows content divided into section. Panels can also allow the user to expand and collapse each section (javascript required).</p>
@@ -3,0 +3,0 @@

docs/doc-typo.md

@@ -1,2 +0,2 @@
-<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Style</h6><h1 class="title is-1 has-text-weight-bold">Typography</h1>
+<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Foundation</h6><h1 class="title is-1 has-text-weight-bold">Typography</h1>
 <p class="subtitle is-5">
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Typography</span> is used to create clear hierarchies to guide users through the product and experience. It is the core structure of any well designed interface.

docs/start.md

@@ -15,4 +15,4 @@ <h1 class="title is-2">Biings <span class="has-text-weight-light">Design System</span></h1>
             <div class="media-content">
-                <a href="#/doc-color" class="title is-3 is-link is-relaxed has-text-weight-light">Style</a><br>
-                <p>Guidance on usage and application for basic design elements.</p>
+                <a href="#/doc-color" class="title is-3 is-link is-relaxed has-text-weight-light">Colors</a><br>
+                <p>Color brings a design to life.</p>
             </div>
@@ -37,3 +37,3 @@ </div>
                 <a href="#/doc-button" class="title is-3 is-link is-relaxed has-text-weight-light">Components</a><br>
-                <p>Guidance on usage for app design elements.</p>
+                <p>Guidance on usage for app design building blocks.</p>
             </div>
@@ -40,0 +40,0 @@ </div>

package.json

 {
   "name": "biings-ds",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Biings Design System",
@@ -8,5 +8,5 @@ "main": "build/bds.css",
     "sass": "node_modules/node-sass/bin/node-sass --include-path node_modules src/styles/bulma/bulma.sass src/styles/bulma/bulma.css",
-    "postcssdoc": "npm run sass && postcss src/styles/bds.css --config src/styles/postcss.config.js -o docs/bds.css",
-    "postcss": "postcss src/styles/bds.css --config src/styles/postcss.config.js -o build/bds.css --map",
+    "postcss": "postcss src/styles/bds.css --config src/styles/postcss.config.js -o build/bds.css",
     "styles": "npm run sass && npm run postcss",
+    "stylesdoc": "npm run sass && postcss src/styles/bds.css --config src/styles/postcss.config.js -o docs/bds.css",
     "icons": "grunt",
@@ -13,0 +13,0 @@ "build": "npm run styles && npm run icons"

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

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

Improved metrics

Total package byte prevSize

10271109

increased by0.18%

Number of package files

127

increased by2.42%

Lines of code

6127

increased by8.83%

No dependency changes