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

data/app/pb_kits/playbook/pb_overlay/overlay.rb

@@ -14,7 +14,7 @@ module Playbook
                              default: false
 
       def classname
-        generate_classname("pb_overlay", hide_scroll_bar_class)
+        generate_classname("pb_overlay", hide_scroll_bar_class, separator: " ")
       end
 
       def position

data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss

@@ -9,7 +9,11 @@
     display: inline;
   }
 
-  .show-below- {
+  .show-below-xs,
+  .show-below-sm,
+  .show-below-md,
+  .show-below-lg,
+  .show-below-xl {
     display: none;
   }
   @each $breakpoint_name, $breakpoint in $breakpoints {
@@ -74,4 +78,3 @@
     }
   }
 }
-

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -284,4 +284,4 @@ $flag-min-resolution: 192dpi;
       background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_pill/_pill.scss

@@ -5,30 +5,32 @@
 
 $pb_pill_height: 22px;
 
-.pb_pill_kit {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 $space-sm/1.8;
-  height: $pb_pill_height;
-  border-radius: $pb_pill_height/2;
-  white-space: nowrap;
+// Base styles for all pill variations
+@each $color_name, $color_value in $status_color_text {
+  .pb_pill_kit_#{$color_name}_lowercase,
+  .pb_pill_kit_#{$color_name}_none {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 $space-sm/1.8;
+    height: $pb_pill_height;
+    border-radius: $pb_pill_height/2;
+    white-space: nowrap;
+    background: rgba($color_value, $opacity-1);
 
-  &.lowercase {
-    text-transform: lowercase;
+    .pb_pill_text {
+      color: $color_value !important;
+    }
   }
+}
 
-  &.none {
-    text-transform: none;
+// Text transform specific styles
+@each $color_name, $color_value in $status_color_text {
+  .pb_pill_kit_#{$color_name}_lowercase {
+    text-transform: lowercase;
   }
 
-  @each $color_name, $color_value in $status_color_text {
-    &[class*=_#{$color_name}]  {
-        background: rgba($color_value, $opacity-1);
-
-      .pb_pill_text {
-        color: $color_value !important;
-      }
-    }
+  .pb_pill_kit_#{$color_name}_none {
+    text-transform: none;
   }
-}
+}

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss

@@ -20,27 +20,29 @@
     align-items: center;
     margin-bottom: $space_xs;
 
-    .title {
+    .pb_title_kit {
       margin-right: $space_xs;
     }
   }
 
-  .pb_progress_pill {
+  .pb_progress_pill_active,
+  .pb_progress_pill_inactive {
     @include pb_progress_pill;
 
     &.full_width_pill {
       max-width: none;
     }
+  }
 
-    &._inactive {
-      background-color: $border_light;
-      &.dark {
+  .pb_progress_pill_inactive {
+    background-color: $border_light;
+    
+    &.dark {
       background-color: $border_dark;
-      }
     }
+  }
 
-    &._active {
-      background-color: $primary_action;
-    }
+  .pb_progress_pill_active {
+    background-color: $primary_action;
   }
-}
+}

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss

@@ -4,40 +4,57 @@
 
 $pb_progress_simple_height: 4px;
 
-.pb_progress_simple_wrapper {
+// Base wrapper styles
+.pb_progress_simple_wrapper_left,
+.pb_progress_simple_wrapper_center,
+.pb_progress_simple_wrapper_right {
   display: flex;
   justify-content: flex-start;
   align-items: center;
+}
 
-  &._center {
-    justify-content: center;
-  }
+.pb_progress_simple_wrapper_center {
+  justify-content: center;
+}
 
-  &._right {
-    justify-content: flex-end;
-  }
+.pb_progress_simple_wrapper_right {
+  justify-content: flex-end;
 }
 
-.pb_progress_simple_kit {
+// Base kit styles - all possible combinations
+.pb_progress_simple_kit,
+.pb_progress_simple_kit_muted,
+.pb_progress_simple_kit_positive,
+.pb_progress_simple_kit_negative,
+.pb_progress_simple_kit_warning,
+.pb_progress_simple_kit_left,
+.pb_progress_simple_kit_center,
+.pb_progress_simple_kit_right,
+.pb_progress_simple_kit_muted_left,
+.pb_progress_simple_kit_muted_center,
+.pb_progress_simple_kit_muted_right,
+.pb_progress_simple_kit_positive_left,
+.pb_progress_simple_kit_positive_center,
+.pb_progress_simple_kit_positive_right,
+.pb_progress_simple_kit_negative_left,
+.pb_progress_simple_kit_negative_center,
+.pb_progress_simple_kit_negative_right,
+.pb_progress_simple_kit_warning_left,
+.pb_progress_simple_kit_warning_center,
+.pb_progress_simple_kit_warning_right,
+.pb_progress_simple_kit_muted_positive_left,
+.pb_progress_simple_kit_muted_positive_center,
+.pb_progress_simple_kit_muted_positive_right,
+.pb_progress_simple_kit_muted_negative_left,
+.pb_progress_simple_kit_muted_negative_center,
+.pb_progress_simple_kit_muted_negative_right,
+.pb_progress_simple_kit_muted_warning_left,
+.pb_progress_simple_kit_muted_warning_center,
+.pb_progress_simple_kit_muted_warning_right {
   width: 100%;
   height: $pb_progress_simple_height;
   border-radius: $pb_progress_simple_height/2;
   background: rgba($primary, $opacity-1);
-    &._positive {
-      .progress_simple_value {
-        background: $success;
-      }
-    }
-    &._negative {
-      .progress_simple_value {
-        background: $error;
-      }
-    }
-    &._warning {
-      .progress_simple_value {
-        background: $warning;
-      }
-    }
 
   .progress_simple_value {
     width: 0%;
@@ -45,17 +62,75 @@ $pb_progress_simple_height: 4px;
     border-radius: $pb_progress_simple_height/2;
     background: $primary;
   }
+}
+
+// Variant styles
+.pb_progress_simple_kit_positive,
+.pb_progress_simple_kit_positive_left,
+.pb_progress_simple_kit_positive_center,
+.pb_progress_simple_kit_positive_right,
+.pb_progress_simple_kit_muted_positive_left,
+.pb_progress_simple_kit_muted_positive_center,
+.pb_progress_simple_kit_muted_positive_right {
+  .progress_simple_value {
+    background: $success;
+  }
+}
 
-  &._muted {
-    background: rgba($slate, $opacity-2);
+.pb_progress_simple_kit_negative,
+.pb_progress_simple_kit_negative_left,
+.pb_progress_simple_kit_negative_center,
+.pb_progress_simple_kit_negative_right,
+.pb_progress_simple_kit_muted_negative_left,
+.pb_progress_simple_kit_muted_negative_center,
+.pb_progress_simple_kit_muted_negative_right {
+  .progress_simple_value {
+    background: $error;
+  }
+}
 
-    .progress_simple_value {
-      background: $slate;
-    }
+.pb_progress_simple_kit_warning,
+.pb_progress_simple_kit_warning_left,
+.pb_progress_simple_kit_warning_center,
+.pb_progress_simple_kit_warning_right,
+.pb_progress_simple_kit_muted_warning_left,
+.pb_progress_simple_kit_muted_warning_center,
+.pb_progress_simple_kit_muted_warning_right {
+  .progress_simple_value {
+    background: $warning;
   }
+}
 
-  &._right {
-    display: flex;
-    align-self: flex-end;
+// Muted styles
+.pb_progress_simple_kit_muted,
+.pb_progress_simple_kit_muted_left,
+.pb_progress_simple_kit_muted_center,
+.pb_progress_simple_kit_muted_right,
+.pb_progress_simple_kit_muted_positive_left,
+.pb_progress_simple_kit_muted_positive_center,
+.pb_progress_simple_kit_muted_positive_right,
+.pb_progress_simple_kit_muted_negative_left,
+.pb_progress_simple_kit_muted_negative_center,
+.pb_progress_simple_kit_muted_negative_right,
+.pb_progress_simple_kit_muted_warning_left,
+.pb_progress_simple_kit_muted_warning_center,
+.pb_progress_simple_kit_muted_warning_right {
+  background: rgba($slate, $opacity-2);
+
+  .progress_simple_value {
+    background: $slate;
   }
 }
+
+// Right alignment
+.pb_progress_simple_kit_right,
+.pb_progress_simple_kit_muted_right,
+.pb_progress_simple_kit_positive_right,
+.pb_progress_simple_kit_negative_right,
+.pb_progress_simple_kit_warning_right,
+.pb_progress_simple_kit_muted_positive_right,
+.pb_progress_simple_kit_muted_negative_right,
+.pb_progress_simple_kit_muted_warning_right {
+  display: flex;
+  align-self: flex-end;
+}

data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss

@@ -6,10 +6,10 @@
 
 
 
-.pb_progress_step_kit{
+[class^=pb_progress_step_kit]{
     list-style:none;
     display: flex;
-  .pb_progress_step_item {
+  [class*=pb_progress_step_item] {
     display:flex;
     flex-direction:column;
     position: relative;
@@ -46,13 +46,13 @@
         display:none;
     }
 
-    &._inactive{
+    &[class*=_inactive]{
         .circle{
             background-color: $border_light;
             color: $border_light;
         }
     }
-    &._active{
+    &[class*=_active]{
         .circle{
             background-color: $white;
             border: solid 2px $primary;
@@ -62,7 +62,7 @@
             background-color: $primary;
         }
     }
-    &._complete{
+    &[class*=_complete]{
         .circle{
             background-color: $primary;
             color:$white;
@@ -73,14 +73,14 @@
     }
   }
 // Start of Horizontal
-  &.horizontal{
+  &[class*=horizontal]{
     flex-direction: row;
-    .pb_progress_step_item{
+    [class*=pb_progress_step_item]{
         align-items: flex-end;
         &::before{
             width: calc(100% + .04em);
         }
-        .box{
+        [class*=box]{
            display: flex;
            flex-direction: column;
            align-items: center;
@@ -107,12 +107,12 @@
         }
     }
     // Start of Tracker
-    &.tracker {
+    &[class*=tracker] {
         background-color: $border_light;
         border-radius: 1rem;
         height:24px;
         align-items: center;
-        .box{
+        [class*=box]{
             .circle{
                 box-shadow: none;
                 height: 24px;
@@ -124,7 +124,7 @@
                 position: absolute;  
             }
         }
-        li.pb_progress_step_item{
+        li[class*=pb_progress_step_item]{
             &::before{
                 background-color: $border_light;
                 height: 24px;
@@ -147,7 +147,7 @@
                 }
             }
         }
-        li._active{
+        li[class*=_active]{
             .circle{
                 height: 24px;
                 width: 24px;
@@ -161,7 +161,7 @@
                 background-color: $primary;
             }
         }
-        li._inactive{
+        li[class*=_inactive]{
             &::before {
                 display: none;
                 background-color: $border_light;
@@ -172,7 +172,7 @@
             }
             
         }
-        li._complete{
+        li[class*=_complete]{
             &::before {
                 background-color: $primary;
             }
@@ -180,38 +180,38 @@
                 background-color: darken($primary,25%);
             }
         }
-        li._hidden{
+        li[class*=_hidden]{
             &::before, .circle {
                 display: none;
             }
         }
-        li._hidden ~ li._active,
-        li._hidden ~ li._complete {
+        li[class*=_hidden] ~ li[class*=_active],
+        li[class*=_hidden] ~ li[class*=_complete] {
             &::before {
                 width: calc(200% + 1.5em);
             }
         }
-        &.dark{
+        &[class*=dark]{
             background-color: tint($bg_dark,20%);
-            ._inactive{
+            [class*=_inactive]{
                 .circle{
                     border-color: tint($bg_dark,20%);
                 }
             }
         }
-        &.info{
-            li.inactive .circle{
+        &[class*=info]{
+            li[class*=inactive] .circle{
                 border-color: $border_light;
             }
-            .box .circle , li._active .circle{
+            .box .circle , li[class*=_active] .circle{
                 border-color: $teal;
             }
-            li._complete,li._active{
+            li[class*=_complete],li[class*=_active]{
                 &::before {
                     background-color: $teal;
                 }
             }
-            li._complete .circle{
+            li[class*=_complete] .circle{
                 background-color: darken($teal,25%);
             }
         }
@@ -222,10 +222,10 @@
 // End of Horizontal
 
 // Start of Vertical
-  &.vertical{
+  &[class*=vertical]{
     flex-direction: column; 
-    .pb_progress_step_item{
-        .box{
+    [class*=pb_progress_step_item]{
+        [class*=box]{
         display:flex;
         flex-direction: row;
         align-items: flex-start;
@@ -252,10 +252,10 @@
     }
   }
 //End of Vertical
-  &.icon{
-    .progress_step_item._complete,
-    .progress_step_item._active {
-        .box .circle svg {
+  &[class*=icon]{
+    [class*=progress_step_item][class*=_complete],
+    [class*=progress_step_item][class*=_active] {
+        [class*=box] .circle svg {
             opacity: 1;
             
         }
@@ -263,8 +263,8 @@
     }
 
 
-  &.dark {
-    .progress_step_item{
+  &[class*=dark] {
+    [class*=progress_step_item]{
         &::before{
             background-color: tint($bg_dark,20%);
         }
@@ -272,7 +272,7 @@
     .circle{
         box-shadow: 0 0 0 2px tint($bg_dark,10%);
     }
-    .active{
+    [class*=active]{
         .circle{
             background-color: tint($bg_dark,10%);
         }
@@ -280,16 +280,16 @@
             background-color: $primary;
         }
     }
-    .inactive{
+    [class*=inactive]{
         .circle, &::before{
            background-color: tint($bg_dark,20%);
         }
     }
-    .complete{
+    [class*=complete]{
         .circle, &::before{
            background-color: $primary;
         }
     }
   }
 
-}
+}

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -4,7 +4,12 @@
 @import "../pb_body/body";
 @import "../tokens/transition";
 
-[class^="pb_radio_kit"] {
+.pb_radio_kit,
+.pb_radio_kit.error,
+.pb_radio_kit.vertical,
+.pb_radio_kit.error.vertical,
+.pb_radio_kit_vertical,
+.pb_radio_kit_vertical.error {
   display: inline-flex;
   cursor: pointer;
 
@@ -59,71 +64,85 @@
       border: 6px solid $neutral;
     }
   }
+}
 
-  &[class*="vertical"] {
-    flex-direction: column;
-    align-items: center;
-    .pb_radio_button {
-      margin-right: 0px;
-      margin-bottom: $space_xs;
-    }
+.pb_radio_kit.vertical,
+.pb_radio_kit.error.vertical,
+.pb_radio_kit_vertical,
+.pb_radio_kit_vertical.error {
+  flex-direction: column;
+  align-items: center;
+  .pb_radio_button {
+    margin-right: 0px;
+    margin-bottom: $space_xs;
   }
+}
 
-  &.dark {
-    .pb_radio_button {
-      border-color: $border_dark;
-    }
-    input {
-      &:focus-visible {
-        & ~ .pb_radio_button {
-          box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $primary;
-        }
+.pb_radio_kit.dark,
+.pb_radio_kit.dark.error,
+.pb_radio_kit.dark.vertical,
+.pb_radio_kit.dark.error.vertical,
+.pb_radio_kit_vertical.dark,
+.pb_radio_kit_vertical.dark.error {
+  .pb_radio_button {
+    border-color: $border_dark;
+  }
+  input {
+    &:focus-visible {
+      & ~ .pb_radio_button {
+        box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $primary;
       }
-      &:checked {
-        & ~ .pb_radio_button {
-          border: 6px solid $active_dark;
-        }
+    }
+    &:checked {
+      & ~ .pb_radio_button {
+        border: 6px solid $active_dark;
       }
+    }
 
-      &:disabled + .pb_radio_button {
-        cursor: not-allowed;
-        background-color: mix($charcoal, $white, 80%);
-        border: 2px solid $border_dark;
-
-        & ~ .pb_body_kit {
-          cursor: not-allowed;
-          color: $text_dk_light;
-        }
-      }
+    &:disabled + .pb_radio_button {
+      cursor: not-allowed;
+      background-color: mix($charcoal, $white, 80%);
+      border: 2px solid $border_dark;
 
-      &:disabled:checked {
-        & ~ .pb_radio_button {
-          background-color: mix($charcoal, $white, 80%);
-          border: 6px solid $border_dark;
-        }
+      & ~ .pb_body_kit {
+        cursor: not-allowed;
+        color: $text_dk_light;
       }
     }
 
-    @media (hover: hover) {
-      &:hover {
-        .pb_radio_button {
-          background-color: rgba($white, 0.1);
-          border-color: $border_dark;
-        }
+    &:disabled:checked {
+      & ~ .pb_radio_button {
+        background-color: mix($charcoal, $white, 80%);
+        border: 6px solid $border_dark;
       }
     }
-    &.error {
-      > .pb_radio_button {
-        border-color: $error_dark;
-      }
-      > .pb_body_kit_negative {
-        color: $error_dark;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      .pb_radio_button {
+        background-color: rgba($white, 0.1);
+        border-color: $border_dark;
       }
     }
   }
-  &.error {
-    > .pb_radio_button {
-      border-color: $error;
-    }
+}
+
+.pb_radio_kit.dark.error,
+.pb_radio_kit.dark.error.vertical,
+.pb_radio_kit_vertical.dark.error {
+  > .pb_radio_button {
+    border-color: $error_dark;
+  }
+  > .pb_body_kit_negative {
+    color: $error_dark;
+  }
+}
+
+.pb_radio_kit.error,
+.pb_radio_kit.error.vertical,
+.pb_radio_kit_vertical.error {
+  > .pb_radio_button {
+    border-color: $error;
   }
 }

data/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -60,7 +60,7 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(({
   const htmlProps = buildHtmlProps(htmlOptions)
 
   const classes = classnames(
-    buildCss('pb_radio_kit', alignment),
+    buildCss('pb_radio_kit', `${alignment === 'vertical' ? 'vertical' : ''}`),
     dark ? 'dark' : null,
     error ? 'error' : null,
     globalProps(props),