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

package/dist/css/test.css

@@ -1,275 +0,0 @@
-/*
-// Configuration
-*/
-/*
-  https://brumm.af/shadows
-  https://tobiasahlin.com/blog/layered-smooth-box-shadows/
-  https://css-tricks.com/getting-deep-into-shadows/
-*/
-/*
-// ===========================================================================
-// Mixins - Utilities
-// ===========================================================================
-*/
-/*
- *  KEY     : VALUES
- * "Opacity": (Prefix: Opacity, Properties: opacity, Important: true, Responsive: false, Values: $opacity-map,),
- */
-/*@formatter:off*/
-/*@formatter:on*/
-/*
-// Colors
-*/
-/*
-// ===========================================================================
-// Utils
-// ===========================================================================
-*/
-/*
-// Border radius
-*/
-/*
-// Border
-*/
-/*
-// Spacing
-*/
-/*
-// Grid System
-// Set the number of columns and specify the width of the gutters.
-*/
-/*
-// Shadow
-// Box-shadow with rgba variable
-// --component-shadow-color: 0, 0, 0; // Has to be like this :p
-// https://stackoverflow.com/questions/59250927/box-shadow-with-rgba-variable
-*/
-/*
-// Typography
-// Font, line-height, and color for body text, headings, and more.
-*/
-.Text-red {
-  --value: hsla(354deg, 66%, var(--ls-text-lightness, 54%), var(--ls-text-alpha, 1));
-}
-
-.Text-lime {
-  --value: hsla(120deg, 100%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));
-}
-
-.Text-blue {
-  --value: hsla(212deg, 97%, var(--ls-text-lightness, 43%), var(--ls-text-alpha, 1));
-}
-
-.Text-yellow {
-  --value: hsla(45deg, 100%, var(--ls-text-lightness, 51%), var(--ls-text-alpha, 1));
-}
-
-.Text-cyan {
-  --value: hsla(180deg, 100%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));
-}
-
-.Text-magenta {
-  --value: hsla(300deg, 100%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));
-}
-
-.Text-purple {
-  --value: hsla(261deg, 51%, var(--ls-text-lightness, 51%), var(--ls-text-alpha, 1));
-}
-
-.Text-green {
-  --value: hsla(134deg, 61%, var(--ls-text-lightness, 41%), var(--ls-text-alpha, 1));
-}
-
-.Text-maroon {
-  --value: hsla(331deg, 74%, var(--ls-text-lightness, 30%), var(--ls-text-alpha, 1));
-}
-
-.Text-navy {
-  --value: hsla(210deg, 100%, var(--ls-text-lightness, 12%), var(--ls-text-alpha, 1));
-}
-
-.Text-teal {
-  --value: hsla(162deg, 73%, var(--ls-text-lightness, 46%), var(--ls-text-alpha, 1));
-}
-
-.Text-olive {
-  --value: hsla(60deg, 100%, var(--ls-text-lightness, 25%), var(--ls-text-alpha, 1));
-}
-
-.Text-orange {
-  --value: hsla(24deg, 93%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));
-}
-
-.Text-pink {
-  --value: hsla(324deg, 79%, var(--ls-text-lightness, 60%), var(--ls-text-alpha, 1));
-}
-
-.Text-brown {
-  --value: hsla(0deg, 33%, var(--ls-text-lightness, 38%), var(--ls-text-alpha, 1));
-}
-
-.Text-indigo {
-  --value: hsla(270deg, 100%, var(--ls-text-lightness, 25%), var(--ls-text-alpha, 1));
-}
-
-.Text-white {
-  --value: hsla(0deg, 0%, var(--ls-text-lightness, 100%), var(--ls-text-alpha, 1));
-}
-
-.Text-silver {
-  --value: hsla(0deg, 0%, var(--ls-text-lightness, 75%), var(--ls-text-alpha, 1));
-}
-
-.Text-gray {
-  --value: hsla(213deg, 8%, var(--ls-text-lightness, 45%), var(--ls-text-alpha, 1));
-}
-
-.Text-primary {
-  --value: hsla(260deg, 81%, var(--ls-text-lightness, 38%), var(--ls-text-alpha, 1));
-}
-
-.Text-secondary {
-  --value: hsla(208deg, 7%, var(--ls-text-lightness, 46%), var(--ls-text-alpha, 1));
-}
-
-.Text-success {
-  --value: hsla(134deg, 61%, var(--ls-text-lightness, 41%), var(--ls-text-alpha, 1));
-}
-
-.Text-info {
-  --value: hsla(212deg, 97%, var(--ls-text-lightness, 43%), var(--ls-text-alpha, 1));
-}
-
-.Text-warning {
-  --value: hsla(45deg, 100%, var(--ls-text-lightness, 51%), var(--ls-text-alpha, 1));
-}
-
-.Text-danger {
-  --value: hsla(354deg, 66%, var(--ls-text-lightness, 54%), var(--ls-text-alpha, 1));
-}
-
-.Text-light {
-  --value: hsla(210deg, 20%, var(--ls-text-lightness, 98%), var(--ls-text-alpha, 1));
-}
-
-.Text-dark {
-  --value: hsla(210deg, 10%, var(--ls-text-lightness, 23%), var(--ls-text-alpha, 1));
-}
-
-.Text-night {
-  --value: hsla(0deg, 0%, var(--ls-text-lightness, 0%), var(--ls-text-alpha, 1));
-}
-
-.Border-red {
-  --value: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-lime {
-  --value: hsla(120deg, 100%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-blue {
-  --value: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-yellow {
-  --value: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-cyan {
-  --value: hsla(180deg, 100%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-magenta {
-  --value: hsla(300deg, 100%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-purple {
-  --value: hsla(261deg, 51%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-green {
-  --value: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-maroon {
-  --value: hsla(331deg, 74%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-navy {
-  --value: hsla(210deg, 100%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-teal {
-  --value: hsla(162deg, 73%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-olive {
-  --value: hsla(60deg, 100%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-orange {
-  --value: hsla(24deg, 93%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-pink {
-  --value: hsla(324deg, 79%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-brown {
-  --value: hsla(0deg, 33%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-indigo {
-  --value: hsla(270deg, 100%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-white {
-  --value: hsla(0deg, 0%, 90%, var(--ls-border-alpha, 1));
-}
-
-.Border-silver {
-  --value: hsla(0deg, 0%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-gray {
-  --value: hsla(213deg, 8%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-primary {
-  --value: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-secondary {
-  --value: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-success {
-  --value: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-info {
-  --value: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-warning {
-  --value: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-danger {
-  --value: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1));
-}
-
-.Border-light {
-  --value: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1));
-}
-
-.Border-dark {
-  --value: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1));
-}
-
-.Border-night {
-  --value: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1));
-}
-
-/*# sourceMappingURL=test.css.map */

package/dist/css/test.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../scss/test.scss","../../scss/Abstracts/Functions/_shadow.scss","../../scss/Abstracts/Mixins/_utilities.scss","../../scss/Abstracts/_variables.scss","test.css"],"names":[],"mappings":"AAAA;;CAAA;ACIA;;;;CAAA;ACJA;;;;CAAA;AAgEA;;;EAAA;AC7DA,iBAAA;AAiCA,gBAAA;AAmDA;;CAAA;AAgBA;;;;CAAA;AAcA;;CAAA;AASA;;CAAA;AAOA;;CAAA;AAsBA;;;CAAA;AAeA;;;;;CAAA;AAuBA;;;CAAA;AHtKE;EACE,kFAAA;AIwBJ;;AJzBE;EACE,mFAAA;AI4BJ;;AJ7BE;EACE,kFAAA;AIgCJ;;AJjCE;EACE,kFAAA;AIoCJ;;AJrCE;EACE,mFAAA;AIwCJ;;AJzCE;EACE,mFAAA;AI4CJ;;AJ7CE;EACE,kFAAA;AIgDJ;;AJjDE;EACE,kFAAA;AIoDJ;;AJrDE;EACE,kFAAA;AIwDJ;;AJzDE;EACE,mFAAA;AI4DJ;;AJ7DE;EACE,kFAAA;AIgEJ;;AJjEE;EACE,kFAAA;AIoEJ;;AJrEE;EACE,iFAAA;AIwEJ;;AJzEE;EACE,kFAAA;AI4EJ;;AJ7EE;EACE,gFAAA;AIgFJ;;AJjFE;EACE,mFAAA;AIoFJ;;AJrFE;EACE,gFAAA;AIwFJ;;AJzFE;EACE,+EAAA;AI4FJ;;AJ7FE;EACE,iFAAA;AIgGJ;;AJjGE;EACE,kFAAA;AIoGJ;;AJrGE;EACE,iFAAA;AIwGJ;;AJzGE;EACE,kFAAA;AI4GJ;;AJ7GE;EACE,kFAAA;AIgHJ;;AJjHE;EACE,kFAAA;AIoHJ;;AJrHE;EACE,kFAAA;AIwHJ;;AJzHE;EACE,kFAAA;AI4HJ;;AJ7HE;EACE,kFAAA;AIgIJ;;AJjIE;EACE,8EAAA;AIoIJ;;AJ/HE;EACE,0DAAA;AIkIJ;;AJnIE;EACE,2DAAA;AIsIJ;;AJvIE;EACE,0DAAA;AI0IJ;;AJ3IE;EACE,0DAAA;AI8IJ;;AJ/IE;EACE,2DAAA;AIkJJ;;AJnJE;EACE,2DAAA;AIsJJ;;AJvJE;EACE,0DAAA;AI0JJ;;AJ3JE;EACE,0DAAA;AI8JJ;;AJ/JE;EACE,0DAAA;AIkKJ;;AJnKE;EACE,2DAAA;AIsKJ;;AJvKE;EACE,0DAAA;AI0KJ;;AJ3KE;EACE,0DAAA;AI8KJ;;AJ/KE;EACE,yDAAA;AIkLJ;;AJnLE;EACE,0DAAA;AIsLJ;;AJvLE;EACE,wDAAA;AI0LJ;;AJ3LE;EACE,2DAAA;AI8LJ;;AJ/LE;EACE,uDAAA;AIkMJ;;AJnME;EACE,uDAAA;AIsMJ;;AJvME;EACE,yDAAA;AI0MJ;;AJ3ME;EACE,0DAAA;AI8MJ;;AJ/ME;EACE,yDAAA;AIkNJ;;AJnNE;EACE,0DAAA;AIsNJ;;AJvNE;EACE,0DAAA;AI0NJ;;AJ3NE;EACE,0DAAA;AI8NJ;;AJ/NE;EACE,0DAAA;AIkOJ;;AJnOE;EACE,0DAAA;AIsOJ;;AJvOE;EACE,0DAAA;AI0OJ;;AJ3OE;EACE,uDAAA;AI8OJ","file":"test.css","sourcesContent":["/*\r\n// Configuration\r\n*/\r\n\r\n@import \"Abstracts/_dir-functions\";\r\n@import \"Abstracts/_dir-mixins\";\r\n@import \"Abstracts/variables\";\r\n\r\n//.strip-unit {\r\n//  $length: 42px;\r\n//  width: #{$length};\r\n//  --length: #{strip-unit($length)};\r\n//}\r\n\r\n//@each $breakpointKey, $breakpointValue in $responsive-Breakpoints {\r\n//  .Col-#{$breakpointKey} {\r\n//    --value: #{$breakpointValue};\r\n//  }\r\n//}\r\n\r\n//@each $colorKey, $colorValue in $colors-Background-hsla {\r\n//  .Bg-#{$colorKey} {\r\n//    --value: #{$colorValue};\r\n//  }\r\n//}\r\n\r\n@each $colorKey, $colorValue in $colors-Text-hsla {\r\n  .Text-#{$colorKey} {\r\n    --value: #{$colorValue};\r\n  }\r\n}\r\n\r\n@each $colorKey, $colorValue in $colors-Border-hsla {\r\n  .Border-#{$colorKey} {\r\n    --value: #{$colorValue};\r\n  }\r\n}\r\n","// ===========================================================================\r\n// Functions - Shadow\r\n// ===========================================================================\r\n\r\n/*\r\n  https://brumm.af/shadows\r\n  https://tobiasahlin.com/blog/layered-smooth-box-shadows/\r\n  https://css-tricks.com/getting-deep-into-shadows/\r\n*/\r\n\r\n@function Shadow-Builder($suffix, $layers, $horizontal-map, $vertical-map, $blur-map, $spread-map, $color-map) {\r\n  $result: (); // left + right + main bottom\r\n  $result-inner: (); // inset\r\n  $result-both: (); // inner + outer\r\n  $result-br: (); // bottom + right\r\n\r\n  $result-t: (); // top\r\n  $result-r: (); // right\r\n  $result-l: (); // left\r\n  $result-b: (); // bottom\r\n\r\n  $result-x: (); // left + right\r\n  $result-y: (); // top + bottom\r\n\r\n  @for $index from 1 through $layers {\r\n    $left: if(length($horizontal-map)==0, 0, nth($horizontal-map, $index));\r\n    $spread: if(length($spread-map)==0, 0, nth($spread-map, $index));\r\n\r\n    $top: nth($vertical-map, $index);\r\n    $blur: nth($blur-map, $index);\r\n    $color: nth($color-map, $index);\r\n\r\n    $result: append($result, #{$left} #{$top} #{$blur} #{$spread} #{$color}, \"comma\");\r\n    $result-both: append($result-both, #{$left} #{$top} #{$blur} #{$spread} #{$color}, \"comma\");\r\n\r\n    $result-inner: append($result-inner, #{0} #{0} #{$blur} #{0} #{$color} inset, \"comma\");\r\n    $result-both: append($result-both, #{0} #{0} #{$blur} #{0} #{$color} inset, \"comma\");\r\n    $result-br: append($result-br, #{$top} #{$top} #{$blur} #{$spread} #{$color}, \"comma\");\r\n\r\n    $result-t: append($result-t, #{0} #{-$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n    $result-r: append($result-r, #{$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n    $result-l: append($result-l, #{-$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n    $result-b: append($result-b, #{0} #{$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n\r\n    $result-x: append($result-x, #{$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n    $result-x: append($result-x, #{-$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n\r\n    $result-y: append($result-y, #{0} #{-$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n    $result-y: append($result-y, #{0} #{$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n  }\r\n  $suffix: if($suffix==null, \"\", \"-#{$suffix}\");\r\n\r\n  $return-map: ();\r\n  @if (length($result) > 0) {\r\n    $return-map: (\r\n            inset#{$suffix} : $result-inner,\r\n            both#{$suffix} : $result-both,\r\n            br#{$suffix} : $result-br,\r\n            t#{$suffix} : $result-t,\r\n            r#{$suffix} : $result-r,\r\n            l#{$suffix} : $result-l,\r\n            b#{$suffix} : $result-b,\r\n            x#{$suffix} : $result-x,\r\n            y#{$suffix} : $result-y,\r\n    );\r\n  }\r\n  @return $return-map;\r\n}\r\n\r\n// box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];\r\n// $Shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.18),\r\n//          0px 2px 2px 0px rgba(0, 0, 0, 0.12),\r\n//          0px 4px 6px 0px rgba(0, 0, 0, 0.06);\r\n@function Shadow-Separator($suffix, $Shadow) {\r\n  // lists\r\n  $horizontal-map: ();\r\n  $vertical-map: ();\r\n  $blur-map: ();\r\n  $spread-map: ();\r\n  $color-map: ();\r\n\r\n  @each $value in $Shadow {\r\n    @for $index from 1 through length($value) {\r\n      $layer: nth($value, $index);\r\n      @if ($index==1) {\r\n        $horizontal-map: append($horizontal-map, $layer, \"comma\");\r\n      } @else if ($index==2) {\r\n        $vertical-map: append($vertical-map, $layer, \"comma\");\r\n      } @else if ($index==3) {\r\n        $blur-map: append($blur-map, $layer, \"comma\");\r\n      } @else if ($index==4) {\r\n        $spread-map: append($spread-map, $layer, \"comma\");\r\n      } @else if ($index==5) {\r\n        $color-map: append($color-map, $layer, \"comma\");\r\n      }\r\n    }\r\n  }\r\n\r\n  @return Shadow-Builder($suffix, length($Shadow), $horizontal-map, $vertical-map, $blur-map, $spread-map, $color-map);\r\n}\r\n\r\n/// Based on $Shadow: 0px 1px 1px -1px rgba($Black, 0.18), 0px 2px 2px 0px rgba($Black, 0.12), 0px 4px 6px 0px rgba($Black, 0.06);\r\n@function Colored-shadow($color: black) {\r\n  // using best result of shadow set\r\n  @return 0 1px 1px -1px rgba($color, 0.18), 0px 2px 2px 0px rgba($color, 0.12), 0px 4px 6px 0px rgba($color, 0.06);\r\n}\r\n\r\n@function Colored-shadow-inner($color: black) {\r\n  // using best result of shadow set\r\n  @return 0 0 1px 0 rgba($color, 0.18) inset, 0 0 2px 0 rgba($color, 0.12) inset, 0 0 6px 0 rgba($color, 0.06) inset;\r\n}\r\n\r\n// box-shadow: Shadow-mixer($Shadow, $Shadow-inner);\r\n@function Shadow-mixer($shadow...) {\r\n  $result: ();\r\n\r\n  @each $value in $shadow {\r\n    @if $value != null {\r\n      $result: append($result, $value, \"comma\");\r\n    }\r\n    @if $value == none and length($shadow) > 1 {\r\n      @warn \"The keyword 'none' must be used as a single argument.\";\r\n    }\r\n  }\r\n\r\n  @if (length($result) > 0) {\r\n    @return $result;\r\n  }\r\n\r\n  @return none;\r\n}","/*\r\n// ===========================================================================\r\n// Mixins - Utilities\r\n// ===========================================================================\r\n*/\r\n@mixin Utility-applier($important, $class-prefix, $properties, $values, $pseudo:null ) {\r\n  @each $key, $value in $values {\r\n    // Don't prefix if value key is null (eg. with shadow class)\r\n    $class-suffix: if($key, if($class-prefix == \"\"  , \"\", \"-\") + $key, \"\");\r\n\r\n    @if $value != null {\r\n      .#{$class-prefix + $class-suffix} {\r\n\r\n        @if $pseudo != null {\r\n          &:#{$pseudo} {\r\n            @each $property in $properties {\r\n              #{$property}: $value if($important, !important, null);\r\n            }\r\n          }\r\n        } @else {\r\n          @each $property in $properties {\r\n            #{$property}: $value if($important, !important, null);\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n@mixin Utility-value-separator($utility, $breakpoints: $responsive-Breakpoints) {\r\n  $values: map-get($utility, Values);\r\n\r\n  // If the values are a list or string, convert it into a map\r\n  @if type-of($values) == \"string\" or type-of(nth($values, 1)) != \"list\" {\r\n    $values: zip($values, $values);\r\n  }\r\n\r\n  $properties: map-get($utility, Properties);\r\n  // Multiple properties are possible, for example with vertical or horizontal margins or paddings\r\n  @if type-of($properties) == \"string\" {\r\n    $properties: append((), $properties);\r\n  }\r\n\r\n  $important: map-get($utility, Important);\r\n  $responsive: map-get($utility, Responsive);\r\n  $pseudo: map-get($utility, Pseudo); // null before after\r\n  $print: map-get($utility, Print); // TODO: media print..\r\n\r\n  // Use custom class if present\r\n  $class-prefix: if(map-has-key($utility, Prefix), map-get($utility, Prefix), nth($properties, 1));\r\n  $class-prefix: if($class-prefix == null, \"\", $class-prefix);\r\n\r\n  @if $responsive {\r\n    @each $breakpointKey, $breakpointValue in $breakpoints {\r\n      $responsive-Infix: if($breakpointValue == 0, \"\", \"-#{$breakpointKey}\");\r\n      @include media-min-W($breakpointValue) {\r\n        @include Utility-applier($important, $class-prefix + $responsive-Infix, $properties, $values, $pseudo);\r\n      }\r\n    }\r\n  } @else {\r\n    @include Utility-applier($important, $class-prefix, $properties, $values, $pseudo);\r\n  }\r\n}\r\n\r\n/*\r\n *  KEY     : VALUES\r\n * \"Opacity\": (Prefix: Opacity, Properties: opacity, Important: true, Responsive: false, Values: $opacity-map,),\r\n */\r\n@mixin Utilities($utilities) {\r\n  @each $keyUtil, $valueUtil in $utilities {\r\n    @include Utility-value-separator($valueUtil);\r\n  }\r\n}","// ===========================================================================\r\n// Color System\r\n// ===========================================================================\r\n/*@formatter:off*/\r\n$White    : hsl(0, 0%, 100%) !default;\r\n$Black    : hsl(0,0%,0%) !default;\r\n$Silver   : hsl(0, 0%, 75%) !default;\r\n$Gray\t  :\thsl(213,8%,45%)  !default;\r\n\r\n$Red      : hsl(354,66%,54%) !default;\r\n$Lime     : hsl(120, 100%, 50%) !default;\r\n$Blue     : hsl(212,97%,43%) !default;\r\n$Yellow   : hsl(45,100%,51%) !default;\r\n$Cyan     : hsl(180,100%,50%) !default;\r\n$Magenta  : hsl(300,100%, 50%) !default;\r\n\r\n$Purple   : hsl(261,51%,51%) !default;\r\n$Green    : hsl(134,61%,41%) !default;\r\n$Maroon   : hsl(331, 74%, 30%) !default;\r\n$Navy     : hsl(210, 100%, 12%) !default;\r\n$Teal     : hsl(162,73%,46%) !default;\r\n$Olive    : hsl(60,100%, 25%) !default;\r\n$Orange   : hsl(24,93%,50%) !default;\r\n$Pink     : hsl(324,79%,60%) !default;\r\n$Brown    : hsl(0, 33%, 38%) !default;\r\n$Indigo   : hsl(270, 100%, 25%) !default;\r\n\r\n$Success    : $Green !default;\r\n$Info       : $Blue !default;\r\n$Warning    : $Yellow !default;\r\n$Danger     : $Red !default;\r\n\r\n$Primary    : hsl(260,81%,38%) !default;\r\n$Secondary  : hsl(208,7%,46%) !default;\r\n$Light      : hsl(210,20%,98%) !default;\r\n$Dark       : hsl(210,10%,23%) !default;\r\n/*@formatter:on*/\r\n\r\n// 'red', 'lime', 'blue', 'yellow', 'cyan', 'magenta', 'purple', 'green', 'maroon', 'navy', 'teal', 'olive', 'orange', 'pink', 'brown', 'indigo', 'white', 'silver', 'gray'\r\n$colors: (\r\n        \"red\" : $Red,\r\n        \"lime\" : $Lime,\r\n        \"blue\" : $Blue,\r\n        \"yellow\" : $Yellow,\r\n        \"cyan\" : $Cyan,\r\n        \"magenta\" : $Magenta,\r\n        \"purple\" : $Purple,\r\n        \"green\" : $Green,\r\n        \"maroon\" : $Maroon,\r\n        \"navy\" : $Navy,\r\n        \"teal\" : $Teal,\r\n        \"olive\" : $Olive,\r\n        \"orange\" : $Orange,\r\n        \"pink\" : $Pink,\r\n        \"brown\" : $Brown,\r\n        \"indigo\" : $Indigo,\r\n        \"white\" : $White,\r\n        \"silver\" : $Silver,\r\n        \"gray\" : $Gray,\r\n) !default;\r\n\r\n$colors-Theme: (\r\n        \"primary\" : $Primary,\r\n        \"secondary\" : $Secondary,\r\n        \"success\" : $Success,\r\n        \"info\" : $Info,\r\n        \"warning\" : $Warning,\r\n        \"danger\" : $Danger,\r\n        \"light\" : $Light,\r\n        \"dark\" : $Dark,\r\n        \"night\" : $Black\r\n) !default;\r\n\r\n$theme-Components: (\r\n        'Theme': null,\r\n        'Alert':'alert',\r\n        'Calendar':'calendar',\r\n        'Card':'card',\r\n        'Caret':'caret',\r\n        'Toast':'toast',\r\n        'Btn':'btn',\r\n        'Btn-outline':'btn',\r\n        'List-item':'lst',\r\n) !default;\r\n\r\n$var-Prefix: ls-;\r\n\r\n/*\r\n// Colors\r\n*/\r\n\r\n$colors-all: map-merge($colors, $colors-Theme);\r\n\r\n$colors-Background-hsla: ();\r\n$colors-Background-hsla: Color-hsla($colors-all, --ls-bg-alpha, --ls-bg-lightness);\r\n\r\n$colors-Text-hsla: ();\r\n$colors-Text-hsla: Color-hsla($colors-all, --ls-text-alpha, --ls-text-lightness);\r\n\r\n$colors-Border-hsla: ();\r\n$colors-Border-hsla: Color-hsla($colors-all, --ls-border-alpha, --ls-border-lightness);\r\n\r\n\r\n/*\r\n// ===========================================================================\r\n// Utils\r\n// ===========================================================================\r\n*/\r\n\r\n$color-Alpha-map: (0: 0, 5: .05, 10: .1, 20: .2, 30: .3, 40: .4, 50: .5, 60: .6, 70: .7, 80: .8, 90: .9, 100: 1) !default;\r\n$color-Lightness-map: (0:0%, 5: 5%, 10:10%, 20:20%, 30:30%, 40:40%, 50:50%, 60:60%, 70:70%, 80:80%, 90:90%, 100:100%) !default;\r\n$opacity-map: (0: 0, 10: .1, 20: .2, 30: .3, 40: .4, 50: .5, 60: .6, 70: .7, 80: .8, 90: .9, 100: 1) !default;\r\n$sizes-percents: (\r\n        10:10%, 20:20%, 30:30%, 40:40%, 50:50%, 60:60%, 70:70%, 80:80%, 90:90%, 100:100%,\r\n        25:25%, 75:75%, 33:33.333%, 66:66.666%, auto:auto\r\n) !default;\r\n\r\n/*\r\n// Border radius\r\n*/\r\n\r\n$Rounded: .25rem !default;\r\n$Rounded-2x: .5rem !default;\r\n$Rounded-3x: .75rem !default;\r\n$Rounded-pill: 50rem !default;\r\n\r\n/*\r\n// Border\r\n*/\r\n\r\n$Border-width: 1px !default;\r\n$Border-widths: (0: 0, 1: 1px, 2: 2px, 3: 3px, 4: 4px, 5: 5px) !default;\r\n\r\n/*\r\n// Spacing\r\n*/\r\n\r\n$spacer: 1rem !default; // 16px\r\n$spacers-map: (\r\n        0: 0,\r\n        1: ($spacer * 0.25),\r\n        2: ($spacer * 0.5),\r\n        3: ($spacer * 1.00),\r\n        4: ($spacer * 1.50),\r\n        5: ($spacer * 3.00),\r\n);\r\n$negative-spacers: (\r\n        N1: ($spacer * -0.25),\r\n        N2: ($spacer * -0.5),\r\n        N3: ($spacer * -1.00),\r\n        N4: ($spacer * -1.50),\r\n        N5: ($spacer * -3.00),\r\n);\r\n\r\n\r\n/*\r\n// Grid System\r\n// Set the number of columns and specify the width of the gutters.\r\n*/\r\n\r\n$breakpoints-Grid: (none: 0, sm : 480px, md : 768px, lg : 1024px, xl : 1280px, xxl : 1440px);\r\n$breakpoints-Container: (sm : 480px, md : 768px, lg : 976px, xl : 1232px, xxl : 1376px);\r\n$responsive-Breakpoints: $breakpoints-Grid;\r\n\r\n$grid-Columns: 12 !default;\r\n$grid-Gutter-width: 1.5rem; // 1rem\r\n$grid-Row-Columns: 6 !default;\r\n\r\n$gutters-map: $spacers-map !default;\r\n\r\n/*\r\n// Shadow\r\n// Box-shadow with rgba variable\r\n// --component-shadow-color: 0, 0, 0; // Has to be like this :p\r\n// https://stackoverflow.com/questions/59250927/box-shadow-with-rgba-variable\r\n*/\r\n$Shadow-color: var(--#{$var-Prefix}shadow-color-rgb);\r\n\r\n$Shadow: 0px 1px 1px -1px rgba($Shadow-color, 0.18), 0px 2px 2px 0px rgba($Shadow-color, 0.12), 0px 4px 6px 0px rgba($Shadow-color, 0.06);\r\n$Shadow-2x: 0px 1px 1px 0px rgba($Shadow-color, 0.18), 0px 2px 3px 0px rgba($Shadow-color, 0.12), 0px 6px 9px 0px rgba($Shadow-color, 0.06);\r\n$Shadow-3x: 0px 2px 2px 0px rgba($Shadow-color, 0.18), 0px 3px 4px 0px rgba($Shadow-color, 0.12), 0px 9px 12px 0px rgba($Shadow-color, 0.06);\r\n\r\n$Shadow-map: (null: $Shadow, 2x: $Shadow-2x, 3x: $Shadow-3x,);\r\n$Shadow-map: map-merge($Shadow-map, Shadow-Separator(null, $Shadow));\r\n$Shadow-map: map-merge($Shadow-map, Shadow-Separator(2x, $Shadow-2x));\r\n$Shadow-map: map-merge($Shadow-map, Shadow-Separator(3x, $Shadow-3x));\r\n\r\n$Drop-shadow: drop-shadow(0px 1px 1px rgba($Shadow-color, 0.72)) drop-shadow(0px 2px 2px rgba($Shadow-color, 0.48)) drop-shadow(0px 4px 6px rgba($Shadow-color, 0.24));\r\n$Drop-shadow-2x: drop-shadow(0px 1px 1px rgba($Shadow-color, 0.72)) drop-shadow(0px 2px 3px rgba($Shadow-color, 0.48)) drop-shadow(0px 6px 9px rgba($Shadow-color, 0.24));\r\n$Drop-shadow-3x: drop-shadow(0px 2px 2px rgba($Shadow-color, 0.72)) drop-shadow(0px 3px 4px rgba($Shadow-color, 0.48)) drop-shadow(0px 9px 12px rgba($Shadow-color, 0.24));\r\n\r\n$Drop-shadow-map: (0: drop-shadow(0 0 #0000), null: $Drop-shadow, 2x: $Drop-shadow-2x, 3x: $Drop-shadow-3x,);\r\n\r\n/*\r\n// Typography\r\n// Font, line-height, and color for body text, headings, and more.\r\n*/\r\n// TODO: font\r\n$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`\r\n$font-family-sans-serif: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !default;\r\n$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\r\n\r\n$font-weight-lighter: lighter !default;\r\n$font-weight-light: 300 !default;\r\n$font-weight-normal: 400 !default;\r\n$font-weight-bold: 700 !default;\r\n$font-weight-bolder: bolder !default;\r\n","/*\n// Configuration\n*/\n/*\n  https://brumm.af/shadows\n  https://tobiasahlin.com/blog/layered-smooth-box-shadows/\n  https://css-tricks.com/getting-deep-into-shadows/\n*/\n/*\n// ===========================================================================\n// Mixins - Utilities\n// ===========================================================================\n*/\n/*\n *  KEY     : VALUES\n * \"Opacity\": (Prefix: Opacity, Properties: opacity, Important: true, Responsive: false, Values: $opacity-map,),\n */\n/*@formatter:off*/\n/*@formatter:on*/\n/*\n// Colors\n*/\n/*\n// ===========================================================================\n// Utils\n// ===========================================================================\n*/\n/*\n// Border radius\n*/\n/*\n// Border\n*/\n/*\n// Spacing\n*/\n/*\n// Grid System\n// Set the number of columns and specify the width of the gutters.\n*/\n/*\n// Shadow\n// Box-shadow with rgba variable\n// --component-shadow-color: 0, 0, 0; // Has to be like this :p\n// https://stackoverflow.com/questions/59250927/box-shadow-with-rgba-variable\n*/\n/*\n// Typography\n// Font, line-height, and color for body text, headings, and more.\n*/\n.Text-red {\n  --value: hsla(354deg, 66%, var(--ls-text-lightness, 54%), var(--ls-text-alpha, 1));\n}\n\n.Text-lime {\n  --value: hsla(120deg, 100%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-blue {\n  --value: hsla(212deg, 97%, var(--ls-text-lightness, 43%), var(--ls-text-alpha, 1));\n}\n\n.Text-yellow {\n  --value: hsla(45deg, 100%, var(--ls-text-lightness, 51%), var(--ls-text-alpha, 1));\n}\n\n.Text-cyan {\n  --value: hsla(180deg, 100%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-magenta {\n  --value: hsla(300deg, 100%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-purple {\n  --value: hsla(261deg, 51%, var(--ls-text-lightness, 51%), var(--ls-text-alpha, 1));\n}\n\n.Text-green {\n  --value: hsla(134deg, 61%, var(--ls-text-lightness, 41%), var(--ls-text-alpha, 1));\n}\n\n.Text-maroon {\n  --value: hsla(331deg, 74%, var(--ls-text-lightness, 30%), var(--ls-text-alpha, 1));\n}\n\n.Text-navy {\n  --value: hsla(210deg, 100%, var(--ls-text-lightness, 12%), var(--ls-text-alpha, 1));\n}\n\n.Text-teal {\n  --value: hsla(162deg, 73%, var(--ls-text-lightness, 46%), var(--ls-text-alpha, 1));\n}\n\n.Text-olive {\n  --value: hsla(60deg, 100%, var(--ls-text-lightness, 25%), var(--ls-text-alpha, 1));\n}\n\n.Text-orange {\n  --value: hsla(24deg, 93%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-pink {\n  --value: hsla(324deg, 79%, var(--ls-text-lightness, 60%), var(--ls-text-alpha, 1));\n}\n\n.Text-brown {\n  --value: hsla(0deg, 33%, var(--ls-text-lightness, 38%), var(--ls-text-alpha, 1));\n}\n\n.Text-indigo {\n  --value: hsla(270deg, 100%, var(--ls-text-lightness, 25%), var(--ls-text-alpha, 1));\n}\n\n.Text-white {\n  --value: hsla(0deg, 0%, var(--ls-text-lightness, 100%), var(--ls-text-alpha, 1));\n}\n\n.Text-silver {\n  --value: hsla(0deg, 0%, var(--ls-text-lightness, 75%), var(--ls-text-alpha, 1));\n}\n\n.Text-gray {\n  --value: hsla(213deg, 8%, var(--ls-text-lightness, 45%), var(--ls-text-alpha, 1));\n}\n\n.Text-primary {\n  --value: hsla(260deg, 81%, var(--ls-text-lightness, 38%), var(--ls-text-alpha, 1));\n}\n\n.Text-secondary {\n  --value: hsla(208deg, 7%, var(--ls-text-lightness, 46%), var(--ls-text-alpha, 1));\n}\n\n.Text-success {\n  --value: hsla(134deg, 61%, var(--ls-text-lightness, 41%), var(--ls-text-alpha, 1));\n}\n\n.Text-info {\n  --value: hsla(212deg, 97%, var(--ls-text-lightness, 43%), var(--ls-text-alpha, 1));\n}\n\n.Text-warning {\n  --value: hsla(45deg, 100%, var(--ls-text-lightness, 51%), var(--ls-text-alpha, 1));\n}\n\n.Text-danger {\n  --value: hsla(354deg, 66%, var(--ls-text-lightness, 54%), var(--ls-text-alpha, 1));\n}\n\n.Text-light {\n  --value: hsla(210deg, 20%, var(--ls-text-lightness, 98%), var(--ls-text-alpha, 1));\n}\n\n.Text-dark {\n  --value: hsla(210deg, 10%, var(--ls-text-lightness, 23%), var(--ls-text-alpha, 1));\n}\n\n.Text-night {\n  --value: hsla(0deg, 0%, var(--ls-text-lightness, 0%), var(--ls-text-alpha, 1));\n}\n\n.Border-red {\n  --value: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-lime {\n  --value: hsla(120deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-blue {\n  --value: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-yellow {\n  --value: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-cyan {\n  --value: hsla(180deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-magenta {\n  --value: hsla(300deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-purple {\n  --value: hsla(261deg, 51%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-green {\n  --value: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-maroon {\n  --value: hsla(331deg, 74%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-navy {\n  --value: hsla(210deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-teal {\n  --value: hsla(162deg, 73%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-olive {\n  --value: hsla(60deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-orange {\n  --value: hsla(24deg, 93%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-pink {\n  --value: hsla(324deg, 79%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-brown {\n  --value: hsla(0deg, 33%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-indigo {\n  --value: hsla(270deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-white {\n  --value: hsla(0deg, 0%, 90%, var(--ls-border-alpha, 1));\n}\n\n.Border-silver {\n  --value: hsla(0deg, 0%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-gray {\n  --value: hsla(213deg, 8%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-primary {\n  --value: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-secondary {\n  --value: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-success {\n  --value: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-info {\n  --value: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-warning {\n  --value: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-danger {\n  --value: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-light {\n  --value: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1));\n}\n\n.Border-dark {\n  --value: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1));\n}\n\n.Border-night {\n  --value: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1));\n}\n\n/*# sourceMappingURL=test.css.map */\n"]}

package/scss/Architecture/Components/TODO/_badge.scss

@@ -1,7 +0,0 @@
-// ===========================================================================
-// Components - Badge
-// ===========================================================================
-
-.Badge {
-
-}

package/scss/Architecture/Components/TODO/_tooltip.scss

@@ -1,7 +0,0 @@
-// ===========================================================================
-// Components - Tooltip
-// ===========================================================================
-
-.Tooltip {
-
-}

package/scss/Architecture/Components/_themed.scss

@@ -1,45 +0,0 @@
-// ===========================================================================
-// Components - Themed
-// ST: With Specific Theme
-// ===========================================================================
-
-$component-Name: $var-Prefix + '';
-@import "../_theme-customized";
-
-.Themed-body {
-  color: $fg-Body;
-  background-color: $bg-Body;
-
-  padding: 1rem;
-}
-
-.Themed {
-  color: $fg-Surface;
-  background-color: $bg-Surface;
-
-  border: $Border;
-  box-shadow: $Shadow;
-
-  padding: .5rem;
-
-  &.Themed-outline {
-    color: $fg-Lightest;
-    background-color: $bg-Lightest;
-
-    border-color: $bg-Darkest;
-  }
-
-  .Themed-title {
-    color: $fg-Dark;
-    background-color: $bg-Dark;
-
-    padding: .5rem;
-  }
-
-  .Themed-footer {
-    color: $fg-Lightest;
-    background-color: $bg-Lightest;
-
-    padding: .5rem;
-  }
-}

package/scss/Architecture/__dir-svg.scss

@@ -1,7 +0,0 @@
-/*
-// ===========================================================================
-// Svg
-// ===========================================================================
-*/
-
-@import "Svg/icons";

package/scss/Architecture/__theme-colors.scss

@@ -1,51 +0,0 @@
-/*#region Theme Variables */
-
-/*
-// Background colors
-*/
-
-$bg: var(--#{$var-Prefix}bg);
-$bg-hsl: var(--#{$var-Prefix}bg-hsl);
-
-$bg-Body: var(--#{$var-Prefix}bg-body);
-$bg-Active: var(--#{$var-Prefix}bg-active);
-$bg-Active-hsl: var(--#{$var-Prefix}bg-active-hsl);
-$bg-Surface: var(--#{$var-Prefix}bg-surface);
-
-$bg-Lightest: var(--#{$var-Prefix}bg-lightest);
-$bg-Light: var(--#{$var-Prefix}bg-light);
-$bg-Dark: var(--#{$var-Prefix}bg-dark);
-$bg-Darkest: var(--#{$var-Prefix}bg-darkest);
-
-/*
-// Foreground colors
-*/
-
-$fg-Muted: var(--#{$var-Prefix}fg-muted);
-$fg-Body: var(--#{$var-Prefix}fg-body);
-$fg-Active: var(--#{$var-Prefix}fg-active);
-$fg-Surface: var(--#{$var-Prefix}fg-surface);
-
-$fg-Lightest: var(--#{$var-Prefix}fg-lightest);
-$fg-Light: var(--#{$var-Prefix}fg-light);
-$fg-Dark: var(--#{$var-Prefix}fg-dark);
-$fg-Darkest: var(--#{$var-Prefix}fg-darkest);
-
-/*
-// Shadows
-*/
-
-$Shadow-color: var(--#{$var-Prefix}shadow-color-rgb);
-$Shadow: Colored-shadow($Shadow-color);
-$Shadow-inner: Colored-shadow-inner($Shadow-color);
-
-/*
-// Border
-*/
-
-$Border-color-hsl: var(--#{$var-Prefix}border-color-hsl);
-$Border-color: var(--#{$var-Prefix}border-color);
-$Border: 1px solid #{$Border-color};
-$Border-radius: var(--#{$var-Prefix}border-radius);
-
-/*#endregion */

package/scss/Architecture/__theme-customized.scss

@@ -1,51 +0,0 @@
-/*#region Theme Variables */
-
-/*
-// Background colors
-*/
-
-$bg: var(--#{$component-Name}bg, var(--#{$var-Prefix}bg));
-$bg-hsl: var(--#{$component-Name}bg-hsl, var(--#{$var-Prefix}bg-hsl));
-
-$bg-Body: var(--#{$component-Name}bg-body, var(--#{$var-Prefix}bg-body));
-$bg-Active: var(--#{$component-Name}bg-active, var(--#{$var-Prefix}bg-active));
-$bg-Active-hsl: var(--#{$component-Name}bg-active-hsl, var(--#{$var-Prefix}bg-active-hsl));
-$bg-Surface: var(--#{$component-Name}bg-surface, var(--#{$var-Prefix}bg-surface));
-
-$bg-Lightest: var(--#{$component-Name}bg-lightest, var(--#{$var-Prefix}bg-lightest));
-$bg-Light: var(--#{$component-Name}bg-light, var(--#{$var-Prefix}bg-light));
-$bg-Dark: var(--#{$component-Name}bg-dark, var(--#{$var-Prefix}bg-dark));
-$bg-Darkest: var(--#{$component-Name}bg-darkest, var(--#{$var-Prefix}bg-darkest));
-
-/*
-// Foreground colors
-*/
-
-$fg-Muted: var(--#{$component-Name}fg-muted, var(--#{$var-Prefix}fg-muted));
-$fg-Body: var(--#{$component-Name}fg-body, var(--#{$var-Prefix}fg-body));
-$fg-Active: var(--#{$component-Name}fg-active, var(--#{$var-Prefix}fg-active));
-$fg-Surface: var(--#{$component-Name}fg-surface, var(--#{$var-Prefix}fg-surface));
-
-$fg-Lightest: var(--#{$component-Name}fg-lightest, var(--#{$var-Prefix}fg-lightest));
-$fg-Light: var(--#{$component-Name}fg-light, var(--#{$var-Prefix}fg-light));
-$fg-Dark: var(--#{$component-Name}fg-dark, var(--#{$var-Prefix}fg-dark));
-$fg-Darkest: var(--#{$component-Name}fg-darkest, var(--#{$var-Prefix}fg-darkest));
-
-/*
-// Shadows
-*/
-
-$Shadow-color: var(--#{$component-Name}shadow-color-rgb, var(--#{$var-Prefix}shadow-color-rgb));
-$Shadow: Colored-shadow($Shadow-color);
-$Shadow-inner: Colored-shadow-inner($Shadow-color);
-
-/*
-// Border
-*/
-
-$Border-color-hsl: var(--#{$component-Name}border-color-hsl, var(--#{$var-Prefix}border-color-hsl));
-$Border-color: var(--#{$component-Name}border-color, var(--#{$var-Prefix}border-color));
-$Border: 1px solid #{$Border-color};
-$Border-radius: var(--#{$var-Prefix}border-radius);
-
-/*#endregion */

package/scss/Architecture/_root.scss

@@ -1,45 +0,0 @@
-// ===========================================================================
-// Base - Root
-// ===========================================================================
-
-:root {
-  // Custom variable values only support SassScript inside `#{}`.
-  /* Color palette */
-  @each $colorKey, $colorValue in $colors-all {
-    --#{$var-Prefix}#{to-lower-case($colorKey)}: #{$colorValue};
-  }
-
-  // Theme-light
-  --ls-bg: #f9fafb;
-  --ls-bg-hsl: 210deg, 20%, 98%;
-  --ls-bg-body: #d1d9e0;
-  --ls-bg-active: #3692fc;
-  --ls-bg-active-hsl: 212deg, 97%, 60%;
-  --ls-bg-surface: white;
-  --ls-bg-lightest: #f9fafb;
-  --ls-bg-light: #f6f7f9;
-  --ls-bg-dark: #f0f2f5;
-  --ls-bg-darkest: #e0e6eb;
-  --ls-fg-muted: #a7afb9;
-  --ls-fg-body: black;
-  --ls-fg-active: white;
-  --ls-fg-surface: black;
-  --ls-fg-lightest: black;
-  --ls-fg-light: black;
-  --ls-fg-dark: black;
-  --ls-fg-darkest: black;
-  --ls-shadow-color-rgb: 0, 0, 0;
-  --ls-border-alpha: 1;
-  --ls-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1));
-  --ls-border-color-hsl: 210deg, 20%, 90%;
-
-  // Others
-  --ls-border-radius: #{$Rounded};
-
-  /* Font */
-  --ls-font: #{$font-family-sans-serif};
-  --ls-font-sans-serif: #{$font-family-sans-serif};
-  --ls-font-monospace: #{$font-family-monospace};
-  --ls-font-size: #{$font-size-base};
-  --ls-font-weight: normal;
-}

package/scss/test.scss

@@ -1,37 +0,0 @@
-/*
-// Configuration
-*/
-
-@import "Abstracts/_dir-functions";
-@import "Abstracts/_dir-mixins";
-@import "Abstracts/variables";
-
-//.strip-unit {
-//  $length: 42px;
-//  width: #{$length};
-//  --length: #{strip-unit($length)};
-//}
-
-//@each $breakpointKey, $breakpointValue in $responsive-Breakpoints {
-//  .Col-#{$breakpointKey} {
-//    --value: #{$breakpointValue};
-//  }
-//}
-
-//@each $colorKey, $colorValue in $colors-Background-hsla {
-//  .Bg-#{$colorKey} {
-//    --value: #{$colorValue};
-//  }
-//}
-
-@each $colorKey, $colorValue in $colors-Text-hsla {
-  .Text-#{$colorKey} {
-    --value: #{$colorValue};
-  }
-}
-
-@each $colorKey, $colorValue in $colors-Border-hsla {
-  .Border-#{$colorKey} {
-    --value: #{$colorValue};
-  }
-}