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

package/scss/Architecture/Components/_breadcrumb.scss

@@ -3,7 +3,8 @@
 // TS: Theme Support
 // ===========================================================================
 
-@import "../_theme-colors";
+$Customized: false;
+@import "../_color-scheme";
 
 /*
 // SVSs
@@ -21,8 +22,8 @@ $Breadcrumb-divider-verticalLine: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0
   position: relative;
   overflow: hidden;
 
-  color: $fg-Surface;
-  background-color: $bg-Surface;
+  color: $Fg-surface;
+  background-color: $Bg-surface;
 
   border: $Border;
 
@@ -51,7 +52,7 @@ $Breadcrumb-divider-verticalLine: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0
 
       svg {
         margin-right: 0.6rem;
-        color: $bg-Active;
+        color: $Bg-accent;
       }
     }
 
@@ -77,8 +78,8 @@ $Breadcrumb-divider-verticalLine: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0
           cursor: pointer;
 
           &:hover {
-            background: $bg-Darkest;
-            color: $fg-Darkest;
+            color: $Fg-accent;
+            background: hsla($Bg-accent-hsl, .5);
 
             border-bottom: $Border;
           }
@@ -97,7 +98,7 @@ $Breadcrumb-divider-verticalLine: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0
       mask-repeat: no-repeat;
       mask-position: center;
       //background-color: currentColor;
-      background-color: $bg-Active;
+      background-color: $Bg-accent;
     }
   }
 }
@@ -116,7 +117,7 @@ $Breadcrumb-divider-verticalLine: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0
   .Breadcrumb-item {
     &:not(&:first-child):before {
       //color: $fg-Surface; //#6c757d;
-      color: $bg-Active; //#6c757d;
+      color: $Bg-accent; //#6c757d;
       margin-top: -4px;
       content: var(--#{$var-Prefix}breadcrumb-divider, "/");
     }
@@ -127,8 +128,8 @@ $Breadcrumb-divider-verticalLine: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0
   .Breadcrumb-item {
     &:not(&:first-child):before {
       //border-left: 2px solid currentColor;
-      border-left: 2px solid $bg-Active;
-      border-right: 2px solid $bg-Active;
+      border-left: 2px solid $Bg-accent;
+      border-right: 2px solid $Bg-accent;
       opacity: .3;
     }
   }

package/scss/Architecture/Components/_button-close.scss

@@ -25,10 +25,14 @@ $svg-cross-2-64: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53
   color: transparent;
   cursor: pointer;
 
-  &:hover {
+  &:not(:disabled):not(.Disabled):hover {
     opacity: 1;
     text-decoration: none;
   }
+
+  &:disabled, &.Disabled {
+    cursor: default;
+  }
 }
 
 .Btn-close-2nd {
@@ -54,10 +58,15 @@ $svg-cross-2-64: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53
   cursor: pointer;
   vertical-align: middle;
 
-  &:focus, &:hover {
+  &:not(:disabled):not(.Disabled):hover,
+  &:not(:disabled):not(.Disabled):focus  {
     opacity: 1;
   }
 
+  &:disabled, &.Disabled {
+    cursor: default;
+  }
+
   &:before, &:after {
     content: " ";
     position: absolute;

package/scss/Architecture/Components/_buttons.scss

@@ -3,19 +3,18 @@
 // ===========================================================================
 @use 'sass:math';
 
-$component-Name: $var-Prefix + 'btn-';
-@import "../_theme-customized";
+$Customized: 'btn-';
+@import "../_color-scheme";
 
 // Btn
 .Btn {
   position: relative;
   display: inline-block;
 
-  color: $fg-Surface;
+  color: $Fg-surface;
   background-color: transparent;
 
-  border: $Border-width solid transparent;
-  //border: $Border;
+  border: 1px solid transparent;
   //box-shadow: $Shadow;
 
   //@extend .Btn-ripple;
@@ -43,8 +42,9 @@ $component-Name: $var-Prefix + 'btn-';
 
 .Btn-link {
   background: transparent;
-  color: #3e64ff;
-  border: none;
+  color: $Info;
+  //border: none;
+  border: $Border;
   box-shadow: none;
   padding: 0;
 }
@@ -88,35 +88,36 @@ $component-Name: $var-Prefix + 'btn-';
 */
 
 .Btn {
-  &[class*='Btn-']:not([class*="Btn-outline-"]) {
-    color: $fg-Darkest;
-    background: $bg-Darkest;
+
+  &[class*='Btn-']:not([class*="Btn-link"]):not([class*="Btn-outline-"]) {
+    color: $Fg-accent;
+    background: $Bg-accent;
     border-color: $Border-color;
 
     &:hover, &:focus {
-      color: $fg-Dark;
-      background-color: $bg-Dark;
-      border-color: $bg-Darkest;
+      color: $Fg-lighter;
+      background-color: $Bg-lighter;
+      border-color: $Bg-accent;
     }
 
     &.Ripple, &.Border-fx-draw, &.Border-fx-meet, &.Border-fx-center {
-      --ls-effect-color: #{$fg-Dark};
+      --ls-effect-color: #{$Bg-accent};
     }
   }
 
   &[class*='Btn-outline-'] {
-    color: $bg-Darkest;
+    color: $Bg-accent;
     background-color: inherit;
-    border-color: $bg-Darkest;
+    border-color: $Bg-accent;
 
     &:hover {
-      color: $fg-Dark;
-      background-color: $bg-Dark;
-      border-color: $bg-Darkest;
+      color: $Fg-lighter;
+      background-color: $Bg-lighter;
+      //border-color: $Bg-accent;
     }
 
     &.Ripple, &.Border-fx-draw, &.Border-fx-meet, &.Border-fx-center {
-      --ls-effect-color: #{$fg-Dark};
+      --ls-effect-color: #{$Bg-accent};
     }
   }
 }
@@ -128,7 +129,7 @@ $component-Name: $var-Prefix + 'btn-';
 */
 
 .Ripple {
-  $color: var(--ls-effect-color, $fg-Active);
+  $color: var(--ls-effect-color, $Fg-accent);
   position: relative;
   overflow: hidden;
   //noinspection CssInvalidFunction

package/scss/Architecture/Components/_calendar.scss

@@ -3,16 +3,16 @@
 // ST: With Specific Theme
 // ===========================================================================
 
-$component-Name: $var-Prefix + 'calendar-';
-@import "../_theme-customized";
+$Customized: 'calendar-';
+@import "../_color-scheme";
 
 .Calendar {
   display: block;
   position: relative;
   overflow: hidden;
 
-  color: $fg-Surface;
-  background-color: $bg-Surface;
+  color: $Fg-hue;
+  background-color: $Bg-hue;
 
   border: $Border;
   box-shadow: $Shadow;
@@ -21,119 +21,131 @@ $component-Name: $var-Prefix + 'calendar-';
 
   .Calendar-header {
     display: flex;
-    padding: 10px 10px 0;
+    padding: 0 16px;
+    margin: 5px;
+
+    //color: $Fg-hue;
+    background-color: $Overlay-12;
 
     align-items: center; /* Vertical */
     justify-content: center; /* Horizontal */
 
-    color: $fg-Darkest;
-    background-color: $bg-Darkest;
-
-    .Calendar-header-right {
-      cursor: pointer;
+    .Calendar-arrow {
+      padding: 5px;
       font-size: 1.5rem;
     }
 
-    .Calendar-title {
-      flex: 1;
-      cursor: pointer;
+    span {
       font-weight: bold;
       font-size: 1.2rem;
     }
+
+    span, .Calendar-arrow {
+      cursor: pointer;
+    }
   }
 
   .Calendar-body {
+    position: relative;
+    margin: 5px;
     padding: 0 10px 10px;
 
-    .Calendar-row {
-      display: flex;
+    color: $Fg-lighter;
+    background-color: $Bg-lighter;
+
+    .Row {
 
       &:first-child {
-        color: $fg-Dark;
-        background-color: $bg-Dark;
+        //color: $Fg-lighter;
+        //background-color: $Bg-lighter;
+        background-color: $Overlay-5;
+
+        font-size: .8rem;
+        border-bottom: 1px solid $Bg-hue;
 
         margin-left: -10px;
         margin-right: -10px;
       }
 
-      .Calendar-dayNames {
-        font-size: .8rem;
-        border-bottom: $Border;
-      }
-
-      .Calendar-cell {
+      .Square {
         border: 1px solid transparent;
         border-radius: 50%;
 
-        &.Square {
-          margin-left: 0;
-          margin-right: 0;
-        }
+        margin-left: 0;
+        margin-right: 0;
 
-        &.Cell-Disabled {
-          color: $fg-Muted;
+        &.Cal-disabled {
+          color: $Fg-muted;
         }
 
-        &.Cell-Available {
+        &.Cal-available {
           cursor: pointer;
           font-weight: normal;
 
           &:hover {
-            border-color: $Border-color;
+            //color: $Fg-lighter;
+            //background-color: $Bg-lighter;
+            background-color: $Overlay-16;
 
-            color: $fg-Dark;
-            background-color: $bg-Dark;
+            border-color: $Border-color;
           }
         }
 
-        &.Cell-Weekend {
+        &.Cal-weekend {
           font-weight: bold;
 
-          color: $fg-Muted;
+          color: $Fg-muted;
         }
 
-        &.Cell-Today {
+        &.Cal-today {
           border-color: $Border-color;
-          color: $fg-Active;
-          background-color: $bg-Active;
+
+          color: $Fg-accent;
+          background-color: $Bg-accent;
         }
 
-        //&.Cell-SpecialDay { }
+        //&.Cal-special { }
+
+        &.Cal-available, &.Cal-ranged {
+          &.Cal-range-start, &.Cal-range-end {
+            //color: $Fg-hue;
+            //background-color: $Bg-hue;
+            color: $Fg-accent;
+            background-color: $Bg-accent;
 
-        &.Cell-Available, &.Cell-Ranged {
-          // Cell-selected = Cell-Range-start
-          &.Cell-Range-start, &.Cell-Range-end {
-            color: $fg-Darkest;
-            background-color: $bg-Darkest;
+            border-color: $Border-color;
           }
         }
 
-        // Cell-selected = Cell-Range-start
-        &.Cell-Ranged {
+        // Cell-selected = Cal-range-start
+        &.Cal-ranged {
           border-radius: 0;
 
-          &:not(.Cell-Range-start):not(.Cell-Range-end) {
-            color: $fg-Lightest;
-            background-color: $bg-Lightest;
+          &:not(.Cal-range-start):not(.Cal-range-end) {
+            color: $Fg-lightest;
+            background-color: $Bg-lightest;
+            //background-color: $Overlay-9;
 
             border-top-color: $Border-color;
             border-bottom-color: $Border-color;
 
-            &.Cell-Available:hover {
-              color: $fg-Dark;
-              background-color: $bg-Dark;
+            &.Cal-available:hover {
+              //color: $Fg-lighter;
+              //background-color: $Bg-lighter;
+
+              background-color: $Overlay-16;
             }
           }
 
-          &.Cell-Range-start {
+          &.Cal-range-start {
             border-radius: 50% 0 0 50%;
           }
 
-          &.Cell-Range-end {
+          &.Cal-range-end {
             border-radius: 0 50% 50% 0;
           }
 
-          &.Cell-Range-start.Cell-Range-end {
+          &.Cal-range-start.Cal-range-end {
             border-radius: 50%;
           }
         }

package/scss/Architecture/Components/_card.scss

@@ -3,8 +3,8 @@
 // ST: With Specific Theme
 // ===========================================================================
 
-$component-Name: $var-Prefix + 'card-';
-@import "../_theme-customized";
+$Customized: 'card-';
+@import "../_color-scheme";
 
 $border-radius: .5rem;
 
@@ -13,8 +13,8 @@ $border-radius: .5rem;
   position: relative;
   overflow: visible;
 
-  color: $fg-Surface;
-  background-color: $bg-Surface;
+  color: $Fg-surface;
+  background-color: $Bg-surface;
 
   border: $Border;
   box-shadow: $Shadow;
@@ -38,8 +38,8 @@ $border-radius: .5rem;
     margin-bottom: 0;
 
     &.Card-header {
-      color: $fg-Dark;
-      background-color: $bg-Dark;
+      color: $Fg-accent;
+      background-color: $Bg-accent;
 
       border-bottom: $Border;
 
@@ -49,8 +49,8 @@ $border-radius: .5rem;
     }
 
     &.Card-footer {
-      color: $fg-Lightest;
-      background-color: $bg-Lightest;
+      color: $Fg-lighter;
+      background-color: $Bg-lighter;
       border-top: $Border;
     }
   }
@@ -65,7 +65,7 @@ $border-radius: .5rem;
     .Card-title {
       margin-bottom: .5rem;
 
-      padding-left: .5rem;
+      //padding-left: .5rem;
       padding-right: .5rem;
 
       //background-color: $Component-bg-tertiary;

package/scss/Architecture/Components/_caret.scss

@@ -3,8 +3,8 @@
 // ST: With Specific Theme
 // ===========================================================================
 
-$component-Name: $var-Prefix + 'caret-';
-@import "../_theme-customized";
+$Customized: 'caret-';
+@import "../_color-scheme";
 
 .Caret {
   position: relative;
@@ -27,7 +27,7 @@ $component-Name: $var-Prefix + 'caret-';
   }
 }
 
-.Caret-t, .Caret-b, .Caret-darker-t, .Caret-darker-b {
+.Caret-t, .Caret-b, .Caret-deep-t, .Caret-deep-b {
   $caret-size: var(--caret-size, 10px);
 
   &:after {
@@ -39,7 +39,7 @@ $component-Name: $var-Prefix + 'caret-';
   }
 }
 
-.Caret-r, .Caret-l, .Caret-darker-r, .Caret-darker-l {
+.Caret-r, .Caret-l, .Caret-deep-r, .Caret-deep-l {
   $caret-size: var(--caret-size, 10px);
 
   &:after {
@@ -57,7 +57,7 @@ $component-Name: $var-Prefix + 'caret-';
 
 // &:after is bg, &:before is border
 $caret-before-color: $Border-color;
-$caret-after-color: $bg-Surface;
+$caret-after-color: $Bg-surface;
 
 .Caret-t {
   &:after {
@@ -109,58 +109,58 @@ $caret-after-color: $bg-Surface;
 }
 
 /*
-// Caret-darker
+// Caret deep
 */
 
 // &:after is bg, &:before is border
-$caret-darker-before-color: $Border-color;
-$caret-darker-after-color: $bg-Active;
+$caret-before-color-fill: $Border-color;
+$caret-after-color-fill: $Bg-accent;
 
-.Caret-darker-t {
+.Caret-deep-t {
   &:after {
     bottom: 100%;
-    border-color: transparent transparent $caret-darker-after-color transparent;
+    border-color: transparent transparent $caret-after-color-fill transparent;
   }
 
   &:before {
     bottom: calc(100% + 1px);
-    border-color: transparent transparent $caret-darker-before-color transparent;
+    border-color: transparent transparent $caret-before-color-fill transparent;
   }
 }
 
-.Caret-darker-r {
+.Caret-deep-r {
   &:after {
     left: 100%;
-    border-color: transparent transparent transparent $caret-darker-after-color;
+    border-color: transparent transparent transparent $caret-after-color-fill;
   }
 
   &:before {
     left: calc(100% + 1px);
-    border-color: transparent transparent transparent $caret-darker-before-color;
+    border-color: transparent transparent transparent $caret-before-color-fill;
   }
 }
 
-.Caret-darker-b {
+.Caret-deep-b {
   &:after {
     top: 100%;
-    border-color: $caret-darker-after-color transparent transparent transparent;
+    border-color: $caret-after-color-fill transparent transparent transparent;
   }
 
   &:before {
     top: calc(100% + 1px);
-    border-color: $caret-darker-before-color transparent transparent transparent;
+    border-color: $caret-before-color-fill transparent transparent transparent;
   }
 }
 
-.Caret-darker-l {
+.Caret-deep-l {
   &:after {
     right: 100%;
-    border-color: transparent $caret-darker-after-color transparent transparent;
+    border-color: transparent $caret-after-color-fill transparent transparent;
   }
 
   &:before {
     right: calc(100% + 1px);
-    border-color: transparent $caret-darker-before-color transparent transparent;
+    border-color: transparent $caret-before-color-fill transparent transparent;
   }
 }
 

package/scss/Architecture/Components/_dialog.scss

@@ -3,7 +3,8 @@
 // ST: With Specific Theme
 // ===========================================================================
 
-@import "../_theme-colors";
+$Customized: false;
+@import "../_color-scheme";
 
 .Dialog-container {
   &.IsModal {
@@ -25,8 +26,8 @@
   position: relative;
   overflow: hidden;
 
-  color: $fg-Surface;
-  background-color: $bg-Surface;
+  color: $Fg-surface;
+  background-color: $Bg-surface;
 
   border: $Border;
   box-shadow: $Shadow;
@@ -61,13 +62,15 @@
     padding: .5rem 1rem .5rem .5rem;
 
     &.Dialog-heading {
-      color: $fg-Darkest;
-      background-color: $bg-Darkest;
+      color: $Fg-hue;
+      background-color: $Bg-hue;
+      //color: $Fg-accent;
+      //background-color: $Bg-accent;
     }
 
     &.Dialog-footer {
-      color: $fg-Lightest;
-      background-color: $bg-Lightest;
+      color: $Fg-lighter;
+      background-color: $Bg-lighter;
 
       .Dialog-actions {
         margin-left: auto;

package/scss/Architecture/Components/_list.scss

@@ -3,8 +3,8 @@
 // TS: Theme Support
 // ===========================================================================
 
-$component-Name: $var-Prefix + 'lst-';
-@import "../_theme-customized";
+$Customized: 'lst-';
+@import "../_color-scheme";
 
 $border-radius: 0.25rem;
 
@@ -109,13 +109,13 @@ $border-radius: 0.25rem;
     z-index: 1; // Place hover/focus items above their siblings for proper border styling
     text-decoration: none;
 
-    color: $fg-Lightest;
-    background-color: $bg-Lightest;
+    color: $Fg-lightest;
+    background-color: $Bg-lightest;
   }
 
   &:active {
-    color: $fg-Dark;
-    background-color: $bg-Dark;
+    color: $Fg-lighter;
+    background-color: $Bg-lighter;
   }
 }
 
@@ -131,21 +131,21 @@ $border-radius: 0.25rem;
   padding: 0.75rem 1.25rem;
   text-decoration: none;
 
-  color: $fg-Surface;
-  background-color: $bg-Surface;
+  color: $Fg-surface;
+  background-color: $Bg-surface;
   border: $Border;
 
   &.Disabled, &:disabled {
     pointer-events: none;
-    color: $fg-Muted;
-    background-color: $bg-Lightest;
+    color: $Fg-muted;
+    background-color: $Bg-lightest;
   }
 
   &.Active {
     z-index: 2; // Place active items above their siblings for proper border styling
 
-    color: $fg-Active;
-    background-color: $bg-Active;
-    border-color: $bg-Active;
+    color: $Fg-accent;
+    background-color: $Bg-accent;
+    border-color: $Bg-accent;
   }
 }