@qrsln/lootstrap 22.2.7-beta.0 → 22.3.2-beta.0

package/scss/Architecture/Components/_progress.scss

@@ -3,15 +3,16 @@
 // TS: Theme Support
 // ===========================================================================
 
-@import "../_theme-colors";
+$Customized: false;
+@import "../_color-scheme";
 
 .Progress {
   display: flex;
   position: relative;
   height: 1rem;
 
-  color: $fg-Lightest;
-  background-color: $bg-Lightest;
+  color: $Fg-lightest;
+  background-color: $Bg-lightest;
 
   border: $Border;
   box-shadow: $Shadow-inner;
@@ -26,8 +27,8 @@
     text-align: center;
     white-space: nowrap;
 
-    color: $fg-Active;
-    background-color: $bg-Active;
+    color: $Fg-accent;
+    background-color: $Bg-accent;
 
     transition: width .6s ease;
   }

package/scss/Architecture/Components/_rating.scss

@@ -5,7 +5,8 @@
 // https://base64.guru/converter/encode/image/svg
 // ===========================================================================
 
-@import "../_theme-colors";
+$Customized: false;
+@import "../_color-scheme";
 
 //$svg-Heart: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 0 52 50'%3E%3Cg %3E%3Cpath d='M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543 c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503 c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z'/%3E%3C/g%3E%3C/svg%3E%0A");
 //$svg-Star: url("data:image/svg+xml, %3Csvg viewBox='0 0 190 190' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,10 40,180 190,60 10,60 160,180' /%3E%3C/svg%3E%0A");
@@ -29,12 +30,12 @@ $bg-Heart: hsl(354, 66%, 54%);
     $color: var(--#{$var-Prefix}rating-color);
 
     .Square-inner:not(.Rating-value) {
-      color: $fg-Surface;
-      background-color: $bg-Surface;
+      color: $Fg-surface;
+      background-color: $Bg-surface;
 
       &.IsFraction {
-        background: linear-gradient(to right, $bg-color 0%, $bg-Lightest 100%);
-        border-image: linear-gradient(to right, $bg-color 0%, $bg-Lightest 100%) 1;
+        background: linear-gradient(to right, $bg-color 0%, $Bg-lightest 100%);
+        border-image: linear-gradient(to right, $bg-color 0%, $Bg-lightest 100%) 1;
         color: $color;
       }
 
@@ -44,8 +45,8 @@ $bg-Heart: hsl(354, 66%, 54%);
         color: $color;
 
         &.IsFraction {
-          background: linear-gradient(to right, $bg-color 0%, $bg-Lightest 100%);
-          border-image: linear-gradient(to right, $bg-color 0%, $bg-Lightest 100%) 1;
+          background: linear-gradient(to right, $bg-color 0%, $Bg-lightest 100%);
+          border-image: linear-gradient(to right, $bg-color 0%, $Bg-lightest 100%) 1;
           color: $color;
         }
       }
@@ -56,28 +57,28 @@ $bg-Heart: hsl(354, 66%, 54%);
 .Rating-star {
   --#{$var-Prefix}rating-mask: #{$svg-Star};
   --#{$var-Prefix}rating-bg-color: #{$bg-Star};
-  --#{$var-Prefix}rating-color: #{$fg-Darkest};
+  --#{$var-Prefix}rating-color: #{$Fg-hue};
 }
 
 .Rating-heart {
   --#{$var-Prefix}rating-mask: #{$svg-Heart};
   --#{$var-Prefix}rating-bg-color: #{$bg-Heart};
-  --#{$var-Prefix}rating-color: #{$fg-Darkest};
+  --#{$var-Prefix}rating-color: #{$Fg-hue};
 }
 
 .Rating-text {
-  --#{$var-Prefix}rating-bg-color: #{$bg-Active};
-  --#{$var-Prefix}rating-color: #{$fg-Active};
+  --#{$var-Prefix}rating-bg-color: #{$Bg-accent};
+  --#{$var-Prefix}rating-color: #{$Fg-accent};
 
   .Square {
     .Square-inner:not(.Rating-value) {
       margin: 1px;
-      border: 4px solid $bg-Lightest;
+      border: 4px solid $Bg-lightest;
       //border: 4px solid $Border-color;
 
       //background-color: white;
-      color: $fg-Surface;
-      background-color: $bg-Surface;
+      color: $Fg-surface;
+      background-color: $Bg-surface;
     }
   }
 }

package/scss/Architecture/Components/_scrollbar.scss

@@ -3,24 +3,18 @@
 // TS: Theme Support
 // ===========================================================================
 
-@import "../_theme-colors";
+$Customized: false;
+@import "../_color-scheme";
 
 .Scrollbar {
-  $width: var(--scrollbar-width, .8rem);
-  $radius: var(--scrollbar-radius, .2rem);
+  scrollbar-gutter: stable;
 
-  &::-webkit-scrollbar {
-    border-radius: 0;
-    width: $width;
-    height: $width;
-  }
+  $width: var(--#{$var-Prefix}scrollbar-width, .8rem);
+  $radius: var(--#{$var-Prefix}scrollbar-radius, .2rem);
 
-  &::-webkit-scrollbar-thumb {
-    border-radius: $radius;
-    background-clip: padding-box;
-
-    background: $bg-Dark;
-    border: 1px solid $Border-color;
+  &::-webkit-scrollbar {
+    width: $width; /* Mostly for vertical scrollbars */
+    height: $width; /* Mostly for horizontal scrollbars */
   }
 
   &::-webkit-scrollbar-button {
@@ -33,30 +27,66 @@
     background-color: transparent;
   }
 
+  // This represents the base of the scrollbar. We can style it by adding background colors, shadows, border-radius, and borders.
   &::-webkit-scrollbar-track {
-    background: $bg-Lightest;
-    box-shadow: $Shadow-inner;
+    border-radius: $radius;
+    background: hsla($Bg-hue-hsl, 0.10);
+    border: 1px solid hsla($Bg-accent-hsl, 0.05);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: $radius;
+    background-clip: padding-box;
+
+    background: hsla($Bg-accent-hsl, 0.25);
+    border: 1px solid hsla($Bg-accent-hsl, 0.05);
   }
 
   &:hover {
-    &::-webkit-scrollbar-thumb {
-      background: $bg-Darkest;
-      //border: 1px solid $Border-color;
-      //box-shadow: $Shadow-inner;
+    &::-webkit-scrollbar-track {
+      box-shadow: $Shadow-inner;
     }
 
-    &::-webkit-scrollbar-track {
-      //box-shadow: $Shadow-inner;
+    &::-webkit-scrollbar-thumb {
+      background: hsla($Bg-accent-hsl, 0.40);
+      border: 1px solid hsla($Bg-accent-hsl, 0.50);
+
+      box-shadow: inset 0 0 6px hsla($Bg-accent-hsl, 0.3);
+
+      &:hover {
+        background: hsla($Bg-accent-hsl, 0.80);
+        border-color: hsla($Bg-accent-hsl, 0.90);
+      }
+
+      &:active {
+        background: $Bg-accent
+      }
     }
   }
 
-  //For Internet Explorer
-  //& {
-  //  scrollbar-face-color: $fg-Lightest;
-  //  scrollbar-track-color: $bg-Lightest;
-  //}
+  //// For Internet Explorer
+  & {
+    scrollbar-face-color: $Bg-accent;
+    scrollbar-track-color: $Bg-lightest;
+  }
 }
 
+// If you are into the PostCSS thing, there is a postcss-scrollbar plugin though.
+// The idea is that you write the standardized syntax and it makes the vendor prefixes versions to match.
+// Meaning you’re limited in styling choices to what the spec provides, but that’s probably a smart move long-term anyway.
+/*
+.Scrollbar-Test {
+
+  // It works in a way that lets us reserve the space in advance. The default value is auto, and the other value is stable.
+  scrollbar-gutter: stable;
+
+  // Two valid colors. The first applies to the thumb of the scrollbar, the second to the track.
+  //scrollbar-color: #6969dd #e0e0e0;
+  scrollbar-color: hsla($Bg-accent-hsl, 0.40) hsla($Bg-hue-hsl, 0.10);
+  scrollbar-width: thin;
+}
+*/
+
 /*
 ::-webkit-scrollbar — the entire scrollbar.
 ::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards).
@@ -76,7 +106,7 @@
 */
 
 .Scrollbar-rounded {
-  --scrollbar-radius: .6rem;
+  --#{$var-Prefix}scrollbar-radius: .6rem;
 }
 
 /*
@@ -85,7 +115,7 @@
 
 @each $key, $value in (2:1, 3:1.1) {
   .Scrollbar-#{$key} {
-    --scrollbar-width: #{$value}rem;
+    --#{$var-Prefix}scrollbar-width: #{$value}rem;
   }
 }
 

package/scss/Architecture/Components/_spinners.scss

@@ -35,7 +35,6 @@
   animation: 0.75s linear infinite grow;
 }
 
-
 /*
 // Spinner-vortex
 */

package/scss/Architecture/Components/_timeline.scss

@@ -3,15 +3,16 @@
 // TS: Theme Support
 // ===========================================================================
 
-@import "../_theme-colors";
+$Customized: false;
+@import "../_color-scheme";
 
 .Timeline {
   display: block;
   position: relative;
   overflow: visible;
 
-  color: $fg-Surface;
-  background-color: $bg-Surface;
+  color: $Fg-surface;
+  background-color: $Bg-surface;
 
   //border: $Border;
   box-shadow: $Shadow-inner;
@@ -61,8 +62,8 @@
         width: $badge-size;
         height: $badge-size;
 
-        color: $fg-Active;
-        background-color: $bg-Active;
+        color: $Fg-accent;
+        background-color: $Bg-accent;
 
         border-radius: 50%;
         box-shadow: $Shadow-inner;

package/scss/Architecture/Components/_timer.scss

@@ -3,7 +3,8 @@
 // TS: Theme Support
 // ===========================================================================
 
-@import "../_theme-colors";
+$Customized: false;
+@import "../_color-scheme";
 
 .Timer {
   display: flex;
@@ -11,8 +12,8 @@
   overflow: hidden;
   flex-wrap: wrap;
 
-  color: $fg-Surface;
-  background-color: $bg-Surface;
+  color: $Fg-surface;
+  background-color: $Bg-surface;
 
   border: $Border;
   box-shadow: $Shadow;
@@ -33,7 +34,7 @@
     display: flex;
     flex-basis: 100%;
     font-weight: bold;
-    color: $fg-Surface;
+    color: $Fg-surface;
 
     align-items: center;
     justify-content: center;

package/scss/Architecture/Components/_toasts.scss

@@ -3,8 +3,8 @@
 // ST: With Specific Theme
 // ===========================================================================
 
-$component-Name: $var-Prefix + 'toast-';
-@import "../_theme-customized";
+$Customized: 'toast-';
+@import "../_color-scheme";
 
 .Toast {
   display: block;
@@ -28,39 +28,39 @@ $component-Name: $var-Prefix + 'toast-';
 
   &.Toast-gradient {
     .Toast-header{
-      background: linear-gradient(180deg, $bg-Light 0%, $bg-Dark 35%, $bg-Darkest 100%); // vertical
+      background: linear-gradient(180deg, $Bg-lightest 0%, $Bg-lighter 35%, $Bg-hue 100%); // vertical
     }
     &.Toast-outline {
       .Toast-header{
-        background: linear-gradient(180deg, $bg-Surface 0%, $bg-Light 35%, $bg-Lightest 100%); // vertical
+        background: linear-gradient(180deg, $Bg-surface 0%, $Bg-lightest 35%, $Bg-lighter 100%); // vertical
       }
     }
   }
 
   &.Toast-outline {
-    border: 1px solid hsla($bg-Active-hsl, .5);
+    //border: 1px solid hsla($Bg-accent-hsl, .5);
 
     .Toast-header {
-      color: $fg-Surface;
-      background-color: $bg-Surface;
+      color: $Fg-lighter;
+      background-color: $Bg-lighter;
 
       .Toast-icon {
-        color: $bg-Active;
+        color: $Bg-accent;
       }
 
       .Toast-right {
         .Countdown {
-          color: $bg-Active;
-          background-color: $fg-Active;
+          color: $Fg-lightest;
+          background-color: $Bg-lightest;
 
-          border-color: hsla($bg-Active-hsl, .5);
+          //border-color: hsla($Bg-accent-hsl, .5);
         }
       }
     }
 
     .Toast-body {
-      color: black;
-      background-color: white;
+      color: $Fg-surface;
+      background-color: $Bg-surface;
     }
 
   }
@@ -71,8 +71,8 @@ $component-Name: $var-Prefix + 'toast-';
     padding: .3rem;
     align-items: center;
 
-    color: $fg-Darkest;
-    background-color: $bg-Darkest;
+    color: $Fg-hue;
+    background-color: $Bg-hue;
 
     //@include border-radius-Top($Component-border-radius);
 
@@ -81,7 +81,8 @@ $component-Name: $var-Prefix + 'toast-';
       font-size: medium;
       padding-right: .4rem;
 
-      color: $White;
+      color: $Bg-lightest;
+      filter: drop-shadow(0 0 hsla($Bg-accent-hsl, .5));
     }
 
     .Toast-right {
@@ -99,8 +100,8 @@ $component-Name: $var-Prefix + 'toast-';
         margin-right: 3px;
         top: 6px;
 
-        color: $fg-Dark;
-        background-color: $bg-Dark;
+        color: $Fg-lighter;
+        background-color: $Bg-lighter;
         border: 1px solid $Border-color;
 
       }
@@ -108,17 +109,17 @@ $component-Name: $var-Prefix + 'toast-';
   }
 
   .Toast-body {
-    color: $fg-Surface;
-    background-color: $bg-Surface;
+    color: $Fg-surface;
+    background-color: $Bg-surface;
 
     padding: .75rem;
   }
 
   .Progress {
-    background-color: $bg-Lightest;
+    background-color: $Bg-lightest;
 
     .Progress-bar {
-      background-color: $bg-Active;
+      background-color: $Bg-accent;
     }
   }
 }

package/scss/Architecture/Components/_tooltip.scss

@@ -2,8 +2,8 @@
 // Components - Tooltip
 // ===========================================================================
 
-$component-Name: $var-Prefix + 'caret-';
-@import "../_theme-customized";
+$Customized: 'caret-';
+@import "../_color-scheme";
 
 .Tooltip {
   position: absolute;
@@ -13,18 +13,18 @@ $component-Name: $var-Prefix + 'caret-';
 
   padding: .25rem .5rem;
 
-  color: $fg-Dark;
-  background-color: $bg-Dark;
+  color: $Fg-lighter;
+  background-color: $Bg-lighter;
 
-  border: 1px solid $bg-Darkest;
+  border: 1px solid $Bg-hue;
   box-shadow: $Shadow;
 
   &.Tooltip-outline {
-    color: $fg-Lightest;
-    background-color: $bg-Lightest;
+    color: $Fg-lightest;
+    background-color: $Bg-lightest;
 
-    //border: .125rem solid $bg-Darkest;
-    border: 1px solid $bg-Darkest;
+    //border: .125rem solid $Bg-hue;
+    border: 1px solid $Bg-hue;
   }
 
   &:before, &:after {
@@ -81,8 +81,8 @@ $component-Name: $var-Prefix + 'caret-';
 */
 
 // &:after is bg, &:before is border
-$caret-before-color: $bg-Darkest;
-$caret-after-color: $bg-Dark;
+$caret-before-color: $Bg-hue;
+$caret-after-color: $Bg-lighter;
 
 .Tooltip-t {
   &:after {

package/scss/Architecture/Components/_tree-view.scss

@@ -3,7 +3,8 @@
 // TS: Theme Support
 // ===========================================================================
 
-@import "../_theme-colors";
+$Customized: false;
+@import "../_color-scheme";
 
 // https://demos.telerik.com/kendo-ui/treeview/index
 
@@ -20,12 +21,12 @@
     &.TreeViewItem-single {
       .TreeView-leaf {
         &:hover {
-          color: $fg-Light;
-          background-color: $bg-Light;
+          color: $Fg-lighter;
+          background-color: $Bg-lighter;
 
           &.Active {
             .FaIcon {
-              color: $bg-Active;
+              color: $Bg-accent;
             }
           }
         }
@@ -45,13 +46,13 @@
     &.Disabled {
       cursor: not-allowed;
 
-      color: $fg-Muted;
-      background-color: $bg-Light;
+      color: $Fg-muted;
+      background-color: $Bg-lighter;
     }
 
     .TreeView-toggle {
       margin: 4px 4px 4px -18px;
-      color: $bg-Active;
+      color: $Bg-accent;
 
       svg {
         width: 14px !important;
@@ -79,19 +80,19 @@
       padding: 2px 6px;
 
       &.Active {
-        color: $fg-Active;
-        background-color: $bg-Active;
-        border-color: $bg-Active;
+        color: $Fg-accent;
+        background-color: $Bg-accent;
+        border-color: $Bg-accent;
         border-radius: .25rem;
 
         .FaIcon {
-          color: $fg-Active;
+          color: $Fg-accent;
         }
       }
 
       .FaIcon {
         margin-right: .25rem;
-        color: $bg-Active;
+        color: $Bg-accent;
       }
     }