@stoplight/ui-kit 3.0.0-beta.9 → 3.0.0

package/src/styles/common/_css-variables.scss

@@ -0,0 +1,41 @@
+// NOT included with _variables.scss, because that is imported many times. OK because that file is scss variables, not
+// ok for this file, since that would result in a bunch of duplicate CSS in final bundle.
+
+:root {
+  --color-body: #{get-color(black)};
+  --color-contrast-higher: #{get-color(gray, 9)};
+  --color-contrast-high: #{get-color(gray, 8)};
+  --color-contrast-low: #{get-color(gray, 6)};
+  --color-link: #{get-color(blue, 6)};
+
+  --gutter-bg: #{get-color(black)};
+  --gutter-fg: #{get-color(gray, 1)};
+
+  --sidebar-bg: #{get-color(gray, 1)};
+  --sidebar-fg: #{get-color(gray, 9)};
+  --sidebar-border: #{get-color(gray, 3)};
+
+  --editor-bg: #{get-color(white)};
+  --editor-fg: #{get-color(black)};
+  --editor-border: #{get-color(gray, 3)};
+}
+
+[data-theme='dark'],
+.bp3-dark {
+  --color-body: #{get-color(white)};
+  --color-contrast-higher: #{get-color(gray, 1)};
+  --color-contrast-high: #{get-color(gray, 3)};
+  --color-contrast-low: #{get-color(gray, 4)};
+  --color-link: #{get-color(blue, 2)};
+
+  --gutter-bg: #{get-color(black)};
+  --gutter-fg: #{get-color(gray, 1)};
+
+  --sidebar-bg: #{get-color(gray, 9)};
+  --sidebar-fg: #{get-color(gray, 1)};
+  --sidebar-border: #{get-color(black)};
+
+  --editor-bg: #{get-color(gray, 8)};
+  --editor-fg: #{get-color(white)};
+  --editor-border: #{get-color(gray, 9)};
+}

package/src/styles/common/_theme.scss

@@ -0,0 +1,143 @@
+@import './variables';
+
+/*
+ * NAMESPACE
+ * if updated process.env.BLUEPRINT_NAMESPACE needs to be updated as well
+ * https://blueprintjs.com/docs/#core/classes.namespacing
+ */
+$ns: map-deep-get($sl-variables, namespace) !default;
+
+/*
+ * THEME
+ * accessible to all component scss through importing ./utils then using get-theme(colors, lighten, 1) or other helpers
+ * any value we want overwritable by the consumer needs to be an external variable defined in ./_variables $sl-defaults then referenced here
+ * this file should never be imported directly outside of ./utils
+ */
+
+$sl-theme: (
+  namespace: map-deep-get($sl-variables, namespace),
+  colors: map-deep-get($sl-variables, colors),
+  fontSize: (
+    xs: 9px,
+    sm: 11px,
+    base: 13px,
+    lg: 16px,
+    xl: 18px,
+    2xl: 22px,
+    3xl: 26px,
+    4xl: 32px,
+    5xl: 40px,
+    6xl: 50px,
+  ),
+  borderRadius: (
+    none: 0,
+    sm: 1px,
+    default: 3px,
+    lg: 5px,
+    full: 9999px,
+  ),
+  boxShadow: (
+    default: 0px 1px 2px rgba(0, 0, 0, 0.3),
+    md: 0px 4px 4px rgba(0, 0, 0, 0.5),
+    lg: 0px 5px 5px rgba(0, 0, 0, 0.6),
+    inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06),
+    outline: 0 0 0 3px rgba(66, 153, 225, 0.5),
+    none: none,
+  ),
+  fontFamily: (
+    sans: (
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Arial,
+      'Noto Sans',
+      "Icons16", // support inline Palantir icons
+      sans-serif,
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Noto Color Emoji',
+    ),
+    serif: (
+      Georgia,
+      Cambria,
+      'Times New Roman',
+      Times,
+      serif,
+    ),
+    mono: (
+      Menlo,
+      Monaco,
+      Consolas,
+      'Liberation Mono',
+      'Courier New',
+      monospace,
+    ),
+  ),
+  fontWeight: (
+    hairline: 100,
+    thin: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900,
+  ),
+);
+
+// extend theme with extraneous things passed into $sl-variables
+// examples include new variables defined by the consumer
+@each $key, $value in $sl-variables {
+  @if not map-has-key($sl-theme, $key) {
+    $sl-theme: map-extend(
+      $sl-theme,
+      (
+        $key: $value,
+      )
+    );
+  }
+}
+
+/*
+ * UTILITIES
+ * some helpful functions to access the theme
+ */
+
+// returns the value at this theme path
+@function get-theme($keys...) {
+  @return map-deep-get($sl-theme, $keys...);
+}
+
+// returns color at this path from theme
+@function get-color($keys...) {
+  @return map-deep-get($sl-theme, colors, $keys...);
+}
+
+// returns fontSize at this path from theme
+@function get-font-size($keys...) {
+  @return map-deep-get($sl-theme, fontSize, $keys...);
+}
+
+// returns borderRadius at this path from theme
+@function get-border-radius($keys...) {
+  @return map-deep-get($sl-theme, borderRadius, $keys...);
+}
+
+// returns boxShadow at this path from theme
+@function get-box-shadow($keys...) {
+  @return map-deep-get($sl-theme, boxShadow, $keys...);
+}
+
+// returns fontFamily at this path from theme
+@function get-font-family($keys...) {
+  @return map-deep-get($sl-theme, fontFamily, $keys...);
+}
+
+// returns fontWeight at this path from theme
+@function get-font-weight($keys...) {
+  @return map-deep-get($sl-theme, fontWeight, $keys...);
+}

package/src/styles/common/_utils.scss

@@ -0,0 +1,58 @@
+/*
+ * HELPER FUNCTIONS
+ * some useful map functions with safe gaurds
+ * https://www.sitepoint.com/extra-map-functions-sass/
+ */
+
+// adds a safe gaurd in case map is not a map
+@function map-safe-get($map: (), $key: '""') {
+  @return if(type-of($map) == map, map-get($map, $key), '');
+}
+
+// loops through and returns the value the key list path or the default
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map-safe-get($map, $key);
+  }
+
+  @return $map;
+}
+
+// like merge but is not losey and allows deep merging
+@function map-extend($map, $maps... /*, $deep */) {
+  $last: nth($maps, -1);
+  $deep: $last == true;
+  $max: if($deep, length($maps) - 1, length($maps));
+
+  // Loop through all maps in $maps...
+  @for $i from 1 through $max {
+    // Store current map
+    $current: nth($maps, $i);
+
+    // If not in deep mode, simply merge current map with map
+    @if not $deep {
+      $map: map-merge($map, $current);
+    } @else {
+      // If in deep mode, loop through all tuples in current map
+      @each $key, $value in $current {
+        @if length($value) > 0 {
+          // If value is a nested map and same key from map is a nested map as well
+          @if type-of($value) == 'map' and type-of(map-get($map, $key)) == 'map' {
+            // Recursive extend
+            $value: map-extend(map-get($map, $key), $value, true);
+          }
+
+          // Merge current tuple with map
+          $map: map-merge(
+            $map,
+            (
+              $key: $value,
+            )
+          );
+        }
+      }
+    }
+  }
+
+  @return $map;
+}

package/src/styles/common/_variables.scss

@@ -0,0 +1,117 @@
+@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: #ebf1f5,
+      2: #d8e1e8,
+      3: #ced9e0,
+      4: #a7b6c2,
+      5: #738694,
+      6: #394b59,
+      7: #293742,
+      8: #202b33,
+      9: #182026,
+    ),
+    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: #d4effd,
+      2: #92cbec,
+      3: #42adf0,
+      4: #2998e7,
+      5: #008eff,
+      6: #0b6fcc,
+      7: #0e59aa,
+      8: #17447c,
+      9: #0e305f,
+    ),
+    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/src/styles/components/Code/_base.scss

@@ -0,0 +1,252 @@
+@import 'theme-light';
+@import 'theme-dark';
+@import '../../blueprint/colors.scss';
+
+$line-number-char-width: 10px;
+$line-padding-left: 10px;
+
+@keyframes set-color {
+  0% {
+    color: inherit;
+  }
+}
+
+
+.CodeEditor,
+.CodeViewer {
+  @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;
+
+  .#{$ns}-dark &,
+  [data-theme="dark"] & {
+    @include darkCodeTheme;
+  }
+
+  &::selection,
+  ::selection {
+    background: var(--code-selection-bg);
+  }
+
+  &--inline {
+    margin: 0 2px;
+    border-radius: 2px;
+  }
+
+  &--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;
+      }
+    }
+  }
+
+  &--error {
+    outline: 1px solid $pt-intent-danger;
+  }
+
+  &--warning {
+    outline: 1px solid $pt-intent-warning;
+  }
+
+  // Tokens
+  .token {
+    &.important,
+    &.bold {
+      font-weight: bold;
+    }
+
+    &.italic {
+      font-style: italic;
+    }
+
+    &.entity {
+      cursor: help;
+    }
+
+    .namespace {
+      color: var(--code-namespace);
+    }
+
+    &.hexcode,
+    &.selector {
+      color: var(--code-selector);
+    }
+
+    &.punctuation {
+      color: var(--code-punctuation);
+    }
+
+    &.function,
+    &.builtin {
+      color: var(--code-function);
+    }
+
+    &.char,
+    &.constant {
+      color: var(--code-constant);
+    }
+
+    &.operator {
+      color: var(--code-operator);
+    }
+
+    &.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 {
+      color: var(--code-value);
+    }
+
+    &.string {
+      color: var(--code-string);
+    }
+
+    &.unit,
+    &.symbol,
+    &.property-line {
+      color: var(--code-symbol);
+    }
+
+    &.url {
+      color: var(--code-url);
+    }
+
+    &.tag,
+    &.deleted {
+      color: var(--code-tag);
+    }
+
+    &.comment,
+    &.prolog,
+    &.cdata {
+      color: var(--code-comment);
+      font-style: italic;
+    }
+
+    &.doctype {
+      color: var(--code-doctype);
+      font-style: italic;
+    }
+
+    &.property,
+    &.attr-name,
+    &.atrule,
+    &.key,
+    &.inserted {
+      color: var(--code-property);
+    }
+
+    &.entity,
+    &.class-name {
+      color: var(--code-entity);
+    }
+
+    &.number {
+      color: var(--code-number);
+    }
+
+    &.rule,
+    &.regex,
+    &.variable {
+      color: var(--code-variable);
+    }
+
+    &.important {
+      color: var(--code-important);
+    }
+
+    &.boolean {
+      color: var(--code-boolean);
+    }
+  }
+}
+
+.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/src/styles/components/Code/_theme-dark.scss

@@ -0,0 +1,35 @@
+@mixin darkCodeTheme {
+  --code-bg: rgb(41, 55, 66); // bg-gray-7
+  --code-fg: #edf2f7;
+
+  --code-selection-bg: rgba(255, 255, 255, 0.2);
+
+  --code-symbol: rgb(247, 140, 108);
+  --code-number: rgb(247, 140, 108);
+
+  --code-value: rgb(80, 250, 123);
+  --code-function: rgb(80, 250, 123);
+  --code-constant: rgb(80, 250, 123);
+
+  --code-string: rgb(238, 252, 122);
+
+  --code-operator: rgb(137, 221, 255);
+  --code-property: rgb(137, 221, 255);
+  --code-entity: rgb(137, 221, 255);
+
+  --code-keyword: rgb(199, 146, 234);
+  --code-selector: rgb(199, 146, 234);
+  --code-doctype: rgb(199, 146, 234);
+  --code-important: rgb(199, 146, 234);
+
+  --code-punctuation: inherit;
+
+  --code-comment: rgb(133, 138, 168);
+
+  --code-tag: rgb(255, 88, 116);
+  --code-boolean: rgb(198, 143, 255);
+
+  --code-variable: rgb(191, 199, 213);
+  --code-namespace: rgb(178, 204, 214);
+  --code-url: rgb(221, 221, 221);
+}

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

@@ -0,0 +1,35 @@
+@mixin lightCodeTheme {
+  --code-bg: transparent;
+  --code-fg: #393A34;
+
+  --code-selection-bg: #C1DEF1;
+
+  --code-symbol: rgb(170, 9, 130);
+  --code-number: #50a14f;
+
+  --code-value: rgb(72, 118, 214);
+  --code-function: rgb(215, 58, 73);
+  --code-constant: rgb(44, 44, 44);
+
+  --code-string: rgb(215, 58, 73);
+
+  --code-operator: rgb(0, 0, 159);
+  --code-property: rgb(0, 80, 171);
+  --code-entity: rgb(17, 17, 17);
+
+  --code-keyword: rgb(0, 0, 159);
+  --code-selector: rgb(215, 58, 73);
+  --code-doctype: rgb(215, 58, 73);
+  --code-important: rgb(215, 58, 73);
+
+  --code-punctuation: inherit;
+
+  --code-comment: rgb(152, 159, 177);
+
+  --code-tag: rgb(0, 0, 159);
+  --code-boolean: rgb(34, 0, 255);
+
+  --code-variable: rgb(201, 103, 101);
+  --code-namespace: rgb(0, 0, 159);
+  --code-url: inherit;
+}

package/src/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/src/styles/components/Dropdown/_base.scss

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

package/src/styles/components/FormGroup/_base.scss

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