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

package/scss/Architecture/Utils/_spacing.scss

@@ -1,10 +1,8 @@
 // ===========================================================================
 // Utils - Spacing
+// Margin, Padding
 // ===========================================================================
 
-/*
-// Margin, Padding
-*/
 // Values: Prefix: *, Properties: *, Important: *, Responsive: *, Values: *, Values: *, Pseudo:*
 $utilities-Spacing: () !default;
 $utilities-Spacing: (
@@ -20,27 +18,17 @@ $utilities-Spacing: (
         ),
   // Margin directions
         "M-top": (Prefix: MT, Properties: margin-top, Important: true, Responsive: true, Values: map-merge($spacers-map, (auto: auto))),
-        "M-right": (Prefix: MR, Properties: margin-right, Important: true, Responsive: true, Values: map-merge($spacers-map, (auto: auto))),
         "M-end": (Prefix: ME, Properties: margin-right, Important: true, Responsive: true, Values: map-merge($spacers-map, (auto: auto))),
         "M-bottom": (Prefix: MB, Properties: margin-bottom, Important: true, Responsive: true, Values: map-merge($spacers-map, (auto: auto))),
-        "M-left": (Prefix: ML, Properties: margin-left, Important: true, Responsive: true, Values: map-merge($spacers-map, (auto: auto))),
         "M-start": (Prefix: MS, Properties: margin-left, Important: true, Responsive: true, Values: map-merge($spacers-map, (auto: auto))),
   // Negative Margin
-        "Neg M": (
-                Prefix: M, Properties: margin, Important: true, Responsive: true, Values: $negative-spacers
-        ),
-        "Neg MX": (
-                Prefix: MX, Properties: margin-right margin-left, Important: true, Responsive: true, Values: $negative-spacers
-        ),
-        "Neg MY": (
-                Prefix: MY, Properties: margin-top margin-bottom, Important: true, Responsive: true, Values: $negative-spacers
-        ),
+        "Neg M": (Prefix: M, Properties: margin, Important: true, Responsive: true, Values: $negative-spacers),
+        "Neg MX": (Prefix: MX, Properties: margin-right margin-left, Important: true, Responsive: true, Values: $negative-spacers),
+        "Neg MY": (Prefix: MY, Properties: margin-top margin-bottom, Important: true, Responsive: true, Values: $negative-spacers),
   // Negative Margin directions
         "Neg M-top": (Prefix: MT, Properties: margin-top, Important: true, Responsive: true, Values: $negative-spacers),
-        "Neg M-right": (Prefix: MR, Properties: margin-right, Important: true, Responsive: true, Values: $negative-spacers),
         "Neg M-end": (Prefix: ME, Properties: margin-right, Important: true, Responsive: true, Values: $negative-spacers),
         "Neg M-bottom": (Prefix: MB, Properties: margin-bottom, Important: true, Responsive: true, Values: $negative-spacers),
-        "Neg M-left": (Prefix: ML, Properties: margin-left, Important: true, Responsive: true, Values: $negative-spacers),
         "Neg M-start": (Prefix: MS, Properties: margin-left, Important: true, Responsive: true, Values: $negative-spacers),
   // Padding
         "P": (Prefix: P, Properties: padding, Important: true, Responsive: true, Values: $spacers-map),
@@ -48,10 +36,8 @@ $utilities-Spacing: (
         "PY": (Prefix: PY, Properties: padding-top padding-bottom, Important: true, Responsive: true, Values: $spacers-map),
   // Padding directions
         "P-top": (Prefix: PT, Properties: padding-top, Important: true, Responsive: true, Values: $spacers-map),
-        "P-right": (Prefix: PR, Properties: padding-right, Important: true, Responsive: true, Values: $spacers-map),
         "P-end": (Prefix: PE, Properties: padding-right, Important: true, Responsive: true, Values: $spacers-map),
         "P-bottom": (Prefix: PB, Properties: padding-bottom, Important: true, Responsive: true, Values: $spacers-map),
-        "P-left": (Prefix: PL, Properties: padding-left, Important: true, Responsive: true, Values: $spacers-map),
         "P-start": (Prefix: PS, Properties: padding-left, Important: true, Responsive: true, Values: $spacers-map),
 );
 
@@ -64,10 +50,10 @@ $utilities-Spacing: (
 /*
 Margin                  .M-<0-5>, .M-auto {}
 Margin X, Y             .M<X,Y>-<0-5>, .M<X,Y>-auto {}
-Margin directions       .M<T,R,E,B,L,S>-<0-5>, .M<T,R,E,B,L,S>-auto {}
+Margin directions       .M<T,E,B,S>-<0-5>, .M<T,E,B,S>-auto {}
 Negative Margin         .M-N<0-5>
 Negative Margin X, Y    .M<X,Y>-N<0-5>
-Negative M directions   .M<T,R,E,B,L,S>-N<0-5> {}
+Negative M directions   .M<T,E,B,S>-N<0-5> {}
 */
 
 // ===========================================================================
@@ -77,5 +63,5 @@ Negative M directions   .M<T,R,E,B,L,S>-N<0-5> {}
 /*
 Padding                  .P-<0-5> {}
 Padding X, Y             .P<X,Y>-<0-5> {}
-Padding directions       .P<T,R,E,B,L,S>-<0-5> {}
+Padding directions       .P<T,E,B,S>-<0-5> {}
 */

package/scss/Architecture/Utils/_text.scss

@@ -2,129 +2,62 @@
 // Utils - Text
 // ===========================================================================
 
-//TODO...
-
 // Values: Prefix: *, Properties: *, Important: *, Responsive: *, Values: *, Values: *, Pseudo:*
 $utilities-Text: () !default;
 $utilities-Text: (
-  // font-family
-  //      "font-family": (
-  //              Prefix: Font, Properties: font-family, Important: true,
-  //              Values: (monospace: var(--#{$variable-prefix}font-monospace))
-  //      ),
-  //      "font-size": (
-  //              Prefix: FS, Properties: font-size, Important: true,
-  //              Values: $font-sizes
-  //      ),
-        "font-style": (
-                Prefix: FST, Properties: font-style, Important: true,
-                Values: italic normal
-        ),
-  "font-weight": (
-          Prefix: FW, Properties: font-weight, Important: true,
-          Values: (
-                  light: $font-weight-light,
-                  lighter: $font-weight-lighter,
-                  normal: $font-weight-normal,
-                  bold: $font-weight-bold,
-                  bolder: $font-weight-bolder
-          )
-  ),
-  //"line-height": (
-  //        Prefix: LH, Properties: line-height, Important: true,
-  //        Values: (
-  //                1: 1,
-  //                sm: $line-height-sm,
-  //                base: $line-height-base,
-  //                lg: $line-height-lg,
-  //        )
-  //),
         "Text-align": (
-                Prefix: Txt, Properties: text-align, Important: true, Responsive: true,
-                Values: (left: left, right: right, start: left, end: right, center: center)
+                Prefix: Text, Properties: text-align, Important: true, Responsive: true,
+                Values: (start: left, center: center, end: right)
+        ),
+        "Text-transform": (
+                Prefix: Text, Properties: text-transform, Important: true,
+                Values: lowercase uppercase capitalize
         ),
         "Text-decoration": (
-                Prefix: Txt-decoration, Properties: text-decoration, Important: true,
+                Prefix: Text-decoration, Properties: text-decoration, Important: true,
+                Values: (none, underline, line-through, overline,)
+        ),
+  // Font
+        "Font-style": (
+                Prefix: FST, Properties: font-style, Important: true,
+                Values: italic normal
+        ),
+        "Font-weight": (
+                Prefix: FW, Properties: font-weight, Important: true,
                 Values: (
-                        none:none,
-                        underline:underline,
-                        overline:overline,
-                        strikethrough:line-through,
-                        multiple:underline overline line-through,
-                        blink:blink,
-                        wavy:underline overline wavy,
+                        light: $font-weight-light,
+                        lighter: $font-weight-lighter,
+                        normal: $font-weight-normal,
+                        bold: $font-weight-bold,
+                        bolder: $font-weight-bolder
                 )
         ),
-        "Text-transform": (
-                Prefix: Txt, Properties: text-transform, Important: true,
-                Values: lowercase uppercase capitalize
-        ),
-        "white-space": (
-                Prefix: WS, Properties: white-space, Important: true,
-                Values: normal nowrap
+        "Font-size": (Prefix: FS, Properties: font-size, Important: true, Values: $font-sizes),
+        "Font-family": (Prefix: Font, Properties: font-family, Important: true, Values: (monospace: var(--#{$var-Prefix}font-monospace))),
+  // Line
+        "Line-height": (
+                Prefix: LH, Properties: line-height, Important: true,
+                Values: (1: 1, sm: $line-height-sm, base: $line-height-base, lg: $line-height-lg,)
         ),
 );
 
 @include Utilities($utilities-Text);
 
 
-/*
-// Text-align + Responsive variants
-*/
-
-.Txt-left, .Txt-right, .Txt-center {
-}
-
-/*
-// Text-transform
-*/
-
-.Txt-lowercase, .Txt-uppercase, .Txt-capitalize {
-}
-
-
-// TODO: Txt-d
-
-//.Txt-d {
-//  //text-decoration: #{var(--Txt-dl)} #{var(--Txt-ds)} #{var(--Txt-dc)};
-//  text-decoration-line: #{var(--Txt-dl)};
-//  text-decoration-style: #{var(--Txt-ds)};
-//  text-decoration-color: #{var(--Txt-dc)};
-//}
-
-//@include Utility-applier(true, Txt-d, text-decoration, (none:none));
-
-.Txt-d, .Txt-d-none {
-}
-
-/*
-// text-decoration-line -dl-: none underline overline line-through blink
-*/
-
-//@include Utility-applier(false, Txt-dl, --Txt-dl, (under:underline));
-//@include Utility-applier(false, Txt-dl, --Txt-dl, (over:overline));
-//@include Utility-applier(false, Txt-dl, --Txt-dl, (through:line-through));
-//@include Utility-applier(false, Txt-dl, --Txt-dl, (blink:blink));
-//@include Utility-applier(false, Txt-dl, --Txt-dl, (under-over:underline overline));
-//@include Utility-applier(false, Txt-dl, --Txt-dl, (under-over-through:overline underline line-through));
-
-.Txt-dl-under, .Txt-dl-over, .Txt-dl-through, .Txt-dl-blink, .Txt-dl-under-over, .Txt-dl-under-over-through {
-}
-
-/*
-// text-decoration-style -ds-: solid double dotted dashed wavy
-*/
-
-//@include Utility-applier(false, Txt-ds, --Txt-ds, (solid:solid, double:double, dotted:dotted, dashed:dashed, wavy:wavy));
-
-.Txt-ds-solid, .Txt-ds-double, .Txt-ds-dotted, .Txt-ds-dashed, .Txt-ds-wavy {
-}
-
-/*
-// text-decoration-color -dc-: theme-colors
-*/
 
-//@include Utility-applier(false, Txt-dc, --Txt-dc, $colors-theme);
 
-.Txt-dc-primary, .Txt-dc-secondary, .Txt-dc-success, .Txt-dc-info, .Txt-dc-warning, .Txt-dc-danger, .Txt-dc-light, .Txt-dc-dark {
-}
+// REST ==> TODOs
+//      "white-space": (
+//              property: white-space,
+//              class: text,
+//              values: (
+//                      wrap: normal,
+//                      nowrap: nowrap,
+//              )
+//      ),
+//      "word-wrap": (
+//              property: word-wrap word-break,
+//              class: text,
+//              values: (break: break-word),
+//              rtl: false
+//      ),

package/scss/Architecture/Utils/_utilities.scss

@@ -6,6 +6,14 @@
 $utilities: () !default;
 $utilities: (
   /*
+  // Opacity
+  */
+        "Opacity": (Prefix: Opacity, Properties: opacity, Important: true,
+                Values: (
+                        0: 0, 5: 0.05, 10: 0.1, 15: 0.15, 20: 0.2, 25: 0.25, 30: 0.3, 35: 0.35, 40: 0.4, 45: 0.45, 50: 0.5,
+                        55: 0.55, 60: 0.6, 65: 0.65, 70: 0.7, 75: 0.75, 80: 0.8, 85: 0.85, 90: 0.9, 95: 0.95, 100: 1,
+                ),),
+  /*
   // Cursor
   */
         "Cursor": (
@@ -48,19 +56,58 @@ $utilities: (
                 Values: inline inline-block block grid table table-row table-cell flex inline-flex none
         ),
   /*
+  // Flex, Flex-direction, Flex-grow, Flex-shrink,Flex-wrap
+  */
+        "Flex": (Prefix: Flex, Properties: flex, Important: true, Responsive: true, Values: (fill: 1 1 auto)),
+        "Flex-direction": (
+                Prefix: Flex, Properties: flex-direction, Important: true, Responsive: true,
+                Values: row column row-reverse column-reverse
+        ),
+        "Flex-grow": (
+                Prefix: Flex, Properties: flex-grow, Important: true, Responsive: true, Values: (grow-0: 0, grow-1: 1,)
+        ),
+        "Flex-shrink": (
+                Prefix: Flex, Properties: flex-shrink, Important: true, Responsive: true, Values: (shrink-0: 0, shrink-1: 1,)
+        ),
+        "Flex-wrap": (
+                Prefix: Flex, Properties: flex-wrap, Important: true, Responsive: true, Values: wrap nowrap wrap-reverse
+        ),
+  /*
+  // Justify content, Align-items, Align-content, Align-self
+  */
+        "Justify-content": (
+                Prefix: Justify-content, Properties: justify-content, Important: true, Responsive: true,
+                Values: (
+                        start: flex-start, end: flex-end, center: center,
+                        between: space-between, around: space-around, evenly: space-evenly,
+                )
+        ),
+        "Align-items": (
+                Prefix: Align-items, Properties: align-items, Important: true, Responsive: true,
+                Values: (start: flex-start, end: flex-end, center: center, baseline: baseline, stretch: stretch,)
+        ),
+        "Align-content": (
+                Prefix: Align-content, Properties: align-content, Important: true, Responsive: true,
+                Values: (start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, stretch: stretch,)
+        ),
+        "Align-self": (
+                Prefix: Align-self, Properties: align-self, Important: true, Responsive: true,
+                Values: (auto: auto, start: flex-start, end: flex-end, center: center, baseline: baseline, stretch: stretch,)
+        ),
+  /*
+  // Order
+  */
+        "Order": (
+                Prefix: Order, Properties: order, Important: true, Responsive: true,
+                Values: (first: -1, 0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, last: 6)
+        ),
+  /*
   // Shadow
   */
         "Box Shadow": (
                 Prefix: Shadow, Properties: box-shadow, Important: true, Values: $Shadow-map
         ),
   /*
-  // Position
-  */
-  //"Position": (
-  //        Prefix: Position, Properties: position, Important: true,
-  //        Values: (static relative absolute fixed sticky)
-  //),
-  /*
   // Sizing Width, Height
   */
         "Width": (Prefix: W, Properties: width, Important: true, Values: $sizes-percents,),
@@ -70,19 +117,6 @@ $utilities: (
         "Max-Height": (Prefix: MH, Properties: max-height, Important: true, Values: (100: 100%)),
         "viewport-Height": (Prefix: VH, Properties: height, Important: true, Values: (100: 100vw)),
   /*
-  // Flex
-  */
-  /*
-  // justify-content align-items align-content align-self
-  */
-  /*
-  // order
-  */
-        "Order": (
-                Prefix: Order, Properties: order, Important: true, Responsive: true,
-                Values: (first: -1, 0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, last: 6)
-        ),
-  /*
   // Visibility
   */
         "Visibility": (
@@ -111,7 +145,7 @@ $utilities: (
 /*
 // Box Shadow  --component-shadow-color: 0, 0, 0;
 // .Shadow-<null,2x,3x>
-// .Shadow-<inner,both,br,t,r,l,b,x,y>-<null,2x,3x>
+// .Shadow-<inner,both,br,t,e,b,s,x,y>-<null,2x,3x>
 */
 
 /*

package/scss/Architecture/__color-scheme.scss

@@ -0,0 +1,80 @@
+// ===========================================================================
+// Components - Color Schema
+// ===========================================================================
+
+$Scheme: var(--#{$var-Prefix}scheme); // light, dark, night
+
+$Fg-muted: var(--#{$var-Prefix}fg-muted);
+$Bg-overlay-hsl: var(--#{$var-Prefix}overlay-hsl);
+
+$Bg-hue-hsl: var(--#{$var-Prefix}bg-hue-hsl);
+$Bg-accent-hsl: var(--#{$var-Prefix}bg-accent-hsl);
+
+$Bg-hue: var(--#{$var-Prefix}bg-hue);
+$Bg-accent: var(--#{$var-Prefix}bg-accent);
+$Bg-surface: var(--#{$var-Prefix}bg-surface);
+$Bg-lighter: var(--#{$var-Prefix}bg-lighter);
+$Bg-lightest: var(--#{$var-Prefix}bg-lightest);
+
+$Fg-hue: var(--#{$var-Prefix}fg-hue);
+$Fg-accent: var(--#{$var-Prefix}fg-accent);
+$Fg-surface: var(--#{$var-Prefix}fg-surface);
+$Fg-lighter: var(--#{$var-Prefix}fg-lighter);
+$Fg-lightest: var(--#{$var-Prefix}fg-lightest);
+
+$Border-hsl: var(--#{$var-Prefix}border-hsl);
+$Shadow-color: var(--#{$var-Prefix}shadow-hsl);
+
+@if ($Customized) {
+  $Prefix: #{$var-Prefix}#{$Customized};
+
+  $Fg-muted: var(--#{$Prefix}fg-muted, var(--#{$var-Prefix}fg-muted));
+  $Bg-overlay-hsl: var(--#{$Prefix}overlay-hsl, var(--#{$var-Prefix}overlay-hsl));
+
+  $Bg-hue-hsl: var(--#{$Prefix}bg-hue-hsl, var(--#{$var-Prefix}bg-hue-hsl));
+  $Bg-accent-hsl: var(--#{$Prefix}bg-accent-hsl, var(--#{$var-Prefix}bg-accent-hsl));
+
+  $Bg-hue: var(--#{$Prefix}bg-hue, var(--#{$var-Prefix}bg-hue));
+  $Bg-accent: var(--#{$Prefix}bg-accent, var(--#{$var-Prefix}bg-accent));
+  $Bg-surface: var(--#{$Prefix}bg-surface, var(--#{$var-Prefix}bg-surface));
+  $Bg-lighter: var(--#{$Prefix}bg-lighter, var(--#{$var-Prefix}bg-lighter));
+  $Bg-lightest: var(--#{$Prefix}bg-lightest, var(--#{$var-Prefix}bg-lightest));
+
+  $Fg-hue: var(--#{$Prefix}fg-hue, var(--#{$var-Prefix}fg-hue));
+  $Fg-accent: var(--#{$Prefix}fg-accent, var(--#{$var-Prefix}fg-accent));
+  $Fg-surface: var(--#{$Prefix}fg-surface, var(--#{$var-Prefix}fg-surface));
+  $Fg-lighter: var(--#{$Prefix}fg-lighter, var(--#{$var-Prefix}fg-lighter));
+  $Fg-lightest: var(--#{$Prefix}fg-lightest, var(--#{$var-Prefix}fg-lightest));
+
+  $Border-hsl: var(--#{$Prefix}border-hsl, var(--#{$var-Prefix}border-hsl));
+  $Shadow-color: var(--#{$Prefix}shadow-hsl, var(--#{$var-Prefix}shadow-hsl));
+}
+
+/*
+// Shadow & Border
+*/
+
+$Shadow: Colored-shadow($Shadow-color);
+$Shadow-inner: Colored-shadow-inner($Shadow-color);
+
+$Border-color: hsla($Border-hsl, var(--#{$var-Prefix}border-alpha));
+$Border: 1px solid $Border-color;
+$Border-radius: var(--#{$var-Prefix}border-radius);
+
+/*
+// Overlay Test
+// Base on parent element background color
+// For light theme      => black overlay
+// For dark/night theme => white overlay
+*/
+
+$Overlay-0: hsla($Bg-overlay-hsl, 0);
+$Overlay-5: hsla($Bg-overlay-hsl, .05);
+$Overlay-7: hsla($Bg-overlay-hsl, .07);
+$Overlay-8: hsla($Bg-overlay-hsl, .08);
+$Overlay-9: hsla($Bg-overlay-hsl, .09);
+$Overlay-11: hsla($Bg-overlay-hsl, .11);
+$Overlay-12: hsla($Bg-overlay-hsl, .12);
+$Overlay-14: hsla($Bg-overlay-hsl, .14);
+$Overlay-15: hsla($Bg-overlay-hsl, .15);
+$Overlay-16: hsla($Bg-overlay-hsl, .16);

package/scss/Architecture/__dir-components.scss

@@ -8,9 +8,8 @@
 // ===========================================================================
 */
 
-@import "Components/themed";
-
 @import "Components/alert";
+@import "Components/badge";
 @import "Components/breadcrumb";
 @import "Components/button-close";
 @import "Components/button-group";
@@ -32,6 +31,7 @@
 @import "Components/timeline";
 @import "Components/timer";
 @import "Components/toasts";
+@import "Components/tooltip";
 @import "Components/tree-view";
 
 /*
@@ -39,9 +39,9 @@
 */
 
 .Alert, .Breadcrumb, .Btn, .Calendar, .Card, .Dialog, .List, .Pagination, .Progress, .Rating, .Timeline, .Timer, .Toast {
-  font-family: var(--ls-font);
-  font-size: var(--ls-font-size);
-  font-weight: var(--ls-font-weight);
+  font-family: var(--#{$var-Prefix}font-sans-serif);
+  font-size: $font-size-base;
+  font-weight: normal;
 }
 
 
@@ -49,12 +49,10 @@
 // Components - TODOs
 */
 
-@import "Components/TODO/badge";
 @import "Components/TODO/dropdown";
 @import "Components/TODO/navbar";
 @import "Components/TODO/popover";
 @import "Components/TODO/tables";
-@import "Components/TODO/tooltip";
 
 /*
 - Reboot

package/scss/Architecture/__dir-roots.scss

@@ -0,0 +1,17 @@
+/*
+// ===========================================================================
+// Root level
+// ===========================================================================
+*/
+
+// Tops
+@import "Roots/root";
+@import "Roots/reboot";
+
+// Rests
+@import "Roots/anim";
+@import "Roots/avatar";
+@import "Roots/classified";
+@import "Roots/shape";
+@import "Roots/skeleton";
+@import "Roots/svg";

package/scss/Architecture/__dir-utils.scss

@@ -6,8 +6,9 @@
 
 @import "Utils/border"; // Border, Rounded
 @import "Utils/color"; // Bg-colors & Text-colors & Border-colors
-@import "Utils/spacing"; // Margin, Padding
 @import "Utils/filters"; // svg colors, blur, drop-shadow
+@import "Utils/position"; // Positioning
+@import "Utils/spacing"; // Margin, Padding
 
 @import "Utils/text"; // TODO
 @import "Utils/utilities"; // rest

package/scss/Architecture/_theme.scss

@@ -2,7 +2,8 @@
 // Components - Themes
 // ===========================================================================
 
-@include Theme-components($colors-Theme, $theme-Components);
+@include Themed($color-Variants, $colored-Components);
+
 
 /*
 > Anatomy of the theme colors <

package/scss/_header.scss

@@ -1,8 +1,8 @@
 
 /*!
- * CSS Compiled on: 2022-02-02
+ * CSS Compiled on: 2022-03-01
  *
- * Lootstrap v22.2.2-beta.0 (https://github.com/krsln/Lootstrap/)
+ * Lootstrap v22.3.1-beta.0 (https://github.com/krsln/Lootstrap/)
  * Copyright 2022 Qrsln.
  * Licensed under MIT (https://github.com/krsln/Lootstrap/blob/master/LICENSE)
 */ 

package/scss/lootstrap.scss

@@ -9,11 +9,10 @@
 @import "Abstracts/variables";
 
 /*
-// :root
+// :root - Root Level Stuffs
 */
 
-@import "Architecture/root";
-@import "Architecture/reboot";
+@import "Architecture/_dir-roots";
 
 /*
 // Utils
@@ -28,9 +27,7 @@
 @import "Architecture/_dir-components";
 @import "Architecture/_dir-forms";
 @import "Architecture/_dir-layout";
-@import "Architecture/_dir-svg";
 
-@import "Architecture/anim";
 @import "Architecture/theme";