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

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;
       }
     }
 

package/scss/Architecture/Forms/_form-check.scss

@@ -5,7 +5,8 @@
 */
 @use 'sass:math';
 
-@import "../_theme-colors";
+$Customized: false;
+@import "../_color-scheme";
 
 $checkbox-size: 1.25rem; //20px
 
@@ -114,7 +115,7 @@ $checkbox-size: 1.25rem; //20px
       height: $checkbox-size * 1.1;
       border-style: solid;
       border-width: 2px;
-      border-color: transparent $bg-Active $bg-Active transparent;
+      border-color: transparent $Bg-accent $Bg-accent transparent;
       transform: rotate(40deg);
       transform-origin: 100% 100%;
     }
@@ -127,7 +128,7 @@ $checkbox-size: 1.25rem; //20px
         width: 10px;
         height: 22px;
         border: none;
-        border-right: 2px solid $bg-Active;
+        border-right: 2px solid $Bg-accent;
         transform: rotate(90deg);
         transform-origin: 100% 100%;
       }
@@ -138,23 +139,23 @@ $checkbox-size: 1.25rem; //20px
     /* Disabled */
     &:disabled {
       + .Form-check-label {
-        color: $fg-Muted;
+        color: $Fg-muted;
         cursor: default;
       }
 
       &:checked + .Form-check-label:before {
-        border-color: transparent $fg-Muted $fg-Muted transparent;
+        border-color: transparent $Fg-muted $Fg-muted transparent;
       }
 
       &:not(:checked) + .Form-check-label:before {
         border: none;
         //margin-left: 2px;
         margin-top: 2px;
-        background-color: $fg-Muted;
+        background-color: $Fg-muted;
       }
 
       &:indeterminate + .Form-check-label:before {
-        border-right: 2px solid $fg-Muted;
+        border-right: 2px solid $Fg-muted;
         margin-left: 0;
         margin-top: 0;
         background-color: transparent;
@@ -177,8 +178,8 @@ $checkbox-size: 1.25rem; //20px
         }
 
         &:after {
-          border-color: $bg-Active;
-          background-color: $bg-Active;
+          border-color: $Bg-accent;
+          background-color: $Bg-accent;
           z-index: 0;
           transform: scale(1.02);
         }
@@ -202,22 +203,22 @@ $checkbox-size: 1.25rem; //20px
     /* Disabled */
     &:disabled {
       + .Form-check-label {
-        color: $fg-Muted;
+        color: $Fg-muted;
         cursor: default;
 
         &:before {
           background-color: transparent;
-          border-color: $fg-Muted;
+          border-color: $Fg-muted;
         }
       }
 
       &:not(:checked) + .Form-check-label:before {
-        border-color: $fg-Muted;
+        border-color: $Fg-muted;
       }
 
       &:checked + .Form-check-label:after {
-        background-color: $fg-Muted;
-        border-color: $fg-Muted;
+        background-color: $Fg-muted;
+        border-color: $Fg-muted;
       }
 
     }
@@ -250,7 +251,7 @@ $checkbox-size: 1.25rem; //20px
         border-radius: 7px;
         width: 40px;
         height: 15px;
-        background-color: $fg-Muted;
+        background-color: $Fg-muted;
         box-shadow: $Shadow-inner;
         transition: background-color 0.2s, opacity 0.2s;
       }
@@ -263,7 +264,7 @@ $checkbox-size: 1.25rem; //20px
         width: $checkbox-size;
         height: $checkbox-size;
         border: $Border;
-        background-color: $bg-Surface;
+        background-color: $Bg-surface;
         box-shadow: $Shadow-inner;
         transition: background-color 0.2s, transform 0.2s;
       }
@@ -273,40 +274,40 @@ $checkbox-size: 1.25rem; //20px
     &:checked {
 
       + .Form-check-label:before {
-        background-color: hsla($bg-Active-hsl, 0.6);
+        background-color: hsla($Bg-accent-hsl, 0.6);
       }
 
       + .Form-check-label:after {
-        border-color: $bg-Active;
-        background-color: $bg-Active;
+        border-color: $Bg-accent;
+        background-color: $Bg-accent;
         transform: translateX(24px);
       }
 
       &:active + .Form-check-label:before {
-        background-color: $fg-Muted;
+        background-color: $Fg-muted;
       }
 
       &:disabled + .Form-check-label:before {
-        background-color: hsla($bg-Active-hsl, 0.6);
+        background-color: hsla($Bg-accent-hsl, 0.6);
       }
     }
 
     /* Active */
     &:active {
       + .Form-check-label:before {
-        background-color: hsla($bg-Active-hsl, 0.6);
+        background-color: hsla($Bg-accent-hsl, 0.6);
       }
     }
 
     /* Disabled */
     &:disabled {
       + .Form-check-label {
-        color: $fg-Muted;
+        color: $Fg-muted;
         opacity: 0.38;
         cursor: default;
 
         &:before {
-          background-color: $fg-Muted;
+          background-color: $Fg-muted;
         }
       }
     }
@@ -341,7 +342,7 @@ $checkbox-size: 1.25rem; //20px
 
     width: $checkbox-size * 2;
     height: $checkbox-size * 2;
-    background-color: $fg-Muted;
+    background-color: $Fg-muted;
 
     border-radius: 50%;
     transform: scale(1);
@@ -416,15 +417,15 @@ $checkbox-size: 1.25rem; //20px
 
     /* Checked, Indeterminate */
     &:checked, &:indeterminate {
-      background-color: $bg-Active;
+      background-color: $Bg-accent;
 
       + .Form-check-label:before {
-        border-color: $bg-Active;
-        background-color: $bg-Active;
+        border-color: $Bg-accent;
+        background-color: $Bg-accent;
       }
 
       + .Form-check-label:after {
-        border-color: $fg-Active;
+        border-color: $Fg-accent;
       }
 
       &:disabled {
@@ -448,12 +449,12 @@ $checkbox-size: 1.25rem; //20px
       transition: transform 0s, opacity 0s;
 
       + .Form-check-label:before {
-        border-color: $bg-Active;
+        border-color: $Bg-accent;
       }
 
       &:checked + .Form-check-label:before {
         border-color: transparent;
-        background-color: hsla($bg-Active-hsl, 0.6);
+        background-color: hsla($Bg-accent-hsl, 0.6);
       }
     }
 
@@ -462,7 +463,7 @@ $checkbox-size: 1.25rem; //20px
       opacity: 0;
 
       + .Form-check-label {
-        color: $fg-Muted;
+        color: $Fg-muted;
         cursor: initial;
 
         &:before {
@@ -492,7 +493,7 @@ $checkbox-size: 1.25rem; //20px
         border-radius: 50%;
         width: 10px;
         height: 10px;
-        background-color: $bg-Active;
+        background-color: $Bg-accent;
         transform: translate(5px, 5px) scale(0);
         transition: transform 0.2s;
       }
@@ -501,10 +502,10 @@ $checkbox-size: 1.25rem; //20px
 
     /* Checked */
     &:checked {
-      background-color: $bg-Active;
+      background-color: $Bg-accent;
 
       + .Form-check-label:before {
-        border-color: $bg-Active;
+        border-color: $Bg-accent;
       }
 
       + .Form-check-label:after {
@@ -519,7 +520,7 @@ $checkbox-size: 1.25rem; //20px
       transition: transform 0s, opacity 0s;
 
       + .Form-check-label:before {
-        background-color: $bg-Active;
+        background-color: $Bg-accent;
       }
     }
 
@@ -528,7 +529,7 @@ $checkbox-size: 1.25rem; //20px
       opacity: 0;
 
       + .Form-check-label {
-        color: $fg-Muted;
+        color: $Fg-muted;
         cursor: initial;
 
         &:before {
@@ -548,7 +549,7 @@ $checkbox-size: 1.25rem; //20px
     &:before {
       width: $checkbox-size;
       height: $checkbox-size;
-      border: 2px solid hsla($bg-Active-hsl, 0.6);
+      border: 2px solid hsla($Bg-accent-hsl, 0.6);
       //border: $Border;
       transition: border-color 0.2s, background-color 0.2s;
     }
@@ -569,7 +570,7 @@ $checkbox-size: 1.25rem; //20px
         border-radius: 7px;
         width: 36px;
         height: 14px;
-        background-color: $fg-Muted;
+        background-color: $Fg-muted;
         box-shadow: $Shadow-inner;
         transition: background-color 0.2s, opacity 0.2s;
       }
@@ -582,7 +583,7 @@ $checkbox-size: 1.25rem; //20px
         width: $checkbox-size;
         height: $checkbox-size;
         border: $Border;
-        background-color: $bg-Surface;
+        background-color: $Bg-surface;
         box-shadow: $Shadow-inner;
         transition: background-color 0.2s, transform 0.2s;
       }
@@ -591,24 +592,24 @@ $checkbox-size: 1.25rem; //20px
     /* Checked */
     &:checked {
       left: 6px;
-      background-color: $bg-Active;
+      background-color: $Bg-accent;
 
       + .Form-check-label:before {
-        background-color: hsla($bg-Active-hsl, 0.6);
+        background-color: hsla($Bg-accent-hsl, 0.6);
       }
 
       + .Form-check-label:after {
-        border-color: $bg-Active;
-        background-color: $bg-Active;
+        border-color: $Bg-accent;
+        background-color: $Bg-accent;
         transform: translateX(16px);
       }
 
       &:active + .Form-check-label:before {
-        background-color: $fg-Muted;
+        background-color: $Fg-muted;
       }
 
       &:disabled + .Form-check-label:before {
-        background-color: hsla($bg-Active-hsl, 0.6);
+        background-color: hsla($Bg-accent-hsl, 0.6);
       }
     }
 
@@ -619,7 +620,7 @@ $checkbox-size: 1.25rem; //20px
       transition: transform 0s, opacity 0s;
 
       + .Form-check-label:before {
-        background-color: hsla($bg-Active-hsl, 0.6);
+        background-color: hsla($Bg-accent-hsl, 0.6);
       }
     }
 
@@ -628,12 +629,12 @@ $checkbox-size: 1.25rem; //20px
       opacity: 0;
 
       + .Form-check-label {
-        color: $fg-Muted;
+        color: $Fg-muted;
         opacity: 0.38;
         cursor: default;
 
         &:before {
-          background-color: $fg-Muted;
+          background-color: $Fg-muted;
         }
       }
     }
@@ -715,15 +716,15 @@ $checkbox-size: 1.25rem; //20px
         height: 16px;
         border-top: 2px solid transparent;
         border-left: 2px solid transparent;
-        border-right: 2px solid $bg-Active;
-        border-bottom: 2px solid $bg-Active;
+        border-right: 2px solid $Bg-accent;
+        border-bottom: 2px solid $Bg-accent;
         //border-color: transparent $input-background $input-background transparent;
         z-index: 1;
       }
 
       + .Form-check-label:after {
         top: 0;
-        border-color: $bg-Active;
+        border-color: $Bg-accent;
         background-color: transparent;
         z-index: 0;
       }
@@ -754,14 +755,14 @@ $checkbox-size: 1.25rem; //20px
         width: 11px;
         height: 14px;
         border: none;
-        border-right: 2px solid $bg-Active;
+        border-right: 2px solid $Bg-accent;
         transform: rotate(90deg);
         transform-origin: 100% 100%;
         z-index: 1;
       }
 
       + .Form-check-label:after {
-        border-color: $bg-Active;
+        border-color: $Bg-accent;
       }
     }
 
@@ -770,19 +771,19 @@ $checkbox-size: 1.25rem; //20px
     /* Disabled */
     &:disabled {
       + .Form-check-label {
-        color: $fg-Muted;
+        color: $Fg-muted;
         cursor: default;
       }
 
       &:not(:checked) {
         + .Form-check-label:before {
           background-color: transparent;
-          border-color: $fg-Muted;
+          //border-color: $Fg-muted;
         }
 
         + .Form-check-label:after {
           border-color: transparent;
-          background-color: $fg-Muted;
+          background-color: $Fg-muted;
         }
       }
 
@@ -791,13 +792,13 @@ $checkbox-size: 1.25rem; //20px
           background-color: transparent;
           border-top: 2px solid transparent;
           border-left: 2px solid transparent;
-          border-right: 2px solid $fg-Active;
-          border-bottom: 2px solid $fg-Active;
+          border-right: 2px solid $Fg-accent;
+          border-bottom: 2px solid $Fg-accent;
         }
 
         + .Form-check-label:after {
-          background-color: $fg-Muted;
-          border-color: $fg-Muted;
+          background-color: $Fg-muted;
+          border-color: $Fg-muted;
         }
       }
     }
@@ -814,23 +815,23 @@ $checkbox-size: 1.25rem; //20px
       + .Form-check-label:before {
         border-top: 2px solid transparent;
         border-left: 2px solid transparent;
-        border-right: 2px solid $fg-Active;
-        border-bottom: 2px solid $fg-Active;
+        border-right: 2px solid $Fg-accent;
+        border-bottom: 2px solid $Fg-accent;
       }
 
       + .Form-check-label:after {
-        background-color: $bg-Active;
+        background-color: $Bg-accent;
       }
     }
 
     /* Indeterminate */
     &.Indeterminate, &:indeterminate {
       + .Form-check-label:before {
-        border-right: 2px solid $fg-Active;
+        border-right: 2px solid $Fg-accent;
       }
 
       + .Form-check-label:after {
-        background-color: $bg-Active;
+        background-color: $Bg-accent;
       }
     }
 
@@ -840,7 +841,7 @@ $checkbox-size: 1.25rem; //20px
     &:disabled {
       &:checked {
         + .Form-check-label:after {
-          background-color: $fg-Muted;
+          background-color: $Fg-muted;
         }
       }
     }
@@ -857,7 +858,7 @@ $checkbox-size: 1.25rem; //20px
       }
 
       &:before {
-        border-color: $bg-Active;
+        border-color: $Bg-accent;
       }
     }
 
@@ -865,12 +866,12 @@ $checkbox-size: 1.25rem; //20px
     &:checked {
       + .Form-check-label {
         &:before {
-          border-color: $bg-Active;
+          border-color: $Bg-accent;
         }
 
         &:after {
-          border-color: $bg-Active;
-          background-color: $bg-Active;
+          border-color: $Bg-accent;
+          background-color: $Bg-accent;
           z-index: 0;
         }
       }
@@ -898,20 +899,20 @@ $checkbox-size: 1.25rem; //20px
     /* Disabled */
     &:disabled {
       + .Form-check-label {
-        color: $fg-Muted;
+        color: $Fg-muted;
 
         &:before {
           background-color: transparent;
-          border-color: $fg-Muted;
+          border-color: $Fg-muted;
         }
       }
 
       &:not(:checked) + .Form-check-label:before {
-        border-color: $fg-Muted;
+        border-color: $Fg-muted;
       }
 
       &:checked + .Form-check-label:after {
-        background-color: $fg-Muted;
+        background-color: $Fg-muted;
       }
 
     }
@@ -943,16 +944,16 @@ $checkbox-size: 1.25rem; //20px
 
       &:checked {
         ~ .Lever {
-          background-color: $bg-Dark;
+          background-color: $Bg-lighter;
 
           &:after {
-            background-color: $bg-Active;
+            background-color: $Bg-accent;
             left: 24px;
           }
         }
 
         &:disabled + .Lever {
-          background-color: $bg-Surface;
+          background-color: $Bg-surface;
         }
 
         &:not(:disabled) ~ .Lever:active:after {
@@ -970,7 +971,7 @@ $checkbox-size: 1.25rem; //20px
 
       &:disabled + .Lever:after,
       &:disabled:checked + .Lever:after {
-        background-color: $fg-Muted;
+        background-color: $Fg-muted;
       }
     }
 
@@ -982,7 +983,7 @@ $checkbox-size: 1.25rem; //20px
     position: relative;
     width: 40px;
     height: 15px;
-    background-color: $bg-Lightest;
+    background-color: $Bg-lightest;
     border-radius: 15px;
     transition: background 0.3s ease;
     vertical-align: middle;
@@ -996,7 +997,7 @@ $checkbox-size: 1.25rem; //20px
       width: $checkbox-size;
       height: $checkbox-size;
       border-radius: 50%;
-      background-color: $bg-Surface;
+      background-color: $Bg-surface;
       border: $Border;
       box-shadow: $Shadow-inner;
       //left: -5px;