playbook_ui 2.7.2 → 2.8.1

data/app/pb_kits/playbook/pb_table/_table.html.erb

@@ -2,11 +2,7 @@
   <%= content_tag(:table,
       id: object.id,
       data: object.data,
-      class: object.classname("table-#{object.size}
-          #{object.dark}
-          #{object.container}
-          #{object.disable_hover}
-          #{object.single_line}")) do %>
+      class: object.classname(object.kit_class)) do %>
     <%= object.yield(context: self) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/styles/_as-cards.scss

@@ -1,4 +1,4 @@
-table {
+[class^=pb_table] {
   &.table-sm,
   &.table-md,
   &.table-lg {

data/app/pb_kits/playbook/pb_table/styles/_content.scss

@@ -1,4 +1,4 @@
-table {
+[class^=pb_table] {
   &.table-sm,
   &.table-md,
   &.table-lg {

data/app/pb_kits/playbook/pb_table/styles/_headers.scss

@@ -1,15 +1,15 @@
-table {
+[class^=pb_table] {
   &.table-sm,
   &.table-md,
   &.table-lg {
     thead {
       tr {
         th {
-          color: $ink-lightest;
+          color: $text_lt_lighter;
           font-size: $default-header-size;
           font-weight: $regular;
           text-transform: uppercase;
-          border-bottom: 1px solid $sky;
+          border-bottom: 1px solid $border_light;
         }
       }
     }

data/app/pb_kits/playbook/pb_table/styles/_hover.scss

@@ -1,6 +1,8 @@
+@import "../../tokens/opacity";
+
 $transition-speed: 0.2s;
 
-table {
+[class^=pb_table] {
   &.table-sm,
   &.table-md,
   &.table-lg {
@@ -19,11 +21,11 @@ table {
           }
 
           &:hover {
-            box-shadow: 0 2px 10px 0 $black-opacity-1;
+            box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
 
             td {
               background: $white;
-              border-color: $sky-dark;
+              border-color: darken($border_light, 10%);
               border-top-width: 1px;
               border-top-color: transparent;
             }
@@ -34,14 +36,14 @@ table {
         tbody {
           tr {
             td {
-              border-top-color: $sky;
+              border-top-color: $border_light;
               border-top-width: 1px;
             }
 
             &:hover {
               td {
                 border-top-width: 1px;
-                border-top-color: $sky;
+                border-top-color: $border_light;
               }
             }
           }

data/app/pb_kits/playbook/pb_table/styles/_mobile.scss

@@ -1,112 +1,113 @@
 @media only screen and (max-width: $screen-xs-max) {
-  .table-sm,
-  .table-md,
-  .table-lg {
-    width: 100%;
-    background: none !important;
-
-    thead {
-      tr {
-        left: -9999px;
-        position: absolute;
-        top: -9999px;
-
-        th {
-          display: block;
-          visibility: visible;
-        }
-      }
-    }
-    tbody {
-      tr {
-        td {
-          display: block;
-          visibility: visible;
-          border-left-width: 1px !important;
-          border-right-width: 1px !important;
-          border-bottom-width: 0 !important;
-          border-color: $sky !important;
-          min-height: 2.2em;
-          padding-left: 34%;
-          position: relative;
-          text-align:left;
-          white-space: normal;
-
-          &:before {
-            content: attr(data-title);
-            color: $ink !important;
-            font-weight: $bold !important;
-            text-align: left !important;
-            width: 100% !important;
-            white-space: nowrap !important;
-            text-overflow: ellipsis !important;
-            position: relative !important;
-            top: 0 !important;
-            left: 0 !important;
-            height: 100% !important;
-            padding-left: 0 !important;
-            display: block !important;
-          }
-
-          &:first-child {
-            margin-top: $space_md !important;
-            border-top-width: 1px !important;
-            border-top-color: $sky !important;
-            border-radius: 4px 4px 0 0;
-          }
+  [class^=pb_table] {
+    .table-sm,
+    .table-md,
+    .table-lg {
+      width: 100%;
+      background: none !important;
 
-          &:last-child {
-            border-radius: 0 0 4px 4px;
-            border-bottom-width: 1px !important;
-          }
-        }
+      thead {
+        tr {
+          left: -9999px;
+          position: absolute;
+          top: -9999px;
 
-        &:first-child {
-          td {
-            &:first-child {
-              margin-top: $space-xs !important;
-            }
+          th {
+            display: block;
+            visibility: visible;
           }
         }
       }
-    }
-    &.table-card {
-      background: none !important;
-
       tbody {
         tr {
           td {
-            background: $white !important;
+            display: block;
+            visibility: visible;
             border-left-width: 1px !important;
             border-right-width: 1px !important;
-            border-top-width: 1px !important;
+            border-bottom-width: 0 !important;
+            border-color: $border_light !important;
+            min-height: 2.2em;
+            padding-left: 34%;
+            position: relative;
+            text-align:left;
+            white-space: normal;
+            &:before {
+              content: attr(data-title);
+              color: $text_lt_default !important;
+              font-weight: $bold !important;
+              text-align: left !important;
+              width: 100% !important;
+              white-space: nowrap !important;
+              text-overflow: ellipsis !important;
+              position: relative !important;
+              top: 0 !important;
+              left: 0 !important;
+              height: 100% !important;
+              padding-left: 0 !important;
+              display: block !important;
+            }
 
             &:first-child {
-              border-radius: 4px 4px 0 0 !important;
+              margin-top: $space_md !important;
+              border-top-width: 1px !important;
+              border-top-color: $border_light !important;
+              border-radius: 4px 4px 0 0;
             }
+
             &:last-child {
-              border-radius: 0 0 4px 4px !important;
+              border-radius: 0 0 4px 4px;
+              border-bottom-width: 1px !important;
+            }
+          }
+
+          &:first-child {
+            td {
+              &:first-child {
+                margin-top: $space-xs !important;
+              }
             }
           }
         }
       }
-    }
-    &:hover {
-      tbody {
-        tr {
-          box-shadow: 0 0 0 $white !important;
+      &.table-card {
+        background: none !important;
+
+        tbody {
+          tr {
+            td {
+              background: $white !important;
+              border-left-width: 1px !important;
+              border-right-width: 1px !important;
+              border-top-width: 1px !important;
+
+              &:first-child {
+                border-radius: 4px 4px 0 0 !important;
+              }
+              &:last-child {
+                border-radius: 0 0 4px 4px !important;
+              }
+            }
+          }
+        }
+      }
+      &:hover {
+        tbody {
+          tr {
+            box-shadow: 0 0 0 $white !important;
+          }
         }
       }
     }
-  }
-  @each $name, $value in $cell-pad-list {
-    &.#{$name} {
-      tbody {
-        tr {
-          td {
-            &:first-child,
-            &:last-child {
-              padding: $value $cell-gutter !important;
+    @each $name, $value in $cell-pad-list {
+      &.#{$name} {
+        tbody {
+          tr {
+            td {
+              &:first-child,
+              &:last-child {
+                padding: $value $cell-gutter !important;
+              }
             }
           }
         }
@@ -116,19 +117,21 @@
 }
 
 @media only screen and (max-width: $screen-xs-max) {
-  .table-sm,
-  .table-md,
-  .table-lg {
-    &.hide-labels {
-      tbody {
-        tr {
-          td {
-            &::before {
-              content: '';
-              left: 0;
-              padding-right: 0;
-              position: relative;
-              width: 0;
+  [class^=pb_table] {
+    .table-sm,
+    .table-md,
+    .table-lg {
+      &.hide-labels {
+        tbody {
+          tr {
+            td {
+              &::before {
+                content: '';
+                left: 0;
+                padding-right: 0;
+                position: relative;
+                width: 0;
+              }
             }
           }
         }

data/app/pb_kits/playbook/pb_table/styles/_reset.scss

@@ -1,4 +1,4 @@
-table {
+[class^=pb_table] {
   &.table-sm,
   &.table-md,
   &.table-lg {

data/app/pb_kits/playbook/pb_table/styles/_single-line.scss

@@ -1,4 +1,4 @@
-table {
+[class^=pb_table] {
   &.single-line {
     width: 100%;
     max-width: 100vw;

data/app/pb_kits/playbook/pb_table/styles/_structure.scss

@@ -1,8 +1,10 @@
-table {
+@import "../../tokens/colors";
+
+[class^=pb_table] {
   @each $name, $value in $cell-pad-list {
     &.#{$name} {
       width: 100%;
-      
+
       thead {
         tr {
           th {
@@ -20,7 +22,7 @@ table {
       tbody {
         tr {
           td {
-            border-color: $sky;
+            border-color: $border_light;
             border-style: solid;
             border-width: 0 0 1px;
             padding: $value $cell-gutter;

data/app/pb_kits/playbook/pb_table/styles/_table-card.scss

@@ -1,4 +1,4 @@
-table {
+[class^=pb_table] {
   &.table-sm,
   &.table-md,
   &.table-lg {
@@ -9,7 +9,7 @@ table {
       thead {
         tr {
           th {
-            border-color: $sky;
+            border-color: $border_light;
             border-style: solid;
             border-width: 1px 0 1px 0;
 
@@ -28,7 +28,7 @@ table {
       tbody {
         tr {
           td {
-            border-color: $sky;
+            border-color: $border_light;
             border-style: solid;
             border-width: 0 0 1px 0;
 
@@ -58,14 +58,14 @@ table {
       }
 
       &.as-cards {
-        border: 1px solid $sky;
+        border: 1px solid $border_light;
         border-radius: 4px;
 
         thead {
           tr {
             margin: $space-xs 0 0;
             padding: 0 $space-xs;
-            border-bottom: 1px solid $sky;
+            border-bottom: 1px solid $border_light;
 
             th {
               border-width: 0;

data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss

@@ -1,88 +1,94 @@
-$table-dark-card-bg: $ink;
+@import "../../tokens/screen_sizes";
 
-.table-sm,
-.table-md,
-.table-lg {
-  &.table-dark {
-    thead {
-      tr {
-        border-color: $ink-light !important;
+$table-dark-card-bg: $bg_dark;
 
-        th {
-          border-color: $ink-light !important;
-          color: $ink-lightest;
+[class^=pb_table] {
+  .table-sm,
+  .table-md,
+  .table-lg {
+    &.table-dark {
+      thead {
+        tr {
+          border-color: $border_dark !important;
+
+          th {
+            border-color: $border_dark !important;
+            color: $text_dk_light;
+          }
         }
       }
-    }
-    tbody {
-      tr {
-        border-color: $ink-light;
-        transition: none !important;
+      tbody {
+        tr {
+          border-color: $border_dark;
+          transition: none !important;
 
-        td {
-          border-color: $ink-light !important;
-          border-bottom-width: 0 !important;
-          color: $white;
+          td {
+            border-color: $border_dark !important;
+            border-bottom-width: 0 !important;
+            color: $white;
 
-          &:before {
-            color: $ink-lightest !important;
+            &:before {
+              color: $text_lt_light !important;
+            }
           }
-        }
-        &:first-child {
-          td {
-            border-top-width: 0 !important;
+          &:first-child {
+            td {
+              border-top-width: 0 !important;
+            }
           }
         }
       }
-    }
 
-    &:not(.no-hover) {
-      tbody {
-        tr {
-          &:hover {
-            td {
-              border-color: $ink-light !important;
-              background: $ink-light;
+      &:not(.no-hover) {
+        tbody {
+          tr {
+            &:hover {
+              td {
+                border-color: $border_dark !important;
+                background: $bg_dark;
+              }
             }
           }
         }
       }
-    }
 
-    &.table-card {
-      background: $table-dark-card-bg !important;
+      &.table-card {
+        background: $table-dark-card-bg !important;
+      }
     }
   }
 }
 
 @media only screen and (max-width: $screen-xs-max) {
-  .table-sm,
-  .table-md,
-  .table-lg {
-    &.table-card {
-      &.table-dark {
-        background: none !important;
+  [class^=pb_table] {
+    .table-sm,
+    .table-md,
+    .table-lg {
+      &.table-card {
+        &.table-dark {
+          background: none !important;
 
-        tbody {
-          tr {
-            td {
-              background: $table-dark-card-bg !important;
+          tbody {
+            tr {
+              td {
+                background: $table-dark-card-bg !important;
+              }
             }
           }
         }
       }
-    }
-    &.table-dark {
-      tbody {
-        tr {
-          td {
-            &:first-child {
-              border-top-color: $ink-light !important;
-            }
-          }
-          &:first-child {
+      &.table-dark {
+        tbody {
+          tr {
             td {
-              border-top-width: 1px !important;
+              &:first-child {
+                border-top-color: $border_dark !important;
+              }
+            }
+            &:first-child {
+              td {
+                border-top-width: 1px !important;
+              }
             }
           }
         }