playbook_ui 16.2.0.pre.alpha.paginationpoc14472 → 16.2.0.pre.alpha.paginationpoc14516

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9b1fc350d7db9a34ab849ddcde7e29d07b0d2100245b347f70ecc055a380142e
-  data.tar.gz: 5a3889c3f030943c7dd5999cc95e01b1884b85cf1c5266876d7f44657bf8fcb5
+  metadata.gz: a47a768acb57baad8b4090f56af96524599718bd921c2364b6c67b65881716aa
+  data.tar.gz: 2530f963c009a6b94b95cd22c0c79ba68eaf44237b7f7f9c2e362edcce8e1d78
 SHA512:
-  metadata.gz: d6614eb5e4ac6a2ae1c5a472d8780fda9b130ed4ea7725abe76ccb6a88be5a1be27cc46acc020044a9d0559ce89861c735211d49bea5208fba4da3be91becbe0
-  data.tar.gz: e89c242fdfcc9e383a699dd4dee36c731d9826dcd9e36d6aebaca1d2b32f210f5e1f0e27e49b6bad34e1a76d6d4cf054a3a7b268178ea37ac8bc0a5339249433
+  metadata.gz: d7f609b83192cd5d856a986fdce79dcef08d803eaded0271b9ad88c12a916239131fe2594e31171290d436f52cdce8b1ac9671a00895885f6b25c54efa287573
+  data.tar.gz: 5f57bf8d93b0b79f386d09c9271115c60ae70600bae4b7761cc1dc0baa9ae33def5168ccbe28739bc8c743be6705f1c7507e5043b09c33c96ec5d5a6c79673f2

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -30,7 +30,7 @@
 .pb_body_kit_error_neutral,
 .pb_body_kit_error_positive,
 .pb_body_kit_error_negative {
-  @include pb_body($text_lt_default);
+  @include pb_body($text_default_color);
   
   b,
   strong {
@@ -38,9 +38,9 @@
   }
 
   a {
-    color: $primary;
+    color: $text_link;
     &:hover {
-      color: $text_lt_default;
+      color: $text_default_color;
     }
   }
 
@@ -110,7 +110,7 @@
   @include pb_body_dark();
   
   a {
-    color: $active_dark;
+    color: $text_link_dark;
   }
 }
 

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -3,38 +3,38 @@
 @import "../tokens/typography";
 
 $pb_body_colors: (
-  default: $text_lt_default,
-  light: $text_lt_light,
-  lighter: $text_lt_lighter,
-  link: $primary,
-  error: $error,
-  success: $text_lt_success_sm,
+  default: $text_default_color,
+  light: $text_light,
+  lighter: $text_lighter,
+  link: $text_link,
+  error: $text_error,
+  success: $text_success,
 );
 
 $pb_dark_body_colors: (
-  default: $text_dk_default,
-  light: $text_dk_light,
-  lighter: $text_dk_lighter,
-  link: $active_dark,
-  error: $error,
-  success: $text_dk_success_sm,
+  default: $text_default_dark,
+  light: $text_light_dark,
+  lighter: $text_lighter_dark,
+  link: $text_link_dark,
+  error: $text_error_dark,
+  success: $text_success_dark,
 );
 
 // Order is important here!
 $pb_body_status: (
-  default: $text_lt_default,
-  negative: $error,
-  dark_error: $error_dark_body,
-  positive: $text_lt_success_sm,
+  default: $text_default_color,
+  negative: $text_error,
+  dark_error: $text_error_dark,
+  positive: $text_success,
 );
 
 $pb_dark_body_status: (
-  default: $text_dk_default,
-  negative: $error_dark,
-  positive: $text_dk_success_sm,
+  default: $text_default_dark,
+  negative: $text_error_dark,
+  positive: $text_success_dark,
 );
 
-@mixin pb_body($color: $text_lt_default) {
+@mixin pb_body($color: $text_default_color) {
   line-height: $lh_tight;
   color: $color;
   font-size: $text_default;
@@ -44,34 +44,34 @@ $pb_dark_body_status: (
 
 // Colors ======================
 @mixin pb_body_light {
-  @include pb_body($text_lt_light);
+  @include pb_body($text_light);
 }
 
 @mixin pb_body_lighter {
-  @include pb_body($text_lt_lighter);
+  @include pb_body($text_lighter);
 }
 
 @mixin pb_body_dark {
-  @include pb_body($text_dk_default);
+  @include pb_body($text_default_dark);
 }
 
 @mixin pb_body_light_dark {
-  @include pb_body($text_dk_light);
+  @include pb_body($text_light_dark);
 }
 
 @mixin pb_body_lighter_dark {
-  @include pb_body($text_dk_lighter);
+  @include pb_body($text_lighter_dark);
 }
 
 // Statuses =====================
 @mixin pb_body_negative {
-  @include pb_body($error);
+  @include pb_body($text_error);
 }
 
 @mixin pb_body_dark_error {
-  @include pb_body($error_dark_body);
+  @include pb_body($text_error_dark);
 }
 
 @mixin pb_body_positive {
-  @include pb_body($success);
+  @include pb_body($text_success);
 }

data/app/pb_kits/playbook/pb_caption/_caption.scss

@@ -88,7 +88,7 @@
 .pb_caption_kit_base_link,
 .pb_caption_kit_lg_link,
 .pb_caption_kit_xl_link {
-  color: $primary;
+  color: $text_link;
 }
 
 // Dark theme variants

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -2,33 +2,33 @@
 @import "../tokens/typography";
 
 $pb_caption_colors: (
-  default:        $text_lt_default,
-  light:          $text_lt_light,
-  link:           $primary,
-  lighter:        $text_lt_lighter,
-  success:        $text_lt_success_sm,
-  error:          $error,
+  default:        $text_default_color,
+  light:          $text_light,
+  link:           $text_link,
+  lighter:        $text_lighter,
+  success:        $text_success,
+  error:          $text_error,
 );
 
 $pb_dark_caption_colors: (
-  default:        $text_dk_default,
-  light:          $text_dk_light,
-  lighter:        $text_dk_lighter,
-  link:           $active_dark,
-  success:        $text_dk_success_sm,
-  error:          $error_dark,
+  default:        $text_default_dark,
+  light:          $text_light_dark,
+  lighter:        $text_lighter_dark,
+  link:           $text_link_dark,
+  success:        $text_success_dark,
+  error:          $text_error_dark,
 );
 
 
 @mixin caption($font_size: $font_smaller, $font_weight: $bold) {
   font-weight: $font_weight;
-  color: $text_lt_light;
+  color: $text_light;
   text-transform: uppercase;
   font-size: $font_size;
   letter-spacing: $lspace_loosest;
 }
 
-@mixin caption_color($color: $text_lt_light) {
+@mixin caption_color($color: $text_light) {
   color: $color;
 }
 
@@ -43,5 +43,5 @@ $pb_dark_caption_colors: (
 }
 
 @mixin caption_dark {
-  color: $text_dk_light;
+  color: $text_light_dark;
 }

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.html.erb

@@ -1,4 +1,6 @@
-<%= pb_rails("caption", props: { text: "Test colors" }) %>
-<%= pb_rails("caption", props: { text: "Test colors", color: "success" }) %>
-<%= pb_rails("caption", props: { text: "Test colors", color: "error" }) %>
-<%= pb_rails("caption", props: { text: "Test colors", color: "link" }) %>
+<%= pb_rails("caption", props: { text: "Caption light" }) %>
+<%= pb_rails("caption", props: { text: "Caption default", color: "default" }) %>
+<%= pb_rails("caption", props: { text: "Caption lighter", color: "lighter" }) %>
+<%= pb_rails("caption", props: { text: "Caption success", color: "success" }) %>
+<%= pb_rails("caption", props: { text: "Caption error", color: "error" }) %>
+<%= pb_rails("caption", props: { text: "Caption link", color: "link" }) %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx

@@ -4,23 +4,33 @@ import Caption from "../../pb_caption/_caption"
 const CaptionColors = (props) => {
   return (
     <div>
+      <Caption 
+          text="Caption light"
+          {...props}
+      />
+      <Caption
+          color="default"
+          text="Caption default"
+          {...props}
+      />
       <Caption
-          text="Test colors"
+          color="lighter"
+          text="Caption lighter"
           {...props}
       />
       <Caption
           color="success"
-          text="Test colors"
+          text="Caption success"
           {...props}
       />
       <Caption
           color="error"
-          text="Test colors"
+          text="Caption error"
           {...props}
       />
       <Caption
           color="link"
-          text="Test colors"
+          text="Caption link"
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -26,7 +26,7 @@ $transition: $transition_cubic;
   .pb_checkbox_checkmark,
   .pb_checkbox_indeterminate {
     align-items: center;
-    border: solid $border_light 2px;
+    border: solid $input_border_default 2px;
     border-radius: $border_rad_light;
     height: 22px;
     transition: background $transition_default ease, box-shadow $transition_default ease;
@@ -62,16 +62,16 @@ $transition: $transition_cubic;
     left: $offscreen;
 
     &:focus ~ .pb_checkbox_checkmark {
-        box-shadow: 0px 0px 0px 2px $white, 0px 0px 0px 4px $primary;
+        box-shadow: 0px 0px 0px 2px $white, 0px 0px 0px 4px $input_border_state;
     }
     &:checked ~ .pb_checkbox_checkmark,
     & ~ .pb_checkbox_indeterminate {
       background-color: $primary_action;
-      border-color: $primary_action;
+      border-color: $input_border_state;
 
       &:hover {
         background-color: $primary_action;
-        border-color: $primary_action;
+        border-color: $input_border_state;
       }
     }
     &:checked ~ .pb_checkbox_checkmark,
@@ -86,47 +86,47 @@ $transition: $transition_cubic;
     &:disabled ~ .pb_checkbox_checkmark {
       cursor: not-allowed;
       background-color: mix($charcoal, $white, 5%);
-      border-color: $border_light;
+      border-color: $input_border_disabled;
 
       & ~ .pb_checkbox_label {
         cursor: not-allowed;
-        color: $text_lt_light;
+        color: $text_light;
       }
       & ~ .pb_checkbox_label .pb_body_kit {
         cursor: not-allowed;
-        color: $text_lt_light;
+        color: $text_light;
       }
     }
 
     &:disabled:checked ~ .pb_checkbox_checkmark {
       background-color: $neutral;
-      border-color: $neutral;
+      border-color: $input_border_disabled;
     }
 
     &:disabled:checked:hover ~ .pb_checkbox_checkmark {
       background-color: $neutral;
-      border-color: $neutral;
+      border-color: $input_border_disabled;
     }
   }
 
   &.dark {
     input {
       &:focus ~ .pb_checkbox_checkmark {
-        box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $primary;      
+        box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $input_border_state_dark;      
       }
 
       &:disabled ~ .pb_checkbox_checkmark {
         cursor: not-allowed;
         background-color: mix($charcoal, $white, 80%);
-        border: 2px solid $border_dark;
+        border: 2px solid $input_border_disabled_dark;
 
         & ~ .pb_checkbox_label {
           cursor: not-allowed;
-          color: $text_dk_light;
+          color: $text_light_dark;
         }
         & ~ .pb_checkbox_label .pb_body_kit {
           cursor: not-allowed;
-          color: $text_dk_light;
+          color: $text_light_dark;
         }
       }
 
@@ -136,7 +136,7 @@ $transition: $transition_cubic;
 
       &:disabled:checked:hover ~ .pb_checkbox_checkmark {
         background-color: $border_dark;
-        border-color: $border_dark;
+        border-color: $input_border_disabled_dark;
       }
     }
     
@@ -148,15 +148,15 @@ $transition: $transition_cubic;
 
     &.pb_checkbox_kit_error {
       > .pb_checkbox_checkmark {
-        border-color: $error_dark;
+        border-color: $input_border_error_dark;
        }
 
        input {
         &:checked ~ .pb_checkbox_checkmark,
         & ~ .pb_checkbox_indeterminate {
-          border-color: $primary;
+          border-color: $input_border_state_dark;
           &:hover {
-            border-color: $primary;
+            border-color: $input_border_state_dark;
           }
         }
       }
@@ -165,7 +165,7 @@ $transition: $transition_cubic;
 
   &.pb_checkbox_kit_error {
     > .pb_checkbox_checkmark {
-      border-color: $error;
+      border-color: $input_border_error;
     }
   }
 }

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -24,14 +24,14 @@
   }
 
   &:focus,
-  :focus-within {
+  &:focus-within {
     div.cal_icon_wrapper,
     input.date_picker_input {
       @include transition_default;
-      border-color: $primary;
+      border-color: $status_border_primary;
     }
     .add-on-card {
-      border-color: $primary;
+      border-color: $status_border_primary;
     }
   }
 
@@ -39,18 +39,18 @@
     &:hover {
       .add-on-card {
         cursor: pointer;
-        background-color: rgba($focus_input_light,$opacity_5);
+        background-color: rgba($input_background_state, $opacity_5);
       }
     }
   }
   .text_input_wrapper_add_on .add-on-icon {
-    color: $text_lt_light
+    color: $status_border_primary
   }
 
   .text_input_wrapper_add_on .add-on-right .text_input{
     cursor: pointer;
   }
-  
+
 }
 
 
@@ -71,7 +71,7 @@
   // Calendar Shadow and Border
   .flatpickr-calendar {
     box-shadow: $shadow_deeper;
-    border: 1px solid $border_light;
+    border: 1px solid $input_border_default;
   }
 
   // Hide Caret

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -194,6 +194,9 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     if (error) {
       base += ' error'
     }
+    if (disableInput) {
+      base += ' disabled'
+    }
     return base
   }
 

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -136,6 +136,7 @@ module Playbook
         class_string = "cal_icon_wrapper"
         class_string += " dark" if dark
         class_string += " no_label_shift" if hide_label
+        class_string += " disabled" if disable_input
         class_string += error_class
         class_string
       end

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss

@@ -5,30 +5,38 @@
   position: absolute;
   top: $space_md + 2;
   right: 0;
-  border-left: 1px solid $border_light;
+  border-left: 1px solid $input_border_default;
   width: $space_xl + $space_xs;
   height: $space_xl + 5;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-left: $space_sm - 1;
-  color: $text_lt_light;
+  color: $input_text_default;
   @media (hover: hover) {
     &:hover{
       background-color: rgba($focus_input_light,$opacity_5);
     }
   }
   &.dark {
-    color: $white;
-    border-color: $border_dark;
+    color: $input_text_default_dark;
+    border-left: 1px solid $input_border_default_dark;
   }
   &.no_label_shift {
     top: 0;
   }
   &.error {
-    border-left-color: $error;
+    border-left: 1px solid $input_border_error;
+  }
+  &.disabled {
+    border-left: 1px solid $input_border_disabled;
+    color: $input_text_disabled;
+  }
+  &.dark.disabled {
+    border-left: 1px solid $input_border_disabled_dark;
+    color: $input_text_disabled_dark;
   }
 }
 .cal_icon {
   width: $space_sm;
-}
+}

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss

@@ -1,4 +1,5 @@
 @import "../../pb_textarea/textarea_mixin";
+@import "../../tokens/colors";
 
 .pb_date_picker_kit {
 
@@ -13,6 +14,7 @@
     input::placeholder,
     .date_picker_input .placeholder {
       @include pb_body_light;
+      color: $input_text_default;
     }
 
     input,
@@ -24,17 +26,90 @@
 
     input:hover,
     .date_picker_input:hover {
-      background-color: rgba($focus_input_light, $opacity_5);
+      background-color: $input_background_state;
     }
 
     input:focus,
     .date_picker_input:focus,
     input:-webkit-autofill:focus,
     .date_picker_input:-webkit-autofill:focus {
-      @include pb_textarea_focus;
+      @include pb_textarea_focus_light;
       @include transition_default;
-      border-color: $primary;
-      background-color: rgba($focus_input_light, $opacity_5);
+    }
+
+    input:disabled,
+    .date_picker_input:disabled {
+      border-color: $input_border_disabled;
+      background-color: $input_background_disabled;
+      color: $input_text_disabled;
+    }
+
+    input:disabled::placeholder,
+    .date_picker_input:disabled::placeholder {
+      color: $input_text_disabled;
+    }
+  }
+
+  &.dark {
+    .date_picker_input_wrapper {
+      input::placeholder,
+      .date_picker_input .placeholder {
+        @include pb_body_light_dark;
+        color: $input_text_default_dark;
+      }
+
+      input,
+      .date_picker_input {
+        @include pb_textarea_dark;
+        @include pb_body_dark;
+        overflow: hidden;
+      }
+
+      input:hover,
+      .date_picker_input:hover {
+        background-color: $input_background_state_dark;
+      }
+
+      input:focus,
+      .date_picker_input:focus,
+      input:active,
+      .date_picker_input:active,
+      input:-webkit-autofill:focus,
+      .date_picker_input:-webkit-autofill:focus {
+        @include pb_textarea_focus_dark;
+        @include transition_default;
+      }
+
+      input:-webkit-autofill,
+      input:-webkit-autofill:hover,
+      input:-internal-autofill-selected,
+      .date_picker_input:-webkit-autofill,
+      .date_picker_input:-webkit-autofill:hover,
+      .date_picker_input:-internal-autofill-selected {
+        background-color: $input_background_state_dark;
+        color: $input_text_default_dark;
+      }
+
+      input:disabled,
+      .date_picker_input:disabled {
+        border-color: $input_border_disabled_dark;
+        background-color: $input_background_disabled_dark;
+        color: $input_text_disabled_dark;
+      }
+
+      input:disabled::placeholder,
+      .date_picker_input:disabled::placeholder {
+        color: $input_text_disabled_dark;
+      }
+    }
+
+    &.error {
+      .date_picker_input_wrapper {
+        input,
+        .date_picker_input {
+          border-color: $input_border_error_dark;
+        }
+      }
     }
   }
 
@@ -46,7 +121,7 @@
 
       input,
       .date_picker_input {
-        border-color: $error;
+        border-color: $input_border_error;
       }
     }
   }

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss

@@ -4,13 +4,16 @@
 
 .pb_date_picker_kit {
   .pb_time_selection {
-    color: inherit;
+    color: $input_text_default;
+    background-color: $input_background_default;
     text-align: left;
     margin-left: $space_sm;
 
     .numInputWrapper {
       width: auto;
       input.numInput {
+        background-color: $input_background_default;
+        color: $input_text_active;
         border: 1px solid $border_light !important;
         border-radius: 5px;
         text-align: center;
@@ -41,6 +44,9 @@
       }
     }
     .meridiem {
+      &.dark {
+        background-color: $input_background_default;
+      }
       .pb_form_group_kit {
         margin-left: $space_sm;
       }
@@ -59,6 +65,7 @@
         width: 60px;
         height: 40px;
         text-align: center;
+        color: $input_text_active;
       }
     }
   }