playbook_ui 16.2.0.pre.alpha.iconfixes14578 → 16.2.0.pre.alpha.paginationpoc14472

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7ea3eb503ddb54ca40d789a5d83867846c64bfb055c359b3fe0ee5997f9e33dd
-  data.tar.gz: 2404e05c9718ede9c7b72290b31d3e45e16d60bc66aad702bf6f6d042f1a7bf2
+  metadata.gz: 9b1fc350d7db9a34ab849ddcde7e29d07b0d2100245b347f70ecc055a380142e
+  data.tar.gz: 5a3889c3f030943c7dd5999cc95e01b1884b85cf1c5266876d7f44657bf8fcb5
 SHA512:
-  metadata.gz: 0ca2b19d3e4c25c13d1d7fe866f56fded40ae2aa264f1606fdad81210f115b19240317b6eb501de0451455acd1b020679cbb88226e105a2994b1b70a992840ee
-  data.tar.gz: 46a15f5b53ae54799987907fc916344790c9d35cbaf5b033530b1e30e1f58476cac3ed8fd938ca614a8ecce3b016c0a11d0cc0c211fb48258ee9a28cb9874f28
+  metadata.gz: d6614eb5e4ac6a2ae1c5a472d8780fda9b130ed4ea7725abe76ccb6a88be5a1be27cc46acc020044a9d0559ce89861c735211d49bea5208fba4da3be91becbe0
+  data.tar.gz: e89c242fdfcc9e383a699dd4dee36c731d9826dcd9e36d6aebaca1d2b32f210f5e1f0e27e49b6bad34e1a76d6d4cf054a3a7b268178ea37ac8bc0a5339249433

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_default_color);
+  @include pb_body($text_lt_default);
   
   b,
   strong {
@@ -38,9 +38,9 @@
   }
 
   a {
-    color: $text_link;
+    color: $primary;
     &:hover {
-      color: $text_default_color;
+      color: $text_lt_default;
     }
   }
 
@@ -110,7 +110,7 @@
   @include pb_body_dark();
   
   a {
-    color: $text_link_dark;
+    color: $active_dark;
   }
 }
 

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

@@ -3,38 +3,38 @@
 @import "../tokens/typography";
 
 $pb_body_colors: (
-  default: $text_default_color,
-  light: $text_light,
-  lighter: $text_lighter,
-  link: $text_link,
-  error: $text_error,
-  success: $text_success,
+  default: $text_lt_default,
+  light: $text_lt_light,
+  lighter: $text_lt_lighter,
+  link: $primary,
+  error: $error,
+  success: $text_lt_success_sm,
 );
 
 $pb_dark_body_colors: (
-  default: $text_default_dark,
-  light: $text_light_dark,
-  lighter: $text_lighter_dark,
-  link: $text_link_dark,
-  error: $text_error_dark,
-  success: $text_success_dark,
+  default: $text_dk_default,
+  light: $text_dk_light,
+  lighter: $text_dk_lighter,
+  link: $active_dark,
+  error: $error,
+  success: $text_dk_success_sm,
 );
 
 // Order is important here!
 $pb_body_status: (
-  default: $text_default_color,
-  negative: $text_error,
-  dark_error: $text_error_dark,
-  positive: $text_success,
+  default: $text_lt_default,
+  negative: $error,
+  dark_error: $error_dark_body,
+  positive: $text_lt_success_sm,
 );
 
 $pb_dark_body_status: (
-  default: $text_default_dark,
-  negative: $text_error_dark,
-  positive: $text_success_dark,
+  default: $text_dk_default,
+  negative: $error_dark,
+  positive: $text_dk_success_sm,
 );
 
-@mixin pb_body($color: $text_default_color) {
+@mixin pb_body($color: $text_lt_default) {
   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_light);
+  @include pb_body($text_lt_light);
 }
 
 @mixin pb_body_lighter {
-  @include pb_body($text_lighter);
+  @include pb_body($text_lt_lighter);
 }
 
 @mixin pb_body_dark {
-  @include pb_body($text_default_dark);
+  @include pb_body($text_dk_default);
 }
 
 @mixin pb_body_light_dark {
-  @include pb_body($text_light_dark);
+  @include pb_body($text_dk_light);
 }
 
 @mixin pb_body_lighter_dark {
-  @include pb_body($text_lighter_dark);
+  @include pb_body($text_dk_lighter);
 }
 
 // Statuses =====================
 @mixin pb_body_negative {
-  @include pb_body($text_error);
+  @include pb_body($error);
 }
 
 @mixin pb_body_dark_error {
-  @include pb_body($text_error_dark);
+  @include pb_body($error_dark_body);
 }
 
 @mixin pb_body_positive {
-  @include pb_body($text_success);
+  @include pb_body($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: $text_link;
+  color: $primary;
 }
 
 // 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_default_color,
-  light:          $text_light,
-  link:           $text_link,
-  lighter:        $text_lighter,
-  success:        $text_success,
-  error:          $text_error,
+  default:        $text_lt_default,
+  light:          $text_lt_light,
+  link:           $primary,
+  lighter:        $text_lt_lighter,
+  success:        $text_lt_success_sm,
+  error:          $error,
 );
 
 $pb_dark_caption_colors: (
-  default:        $text_default_dark,
-  light:          $text_light_dark,
-  lighter:        $text_lighter_dark,
-  link:           $text_link_dark,
-  success:        $text_success_dark,
-  error:          $text_error_dark,
+  default:        $text_dk_default,
+  light:          $text_dk_light,
+  lighter:        $text_dk_lighter,
+  link:           $active_dark,
+  success:        $text_dk_success_sm,
+  error:          $error_dark,
 );
 
 
 @mixin caption($font_size: $font_smaller, $font_weight: $bold) {
   font-weight: $font_weight;
-  color: $text_light;
+  color: $text_lt_light;
   text-transform: uppercase;
   font-size: $font_size;
   letter-spacing: $lspace_loosest;
 }
 
-@mixin caption_color($color: $text_light) {
+@mixin caption_color($color: $text_lt_light) {
   color: $color;
 }
 
@@ -43,5 +43,5 @@ $pb_dark_caption_colors: (
 }
 
 @mixin caption_dark {
-  color: $text_light_dark;
+  color: $text_dk_light;
 }

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

@@ -1,6 +1,4 @@
-<%= 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" }) %>
+<%= 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" }) %>

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

@@ -4,33 +4,23 @@ import Caption from "../../pb_caption/_caption"
 const CaptionColors = (props) => {
   return (
     <div>
-      <Caption 
-          text="Caption light"
-          {...props}
-      />
-      <Caption
-          color="default"
-          text="Caption default"
-          {...props}
-      />
       <Caption
-          color="lighter"
-          text="Caption lighter"
+          text="Test colors"
           {...props}
       />
       <Caption
           color="success"
-          text="Caption success"
+          text="Test colors"
           {...props}
       />
       <Caption
           color="error"
-          text="Caption error"
+          text="Test colors"
           {...props}
       />
       <Caption
           color="link"
-          text="Caption link"
+          text="Test colors"
           {...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 $input_border_default 2px;
+    border: solid $border_light 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 $input_border_state;
+        box-shadow: 0px 0px 0px 2px $white, 0px 0px 0px 4px $primary;
     }
     &:checked ~ .pb_checkbox_checkmark,
     & ~ .pb_checkbox_indeterminate {
       background-color: $primary_action;
-      border-color: $input_border_state;
+      border-color: $primary_action;
 
       &:hover {
         background-color: $primary_action;
-        border-color: $input_border_state;
+        border-color: $primary_action;
       }
     }
     &: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: $input_border_disabled;
+      border-color: $border_light;
 
       & ~ .pb_checkbox_label {
         cursor: not-allowed;
-        color: $text_light;
+        color: $text_lt_light;
       }
       & ~ .pb_checkbox_label .pb_body_kit {
         cursor: not-allowed;
-        color: $text_light;
+        color: $text_lt_light;
       }
     }
 
     &:disabled:checked ~ .pb_checkbox_checkmark {
       background-color: $neutral;
-      border-color: $input_border_disabled;
+      border-color: $neutral;
     }
 
     &:disabled:checked:hover ~ .pb_checkbox_checkmark {
       background-color: $neutral;
-      border-color: $input_border_disabled;
+      border-color: $neutral;
     }
   }
 
   &.dark {
     input {
       &:focus ~ .pb_checkbox_checkmark {
-        box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $input_border_state_dark;      
+        box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $primary;      
       }
 
       &:disabled ~ .pb_checkbox_checkmark {
         cursor: not-allowed;
         background-color: mix($charcoal, $white, 80%);
-        border: 2px solid $input_border_disabled_dark;
+        border: 2px solid $border_dark;
 
         & ~ .pb_checkbox_label {
           cursor: not-allowed;
-          color: $text_light_dark;
+          color: $text_dk_light;
         }
         & ~ .pb_checkbox_label .pb_body_kit {
           cursor: not-allowed;
-          color: $text_light_dark;
+          color: $text_dk_light;
         }
       }
 
@@ -136,7 +136,7 @@ $transition: $transition_cubic;
 
       &:disabled:checked:hover ~ .pb_checkbox_checkmark {
         background-color: $border_dark;
-        border-color: $input_border_disabled_dark;
+        border-color: $border_dark;
       }
     }
     
@@ -148,15 +148,15 @@ $transition: $transition_cubic;
 
     &.pb_checkbox_kit_error {
       > .pb_checkbox_checkmark {
-        border-color: $input_border_error_dark;
+        border-color: $error_dark;
        }
 
        input {
         &:checked ~ .pb_checkbox_checkmark,
         & ~ .pb_checkbox_indeterminate {
-          border-color: $input_border_state_dark;
+          border-color: $primary;
           &:hover {
-            border-color: $input_border_state_dark;
+            border-color: $primary;
           }
         }
       }
@@ -165,7 +165,7 @@ $transition: $transition_cubic;
 
   &.pb_checkbox_kit_error {
     > .pb_checkbox_checkmark {
-      border-color: $input_border_error;
+      border-color: $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: $status_border_primary;
+      border-color: $primary;
     }
     .add-on-card {
-      border-color: $status_border_primary;
+      border-color: $primary;
     }
   }
 
@@ -39,18 +39,18 @@
     &:hover {
       .add-on-card {
         cursor: pointer;
-        background-color: rgba($input_background_state, $opacity_5);
+        background-color: rgba($focus_input_light,$opacity_5);
       }
     }
   }
   .text_input_wrapper_add_on .add-on-icon {
-    color: $status_border_primary
+    color: $text_lt_light
   }
 
   .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 $input_border_default;
+    border: 1px solid $border_light;
   }
 
   // Hide Caret

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

@@ -194,9 +194,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     if (error) {
       base += ' error'
     }
-    if (disableInput) {
-      base += ' disabled'
-    }
     return base
   }
 
@@ -221,14 +218,11 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
         {!hideLabel && (
            <label htmlFor={pickerId}>
             {requiredIndicator ? (
-              <Caption className="pb_date_picker_kit_label"
-                  color="lighter"
-              >
+              <Caption className="pb_date_picker_kit_label">
                 {label} <span style={{ color: `${colors.error}` }}>*</span>
               </Caption>
             ) : (
               <Caption className="pb_date_picker_kit_label"
-                  color="lighter"
                   text={label}
               />
             )}

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -7,11 +7,11 @@
     <% if !object.hide_label && object.label %>
       <label for="<%= object.picker_id %>">
         <% if object.required_indicator %>
-          <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_date_picker_kit_label", color: "lighter" }) do %>
+          <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_date_picker_kit_label" }) do %>
             <%= object.label %><span style="color: #DA0014;"> *</span>
           <% end %>
         <% else %>
-          <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_date_picker_kit_label", color: "lighter" }) %>
+          <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_date_picker_kit_label" }) %>
         <% end %>
       </label>
     <% end %>

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

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

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

@@ -1,5 +1,4 @@
 @import "../../pb_textarea/textarea_mixin";
-@import "../../tokens/colors";
 
 .pb_date_picker_kit {
 
@@ -14,7 +13,6 @@
     input::placeholder,
     .date_picker_input .placeholder {
       @include pb_body_light;
-      color: $input_text_default;
     }
 
     input,
@@ -26,90 +24,17 @@
 
     input:hover,
     .date_picker_input:hover {
-      background-color: $input_background_state;
+      background-color: rgba($focus_input_light, $opacity_5);
     }
 
     input:focus,
     .date_picker_input:focus,
     input:-webkit-autofill:focus,
     .date_picker_input:-webkit-autofill:focus {
-      @include pb_textarea_focus_light;
+      @include pb_textarea_focus;
       @include transition_default;
-    }
-
-    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;
-        }
-      }
+      border-color: $primary;
+      background-color: rgba($focus_input_light, $opacity_5);
     }
   }
 
@@ -121,7 +46,7 @@
 
       input,
       .date_picker_input {
-        border-color: $input_border_error;
+        border-color: $error;
       }
     }
   }

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

@@ -4,16 +4,13 @@
 
 .pb_date_picker_kit {
   .pb_time_selection {
-    color: $input_text_default;
-    background-color: $input_background_default;
+    color: inherit;
     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;
@@ -44,9 +41,6 @@
       }
     }
     .meridiem {
-      &.dark {
-        background-color: $input_background_default;
-      }
       .pb_form_group_kit {
         margin-left: $space_sm;
       }
@@ -65,7 +59,6 @@
         width: 60px;
         height: 40px;
         text-align: center;
-        color: $input_text_active;
       }
     }
   }