playbook_ui 2.5.0

data/app/pb_kits/playbook/packs/site_styles/docs/_color_utilities.scss

@@ -0,0 +1,90 @@
+@import "../../../tokens/colors";
+
+// Only used for our documentation site.
+// Creates color classes for color utilities.
+@mixin doc-color($colors-list) {
+  @each $name, $color in $colors-list {
+    .pb--color_#{$name} {
+      background-color: $color !important;
+    }
+  }
+}
+@include doc-color($colors);
+@include doc-color($interface_colors);
+@include doc-color($main_colors);
+@include doc-color($background_colors);
+@include doc-color($card_colors);
+@include doc-color($active_colors);
+@include doc-color($hover_colors);
+@include doc-color($border_colors);
+@include doc-color($shadow_colors);
+@include doc-color($text_colors);
+@include doc-color($data_colors);
+@include doc-color($action_colors);
+@include doc-color($status_colors);
+@include doc-color($product_colors);
+
+.pb--color_bg_gradient {
+  background: $gradient_start;
+  background: -moz-linear-gradient(-45deg, $gradient_start 0%, $gradient_end 100%);
+  background: -webkit-linear-gradient(-45deg, $gradient_start 0%, $gradient_end 100%);
+  background: linear-gradient(135deg, $gradient_start 0%, $gradient_end 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$gradient_start}', endColorstr='#{$gradient_end}',GradientType=1 );
+}
+
+ul {
+  &.pb--utlities-color {
+    list-style: none;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 5px 0 20px 0;
+    background: white;
+    border-radius: 4px;
+    border: 1px solid $border-light;
+    padding: 10px;
+
+    li {
+      border-radius: 4px;
+      margin: 10px 5px;
+      position: relative;
+
+      & > div {
+        width: 80px;
+        height: 80px;
+        border-radius: 40px;
+        margin: 20px 15px 45px;
+        position: relative;
+      }
+      &::before {
+        content: attr(data-name);
+        width: 100%;
+        position: absolute;
+        top: 105px;
+        left: 0;
+        text-align: center;
+        font-size: 14px;
+        font-weight: 600;
+      }
+      &::after {
+        content: attr(data-variable);
+        width: 100%;
+        position: absolute;
+        top: 124px;
+        left: 0;
+        text-align: center;
+        font-size: 12px;
+        opacity: 0.7;
+      }
+
+      &.dark {
+        background: $bg_dark;
+        color: $white;
+      }
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss

@@ -0,0 +1,173 @@
+@import "../../../tokens/colors";
+
+.pb--doc {
+  margin-bottom: 20px;
+  border: 1px solid $border-light;
+  border-radius: 4px;
+  box-shadow: 0 4px 10px $shadow_light;
+  background: $white;
+  overflow: hidden;
+
+  .pb--close-toggle {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    background: rgba($white, 0.8);
+    padding: 0 10px;
+    border-radius: 2px;
+    height: 22px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    font-weight: 600;
+    z-index: 100;
+  }
+
+  .pb--kit-example {
+    padding: calc(2rem + 4px) 2rem 1rem;
+    position: relative;
+
+    &::after {
+      content: '';
+      width: 100%;
+      height: 4px;
+      background: $border-light;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  .pb--codeControls {
+    ul {
+      height: 45px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      list-style: none;
+      margin: 0;
+      padding: 0 20px;
+
+      li {
+        font-size: 12px;
+        margin: 0;
+        padding: 0;
+        position: relative;
+
+        a {
+          color: $primary_action;
+          padding: 0 10px;
+          line-height: 45px;
+          display: inline-block;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 2px;
+          opacity: 0.9;
+          background-color: transparent;
+        }
+
+        &.active {
+          font-weight: 600;
+
+          &::after {
+            background-color: $primary_action;
+            opacity: 0.2;
+          }
+        }
+      }
+    }
+  }
+
+  .pb--codeCopy {
+    padding: 20px 40px;
+    background: $bg_dark;
+    position: relative;
+    border-top: 1px solid $border-light;
+    display: none;
+  }
+
+  &.dark_ui {
+    background: $bg_dark;
+
+    .pb--kit-example {
+      color: $white;
+
+      &::after {
+        background: $border-dark;
+      }
+    }
+    .pb--codeCopy {
+      border-color: $border-dark;
+    }
+    .pb--codeControls {
+      ul {
+        li {
+          a {
+            color: $primary_action_dk;
+          }
+        }
+      }
+    }
+  }
+}
+
+.pb--propsTable {
+  position: relative;
+  margin: 40px 0 0;
+  background: $sky-lighter;
+  color: #faf6e4;
+  padding: 10px 30px 10px 30px;
+  border: 1px solid $border-light;
+
+  &--table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 10px;
+
+    tr {
+      padding: 10px;
+
+      th {
+        text-align: left;
+        padding: 10px 10px 5px 10px;
+        color: $ink_lighter;
+        opacity: 0.7;
+        font-size: 12px;
+        text-transform: uppercase;
+      }
+
+      td {
+        border-bottom: 1px solid $border-light;
+        padding: 5px 10px;
+        font-size: 14px;
+        color: $ink;
+        font-weight: 600;
+      }
+
+      &:last-child {
+        td {
+          border-bottom-width: 0;
+        }
+      }
+    }
+
+    &--notset {
+      font-size: 12px;
+      opacity: 0.4;
+      font-style: italic;
+      position: relative;
+      font-weight: 400;
+
+      &:after {
+        content: "not set";
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/packs/site_styles/docs/_kits_examples.scss

@@ -0,0 +1,22 @@
+@import "../../../tokens/colors";
+
+.pb--kits {
+  .pb--docItem {
+    margin: 0 0 40px 0;
+
+    .pb--docItem-ui {
+      .pb--doc {
+        box-shadow: 0 0 0 transparent;
+        padding: 0;
+        margin: 10px 0;
+
+        & > *:not(.pb--kit-example) {
+          display: none !important;
+        }
+        .pb--kit-example {
+          padding: 24px 30px 20px;
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss

@@ -0,0 +1,82 @@
+@import "../../../pb_title/title_mixin";
+@import "../../../tokens/spacing";
+
+.markdown {
+  h1 {
+    @include heading-1;
+    margin: 1rem 0;
+  }
+
+  h2 {
+    @include heading-2;
+    margin: 1rem 0;
+  }
+
+  h3 {
+    @include heading-3;
+    margin: 1rem 0;
+  }
+  h4 {
+    @include heading-4;
+    margin: 1rem 0;
+  }
+  h5 {
+    margin: 1rem 0;
+  }
+  h6 {
+    margin: 1rem 0;
+  }
+
+  hr {
+    margin: 2rem 0;
+  }
+  p{
+    margin: 1.5rem 0;
+  }
+  code {
+    background: #122b3b;
+    color: #faf6e4;
+    padding: 0.5rem 1.5rem;
+    margin: 1rem 0;
+    box-shadow: 0 2px 10px rgba($ink,0.2);
+    border-radius: 0.25rem;
+    overflow: hidden;
+    font-size: 1rem;
+  }
+
+  body {
+    font-size: 1rem;
+  }
+
+  ul, ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  ol {
+    counter-reset: list-counter;
+    li:before {
+      content: counter(list-counter);
+      counter-increment: list-counter;
+      display: block;
+      width: 20px;
+      flex: 0 0 20px;
+      text-align: left;
+      color: $ink-lightest;
+      font-weight: $bold;
+      margin-right: $space-sm;
+    }
+  }
+  li {
+    border-bottom: 1px solid $sky;
+    padding: $space-sm 0;
+    display: flex;
+    align-items: left;
+    &:last-child {
+      border-bottom: 0;
+      // padding-bottom: 0;
+    }
+  }
+
+
+}

data/app/pb_kits/playbook/packs/site_styles/docs/_spacing_tokens.scss

@@ -0,0 +1,72 @@
+@import "../../../tokens/colors";
+@import "../../../tokens/spacing";
+
+ul {
+  &.pb--tokens-spacing {
+    list-style: none;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 5px 0 20px 0;
+    background: white;
+    border-radius: 4px;
+    border: 1px solid $border-light;
+    padding: 10px;
+
+    li {
+      border-radius: 4px;
+      margin: 10px 5px;
+      position: relative;
+
+      & > div {
+        width: 80px;
+        height: 80px;
+        margin: 20px 15px 45px;
+        position: relative;
+        border: 1px solid;
+
+        border-color: $royal;
+        align-content: center;
+      }
+      &::before {
+        content: attr(data-name);
+        width: 100%;
+        position: absolute;
+        top: 105px;
+        left: 0;
+        text-align: center;
+        font-size: 14px;
+        font-weight: 600;
+
+      }
+      &::after {
+        content: attr(data-variable);
+        width: 100%;
+        position: absolute;
+        top: 124px;
+        left: 0;
+        text-align: center;
+        font-size: 12px;
+        opacity: 0.7;
+
+      }
+
+      &.dark {
+        background: $bg_dark;
+        color: $white;
+      }
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+@each $name, $value in $spaces{
+  div.pb--spacing_#{$name}{
+    width: #{$value} ;
+    height: 78px;
+    background: $p_red_opacity_2 ;
+  }
+}

data/app/pb_kits/playbook/pb_avatar/_avatar.html.erb

@@ -0,0 +1,8 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data(initials: object.initials),
+    class: object.classname("avatar_#{object.size}")) do %>
+  <% if object.url.present? %>
+    <%= pb_rails("image", props: { url: object.url, alt: object.name }) %>
+  <% end %>
+<% end %>