@stoplight/ui-kit 0.0.0-beta-0.1

package/styles/common/_variables.scss

@@ -0,0 +1,131 @@
+@import './utils';
+
+/*
+ * CONFIG TO BE PASSED IN BY THE CONSUMER
+ * $sl-config should never be called outside of this file, unless being set in another application
+ */
+$sl-config: () !default;
+
+/*
+ * DEFAULTS DEFINED BY STOPLIGHT
+ * $sl-defaults should never be called outside of this file
+ */
+
+$sl-defaults: (
+  namespace: 'bp3',
+  colors: (
+    transparent: transparent,
+    black: #10161a,
+    white: #fff,
+    disabled: rgba(#394b59, 0.5),
+    lighten: (
+      1: rgba(255, 255, 255, 0.02),
+      2: rgba(255, 255, 255, 0.05),
+      3: rgba(255, 255, 255, 0.1),
+      4: rgba(255, 255, 255, 0.15),
+      5: rgba(255, 255, 255, 0.25),
+      6: rgba(255, 255, 255, 0.35),
+      7: rgba(255, 255, 255, 0.5),
+      8: rgba(255, 255, 255, 0.6),
+      9: rgba(255, 255, 255, 0.8),
+    ),
+    darken: (
+      1: rgba(0, 0, 0, 0.03),
+      2: rgba(0, 0, 0, 0.06),
+      3: rgba(0, 0, 0, 0.1),
+      4: rgba(0, 0, 0, 0.15),
+      5: rgba(0, 0, 0, 0.25),
+      6: rgba(0, 0, 0, 0.35),
+      7: rgba(0, 0, 0, 0.5),
+      8: rgba(0, 0, 0, 0.6),
+      9: rgba(0, 0, 0, 0.8),
+    ),
+    gray: (
+      1: #f5f8fa,
+      2: #e1e8ed,
+      3: #ced9e0,
+      4: #bfccd6,
+      5: #a7b6c2,
+      6: #738694,
+      7: #394b59,
+      8: #293742,
+      9: #182026,
+    ),
+    darkgray: (
+      1: #182026,
+      2: #202b33,
+      3: #293742,
+      4: #30404c,
+      5: #394b59,
+    ),
+    lightgray: (
+      1: #ced9e0,
+      2: #d8e1e8,
+      3: #e1e8ed,
+      4: #ebf1f5,
+      5: #f5f8fa,
+    ),
+    red: (
+      1: #fff5f5,
+      2: #fed7d7,
+      3: #feb2b2,
+      4: #fc8181,
+      5: #f56565,
+      6: #e53e3e,
+      7: #c53030,
+      8: #9b2c2c,
+      9: #742a2a,
+    ),
+    orange: (
+      1: #fffaf0,
+      2: #feebc8,
+      3: #fbd38d,
+      4: #f6ad55,
+      5: #ed8936,
+      6: #dd6b20,
+      7: #c05621,
+      8: #9c4221,
+      9: #7b341e,
+    ),
+    green: (
+      1: #f0fff4,
+      2: #c6f6d5,
+      3: #9ae6b4,
+      4: #68d391,
+      5: #48bb78,
+      6: #38a169,
+      7: #2f855a,
+      8: #276749,
+      9: #22543d,
+    ),
+    blue: (
+      1: #ebf8ff,
+      2: #bee3f8,
+      3: #90cdf4,
+      4: #63b3ed,
+      5: #4299e1,
+      6: #3182ce,
+      7: #2b6cb0,
+      8: #2c5282,
+      9: #2a4365,
+    ),
+    purple: (
+      1: #faf5ff,
+      2: #e9d8fd,
+      3: #d6bcfa,
+      4: #b794f4,
+      5: #9f7aea,
+      6: #805ad5,
+      7: #6b46c1,
+      8: #553c9a,
+      9: #44337a,
+    ),
+  ),
+);
+
+/*
+ * RESOLVED VARIABLES USED IN ./theme.scss
+ * deep merge of defaults and consumer config
+ * $sl-variables should never be called outside of ./theme.scss
+ */
+$sl-variables: map-extend($sl-defaults, $sl-config, true);

package/styles/components/Code/_base.scss

@@ -0,0 +1,148 @@
+@import 'theme-light';
+@import 'theme-dark';
+
+.#{$ns}-code-editor {
+  @include lightCodeTheme;
+
+  font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
+  background: var(--code-bg);
+  color: var(--code-fg);
+  counter-reset: line;
+  line-height: 1.5;
+  hyphens: none;
+  direction: ltr;
+
+  ::selection {
+    background: var(--code-selection-bg);
+  }
+
+  &.isInline {
+    margin: 0 2px;
+    border-radius: 2px;
+  }
+
+  .namespace {
+    opacity: 0.7;
+  }
+
+  &.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;
+    }
+  }
+
+  .line-number {
+    padding-left: 45px;
+    position: relative;
+    width: calc(100% - 45px);
+    display: block;
+
+    &::before {
+      counter-increment: line;
+      content: counter(line);
+      display: inline-block;
+      position: absolute;
+      left: 5px;
+      opacity: 0.4;
+      user-select: none;
+    }
+  }
+
+  .token {
+    &.important,
+    &.bold {
+      font-weight: bold;
+    }
+
+    &.italic {
+      font-style: italic;
+    }
+
+    &.entity {
+      cursor: help;
+    }
+  }
+
+  // Colors
+
+  .token {
+    &.punctuation,
+    &.hexcode {
+      color: var(--code-punctuation);
+    }
+
+    &.function,
+    &.operator {
+      color: var(--code-function);
+    }
+
+    &.atrule,
+    &.keyword {
+      color: var(--code-keyword);
+
+      > .token.property,
+      > .token.property + .token.punctuation,
+      > .token.property + .token.punctuation + .token.number + .token.unit,
+      > .token.number,
+      > .token.unit {
+        color: var(--code-keyword);
+      }
+    }
+
+    &.attr-value,
+    &.string {
+      color: var(--code-value);
+    }
+
+    &.unit,
+    &.symbol,
+    &.url,
+    &.property-line {
+      color: var(--code-primary);
+    }
+
+    &.tag &.deleted {
+      color: var(--code-tag);
+    }
+
+    &.comment,
+    &.prolog,
+    &.doctype,
+    &.cdata {
+      color: var(--code-comment);
+    }
+
+    &.property,
+    &.attr-name,
+    &.char,
+    &.builtin,
+    &.inserted,
+    &.entity {
+      color: var(--code-secondary);
+    }
+
+    &.number,
+    &.selector {
+      color: var(--code-selector);
+    }
+
+    &.rule,
+    &.regex,
+    &.variable {
+      color: var(--code-rule);
+    }
+
+    &.important {
+      color: var(--code-important);
+    }
+
+    &.boolean {
+      color: var(--code-boolean);
+    }
+  }
+
+  .#{$ns}-dark & {
+    @include darkCodeTheme;
+  }
+}

package/styles/components/Code/_theme-dark.scss

@@ -0,0 +1,17 @@
+@mixin darkCodeTheme {
+  --code-bg: #2D3748;
+  --code-fg: #edf2f7;
+  --code-selection-bg: yellow;
+  --code-primary: #ff8383;
+  --code-secondary: #ffe484;
+  --code-keyword: #fff;
+  --code-value: #b5f4a5;
+  --code-punc: #93ddfd;
+  --code-function: #93ddfd;
+  --code-selector: #93ddfd;
+  --code-comment: #a0aec0;
+  --code-rule: #d9a9ff;
+  --code-tag: #ff8383;
+  --code-important: #d9a9ff;
+  --code-boolean: #ff8383;
+}

package/styles/components/Code/_theme-light.scss

@@ -0,0 +1,17 @@
+@mixin lightCodeTheme {
+  --code-bg: transparent;
+  --code-fg: #393A34;
+  --code-selection-bg: #C1DEF1;
+  --code-primary: #36acaa;
+  --code-secondary: #e45649;
+  --code-keyword: #a626a4;
+  --code-value: #50a14f;
+  --code-punc: #a626a4;
+  --code-function: #4078f2;
+  --code-selector: #00009f;
+  --code-comment: #008000;
+  --code-rule: #e45649;
+  --code-tag: #9a050f;
+  --code-important: #e45649;
+  --code-boolean: #986801;
+}

package/styles/components/Dialog/_base.scss

@@ -0,0 +1,9 @@
+.bp3-dialog {
+  padding: 0;
+}
+
+.bp3-dialog-header {
+  min-height: 50px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}

package/styles/components/Dropdown/_base.scss

@@ -0,0 +1,12 @@
+.Dropdown {
+  &__popover {
+    .#{$ns}-popover-content {
+      padding: 0;
+    }
+  }
+
+  &__select {
+    padding: 0 !important;
+    overflow: hidden !important;
+  }
+}

package/styles/components/FormGroup/_base.scss

@@ -0,0 +1,5 @@
+.#{$ns}-form-group {
+  .label.#{$ns}-label {
+    padding-left: 3px;
+  }
+}

package/styles/components/ScrollContainer/_base.scss

@@ -0,0 +1,7 @@
+.#{$ns}-scroll-container {
+  -ms-overflow-style: none; /* IE 11 */
+  scrollbar-width: none; /* Firefox 64+ */
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+  }
+}

package/styles/components/SimpleTabs/_base.scss

@@ -0,0 +1,115 @@
+@import '../../blueprint/variables';
+
+.#{$ns}-simple-tab {
+  display: inline-block;
+  bottom: -1px;
+  position: relative;
+  list-style: none;
+  cursor: pointer;
+  padding: 7px 15px;
+  z-index: 2;
+  font-weight: get-font-weight(medium);
+  border-width: 1px;
+  margin-left: -1px;
+
+  &.selected-tab {
+    cursor: default;
+  }
+
+  &:first-of-type {
+    border-top-left-radius: get-border-radius(default);
+    margin-left: 0;
+  }
+
+  &:last-of-type {
+    border-top-right-radius: get-border-radius(default);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &.disabled-tab {
+    cursor: not-allowed;
+    opacity: 0.65;
+  }
+}
+
+.#{$ns}-simple-tab-list {
+  margin: 0px;
+  padding: 0px;
+  user-select: none;
+}
+
+.#{$ns}-simple-tab-panel {
+  border-width: 1px;
+  display: none;
+  border-radius: get-border-radius(default);
+  border-top-left-radius: 0px;
+
+  &#react-tabs-1 {
+    border-top-left-radius: 0px;
+  }
+}
+
+// colors
+.#{$ns}-simple-tab {
+  color: get-color(gray, 5);
+  background-color: get-color(gray, 1);
+
+  &.selected-tab {
+    color: get-color(gray, 6);
+    border-bottom-color: get-color(white);
+    background-color: get-color(white);
+
+    &:hover {
+      color: get-color(gray, 6);
+    }
+  }
+
+  &:hover {
+    color: get-color(black);
+  }
+
+  &.disabled-tab {
+    &:hover {
+      color: get-color(gray, 5);
+    }
+  }
+
+  &.#{$ns}-dark,
+  .#{$ns}-dark & {
+    color: get-color(gray, 5);
+    background-color: get-color(gray, 8);
+    border-color: rgba(16, 22, 26, 0.4);
+
+    &.selected-tab {
+      color: white;
+      background-color: get-color(darkgray, 4);
+      border-bottom-color: get-color(darkgray, 4);
+
+      &:hover {
+        color: white;
+      }
+    }
+
+    &:hover {
+      color: get-color(gray, 3);
+    }
+
+    &.disabled-tab {
+      &:hover {
+        color: get-color(gray, 5);
+      }
+    }
+  }
+}
+
+.bp3-simple-tab-panel {
+  background-color: white;
+
+  .#{$ns}-dark & {
+    background-color: get-color(darkgray, 4);
+    border-color: rgba(16, 22, 26, 0.4);
+  }
+}

package/styles/components/TableOfContents/_base.scss

@@ -0,0 +1,55 @@
+$TableOfContentsWidth: 300px;
+
+.TableOfContentsSkeleton,
+.TableOfContents {
+  min-width: $TableOfContentsWidth + 20;
+}
+
+.TableOfContentsSkeleton__inner,
+.TableOfContents__inner {
+  width: 300px;
+}
+
+.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;
+    }
+  }
+}

package/styles/components/_base.scss

@@ -0,0 +1,7 @@
+@import './Code/base';
+@import './Dialog/base';
+@import './Dropdown/base';
+@import './ScrollContainer/base';
+@import './SimpleTabs/base';
+@import './FormGroup/base';
+@import './TableOfContents/base';