From d3822196c77beb3d6a79b4b3a646219ab6bbbc74 Mon Sep 17 00:00:00 2001
From: Carlos Lima <carloslimasd@gmail.com>
Date: Mon, 27 Feb 2023 12:18:13 -0300
Subject: [PATCH] Adding default to tokens

---
 .../playbook/tokens/_animation-curves.scss    | 60 +++++++-------
 .../playbook/tokens/_border_radius.scss       | 31 ++++---
 .../app/pb_kits/playbook/tokens/_display.scss | 12 +--
 .../pb_kits/playbook/tokens/_line_height.scss | 14 ++--
 .../app/pb_kits/playbook/tokens/_opacity.scss | 20 ++---
 .../pb_kits/playbook/tokens/_positioning.scss | 22 ++---
 .../playbook/tokens/_screen_sizes.scss        | 20 ++---
 .../app/pb_kits/playbook/tokens/_shadows.scss |  8 +-
 .../app/pb_kits/playbook/tokens/_spacing.scss | 12 +--
 .../pb_kits/playbook/tokens/_transition.scss  |  6 +-
 .../pb_kits/playbook/tokens/_typography.scss  | 81 ++++++++-----------
 11 files changed, 137 insertions(+), 149 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/tokens/_animation-curves.scss b/playbook/app/pb_kits/playbook/tokens/_animation-curves.scss
index bd02332e43..da484bb251 100755
--- a/playbook/app/pb_kits/playbook/tokens/_animation-curves.scss
+++ b/playbook/app/pb_kits/playbook/tokens/_animation-curves.scss
@@ -1,37 +1,37 @@
-$bezier: cubic-bezier(.64, 0, .35, 1);
+$bezier: cubic-bezier(.64, 0, .35, 1) !default;
 // +transition-timing-function(cubic-bezier(0.7, 0, 0.3, 1))
 
 /* Default Equations */
-$linear: cubic-bezier(0.250, 0.250, 0.750, 0.750);
-$ease: cubic-bezier(0.250, 0.100, 0.250, 1.000);
-$easeIn: cubic-bezier(0.420, 0.000, 1.000, 1.000);
-$easeOut: cubic-bezier(0.000, 0.000, 0.580, 1.000);
-$easeInOut: cubic-bezier(0.420, 0.000, 0.580, 1.000);
+$linear: cubic-bezier(0.250, 0.250, 0.750, 0.750) !default;
+$ease: cubic-bezier(0.250, 0.100, 0.250, 1.000) !default;
+$easeIn: cubic-bezier(0.420, 0.000, 1.000, 1.000) !default;
+$easeOut: cubic-bezier(0.000, 0.000, 0.580, 1.000) !default;
+$easeInOut: cubic-bezier(0.420, 0.000, 0.580, 1.000) !default;
 
 /* Penner Equations (approximated) originally created by @robpenner */
-$easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
-$easeInCubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-$easeInQuart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
-$easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-$easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
-$easeInExpo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
-$easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335);
-$easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045);
+$easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530) !default;
+$easeInCubic: cubic-bezier(0.550, 0.055, 0.675, 0.190) !default;
+$easeInQuart: cubic-bezier(0.895, 0.030, 0.685, 0.220) !default;
+$easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060) !default;
+$easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715) !default;
+$easeInExpo: cubic-bezier(0.950, 0.050, 0.795, 0.035) !default;
+$easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335) !default;
+$easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045) !default;
 
-$easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
-$easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-$easeOutQuart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
-$easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
-$easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
-$easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-$easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000);
-$easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+$easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940) !default;
+$easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000) !default;
+$easeOutQuart: cubic-bezier(0.165, 0.840, 0.440, 1.000) !default;
+$easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000) !default;
+$easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000) !default;
+$easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000) !default;
+$easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000) !default;
+$easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275) !default;
 
-$easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
-$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
-$easeInOutQuart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-$easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
-$easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
-$easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
-$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860);
-$easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550);
+$easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955) !default;
+$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000) !default;
+$easeInOutQuart: cubic-bezier(0.770, 0.000, 0.175, 1.000) !default;
+$easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000) !default;
+$easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950) !default;
+$easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000) !default;
+$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860) !default;
+$easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550) !default;
diff --git a/playbook/app/pb_kits/playbook/tokens/_border_radius.scss b/playbook/app/pb_kits/playbook/tokens/_border_radius.scss
index e7d858e504..3aed694e6c 100755
--- a/playbook/app/pb_kits/playbook/tokens/_border_radius.scss
+++ b/playbook/app/pb_kits/playbook/tokens/_border_radius.scss
@@ -1,20 +1,19 @@
-
 // Border Radius
-$border_rad_lightest:     1px;
-$border_rad_lighter:      2px;
-$border_rad_light:        4px;
-$border_rad_normal:       0;
-$border_rad_heavy:        5px;
-$border_rad_heavier:      6px;
-$border_rad_heaviest:     7px;
-$border_rad_mega:         1000px;
-$border_radius_xs:        4px;
-$border_radius_sm:        4px;
-$border_radius_md:        6px;
-$border_radius_lg:        8px;
-$border_radius_xl:        16px;
-$border_radius_rounded:   1000px;
-$border_radius_none:      0;
+$border_rad_lightest:     1px !default;
+$border_rad_lighter:      2px !default;
+$border_rad_light:        4px !default;
+$border_rad_normal:       0 !default;
+$border_rad_heavy:        5px !default;
+$border_rad_heavier:      6px !default;
+$border_rad_heaviest:     7px !default;
+$border_rad_mega:         1000px !default;
+$border_radius_xs:        4px !default;
+$border_radius_sm:        4px !default;
+$border_radius_md:        6px !default;
+$border_radius_lg:        8px !default;
+$border_radius_xl:        16px !default;
+$border_radius_rounded:   1000px !default;
+$border_radius_none:      0 !default;
 $border_radius: (
   lightest:              $border_rad_lightest,
   lighter:               $border_rad_lighter,
diff --git a/playbook/app/pb_kits/playbook/tokens/_display.scss b/playbook/app/pb_kits/playbook/tokens/_display.scss
index 2b45ffd809..f9c182e66e 100644
--- a/playbook/app/pb_kits/playbook/tokens/_display.scss
+++ b/playbook/app/pb_kits/playbook/tokens/_display.scss
@@ -1,9 +1,9 @@
-$display_inline: inline;
-$display_block: block;
-$display_inline_block: inline-block;
-$display_flex: flex;
-$display_none: none;
-$display_inline_flex: inline-flex;
+$display_inline: inline !default;
+$display_block: block !default;
+$display_inline_block: inline-block !default;
+$display_flex: flex !default;
+$display_none: none !default;
+$display_inline_flex: inline-flex !default;
 $displays: (
   display_none:   $display_none,
   display_flex: $display_flex,
diff --git a/playbook/app/pb_kits/playbook/tokens/_line_height.scss b/playbook/app/pb_kits/playbook/tokens/_line_height.scss
index 68066e0d77..87258f1c29 100755
--- a/playbook/app/pb_kits/playbook/tokens/_line_height.scss
+++ b/playbook/app/pb_kits/playbook/tokens/_line_height.scss
@@ -1,10 +1,10 @@
-$lh_tightest: 1;
-$lh_tighter:  1.2;
-$lh_tight:    1.4;
-$lh_normal:   1.5;
-$lh_loose:    1.6;
-$lh_looser:   1.8;
-$lh_loosest:  2;
+$lh_tightest: 1 !default;
+$lh_tighter:  1.2 !default;
+$lh_tight:    1.4 !default;
+$lh_normal:   1.5 !default;
+$lh_loose:    1.6 !default;
+$lh_looser:   1.8 !default;
+$lh_loosest:  2 !default;
 $line_height: (
   tightest: $lh_tightest,
   tighter: $lh_tighter,
diff --git a/playbook/app/pb_kits/playbook/tokens/_opacity.scss b/playbook/app/pb_kits/playbook/tokens/_opacity.scss
index c4cfe50957..bb344c9087 100755
--- a/playbook/app/pb_kits/playbook/tokens/_opacity.scss
+++ b/playbook/app/pb_kits/playbook/tokens/_opacity.scss
@@ -1,13 +1,13 @@
-$opacity_1: .1;
-$opacity_2: .2;
-$opacity_3: .3;
-$opacity_4: .4;
-$opacity_5: .5;
-$opacity_6: .6;
-$opacity_7: .7;
-$opacity_8: .8;
-$opacity_9: .9;
-$opacity_10: 1;
+$opacity_1: .1 !default;
+$opacity_2: .2 !default;
+$opacity_3: .3 !default;
+$opacity_4: .4 !default;
+$opacity_5: .5 !default;
+$opacity_6: .6 !default;
+$opacity_7: .7 !default;
+$opacity_8: .8 !default;
+$opacity_9: .9 !default;
+$opacity_10: 1 !default;
 $opacity: (
   opacity_1: $opacity_1,
   opacity_2: $opacity_2,
diff --git a/playbook/app/pb_kits/playbook/tokens/_positioning.scss b/playbook/app/pb_kits/playbook/tokens/_positioning.scss
index 2b952e8ab1..dad66cb13f 100755
--- a/playbook/app/pb_kits/playbook/tokens/_positioning.scss
+++ b/playbook/app/pb_kits/playbook/tokens/_positioning.scss
@@ -1,14 +1,14 @@
 // z_index variables
-$z_1: 100;
-$z_2: 200;
-$z_3: 300;
-$z_4: 400;
-$z_5: 500;
-$z_6: 600;
-$z_7: 700;
-$z_8: 800;
-$z_9: 900;
-$z_10: 1000;
+$z_1: 100 !default;
+$z_2: 200 !default;
+$z_3: 300 !default;
+$z_4: 400 !default;
+$z_5: 500 !default;
+$z_6: 600 !default;
+$z_7: 700 !default;
+$z_8: 800 !default;
+$z_9: 900 !default;
+$z_10: 1000 !default;
 $z_index: (
   zindex_1: $z_1,
   zindex_2: $z_1,
@@ -26,7 +26,7 @@ $z_layers: (
   "default": 0
 );
 
-$offscreen: -9999px;
+$offscreen: -9999px !default;
 
 @function z_index_for($layer) {
   @if not map-has-key($z_layers, $layer) {
diff --git a/playbook/app/pb_kits/playbook/tokens/_screen_sizes.scss b/playbook/app/pb_kits/playbook/tokens/_screen_sizes.scss
index 363d8c0446..a7a3255b8c 100755
--- a/playbook/app/pb_kits/playbook/tokens/_screen_sizes.scss
+++ b/playbook/app/pb_kits/playbook/tokens/_screen_sizes.scss
@@ -1,13 +1,13 @@
-$screen-xs-min: 575px;
-$screen-xs-max: $screen-xs-min - 1;
-$screen-sm-min: 576px;
-$screen-sm-max: $screen-sm-min - 1;
-$screen-md-min: 768px;
-$screen-md-max: $screen-md-min - 1;
-$screen-lg-min: 992px;
-$screen-lg-max: $screen-lg-min - 1;
-$screen-xl-min: 1200px;
-$screen-xl-max: $screen-xl-min - 1;
+$screen-xs-min: 575px !default;
+$screen-xs-max: $screen-xs-min - 1 !default;
+$screen-sm-min: 576px !default;
+$screen-sm-max: $screen-sm-min - 1 !default;
+$screen-md-min: 768px !default;
+$screen-md-max: $screen-md-min - 1 !default;
+$screen-lg-min: 992px !default;
+$screen-lg-max: $screen-lg-min - 1 !default;
+$screen-xl-min: 1200px !default;
+$screen-xl-max: $screen-xl-min - 1 !default;
 
 $breakpoints: (
   xs: $screen-xs-min,
diff --git a/playbook/app/pb_kits/playbook/tokens/_shadows.scss b/playbook/app/pb_kits/playbook/tokens/_shadows.scss
index 58360793fa..67e267553c 100755
--- a/playbook/app/pb_kits/playbook/tokens/_shadows.scss
+++ b/playbook/app/pb_kits/playbook/tokens/_shadows.scss
@@ -1,10 +1,10 @@
 @import "colors";
 @import "opacity";
 
-$shadow_none: 0 0 0 0 transparent;
-$shadow_deep: 0 4px 10px 0 rgba($shadow, 0.16);
-$shadow_deeper: 0 12px 28px 0 rgba($shadow, 0.18);
-$shadow_deepest: 0 30px 38px 4px $shadow, 0 2px 14px 4px rgba($shadow, 0.1);
+$shadow_none: 0 0 0 0 transparent !default;
+$shadow_deep: 0 4px 10px 0 rgba($shadow, 0.16) !default;
+$shadow_deeper: 0 12px 28px 0 rgba($shadow, 0.18) !default;
+$shadow_deepest: 0 30px 38px 4px $shadow, 0 2px 14px 4px rgba($shadow, 0.1) !default;
 $box_shadows: (
   shadow_none: $shadow_none,
   shadow_deep: $shadow_deep,
diff --git a/playbook/app/pb_kits/playbook/tokens/_spacing.scss b/playbook/app/pb_kits/playbook/tokens/_spacing.scss
index d9aa83faec..0e475dd482 100755
--- a/playbook/app/pb_kits/playbook/tokens/_spacing.scss
+++ b/playbook/app/pb_kits/playbook/tokens/_spacing.scss
@@ -1,9 +1,9 @@
-$space_xxs:   4px;
-$space_xs:    8px;
-$space_sm:    16px;
-$space_md:    24px;
-$space_lg:    32px;
-$space_xl:    40px;
+$space_xxs:   4px !default;
+$space_xs:    8px !default;
+$space_sm:    16px !default;
+$space_md:    24px !default;
+$space_lg:    32px !default;
+$space_xl:    40px !default;
 $spaces:(
   space_xxs:  $space_xxs,
   space_xs:   $space_xs,
diff --git a/playbook/app/pb_kits/playbook/tokens/_transition.scss b/playbook/app/pb_kits/playbook/tokens/_transition.scss
index 6b29d2bc80..f17260070e 100644
--- a/playbook/app/pb_kits/playbook/tokens/_transition.scss
+++ b/playbook/app/pb_kits/playbook/tokens/_transition.scss
@@ -1,3 +1,3 @@
-$transition_default: 0.3s;
-$transition_short: 0.15s;
-$transition_cubic: 0.2s cubic-bezier(0.95, 0.05, 0.795, 0.035);
+$transition_default: 0.3s !default;
+$transition_short: 0.15s !default;
+$transition_cubic: 0.2s cubic-bezier(0.95, 0.05, 0.795, 0.035) !default;
diff --git a/playbook/app/pb_kits/playbook/tokens/_typography.scss b/playbook/app/pb_kits/playbook/tokens/_typography.scss
index 7d41d4205d..a347b9918a 100755
--- a/playbook/app/pb_kits/playbook/tokens/_typography.scss
+++ b/playbook/app/pb_kits/playbook/tokens/_typography.scss
@@ -1,56 +1,45 @@
-
 $font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
 
-
 /* CLEAN UP AND REMOVE */
-$font_jumbo:        36px;
-$font_largest:      32px;
-$font_larger:       28px;
-$font_large:        20px;
-$font_base:         16px;
-$font_default:      $font_base;
-$font_normal:       $font_base;
-$font_medium:       $font_base;
-$font_small:        14px;
-$font_smaller:      12px;
-$font_smallest:     11px;
-
-
-$text_jumbo:        $font_jumbo;
-$text_largest:      $font_largest;
-$text_larger:       $font_larger;
-$text_large:        $font_large;
-$text_base:         $font_base;
-$text_default:      $font_base;
-$text_normal:       $font_base;
-$text_medium:       $font_base;
-$text_small:        $font_small;
-$text_smaller:      $font_smaller;
-$text_smallest:     $font_smallest;
-
+$font_jumbo:        36px !default;
+$font_largest:      32px !default;
+$font_larger:       28px !default;
+$font_large:        20px !default;
+$font_base:         16px !default;
+$font_default:      $font_base !default;
+$font_normal:       $font_base !default;
+$font_medium:       $font_base !default;
+$font_small:        14px !default;
+$font_smaller:      12px !default;
+$font_smallest:     11px !default;
+
+$text_jumbo:        $font_jumbo !default;
+$text_largest:      $font_largest !default;
+$text_larger:       $font_larger !default;
+$text_large:        $font_large !default;
+$text_base:         $font_base !default;
+$text_default:      $font_base !default;
+$text_normal:       $font_base !default;
+$text_medium:       $font_base !default;
+$text_small:        $font_small !default;
+$text_smaller:      $font_smaller !default;
+$text_smallest:     $font_smallest !default;
 
 /* Headings */
-$heading_1: 46px;
-$heading_2: 34px;
-$heading_3: $font_larger;
-$heading_4: $font_base;
-
-
-
+$heading_1: 46px !default;
+$heading_2: 34px !default;
+$heading_3: $font_larger !default;
+$heading_4: $font_base !default;
 
 // Letter Spacing
-$lspace_tightest:         -.1em;
-$lspace_tighter:          -.07em;
-$lspace_tight:            -.01em;
-$lspace_normal:           0;
-$lspace_loose:            .03em;
-$lspace_looser:           .07em;
-$lspace_loosest:          .1em;
-$lspace_super_loosest:    .2em;
-
-
-
-
+$lspace_tightest:         -.1em !default;
+$lspace_tighter:          -.07em !default;
+$lspace_tight:            -.01em !default;
+$lspace_normal:           0 !default;
+$lspace_loose:            .03em !default;
+$lspace_looser:           .07em !default;
+$lspace_loosest:          .1em !default;
+$lspace_super_loosest:    .2em !default;
 
 /* Standard Font Weights */
 $bold:          600 !default;