@stoplight/ui-kit 3.0.0-beta.4 → 3.0.0-beta.40

package/styles/components/Code/_base.scss

@@ -1,20 +1,20 @@
 @import 'theme-light';
 @import 'theme-dark';
+@import '../../blueprint/colors.scss';
 
-.CodeEditor {
-  @include lightCodeTheme;
+$line-number-char-width: 10px;
+$line-padding-left: 10px;
 
-  &--inline {
-    margin: 0 2px;
-    border-radius: 2px;
+@keyframes set-color {
+  0% {
+    color: inherit;
   }
+}
 
-  &--line-numbers {
-    textarea {
-      // Need to use margin here since CodeEditor supports padding: https://github.com/stoplightio/ui-kit/blob/fd1334753a22d527b803b8554bc51761c348d319/src/CodeEditor/index.tsx#L13
-      margin-left: 35px !important;
-    }
-  }
+
+.CodeEditor,
+.CodeViewer {
+  @include lightCodeTheme;
 
   font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
   background: var(--code-bg);
@@ -24,8 +24,8 @@
   hyphens: none;
   direction: ltr;
 
-  .bp3-dark,
-  data[theme='dark'] & {
+  .#{$ns}-dark &,
+  [data-theme="dark"] & {
     @include darkCodeTheme;
   }
 
@@ -34,23 +34,37 @@
     background: var(--code-selection-bg);
   }
 
-  .line-number {
-    position: relative;
-    width: 35px;
-    display: inline-block;
-    left: 5px;
-    opacity: 0.4;
-    user-select: none;
+  &--inline {
+    margin: 0 2px;
+    border-radius: 2px;
+  }
 
-    &::before {
-      content: '';
-      counter-increment: line;
-      content: counter(line);
+  &--line-numbers {
+    .line-number {
+      position: relative;
+      display: block;
+
+      &::before {
+        display: inline-block;
+        position: absolute;
+        left: 0;
+        opacity: 0.4;
+        user-select: none;
+        text-align: right;
+        padding-right: $line-number-char-width;
+      }
     }
   }
 
-  // Tokens
+  &--error {
+    outline: 1px solid $pt-intent-danger;
+  }
 
+  &--warning {
+    outline: 1px solid $pt-intent-warning;
+  }
+
+  // Tokens
   .token {
     &.important,
     &.bold {
@@ -171,3 +185,68 @@
     }
   }
 }
+
+.CodeEditor {
+  &--line-numbers {
+    textarea {
+      outline: none;
+    }
+
+    @for $i from 1 through 6 {
+      &--#{$i} {
+        pre {
+          padding-left: $line-number-char-width * $i + $line-number-char-width + $line-padding-left !important;
+        }
+
+        textarea {
+          // Need to use margin here since CodeEditor supports padding: https://github.com/stoplightio/ui-kit/blob/fd1334753a22d527b803b8554bc51761c348d319/src/CodeEditor/index.tsx#L13
+          margin-left: $line-number-char-width * $i + $line-number-char-width + $line-padding-left !important;
+        }
+
+        .line-number {
+          margin-left: -$line-number-char-width * $i - $line-number-char-width;
+
+          &::before {
+            width: $line-number-char-width * $i + $line-number-char-width;
+          }
+        }
+      }
+    }
+  }
+
+  .line-number {
+    &::before {
+      counter-increment: line;
+      content: counter(line);
+    }
+  }
+}
+
+.CodeViewer {
+  .token {
+    animation: set-color 0.3s ease-out;
+  }
+
+  &--line-numbers {
+    @for $i from 1 through 6 {
+      &--#{$i} {
+        padding-left: $line-number-char-width * $i + $line-number-char-width + $line-padding-left !important;
+
+        .line-number {
+          margin-left: -$line-number-char-width * $i - $line-number-char-width;
+          padding-left: $line-number-char-width * $i + $line-number-char-width;
+
+          &::before {
+            width: $line-number-char-width * $i + $line-number-char-width;
+          }
+        }
+      }
+    }
+  }
+
+  .line-number {
+    &::before {
+      content: attr(data-node-index);
+    }
+  }
+}

package/styles/components/TableOfContents/_base.scss

@@ -1,43 +1,50 @@
-// .TableOfContentsItem {
-//   color: #5c6975;
-
-//   &__name {
-//     font-weight: 500;
-//     word-break: break-all;
-//     line-height: 1.5;
-//   }
-
-//   &__icon {
-//     color: #9daab6;
-//   }
-
-//   &__inner {
-//     padding: 7px 20px 7px 12px;
-//   }
-
-//   a {
-//     &:hover {
-//       text-decoration: none;
-//     }
-//   }
-
-//   &--active {
-//     &--child {
-//       border-left: none;
-//     }
-//   }
-
-//   &--divider {
-//     &:not(:first-child) {
-//       margin-top: 24px;
-//     }
-
-//     .TableOfContentsItem__name {
-//       font-size: 12px;
-//       font-weight: 700;
-//       line-height: 1.2;
-//       letter-spacing: 1px;
-//       text-transform: uppercase;
-//     }
-//   }
-// }
+.TableOfContentsItem {
+  &__name {
+    word-break: break-all;
+    line-height: 1.5;
+  }
+
+  &__icon {
+    color: #9daab6;
+  }
+
+  &__inner {
+    padding: 6px 16px 6px;
+    margin-top: 1px;
+    margin-bottom: 1px;
+  }
+
+  a {
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  &--active {
+    &--child {
+      border-left: none;
+    }
+  }
+
+  &--child {
+    .TableOfContentsItem__inner {
+      padding-left: 15px;
+    }
+  }
+
+  &--divider {
+    &:first-child {
+      margin-top: -5px;
+    }
+
+    &:not(:first-child) {
+      margin-top: 12px;
+    }
+
+    .TableOfContentsItem__name {
+      line-height: 1.2;
+      text-transform: uppercase;
+      font-size: 12px;
+    }
+  }
+}