@qrsln/lootstrap 22.2.2-beta.0 → 22.3.1-beta.0

package/scss/Architecture/Components/_nav.scss

@@ -2,7 +2,8 @@
 // Components - Nav
 // ===========================================================================
 
-@import "../_theme-colors";
+$Customized: false;
+@import "../_color-scheme";
 
 .Nav {
   display: flex;
@@ -23,19 +24,20 @@
 
   &:hover,
   &:focus {
-    color: $fg-Lightest;
-    background-color: $bg-Lightest;
+    color: $Fg-lightest;
+    background-color: $Bg-lightest;
   }
 
   &.Active {
-    color: $fg-Active;
-    background-color: $bg-Active;
+    color: $Fg-accent;
+    background-color: $Bg-accent;
+
     //box-shadow: $Shadow;
   }
 
   // Disabled state lightens text
   &.Disabled {
-    color: $fg-Muted;
+    color: $Fg-muted;
     pointer-events: none;
     cursor: default;
   }
@@ -60,7 +62,7 @@
     }
 
     &.Disabled {
-      color: $fg-Muted;
+      color: $Fg-muted;
       background-color: transparent;
       border-color: transparent;
     }
@@ -68,9 +70,9 @@
 
   .Nav-link.Active,
   .Nav-item.Show .Nav-link {
-    color: $fg-Surface;
-    background-color: $bg-Surface;
-    border-color: $Border-color $Border-color $bg-Surface;
+    color: $Fg-surface;
+    background-color: $Bg-surface;
+    border-color: $Border-color $Border-color $Bg-surface;
   }
 }
 
@@ -83,7 +85,7 @@
 
   .Nav-link.Active,
   .Show > .Nav-link {
-    color: $fg-Active;
-    background-color: $bg-Active;
+    color: $Fg-accent;
+    background-color: $Bg-accent;
   }
 }

package/scss/Architecture/Components/_pagination.scss

@@ -3,19 +3,25 @@
 // TS: Theme Support
 // ===========================================================================
 
-@import "../_theme-colors";
+$Customized: false;
+@import "../_color-scheme";
 
 .Pagination {
   display: flex;
   position: relative;
   overflow: hidden;
 
-  color: $fg-Surface;
-  background-color: $bg-Surface;
+  align-items: center;
+  justify-content: center;
+
+  color: $Fg-surface;
+  background-color: $Bg-surface;
 
   .Square {
     user-select: none; /* Standard */
 
+    max-width: 42px;
+    max-height: 42px;
     //color: $Component-fg-secondary;
     //background-color: $Component-bg-secondary;
 
@@ -28,25 +34,25 @@
       font-size: 1.3em;
     }
 
-    &:not(.disabled):not(.active) {
+    &:not(.Disabled):not(.Active) {
       cursor: pointer;
     }
 
-    &:hover:not(.active):not(.disabled) {
+    &:hover:not(.Active):not(.Disabled) {
       text-decoration: none;
       border-color: $Border-color;
 
-      color: $fg-Dark;
-      background-color: $bg-Dark;
+      color: $Fg-lighter;
+      background-color: $Bg-lighter;
     }
 
     &.Disabled {
-      color: $fg-Muted;
+      color: $Fg-muted;
     }
 
     &.Active {
-      color: $fg-Active;
-      background-color: $bg-Active;
+      color: $Fg-accent;
+      background-color: $Bg-accent;
 
       border-color: transparent;
 

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;
@@ -18,16 +18,61 @@ $component-Name: $var-Prefix + 'toast-';
   box-shadow: $Shadow;
 
   min-width: 200px;
+  //max-width: 600px;
   margin-bottom: .5rem;
 
+  align-items: center;
+
+  margin-right: auto !important;
+  margin-left: auto !important;
+
+  &.Toast-gradient {
+    .Toast-header{
+      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-lightest 35%, $Bg-lighter 100%); // vertical
+      }
+    }
+  }
+
+  &.Toast-outline {
+    //border: 1px solid hsla($Bg-accent-hsl, .5);
+
+    .Toast-header {
+      color: $Fg-lighter;
+      background-color: $Bg-lighter;
+
+      .Toast-icon {
+        color: $Bg-accent;
+      }
+
+      .Toast-right {
+        .Countdown {
+          color: $Fg-lightest;
+          background-color: $Bg-lightest;
+
+          //border-color: hsla($Bg-accent-hsl, .5);
+        }
+      }
+    }
+
+    .Toast-body {
+      color: $Fg-surface;
+      background-color: $Bg-surface;
+    }
+
+  }
+
   .Toast-header {
     display: flex;
     border-bottom: $Border;
-    padding: .4rem;
+    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);
 
@@ -35,31 +80,46 @@ $component-Name: $var-Prefix + 'toast-';
       display: flex;
       font-size: medium;
       padding-right: .4rem;
+
+      color: $Bg-lightest;
+      filter: drop-shadow(0 0 hsla($Bg-accent-hsl, .5));
     }
 
     .Toast-right {
       margin-left: auto;
       order: 2;
 
-      span:first-child, small:first-child {
+      .Countdown {
+        position: relative;
+        display: inline;
+
         vertical-align: top;
-        padding-right: .2rem;
+        font-size: 0.65em;
+
+        padding: 0 0.25rem;
+        margin-right: 3px;
+        top: 6px;
+
+        color: $Fg-lighter;
+        background-color: $Bg-lighter;
+        border: 1px solid $Border-color;
+
       }
     }
   }
 
   .Toast-body {
-    color: $fg-Surface;
-    background-color: $bg-Surface;
+    color: $Fg-surface;
+    background-color: $Bg-surface;
 
-    padding: 1rem;
+    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

@@ -0,0 +1,135 @@
+// ===========================================================================
+// Components - Tooltip
+// ===========================================================================
+
+$Customized: 'caret-';
+@import "../_color-scheme";
+
+.Tooltip {
+  position: absolute;
+  //position: relative;
+  display: flex;
+  z-index: 1000;
+
+  padding: .25rem .5rem;
+
+  color: $Fg-lighter;
+  background-color: $Bg-lighter;
+
+  border: 1px solid $Bg-hue;
+  box-shadow: $Shadow;
+
+  &.Tooltip-outline {
+    color: $Fg-lightest;
+    background-color: $Bg-lightest;
+
+    //border: .125rem solid $Bg-hue;
+    border: 1px solid $Bg-hue;
+  }
+
+  &:before, &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    border-style: solid;
+
+    width: 0;
+    height: 0;
+
+    z-index: 1;
+    clear: both;
+
+    // caret-size 1:  6px
+    border-width: 6px;
+  }
+}
+
+.Tooltip-rounded {
+  border-radius: $Border-radius;
+}
+
+/*
+// Caret directions
+*/
+
+.Tooltip-t, .Tooltip-b {
+  $caret-size: 6px; // caret-size 1:  6px
+
+  &:after {
+    left: calc(50% - #{$caret-size});
+  }
+
+  &:before {
+    left: calc(50% - #{$caret-size});
+  }
+}
+
+.Tooltip-r, .Tooltip-l {
+  $caret-size: 6px; // caret-size 1:  6px
+
+  &:after {
+    top: calc(50% - #{$caret-size});
+  }
+
+  &:before {
+    top: calc(50% - #{$caret-size});
+  }
+}
+
+/*
+// Caret-darker
+*/
+
+// &:after is bg, &:before is border
+$caret-before-color: $Bg-hue;
+$caret-after-color: $Bg-lighter;
+
+.Tooltip-t {
+  &:after {
+    bottom: 100%;
+    border-color: transparent transparent $caret-after-color transparent;
+  }
+
+  &:before {
+    bottom: calc(100% + 1px);
+    border-color: transparent transparent $caret-before-color transparent;
+  }
+}
+
+.Tooltip-r {
+  &:after {
+    left: 100%;
+    border-color: transparent transparent transparent $caret-after-color;
+  }
+
+  &:before {
+    left: calc(100% + 1px);
+    border-color: transparent transparent transparent $caret-before-color;
+  }
+}
+
+.Tooltip-b {
+  &:after {
+    top: 100%;
+    border-color: $caret-after-color transparent transparent transparent;
+  }
+
+  &:before {
+    top: calc(100% + 1px);
+    border-color: $caret-before-color transparent transparent transparent;
+  }
+}
+
+.Tooltip-l {
+  &:after {
+    right: 100%;
+    border-color: transparent $caret-after-color transparent transparent;
+  }
+
+  &:before {
+    right: calc(100% + 1px);
+    border-color: transparent $caret-before-color transparent transparent;
+  }
+}
+
+