@stoplight/ui-kit 3.0.1 → 3.0.3

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

@@ -1,41 +0,0 @@
-// 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

@@ -1,143 +0,0 @@
-@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

@@ -1,58 +0,0 @@
-/*
- * 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

@@ -1,117 +0,0 @@
-@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

@@ -1,252 +0,0 @@
-@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

@@ -1,35 +0,0 @@
-@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

@@ -1,35 +0,0 @@
-@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

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

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

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

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

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