version 4.5.3

CHANGELOG.md

@@ -15,7 +15,8 @@
 - **NEW** Material themes for **flatpickr** (which will probably become main Picker) and **Datatables.net**.
 - Improved Dialogs/modals on small devices.
 - Improved documentation dependencies initialization.
-- **Fixed** Form label color.
+- **Fixed** Form label color and caret color.
+- **Fixed** Character counter spacing and visibility (plugin).
 - Updated build dependencies.
 
 ## 4.5.2 - RC1

_data/nav.yml

@@ -86,6 +86,7 @@
     - title: Cards
     - title: Chips
     - title: Colors
+    - title: Dark theme
     - title: Data tables
     - title: Dialogs
     - title: Elevation and shadows

_includes/footer.html

@@ -16,8 +16,8 @@
   <script>
     $('[maxlength]').maxlength({
       alwaysShow: true,
-      warningClass: 'form-text text-muted',
-      limitReachedClass: 'form-text text-muted',
+      warningClass: 'form-text text-muted pr-3',
+      limitReachedClass: 'form-text text-muted pr-3',
       placement: 'bottom-right-inside'
     })
   </script>

_includes/page-jumbotron.html

@@ -1,5 +1,5 @@
 
-<div class="jumbotron jumbotron-fluid mb-5 px-lg-3 doc-jumbotron">
+<div class="jumbotron jumbotron-fluid px-lg-3 doc-jumbotron">
   <div class="container">
 
     {% if page.toc %}

assets/scss/material/_dark-theme.scss

@@ -1,13 +1,9 @@
 // Inspired by https://dev.to/dip15739/dark-mode-with-only-1-css-property-17fl
 // stylelint-disable selector-no-qualifying-type
 
-html[theme='dark-mode'] {
+html[data-theme='dark'] {
   filter: invert(1) hue-rotate(180deg);
 
-  body {
-    transition: color 300ms, background-color 300ms;
-  }
-
   body,
   label {
     font-weight: $font-weight-medium;
@@ -20,15 +16,15 @@ html[theme='dark-mode'] {
   }
 }
 
+body {
+  transition: color 300ms, background-color 300ms;
+}
+
 @media (prefers-color-scheme: dark) {
   html {
     filter: invert(1) hue-rotate(180deg);
   }
 
-  body {
-    transition: color 300ms, background-color 300ms;
-  }
-
   body,
   label {
     font-weight: $font-weight-medium;

assets/scss/material/_text-field.scss

@@ -12,6 +12,7 @@
   border-style: solid;
   border-width: 0 0 $textfield-border-width;
   box-shadow: none;
+  caret-color: selection-theme-color();
   color: $textfield-color;
   display: block;
   font-size: $textfield-font-size;
@@ -354,13 +355,14 @@ textarea {
     &::before {
       background: selection-theme-color();
       content: '';
-      height: 2 * $textfield-border-width;
+      height: $textfield-border-width * 2;
       position: absolute;
       bottom: 0;
       left: 0;
       transform: scaleX(0);
       transition: transform 0.18s $transition-timing-function-standard;
       width: 100%;
+      will-change: transform;
       z-index: 3;
     }
 

docs-assets/scss/docs.scss

@@ -5,6 +5,10 @@
 
 // Bootstrap doc CSS override
 
+.bd-content .alert p:last-of-type {
+  margin-bottom: 0;
+}
+
 .bd-callout {
   border: 0;
   border-left: $blockquote-border-width solid $blockquote-border-color;
@@ -312,7 +316,9 @@
   background-repeat: no-repeat;
   background-size: cover;
   color: $white-primary;
+  margin-bottom: 0;
   padding-top: ($toolbar-height * 2);
+  padding-bottom: 6rem;
 
   @include media-breakpoint-down(sm) {
     h1 {
@@ -385,6 +391,8 @@
 }
 
 .doc-main {
+  background-color: $white;
+
   @include media-breakpoint-up(lg) {
     .navdrawer-permanent-lg ~ & {
       margin-left: $navdrawer-width;

docs/4.5/material/dark-theme.md

@@ -0,0 +1,46 @@
+---
+layout: docs
+title: Dark theme
+description: A dark theme is a low-light UI that displays mostly dark surfaces.
+group: material
+darkmode: true
+---
+
+<div class="list-group my-2 my-lg-5">
+  <a href="https://material.io/design/color/dark-theme.html" target="_blank" class="list-group-item list-group-item-action d-flex font-weight-bold">
+    <span class="list-group-item-icon lgi-icon-md"></span>
+  Material Design guidelines: Dark theme</a>
+  <a href="#" target="_blank" class="list-group-item disabled d-flex font-weight-bold">
+      <span class="list-group-item-icon lgi-icon-mdc"></span>
+      Material Components for the web: Dark Theme (planned)</a>
+</div>
+
+A dark theme displays dark surfaces across the majority of a UI. It's designed to be a supplemental mode to a default (or light) theme.
+
+Material uses a very simple Dark theme for the moment, based on a `filter()` CSS effect.
+
+Dark mode is applied in 2 conditions:
+
+1. If users's browser is set to Dark mode preference using `@media (prefers-color-scheme: dark)` media query.
+2. If `data-theme="dark"` is added to the opening `html` tag like this: `<html lang="en" data-theme="dark">`.
+
+More improvements for the Dark mode will be added in next versions.
+
+## Live demo
+
+Only working on a standard light mode environment (doesn't work if browser is in dark mode).
+
+<div class="bd-example px-5">
+  <div class="custom-control custom-switch">
+    <input type="checkbox" class="custom-control-input" id="darkSwitch" checked>
+    <label class="custom-control-label" for="darkSwitch">Toggle Dark mode</label>
+  </div>
+  <script>
+    const Tag = document.documentElement
+    const Switch = document.getElementById("darkSwitch")
+    Tag.dataset.theme = 'dark'
+    Switch.addEventListener("click", () => {
+        Switch.checked ? Tag.dataset.theme = 'dark' : Tag.dataset.theme = ''
+    })
+  </script>
+</div>

docs/4.5/material/data-tables.md

@@ -5,7 +5,7 @@ description: Data tables display sets of data across rows and columns.
 group: material
 ---
 
-<div class="list-group mt-lg-5">
+<div class="list-group my-lg-5">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/content/tables/" target="_blank" class="list-group-item list-group-item-action d-flex list-group-item-two-line font-weight-bold">
       <span class="list-group-item-icon lgi-icon-bs"></span>
       <span class="list-group-item-text">

docs/4.5/material/pickers.md

@@ -19,6 +19,9 @@ Date pickers can be embedded into:
     <a href="https://material.io/components/pickers" target="_blank" class="list-group-item list-group-item-action d-flex font-weight-bold">
       <span class="list-group-item-icon lgi-icon-md"></span>
       Material Design guidelines: Pickers</a>
+    <a href="#" target="_blank" class="list-group-item disabled d-flex font-weight-bold">
+      <span class="list-group-item-icon lgi-icon-mdc"></span>
+      Material Components for the web: Date Picker (planned)</a>
     <a href="https://amsul.ca/pickadate.js/" target="_blank" class="list-group-item list-group-item-action d-flex font-weight-bold">
       <span class="list-group-item-icon lgi-icon-bs"></span>
       pickadate.js: Official documentation</a>

docs/4.5/material/text-fields.md

@@ -42,7 +42,7 @@ However limited to inputs placed in Bootstrap's `form-group` or `form-ripple` co
     <label for="demo1">Floating label</label>
     <input aria-describedby="demo1help" class="form-control" id="demo1" placeholder="Optional placeholder" type="text">
   </div>
-  <small id="demo1help" class="form-text">Helper message placed outside <code>.floating-label</code>.</small>
+  <small id="demo1help" class="form-text text-muted">Helper message placed outside <code>.floating-label</code></small>
 </div>
 {% endcapture %}
 {% include example.html content=example %}
@@ -65,7 +65,7 @@ Conditions for a good implementation
   <div class="form-group form-ripple-text">
     <label for="exampleInput1">Default form control</label>
     <input aria-describedby="exampleInput1Help" class="form-control" id="exampleInput1" placeholder="Placeholder" type="text">
-    <small id="exampleInput1Help" class="form-text">Some help text.</small>
+    <small id="exampleInput1Help" class="form-text text-muted">Helper message</small>
   </div>
   <div class="form-group form-ripple">
     <label for="exampleInput2">Date and time</label>
@@ -169,21 +169,21 @@ If you use a helper text : either place it outside of the `floating-label` conta
     <label for="exampleFloatingLabel1">Floating label</label>
     <input aria-describedby="exampleFloatingLabel1Help" class="form-control" id="exampleFloatingLabel1" placeholder="Optional placeholder" type="text">
   </div>
-  <small id="exampleFloatingLabel1Help" class="form-text">Helper text placed outside <code>.floating-label</code>.</small>
+  <small id="exampleFloatingLabel1Help" class="form-text text-muted">Helper text placed outside <code>.floating-label</code>.</small>
 </div>
 <div class="form-group">
   <div class="floating-label form-ripple-text">
     <label for="exampleFloatingLabelbis1">Floating label</label>
     <input aria-describedby="exampleFloatingLabelbis1Help" class="form-control" id="exampleFloatingLabelbis1" placeholder="Optional placeholder" type="text">
-    <small id="exampleFloatingLabelbis1Help" class="form-text">Helper text placed inside <code>.floating-label</code> with <code>form-ripple-text</code>.</small>
+    <small id="exampleFloatingLabelbis1Help" class="form-text text-muted">Helper text placed inside <code>.floating-label</code> with <code>form-ripple-text</code>.</small>
   </div>
 </div>
 <div class="form-group">
   <div class="floating-label">
     <label for="exampleFloatingLabel2">Date and time</label>
     <input aria-describedby="exampleFloatingLabel2Help" class="form-control" id="exampleFloatingLabel2" placeholder="Date and time" type="datetime-local">
   </div>
-  <small id="exampleFloatingLabel2Help" class="form-text">Help text placed outside <code>.floating-label</code>.</small>
+  <small id="exampleFloatingLabel2Help" class="form-text text-muted">Help text placed outside <code>.floating-label</code>.</small>
 </div>
 <div class="form-group">
   <div class="floating-label">
@@ -225,7 +225,7 @@ Change sizes using `.floating-label-lg` and `.floating-label-sm`.
   <div class="floating-label floating-label-lg form-ripple-text">
     <label for="exampleFloatingLabel6">Large</label>
     <input aria-describedby="exampleFloatingLabel6Help" class="form-control" id="exampleFloatingLabel6" placeholder="Optional placeholder" type="text">
-    <small id="exampleFloatingLabel6Help" class="form-text">Help text placed inside <code>.floating-label</code>.</small>
+    <small id="exampleFloatingLabel6Help" class="form-text text-muted">Help text placed inside <code>.floating-label</code>.</small>
   </div>
 </div>
 <div class="form-group">
@@ -239,7 +239,7 @@ Change sizes using `.floating-label-lg` and `.floating-label-sm`.
     <label for="exampleFloatingLabel8">Small</label>
     <input aria-describedby="exampleFloatingLabel8Help" class="form-control" id="exampleFloatingLabel8" placeholder="Optional placeholder" type="text">
   </div>
-  <small id="exampleFloatingLabel8Help" class="form-text">Help text placed outside <code>.floating-label</code>.</small>
+  <small id="exampleFloatingLabel8Help" class="form-text text-muted">Help text placed outside <code>.floating-label</code>.</small>
 </div>
 {% endcapture %}
 {% include example.html content=example %}
@@ -292,7 +292,7 @@ As for floating labels, if you use a helper text : either place it outside of th
   <div class="textfield-box form-ripple-text">
     <label class="mb-2" for="exampleTextfieldBox1">Text field box</label>
     <input aria-describedby="exampleTextfieldBox1Help" class="form-control" id="exampleTextfieldBox1" placeholder="Placeholder" type="text">
-    <small id="exampleTextfieldBox1Help" class="form-text">Helper text placed inside <code>.textfield-box</code>.</small>
+    <small id="exampleTextfieldBox1Help" class="form-text text-muted">Helper text placed inside <code>.textfield-box</code>.</small>
   </div>
 </div>
 <div class="form-group">
@@ -304,7 +304,7 @@ As for floating labels, if you use a helper text : either place it outside of th
       <option>3</option>
     </select>
   </div>
-  <small id="exampleTextfieldBox2Help" class="form-text">Help text placed outside <code>.textfield-box</code>.</small>
+  <small id="exampleTextfieldBox2Help" class="form-text text-muted">Help text placed outside <code>.textfield-box</code>.</small>
 </div>
 <div class="form-group">
   <div class="textfield-box">
@@ -370,7 +370,7 @@ Change sizes using `.textfield-box-lg` and `.textfield-box-sm`.
   <div class="textfield-box textfield-box-lg form-ripple-text">
     <label class="mb-2" for="exampleTextfieldBox9">Large</label>
     <input aria-describedby="exampleTextfieldBox9Help" class="form-control" id="exampleTextfieldBox9" placeholder="Large" type="text">
-    <small id="exampleTextfieldBox9Help" class="form-text">Help text placed inside <code>.textfield-box</code>.</small>
+    <small id="exampleTextfieldBox9Help" class="form-text text-muted">Help text placed inside <code>.textfield-box</code>.</small>
   </div>
 </div>
 <div class="form-group">
@@ -384,7 +384,7 @@ Change sizes using `.textfield-box-lg` and `.textfield-box-sm`.
   <div class="textfield-box textfield-box-sm">
     <input aria-describedby="exampleTextfieldBox11Help" class="form-control" id="exampleTextfieldBox11" placeholder="Small" type="text">
   </div>
-  <small id="exampleTextfieldBox11Help" class="form-text">Help text placed outside <code>.textfield-box</code>.</small>
+  <small id="exampleTextfieldBox11Help" class="form-text text-muted">Help text placed outside <code>.textfield-box</code>.</small>
 </div>
 {% endcapture %}
 {% include example.html content=example %}
@@ -444,7 +444,7 @@ Sizes can also be set by adding `.floating-label-lg/sm` classes.
   <div class="floating-label floating-label-lg textfield-box">
     <label for="exampleFloatingBox6">Large</label>
     <input aria-describedby="exampleFloatingBox6Help" class="form-control" id="exampleFloatingBox6" placeholder="Large" type="text">
-    <small id="exampleFloatingBox6Help" class="form-text">Help text placed inside <code>.floating-label</code>.</small>
+    <small id="exampleFloatingBox6Help" class="form-text text-muted">Help text placed inside <code>.floating-label</code>.</small>
   </div>
 </div>
 <div class="form-group">
@@ -458,7 +458,7 @@ Sizes can also be set by adding `.floating-label-lg/sm` classes.
     <label for="exampleFloatingBox8">Small</label>
     <input aria-describedby="exampleFloatingBox8Help" class="form-control" id="exampleFloatingBox8" placeholder="Small" type="text">
   </div>
-  <small id="exampleFloatingBox8Help" class="form-text">Help text placed outside <code>.floating-label</code>.</small>
+  <small id="exampleFloatingBox8Help" class="form-text text-muted">Help text placed outside <code>.floating-label</code>.</small>
 </div>
 {% endcapture %}
 {% include example.html content=example %}