biings-ds - npm Package Compare versions

Comparing version 1.1.4 to 1.1.5

docs/color.md

@@ -11,5 +11,5 @@ <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>
 <div class="columns is-multiline">
-    <div class="column is-3"><div class="notification has-background-primary"><br></div><span>**primary** / Violet</span><br><span class="subtitle is-6 has-text-monospace">#715EB8</span></div>
-    <div class="column is-3"><div class="notification has-background-light"><br></div><span>**light**</span><br><span class="subtitle is-6 has-text-monospace">#F9F8FC</span></div>
-    <div class="column is-3"><div class="notification has-background-dark"><br></div><span>**dark**</span><br><span class="subtitle is-6 has-text-monospace">#403D4B</span></div>
+    <div class="column is-3"><div class="notification has-background-primary"><br></div><span>**primary** / Violet</span><br><span class="has-text-grey-dark is-monospace">#715EB8</span></div>
+    <div class="column is-3"><div class="notification has-background-light"><br></div><span>**light**</span><br><span class="has-text-grey-dark is-monospace">#F9F8FC</span></div>
+    <div class="column is-3"><div class="notification has-background-dark"><br></div><span>**dark**</span><br><span class="has-text-grey-dark is-monospace">#403D4B</span></div>
 </div>
@@ -24,15 +24,15 @@
 <div class="columns is-multiline">
-    <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-monospace">#F6F5FA</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-monospace">#F9F8FC</span></div>
-    <div class="column is-3"><div class="notification has-background-white"><br></div><span>**white**</span><br><span class="subtitle is-6 has-text-monospace">#FFFFFF</span></div>
+    <div class="column is-3"><div class="notification has-background-white-ter"><br></div><span>**white-ter**</span><br><span class="has-text-grey-dark is-monospace">#F6F5FA</span></div>
+    <div class="column is-3"><div class="notification has-background-white-bis"><br></div><span>**white-bis**</span><br><span class="has-text-grey-dark is-monospace">#F9F8FC</span></div>
+    <div class="column is-3"><div class="notification has-background-white"><br></div><span>**white**</span><br><span class="has-text-grey-dark is-monospace">#FFFFFF</span></div>
     <div class="column is-12"></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-monospace">#8B85A0</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-monospace">#B4B0C2</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-monospace">#D3D1DB</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-monospace">#EDECF0</span></div> 
+    <div class="column is-3"><div class="notification has-background-grey-dark"><br></div><span>**grey-dark**</span><br><span class="has-text-grey-dark is-monospace">#8B85A0</span></div>
+    <div class="column is-3"><div class="notification has-background-grey"><br></div><span>**grey**</span><br><span class="has-text-grey-dark is-monospace">#B4B0C2</span></div>
+    <div class="column is-3"><div class="notification has-background-grey-light"><br></div><span>**grey-light**</span><br><span class="has-text-grey-dark is-monospace">#D3D1DB</span></div>
+    <div class="column is-3"><div class="notification has-background-grey-lighter"><br></div><span>**grey-lighter**</span><br><span class="has-text-grey-dark is-monospace">#EDECF0</span></div> 
     <div class="column is-12"></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-monospace">#15141B</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-monospace">#302D3D</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-monospace">#403D4B</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-monospace">#6D6881</span></div>
+    <div class="column is-3"><div class="notification has-background-black"><br></div><span>**black**</span><br><span class="has-text-grey-dark is-monospace">#15141B</span></div>
+    <div class="column is-3"><div class="notification has-background-black-bis"><br></div><span>**black-bis**</span><br><span class="has-text-grey-dark is-monospace">#302D3D</span></div>
+    <div class="column is-3"><div class="notification has-background-black-ter"><br></div><span>**black-ter**</span><br><span class="has-text-grey-dark is-monospace">#403D4B</span></div>
+    <div class="column is-3"><div class="notification has-background-grey-darker"><br></div><span>**grey-darker**</span><br><span class="has-text-grey-dark is-monospace">#6D6881</span></div>
 </div>
@@ -47,49 +47,65 @@
 <div class="columns is-multiline">
-    <div class="column is-3"><div class="notification has-background-cyan-dark"><br></div><span>**cyan-dark**</span><br><span class="subtitle is-6 has-text-monospace">#5A90A8</span></div>
-    <div class="column is-3"><div class="notification has-background-cyan"><br></div><span>**cyan** / Viking</span><br><span class="subtitle is-6 has-text-monospace">#78C0E0</span></div>
-    <div class="column is-3"><div class="notification has-background-cyan-light"><br></div><span>**cyan-light**</span><br><span class="subtitle is-6 has-text-monospace">#A1D3E9</span></div>
-    <div class="column is-3"><div class="notification has-background-cyan-lighter"><br></div><span>**cyan-lighter**</span><br><span class="subtitle is-6 has-text-monospace">#C9E6F3</span></div>
+    <div class="column is-3"><div class="notification has-background-cyan-dark"><br></div><span>**cyan-dark**</span><br><span class="has-text-grey-dark is-monospace">#5A90A8</span></div>
+    <div class="column is-3"><div class="notification has-background-cyan"><br></div><span>**cyan** / Viking</span><br><span class="has-text-grey-dark is-monospace">#78C0E0</span></div>
+    <div class="column is-3"><div class="notification has-background-cyan-light"><br></div><span>**cyan-light**</span><br><span class="has-text-grey-dark is-monospace">#A1D3E9</span></div>
+    <div class="column is-3"><div class="notification has-background-cyan-lighter"><br></div><span>**cyan-lighter**</span><br><span class="has-text-grey-dark is-monospace">#C9E6F3</span></div>
     <div class="column is-12"></div>
-    <div class="column is-3"><div class="notification has-background-blue-dark"><br></div><span>**blue-dark**</span><br><span class="subtitle is-6 has-text-monospace">#445C97</span></div>
-    <div class="column is-3"><div class="notification has-background-blue"><br></div><span>**blue** / Indigo</span><br><span class="subtitle is-6 has-text-monospace">#5A7BC9</span></div>
-    <div class="column is-3"><div class="notification has-background-blue-light"><br></div><span>**blue-light**</span><br><span class="subtitle is-6 has-text-monospace">#8CA3D9</span></div>
-    <div class="column is-3"><div class="notification has-background-blue-lighter"><br></div><span>**blue-lighter**</span><br><span class="subtitle is-6 has-text-monospace">#BDCAE9</span></div>
+    <div class="column is-3"><div class="notification has-background-blue-dark"><br></div><span>**blue-dark**</span><br><span class="has-text-grey-dark is-monospace">#445C97</span></div>
+    <div class="column is-3"><div class="notification has-background-blue"><br></div><span>**blue** / Indigo</span><br><span class="has-text-grey-dark is-monospace">#5A7BC9</span></div>
+    <div class="column is-3"><div class="notification has-background-blue-light"><br></div><span>**blue-light**</span><br><span class="has-text-grey-dark is-monospace">#8CA3D9</span></div>
+    <div class="column is-3"><div class="notification has-background-blue-lighter"><br></div><span>**blue-lighter**</span><br><span class="has-text-grey-dark is-monospace">#BDCAE9</span></div>
     <div class="column is-12"></div>
-    <div class="column is-3"><div class="notification has-background-purple-dark"><br></div><span>**purple-dark**</span><br><span class="subtitle is-6 has-text-monospace">#564499</span></div>
-    <div class="column is-3"><div class="notification has-background-purple"><br></div><span>**purple** / Marguerite</span><br><span class="subtitle is-6 has-text-monospace">#735BCC</span></div>
-    <div class="column is-3"><div class="notification has-background-purple-light"><br></div><span>**purple-light**</span><br><span class="subtitle is-6 has-text-monospace">#9D8CDB</span></div>
-    <div class="column is-3"><div class="notification has-background-purple-lighter"><br></div><span>**purple-lighter**</span><br><span class="subtitle is-6 has-text-monospace">#C7BDEB</span></div>
+    <div class="column is-3"><div class="notification has-background-purple-dark"><br></div><span>**purple-dark**</span><br><span class="has-text-grey-dark is-monospace">#564499</span></div>
+    <div class="column is-3"><div class="notification has-background-purple"><br></div><span>**purple** / Marguerite</span><br><span class="has-text-grey-dark is-monospace">#735BCC</span></div>
+    <div class="column is-3"><div class="notification has-background-purple-light"><br></div><span>**purple-light**</span><br><span class="has-text-grey-dark is-monospace">#9D8CDB</span></div>
+    <div class="column is-3"><div class="notification has-background-purple-lighter"><br></div><span>**purple-lighter**</span><br><span class="has-text-grey-dark is-monospace">#C7BDEB</span></div>
     <div class="column is-12"></div>
-    <div class="column is-3"><div class="notification has-background-pink-dark"><br></div><span>**pink-dark**</span><br><span class="subtitle is-6 has-text-monospace">#9D468B</span></div>
-    <div class="column is-3"><div class="notification has-background-pink"><br></div><span>**pink** / Fuchsia</span><br><span class="subtitle is-6 has-text-monospace">#CC5BB5</span></div>
-    <div class="column is-3"><div class="notification has-background-pink-light"><br></div><span>**pink-light**</span><br><span class="subtitle is-6 has-text-monospace">#DB8CCB</span></div>
-    <div class="column is-3"><div class="notification has-background-pink-lighter"><br></div><span>**pink-lighter**</span><br><span class="subtitle is-6 has-text-monospace">#EBBDE1</span></div>
+    <div class="column is-3"><div class="notification has-background-pink-dark"><br></div><span>**pink-dark**</span><br><span class="has-text-grey-dark is-monospace">#9D468B</span></div>
+    <div class="column is-3"><div class="notification has-background-pink"><br></div><span>**pink** / Fuchsia</span><br><span class="has-text-grey-dark is-monospace">#CC5BB5</span></div>
+    <div class="column is-3"><div class="notification has-background-pink-light"><br></div><span>**pink-light**</span><br><span class="has-text-grey-dark is-monospace">#DB8CCB</span></div>
+    <div class="column is-3"><div class="notification has-background-pink-lighter"><br></div><span>**pink-lighter**</span><br><span class="has-text-grey-dark is-monospace">#EBBDE1</span></div>
     <div class="column is-12"></div>
-    <div class="column is-3"><div class="notification has-background-red-dark"><br></div><span>**red-dark**</span><br><span class="subtitle is-6 has-text-monospace">#BF4E56</span></div>
-    <div class="column is-3"><div class="notification has-background-red"><br></div><span>**red** / Froly</span><br><span class="subtitle is-6 has-text-monospace">#EF626C</span></div>
-    <div class="column is-3"><div class="notification has-background-red-light"><br></div><span>**red-light**</span><br><span class="subtitle is-6 has-text-monospace">#F49198</span></div>
-    <div class="column is-3"><div class="notification has-background-red-lighter"><br></div><span>**red-lighter**</span><br><span class="subtitle is-6 has-text-monospace">#F9C0C4</span></div>
+    <div class="column is-3"><div class="notification has-background-red-dark"><br></div><span>**red-dark**</span><br><span class="has-text-grey-dark is-monospace">#BF4E56</span></div>
+    <div class="column is-3"><div class="notification has-background-red"><br></div><span>**red** / Froly</span><br><span class="has-text-grey-dark is-monospace">#EF626C</span></div>
+    <div class="column is-3"><div class="notification has-background-red-light"><br></div><span>**red-light**</span><br><span class="has-text-grey-dark is-monospace">#F49198</span></div>
+    <div class="column is-3"><div class="notification has-background-red-lighter"><br></div><span>**red-lighter**</span><br><span class="has-text-grey-dark is-monospace">#F9C0C4</span></div>
     <div class="column is-12"></div>
-    <div class="column is-3"><div class="notification has-background-orange-dark"><br></div><span>**orange-dark**</span><br><span class="subtitle is-6 has-text-monospace">#D97F04</span></div>
-    <div class="column is-3"><div class="notification has-background-orange"><br></div><span>**orange** / Carrot</span><br><span class="subtitle is-6 has-text-monospace">#FF9505</span></div>
-    <div class="column is-3"><div class="notification has-background-orange-light"><br></div><span>**orange-light**</span><br><span class="subtitle is-6 has-text-monospace">#FFB550</span></div>
-    <div class="column is-3"><div class="notification has-background-orange-lighter"><br></div><span>**orange-lighter**</span><br><span class="subtitle is-6 has-text-monospace">#FFD59B</span></div>
+    <div class="column is-3"><div class="notification has-background-orange-dark"><br></div><span>**orange-dark**</span><br><span class="has-text-grey-dark is-monospace">#D97F04</span></div>
+    <div class="column is-3"><div class="notification has-background-orange"><br></div><span>**orange** / Carrot</span><br><span class="has-text-grey-dark is-monospace">#FF9505</span></div>
+    <div class="column is-3"><div class="notification has-background-orange-light"><br></div><span>**orange-light**</span><br><span class="has-text-grey-dark is-monospace">#FFB550</span></div>
+    <div class="column is-3"><div class="notification has-background-orange-lighter"><br></div><span>**orange-lighter**</span><br><span class="has-text-grey-dark is-monospace">#FFD59B</span></div>
     <div class="column is-12"></div>
-    <div class="column is-3"><div class="notification has-background-yellow-dark"><br></div><span>**yellow-dark**</span><br><span class="subtitle is-6 has-text-monospace">#DEA244</span></div>
-    <div class="column is-3"><div class="notification has-background-yellow"><br></div><span>**yellow** / Casablanca</span><br><span class="subtitle is-6 has-text-monospace">#FFC15E</span></div>
-    <div class="column is-3"><div class="notification has-background-yellow-light"><br></div><span>**yellow-light**</span><br><span class="subtitle is-6 has-text-monospace">#FFD48E</span></div>
-    <div class="column is-3"><div class="notification has-background-yellow-lighter"><br></div><span>**yellow-lighter**</span><br><span class="subtitle is-6 has-text-monospace">#FFE6BF</span></div>
+    <div class="column is-3"><div class="notification has-background-yellow-dark"><br></div><span>**yellow-dark**</span><br><span class="has-text-grey-dark is-monospace">#DEA244</span></div>
+    <div class="column is-3"><div class="notification has-background-yellow"><br></div><span>**yellow** / Casablanca</span><br><span class="has-text-grey-dark is-monospace">#FFC15E</span></div>
+    <div class="column is-3"><div class="notification has-background-yellow-light"><br></div><span>**yellow-light**</span><br><span class="has-text-grey-dark is-monospace">#FFD48E</span></div>
+    <div class="column is-3"><div class="notification has-background-yellow-lighter"><br></div><span>**yellow-lighter**</span><br><span class="has-text-grey-dark is-monospace">#FFE6BF</span></div>
     <div class="column is-12"></div>
-    <div class="column is-3"><div class="notification has-background-turquoise-dark"><br></div><span>**turquoise-dark**</span><br><span class="subtitle is-6 has-text-monospace">#46A391</span></div>
-    <div class="column is-3"><div class="notification has-background-turquoise"><br></div><span>**turquoise** / Bermuda</span><br><span class="subtitle is-6 has-text-monospace">#5DD9C1</span></div>
-    <div class="column is-3"><div class="notification has-background-turquoise-light"><br></div><span>**turquoise-light**</span><br><span class="subtitle is-6 has-text-monospace">#8EE4D4</span></div>
-    <div class="column is-3"><div class="notification has-background-turquoise-lighter"><br></div><span>**turquoise-lighter**</span><br><span class="subtitle is-6 has-text-monospace">#BEF0E6</span></div>
+    <div class="column is-3"><div class="notification has-background-turquoise-dark"><br></div><span>**turquoise-dark**</span><br><span class="has-text-grey-dark is-monospace">#46A391</span></div>
+    <div class="column is-3"><div class="notification has-background-turquoise"><br></div><span>**turquoise** / Bermuda</span><br><span class="has-text-grey-dark is-monospace">#5DD9C1</span></div>
+    <div class="column is-3"><div class="notification has-background-turquoise-light"><br></div><span>**turquoise-light**</span><br><span class="has-text-grey-dark is-monospace">#8EE4D4</span></div>
+    <div class="column is-3"><div class="notification has-background-turquoise-lighter"><br></div><span>**turquoise-lighter**</span><br><span class="has-text-grey-dark is-monospace">#BEF0E6</span></div>
     <div class="column is-12"></div>
-    <div class="column is-3"><div class="notification has-background-green-dark"><br></div><span>**green-dark**</span><br><span class="subtitle is-6 has-text-monospace">#449956</span></div>
-    <div class="column is-3"><div class="notification has-background-green"><br></div><span>**green** / Emerald</span><br><span class="subtitle is-6 has-text-monospace">#5BCC72</span></div>
-    <div class="column is-3"><div class="notification has-background-green-light"><br></div><span>**green-light**</span><br><span class="subtitle is-6 has-text-monospace">#8CDB9C</span></div>
-    <div class="column is-3"><div class="notification has-background-green-lighter"><br></div><span>**green-lighter**</span><br><span class="subtitle is-6 has-text-monospace">#BDEBC7</span></div>
+    <div class="column is-3"><div class="notification has-background-green-dark"><br></div><span>**green-dark**</span><br><span class="has-text-grey-dark is-monospace">#449956</span></div>
+    <div class="column is-3"><div class="notification has-background-green"><br></div><span>**green** / Emerald</span><br><span class="has-text-grey-dark is-monospace">#5BCC72</span></div>
+    <div class="column is-3"><div class="notification has-background-green-light"><br></div><span>**green-light**</span><br><span class="has-text-grey-dark is-monospace is-size-7">#8CDB9C</span></div>
+    <div class="column is-3"><div class="notification has-background-green-lighter"><br></div><span>**green-lighter**</span><br><span class="has-text-grey-dark is-monospace is-size-7">#BDEBC7</span></div>
 </div>
 
+<hr class="is-large is-visible">
 
+<h2 class="title is-4">Gradients</h2>
+
+<hr class="is-invisible is-small">
+
+<div class="columns is-multiline">
+    <div class="column is-12"><div class="notification has-background-gradient-1"><br></div></div>
+    <div class="column is-12">**gradient–1**<span class="is-pulled-right is-size-7 has-text-grey-dark"><span class="is-monospace">Primary</span> &nbsp;→&nbsp; <span class="is-monospace">Pink</span></span></div>
+    <div class="column is-12"></div>
+    <div class="column is-12"><div class="notification has-background-gradient-2"><br></div></div>
+    <div class="column is-12">**gradient–2** <span class="is-pulled-right is-size-7 has-text-grey-dark"><span class="is-monospace">Cyan</span> &nbsp;→&nbsp; <span class="is-monospace">Turquoise</span></span></div>
+    <div class="column is-12"></div>
+    <div class="column is-12"><div class="notification has-background-gradient-3"><br></div></div>
+    <div class="column is-12">**gradient–3** <span class="is-pulled-right is-size-7 has-text-grey-dark"><span class="is-monospace">Red</span> &nbsp;→&nbsp; <span class="is-monospace">Yellow</span></span></div>
+</div>
+
 <hr class="is-large is-visible">
@@ -109,22 +125,8 @@
 <tbody>
-    <tr><td>Text</td><td>`has-text-[color]`</td></tr>
-    <tr><td>Icon</td><td>`has-fill-[color]`</td></tr>
-    <tr><td>divs</td><td>`has-background-[color]`</td></tr>
+    <tr><td>Background</td><td>`has-background-[color]`</td></tr>
+    <tr><td>Text <sup class="has-text-cyan">1</sup></td><td>`has-text-[color]`</td></tr>
+    <tr><td>Icon <sup class="has-text-cyan">1</sup></td><td>`has-fill-[color]`</td></tr>
 </tbody>
 </table>
 
-<hr class="is-large is-visible">
-
-<h2 class="title is-4">Gradients</h2>
-
-<hr class="is-invisible is-small">
-
-<div class="columns is-multiline is-gapless">
-    <div class="column is-12"><div class="notification has-gradient-1"><br></div></div>
-    <div class="column is-12"><br>**Gradient–1**<br><span class="subtitle is-6 has-text-monospace">#915DBB</span> &nbsp;→&nbsp; <span class="subtitle is-6 has-text-monospace">#626CB7</span></div>
-</div>
-
-    .has-gradient-1
-    {
-        background-image: linear-gradient(-90deg, #626CB7, #915DBB);
-    }
+?> <span class="has-text-cyan">**1** :</span> &nbsp;*does not work with gradients.*

docs/layout.md

 <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Components</h6><h1 class="title is-1 has-text-weight-bold">Layout</h1>
 <p class="subtitle is-5">
-    Used only within a Biings app, <span class="has-text-weight-semibold">Layout</span> is the page structure in which content and components live.
+    Used only within the Biings desktop app, <span class="has-text-weight-semibold">Layout</span> is the page structure in which content and components live.
 </p>
@@ -5,0 +5,0 @@

package.json

 {
   "name": "biings-ds",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Biings Design System",
@@ -5,0 +5,0 @@ "main": "build/bds.css",

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

10624703

increased by0.02%

Lines of code

6352

increased by0.51%

No dependency changes