playbook_ui 14.25.0.pre.alpha.dialogfix10277 → 14.25.0.pre.alpha.play1986inlineloadingsolidvariant9963

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

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

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

@@ -1,18 +1,18 @@
-.pb_date_time_stacked_kit {
+[class^=pb_date_time_stacked] {
 
-  .padding_month {
+  [class^=padding_month] {
     padding-bottom: $space_xs + 2px !important;
     }
 
-  .padding_day {
+  [class^=padding_day] {
     padding-bottom: $space_xs + 2px !important;
   }
 
-  &.dark {
-    & > * .pb_title_kit {
+  &[class*=_dark] {
+    & > * [class^=pb_title_kit] {
       color: $text_dk_default;
     }
-    & > * .pb_caption_kit {
+    & > * [class^=pb_caption_kit] {
       color: $text_dk_light;
     }
   }
@@ -22,3 +22,4 @@
   padding-right: $space_xs / 2;
   padding-left: $space_xs / 2;
 }
+

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

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

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.pb_title_4");
+    const text = kit.querySelector(".pb_title_kit_size_4");
     expect(text.textContent).toEqual("1 JAN");
   });
 

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

@@ -2,16 +2,29 @@
 @import "../tokens/titles";
 @import "../tokens/typography";
 
-.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 {
+[class^=pb_detail_kit]{
   @include pb_detail;
 
-  // Base styles
+  @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}][class*=dark]{
+      @include pb_detail($dark_color_value)
+    }
+  }
+
+  // Styles
+  &.bold,
+  &.bold.dark,
+  b,
+  strong {
+    font-weight: $bold;
+  }
+
   a {
     color: $primary;
     &:hover {
@@ -29,81 +42,3 @@
     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;
-  }
-}