Merge pull request #98 from sippy-platform/0.13

Mellow CSS 0.13
sippy-platform · Aug 18, 2022 · b195170 · b195170
2 parents 726a716 + a4fb1f2
commit b195170
Show file tree

Hide file tree

Showing 45 changed files with 914 additions and 1,588 deletions.
diff --git a/hugo/assets/css/main.css b/hugo/assets/css/main.css
diff --git a/hugo/assets/scss/main.scss b/hugo/assets/scss/main.scss
@@ -76,7 +76,7 @@
 .docs-footer {
   grid-area: footer;
   border-top: 1px solid var(--grey-300);
-  background-color: var(--grey-50);
+  background-color: $system;
 }
 
 .docs-page {

diff --git a/hugo/content/atoms/colors.md b/hugo/content/atoms/colors.md
@@ -54,7 +54,7 @@ Many of the components that use color will support the usage of color classes to
   </div>
   <div class="color blue">
     <h5>Blue</h5>
-    <div class="label label-plated">#0068d8</div>
+    <div class="label label-plated">#007bff</div>
     <div class="color-swatch"></div>
   </div>
   <div class="color indigo">
@@ -89,7 +89,7 @@ Many of the components that use color will support the usage of color classes to
   </div>
   <div class="color grey">
     <h5>Grey</h5>
-    <div class="label label-plated">#6b707a</div>
+    <div class="label label-plated">#616a7a</div>
     <div class="color-swatch"></div>
   </div>
 </div>
@@ -104,7 +104,7 @@ By default, `accent` will behave the same as `blue`.
 <div class="grid grid-2 grid-sm-4">
   <div class="color accent">
     <h5>Accent</h5>
-    <div class="label label-plated">#0068d8</div>
+    <div class="label label-plated">#007bff</div>
     <div class="color-swatch"></div>
   </div>
 </div>
@@ -132,45 +132,29 @@ $colors: (
   "pink": $pink,
   "rose": $rose,
   "brown": $brown,
-  "grey": $grey
+  "grey": $grey,
+  "accent": $accent
 ) !default;
 {{</example>}}
 
 A color map is made out of a color palette from `50` to `900`, with `200a`, `400a`, and `text`.
 
 {{<example show_preview="false" lang="scss">}}
 @each $name, $color in $colors {
-  .#{$name} {
-    --color-50: #{ light-dark(tint($color, 96%), shade($color, 80%)) };
-    --color-100: #{ light-dark(tint($color, 92%), shade($color, 74%)) };
-    --color-200: #{ light-dark(tint($color, 87%), shade($color, 67%)) };
-    --color-300: #{ light-dark(tint($color, 80%), shade($color, 63%)) };
-    --color-400: #{ light-dark(tint($color, 70%), shade($color, 52%)) };
-    --color-500: #{ light-dark(tint($color, 28%), shade($color, 26%)) };
-    --color-600: #{ $color };
-    --color-700: #{ light-dark(shade($color, 7%), tint($color, 7%)) };
-    --color-800: #{ light-dark(shade($color, 22%), tint($color, 20%)) };
-    --color-900: #{ light-dark(shade($color, 70%), tint($color, 87%)) };
-    --color-200a: #{ rgba($color, .1) };
-    --color-400a: #{ rgba($color, .3) };
-    --color-text: #{ color-contrast($color) };
-  }
-}
-
-.accent {
-  --color-50: #{ light-dark(tint($accent, 96%), shade($accent, 80%)) };
-  --color-100: #{ light-dark(tint($accent, 92%), shade($accent, 74%)) };
-  --color-200: #{ light-dark(tint($accent, 87%), shade($accent, 67%)) };
-  --color-300: #{ light-dark(tint($accent, 80%), shade($accent, 63%)) };
-  --color-400: #{ light-dark(tint($accent, 70%), shade($accent, 52%)) };
-  --color-500: #{ light-dark(tint($accent, 28%), shade($accent, 26%)) };
-  --color-600: #{ $accent };
-  --color-700: #{ light-dark(shade($accent, 7%), tint($accent, 7%)) };
-  --color-800: #{ light-dark(shade($accent, 22%), tint($accent, 20%)) };
-  --color-900: #{ light-dark(shade($accent, 70%), tint($accent, 87%)) };
-  --color-200a: #{ rgba($accent, .1) };
-  --color-400a: #{ rgba($accent, .3) };
-  --color-text: #{ color-contrast($accent) };
+  --#{$name}-50: #{ light-dark(tint($color, 96%), shade($color, 74%)) };
+  --#{$name}-100: #{ light-dark(tint($color, 92%), shade($color, 67%)) };
+  --#{$name}-200: #{ light-dark(tint($color, 87%), shade($color, 63%)) };
+  --#{$name}-300: #{ light-dark(tint($color, 80%), shade($color, 52%)) };
+  --#{$name}-400: #{ light-dark(tint($color, 70%), shade($color, 26%)) };
+  --#{$name}-500: #{ light-dark(tint($color, 28%), $color) };
+  --#{$name}-600: #{ light-dark($color, tint($color, 26%)) };
+  --#{$name}-700: #{ light-dark(shade($color, 7%), tint($color, 48%)) };
+  --#{$name}-800: #{ light-dark(shade($color, 22%), tint($color, 68%)) };
+  --#{$name}-900: #{ light-dark(shade($color, 70%), tint($color, 88%)) };
+  --#{$name}-50a: #{ rgba($color, .05) };
+  --#{$name}-200a: #{ rgba($color, .15) };
+  --#{$name}-400a: #{ rgba($color, .3) };
+  --#{$name}-text: #{ light-dark(color-contrast($color), color-contrast(tint($color, 26%))) };
 }
 {{</example>}}
 

diff --git a/hugo/content/components/bottom-bar.md b/hugo/content/components/bottom-bar.md
@@ -23,7 +23,7 @@ The bottom navigation is a great component for app-like navigation.
   </a>
   <a class="bottom-bar-item" aria-current="page">
     <i class="vi vi-ellipsis bottom-bar-item-icon"></i>
-    <span class="bottom-bar-item-label">This is a very long label, does it wrap or...?</span>
+    <span class="bottom-bar-item-label">This long label will be truncated with ellipsis</span>
   </a>
 </nav>
 {{</example>}}
@@ -47,7 +47,7 @@ You can change the color of the active item with the color classes.
   </a>
   <a class="bottom-bar-item" aria-current="page">
     <i class="vi vi-ellipsis bottom-bar-item-icon"></i>
-    <span class="bottom-bar-item-label">This is a very long label, does it wrap or...?</span>
+    <span class="bottom-bar-item-label">This long label will be truncated with ellipsis</span>
   </a>
 </nav>
 {{</example>}}
diff --git a/hugo/content/components/card.md b/hugo/content/components/card.md
@@ -109,8 +109,8 @@ Mellow includes modifier classes for images at the top and bottom of the card.
 <div class="card mb-3">
   <svg class="card-img-top" width="100%" height="150px" xmlns="http://www.w3.org/2000/svg" role="img" preserveAspectRatio="xMidYMid slice" focusable="false">
     <rect width="100%" height="100%" fill="#e6f0fb" />
-    <text x="32px" y="48px" fill="#0068d8" font-size="18" font-weight="bold">Image</text>
-    <text x="32px" y="80px" fill="#0068d8" font-size="14">Hello image</text>
+    <text x="32px" y="48px" fill="#007bff" font-size="18" font-weight="bold">Image</text>
+    <text x="32px" y="80px" fill="#007bff" font-size="14">Hello image</text>
   </svg>
 
   <div class="card-body">
@@ -120,8 +120,8 @@ Mellow includes modifier classes for images at the top and bottom of the card.
 <div class="card mb-3">
   <svg class="card-img" width="100%" height="150px" xmlns="http://www.w3.org/2000/svg" role="img" preserveAspectRatio="xMidYMid slice" focusable="false">
     <rect width="100%" height="100%" fill="#e6f0fb" />
-    <text x="32px" y="48px" fill="#0068d8" font-size="18" font-weight="bold">Image</text>
-    <text x="32px" y="80px" fill="#0068d8" font-size="14">Hello image</text>
+    <text x="32px" y="48px" fill="#007bff" font-size="18" font-weight="bold">Image</text>
+    <text x="32px" y="80px" fill="#007bff" font-size="14">Hello image</text>
   </svg>
 </div>
 <div class="card">
@@ -130,8 +130,8 @@ Mellow includes modifier classes for images at the top and bottom of the card.
   </div>
   <svg class="card-img-bottom" width="100%" height="150px" xmlns="http://www.w3.org/2000/svg" role="img" preserveAspectRatio="xMidYMid slice" focusable="false">
     <rect width="100%" height="100%" fill="#e6f0fb" />
-    <text x="32px" y="48px" fill="#0068d8" font-size="18" font-weight="bold">Image</text>
-    <text x="32px" y="80px" fill="#0068d8" font-size="14">Hello image</text>
+    <text x="32px" y="48px" fill="#007bff" font-size="18" font-weight="bold">Image</text>
+    <text x="32px" y="80px" fill="#007bff" font-size="14">Hello image</text>
   </svg>
 </div>
 {{</example>}}
@@ -221,8 +221,8 @@ By applying a `flex-row` class to a card, you can turn the cards content horizon
 <div class="card flex-row mb-3">
   <svg class="border-radius-start w-25" width="100%" height="150px" xmlns="http://www.w3.org/2000/svg" role="img" preserveAspectRatio="xMidYMid slice" focusable="false">
     <rect width="100%" height="100%" fill="#e6f0fb" />
-    <text x="32px" y="48px" fill="#0068d8" font-size="18" font-weight="bold">Image</text>
-    <text x="32px" y="80px" fill="#0068d8" font-size="14">Hello image</text>
+    <text x="32px" y="48px" fill="#007bff" font-size="18" font-weight="bold">Image</text>
+    <text x="32px" y="80px" fill="#007bff" font-size="14">Hello image</text>
   </svg>
 
   <div class="card-body">

diff --git a/hugo/content/components/dialog.md b/hugo/content/components/dialog.md
@@ -21,7 +21,7 @@ Mellow's dialog uses the `dialog` element, this native HTML element is supported
     <button value="cancel" class="btn btn-danger"><i class="vi vi-xmark"></i> Close</button>
   </form>
 </dialog>
-<button class="btn btn-default" onclick="window.exampleDialog.showModal();">Open dialog</button>
+<button class="btn btn-default" type="button" onclick="window.exampleDialog.showModal();">Open dialog</button>
 {{</example>}}
 
 ### `show()` and `showModal()`
@@ -40,15 +40,15 @@ The `showModal()` method does everything the `show()` method does, but also resp
     <p>This dialog can be closed with the <kb>esc</kb> button.</p>
   </div>
 </dialog>
-<button class="btn btn-default" onclick="window.showDialog.showModal();">Use show()</button>
-<button class="btn btn-default" onclick="window.showDialog.showModal();">Use showModal()</button>
+<button class="btn btn-default" type="button" onclick="window.showDialog.show();">Use show()</button>
+<button class="btn btn-default" type="button" onclick="window.showDialog.showModal();">Use showModal()</button>
 {{</example>}}
 
 ## Sizes
 {{<example>}}
-<button class="btn btn-default" onclick="window.smallDialog.showModal();">Open Small</button>
-<button class="btn btn-default" onclick="window.largeDialog.showModal();">Open Large</button>
-<button class="btn btn-default" onclick="window.extraLargeDialog.showModal();">Open Extra Large</button>
+<button class="btn btn-default" type="button" onclick="window.smallDialog.showModal();">Open Small</button>
+<button class="btn btn-default" type="button" onclick="window.largeDialog.showModal();">Open Large</button>
+<button class="btn btn-default" type="button" onclick="window.extraLargeDialog.showModal();">Open Extra Large</button>
 
 <dialog class="dialog dialog-sm" id="smallDialog">
   <form method="dialog" class="dialog-header">

diff --git a/hugo/content/components/dropdown.md b/hugo/content/components/dropdown.md
@@ -25,7 +25,7 @@ Using the `btn` class is entirely optional. You can also just leave the styling
 
 {{<example>}}
 <details class="dropdown">
-  <summary class="btn btn-default">
+  <summary>
     Profile
   </summary>
 
@@ -249,8 +249,8 @@ Note that any parent color class will affect the menu. If you use the `btn-color
 To revert to the default look, add the `accent` color class to the `dropdown-menu` or pick any color you want.
 
 {{<example>}}
-<details class="dropdown">
-  <summary class="btn btn-color red">
+<details class="dropdown red">
+  <summary class="btn btn-color">
     Profile <i class="vi vi-angle-down"></i>
   </summary>
 
@@ -259,8 +259,8 @@ To revert to the default look, add the `accent` color class to the `dropdown-men
     <a class="dropdown-item" href="#">Settings</a>
   </div>
 </details>
-<details class="dropdown">
-  <summary class="btn btn-color red">
+<details class="dropdown red">
+  <summary class="btn btn-color">
     Accented <i class="vi vi-angle-down"></i>
   </summary>
 

diff --git a/hugo/content/components/nav.md b/hugo/content/components/nav.md
@@ -29,7 +29,7 @@ A basic navigation bar can contain a brand, and 2 lists of links.
 </nav>
 {{</example>}}
 
-### Dark
+### Dark theme
 Swap out the `nav-light` and `bg-light` classes for `nav-dark` and `bg-dark` to get a dark navigation bar.
 
 {{<example>}}
@@ -55,6 +55,32 @@ Swap out the `nav-light` and `bg-light` classes for `nav-dark` and `bg-dark` to
 </nav>
 {{</example>}}
 
+### System theme
+Swap out the `nav-light` and `bg-light` classes for `nav-system` and `bg-system` to get a navigation bar that follows the system theme.
+
+{{<example>}}
+<nav class="nav nav-system bg-system">
+  <div class="container">
+    <ul class="nav-bar me-auto">
+      <li class="nav-item">
+        <a class="nav-link active" aria-current="page" href="#">Home</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Watch</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Products</a>
+      </li>
+    </ul>
+    <ul class="nav-bar">
+      <li class="nav-item">
+        <a class="nav-link" href="#">About</a>
+      </li>
+    </ul>
+  </div>
+</nav>
+{{</example>}}
+
 ### Colored
 Or use any of the other `bg-*` utility classes. You can match the `nav-light` or `nav-dark` classes with whatever fits best for the color you opt for.
 
@@ -141,7 +167,7 @@ You can put a button in the `nav-item`.
 Instead of just a button, an entire form can be used as well:
 
 {{<example>}}
-<nav class="nav nav-light bg-light">
+<nav class="nav nav-system bg-system">
   <div class="container">
     <a class="nav-brand" href="#">Mellow</a>
     <ul class="nav-bar me-auto">

diff --git a/hugo/content/components/pagination.md b/hugo/content/components/pagination.md
@@ -90,7 +90,7 @@ Aligning the pagination can be done through its parent.
     <li class="page-item"><a class="page-link" href="#">3</a></li>
     <li class="page-item"><a class="page-link" href="#" aria-label="Next"><i class="vi vi-angle-right"></i></a></li>
   </ul>
-</nav> 
+</nav>
 <nav class="d-flex justify-content-end" aria-label="Pagination navigation" role="navigation">
   <ul class="pagination">
     <li class="page-item"><a class="page-link" href="#" aria-label="Previous"><i class="vi vi-angle-left"></i></a></li>

diff --git a/hugo/content/components/pivot.md b/hugo/content/components/pivot.md
@@ -85,17 +85,3 @@ You can also alter the color of only 1 pivot item.
   <a class="pivot-link disabled">Disabled</a>
 </nav>
 {{</example>}}
-
-## Tabs
-{{<example>}}
-<nav class="pivot pivot" id="myTab" role="tablist">
-  <button class="pivot-link active" id="home-tab" data-mellow-toggle="tab" data-mellow-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
-  <button class="pivot-link" id="profile-tab" data-mellow-toggle="tab" data-mellow-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
-  <button class="pivot-link" id="contact-tab" data-mellow-toggle="tab" data-mellow-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
-</nav>
-<div class="tab-box mt-3" id="tabbox">
-  <div class="tab-content show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
-  <div class="tab-content" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
-  <div class="tab-content" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
-</div>
-{{</example>}}
diff --git a/hugo/content/forms/range.md b/hugo/content/forms/range.md
@@ -25,7 +25,7 @@ Like many other components, forms respond to color classes.
 
 {{<example>}}
 <form class="pink">
-  <label for="rangeInput" class="input-label">Range example</label>
-  <input type="range" class="input-range" id="rangeInput">
+  <label for="pinkRangeInput" class="input-label">Range example</label>
+  <input type="range" class="input-range" id="pinkRangeInput">
 </form>
 {{</example>}}
diff --git a/js/index.js b/js/index.js
@@ -1,2 +1 @@
 export { default as OffCanvas } from './src/offCanvas';
-export { default as Tab } from './src/tab';
diff --git a/js/src/baseComponent.js b/js/src/baseComponent.js
@@ -1,5 +1,8 @@
 /**
- * Based on Boostrap v5.1.3 - tab.js - MIT
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.2.0): base-component.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
  */
 
 import Data from './dom/data';
@@ -11,7 +14,7 @@ import Config from './util/config';
  * Constants
  */
 
-const VERSION = '0.1.0';
+const VERSION = '5.2.0';
 
 /**
  * Class definition
@@ -59,7 +62,10 @@ class BaseComponent extends Config {
   }
 
   static getOrCreateInstance(element, config = {}) {
-    return this.getInstance(element) || new this(element, typeof config === 'object' ? config : null);
+    return (
+      this.getInstance(element) ||
+      new this(element, typeof config === 'object' ? config : null)
+    );
   }
 
   static get VERSION() {
@@ -73,6 +79,10 @@ class BaseComponent extends Config {
   static get EVENT_KEY() {
     return `.${this.DATA_KEY}`;
   }
+
+  static eventName(name) {
+    return `${name}${this.EVENT_KEY}`;
+  }
 }
 
 export default BaseComponent;
diff --git a/js/src/dom/data.js b/js/src/dom/data.js
@@ -1,5 +1,8 @@
 /**
- * Based on Boostrap v5.1.3 - tab.js - MIT
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.2.0): dom/data.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
  */
 
 /**
@@ -20,7 +23,11 @@ export default {
     // can be removed later when multiple key/instances are fine to be used
     if (!instanceMap.has(key) && instanceMap.size !== 0) {
       // eslint-disable-next-line no-console
-      console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(instanceMap.keys())[0]}.`);
+      console.error(
+        `Mellow CSS doesn't allow more than one instance per element. Bound instance: ${
+          Array.from(instanceMap.keys())[0]
+        }.`
+      );
       return;
     }
 
@@ -48,5 +55,5 @@ export default {
     if (instanceMap.size === 0) {
       elementMap.delete(element);
     }
-  }
+  },
 };