playbook_ui 14.25.0.pre.alpha.testingcss10239 → 14.25.0.pre.rc.0

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

@@ -2,50 +2,51 @@
 @import "../tokens/colors";
 @import "../tokens/opacity";
 
-// Dark theme - Vertical toolbars
-.pb_button_toolbar_kit_vertical_primary.dark {
-  & > .pb_button_kit:not(:first-child)::before {
-    @include toolbar_border(true, $primary_dark)
-  }
-}
+[class^=pb_button_toolbar]{
 
-.pb_button_toolbar_kit_vertical_secondary.dark {
-  & > .pb_button_kit:not(:first-child)::before {
-    @include toolbar_border(true, $secondary_dark)
-  }
-}
+  // Vertical =============
 
-// Dark theme - Horizontal toolbars  
-.pb_button_toolbar_kit_horizontal_primary.dark {
-  & > .pb_button_kit:not(:first-child)::before {
-    @include toolbar_border(false, $primary_dark)
+  &[class*=_vertical] {
+    &[class*=_primary].dark {
+      & > [class^=pb_button]:not(:first-child)::before {
+        @include toolbar_border(true, $primary_dark)
+      }
+    }
+    &[class*=_secondary].dark {
+      & > [class^=pb_button]:not(:first-child)::before {
+        @include toolbar_border(true, $secondary_dark)
+      }
+    }
   }
-}
 
-.pb_button_toolbar_kit_horizontal_secondary.dark {
-  & > .pb_button_kit:not(:first-child)::before {
-    @include toolbar_border(false, $secondary_dark)
-  }
-}
+  // Horizontal =============
 
-// 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 {
+  &[class*=_horizontal] {
+    &[class*=_primary].dark {
+      & > [class^=pb_button]:not(:first-child)::before {
+        @include toolbar_border(false, $primary_dark)
+      }
+    }
+    &[class*=_secondary].dark {
+      & > [class^=pb_button]:not(:first-child)::before {
+        @include toolbar_border(false, $secondary_dark)
+      }
+    }
+  }
+  & > [class^=pb_button]:not(:first-child):hover::before,
+  [class^=pb_button]:hover + [class^=pb_button]::before {
     opacity: 0
   }
 
-  // Dark button hover styles
-  .pb_button_kit.dark {
+  // Hover =============
+
+  [class^=pb_button].dark  {
     @media (hover:hover) {
       &:hover {
         background-color:darken($royal, 20%);
       }
     }
-    &.pb_button_secondary {
+    &[class*=secondary] {
       @media (hover:hover) {
         &:hover {
           background-color:rgba($primary_action, $opacity_3)
@@ -53,4 +54,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 pb_button_primary pb_button_inline pb_button_enabled')
+  expect(child).toHaveClass('pb_button_kit_primary_inline_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 pb_button_secondary pb_button_inline pb_button_enabled')
+  expect(child).toHaveClass('pb_button_kit_secondary_inline_enabled')
 })

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

@@ -1,115 +1,32 @@
 @import "../tokens/colors";
 @import "caption_mixin";
 
-// 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 {
+[class^="pb_caption_kit"] {
   @include caption;
-}
-
-// 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*="_link"] {
+    color: $primary;
   }
-}
 
-// 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} {
+  &[class^="pb_caption_kit_lg"] {
     @include caption_lg;
   }
-}
 
-.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} {
+  &[class^="pb_caption_kit_xs"] {
     @include caption_xs;
   }
-}
-
-// 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;
+  
+  &[class*="link"] {
+    color: $primary;
   }
-}
 
-// 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 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;
-}
+  @include pb_caption_kit_colors;
 
-// 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;
+  &.dark {
+    @include caption_dark;
+    @each $name, $color in $pb_dark_caption_colors {
+      &[class*="_#{$name}"] {
+        color: $color;
+      }
+    }
   }
-}
+}

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

@@ -44,4 +44,11 @@ $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,144 +1,107 @@
 @import "card_mixin";
 @import "../utilities/colors";
-@import "../tokens/border_radius";
 
-.pb_card_kit {
+[class^=pb_card_kit] {
   @include pb_card;
   padding: $space_md;
 
-  .card_draggable_handle {
-    align-self: center;
-    color: $text_lt_light;
+  &[class*=_selected] {
+    @include pb_card_selected;
   }
-}
 
-// Selected state
-.pb_card_kit_selected {
-  @include pb_card_selected;
-}
+  &.dark {
+    @include pb_card_dark;
 
-// Dark mode
-.pb_card_kit.dark {
-  @include pb_card_dark;
-  
-  &.pb_card_kit_selected {
-    @include pb_card_selected_dark;
+    &[class*=_selected] {
+      @include pb_card_selected_dark;
+    }
   }
-}
-
-// Border styles
-.pb_card_kit_border_none {
-  border-width: 0px;
-}
 
-// Highlight styles
-.pb_card_kit_highlight_top,
-.pb_card_kit_highlight_side {
-  overflow: hidden;
-}
-
-@function ends-with($string, $suffix) {
-  $suffix-length: str-length($suffix);
-  @if $suffix-length == 0 {
-    @return true;
+  &[class*=_border_none] {
+    border-width: 0px;
   }
-  @return str-slice($string, -$suffix-length) == $suffix;
-}
 
-// 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);
+  @function ends-with($string, $suffix) {
+    $suffix-length: str-length($suffix);
+    @if $suffix-length == 0 {
+      @return true;
+    }
+    @return str-slice($string, -$suffix-length) == $suffix;
   }
-}
 
-// 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);
+  [class^=pb_card_header_kit] {
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: auto;
+    min-height: 1px;
+    padding: $space_sm;
+    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);
+        }
+      }
+    }
+    @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);
+        }
+      }
+    }
+    @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
+          );
+        }
+      }
+    }
+    &[class*=_white] {
+      border-bottom: 1px solid $border_light;
+    }
   }
-}
 
-// Card Header
-.pb_card_header_kit {
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: auto;
-  min-height: 1px;
-  padding: $space_sm;
-  border: 0;
-  border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
-  
-  // Inherit border radius from parent card
-  .pb_card_kit_border_radius_xs & {
-    border-radius: $border_radius_xs $border_radius_xs 0px 0px;
-  }
-  .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;
+  [class^=pb_card_body_kit] {
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: auto;
+    min-height: 1px;
+    border: 0;
+    padding: $space_md;
   }
-  .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);
-    }
+  &[class*=_highlight] {
+    overflow: hidden;
   }
-}
 
-// 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*=_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);
+      }
     }
   }
-}
 
-// 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
-      );
+  &[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);
+      }
     }
   }
-}
 
-// White header special case
-.pb_card_header_kit_white {
-  border-bottom: 1px solid $border_light;
+  .card_draggable_handle {
+    align-self: center;
+    color: $text_lt_light;
+  }
 }
-
-// Card Body
-.pb_card_body_kit {
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: auto;
-  min-height: 1px;
-  border: 0;
-  padding: $space_md;
-}

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

@@ -5,7 +5,7 @@ import { get } from '../utilities/object'
 
 import classnames from 'classnames'
 
-import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import type { ProductColors, CategoryColors, BackgroundColors, StatusColors } from '../types/colors'
 
@@ -54,14 +54,7 @@ type CardBodyProps = {
 // Header component
 const Header = (props: CardHeaderProps) => {
   const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
-  const headerColorCSS = `pb_card_header_kit_${headerColor}`
-  const headerStripedCSS = headerColorStriped ? `pb_card_header_kit_${headerColor}_striped` : ''
-  
-  const headerCSS = classnames(
-    'pb_card_header_kit',
-    headerColorCSS,
-    headerStripedCSS
-  )
+  const headerCSS = buildCss('pb_card_header_kit', `${headerColor}`, headerColorStriped ? 'striped' : '')
 
   const headerSpacing = globalProps(props)
 
@@ -76,10 +69,11 @@ const Header = (props: CardHeaderProps) => {
 // Body component
 const Body = (props: CardBodyProps) => {
   const { children, className } = props
+  const bodyCSS = buildCss('pb_card_body_kit')
   const bodySpacing = globalProps(props)
 
   return (
-    <div className={classnames('pb_card_body_kit', bodySpacing, className)}>
+    <div className={classnames(bodyCSS, bodySpacing, className)}>
       {children}
     </div>
   )
@@ -102,22 +96,13 @@ const Card = (props: CardPropTypes): React.ReactElement => {
     selected = false,
     tag = 'div',
   } = props
-  const borderCSS = borderNone == true ? 'pb_card_kit_border_none' : ''
-  const selectedCSS = selected == true ? 'pb_card_kit_selected' : ''
-  const backgroundCSS = background == 'none' ? '' : `pb_card_kit_background_${background}`
-  const borderRadiusCSS = borderRadius !== 'md' ? `pb_card_kit_border_radius_${borderRadius}` : ''
-  const highlightPositionCSS = highlight.position ? `pb_card_kit_highlight_${highlight.position}` : ''
-  const highlightColorCSS = highlight.color ? `pb_card_kit_highlight_${highlight.color}` : ''
-  
-  const cardCss = classnames(
-    'pb_card_kit', // Base class
-    selectedCSS,
-    borderCSS,
-    borderRadiusCSS,
-    backgroundCSS,
-    highlightPositionCSS,
-    highlightColorCSS
-  )
+  const borderCSS = borderNone == true ? 'border_none' : ''
+  const selectedCSS = selected == true ? 'selected' : 'deselected'
+  const backgroundCSS = background == 'none' ? '' : `background_${background}`
+  const cardCss = buildCss('pb_card_kit', selectedCSS, borderCSS, `border_radius_${borderRadius}`, backgroundCSS, {
+    [`highlight_${highlight.position}`]: highlight.position,
+    [`highlight_${highlight.color}`]: highlight.color,
+  })
   const ariaProps: {[key: string]: string} = buildAriaProps(aria)
   const dataProps: {[key: string]: string} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions);

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

@@ -89,4 +89,4 @@ $pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $addition
 
 @mixin pb_card_header_color($header_color) {
   background: $header_color;
-}
+}

data/app/pb_kits/playbook/pb_card/card.rb

@@ -29,14 +29,13 @@ module Playbook
                                   default: nil
 
       def classname
-        classes = ["pb_card_kit"]
-        classes << "pb_card_kit_selected" if selected
-        classes << "pb_card_kit_border_none" if border_none
-        classes << "pb_card_kit_border_radius_#{border_radius}" if border_radius != "md"
-        classes << "pb_card_kit_background_#{background}" if background != "none"
-        classes << "pb_card_kit_highlight_#{highlight[:position]}" if highlight[:position].present?
-        classes << "pb_card_kit_highlight_#{highlight[:color]}" if highlight[:color].present?
-        generate_classname(classes.compact.join(" "))
+        generate_classname("pb_card_kit",
+                           selected_class,
+                           border_class,
+                           border_radius_class,
+                           background_class,
+                           highlight_position_class,
+                           highlight_color_class)
       end
 
     private

data/app/pb_kits/playbook/pb_card/card_header.rb

@@ -9,17 +9,13 @@ module Playbook
                                   default: false
 
       def classname
-        generate_classname("pb_card_header_kit", header_color_classname, color_striped_classname, separator: " ")
+        generate_classname("pb_card_header_kit", header_color, color_striped_classname)
       end
 
     private
 
       def color_striped_classname
-        header_color_striped ? "pb_card_header_kit_#{header_color}_striped" : nil
-      end
-
-      def header_color_classname
-        header_color ? "pb_card_header_kit_#{header_color}" : nil
+        header_color_striped ? "striped" : nil
       end
     end
   end

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -50,7 +50,7 @@
 <% end %>
 
 <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "dark" }) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "bg_dark" }) do %>
     <%= pb_rails("body", props: { text: "Dark", dark: true }) %>
   <% end %>
   <%= pb_rails("card/card_body", props: { padding: "md" }) do %>

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -3,16 +3,7 @@
 @import "../tokens/positioning";
 $transition: $transition_cubic;
 
-.pb_checkbox_kit,
-.pb_checkbox_kit_on,
-.pb_checkbox_kit_off,
-.pb_checkbox_kit_checked,
-.pb_checkbox_kit_error,
-.pb_checkbox_kit_indeterminate,
-.pb_checkbox_kit_checked_error,
-.pb_checkbox_kit_checked_indeterminate,
-.pb_checkbox_kit_error_indeterminate,
-.pb_checkbox_kit_checked_error_indeterminate {
+[class^=pb_checkbox_kit] {
   cursor: pointer;
   display: inline-flex;
   vertical-align: middle;
@@ -168,4 +159,4 @@ $transition: $transition_cubic;
       border-color: $error;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss

@@ -37,25 +37,25 @@ $pb_button_styles: (
   }
 }
 
-.pb_circle_icon_button_kit {
+[class^=pb_circle_icon_button_kit] {
   @each $style in $pb_button_styles {
-    .pb_button_kit.pb_button_#{$style} {
+    [class^=pb_button_kit][class*=_#{$style}] {
       @include pb_circle_icon_button;
     }
   }
   :first-child {
-    &.pb_button_kit.pb_button_link {
+    &[class*=_link]  {
       @include pb_circle_icon_button_active;
     }
-    &.dark {
-      &.pb_button_kit.pb_button_link {
+    &.dark  {
+      &[class*=_link]  {
         @include pb_circle_icon_button_active_dark;
       }
     }
   }
   &.size_small {
     @each $style in $pb_button_styles {
-      .pb_button_kit.pb_button_#{$style} {
+      [class^=pb_button_kit][class*=_#{$style}] {
         width: 20px;
         height: 20px;
         min-height: 20px;
@@ -91,4 +91,4 @@ $pb_button_styles: (
       }
     }
   }
-}
+}