Skip to content

Commit

Permalink
Adding default to tokens (#2335)
Browse files Browse the repository at this point in the history
  • Loading branch information
@carloslimasd
carloslimasd authored Mar 3, 2023
1 parent 010bc91 commit 88837bb
Show file tree
Hide file tree
Showing 11 changed files with 137 additions and 149 deletions.
60 changes: 30 additions & 30 deletions playbook/app/pb_kits/playbook/tokens/_animation-curves.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
31 changes: 15 additions & 16 deletions playbook/app/pb_kits/playbook/tokens/_border_radius.scss
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
12 changes: 6 additions & 6 deletions playbook/app/pb_kits/playbook/tokens/_display.scss
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
14 changes: 7 additions & 7 deletions playbook/app/pb_kits/playbook/tokens/_line_height.scss
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
20 changes: 10 additions & 10 deletions playbook/app/pb_kits/playbook/tokens/_opacity.scss
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
22 changes: 11 additions & 11 deletions playbook/app/pb_kits/playbook/tokens/_positioning.scss
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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) {
Expand Down
20 changes: 10 additions & 10 deletions playbook/app/pb_kits/playbook/tokens/_screen_sizes.scss
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
8 changes: 4 additions & 4 deletions playbook/app/pb_kits/playbook/tokens/_shadows.scss
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
12 changes: 6 additions & 6 deletions playbook/app/pb_kits/playbook/tokens/_spacing.scss
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
6 changes: 3 additions & 3 deletions playbook/app/pb_kits/playbook/tokens/_transition.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
81 changes: 35 additions & 46 deletions playbook/app/pb_kits/playbook/tokens/_typography.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down

0 comments on commit 88837bb

Please sign in to comment.