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

package/scss/Abstracts/Mixins/_theme.scss

@@ -0,0 +1,163 @@
+// ===========================================================================
+// Mixins - Theme Colors
+// ===========================================================================
+
+// CSS Variables (Custom Properties)
+
+
+/*
+// Change Accent color
+*/
+
+@mixin Accents-and-Overlay-() {
+  $accent-Colors: (
+          "light" : $Primary,
+          "dark" : Tint($Primary, 50%),
+          "night" : Tint($Primary, 50%),
+          "secondary" : $Secondary,
+          "success" : $Success,
+          "info" : $Info,
+          "warning" : $Warning,
+          "danger" : $Danger, //"error" : $Danger,
+  ) !default;
+
+  @each $keyAccent, $valueAccent in $accent-Colors {
+    .Accent-#{$keyAccent} {
+      --#{$var-Prefix}bg-accent-hsl: #{colorToHSL($valueAccent)};
+      --#{$var-Prefix}bg-accent: #{$valueAccent};
+      --#{$var-Prefix}fg-accent: #{Best-fg-color($valueAccent)};
+    }
+  }
+
+  @each $key in (0, 5, 7, 8, 9, 11, 12, 14, 15, 16) {
+    .Overlay-#{$key} {
+      background-color: hsla(var(--#{$var-Prefix}overlay-hsl), $key * 1%);
+    }
+  }
+
+}
+
+
+//Theme Variants & Colored Components
+@mixin Themed($color-Variants, $colored-Components) {
+  $var-Prefix: $var-Prefix;
+  // Colors: light, dark, night
+  // Colors: primary, secondary, success, info, warning, danger
+  @each $colorKey, $colorValue in $color-Variants {
+    $Lightness: lightness($colorValue);
+
+    $C-body: Color-ByLightness($colorValue, 90%); // 90% - DON'T CHANGE
+    $C-border: Color-ByLightness($colorValue, 85%); // 80
+    //$Shady: Shade($colorValue, 25%);
+
+    //$C-disabled: if($colorKey=='light', hsla(0, 0%, 0%, 0.38), hsla(0, 0%, 100%, 0.5));
+    $C-contrast: if($colorKey=='light', hsl(0, 0%, 0%), hsl(0, 0%, 100%));
+    $C-shadow: hsl(0, 0%, 0%);
+    //$C-shadow: if($colorKey=='dark' or $colorKey=='night', hsl(0, 0%, 100%), hsl(0, 0%, 0%));
+
+    //$C-disabled: if($colorKey=='dark' or $colorKey=='night', hsla(0, 0%, 100%, 0.5), hsla(0, 0%, 0%, 0.38));
+    $C-disabled: if($colorKey=='dark' or $colorKey=='night', hsla(213, 11%, 69%, 1), #6c757d);
+
+    $C-hue: $colorValue;
+
+    $C-lighter: Color-ByLightness($colorValue, ($Lightness + 20));
+    //$C-lightest: Color-ByLightness($colorValue, ($Lightness + 50));
+    $C-lightest: Color-ByLightness($colorValue, 94%); // 95% - DON'T CHANGE
+    $C-surface: Color-ByLightness($colorValue, 96%); // 96% - DON'T CHANGE
+
+    @if ($colorKey=='light') {
+      $C-shadow: hsl(240, 7%, 18%); // Dark
+      $C-body: Color-ByLightness($colorValue, ($Lightness - 5));
+      $C-border: Color-ByLightness($colorValue, ($Lightness - 10));
+
+      $C-lighter: Color-ByLightness($colorValue, ($Lightness - 2));
+      $C-lightest: Color-ByLightness($colorValue, ($Lightness - 4));
+      $C-surface: $White;
+    }
+    @if (index((dark, night), $colorKey)) {
+      // hsl(0, 0%, 7%) Night for Dark
+      // hsl(0, 0%, 0%) Black for Night
+      $C-shadow: if($colorKey=='dark', hsl(0, 0%, 7%), hsl(0, 0%, 0%));
+      $C-body: Color-ByLightness($colorValue, ($Lightness - 6));
+      $C-border: Color-ByLightness($colorValue, ($Lightness + 10));
+
+      $C-lighter: Color-ByLightness($colorValue, ($Lightness + 12));
+      $C-lightest: Color-ByLightness($colorValue, ($Lightness + 16));
+      $C-surface: $colorValue;
+    }
+
+    @each $componentKey, $componentValue in $colored-Components {
+      $color-suffix: if($colorKey, if($componentKey == ""  , "", "-") + $colorKey, "");
+      $component-infix: if($componentValue == null, "", "#{$componentValue}-");
+
+      //$prefix: ($var-Prefix + $theme-infix + $component-infix);
+      $Prefix: ($var-Prefix + $component-infix);
+
+      /*
+        Explanation of if condition: [light, dark, night] => only for Theme-* class
+      @if ((index((light, dark, night), $colorKey) and $componentValue == null) or (null == index((light, dark, night), $colorKey))) {
+      }
+     */
+
+      // .[Alert, Btn, ...]-[primary, danger, ...]
+      .#{$componentKey + $color-suffix} {
+        &:not(.#{$componentKey}-outline) .Btn-close {
+          @if (lightness($colorValue) < 80) {
+            filter: invert(1) grayscale(100%) brightness(200%);
+          }
+        }
+
+        --#{$Prefix}overlay-hsl: #{colorToHSL($C-contrast)};
+        --#{$Prefix}bg-hue-hsl: #{colorToHSL($C-hue)};
+        --#{$Prefix}bg-accent-hsl: #{colorToHSL($C-hue)};
+
+        // Background colors
+        --#{$Prefix}bg-hue: #{$C-hue};
+        --#{$Prefix}bg-accent: #{$C-hue};
+
+        --#{$Prefix}bg-body: #{$C-body};
+        --#{$Prefix}bg-surface: #{$C-surface};
+
+        --#{$Prefix}bg-lighter: #{$C-lighter};
+        --#{$Prefix}bg-lightest: #{$C-lightest};
+
+        // Foreground colors
+        --#{$Prefix}fg-muted: #{$C-disabled};
+        --#{$Prefix}fg-hue: #{Best-fg-color($C-hue)};
+        --#{$Prefix}fg-accent: #{Best-fg-color($C-hue)};
+
+        --#{$Prefix}fg-body: #{Best-fg-color($C-body)};
+        --#{$Prefix}fg-surface: #{Best-fg-color($C-surface)};
+
+        --#{$Prefix}fg-lighter: #{Best-fg-color($C-lighter)};
+        --#{$Prefix}fg-lightest: #{Best-fg-color($C-lightest)};
+
+        --#{$Prefix}border-hsl: #{colorToHSL($C-border)};
+        --#{$Prefix}shadow-hsl: #{colorToHSL($C-shadow)};
+      }
+
+    }
+
+    // Properties only exist in theme classes
+    @if (index((light, dark, night), $colorKey)) {
+      $C-accent: if($colorKey=='light', $Primary, Tint($Primary, 50%));
+
+      .Theme-#{$colorKey} {
+        --#{$var-Prefix}scheme: #{$colorKey};
+
+        --#{$var-Prefix}bg-accent-hsl: #{colorToHSL($C-accent)};
+
+        --#{$var-Prefix}bg-accent: #{$C-accent};
+        --#{$var-Prefix}fg-accent: #{Best-fg-color($C-accent)};
+
+        // Overlay with white background
+        //@each $per in (0, 5, 7, 8, 9, 11, 12, 14, 15, 16) {
+        //  --#{$var-Prefix}overlay-#{$per}: #{mix($C-overlay, $C-hue, $per * 1% )};
+        //}
+      }
+    }
+
+  }
+
+  @include Accents-and-Overlay-();
+}

package/scss/Abstracts/_dir-functions.scss

@@ -3,5 +3,6 @@
 // ===========================================================================
 
 @import "Functions/color";
+@import "Functions/color-customized";
 @import "Functions/helpers";
 @import "Functions/shadow";

package/scss/Abstracts/_dir-mixins.scss

@@ -5,8 +5,5 @@
 @import "Mixins/utilities";
 @import "Mixins/breakpoints";
 @import "Mixins/color";
+@import "Mixins/theme";
 @import "Mixins/grid";
-
-
-//@import "Mixins/Componnets/test";
-

package/scss/Abstracts/_variables.scss

@@ -25,17 +25,23 @@ $Pink     : hsl(324,79%,60%) !default;
 $Brown    : hsl(0, 33%, 38%) !default;
 $Indigo   : hsl(270, 100%, 25%) !default;
 
-$Success    : $Green !default;
-$Info       : $Blue !default;
-$Warning    : $Yellow !default;
-$Danger     : $Red !default;
-
-$Primary    : hsl(260,81%,38%) !default;
-$Secondary  : hsl(208,7%,46%) !default;
-$Light      : hsl(210,20%,98%) !default;
-$Dark       : hsl(210,10%,23%) !default;
+/*
+// Theming
+// 2022.02
+*/
+$Night      : hsl(0, 0%, 7%) !default;      // #121212                      => Tint(black, 7%); // #121212
+$Dark       : hsl(240, 7%, 18%) !default;   // #2B2B31  based mixed         => mix(Tint(blue, 15%), Tint(black, 17%), 3%); // #2b2b31
+$Light      : hsl(0, 0%, 98%) !default;     // #FAFAFA  based $mdb-Light    => Shade(white, 2%); // #fafafa
+$Primary    : hsl(217, 96%, 52%) !default;  // #0F69FA  based $bs-Primary
+$Secondary  : hsl(208,7%,46%) !default;     // #6D767E  based $bs-Secondary
+$Success    : hsl(150, 67%, 35%) !default;  // #1D9559  based $bs-Success
+$Danger     : hsl(354,66%,54%) !default;    // #D73C4C  based mixed
+$Warning    : hsl(45, 100%, 45%) !default;  // #E6AC00  based mixed
+$Info       : hsl(195, 90%, 55%) !default;  // #25C0F4  based mixed $bs-Info / $mdb-Info
 /*@formatter:on*/
 
+$var-Prefix: ls-;
+
 // 'red', 'lime', 'blue', 'yellow', 'cyan', 'magenta', 'purple', 'green', 'maroon', 'navy', 'teal', 'olive', 'orange', 'pink', 'brown', 'indigo', 'white', 'silver', 'gray'
 $colors: (
         "red" : $Red,
@@ -54,24 +60,29 @@ $colors: (
         "pink" : $Pink,
         "brown" : $Brown,
         "indigo" : $Indigo,
+        "black" : $Black,
         "white" : $White,
         "silver" : $Silver,
         "gray" : $Gray,
 ) !default;
 
-$colors-Theme: (
+// light, dark, night
+//$theme-Variants: ("light" : $Light, "dark" : $Dark, "night" : $Night) !default;
+
+// primary, secondary, success, info, warning, danger
+$color-Variants: (
+        "light" : $Light,
+        "dark" : $Dark,
+        "night" : $Night,
         "primary" : $Primary,
         "secondary" : $Secondary,
         "success" : $Success,
         "info" : $Info,
         "warning" : $Warning,
-        "danger" : $Danger,
-        "light" : $Light,
-        "dark" : $Dark,
-        "night" : $Black
+        "danger" : $Danger, //"error" : $Danger,
 ) !default;
 
-$theme-Components: (
+$colored-Components: (
         'Theme': null,
         'Alert':'alert',
         'Calendar':'calendar',
@@ -83,22 +94,25 @@ $theme-Components: (
         'List-item':'lst',
 ) !default;
 
-$var-Prefix: ls-;
-
+$Muted: hsla(213, 11%, var(--ls-text-lightness, 69%), var(--ls-text-alpha, 1));
 /*
 // Colors
 */
 
-$colors-all: map-merge($colors, $colors-Theme);
+$colors-all: map-merge($colors, $color-Variants);
+$colors-all: map-merge($colors-all, ("light" : $Light, "dark" : $Dark, "night" : $Night));
 
 $colors-Background-hsla: ();
 $colors-Background-hsla: Color-hsla($colors-all, --ls-bg-alpha, --ls-bg-lightness);
+$colors-Background-hsla: map-merge($colors-Background-hsla, ("transparent": transparent));
 
 $colors-Text-hsla: ();
 $colors-Text-hsla: Color-hsla($colors-all, --ls-text-alpha, --ls-text-lightness);
+$colors-Text-hsla: map-merge($colors-Text-hsla, ("muted": $Muted, "reset": inherit,));
 
 $colors-Border-hsla: ();
 $colors-Border-hsla: Color-hsla($colors-all, --ls-border-alpha, --ls-border-lightness);
+$colors-Border-hsla: map-merge($colors-Border-hsla, ("transparent": transparent));
 
 
 /*
@@ -109,10 +123,10 @@ $colors-Border-hsla: Color-hsla($colors-all, --ls-border-alpha, --ls-border-ligh
 
 $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;
 $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;
-$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;
 $sizes-percents: (
         10:10%, 20:20%, 30:30%, 40:40%, 50:50%, 60:60%, 70:70%, 80:80%, 90:90%, 100:100%,
-        25:25%, 75:75%, 33:33.333%, 66:66.666%, auto:auto
+        5:5%, 15:15%, 25:25%, 35:35%, 45:45%, 55:55%, 65:65%, 75:75%, 85:85%, 95:95%,
+        33:33.333%, 66:66.666%, auto:auto
 ) !default;
 
 /*
@@ -145,11 +159,11 @@ $spacers-map: (
         5: ($spacer * 3.00),
 );
 $negative-spacers: (
-        N1: ($spacer * -0.25),
-        N2: ($spacer * -0.5),
-        N3: ($spacer * -1.00),
-        N4: ($spacer * -1.50),
-        N5: ($spacer * -3.00),
+        n1: ($spacer * -0.25),
+        n2: ($spacer * -0.5),
+        n3: ($spacer * -1.00),
+        n4: ($spacer * -1.50),
+        n5: ($spacer * -3.00),
 );
 
 
@@ -174,20 +188,24 @@ $gutters-map: $spacers-map !default;
 // --component-shadow-color: 0, 0, 0; // Has to be like this :p
 // https://stackoverflow.com/questions/59250927/box-shadow-with-rgba-variable
 */
-$Shadow-color: var(--#{$var-Prefix}shadow-color-rgb);
+$Shadow-color: var(--#{$var-Prefix}shadow-hsl);
+
+$SA-1: .27;
+$SA-2: .18;
+$SA-3: .09;
 
-$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);
-$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);
-$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);
+$Shadow: 0px 1px 1px -1px hsla($Shadow-color, $SA-1), 0px 2px 2px 0px hsla($Shadow-color, $SA-2), 0px 4px 6px 0px hsla($Shadow-color, $SA-3);
+$Shadow-2x: 0px 1px 1px 0px hsla($Shadow-color, $SA-1), 0px 2px 3px 0px hsla($Shadow-color, $SA-2), 0px 6px 9px 0px hsla($Shadow-color, $SA-3);
+$Shadow-3x: 0px 2px 2px 0px hsla($Shadow-color, $SA-1), 0px 3px 4px 0px hsla($Shadow-color, $SA-2), 0px 9px 12px 0px hsla($Shadow-color, $SA-3);
 
 $Shadow-map: (null: $Shadow, 2x: $Shadow-2x, 3x: $Shadow-3x,);
 $Shadow-map: map-merge($Shadow-map, Shadow-Separator(null, $Shadow));
 $Shadow-map: map-merge($Shadow-map, Shadow-Separator(2x, $Shadow-2x));
 $Shadow-map: map-merge($Shadow-map, Shadow-Separator(3x, $Shadow-3x));
 
-$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));
-$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));
-$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));
+$Drop-shadow: drop-shadow(0px 1px 1px hsla($Shadow-color, 0.72)) drop-shadow(0px 2px 2px hsla($Shadow-color, 0.48)) drop-shadow(0px 4px 6px hsla($Shadow-color, 0.24));
+$Drop-shadow-2x: drop-shadow(0px 1px 1px hsla($Shadow-color, 0.72)) drop-shadow(0px 2px 3px hsla($Shadow-color, 0.48)) drop-shadow(0px 6px 9px hsla($Shadow-color, 0.24));
+$Drop-shadow-3x: drop-shadow(0px 2px 2px hsla($Shadow-color, 0.72)) drop-shadow(0px 3px 4px hsla($Shadow-color, 0.48)) drop-shadow(0px 9px 12px hsla($Shadow-color, 0.24));
 
 $Drop-shadow-map: (0: drop-shadow(0 0 #0000), null: $Drop-shadow, 2x: $Drop-shadow-2x, 3x: $Drop-shadow-3x,);
 
@@ -195,13 +213,56 @@ $Drop-shadow-map: (0: drop-shadow(0 0 #0000), null: $Drop-shadow, 2x: $Drop-shad
 // Typography
 // Font, line-height, and color for body text, headings, and more.
 */
-// TODO: font
-$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
-$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;
+// Font-family
+$font-family-sans-serif: //
+  // Cross-platform generic font family (default user interface font)
+        system-ui,
+          // Safari for macOS and iOS (San Francisco)
+        -apple-system,
+          // Windows
+        "Segoe UI",
+          // Android
+        Roboto,
+          // Basic web fallback
+        "Helvetica Neue", Arial,
+          // Linux
+        "Noto Sans",
+        "Liberation Sans",
+          // Sans serif fallback
+        sans-serif,
+          // Emoji fonts
+        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 
+$font-family-base: var(--#{$var-Prefix}font-sans-serif) !default;
+$font-family-code: var(--#{$var-Prefix}font-monospace) !default;
+
+// Font-weight
 $font-weight-lighter: lighter !default;
 $font-weight-light: 300 !default;
 $font-weight-normal: 400 !default;
 $font-weight-bold: 700 !default;
 $font-weight-bolder: bolder !default;
+
+$line-height-base: 1.5 !default;
+$line-height-sm: 1.25 !default;
+$line-height-lg: 2 !default;
+
+// Font-size
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
+
+$h1-font-size: $font-size-base * 2.5 !default;
+$h2-font-size: $font-size-base * 2 !default;
+$h3-font-size: $font-size-base * 1.75 !default;
+$h4-font-size: $font-size-base * 1.5 !default;
+$h5-font-size: $font-size-base * 1.25 !default;
+$h6-font-size: $font-size-base !default;
+
+$font-sizes: (
+        1: $h1-font-size,
+        2: $h2-font-size,
+        3: $h3-font-size,
+        4: $h4-font-size,
+        5: $h5-font-size,
+        6: $h6-font-size
+) !default;

package/scss/Architecture/Components/TODO/_tables.scss

@@ -2,15 +2,15 @@
 // Components - Tables
 // ===========================================================================
 
-@import "../../_theme-colors";
+@import "../../_color-scheme";
 
 .Table {
   width: 100%;
   margin-bottom: 1rem;
   vertical-align: top;
 
-  color: $fg-Surface;
-  background-color: $bg-Surface;
+  color: $Fg-surface;
+  background-color: $Bg-surface;
   border-color: $Border-color;
 
   > tbody {

package/scss/Architecture/Components/_alert.scss

@@ -3,59 +3,103 @@
 // ST: With Specific Theme
 // ===========================================================================
 
-$component-Name: $var-Prefix + 'alert-';
-@import "../_theme-customized";
+$Customized: 'alert-';
+@import "../_color-scheme";
 
 .Alert {
   display: flex;
   position: relative;
   overflow: hidden;
 
-  color: $fg-Darkest;
-  background-color: $bg-Darkest;
+  color: $Fg-hue;
+  background-color: $Bg-hue;
 
   border: $Border;
   box-shadow: $Shadow;
 
-  min-width: 200px;
   margin-bottom: .5rem;
   padding: .5rem;
+
+  min-width: 200px;
+  //min-height: 70px;
+  //max-width: 600px;
+
   align-items: center;
 
+  margin-right: auto !important;
+  margin-left: auto !important;
+
+  &.Alert-gradient {
+    background: linear-gradient(180deg, $Bg-lightest 0%, $Bg-lighter 35%, $Bg-hue 100%); // vertical
+    &.Alert-outline {
+      background: linear-gradient(180deg, $Bg-surface 0%, $Bg-lightest 35%, $Bg-lighter 100%); // vertical
+    }
+  }
 
   &.Alert-outline {
-    color: $fg-Lightest;
-    background-color: $bg-Lightest;
+    color: $Fg-lightest;
+    background-color: $Bg-lightest;
 
-    //border: .125rem solid $bg-Darkest;
-    border: 1px solid $bg-Darkest;
+    //border: 1px solid hsla($Bg-accent-hsl, .5);
+
+    .Alert-icon {
+      color: $Bg-accent;
+    }
+
+    .Alert-right {
+      .Countdown {
+        //color: $Fg-lightest;
+        //background-color: $Bg-lightest;
+
+        //border-color: hsla($Bg-accent-hsl, .5);
+      }
+    }
   }
 
   .Alert-icon {
     display: flex;
     font-size: medium;
+
+    color: $Bg-lightest;
+    filter: drop-shadow(0 0 hsla($Bg-accent-hsl, .5));
   }
 
   .Alert-right {
     margin-left: auto;
     order: 2;
 
-    span:first-child, small:first-child {
+    .Countdown {
       position: absolute;
-      font-size: 12px;
-      top: .7rem;
-      right: 2rem;
+      padding: 0 0.25rem;
+      font-size: 0.65em;
+
+      top: 0.00rem;
+      right: 0.00rem;
+
+      color: $Fg-lighter;
+      background-color: $Bg-lighter;
+
+      border-left: 1px solid $Border-color;
+      border-bottom: 1px solid $Border-color;
     }
 
     .Btn-close {
-      position: absolute;
-      top: .5rem;
-      right: .5rem;
+      z-index: auto;
+      //margin-top: 5px;
+      //width: 15px !important;
+      //height: 15px !important;
+      //position: absolute;
+      //top: .5rem;
+      //right: .5rem;
     }
   }
 
   .Alert-body {
-    padding: .4rem;
+    padding: .25rem;
+    margin-left: 5px;
+    margin-right: 5px;
+
+    //border: $Border;
 
     .Alert-heading {
       display: block;
@@ -69,11 +113,41 @@ $component-Name: $var-Prefix + 'alert-';
     bottom: 0;
     border: none;
 
-    background-color: $bg-Lightest;
+    background-color: $Bg-lightest;
 
     .Progress-bar {
-      background-color: $bg-Active;
+      background-color: $Bg-accent;
     }
   }
 }
 
+/* BRANDS */
+.Alert {
+  &.Brand-facebook {
+    background: linear-gradient(to bottom right, #3B5998, #6d84b4)
+  }
+
+  &.Brand-github {
+    background: linear-gradient(to bottom right, #333, #373737)
+  }
+
+  &.Brand-instagram {
+    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%)
+  }
+
+  &.Brand-linkedin {
+    background: linear-gradient(to bottom right, #0077B5, #00a0dc)
+  }
+
+  &.Brand-twitter {
+    background: linear-gradient(to bottom right, #1DA1F2, #0084b4)
+  }
+
+  &.Brand-wikipedia {
+    background: linear-gradient(to bottom right, #636466, #000)
+  }
+
+  &.Brand-youtube {
+    background: linear-gradient(to bottom right, #f00, #e62117)
+  }
+}

package/scss/Architecture/Components/_badge.scss

@@ -0,0 +1,40 @@
+// ===========================================================================
+// Components - Badge
+// ===========================================================================
+
+// Base class
+// Requires one of the contextual, color modifier classes for `color` and `background-color`.
+
+$badge-font-size: .75em !default;
+$badge-font-weight: $font-weight-bold !default;
+$badge-color: $White !default;
+$badge-padding-y: .35em !default;
+$badge-padding-x: .65em !default;
+$badge-border-radius: $Border-radius !default;
+
+.Badge {
+  display: inline-block;
+  padding: $badge-padding-y $badge-padding-x;
+  //@include font-size($badge-font-size);
+  font-size: $badge-font-size;
+  font-weight: $badge-font-weight;
+  line-height: 1;
+  color: $badge-color;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+
+  border-radius: $badge-border-radius;
+  //@include gradient-bg();
+
+  // Empty badges collapse automatically
+  &:empty {
+    display: none;
+  }
+}
+
+// Quick fix for badges in buttons
+.Btn .Badge {
+  position: relative;
+  top: -1px;
+}