playbook_ui 2.5.0

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

@@ -0,0 +1,59 @@
+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)
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_link = link
+        self.configured_title = title
+        self.block = block_given? ? block : nil
+      end
+
+      def title
+        if configured_title == default_configuration
+          ""
+        else
+          configured_title
+        end
+      end
+
+      def link
+        if configured_link == default_configuration
+          "#"
+        else
+          configured_link
+        end
+      end
+
+      def yield(context:)
+        context.capture(&block)
+      end
+
+      def to_partial_path
+        "pb_vertical_nav/vertical_nav"
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end

data/app/pb_kits/playbook/tokens/_animation-curves.scss

@@ -0,0 +1,37 @@
+$bezier: cubic-bezier(.64, 0, .35, 1);
+// +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);
+
+/* 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);
+
+$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);
+
+$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);

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

@@ -0,0 +1,27 @@
+// 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
+
+
+// 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: $sky

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

@@ -0,0 +1,417 @@
+//=====================================
+// Base colors should not be documented.
+// Only document color use.
+
+// Colors -----------------------------
+$royal:               #004DFF;
+$blue:                #0082FF;
+$purple:              #9E64E9;
+$teal:                #00C4D7;
+$red:                 #FF2229;
+$yellow:              #F9BB00;
+$green:               #00CA74;
+$colors: (
+  royal:              $royal,
+  blue:               $blue,
+  purple:             $purple,
+  teal:               $teal,
+  red:                $red,
+  yellow:             $yellow,
+  green:              $green
+);
+
+// Specialty Gradient -----------------
+$gradient_start:      #0083FF;
+$gradient_end:        #0B43D6;
+
+// Interface colors -------------------
+$white:               #FFFFFF;
+$silver:              #F3F7FB;
+$slate:               #C1CDD6;
+$charcoal:            #242B42;
+$interface_colors: (
+  white:              $white,
+  silver:             $silver,
+  slate:              $slate,
+  charcoal:           $charcoal,
+);
+
+// Main colors ------------------------
+$primary:             $royal;
+$secondary:           $blue;
+$tertiary:            $yellow;
+$main_colors: (
+  primary:            $primary,
+  secondary:          $secondary,
+  tertiary:           $tertiary
+);
+//=====================================
+
+// Background colors ------------------
+$bg_light:            $silver;
+$bg_dark:             $charcoal;
+$background_colors: (
+  bg_light:           $bg_light,
+  bg_dark:            $bg_dark
+);
+
+// Card colors ------------------
+$card_light:          $white;
+$card_dark:           $charcoal;
+$card_colors: (
+  card_light:         $card_light,
+  card_dark:          $card_dark
+);
+
+// Active colors ----------------------
+$active_light:        #E5F2FF;
+$active_dark:         #144075;
+$active_colors: (
+  active_light:       $active_light,
+  active_dark:        $active_dark
+);
+
+// Hover colors -----------------------
+$hover_light:         darken($silver, 5%);
+$hover_dark:          lighten($charcoal, 5%);
+$hover_colors: (
+  hover_light:        $hover_light,
+  hover_dark:         $hover_dark
+);
+
+// Border colors ----------------------
+$border_light:        #E4E8F0;
+$border_dark:         #363D5B;
+$border_colors: (
+  border_light:       $border_light,
+  border_dark:        $border_dark
+);
+
+// Shadow colors ----------------------
+$shadow_light:        rgba($blue, 0.1);
+$shadow_dark:         rgba($slate, 0.1);
+$shadow_colors: (
+  shadow_light:       $shadow_light,
+  shadow_dark:        $shadow_dark
+);
+
+// Text colors ------------------------
+$text_lt_default:     $charcoal;
+$text_lt_light:       #919EAB;
+$text_lt_lighter:     $slate;
+$text_dk_default:     $white;
+$text_dk_light:       rgba($white, 0.6);
+$text_dk_lighter:     rgba($white, 0.4);
+$text_colors: (
+  text_lt_default:    $text_lt_default,
+  text_lt_light:      $text_lt_light,
+  text_lt_lighter:    $text_lt_lighter,
+  text_dk_default:    $text_dk_default,
+  text_dk_light:      $text_dk_light,
+  text_dk_lighter:    $text_dk_lighter
+);
+
+// Data colors ------------------------
+$data_1:              $royal;
+$data_2:              $blue;
+$data_3:              $purple;
+$data_4:              $teal;
+$data_5:              $green;
+$data_6:              $yellow;
+$data_7:              $red;
+$data_colors: (
+  data_1:             $data_1,
+  data_2:             $data_2,
+  data_3:             $data_3,
+  data_4:             $data_4,
+  data_5:             $data_5,
+  data_6:             $data_6,
+  data_7:             $data_7
+);
+
+// Status colors ----------------------
+$success:             $green;
+$warning:             $yellow;
+$error:               $red;
+$info:                $teal;
+$neutral:             $slate;
+$status_colors: (
+  success:            $success,
+  warning:            $warning,
+  error:              $error,
+  info:               $info,
+  neutral:            $neutral
+);
+
+// Link colors ------------------------
+$primary_action:      $primary;
+$primary_action_dk:   $blue;
+$action_colors: (
+  primary_action:     $primary_action,
+  primary_action_dk:  $primary_action_dk
+);
+
+// Product colors ---------------------
+$windows:             $royal;
+$siding:              $yellow;
+$doors:               $blue;
+$solar:               $green;
+$roofs:               $teal;
+$gutters:             $purple;
+$product_colors: (
+  windows:            $windows,
+  siding:             $siding,
+  doors:              $doors,
+  solar:              $solar,
+  roofs:              $roofs,
+  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);