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

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss

@@ -5,92 +5,101 @@
 @import "../tokens/colors";
 @import "../tokens/opacity";
 
-.pb_button_toolbar{
-
-  // Horizontal =============
-
-  &._horizontal {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    & > .pb_button  {
-      &:not(:last-child){
-        border-bottom-right-radius: 0;
-        border-top-right-radius: 0;
-        border-right-width: 0;
-      }
-      &:not(:first-child){
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
-        border-left-width: 0;
-      }
-    }
-    &._primary {
-      & > .pb_button:not(:first-child)::before {
-        @include toolbar_border(false, $primary_border)
-      }  
+// Horizontal toolbars
+.pb_button_toolbar_kit_horizontal_primary,
+.pb_button_toolbar_kit_horizontal_secondary {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  
+  & > .pb_button_kit {
+    &:not(:last-child){
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-right-width: 0;
     }
-    &._secondary {
-      & > .pb_button:not(:first-child)::before {
-        @include toolbar_border(false, $secondary_border)
-      }
+    &:not(:first-child){
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+      border-left-width: 0;
     }
-    & > .pb_button:not(:first-child):hover::before,
-      .pb_button:hover + .pb_button::before {
-        opacity: 0
-      }
   }
+  
+  & > .pb_button_kit:not(:first-child):hover::before,
+  .pb_button_kit:hover + .pb_button_kit::before {
+    opacity: 0
+  }
+}
 
-  // Vertical =============
+.pb_button_toolbar_kit_horizontal_primary {
+  & > .pb_button_kit:not(:first-child)::before {
+    @include toolbar_border(false, $primary_border)
+  }  
+}
 
-  &._vertical {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    & > .pb_button  {
-      display: block;
-      flex-grow: 1;
-      flex-shrink: 1;
-      flex-basis: auto;
-      width: 100%;
-      &:not(:last-child){
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-        border-bottom-width: 0;
-      }
-      &:not(:first-child){
-        border-top-right-radius: 0;
-        border-top-left-radius: 0;
-        border-top-width: 0;
-      }
-    }
-    &._primary {
-      & > .pb_button:not(:first-child)::before {
-        @include toolbar_border(true, $primary_border)
-      }
-    }
-    &._secondary {
-      & > .pb_button:not(:first-child)::before {
-        @include toolbar_border(true, $secondary_border)
-      }
+.pb_button_toolbar_kit_horizontal_secondary {
+  & > .pb_button_kit:not(:first-child)::before {
+    @include toolbar_border(false, $secondary_border)
+  }
+}
+
+// Vertical toolbars
+.pb_button_toolbar_kit_vertical_primary,
+.pb_button_toolbar_kit_vertical_secondary {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  
+  & > .pb_button_kit {
+    display: block;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: auto;
+    width: 100%;
+    &:not(:last-child){
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+      border-bottom-width: 0;
     }
-    & > .pb_button:not(:first-child):hover::before,
-    .pb_button:hover + .pb_button::before {
-      opacity: 0
+    &:not(:first-child){
+      border-top-right-radius: 0;
+      border-top-left-radius: 0;
+      border-top-width: 0;
     }
   }
-
-  // Hover =============
   
-  & > .pb_button  {
+  & > .pb_button_kit:not(:first-child):hover::before,
+  .pb_button_kit:hover + .pb_button_kit::before {
+    opacity: 0
+  }
+}
+
+.pb_button_toolbar_kit_vertical_primary {
+  & > .pb_button_kit:not(:first-child)::before {
+    @include toolbar_border(true, $primary_border)
+  }
+}
+
+.pb_button_toolbar_kit_vertical_secondary {
+  & > .pb_button_kit:not(:first-child)::before {
+    @include toolbar_border(true, $secondary_border)
+  }
+}
+
+// Button hover styles for all toolbars
+.pb_button_toolbar_kit_horizontal_primary,
+.pb_button_toolbar_kit_horizontal_secondary,
+.pb_button_toolbar_kit_vertical_primary,
+.pb_button_toolbar_kit_vertical_secondary {
+  & > .pb_button_kit {
     @media (hover:hover) {
       &:hover {
         background-color:darken($royal, 20%);
       }
     }
-    &.secondary {
+    &.pb_button_secondary {
       @media (hover:hover) {
         &:hover {
           background-color:rgba($primary_action, $opacity_3)
@@ -98,4 +107,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss

@@ -2,51 +2,50 @@
 @import "../tokens/colors";
 @import "../tokens/opacity";
 
-.pb_button_toolbar{
-
-  // Vertical =============
+// Dark theme - Vertical toolbars
+.pb_button_toolbar_kit_vertical_primary.dark {
+  & > .pb_button_kit:not(:first-child)::before {
+    @include toolbar_border(true, $primary_dark)
+  }
+}
 
-  &._vertical {
-    &._primary.dark {
-      & > .pb_button:not(:first-child)::before {
-        @include toolbar_border(true, $primary_dark)
-      }
-    }
-    &._secondary.dark {
-      & > .pb_button:not(:first-child)::before {
-        @include toolbar_border(true, $secondary_dark)
-      }
-    }
+.pb_button_toolbar_kit_vertical_secondary.dark {
+  & > .pb_button_kit:not(:first-child)::before {
+    @include toolbar_border(true, $secondary_dark)
   }
+}
 
-  // Horizontal =============
+// Dark theme - Horizontal toolbars  
+.pb_button_toolbar_kit_horizontal_primary.dark {
+  & > .pb_button_kit:not(:first-child)::before {
+    @include toolbar_border(false, $primary_dark)
+  }
+}
 
-  &._horizontal {
-    &._primary.dark {
-      & > .pb_button:not(:first-child)::before {
-        @include toolbar_border(false, $primary_dark)
-      }
-    }
-    &._secondary.dark {
-      & > .pb_button:not(:first-child)::before {
-        @include toolbar_border(false, $secondary_dark)
-      }
-    }
+.pb_button_toolbar_kit_horizontal_secondary.dark {
+  & > .pb_button_kit:not(:first-child)::before {
+    @include toolbar_border(false, $secondary_dark)
   }
-  & > .pb_button:not(:first-child):hover::before,
-  .pb_button:hover + .pb_button::before {
+}
+
+// Dark theme hover effects
+.pb_button_toolbar_kit_horizontal_primary.dark,
+.pb_button_toolbar_kit_horizontal_secondary.dark,
+.pb_button_toolbar_kit_vertical_primary.dark,
+.pb_button_toolbar_kit_vertical_secondary.dark {
+  & > .pb_button_kit:not(:first-child):hover::before,
+  .pb_button_kit:hover + .pb_button_kit::before {
     opacity: 0
   }
 
-  // Hover =============
-
-  .pb_button.dark  {
+  // Dark button hover styles
+  .pb_button_kit.dark {
     @media (hover:hover) {
       &:hover {
         background-color:darken($royal, 20%);
       }
     }
-    &.secondary {
+    &.pb_button_secondary {
       @media (hover:hover) {
         &:hover {
           background-color:rgba($primary_action, $opacity_3)
@@ -54,4 +53,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss

@@ -24,4 +24,4 @@ $secondary_dark:      rgba($bg_dark, $opacity_2);
     position: relative;
     bottom: 0;
     display: block;
-}
+}

data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.test.js

@@ -20,7 +20,7 @@ test('default test', () => {
 
   expect(kit).toHaveClass('pb_button_toolbar_kit_horizontal_primary')
   expect(kit).toContainElement(child)
-  expect(child).toHaveClass('pb_button_kit_primary_inline_enabled')
+  expect(child).toHaveClass('pb_button_kit pb_button_primary pb_button_inline pb_button_enabled')
 })
 
 test('variant and orientation props', () => {
@@ -42,5 +42,5 @@ test('variant and orientation props', () => {
   const child = screen.getByTestId('child-button')
 
   expect(kit).toHaveClass('pb_button_toolbar_kit_vertical_secondary')
-  expect(child).toHaveClass('pb_button_kit_secondary_inline_enabled')
+  expect(child).toHaveClass('pb_button_kit pb_button_secondary pb_button_inline pb_button_enabled')
 })

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

@@ -1,32 +1,115 @@
 @import "../tokens/colors";
 @import "caption_mixin";
 
-.pb_caption_kit{
+// Base caption classes - all size combinations
+.pb_caption_kit,
+.pb_caption_kit_xs,
+.pb_caption_kit_sm, 
+.pb_caption_kit_md,
+.pb_caption_kit_base,
+.pb_caption_kit_lg,
+.pb_caption_kit_xl {
   @include caption;
-  &[class*="_link"] {
-    color: $primary;
+}
+
+// Apply caption mixin to all size+color combinations too
+@each $color_name, $color_value in $pb_caption_colors {
+  .pb_caption_kit_xs_#{$color_name},
+  .pb_caption_kit_sm_#{$color_name},
+  .pb_caption_kit_md_#{$color_name},
+  .pb_caption_kit_base_#{$color_name},
+  .pb_caption_kit_lg_#{$color_name},
+  .pb_caption_kit_xl_#{$color_name} {
+    @include caption;
   }
+}
 
-  &[class^="pb_caption_kit_lg"] {
+// Apply caption mixin to link variants too
+.pb_caption_kit_xs_link,
+.pb_caption_kit_sm_link,
+.pb_caption_kit_md_link,
+.pb_caption_kit_base_link,
+.pb_caption_kit_lg_link,
+.pb_caption_kit_xl_link {
+  @include caption;
+}
+
+// Size-specific styles
+.pb_caption_kit_lg,
+.pb_caption_kit_lg_default,
+.pb_caption_kit_lg_light,
+.pb_caption_kit_lg_lighter,
+.pb_caption_kit_lg_success,
+.pb_caption_kit_lg_error,
+.pb_caption_kit_lg_link {
+  @include caption_lg;
+}
+
+// Apply lg mixin to all lg color combinations
+@each $color_name, $color_value in $pb_caption_colors {
+  .pb_caption_kit_lg_#{$color_name} {
     @include caption_lg;
   }
+}
 
-  &[class^="pb_caption_kit_xs"] {
+.pb_caption_kit_xs,
+.pb_caption_kit_xs_default,
+.pb_caption_kit_xs_light,
+.pb_caption_kit_xs_lighter,
+.pb_caption_kit_xs_success,
+.pb_caption_kit_xs_error,
+.pb_caption_kit_xs_link {
+  @include caption_xs;
+}
+
+// Apply xs mixin to all xs color combinations
+@each $color_name, $color_value in $pb_caption_colors {
+  .pb_caption_kit_xs_#{$color_name} {
     @include caption_xs;
   }
-  
-  &[class*="link"] {
-    color: $primary;
+}
+
+// Color variants - generate all size/color combinations
+@each $color_name, $color_value in $pb_caption_colors {
+  .pb_caption_kit_xs_#{$color_name},
+  .pb_caption_kit_sm_#{$color_name},
+  .pb_caption_kit_md_#{$color_name},
+  .pb_caption_kit_base_#{$color_name},
+  .pb_caption_kit_lg_#{$color_name},
+  .pb_caption_kit_xl_#{$color_name} {
+    color: $color_value;
   }
+}
 
-  @include pb_caption_kit_colors;
+// Link variant (deprecated but still supported)
+.pb_caption_kit_xs_link,
+.pb_caption_kit_sm_link,
+.pb_caption_kit_md_link,
+.pb_caption_kit_base_link,
+.pb_caption_kit_lg_link,
+.pb_caption_kit_xl_link {
+  color: $primary;
+}
 
-  &.dark {
-    @include caption_dark;
-    @each $name, $color in $pb_dark_caption_colors {
-      &[class*="_#{$name}"] {
-        color: $color;
-      }
-    }
-  }
+// Dark theme variants
+.pb_caption_kit.dark,
+.pb_caption_kit_xs.dark,
+.pb_caption_kit_sm.dark,
+.pb_caption_kit_md.dark,
+.pb_caption_kit_base.dark,
+.pb_caption_kit_lg.dark,
+.pb_caption_kit_xl.dark {
+  @include caption_dark;
 }
+
+// Dark theme color variants
+@each $color_name, $color_value in $pb_dark_caption_colors {
+  .pb_caption_kit_xs_#{$color_name}.dark,
+  .pb_caption_kit_sm_#{$color_name}.dark,
+  .pb_caption_kit_md_#{$color_name}.dark,
+  .pb_caption_kit_base_#{$color_name}.dark,
+  .pb_caption_kit_lg_#{$color_name}.dark,
+  .pb_caption_kit_xl_#{$color_name}.dark {
+    color: $color_value;
+  }
+}

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

@@ -44,11 +44,4 @@ $pb_dark_caption_colors: (
 
 @mixin caption_dark {
   color: $text_dk_light;
-}
-@mixin pb_caption_kit_colors {
-  @each $name, $color in $pb_caption_colors {
-    &[class*="#{$name}"] {
-      color: $color
-    }
-  }
-}
+}

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -1,55 +1,40 @@
 @import "card_mixin";
 @import "../utilities/colors";
+@import "../tokens/border_radius";
 
-// Main card selector - matches all pb_card_kit classes
-[class^="pb_card_kit"] {
+.pb_card_kit {
   @include pb_card;
   padding: $space_md;
 
-  // Selected state
-  &[class*="_selected"] {
-    @include pb_card_selected;
-  }
-
-  // Dark theme
-  &.dark {
-    @include pb_card_dark;
-
-    &[class*="_selected"] {
-      @include pb_card_selected_dark;
-    }
-  }
-
-  // Border none variants
-  &[class*="_border_none"] {
-    border-width: 0px;
+  .card_draggable_handle {
+    align-self: center;
+    color: $text_lt_light;
   }
+}
 
-  // Highlight variants
-  &[class*="_highlight"] {
-    overflow: hidden;
-  }
+// Selected state
+.pb_card_kit_selected {
+  @include pb_card_selected;
+}
 
-  &[class*="_highlight_top"] {
-    @each $color_name, $color_value in $pb_card_highlight_colors {
-      &[class*="_highlight_#{$color_name}"]::before {
-        @include pb_card_highlight(100%, $pb_card_highlight_size, $color_value);
-      }
-    }
+// Dark mode
+.pb_card_kit.dark {
+  @include pb_card_dark;
+  
+  &.pb_card_kit_selected {
+    @include pb_card_selected_dark;
   }
+}
 
-  &[class*="_highlight_side"] {
-    @each $color_name, $color_value in $pb_card_highlight_colors {
-      &[class*="_highlight_#{$color_name}"]::before {
-        @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
-      }
-    }
-  }
+// Border styles
+.pb_card_kit_border_none {
+  border-width: 0px;
+}
 
-  .card_draggable_handle {
-    align-self: center;
-    color: $text_lt_light;
-  }
+// Highlight styles
+.pb_card_kit_highlight_top,
+.pb_card_kit_highlight_side {
+  overflow: hidden;
 }
 
 @function ends-with($string, $suffix) {
@@ -60,8 +45,22 @@
   @return str-slice($string, -$suffix-length) == $suffix;
 }
 
-// Header styles
-[class^="pb_card_header_kit"] {
+// Highlight top variants
+@each $color_name, $color_value in $pb_card_highlight_colors {
+  .pb_card_kit_highlight_top.pb_card_kit_highlight_#{$color_name}::before {
+    @include pb_card_highlight(100%, $pb_card_highlight_size, $color_value);
+  }
+}
+
+// Highlight side variants  
+@each $color_name, $color_value in $pb_card_highlight_colors {
+  .pb_card_kit_highlight_side.pb_card_kit_highlight_#{$color_name}::before {
+    @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
+  }
+}
+
+// Card Header
+.pb_card_header_kit {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
@@ -70,45 +69,72 @@
   border: 0;
   border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
   
-  @each $color_name, $color_value in $pb_card_header_colors {
-    @if not ends-with($color_name, '_subtle') {
-      &[class*="_#{$color_name}"] {
-        @include pb_card_header_color($color_value);
-        color: lightenText($color_value);
-      }
-    }
+  // Inherit border radius from parent card
+  .pb_card_kit_border_radius_xs & {
+    border-radius: $border_radius_xs $border_radius_xs 0px 0px;
   }
-  
-  @each $color_name, $color_value in $pb_card_header_colors {
-    @if ends-with($color_name, '_subtle') {
-      &[class*="_#{$color_name}"] {
-        @include pb_card_header_color($color_value);
-        color: lightenText($color_value);
-      }
+  .pb_card_kit_border_radius_sm & {
+    border-radius: $border_radius_sm $border_radius_sm 0px 0px;
+  }
+  .pb_card_kit_border_radius_md & {
+    border-radius: $border_radius_md $border_radius_md 0px 0px;
+  }
+  .pb_card_kit_border_radius_lg & {
+    border-radius: $border_radius_lg $border_radius_lg 0px 0px;
+  }
+  .pb_card_kit_border_radius_xl & {
+    border-radius: $border_radius_xl $border_radius_xl 0px 0px;
+  }
+  .pb_card_kit_border_radius_rounded & {
+    border-radius: $border_radius_rounded $border_radius_rounded 0px 0px;
+  }
+  .pb_card_kit_border_radius_none & {
+    border-radius: 0px;
+  }
+}
+
+// Header colors (non-subtle)
+@each $color_name, $color_value in $pb_card_header_colors {
+  @if not ends-with($color_name, '_subtle') {
+    .pb_card_header_kit_#{$color_name} {
+      @include pb_card_header_color($color_value);
+      color: lightenText($color_value);
     }
   }
-  
-  @each $color_name, $color_value in $pb_card_header_colors {
-    &[class*="_#{$color_name}_striped"] {
-      @if ((type-of($color_value) == color)) {
-        background: repeating-linear-gradient(
-          45deg,
-          $color_value,
-          $color_value 10px,
-          lighten( $color_value, 5% ) 10px,
-          lighten( $color_value, 5% ) 20px
-        );
-      }
+}
+
+// Header colors (subtle)
+@each $color_name, $color_value in $pb_card_header_colors {
+  @if ends-with($color_name, '_subtle') {
+    .pb_card_header_kit_#{$color_name} {
+      @include pb_card_header_color($color_value);
+      color: lightenText($color_value);
     }
   }
-  
-  &[class*="_white"] {
-    border-bottom: 1px solid $border_light;
+}
+
+// Header striped patterns
+@each $color_name, $color_value in $pb_card_header_colors {
+  .pb_card_header_kit_#{$color_name}_striped {
+    @if ((type-of($color_value) == color)) {
+      background: repeating-linear-gradient(
+        45deg,
+        $color_value,
+        $color_value 10px,
+        lighten( $color_value, 5% ) 10px,
+        lighten( $color_value, 5% ) 20px
+      );
+    }
   }
 }
 
-// Body styles
-[class^="pb_card_body_kit"] {
+// White header special case
+.pb_card_header_kit_white {
+  border-bottom: 1px solid $border_light;
+}
+
+// Card Body
+.pb_card_body_kit {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;