playbook_ui 14.25.0.pre.alpha.testingcss9713 → 14.25.0.pre.alpha.testingcss9752

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_md,
+  & > .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_md,
+  & > .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.rb

@@ -18,7 +18,7 @@ module Playbook
                   default: false
 
       def classname
-        generate_classname("pb_date_stacked_kit", align, size, bold, reverse_class, dark_class)
+        generate_classname("pb_date_stacked_kit", align, size, reverse_class, dark_class)
       end
 
       def title_size

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");
   });
 

data/app/pb_kits/playbook/pb_detail/_detail.scss

@@ -2,29 +2,16 @@
 @import "../tokens/titles";
 @import "../tokens/typography";
 
-.pb_detail_kit{
+.pb_detail_kit,
+.pb_detail_kit_color_light,
+.pb_detail_kit_color_default,
+.pb_detail_kit_color_lighter,
+.pb_detail_kit_color_link,
+.pb_detail_kit_color_error,
+.pb_detail_kit_color_success {
   @include pb_detail;
 
-  @each $color_name, $color_value in $pb_detail_colors {
-    &[class*=color_#{$color_name}] {
-      @include pb_detail($color_value);
-    }
-  }
-
-  @each $dark_color_name, $dark_color_value in $pb_dark_detail_colors{
-    &[class*=color_#{$dark_color_name}].dark{
-      @include pb_detail($dark_color_value)
-    }
-  }
-
-  // Styles
-  &.bold,
-  &.bold.dark,
-  b,
-  strong {
-    font-weight: $bold;
-  }
-
+  // Base styles
   a {
     color: $primary;
     &:hover {
@@ -42,3 +29,81 @@
     letter-spacing: $lspace_loose;
   }
 }
+
+// Color variations - Light Mode
+.pb_detail_kit_color_light {
+  @include pb_detail($text_lt_light);
+}
+
+.pb_detail_kit_color_default {
+  @include pb_detail($text_lt_default);
+}
+
+.pb_detail_kit_color_lighter {
+  @include pb_detail($text_lt_lighter);
+}
+
+.pb_detail_kit_color_link {
+  @include pb_detail($primary);
+}
+
+.pb_detail_kit_color_error {
+  @include pb_detail($error);
+}
+
+.pb_detail_kit_color_success {
+  @include pb_detail($text_lt_success_sm);
+}
+
+// Color variations - Dark Mode
+.pb_detail_kit.dark.pb_detail_kit_color_light,
+.pb_detail_kit_color_light.dark {
+  @include pb_detail($text_dk_light);
+}
+
+.pb_detail_kit.dark.pb_detail_kit_color_default,
+.pb_detail_kit_color_default.dark {
+  @include pb_detail($text_dk_default);
+}
+
+.pb_detail_kit.dark.pb_detail_kit_color_lighter,
+.pb_detail_kit_color_lighter.dark {
+  @include pb_detail($text_dk_lighter);
+}
+
+.pb_detail_kit.dark.pb_detail_kit_color_link,
+.pb_detail_kit_color_link.dark {
+  @include pb_detail($active_dark);
+}
+
+.pb_detail_kit.dark.pb_detail_kit_color_error,
+.pb_detail_kit_color_error.dark {
+  @include pb_detail($error_dark);
+}
+
+.pb_detail_kit.dark.pb_detail_kit_color_success,
+.pb_detail_kit_color_success.dark {
+  @include pb_detail($text_dk_success_sm);
+}
+
+// Bold styles
+.pb_detail_kit.bold,
+.pb_detail_kit_color_light.bold,
+.pb_detail_kit_color_default.bold,
+.pb_detail_kit_color_lighter.bold,
+.pb_detail_kit_color_link.bold,
+.pb_detail_kit_color_error.bold,
+.pb_detail_kit_color_success.bold,
+.pb_detail_kit.bold.dark,
+.pb_detail_kit_color_light.bold.dark,
+.pb_detail_kit_color_default.bold.dark,
+.pb_detail_kit_color_lighter.bold.dark,
+.pb_detail_kit_color_link.bold.dark,
+.pb_detail_kit_color_error.bold.dark,
+.pb_detail_kit_color_success.bold.dark {
+  font-weight: $bold;
+  
+  b, strong {
+    font-weight: $bold;
+  }
+}