playbook_ui 14.25.0.pre.alpha.testingcss9713 → 14.25.0.pre.alpha.testingcss9751

data/app/pb_kits/playbook/pb_currency/_currency.scss

@@ -1,38 +1,65 @@
-.pb_currency_kit {
-  &._center  {
-    & > .pb_caption,
-    & > .pb_title,
-    & > .pb_body {
+.pb_currency_kit,
+.pb_currency_kit_left_sm,
+.pb_currency_kit_left_md,
+.pb_currency_kit_left_lg,
+.pb_currency_kit_center_sm,
+.pb_currency_kit_center_md,
+.pb_currency_kit_center_lg,
+.pb_currency_kit_right_sm,
+.pb_currency_kit_right_md,
+.pb_currency_kit_right_lg {
+  
+  // Center alignment styles
+  &.pb_currency_kit_center_sm,
+  &.pb_currency_kit_center_md,
+  &.pb_currency_kit_center_lg {
+    text-align: center;
+    & > .pb_caption_kit,
+    & > .pb_title_kit,
+    & > .pb_body_kit {
       text-align: center;
     }
-    & > .pb_currency_wrapper {
+    & > .pb_currency_wrapper,
+    & > .pb_currency_wrapper_deemphasized,
+    & > .pb_currency_wrapper_light,
+    & > .pb_currency_wrapper_bold {
       justify-content: center;
     }
   }
 
-  &._right {
-    & > .pb_caption,
-    & > .pb_title,
-    & > .pb_body {
+  // Right alignment styles
+  &.pb_currency_kit_right_sm,
+  &.pb_currency_kit_right_md,
+  &.pb_currency_kit_right_lg {
+    text-align: right;
+    & > .pb_caption_kit,
+    & > .pb_title_kit,
+    & > .pb_body_kit {
       text-align: right;
     }
-    & > .pb_currency_wrapper {
+    & > .pb_currency_wrapper,
+    & > .pb_currency_wrapper_deemphasized,
+    & > .pb_currency_wrapper_light,
+    & > .pb_currency_wrapper_bold {
       justify-content: flex-end;
     }
   }
 
-  .pb_currency_wrapper {
+  .pb_currency_wrapper,
+  .pb_currency_wrapper_deemphasized,
+  .pb_currency_wrapper_light,
+  .pb_currency_wrapper_bold {
     display: flex;
     align-items: baseline;
 
-    &._deemphasized {
-      .pb_body_kit, .pb_body_kit {
+    &.pb_currency_wrapper_deemphasized {
+      .pb_body_kit {
         &:not(.dark) {
           color: $text_lt_default;
         }
       }
 
-      .pb_body_kit._light {
+      .pb_body_kit.pb_body_light {
         font-weight: $regular;
       }
 
@@ -41,8 +68,9 @@
       }
     }
 
-    &._light {
-      .pb_body_kit, .pb_title_kit {
+    &.pb_currency_wrapper_light {
+      .pb_body_kit, 
+      .pb_title_kit {
         color: $text_lt_light;
         font-weight: $regular;
       }
@@ -52,11 +80,16 @@
       }
     }
 
-    &._bold {
-      .pb_body_kit, ._light{
+    &.pb_currency_wrapper_bold {
+      .pb_body_kit,
+      .pb_body_light {
         color: $text_lt_default;
         font-weight: $bolder;
       }
+      
+      .pb_title_kit {
+        font-weight: $bolder;
+      }
     }
 
     & > .dollar_sign {
@@ -69,29 +102,81 @@
     }
   }
 
-  &._sm {
-    .pb_currency_wrapper._deemphasized {
+  // Small size specific styles
+  &.pb_currency_kit_sm,
+  &.pb_currency_kit_left_sm,
+  &.pb_currency_kit_center_sm,
+  &.pb_currency_kit_right_sm {
+    .pb_currency_wrapper_deemphasized {
       .pb_title_kit {
         font-weight: $regular;
       }
     }
+    
+    .pb_currency_wrapper,
+    .pb_currency_wrapper_deemphasized,
+    .pb_currency_wrapper_light,
+    .pb_currency_wrapper_bold {
+      .pb_currency_value {
+        line-height: 1.4;
+        padding-left: $space_xs - 7px;
+        padding-right: $space_xs - 7px;
+      }
+    }
   }
 
-  &._lg .pb_currency_wrapper .pb_currency_value {
-    line-height: .9;
-    padding-left: $space_xs - 7px;
-    padding-right: $space_xs - 7px;
+  // Medium size specific styles
+  &.pb_currency_kit_md,
+  &.pb_currency_kit_left_md,
+  &.pb_currency_kit_center_md,
+  &.pb_currency_kit_right_md {
+    .pb_currency_wrapper,
+    .pb_currency_wrapper_deemphasized,
+    .pb_currency_wrapper_light,
+    .pb_currency_wrapper_bold {
+      .pb_currency_value {
+        line-height: 1.2;
+        padding-left: $space_xs - 7px;
+        padding-right: $space_xs - 7px;
+      }
+    }
   }
 
-  &._md .pb_currency_wrapper .pb_currency_value {
-    line-height: 1.2;
-    padding-left: $space_xs - 7px;
-    padding-right: $space_xs - 7px;
+  // Large size specific styles
+  &.pb_currency_kit_lg,
+  &.pb_currency_kit_left_lg,
+  &.pb_currency_kit_center_lg,
+  &.pb_currency_kit_right_lg {
+    .pb_currency_wrapper,
+    .pb_currency_wrapper_deemphasized,
+    .pb_currency_wrapper_light,
+    .pb_currency_wrapper_bold {
+      .pb_currency_value {
+        line-height: .9;
+        padding-left: $space_xs - 7px;
+        padding-right: $space_xs - 7px;
+      }
+    }
   }
+}
 
-  &._sm .pb_currency_wrapper .pb_currency_value {
-    line-height: 1.4;
-    padding-left: $space_xs - 7px;
-    padding-right: $space_xs - 7px;
+// Bold variant - apply bold styling to all caption labels in currency components with bold wrappers
+.pb_currency_kit .pb_caption_kit {
+  &:has(~ .pb_currency_wrapper_bold) {
+    font-weight: $bolder;
   }
 }
+
+.pb_currency_kit_left_sm .pb_caption_kit,
+.pb_currency_kit_left_md .pb_caption_kit,
+.pb_currency_kit_left_lg .pb_caption_kit,
+.pb_currency_kit_center_sm .pb_caption_kit,
+.pb_currency_kit_center_md .pb_caption_kit,
+.pb_currency_kit_center_lg .pb_caption_kit,
+.pb_currency_kit_right_sm .pb_caption_kit,
+.pb_currency_kit_right_md .pb_caption_kit,
+.pb_currency_kit_right_lg .pb_caption_kit {
+  &:has(~ .pb_currency_wrapper_bold) {
+    font-weight: $bolder;
+  }
+}

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.scss

@@ -3,10 +3,20 @@
 @import "../pb_stat_change/stat_change";
 @import "../pb_body/body";
 
-.pb_dashboard_value_kit{
-  @each $align_name, $align_value in $pb_dashboard_value_align {
-    &[class*=_#{$align_name}]  {
-      @include pb_dashboard_value($align_value);
-    }
-  }
+.pb_dashboard_value_kit,
+.pb_dashboard_value_kit_left,
+.pb_dashboard_value_kit_center,
+.pb_dashboard_value_kit_right {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+.pb_dashboard_value_kit_center {
+  align-items: center;
+}
+
+.pb_dashboard_value_kit_right {
+  align-items: flex-end;
 }

data/app/pb_kits/playbook/pb_date/_date.scss

@@ -1,7 +1,10 @@
 @import "../pb_icon/icon";
 @import "../pb_title/title";
 
-.pb_date_kit {
+.pb_date_kit,
+.pb_date_kit_left,
+.pb_date_kit_center,
+.pb_date_kit_right {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -9,21 +12,6 @@
         margin-right: 4px !important;
     }
 
-    &._center {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        margin-right: 4px !important;
-    }
-
-    &._right {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-end;
-        margin-left: 4px !important;
-    }
     &.dark {
         .pb_title_kit {
             color: $text_dk_default !important;
@@ -32,4 +20,14 @@
             color: $text_dk_light !important;
         }
     }
+}
+
+.pb_date_kit_center {
+    justify-content: center;
+    margin-right: 4px !important;
+}
+
+.pb_date_kit_right {
+    justify-content: flex-end;
+    margin-left: 4px !important;
 }

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

@@ -9,8 +9,8 @@
 .pb_date_picker_kit {
   /*Default - No value in date picker*/
   &.inline-date-picker {
-    [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper input::placeholder,
-    [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
+    .pb_text_input_kit .text_input_wrapper .flatpickr-wrapper input::placeholder,
+    .pb_text_input_kit .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
       opacity: 1;
     }
     &:not(:hover) {
@@ -27,10 +27,10 @@
       }
     }
     &:hover {
-      [class^="pb_text_input_kit"] .text_input_wrapper input,
-      [class^="pb_text_input_kit"] .text_input_wrapper .text_input,
-      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper input::placeholder,
-      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
+      .pb_text_input_kit .text_input_wrapper input,
+      .pb_text_input_kit .text_input_wrapper .text_input,
+      .pb_text_input_kit .text_input_wrapper .flatpickr-wrapper input::placeholder,
+      .pb_text_input_kit .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
         color: $primary;
       }
       .date-picker-inline-angle-down.cal_icon_wrapper {
@@ -111,10 +111,10 @@
       }
     }
     &:hover {
-      [class^="pb_text_input_kit"] .text_input_wrapper input,
-      [class^="pb_text_input_kit"] .text_input_wrapper .text_input,
-      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper input::placeholder,
-      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
+      .pb_text_input_kit .text_input_wrapper input,
+      .pb_text_input_kit .text_input_wrapper .text_input,
+      .pb_text_input_kit .text_input_wrapper .flatpickr-wrapper input::placeholder,
+      .pb_text_input_kit .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
         color: $white;
       }
       .date-picker-inline-angle-down.cal_icon_wrapper {

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss

@@ -1,22 +1,8 @@
-.pb_date_range_inline_kit {
-  &._center  {
-    & > .pb_caption,
-    & > .pb_body {
-      text-align: center;
-    }
-    & > .pb_date_range_inline_wrapper {
-      justify-content: center;
-    }
-  }
-  &._right {
-    & > .pb_caption,
-    & > .pb_body {
-      text-align: right;
-    }
-    & > .pb_date_range_inline_wrapper {
-      justify-content: flex-end;
-    }
-  }
+.pb_date_range_inline_kit,
+.pb_date_range_inline_kit_left,
+.pb_date_range_inline_kit_center,
+.pb_date_range_inline_kit_right,
+.pb_date_range_inline_kit_vertical {
   .pb_date_range_inline_wrapper {
     display: flex;
     align-items: center;
@@ -32,3 +18,23 @@
     }
   }
 }
+
+.pb_date_range_inline_kit_center {
+  & > .pb_caption_kit,
+  & > .pb_body_kit {
+    text-align: center;
+  }
+  & > .pb_date_range_inline_wrapper {
+    justify-content: center;
+  }
+}
+
+.pb_date_range_inline_kit_right {
+  & > .pb_caption_kit,
+  & > .pb_body_kit {
+    text-align: right;
+  }
+  & > .pb_date_range_inline_wrapper {
+    justify-content: flex-end;
+  }
+}

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -10,7 +10,7 @@ import Caption from "../pb_caption/_caption";
 import Icon from "../pb_icon/_icon";
 
 type DateRangeInlineProps = {
-  align?: "left" | "center" | "vertical";
+  align?: "left" | "center" | "right";
   className?: string;
   dark?: boolean;
   data?: string;

data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js

@@ -74,7 +74,7 @@ describe("DateRangeStacked Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const text = kit.querySelector('.pb_date_year_stacked_right>.pb_title_kit_size_4')
+        const text = kit.querySelector('.pb_date_year_stacked_right>.pb_title_kit.pb_title_4')
         expect(text.textContent).toEqual("18 JUN")
     })
 
@@ -104,7 +104,7 @@ describe("DateRangeStacked Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const text = kit.querySelector('.pb_date_year_stacked_left>.pb_title_kit_size_4')
+        const text = kit.querySelector('.pb_date_year_stacked_left>.pb_title_kit.pb_title_4')
         expect(text.textContent).toEqual("20 MAR")
     })
 

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.scss

@@ -2,34 +2,74 @@
 @import "../pb_caption/caption";
 @import "../tokens/colors";
 
+// Center alignment
+.pb_date_stacked_kit_center_sm,
+.pb_date_stacked_kit_center_md,
+.pb_date_stacked_kit_center_sm_dark,
+.pb_date_stacked_kit_center_md_dark,
+.pb_date_stacked_kit_center_sm_reverse,
+.pb_date_stacked_kit_center_md_reverse,
+.pb_date_stacked_kit_center_sm_dark_reverse,
+.pb_date_stacked_kit_center_md_dark_reverse {
+  & > * .pb_title_kit,
+  & > * .pb_caption_kit,
+  & > .pb_date_stacked_year_kit {
+    text-align: center;
+  }
+}
 
-.pb_date_stacked_kit{
-  &._center  {
-    & > * .pb_title_kit,
-    & > * .pb_caption_kit,
-    & > .pb_date_stacked_year_kit {
-      text-align: center;
-    }
+// Right alignment
+.pb_date_stacked_kit_right_sm,
+.pb_date_stacked_kit_right_md,
+.pb_date_stacked_kit_right_sm_dark,
+.pb_date_stacked_kit_right_md_dark,
+.pb_date_stacked_kit_right_sm_reverse,
+.pb_date_stacked_kit_right_md_reverse,
+.pb_date_stacked_kit_right_sm_dark_reverse,
+.pb_date_stacked_kit_right_md_dark_reverse {
+  & > * .pb_title_kit,
+  & > * .pb_caption_kit,
+  & > .pb_date_stacked_year {
+    text-align: right;
   }
-  &._right  {
-    & > * .pb_title_kit,
-    & > * .pb_caption_kit,
-    & > .pb_date_stacked_year {
-      text-align: right;
-    }
+}
+
+// Reverse layout
+.pb_date_stacked_kit_left_sm_reverse,
+.pb_date_stacked_kit_left_md_reverse,
+.pb_date_stacked_kit_center_sm_reverse,
+.pb_date_stacked_kit_center_md_reverse,
+.pb_date_stacked_kit_right_sm_reverse,
+.pb_date_stacked_kit_right_md_reverse,
+.pb_date_stacked_kit_left_sm_dark_reverse,
+.pb_date_stacked_kit_left_md_dark_reverse,
+.pb_date_stacked_kit_center_sm_dark_reverse,
+.pb_date_stacked_kit_center_md_dark_reverse,
+.pb_date_stacked_kit_right_sm_dark_reverse,
+.pb_date_stacked_kit_right_md_dark_reverse {
+  .pb_date_stacked_day_month {
+    display: flex;
+    flex-direction: column-reverse;
   }
-  &._reverse {
-    .pb_date_stacked_day_month {
-      display: flex;
-      flex-direction: column-reverse;
-    }
+}
+
+// Dark mode
+.pb_date_stacked_kit_left_sm_dark,
+.pb_date_stacked_kit_left_md_dark,
+.pb_date_stacked_kit_center_sm_dark,
+.pb_date_stacked_kit_center_md_dark,
+.pb_date_stacked_kit_right_sm_dark,
+.pb_date_stacked_kit_right_md_dark,
+.pb_date_stacked_kit_left_sm_dark_reverse,
+.pb_date_stacked_kit_left_md_dark_reverse,
+.pb_date_stacked_kit_center_sm_dark_reverse,
+.pb_date_stacked_kit_center_md_dark_reverse,
+.pb_date_stacked_kit_right_sm_dark_reverse,
+.pb_date_stacked_kit_right_md_dark_reverse {
+  & > * .pb_title_kit {
+    color: $text_dk_default;
   }
-  &._dark {
-    & > * .pb_title_kit {
-      color: $text_dk_default;
-    }
-    & > * .pb_caption_kit {
-      color: $text_dk_light;
-    }
+  & > * .pb_caption_kit {
+    color: $text_dk_light;
   }
-}
+}

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js

@@ -56,7 +56,7 @@ describe("DateStacked Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const text = kit.querySelector(".pb_title_kit_size_4")
+        const text = kit.querySelector(".pb_title_kit.pb_title_4")
         expect(text.textContent).toEqual("1")
     })
 
@@ -115,7 +115,7 @@ describe("DateStacked Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const text = kit.querySelector(".pb_title_kit_size_4")
+        const text = kit.querySelector(".pb_title_kit.pb_title_4")
         expect(text).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_date_time/_date_time.scss

@@ -1,17 +1,10 @@
-.pb_date_time {
+.pb_date_time,
+.pb_date_time_sm,
+.pb_date_time_md {
   .pb_date_kit > div:last-child {
     margin-right: 0 !important;
   }
-  &._center {
-    display: flex;
-    justify-content: center;
-    text-align: center;
-  }
-  &._right  {
-    display: flex;
-    justify-content: flex-end;
-    text-align: right;
-  }
+
   &.dark {
     .pb_title_kit {
         color: $text_dk_default !important;
@@ -23,4 +16,4 @@
       color: $text_dk_default;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss

@@ -1,4 +1,4 @@
-.pb_date_time_stacked {
+.pb_date_time_stacked_kit {
 
   .padding_month {
     padding-bottom: $space_xs + 2px !important;
@@ -8,7 +8,7 @@
     padding-bottom: $space_xs + 2px !important;
   }
 
-  &._dark {
+  &.dark {
     & > * .pb_title_kit {
       color: $text_dk_default;
     }
@@ -22,4 +22,3 @@
   padding-right: $space_xs / 2;
   padding-left: $space_xs / 2;
 }
-

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.scss

@@ -1,17 +1,20 @@
-.pb_date_year_stacked {
-  &._left {
-    & > .pb_title, & > .pb_body {
-      text-align: left;
-    }
+.pb_date_year_stacked_left {
+  & > .pb_title_kit, 
+  & > .pb_body_kit_light {
+    text-align: left !important;
   }
-  &._center {
-    & > .pb_title, & > .pb_body {
-      text-align: center;
-    }
-  }
-  &._right  {
-    & > .pb_title, & > .pb_body {
-      text-align: right;
-    }
+}
+
+.pb_date_year_stacked_center {
+  & > .pb_title_kit, 
+  & > .pb_body_kit_light {
+    text-align: center !important;
   }
 }
+
+.pb_date_year_stacked_right {
+  & > .pb_title_kit, 
+  & > .pb_body_kit_light {
+    text-align: right !important;
+  }
+}

data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js

@@ -38,7 +38,7 @@ describe("DateYearStacked Kit", () => {
     );
 
     const kit = screen.getByTestId(testId);
-    const text = kit.querySelector(".pb_title_kit_size_4");
+    const text = kit.querySelector(".pb_title_kit.pb_title_4");
     expect(text.textContent).toEqual("1 JAN");
   });