playbook_ui 16.2.0.pre.alpha.PLAY2719atpinnedrowsrails14418 → 16.2.0.pre.alpha.PLAY2791closeonclick14636

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e0f32387b1de49c24f6e4900458f3c9e72ee5ff49607ac5a5ab9cb606d4e08a1
-  data.tar.gz: 7570bfc0deb31f3d41290d87a8332e976d11d6fa6f7aa7abd2061f3dcd5eda07
+  metadata.gz: cfccccc8ec73a171782599bac37606fbbdc9c917eb9c48bb33c2cbfd4aa68258
+  data.tar.gz: 779c27fc41b966c1d0d2ce21369643049bdc3b80b8cd2efcc9400b27d8554836
 SHA512:
-  metadata.gz: dc61efb31c01ed5d50b7f669a623173e88d7516404241fc4e3675db1e4456ef0594ce640724eefd50ee79a62e04f28601dfb3566f1cf23e1362138b1d128a332
-  data.tar.gz: a0def085b16be4e5c142cfd0a83eea3631b19563169297d161b5744062797f85873a453b31b749132f94c6f688c0f7381c8ce9017142a88a903d57ffc6037ff9
+  metadata.gz: 6e31002ccaa72626ea3eaaa01c9e5e2b299a05dbdaeebd7a5f9c54d80d1503155974a93fc25b6b78e906455dd389aeec2707e55e1904177c4e7e14c2f93f263e
+  data.tar.gz: 5663ca65cca211f1a494ef7535a2a82162bc2416db6653bb38f7fcd6e3485775f0ca7c7fd3cc610c71a498c599e377c5e0f5a742a95c0cf7abcde194ecd5a0e7

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -63,51 +63,6 @@
     width: 100%;
   }
 
-  // Override pb_table endcap: first and last column use same padding as rest of row
-  // First column
-  [class^="pb_table"].table-sm tbody tr td:first-child,
-  [class^="pb_table"].table-sm tbody tr .pb_table_td:first-child,
-  [class^="pb_table"].table-sm tbody .pb_table_tr td:first-child,
-  [class^="pb_table"].table-sm tbody .pb_table_tr .pb_table_td:first-child,
-  [class^="pb_table"].table-sm .pb_table_tbody tr td:first-child,
-  [class^="pb_table"].table-sm .pb_table_tbody tr .pb_table_td:first-child,
-  [class^="pb_table"].table-sm .pb_table_tbody .pb_table_tr td:first-child,
-  [class^="pb_table"].table-sm .pb_table_tbody .pb_table_tr .pb_table_td:first-child {
-    padding-left: $space-xs;
-  }
-  [class^="pb_table"].table-md tbody tr td:first-child,
-  [class^="pb_table"].table-md tbody tr .pb_table_td:first-child,
-  [class^="pb_table"].table-md tbody .pb_table_tr td:first-child,
-  [class^="pb_table"].table-md tbody .pb_table_tr .pb_table_td:first-child,
-  [class^="pb_table"].table-md .pb_table_tbody tr td:first-child,
-  [class^="pb_table"].table-md .pb_table_tbody tr .pb_table_td:first-child,
-  [class^="pb_table"].table-md .pb_table_tbody .pb_table_tr td:first-child,
-  [class^="pb_table"].table-md .pb_table_tbody .pb_table_tr .pb_table_td:first-child {
-    padding-left: $space-sm;
-  }
-
-  // Last column
-  [class^="pb_table"].table-sm tbody tr td:last-child,
-  [class^="pb_table"].table-sm tbody tr .pb_table_td:last-child,
-  [class^="pb_table"].table-sm tbody .pb_table_tr td:last-child,
-  [class^="pb_table"].table-sm tbody .pb_table_tr .pb_table_td:last-child,
-  [class^="pb_table"].table-sm .pb_table_tbody tr td:last-child,
-  [class^="pb_table"].table-sm .pb_table_tbody tr .pb_table_td:last-child,
-  [class^="pb_table"].table-sm .pb_table_tbody .pb_table_tr td:last-child,
-  [class^="pb_table"].table-sm .pb_table_tbody .pb_table_tr .pb_table_td:last-child {
-    padding-right: $space-xs;
-  }
-  [class^="pb_table"].table-md tbody tr td:last-child,
-  [class^="pb_table"].table-md tbody tr .pb_table_td:last-child,
-  [class^="pb_table"].table-md tbody .pb_table_tr td:last-child,
-  [class^="pb_table"].table-md tbody .pb_table_tr .pb_table_td:last-child,
-  [class^="pb_table"].table-md .pb_table_tbody tr td:last-child,
-  [class^="pb_table"].table-md .pb_table_tbody tr .pb_table_td:last-child,
-  [class^="pb_table"].table-md .pb_table_tbody .pb_table_tr td:last-child,
-  [class^="pb_table"].table-md .pb_table_tbody .pb_table_tr .pb_table_td:last-child {
-    padding-right: $space-sm;
-  }
-
   // Virtualized Table and Rows for Infinite Scroll
   scrollbar-gutter: stable right-edges;
   .virtualized-header-row-header {
@@ -765,7 +720,7 @@
     }
   }
 
-  // Row Pinning - React uses inline style; Rails passes same style via html_options from table_body
+  // Row Pinning - additional inline styles in RegularTableView.tsx
   .pinned-row {
     box-shadow: 0 4px 10px 0 rgba($shadow, 0.16) !important;
   }

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -7,12 +7,12 @@
     }) %>
   <% end %>
 
-  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props || {})) do %>
+  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props)) do %>
     <% if content.present? %>
       <% content.presence %>
     <% else %>
       <%= pb_rails("advanced_table/table_header", props: { table_id: object.id, column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar, inline_row_loading: object.inline_row_loading, persist_toggle_expansion_button: object.persist_toggle_expansion_button, table_data: object.table_data }) %>
-      <%= pb_rails("advanced_table/table_body", props: { table_id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling, inline_row_loading: object.inline_row_loading, pinned_rows: object.pinned_rows }) %>
+      <%= pb_rails("advanced_table/table_body", props: { table_id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling, inline_row_loading: object.inline_row_loading }) %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -37,8 +37,6 @@ module Playbook
                                 default: false
       prop :persist_toggle_expansion_button, type: Playbook::Props::Boolean,
                                              default: false
-      prop :pinned_rows, type: Playbook::Props::HashProp,
-                         default: {}
 
       def classname
         additional_classes = [

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -7,7 +7,6 @@ examples:
   - advanced_table_table_props: Table Props
   - advanced_table_sticky_header_rails: Sticky Header
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
-  - advanced_table_pinned_rows_rails: Pinned Rows
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -304,36 +304,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         lastVisibleRow.classList.add("last-visible-row");
         lastVisibleRow.classList.add("last-row-cell");
       }
-
-      PbAdvancedTable.updatePinnedRowsStickyTops(table);
     }
   }
 
-  /**
-   * Recompute sticky top for visible pinned rows so collapsed rows don't leave a gap.
-   * Call after expand/collapse and on load.
-   */
-  static updatePinnedRowsStickyTops(advancedTableWrapper) {
-    const pinnedTbody = advancedTableWrapper?.querySelector("tbody.pinned-rows-tbody");
-    if (!pinnedTbody) return;
-
-    const pinnedRows = Array.from(pinnedTbody.querySelectorAll("tr.pinned-row"));
-    const visibleRows = pinnedRows.filter(
-      (tr) => tr.style.display !== "none" && tr.offsetParent !== null
-    );
-
-    const headerOffset = "var(--advanced-table-header-height, 44px)";
-    visibleRows.forEach((tr, index) => {
-      tr.style.top = `calc(${headerOffset} + 2.5em * ${index})`;
-    });
-  }
-
-  static updatePinnedRowsStickyTopsForAll() {
-    document.querySelectorAll(".pb_advanced_table").forEach((wrapper) => {
-      PbAdvancedTable.updatePinnedRowsStickyTops(wrapper);
-    });
-  }
-
   hideCloseIcon() {
     const closeIcon = this.element.querySelector(UP_ARROW_SELECTOR);
     closeIcon.style.display = "none";
@@ -527,14 +500,3 @@ window.expandAllRows = (element) => {
 window.expandAllSubRows = (element, rowDepth) => {
   PbAdvancedTable.handleToggleAllSubRows(element, rowDepth);
 };
-
-// Fix pinned row sticky tops on load (collapsed rows would otherwise leave a gap)
-if (typeof document !== "undefined") {
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", () =>
-      PbAdvancedTable.updatePinnedRowsStickyTopsForAll()
-    );
-  } else {
-    PbAdvancedTable.updatePinnedRowsStickyTopsForAll();
-  }
-}

data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb

@@ -1,22 +1,5 @@
-<% table_data = object.table_data || [] %>
-<% if object.has_pinned_rows? %>
-  <%= pb_content_tag(:tbody, class: "pinned-rows-tbody") do %>
-    <% next_index = 0 %>
-    <% object.pinned_root_rows.each do |root_info| %>
-      <% row_output, next_index = object.render_row_and_children(root_info[:row], object.column_definitions, root_info[:depth], root_info[:depth] > 0, root_info[:ancestor_ids] || [], root_info[:ancestor_ids]&.first, immediate_parent_row_id: object.row_id_for(root_info[:parent_row]), is_pinned_row: true, pinned_index: next_index, initial_table_data_attributes: root_info[:depth].to_i > 0 ? object.pinned_root_initial_data_attributes(root_info) : nil) %>
-      <%= row_output %>
-    <% end %>
-  <% end %>
-  <%= pb_content_tag(:tbody) do %>
-    <% table_data.each do |row| %>
-      <% result = object.render_row_and_children(row, object.column_definitions, 0, false, skip_pinned_ids: object.pinned_ids_set) %>
-      <%= result.is_a?(Array) ? result[0] : result %>
-    <% end %>
-  <% end %>
-<% else %>
-  <%= pb_content_tag(:tbody) do %>
-    <% table_data.each do |row| %>
-      <%= object.render_row_and_children(row, object.column_definitions, 0, false) %>
-    <% end %>
-  <% end %>
+<%= pb_content_tag(:tbody) do %>
+        <% object.table_data.each do |row| %>
+          <%= render_row_and_children(row, object.column_definitions, 0, false) %>
+        <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -27,8 +27,6 @@ module Playbook
                          default: []
       prop :inline_row_loading, type: Playbook::Props::Boolean,
                                 default: false
-      prop :pinned_rows, type: Playbook::Props::HashProp,
-                         default: {}
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -44,21 +42,14 @@ module Playbook
         end.compact
       end
 
-      def render_row_and_children(row, column_definitions, current_depth, first_parent_child, ancestor_ids = [], top_parent_id = nil, additional_classes: "", table_data_attributes: {}, immediate_parent_row_id: nil, is_pinned_row: false, pinned_index: nil, skip_pinned_ids: nil, initial_table_data_attributes: nil)
-        if skip_pinned_ids && row_id_for(row) && skip_pinned_ids.include?(row_id_for(row).to_s)
-          return is_pinned_row ? [ActiveSupport::SafeBuffer.new, pinned_index] : ActiveSupport::SafeBuffer.new
-        end
-
+      def render_row_and_children(row, column_definitions, current_depth, first_parent_child, ancestor_ids = [], top_parent_id = nil, additional_classes: "", table_data_attributes: {}, immediate_parent_row_id: nil)
         top_parent_id ||= row.object_id
         new_ancestor_ids = ancestor_ids + [row.object_id]
-        leaf_columns = flatten_columns(column_definitions || [])
+        leaf_columns = flatten_columns(column_definitions)
 
         output = ActiveSupport::SafeBuffer.new
-        subrow_headers_arr = subrow_headers || []
-        is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers_arr[current_depth - 1].present?
-        last_row = subrow_headers_arr.length == current_depth
-
-        next_pinned_index = pinned_index
+        is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers[current_depth - 1].present?
+        last_row = subrow_headers.length == current_depth
 
         subrow_ancestor_ids = ancestor_ids + ["#{row.object_id}sr"]
         subrow_data_attributes = {
@@ -67,16 +58,7 @@ module Playbook
           row_parent: "#{table_id}_#{ancestor_ids.last}",
         }
         # Subrow header if applicable
-        if is_first_child_of_subrow && enable_toggle_expansion == "all"
-          subrow_props = { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers_arr[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", responsive: responsive, subrow_data_attributes: subrow_data_attributes, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id }
-          if is_pinned_row && next_pinned_index
-            subrow_props[:is_pinned_row] = true
-            subrow_props[:pinned_index] = next_pinned_index
-            subrow_props[:html_options] = { style: build_pinned_row_style(next_pinned_index, background: "var(--pb_table_sticky_bg, #f5f5f5)") }
-            next_pinned_index += 1
-          end
-          output << pb_rails("advanced_table/table_subrow_header", props: subrow_props)
-        end
+        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", responsive: responsive, subrow_data_attributes: subrow_data_attributes, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
         current_data_attributes = if current_depth.zero?
                                     {
@@ -85,19 +67,11 @@ module Playbook
                                       row_parent: nil,
                                     }
                                   else
-                                    initial_table_data_attributes || table_data_attributes
+                                    table_data_attributes
                                   end
 
         # Additional class and data attributes needed for toggle logic
-        row_props = { table_id: table_id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id, inline_row_loading: inline_row_loading }
-        if is_pinned_row && next_pinned_index
-          row_props[:is_pinned_row] = true
-          row_props[:pinned_index] = next_pinned_index
-          row_bg = (row_styling || []).find { |s| s[:row_id].to_s == row_id_for(row).to_s }&.[](:background_color) || "white"
-          row_props[:html_options] = { style: build_pinned_row_style(next_pinned_index, background: row_bg) }
-          next_pinned_index += 1
-        end
-        output << pb_rails("advanced_table/table_row", props: row_props)
+        output << pb_rails("advanced_table/table_row", props: { table_id: table_id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id, inline_row_loading: inline_row_loading })
 
         # Render inline loading row when inline_row_loading is enabled and row has empty children
         if inline_row_loading
@@ -129,21 +103,11 @@ module Playbook
               advanced_table_content: data_content,
             }
 
-            child_opts = { additional_classes: "toggle-content", table_data_attributes: child_data_attributes, immediate_parent_row_id: row[:id] }
-            child_opts[:is_pinned_row] = is_pinned_row
-            child_opts[:pinned_index] = next_pinned_index if is_pinned_row
-            child_opts[:skip_pinned_ids] = skip_pinned_ids if skip_pinned_ids
-
-            child_output, next_pinned_index = render_row_and_children(child_row, column_definitions, current_depth + 1, is_first_child, new_ancestor_ids, top_parent_id, **child_opts)
-            output << child_output
+            output << render_row_and_children(child_row, column_definitions, current_depth + 1, is_first_child, new_ancestor_ids, top_parent_id, additional_classes: "toggle-content", table_data_attributes: child_data_attributes, immediate_parent_row_id: row[:id])
           end
         end
 
-        if is_pinned_row
-          [output, next_pinned_index]
-        else
-          output
-        end
+        output
       end
 
       def classname
@@ -178,76 +142,6 @@ module Playbook
         end
       end
 
-      def row_id_for(row)
-        return nil if row.nil?
-
-        row[:id] || row["id"]
-      end
-
-      def pinned_top_ids
-        return [] if pinned_rows.nil? || !pinned_rows.respond_to?(:[])
-
-        top = pinned_rows["top"] || pinned_rows[:top]
-        Array(top).map(&:to_s)
-      end
-
-      def pinned_ids_set
-        return Set.new if pinned_top_ids.blank?
-
-        set = Set.new
-        pinned_root_rows.each do |root|
-          collect_row_and_descendant_ids(root[:row], set)
-        end
-        set
-      end
-
-      def collect_row_and_descendant_ids(row, set)
-        id = row_id_for(row)
-        set.add(id.to_s) if id
-        row_children_for(row)&.each { |child| collect_row_and_descendant_ids(child, set) }
-      end
-
-      def find_row_by_id(data, id, depth: 0, ancestor_ids: [], parent_row: nil)
-        id_str = id.to_s
-        Array(data).each do |row|
-          return { row: row, depth: depth, ancestor_ids: ancestor_ids, parent_row: parent_row } if row_id_for(row).to_s == id_str
-
-          found = find_row_by_id(row_children_for(row), id_str, depth: depth + 1, ancestor_ids: ancestor_ids + [row.object_id], parent_row: row)
-          return found if found
-        end
-        nil
-      end
-
-      def pinned_root_rows
-        return [] if pinned_top_ids.blank?
-
-        pinned_top_ids.filter_map { |id| find_row_by_id(table_data, id) }
-      end
-
-      def has_pinned_rows?
-        pinned_root_rows.any?
-      end
-
-      # Build inline style for sticky pinned row (matches React). Pass via html_options so the tr gets the attribute.
-      def build_pinned_row_style(pinned_index, background: "white")
-        header_offset = "var(--advanced-table-header-height, 44px)"
-        row_offset = "calc(2.5em * #{pinned_index})"
-        "position: sticky; top: calc(#{header_offset} + #{row_offset}); z-index: 3; background: #{background};"
-      end
-
-      def pinned_root_initial_data_attributes(root_info)
-        return {} if root_info[:depth].to_i.zero?
-
-        anc = root_info[:ancestor_ids] || []
-        content = (anc + [root_info[:row].object_id]).join("-")
-        {
-          top_parent: "#{table_id}_#{anc.first}",
-          row_depth: root_info[:depth],
-          row_parent: "#{table_id}_#{anc.last}",
-          advanced_table_content: content,
-        }
-      end
-
       def cell_accessors_length(col_defs)
         first_col = col_defs.first
         return 0 unless first_col

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -35,28 +35,13 @@ module Playbook
                                      default: ""
       prop :inline_row_loading, type: Playbook::Props::Boolean,
                                 default: false
-      prop :is_pinned_row, type: Playbook::Props::Boolean,
-                           default: false
-      prop :pinned_index, type: Playbook::Props::Numeric,
-                          default: nil
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
       end
 
       def classname
-        classes = ["pb_table_tr", "pb-bg-row-white", subrow_depth_classname]
-        classes << "pinned-row" if is_pinned_row
-        generate_classname(*classes, separator: " ")
-      end
-
-      def pinned_row_style
-        return nil unless is_pinned_row && pinned_index.is_a?(Numeric)
-
-        header_offset = "var(--advanced-table-header-height, 40px)"
-        row_offset = "calc(2.5em * #{pinned_index})"
-        bg = row_styling.find { |style| style[:row_id].to_s == row_id.to_s }&.[](:background_color) || "white"
-        "position: sticky; top: calc(#{header_offset} + #{row_offset}); z-index: 3; background: #{bg};"
+        generate_classname("pb_table_tr", "pb-bg-row-white", subrow_depth_classname, separator: " ")
       end
 
       def td_classname(column, index)

data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb

@@ -19,27 +19,13 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"
-      prop :is_pinned_row, type: Playbook::Props::Boolean,
-                           default: false
-      prop :pinned_index, type: Playbook::Props::Numeric,
-                          default: nil
 
       def data
         Hash(prop(:data)).merge(subrow_data_attributes)
       end
 
       def classname
-        classes = ["pb_table_tr", "bg-silver", "pb_subrow_header", subrow_depth_classname]
-        classes << "pinned-row" if is_pinned_row
-        generate_classname(*classes, separator: " ")
-      end
-
-      def pinned_row_style
-        return nil unless is_pinned_row && pinned_index.is_a?(Numeric)
-
-        header_offset = "var(--advanced-table-header-height, 40px)"
-        row_offset = "calc(2.5em * #{pinned_index})"
-        "position: sticky; top: calc(#{header_offset} + #{row_offset}); z-index: 3; background: var(--pb_table_sticky_bg, #f5f5f5);"
+        generate_classname("pb_table_tr", "bg-silver", "pb_subrow_header", subrow_depth_classname, separator: " ")
       end
 
       def td_classname(index)

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -30,7 +30,7 @@
 .pb_body_kit_error_neutral,
 .pb_body_kit_error_positive,
 .pb_body_kit_error_negative {
-  @include pb_body($text_lt_default);
+  @include pb_body($text_default_color);
   
   b,
   strong {
@@ -38,9 +38,9 @@
   }
 
   a {
-    color: $primary;
+    color: $text_link;
     &:hover {
-      color: $text_lt_default;
+      color: $text_default_color;
     }
   }
 
@@ -110,7 +110,7 @@
   @include pb_body_dark();
   
   a {
-    color: $active_dark;
+    color: $text_link_dark;
   }
 }
 

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -3,38 +3,38 @@
 @import "../tokens/typography";
 
 $pb_body_colors: (
-  default: $text_lt_default,
-  light: $text_lt_light,
-  lighter: $text_lt_lighter,
-  link: $primary,
-  error: $error,
-  success: $text_lt_success_sm,
+  default: $text_default_color,
+  light: $text_light,
+  lighter: $text_lighter,
+  link: $text_link,
+  error: $text_error,
+  success: $text_success,
 );
 
 $pb_dark_body_colors: (
-  default: $text_dk_default,
-  light: $text_dk_light,
-  lighter: $text_dk_lighter,
-  link: $active_dark,
-  error: $error,
-  success: $text_dk_success_sm,
+  default: $text_default_dark,
+  light: $text_light_dark,
+  lighter: $text_lighter_dark,
+  link: $text_link_dark,
+  error: $text_error_dark,
+  success: $text_success_dark,
 );
 
 // Order is important here!
 $pb_body_status: (
-  default: $text_lt_default,
-  negative: $error,
-  dark_error: $error_dark_body,
-  positive: $text_lt_success_sm,
+  default: $text_default_color,
+  negative: $text_error,
+  dark_error: $text_error_dark,
+  positive: $text_success,
 );
 
 $pb_dark_body_status: (
-  default: $text_dk_default,
-  negative: $error_dark,
-  positive: $text_dk_success_sm,
+  default: $text_default_dark,
+  negative: $text_error_dark,
+  positive: $text_success_dark,
 );
 
-@mixin pb_body($color: $text_lt_default) {
+@mixin pb_body($color: $text_default_color) {
   line-height: $lh_tight;
   color: $color;
   font-size: $text_default;
@@ -44,34 +44,34 @@ $pb_dark_body_status: (
 
 // Colors ======================
 @mixin pb_body_light {
-  @include pb_body($text_lt_light);
+  @include pb_body($text_light);
 }
 
 @mixin pb_body_lighter {
-  @include pb_body($text_lt_lighter);
+  @include pb_body($text_lighter);
 }
 
 @mixin pb_body_dark {
-  @include pb_body($text_dk_default);
+  @include pb_body($text_default_dark);
 }
 
 @mixin pb_body_light_dark {
-  @include pb_body($text_dk_light);
+  @include pb_body($text_light_dark);
 }
 
 @mixin pb_body_lighter_dark {
-  @include pb_body($text_dk_lighter);
+  @include pb_body($text_lighter_dark);
 }
 
 // Statuses =====================
 @mixin pb_body_negative {
-  @include pb_body($error);
+  @include pb_body($text_error);
 }
 
 @mixin pb_body_dark_error {
-  @include pb_body($error_dark_body);
+  @include pb_body($text_error_dark);
 }
 
 @mixin pb_body_positive {
-  @include pb_body($success);
+  @include pb_body($text_success);
 }

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

@@ -88,7 +88,7 @@
 .pb_caption_kit_base_link,
 .pb_caption_kit_lg_link,
 .pb_caption_kit_xl_link {
-  color: $primary;
+  color: $text_link;
 }
 
 // Dark theme variants

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

@@ -2,33 +2,33 @@
 @import "../tokens/typography";
 
 $pb_caption_colors: (
-  default:        $text_lt_default,
-  light:          $text_lt_light,
-  link:           $primary,
-  lighter:        $text_lt_lighter,
-  success:        $text_lt_success_sm,
-  error:          $error,
+  default:        $text_default_color,
+  light:          $text_light,
+  link:           $text_link,
+  lighter:        $text_lighter,
+  success:        $text_success,
+  error:          $text_error,
 );
 
 $pb_dark_caption_colors: (
-  default:        $text_dk_default,
-  light:          $text_dk_light,
-  lighter:        $text_dk_lighter,
-  link:           $active_dark,
-  success:        $text_dk_success_sm,
-  error:          $error_dark,
+  default:        $text_default_dark,
+  light:          $text_light_dark,
+  lighter:        $text_lighter_dark,
+  link:           $text_link_dark,
+  success:        $text_success_dark,
+  error:          $text_error_dark,
 );
 
 
 @mixin caption($font_size: $font_smaller, $font_weight: $bold) {
   font-weight: $font_weight;
-  color: $text_lt_light;
+  color: $text_light;
   text-transform: uppercase;
   font-size: $font_size;
   letter-spacing: $lspace_loosest;
 }
 
-@mixin caption_color($color: $text_lt_light) {
+@mixin caption_color($color: $text_light) {
   color: $color;
 }
 
@@ -43,5 +43,5 @@ $pb_dark_caption_colors: (
 }
 
 @mixin caption_dark {
-  color: $text_dk_light;
+  color: $text_light_dark;
 }

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.html.erb

@@ -1,4 +1,6 @@
-<%= pb_rails("caption", props: { text: "Test colors" }) %>
-<%= pb_rails("caption", props: { text: "Test colors", color: "success" }) %>
-<%= pb_rails("caption", props: { text: "Test colors", color: "error" }) %>
-<%= pb_rails("caption", props: { text: "Test colors", color: "link" }) %>
+<%= pb_rails("caption", props: { text: "Caption light" }) %>
+<%= pb_rails("caption", props: { text: "Caption default", color: "default" }) %>
+<%= pb_rails("caption", props: { text: "Caption lighter", color: "lighter" }) %>
+<%= pb_rails("caption", props: { text: "Caption success", color: "success" }) %>
+<%= pb_rails("caption", props: { text: "Caption error", color: "error" }) %>
+<%= pb_rails("caption", props: { text: "Caption link", color: "link" }) %>