Merge pull request #213 from bugy/color-variables

materializecss · Oct 25, 2021 · 84a4547 · 84a4547
2 parents 360f549 + 8643039
commit 84a4547
Show file tree

Hide file tree

Showing 13 changed files with 160 additions and 115 deletions.
diff --git a/js/timepicker.js b/js/timepicker.js
@@ -211,7 +211,7 @@
 
       // Append popover to input by default
       const optEl = this.options.container;
-      let containerEl = (optEl instanceof HTMLElement?optEl:document.querySelector(optEl));
+      let containerEl = optEl instanceof HTMLElement ? optEl : document.querySelector(optEl);
       if (this.options.container && !!containerEl) {
         this.$modalEl.appendTo(containerEl);
       } else {
@@ -238,8 +238,8 @@
       this.vibrate = navigator.vibrate
         ? 'vibrate'
         : navigator.webkitVibrate
-          ? 'webkitVibrate'
-          : null;
+        ? 'webkitVibrate'
+        : null;
 
       this._canvas = this.modalEl.querySelector('.timepicker-canvas');
       this.plate = this.modalEl.querySelector('.timepicker-plate');
@@ -341,7 +341,7 @@
       if (this.options.twelveHour) {
         for (let i = 1; i < 13; i += 1) {
           let tick = $tick.clone();
-          let radian = i / 6 * Math.PI;
+          let radian = (i / 6) * Math.PI;
           let radius = this.options.outerRadius;
           tick.css({
             left:
@@ -356,7 +356,7 @@
       } else {
         for (let i = 0; i < 24; i += 1) {
           let tick = $tick.clone();
-          let radian = i / 6 * Math.PI;
+          let radian = (i / 6) * Math.PI;
           let inner = i > 0 && i < 13;
           let radius = inner ? this.options.innerRadius : this.options.outerRadius;
           tick.css({
@@ -377,7 +377,7 @@
       // Minutes view
       for (let i = 0; i < 60; i += 5) {
         let tick = $tick.clone();
-        let radian = i / 30 * Math.PI;
+        let radian = (i / 30) * Math.PI;
         tick.css({
           left:
             this.options.dialRadius +

diff --git a/sass/_style.scss b/sass/_style.scss
@@ -30,10 +30,13 @@ nav {
   // background-color: color("materialize-red", "lighten-2");
 
   a {
-    color: rgba(0,0,0,.87);
+    color: $font-color-main;
   }
-  ul li a:hover, ul li.active {
-    background-color: color("materialize-red", "lighten-1");
+  ul li a:hover {
+    background-color: $primary-color-when-hovered-solid;
+  }
+  ul li.active {
+    background-color: $primary-color-when-focused-solid;
   }
 }
 
@@ -42,7 +45,7 @@ td, th {
 }
 
 .header {
-  color: color("materialize-red", "lighten-2");
+  color: $primary-color;
   font-weight: 300;
 }
 
@@ -182,7 +185,7 @@ a.sidenav-trigger.top-nav {
   top: 28px;
   float: none;
   margin-left: 1.5rem;
-  color: color("materialize-red", "lighten-3");
+  color: $primary-color;
   font-size: 36px;
   z-index: 2;
 
@@ -308,9 +311,9 @@ a.sidenav-trigger.top-nav {
 #download-button,
 #upgrade-button {
   &:hover {
-    background-color: lighten(color("materialize-red", "base"), 30%);
+    background-color: $primary-color-when-hovered-solid;
   }
-  background-color: color("materialize-red", "lighten-2");
+  background-color: $primary-color;
   width: 260px;
   height: 70px;
   margin: 4px;
@@ -325,7 +328,7 @@ a.sidenav-trigger.top-nav {
 
   i {
     margin: 40px 0;
-    color: color("materialize-red", "lighten-2");
+    color: $primary-color;
     font-size: 7rem;
     display: block;
   }
@@ -343,14 +346,14 @@ a.sidenav-trigger.top-nav {
   background-color: #FFF;
   position: relative;
   a {
-      color: color("materialize-red", "lighten-2");
+      color: $primary-color;
     }
   li {
     &:hover {
-      background-color: color("materialize-red", "lighten-5");
+      background-color: $primary-color-when-hovered-solid;
     }
     &.active {
-      background-color: color("materialize-red", "lighten-5");
+      background-color: $primary-color-when-focused-solid;
     }
   }
   .container {
@@ -390,11 +393,11 @@ a.sidenav-trigger.top-nav {
   height: 300px;
 }
 #site-layout-example-right {
-  background-color: color("teal", "lighten-1");
+  background-color: $secondary-color;
   height: 300px;
 }
 #site-layout-example-top {
-  background-color: color("red", "lighten-2");
+  background-color: $primary-color;
   height: 42px;
 }
 
@@ -566,7 +569,7 @@ thead {
 
 // Shadow demo styling
 .shadow-demo {
-  background-color: color("teal", "lighten-1");
+  background-color: $secondary-color;
   width: 100px;
   height: 100px;
   margin: 20px auto;
@@ -594,18 +597,8 @@ thead {
 ul.table-of-contents {
   margin-top: 0;
   padding-top: 48px;
-
-  a {
-    &.active {
-      color: rgba(0,0,0,.8);
-    }
-    color: rgba(0,0,0,.55);
-    font-weight: 400;
-  }
 }
 
-
-
 // Prism Styling
 code, pre {
   position: relative;

diff --git a/sass/components/_badges.scss b/sass/components/_badges.scss
@@ -7,7 +7,7 @@ span.badge {
   font-size: 1rem;
   line-height: $badge-height;
   height: $badge-height;
-  color: color('grey', 'darken-1');
+  color: $badge-color;
   float: right;
   box-sizing: border-box;
 

diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss
@@ -53,14 +53,6 @@
   }
 }
 
-// Shared focus button style
-.btn,
-.btn-floating {
-  &:focus {
-    background-color: darken($button-raised-background, 10%);
-  }
-}
-
 // Raised Button
 .btn {
   text-decoration: none;
@@ -75,6 +67,10 @@
     background-color: $button-raised-background-hover;
     @extend .z-depth-1-half;
   }
+  &:focus {
+    background-color: $button-raised-background-focus;
+    @extend .z-depth-1-half;
+  }
 }
 
 // Floating button
@@ -83,6 +79,10 @@
     background-color: $button-floating-background-hover;
     @extend .z-depth-1-half;
   }
+  &:focus {
+    background-color: $button-floating-background-focus;
+    @extend .z-depth-1-half;
+  }
   &:before {
     border-radius: 0;
   }

diff --git a/sass/components/_dropdown.scss b/sass/components/_dropdown.scss
@@ -68,7 +68,7 @@
 
 body.keyboard-focused {
   .dropdown-content li:focus {
-    background-color: darken($dropdown-hover-bg-color, 8%);
+    background-color: $dropdown-focus-bg-color;
   }
 }
 
@@ -82,4 +82,4 @@ body.keyboard-focused {
 
 .dropdown-trigger {
   cursor: pointer;
-}
+}
diff --git a/sass/components/_global.scss b/sass/components/_global.scss
@@ -114,7 +114,7 @@ a {
 .divider {
   height: 1px;
   overflow: hidden;
-  background-color: color("grey", "lighten-2");
+  background-color: $divider-color;
 }
 
 
@@ -528,7 +528,7 @@ td, th{
     height: 4px;
     display: block;
     width: 100%;
-    background-color: lighten($progress-bar-color, 40%);
+    background-color: $progress-bar-track-color;
     border-radius: 2px;
     margin: $element-top-margin 0 $element-bottom-margin 0;
     overflow: hidden;

diff --git a/sass/components/_sidenav.scss b/sass/components/_sidenav.scss
@@ -33,33 +33,31 @@
     float: none;
     line-height: $sidenav-line-height;
 
-    &.active { background-color: rgba(0,0,0,.05); }
+    &.active {
+      background-color: rgba(0, 0, 0, .05);
+    }
   }
 
   li > a {
-    color: $sidenav-font-color;
     display: block;
     font-size: $sidenav-font-size;
     font-weight: 500;
     height: $sidenav-item-height;
     line-height: $sidenav-line-height;
     padding: 0 ($sidenav-padding * 2);
 
-    &:hover { background-color: rgba(0,0,0,.05);}
+    &:not(.btn):not(.btn-flat):not(.btn-large):not(.btn-floating) {
+      color: $sidenav-font-color;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, .05);
+      }
+    }
 
     &.btn, &.btn-large, &.btn-flat, &.btn-floating {
       margin: 10px 15px;
     }
 
-    &.btn,
-    &.btn-large,
-    &.btn-floating { color: $button-raised-color; }
-    &.btn-flat { color: $button-flat-color; }
-
-    &.btn:hover,
-    &.btn-large:hover { background-color: lighten($button-raised-background, 5%); }
-    &.btn-floating:hover { background-color: $button-raised-background; }
-
     & > i,
     & > [class^="mdi-"], li > a > [class*="mdi-"],
     & > i.material-icons {
@@ -68,7 +66,7 @@
       line-height: $sidenav-line-height;
       margin: 0 ($sidenav-padding * 2) 0 0;
       width: $sidenav-item-height * 0.5;
-      color: rgba(0,0,0,.54);
+      color: rgba(0, 0, 0, .54);
     }
   }
 
@@ -84,7 +82,7 @@
 
     cursor: initial;
     pointer-events: none;
-    color: rgba(0,0,0,.54);
+    color: rgba(0, 0, 0, .54);
     font-size: $sidenav-font-size;
     font-weight: 500;
     line-height: $sidenav-line-height;
@@ -96,7 +94,10 @@
     margin-bottom: $sidenav-padding * 0.5;
 
     & > a {
-      &:hover { background-color: transparent; }
+      &:hover {
+        background-color: transparent;
+      }
+
       height: auto;
       padding: 0;
     }
@@ -192,10 +193,12 @@
 .sidenav .collapsible-body > ul:not(.collapsible) > li.active,
 .sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active {
   background-color: $primary-color;
+
   a {
     color: $sidenav-bg-color;
   }
 }
+
 .sidenav .collapsible-body {
   padding: 0;
 }
@@ -208,7 +211,7 @@
   right: 0;
   opacity: 0;
   height: 120vh;
-  background-color: rgba(0,0,0,.5);
+  background-color: rgba(0, 0, 0, .5);
   z-index: 997;
   display: none;
 }
diff --git a/sass/components/_table_of_contents.scss b/sass/components/_table_of_contents.scss
@@ -9,22 +9,23 @@
   li {
     padding: 2px 0;
   }
+
   a {
     display: inline-block;
-    font-weight: 300;
-    color: #757575;
+    font-weight: 400;
+    color: $font-color-medium;
     padding-left: 16px;
     height: 1.5rem;
     line-height: 1.5rem;
-    letter-spacing: .4;
-    display: inline-block;
 
     &:hover {
-      color: lighten(#757575, 20%);
+      color: $font-color-main;
       padding-left: 15px;
       border-left: 1px solid $primary-color;
     }
+
     &.active {
+      color: $font-color-main;
       font-weight: 500;
       padding-left: 14px;
       border-left: 2px solid $primary-color;