@steroidsjs/bootstrap 3.0.0-beta.85 → 3.0.0-beta.86

package/scss/variables/common/colors.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 //** Themed colors **//
 :root {
     --primary: #651fff;
@@ -184,7 +186,7 @@ $static-text-color: #312C3A !default;
 //! Base colors !//
 
 $color-themes: () !default;
-$color-themes: map-merge(
+$color-themes: map.merge(
     (
         "basic": (
             "color": $gray,
@@ -244,7 +246,7 @@ $color-themes: map-merge(
 
 
 $diagram-colors: () !default;
-$diagram-colors: map-merge(
+$diagram-colors: map.merge(
     (
         "success": (
             "color": $success,

package/scss/variables/common/typography.scss

@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "colors";
+
 /*
 *  Common font variables
 */
@@ -23,85 +26,85 @@ $font-weight-md: 500 !default;
 $font-weight-lg: 700 !default;
 
 $title-types: () !default;
-$title-types: map-merge(
+$title-types: map.merge(
     (
         "h1": (
             "font-size": $font-size-2xl,
             "font-weight": $font-weight-lg,
             "line-height": $line-height-2xl,
-            "color": $text-color,
+            "color": colors.$text-color,
         ),
         "h2": (
             "font-size": $font-size-xl,
             "font-weight": $font-weight-lg,
             "line-height": $line-height-xl,
-            "color": $text-color,
+            "color": colors.$text-color,
         ),
         "h3": (
             "font-size": $font-size-lg,
             "font-weight": $font-weight-lg,
             "line-height": $line-height-lg,
-            "color": $text-color,
+            "color": colors.$text-color,
         ),
         "h4": (
             "font-size": $font-size-base,
             "font-weight": $font-weight-lg,
             "line-height": $line-height-base,
-            "color": $text-color,
+            "color": colors.$text-color,
         ),
         "h5": (
             "font-size": $font-size-sm,
             "font-weight": $font-weight-md,
             "line-height": $line-height-sm,
-            "color": $text-color,
+            "color": colors.$text-color,
         ),
         "h6": (
             "font-size": $font-size-xs,
             "font-weight": $font-weight-md,
             "line-height": $line-height-xs,
-            "color": $text-color,
+            "color": colors.$text-color,
         ),
         "subtitle": (
             "font-size": $font-size-2xl,
             "font-weight": $font-weight-md,
             "line-height": $line-height-2xl,
-            "color": $text-color,
+            "color": colors.$text-color,
         ),
     ),
     $title-types
 );
 
 $text-types: () !default;
-$text-types: map-merge(
+$text-types: map.merge(
     (
         "body": (
             "font-size": $font-size-base,
             "font-weight": $font-weight-sm,
             "line-height": $line-height-base,
-            "color": $text-color,
+            "color": colors.$text-color,
         ),
         "span": (
             "font-size": $font-size-base,
             "font-weight": $font-weight-sm,
             "line-height": $line-height-base,
-            "color": $text-color,
+            "color": colors.$text-color,
         ),
         "boldSpan": (
             "font-size": $font-size-base,
             "font-weight": $font-weight-lg,
             "line-height": $line-height-base,
-            "color": $text-color,
+            "color": colors.$text-color,
         ),
     ),
     $text-types
 );
 
 $typography-colors: (
-    "text-color": $text-color,
-    "primary": $primary,
-    "secondary": $secondary,
-    "success": $success,
-    "danger": $danger,
-    "warning": $warning,
-    "info": $info,
+    "text-color": colors.$text-color,
+    "primary": colors.$primary,
+    "secondary": colors.$secondary,
+    "success": colors.$success,
+    "danger": colors.$danger,
+    "warning": colors.$warning,
+    "info": colors.$info,
 ) !default;

package/scss/variables/components/calendar.scss

@@ -1,8 +1,11 @@
-$calendar-primary-color: $primary !default;
-$calendar-primary-light-color: $primary-light !default;
-$calendar-secondary-color: $border-default !default;
-$calendar-text-color: $heading !default;
-$calendar-selected-text-color: $white !default;
+@use "../common/colors";
+@use "../common/old-variables";
+
+$calendar-primary-color: colors.$primary !default;
+$calendar-primary-light-color: colors.$primary-light !default;
+$calendar-secondary-color: old-variables.$border-default !default;
+$calendar-text-color: old-variables.$heading !default;
+$calendar-selected-text-color: colors.$white !default;
 
 $calendar-font-weight: 500 !default;
 

package/scss/variables/components/input.scss

@@ -1,3 +1,5 @@
+@use "../common/old-variables";
+
 $input-height-sm: 34px;
 $input-height-md: 46px;
 $input-height-lg: 56px;
@@ -58,7 +60,7 @@ $input-message-margin-top-lg: $input-message-margin-top-sm;
 $input-message-icon-size-lg: $input-message-icon-size-sm;
 $input-message-icon-margin-right-lg: $input-message-icon-margin-right-sm;
 
-$input-border: 1px solid $border-default !default;
+$input-border: 1px solid old-variables.$border-default !default;
 $input-border-radius: 4px !default;
 
 $input-padding-y: 0 !default;

package/scss/variables/components/ratefield.scss

@@ -1,2 +1,4 @@
+@use "../common/colors";
+
 $icon-size: 20px !default;
-$icon-color: $primary !default;
+$icon-color: colors.$primary !default;

package/scss/variables/index.scss

@@ -1,12 +1,11 @@
-@import 'common/colors';
-@import 'common/media';
-@import 'common/typography';
-@import 'common/radiuses';
-@import 'common/old-variables';
-@import 'common/variables';
+@forward 'common/colors';
+@forward 'common/media';
+@forward 'common/typography';
+@forward 'common/radiuses';
+@forward 'common/old-variables';
+@forward 'common/variables';
 
-@import 'components/button';
-@import 'components/calendar';
-@import 'components/icon';
-@import 'components/input';
-@import 'components/ratefield';
+@forward 'components/button';
+@forward 'components/calendar';
+@forward 'components/icon';
+@forward 'components/input';

package/typography/Text/TextView.scss

@@ -1,14 +1,17 @@
+@use "../../scss/variables" as vars;
+@use '../../scss/mixins';
+
 .TextView {
   margin-bottom: 1em;
-  font-family: $font-family-nunito;
+  font-family: vars.$font-family-nunito;
 
-  @each $typeName, $typeMap in $text-types {
+  @each $typeName, $typeMap in vars.$text-types {
     &_type_#{$typeName} {
-        @include typography-type($typeMap);
+        @include mixins.typography-type($typeMap);
     }
   }
 
-  @each $colorName, $color in $typography-colors {
+  @each $colorName, $color in vars.$typography-colors {
     &_color_#{$colorName} {
       color: $color;
     }

package/typography/Title/TitleView.scss

@@ -1,14 +1,17 @@
+@use "../../scss/variables" as vars;
+@use '../../scss/mixins';
+
 .TitleView {
   margin-bottom: 1em;
-  font-family: $font-family-nunito;
+  font-family: vars.$font-family-nunito;
 
-  @each $typeName, $typeMap in $title-types {
+  @each $typeName, $typeMap in vars.$title-types {
     &_type_#{$typeName} {
-        @include typography-type($typeMap);
+        @include mixins.typography-type($typeMap);
     }
   }
 
-  @each $colorName, $color in $typography-colors {
+  @each $colorName, $color in vars.$typography-colors {
     &_color_#{$colorName} {
       color: $color;
     }