playbook_ui 2.7.2 → 2.8.1

data/app/pb_kits/playbook/pb_vertical_nav/vertical_nav.rb

@@ -1,19 +1,24 @@
+# frozen_string_literal: true
+
 module Playbook
   module PbVerticalNav
     class VerticalNav < Playbook::PbKit::Base
-      PROPS = [:configured_classname,
-          :configured_data,
-          :configured_id,
-          :configured_link,
-          :configured_title,
-          :block].freeze
-
-      def initialize(classname: default_configuration,
-                   data: default_configuration,
-                   id: default_configuration,
-                   link: default_configuration,
-                   title: default_configuration,
-                   &block)
+      PROPS = %i[configured_aria
+                 configured_classname
+                 configured_data
+                 configured_id
+                 configured_link
+                 configured_title
+                 block].freeze
+
+      def initialize(aria: default_configuration,
+                     classname: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     link: default_configuration,
+                     title: default_configuration,
+                     &block)
+        self.configured_aria = aria
         self.configured_classname = classname
         self.configured_data = data
         self.configured_id = id

data/app/pb_kits/playbook/tokens/_border_radius.scss

@@ -0,0 +1,33 @@
+@import "../tokens/colors";
+
+// 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: (
+  lightest: $border_rad_lightest,
+  lighter: $border_rad_lighter,
+  light: $border_rad_light,
+  normal: $border_rad_normal,
+  heavy: $border_rad_heavy,
+  heavier: $border_rad_heavier,
+  heaviest: $border_rad_heaviest
+);
+
+// Bootstrap
+$border_radius_base:      $border_rad_light;
+$border_radius_large:     $border_rad_heavy;
+$border_radius_small:     $border_rad_lighter;
+$border_radius:           $border_rad_light;
+$border_radius_lg:        $border_rad_heavy;
+$border_radius_sm:        $border_rad_lighter;
+
+$panel_border_radius:     $border_rad_light;
+
+// Change to borders
+$border_color: $border_light;

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -143,9 +143,18 @@ $status_colors: (
   neutral:            $neutral
 );
 
+$status_color_text: (
+  success:            $success,
+  warning:            darken($warning, 10%),
+  error:              $error,
+  info:               $info,
+  neutral:            darken($neutral, 10%)
+);
+
 // Link colors ------------------------
 $primary_action:      $primary;
 $primary_action_dk:   $blue;
+$secondary_action:      $blue;
 $action_colors: (
   primary_action:     $primary_action,
   primary_action_dk:  $primary_action_dk
@@ -167,251 +176,29 @@ $product_colors: (
   gutters:            $gutters
 );
 
-
-
-
-
-//=====================================
-// DEPRECIATED COLORS
-//=====================================
-
-// POWER COLORS
-$power_navy:        #004976;
-$power_navy_darker: #1F2B52;
-$power_gold:        #daaa00;
-$power_blue:        #00a3e0;
-$power_red:         #f9423a;
-$power_royal:       #0072ce;
-$power_green:       #00bf6f;
-
-$power_colors: (
-  power_navy: $power_navy,
-  power_navy_darker: $power_navy_darker,
-  power_gold: $power_gold,
-  power_blue: $power_blue,
-  power_red: $power_red,
-  power_royal: $power_royal,
-  power_green: $power_green
-);
-
-
-// GRAY COLORS
-$white: #ffffff;
-$gray_1: mix(#000, #ffffff, 5%);
-$gray_2: mix(#000, #ffffff, 10%);
-$gray_3: mix(#000, #ffffff, 20%);
-$gray_4: mix(#000, #ffffff, 30%);
-$gray_5: mix(#000, #ffffff, 40%);
-$gray_6: mix(#000, #ffffff, 50%);
-$gray_7: mix(#000, #ffffff, 60%);
-$gray_8: mix(#000, #ffffff, 70%);
-$gray_9: mix(#000, #ffffff, 80%);
-$black: #1A1A1A;
-
-$gray_colors: (
-  white: $white,
-  gray_1: $gray_1,
-  gray_2: $gray_2,
-  gray_3: $gray_3,
-  gray_4: $gray_4,
-  gray_5: $gray_5,
-  gray_6: $gray_6,
-  gray_7: $gray_7,
-  gray_8: $gray_8,
-  gray_9: $gray_9,
-  black: $black
-);
-
-
-// INTERFACE COLORS
-$sky_lighter:     #F9FAFB;
-$sky_light:       #F4F6F8;
-$sky:             #DFE3E8;
-$sky_dark:        #C4CDD5;
-$ink_lightest:    #919EAB;
-$ink_lighter:     #637381;
-$ink_light:       #454F5B;
-$ink:             #273142;
-$ink_dark:        #212B36;
-
-$interface_colors: (
-  sky_lighter:   $sky_lighter,
-  sky_light:     $sky_light,
-  sky:           $sky,
-  sky_dark:      $sky_dark,
-  ink_lightest:  $ink_lightest,
-  ink_lighter:   $ink_lighter,
-  ink_light:     $ink_light,
-  ink:           $ink,
-  ink_dark:      $ink_dark
-);
-
-
-// OPACITY COLOR VARIATIONS
-$p_navy_opacity_1: rgba($power_navy, .1);
-$p_navy_opacity_2: rgba($power_navy, .2);
-$p_navy_opacity_3: rgba($power_navy, .3);
-$p_navy_opacity_4: rgba($power_navy, .4);
-$p_navy_opacity_5: rgba($power_navy, .5);
-$p_navy_opacity_6: rgba($power_navy, .6);
-$p_navy_opacity_7: rgba($power_navy, .7);
-$p_navy_opacity_8: rgba($power_navy, .8);
-$p_navy_opacity_9: rgba($power_navy, .9);
-
-$p_gold_opacity_1: rgba($power_gold, .1);
-$p_gold_opacity_2: rgba($power_gold, .2);
-$p_gold_opacity_3: rgba($power_gold, .3);
-$p_gold_opacity_4: rgba($power_gold, .4);
-$p_gold_opacity_5: rgba($power_gold, .5);
-$p_gold_opacity_6: rgba($power_gold, .6);
-$p_gold_opacity_7: rgba($power_gold, .7);
-$p_gold_opacity_8: rgba($power_gold, .8);
-$p_gold_opacity_9: rgba($power_gold, .9);
-
-$p_blue_opacity_1: rgba($power_blue, .1);
-$p_blue_opacity_2: rgba($power_blue, .2);
-$p_blue_opacity_3: rgba($power_blue, .3);
-$p_blue_opacity_4: rgba($power_blue, .4);
-$p_blue_opacity_5: rgba($power_blue, .5);
-$p_blue_opacity_6: rgba($power_blue, .6);
-$p_blue_opacity_7: rgba($power_blue, .7);
-$p_blue_opacity_8: rgba($power_blue, .8);
-$p_blue_opacity_9: rgba($power_blue, .9);
-
-$p_red_opacity_1: rgba($power_red, .1);
-$p_red_opacity_2: rgba($power_red, .2);
-$p_red_opacity_3: rgba($power_red, .3);
-$p_red_opacity_4: rgba($power_red, .4);
-$p_red_opacity_5: rgba($power_red, .5);
-$p_red_opacity_6: rgba($power_red, .6);
-$p_red_opacity_7: rgba($power_red, .7);
-$p_red_opacity_8: rgba($power_red, .8);
-$p_red_opacity_9: rgba($power_red, .9);
-
-$p_royal_opacity_1: rgba($power_royal, .1);
-$p_royal_opacity_2: rgba($power_royal, .2);
-$p_royal_opacity_3: rgba($power_royal, .3);
-$p_royal_opacity_4: rgba($power_royal, .4);
-$p_royal_opacity_5: rgba($power_royal, .5);
-$p_royal_opacity_6: rgba($power_royal, .6);
-$p_royal_opacity_7: rgba($power_royal, .7);
-$p_royal_opacity_8: rgba($power_royal, .8);
-$p_royal_opacity_9: rgba($power_royal, .9);
-
-$p_green_opacity_1: rgba($power_green, .1);
-$p_green_opacity_2: rgba($power_green, .2);
-$p_green_opacity_3: rgba($power_green, .3);
-$p_green_opacity_4: rgba($power_green, .4);
-$p_green_opacity_5: rgba($power_green, .5);
-$p_green_opacity_6: rgba($power_green, .6);
-$p_green_opacity_7: rgba($power_green, .7);
-$p_green_opacity_8: rgba($power_green, .8);
-$p_green_opacity_9: rgba($power_green, .9);
-
-$white_opacity_1: rgba($white, .1);
-$white_opacity_2: rgba($white, .2);
-$white_opacity_3: rgba($white, .3);
-$white_opacity_4: rgba($white, .4);
-$white_opacity_5: rgba($white, .5);
-$white_opacity_6: rgba($white, .6);
-$white_opacity_7: rgba($white, .7);
-$white_opacity_8: rgba($white, .8);
-$white_opacity_9: rgba($white, .9);
-
-$black_opacity_1: rgba(#000, .1);
-$black_opacity_2: rgba(#000, .2);
-$black_opacity_3: rgba(#000, .3);
-$black_opacity_4: rgba(#000, .4);
-$black_opacity_5: rgba(#000, .5);
-$black_opacity_6: rgba(#000, .6);
-$black_opacity_7: rgba(#000, .7);
-$black_opacity_8: rgba(#000, .8);
-$black_opacity_9: rgba(#000, .9);
-
-$opacity_colors: (
-  p_navy_opacity_1: $p_navy_opacity_1,
-  p_navy_opacity_2: $p_navy_opacity_2,
-  p_navy_opacity_3: $p_navy_opacity_3,
-  p_navy_opacity_4: $p_navy_opacity_4,
-  p_navy_opacity_5: $p_navy_opacity_5,
-  p_navy_opacity_6: $p_navy_opacity_6,
-  p_navy_opacity_7: $p_navy_opacity_7,
-  p_navy_opacity_8: $p_navy_opacity_8,
-  p_navy_opacity_9: $p_navy_opacity_9,
-
-  p_gold_opacity_1: $p_gold_opacity_1,
-  p_gold_opacity_2: $p_gold_opacity_2,
-  p_gold_opacity_3: $p_gold_opacity_3,
-  p_gold_opacity_4: $p_gold_opacity_4,
-  p_gold_opacity_5: $p_gold_opacity_5,
-  p_gold_opacity_6: $p_gold_opacity_6,
-  p_gold_opacity_7: $p_gold_opacity_7,
-  p_gold_opacity_8: $p_gold_opacity_8,
-  p_gold_opacity_9: $p_gold_opacity_9,
-
-  p_blue_opacity_1: $p_blue_opacity_1,
-  p_blue_opacity_2: $p_blue_opacity_2,
-  p_blue_opacity_3: $p_blue_opacity_3,
-  p_blue_opacity_4: $p_blue_opacity_4,
-  p_blue_opacity_5: $p_blue_opacity_5,
-  p_blue_opacity_6: $p_blue_opacity_6,
-  p_blue_opacity_7: $p_blue_opacity_7,
-  p_blue_opacity_8: $p_blue_opacity_8,
-  p_blue_opacity_9: $p_blue_opacity_9,
-
-  p_red_opacity_1: $p_red_opacity_1,
-  p_red_opacity_2: $p_red_opacity_2,
-  p_red_opacity_3: $p_red_opacity_3,
-  p_red_opacity_4: $p_red_opacity_4,
-  p_red_opacity_5: $p_red_opacity_5,
-  p_red_opacity_6: $p_red_opacity_6,
-  p_red_opacity_7: $p_red_opacity_7,
-  p_red_opacity_8: $p_red_opacity_8,
-  p_red_opacity_9: $p_red_opacity_9,
-
-  p_royal_opacity_1: $p_royal_opacity_1,
-  p_royal_opacity_2: $p_royal_opacity_2,
-  p_royal_opacity_3: $p_royal_opacity_3,
-  p_royal_opacity_4: $p_royal_opacity_4,
-  p_royal_opacity_5: $p_royal_opacity_5,
-  p_royal_opacity_6: $p_royal_opacity_6,
-  p_royal_opacity_7: $p_royal_opacity_7,
-  p_royal_opacity_8: $p_royal_opacity_8,
-  p_royal_opacity_9: $p_royal_opacity_9,
-
-  p_green_opacity_1: $p_green_opacity_1,
-  p_green_opacity_2: $p_green_opacity_2,
-  p_green_opacity_3: $p_green_opacity_3,
-  p_green_opacity_4: $p_green_opacity_4,
-  p_green_opacity_5: $p_green_opacity_5,
-  p_green_opacity_6: $p_green_opacity_6,
-  p_green_opacity_7: $p_green_opacity_7,
-  p_green_opacity_8: $p_green_opacity_8,
-  p_green_opacity_9: $p_green_opacity_9,
-
-  white_opacity_1: $white_opacity_1,
-  white_opacity_2: $white_opacity_2,
-  white_opacity_3: $white_opacity_3,
-  white_opacity_4: $white_opacity_4,
-  white_opacity_5: $white_opacity_5,
-  white_opacity_6: $white_opacity_6,
-  white_opacity_7: $white_opacity_7,
-  white_opacity_8: $white_opacity_8,
-  white_opacity_9: $white_opacity_9,
-
-  black_opacity_1: $black_opacity_1,
-  black_opacity_2: $black_opacity_2,
-  black_opacity_3: $black_opacity_3,
-  black_opacity_4: $black_opacity_4,
-  black_opacity_5: $black_opacity_5,
-  black_opacity_6: $black_opacity_6,
-  black_opacity_7: $black_opacity_7,
-  black_opacity_8: $black_opacity_8,
-  black_opacity_9: $black_opacity_9
-);
-
-// Highlight Colors
-$light_yellow:      #fffcda;
-$medium_yellow:     #FFFF9E;
-$light_blue:        #F0F3F8;
-$highlight_colors: (light_blue: $light_blue, light_yellow: $light_yellow, medium_yellow: $medium_yellow);
+$transparent: transparent;
+
+:export {
+
+  @mixin export-colors($colors-list) {
+    @each $name, $color in $colors-list {
+      #{$name}: $color;
+    }
+  }
+  @include export-colors($product_colors);
+  @include export-colors($action_colors);
+  @include export-colors($status_colors);
+  @include export-colors($data_colors);
+  @include export-colors($shadow_colors);
+  @include export-colors($colors);
+  @include export-colors($interface_colors);
+  @include export-colors($main_colors);
+  @include export-colors($background_colors);
+  @include export-colors($card_colors);
+  @include export-colors($active_colors);
+  @include export-colors($hover_colors);
+  @include export-colors($border_colors);
+  @include export-colors($text_colors);
+  gradient_start: $gradient_start;
+  gradient_end: $gradient_end;
+}

data/app/pb_kits/playbook/tokens/_line_height.scss

@@ -5,3 +5,12 @@ $lh_normal:   1.5;
 $lh_loose:    1.6;
 $lh_looser:   1.8;
 $lh_loosest:  2;
+$line_height: (
+  tightest: $lh_tightest,
+  tighter: $lh_tighter,
+  tight: $lh_tight,
+  normal: $lh_normal,
+  loose: $lh_loose,
+  looser: $lh_looser,
+  loosest: $lh_loosest
+);

data/app/pb_kits/playbook/tokens/_opacity.scss

@@ -7,3 +7,15 @@ $opacity_6: .6;
 $opacity_7: .7;
 $opacity_8: .8;
 $opacity_9: .9;
+$opacity_10: 1;
+$opacity: (
+  opacity_1: $opacity_1,
+  opacity_2: $opacity_2,
+  opacity_3: $opacity_3,
+  opacity_4: $opacity_4,
+  opacity_5: $opacity_5,
+  opacity_6: $opacity_6,
+  opacity_7: $opacity_7,
+  opacity_8: $opacity_8,
+  opacity_9: $opacity_9,
+);

data/app/pb_kits/playbook/tokens/_positioning.scss

@@ -9,6 +9,17 @@ $z_7: 700;
 $z_8: 800;
 $z_9: 900;
 $z_10: 1000;
+$z_index: (
+  zindex_1: $z_1,
+  zindex_2: $z_1,
+  zindex_3: $z_1,
+  zindex_4: $z_1,
+  zindex_5: $z_1,
+  zindex_6: $z_1,
+  zindex_7: $z_1,
+  zindex_8: $z_1,
+  zindex_9: $z_1,
+);
 
 $z_layers: (
   "header": $z_10,

data/app/pb_kits/playbook/tokens/_shadows.scss

@@ -1,8 +1,17 @@
 @import "colors";
 @import "opacity";
 
-$shadow_shallow: 0 1px 1px 0 rgba($black, 0.05);
-$shadow_default: 0 1px 5px 0 $black_opacity_2;
-$shadow_deep: 0 2px 10px 0 $black_opacity_2;
-$shadow_deeper: 0 7px 18px 0 $black_opacity_2;
-$shadow_deepest: 0 31px 41px 0 rgba($ink_dark, $opacity_2), 0 2px 16px 0 rgba($ink_dark, 0.08);
+$shadow_none: 0 0 0 0 transparent;
+$shadow_shallow: 0 1px 1px 0 $shadow_light;
+$shadow_default: 0 1px 5px 0 $shadow_light;
+$shadow_deep: 0 2px 10px 0 $shadow_light;
+$shadow_deeper: 0 7px 18px 0 $shadow_light;
+$shadow_deepest: 0 31px 41px 0 rgba($bg_dark, $opacity_2), 0 2px 16px 0 rgba($bg_dark, 0.08);
+$box_shadows: (
+  shadow_none: $shadow_none,
+  shadow_shallow: $shadow_shallow,
+  shadow_default: $shadow_default,
+  shadow_deep: $shadow_deep,
+  shadow_deeper: $shadow_deeper,
+  shadow_deepest: $shadow_deepest
+);

data/app/pb_kits/playbook/tokens/_spacing.scss

@@ -6,7 +6,6 @@ $space_sm: 16px;
 $space_md: 24px;
 $space_lg: 32px;
 $space_xl: 40px;
-
 $spaces:(
   space_xs: $space_xs,
   space_sm: $space_sm,