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

package/styles/blueprint/src/common/_flex.scss

@@ -0,0 +1,49 @@
+// Copyright 2018 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+// this element becomes a flex container in the given direction.
+// supply `$margin` to put space between each child.
+// supply `$inline: inline` to use `display: flex-inline`.
+// customize `flex: 1 1` child selector with $fill.
+@mixin pt-flex-container($direction: row, $margin: none, $inline: none, $fill: ".#{$ns}-fill") {
+  @if $inline == inline or $inline == true {
+    display: inline-flex;
+  } @else {
+    display: flex;
+  }
+  flex-direction: $direction;
+
+  > * {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  > #{$fill} {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  @if $margin != none {
+    @include pt-flex-margin($direction, $margin);
+  }
+}
+
+// applies margin along axis of direction between every direct child, with no margins on either end.
+// $direction: row | column
+// $margin: margin[-right|-bottom] value
+@mixin pt-flex-margin($direction, $margin) {
+  $margin-prop: if($direction == row, margin-right, margin-bottom);
+
+  // CSS API support
+  &::before,
+  > * {
+    // space after all children
+    #{$margin-prop}: $margin;
+  }
+
+  // remove space after last child
+  &:empty::before,
+  > :last-child {
+    #{$margin-prop}: 0;
+  }
+}

package/styles/blueprint/src/common/_mixins.scss

@@ -0,0 +1,128 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@use "sass:math";
+
+@import "colors";
+@import "flex";
+
+$pt-intent-colors: (
+  "primary": $pt-intent-primary,
+  "success": $pt-intent-success,
+  "warning": $pt-intent-warning,
+  "danger" : $pt-intent-danger,
+) !default;
+
+$pt-intent-text-colors: (
+  "primary": $blue2,
+  "success": $green2,
+  "warning": $orange2,
+  "danger" : $red2,
+) !default;
+
+$pt-dark-intent-text-colors: (
+  "primary": $blue5,
+  "success": $green5,
+  "warning": $orange5,
+  "danger" : $red5,
+) !default;
+
+@mixin intent-color($intentName) {
+  color: map-get($pt-intent-colors, $intentName);
+}
+
+@mixin position-all($position, $value) {
+  bottom: $value;
+  left: $value;
+  position: $position;
+  right: $value;
+  top: $value;
+}
+
+@mixin base-typography() {
+  font-size: $pt-font-size;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: $pt-line-height;
+  text-transform: none;
+}
+
+@mixin running-typography() {
+  font-size: $pt-font-size;
+  line-height: 1.5;
+}
+
+@mixin heading-typography() {
+  color: $pt-heading-color;
+  font-weight: 600;
+
+  .#{$ns}-dark & {
+    color: $pt-dark-heading-color;
+  }
+}
+
+@mixin monospace-typography() {
+  font-family: $pt-font-family-monospace;
+  text-transform: none;
+}
+
+@mixin overflow-ellipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+
+@mixin focus-outline($offset: 2px) {
+  outline: $pt-outline-color auto 2px;
+  outline-offset: $offset;
+  -moz-outline-radius: 6px;
+}
+
+@function border-shadow($alpha, $color: $black, $size: 1px) {
+  @return 0 0 0 $size rgba($color, $alpha);
+}
+
+// returns the padding necessary to center text in a container of the given height.
+// default line-height is that of base typography, 18px assuming 14px font-size.
+@function centered-text($height, $line-height: floor($pt-font-size * $pt-line-height)) {
+  @return floor(($height - $line-height) * 0.5);
+}
+
+// Removes the unit from a Sass numeric value (if present): `strip-unit(12px) => 12`
+// @see https://css-tricks.com/snippets/sass/strip-unit-function/
+@function strip-unit($number) {
+  @if type-of($number) == "number" and not unitless($number) {
+    @return math.div($number, $number * 0 + 1);
+  }
+
+  @return $number;
+}
+
+@mixin force-hardware-acceleration() {
+  // CSS animations are typically smoother when they run on the GPU. most browsers trigger GPU
+  // ("hardware") acceleration automatically when certain CSS rules are applied (like `transform`).
+  //
+  // the transform rule below has no visual effect, but it achieves the following:
+  //   - creates a new stacking context
+  //   - creates a new containing block for fixed-position descendants
+  //   - "tricks" the browser into using hardware acceleration
+  //
+  // `will-change: transform` does the same thing, but it suffers from a Chrome bug that could make
+  // the styled element blurry when transform'd (e.g. this happens when a Blueprint Table is in a
+  // Popover that animates open). we should move to `will-change` and delete this mixin once that
+  // bug is fixed (tracking in issue #859).
+  //
+  // see the following YouTube video and Chrome bug report for more:
+  //   - https://www.youtube.com/watch?v=iSvUlSpIbNk
+  //   - https://bugs.chromium.org/p/chromium/issues/detail?id=596382
+  //
+  // see this post for more on will-change: https://dev.opera.com/articles/css-will-change-property/
+  transform: translateZ(0);
+  // will-change: transform;
+}
+
+@mixin new-render-layer() {
+  // a semantic rename of the mixin above for when you just want to isolate z-indices
+  @include force-hardware-acceleration();
+}

package/styles/blueprint/src/common/_react-transition.scss

@@ -0,0 +1,117 @@
+// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+/*
+A mixin to generate the classes for a React CSSTransition which animates any number of CSS
+properties at once.
+
+Transitioned properties are specificed as a map of property names to lists of (inital value, final
+value). For enter & appear transitions, each property will transition from its initial to its final
+value. For exit transitions, each property will transition in reverse, from final to initial.
+
+**Simple example:**
+`@include react-transition("popover", (opacity: 0 1), $before: "&");`
+Transition named "popover" moves opacity from 0 to 1. `"&"` indicates that the
+Transition classes are expected to be applied to this element, where the mixin is invoked.
+
+**Params:**
+$name: React transitionName prop
+$properties: map of CSS property to (initial, final) values
+$duration: transition duration
+$easing: transition easing function
+$delay: transition delay
+$before: selector text to insert before transition name (often to select self: &)
+$after: selector text to insert after transiton name (to select children)
+*/
+@mixin react-transition(
+  $name,
+  $properties,
+  $duration: $pt-transition-duration,
+  $easing: $pt-transition-ease,
+  $delay: 0,
+  $before: "",
+  $after: ""
+) {
+  @include each-prop($properties, 2);
+  @include react-transition-phase(
+    $name, "enter", $properties,
+    $duration, $easing, $delay,
+    $before, $after
+  );
+  @include react-transition-phase(
+    $name, "exit", $properties,
+    $duration, $easing, $delay,
+    $before, $after
+  );
+}
+
+/*
+A mixin to generate the classes for one phase of a React CSSTransition.
+`$phase` must be `appear` or `enter` or `exit`.
+If `enter` phase is given then `appear` phase will be generated at the same time.
+If `exit` phase is given then property values are animated in reverse, from final to initial.
+
+**Example:**
+@include react-transition-phase(toast, enter, $enter-translate, $before: "&");
+@include react-transition-phase(toast, leave, $leave-blur, $pt-transition-duration * 3, $before: "&");
+*/
+@mixin react-transition-phase(
+  $name,
+  $phase,
+  $properties,
+  $duration: $pt-transition-duration,
+  $easing: $pt-transition-ease,
+  $delay: 0,
+  $before: "",
+  $after: ""
+) {
+  $start-index: 1;
+  $end-index: 2;
+
+  @if ($phase == "exit") {
+    $start-index: 2;
+    $end-index: 1;
+  } @else if ($phase != "enter" and $phase != "appear") {
+    @error "Unknown transition phase: #{$phase}. Expected appear|enter|exit.";
+  }
+
+  #{transition-name($phase, $name, $before, $after)} {
+    @include each-prop($properties, $start-index);
+  }
+
+  #{transition-name(#{$phase}-active, $name, $before, $after)} {
+    @include each-prop($properties, $end-index);
+    transition-delay: $delay;
+    transition-duration: $duration;
+    transition-property: map-keys($properties);
+    transition-timing-function: $easing;
+  }
+}
+
+/*
+Given map of properties to values, set each property to the value at the given index.
+(remember that sass indices are 1-based).
+
+Example: `each-prop((opacity: 0 1), 2)` will print "opacity: 1"
+*/
+@mixin each-prop($properties, $index) {
+  @each $prop, $values in $properties {
+    #{$prop}: nth($values, $index);
+  }
+}
+
+/*
+Format transition class name with all the bits.
+"enter" phase will include "appear" phase in returned name.
+*/
+@function transition-name($phase, $name, $before, $after) {
+  $full-name: "#{$before}.#{$name}-#{$phase}#{$after}";
+
+  @if ($phase == "enter") {
+    @return ($full-name, transition-name("appear", $name, $before, $after));
+  } @else if ($phase == "enter-active") {
+    @return ($full-name, transition-name("appear-active", $name, $before, $after));
+  } @else {
+    @return $full-name;
+  }
+}

package/styles/blueprint/src/common/_variables.scss

@@ -0,0 +1,131 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@use "sass:math";
+
+@import "colors";
+@import "mixins";
+
+// Namespace appended to the beginning of each CSS class: `.#{$ns}-button`.
+// Do not quote this value, for Less consumers.
+$ns: bp3 !default;
+
+// easily the most important variable, so it comes up top
+// (so other variables can use it to define themselves)
+$pt-grid-size: 10px !default;
+
+// see https://bitsofco.de/the-new-system-font-stack/
+$pt-font-family: -apple-system,
+                 "BlinkMacSystemFont",
+                 "Segoe UI",
+                 "Roboto",
+                 "Oxygen",
+                 "Ubuntu",
+                 "Cantarell",
+                 "Open Sans",
+                 "Helvetica Neue",
+                 "Icons16", // support inline Palantir icons
+                 sans-serif !default;
+
+$pt-font-family-monospace: monospace !default;
+
+$pt-font-size: $pt-grid-size * 1.4 !default;
+$pt-font-size-large: $pt-grid-size * 1.6 !default;
+$pt-font-size-small: $pt-grid-size * 1.2 !default;
+
+// a little bit extra to ensure the height comes out to just over 18px (and browser rounds to 18px)
+$pt-line-height: math.div($pt-grid-size * 1.8, $pt-font-size) + 0.0001 !default;
+
+// Icon variables
+
+$icons16-family: "Icons16" !default;
+$icons20-family: "Icons20" !default;
+
+$pt-icon-size-standard: 16px !default;
+$pt-icon-size-large: 20px !default;
+
+// Grids & dimensions
+
+$pt-border-radius: floor(math.div($pt-grid-size, 3)) !default;
+
+// Buttons
+$pt-button-height: $pt-grid-size * 3 !default;
+$pt-button-height-small: $pt-grid-size * 2.4 !default;
+$pt-button-height-smaller: $pt-grid-size * 2 !default;
+$pt-button-height-large: $pt-grid-size * 4 !default;
+
+// Inputs
+$pt-input-height: $pt-grid-size * 3 !default;
+$pt-input-height-large: $pt-grid-size * 4 !default;
+$pt-input-height-small: $pt-grid-size * 2.4 !default;
+
+// Others
+$pt-navbar-height: $pt-grid-size * 5 !default;
+
+// Z-indices
+$pt-z-index-base: 0 !default;
+$pt-z-index-content: $pt-z-index-base + 10 !default;
+$pt-z-index-overlay: $pt-z-index-content + 10 !default;
+
+// Shadow opacities
+$pt-border-shadow-opacity: 0.1 !default;
+$pt-drop-shadow-opacity: 0.2 !default;
+$pt-dark-border-shadow-opacity: $pt-border-shadow-opacity * 2 !default;
+$pt-dark-drop-shadow-opacity: $pt-drop-shadow-opacity * 2 !default;
+
+// Elevations
+// all shadow lists must be the same length to avoid flicker in transitions.
+$pt-elevation-shadow-0: 0 0 0 1px $pt-divider-black,
+                        0 0 0 rgba($black, 0),
+                        0 0 0 rgba($black, 0) !default;
+$pt-elevation-shadow-1: border-shadow($pt-border-shadow-opacity),
+                        0 0 0 rgba($black, 0),
+                        0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;
+$pt-elevation-shadow-2: border-shadow($pt-border-shadow-opacity),
+                        0 1px 1px rgba($black, $pt-drop-shadow-opacity),
+                        0 2px 6px rgba($black, $pt-drop-shadow-opacity) !default;
+$pt-elevation-shadow-3: border-shadow($pt-border-shadow-opacity),
+                        0 2px 4px rgba($black, $pt-drop-shadow-opacity),
+                        0 8px 24px rgba($black, $pt-drop-shadow-opacity) !default;
+$pt-elevation-shadow-4: border-shadow($pt-border-shadow-opacity),
+                        0 4px 8px rgba($black, $pt-drop-shadow-opacity),
+                        0 18px 46px 6px rgba($black, $pt-drop-shadow-opacity) !default;
+
+$pt-dark-elevation-shadow-0: 0 0 0 1px $pt-dark-divider-black,
+                             0 0 0 rgba($black, 0),
+                             0 0 0 rgba($black, 0) !default;
+$pt-dark-elevation-shadow-1: border-shadow($pt-dark-border-shadow-opacity),
+                             0 0 0 rgba($black, 0),
+                             0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity) !default;
+$pt-dark-elevation-shadow-2: border-shadow($pt-dark-border-shadow-opacity),
+                             0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity),
+                             0 2px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default;
+$pt-dark-elevation-shadow-3: border-shadow($pt-dark-border-shadow-opacity),
+                             0 2px 4px rgba($black, $pt-dark-drop-shadow-opacity),
+                             0 8px 24px rgba($black, $pt-dark-drop-shadow-opacity) !default;
+$pt-dark-elevation-shadow-4: border-shadow($pt-dark-border-shadow-opacity),
+                             0 4px 8px rgba($black, $pt-dark-drop-shadow-opacity),
+                             0 18px 46px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default;
+
+// Transitions
+$pt-transition-ease: cubic-bezier(0.4, 1, 0.75, 0.9) !default;
+$pt-transition-ease-bounce: cubic-bezier(0.54, 1.12, 0.38, 1.11) !default;
+$pt-transition-duration: 100ms !default;
+
+// Light theme styles
+
+$pt-input-box-shadow: inset border-shadow(0.15),
+                      inset 0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;
+
+$pt-dialog-box-shadow: $pt-elevation-shadow-4 !default;
+$pt-popover-box-shadow: $pt-elevation-shadow-3 !default;
+$pt-tooltip-box-shadow: $pt-popover-box-shadow !default;
+
+// Dark theme styles
+
+$pt-dark-input-box-shadow: inset border-shadow(0.3),
+                           inset 0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity) !default;
+
+$pt-dark-dialog-box-shadow: $pt-dark-elevation-shadow-4 !default;
+$pt-dark-popover-box-shadow: $pt-dark-elevation-shadow-3 !default;
+$pt-dark-tooltip-box-shadow: $pt-dark-popover-box-shadow !default;

package/styles/blueprint/src/components/_index.scss

@@ -0,0 +1,38 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "alert/alert";
+@import "breadcrumbs/breadcrumbs";
+@import "button/button";
+@import "button/button-group";
+@import "callout/callout";
+@import "card/card";
+@import "collapse/collapse";
+@import "context-menu/context-menu";
+@import "divider/divider";
+@import "dialog/dialog";
+@import "drawer/drawer";
+@import "editable-text/editable-text";
+@import "forms/index";
+@import "html-select/html-select";
+@import "html-table/html-table";
+@import "hotkeys/hotkeys";
+@import "icon/icon";
+@import "menu/menu";
+@import "navbar/navbar";
+@import "non-ideal-state/non-ideal-state";
+@import "overflow-list/overflow-list";
+@import "overlay/overlay";
+@import "panel-stack/panel-stack";
+@import "popover/popover";
+@import "portal/portal";
+@import "progress-bar/progress-bar";
+@import "skeleton/skeleton";
+@import "slider/slider";
+@import "spinner/spinner";
+@import "tabs/tabs";
+@import "tag/tag";
+@import "tag-input/tag-input";
+@import "toast/toast";
+@import "tooltip/tooltip";
+@import "tree/tree";

package/styles/blueprint/src/components/alert/_alert.scss

@@ -0,0 +1,33 @@
+// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+
+.#{$ns}-alert {
+  max-width: $pt-grid-size * 40;
+  padding: $pt-grid-size * 2;
+}
+
+.#{$ns}-alert-body {
+  display: flex;
+
+  .#{$ns}-icon {
+    font-size: $pt-icon-size-large * 2;
+    margin-right: $pt-grid-size * 2;
+    margin-top: 0;
+  }
+}
+
+.#{$ns}-alert-contents {
+  word-break: break-word;
+}
+
+.#{$ns}-alert-footer {
+  display: flex;
+  flex-direction: row-reverse;
+  margin-top: $pt-grid-size;
+
+  .#{$ns}-button {
+    margin-left: $pt-grid-size;
+  }
+}

package/styles/blueprint/src/components/breadcrumbs/_breadcrumbs.scss

@@ -0,0 +1,142 @@
+// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "~@blueprintjs/icons/src/icons";
+@import "../../common/variables";
+
+/*
+Breadcrumbs
+
+Markup:
+<ul class="#{$ns}-breadcrumbs">
+  <li><a class="#{$ns}-breadcrumbs-collapsed" href="#"></a></li>
+  <li><a class="#{$ns}-breadcrumb #{$ns}-disabled">Folder one</a></li>
+  <li><a class="#{$ns}-breadcrumb" href="#">Folder two</a></li>
+  <li><a class="#{$ns}-breadcrumb" href="#">Folder three</a></li>
+  <li><span class="#{$ns}-breadcrumb #{$ns}-breadcrumb-current">File</span></li>
+</ul>
+
+Styleguide breadcrumbs
+*/
+
+.#{$ns}-breadcrumbs {
+  align-items: center;
+  cursor: default;
+  display: flex;
+  flex-wrap: wrap;
+  height: $pt-input-height;
+  list-style: none;
+  // unstyled inline list reset
+  margin: 0;
+  padding: 0;
+
+  // descendant selector because nothing should come between ul and li
+  > li {
+    align-items: center;
+    display: flex;
+
+    &::after {
+      background: svg-icon("16px/chevron-right.svg", (path: (fill: $pt-icon-color)));
+      content: "";
+      display: block;
+      height: $pt-icon-size-standard;
+      margin: 0 ($pt-grid-size * 0.5);
+      width: $pt-icon-size-standard;
+    }
+
+    &:last-of-type::after {
+      display: none;
+    }
+  }
+}
+
+.#{$ns}-breadcrumb,
+.#{$ns}-breadcrumb-current,
+.#{$ns}-breadcrumbs-collapsed {
+  align-items: center;
+  display: inline-flex;
+  font-size: $pt-font-size-large;
+}
+
+.#{$ns}-breadcrumb,
+.#{$ns}-breadcrumbs-collapsed {
+  color: $pt-text-color-muted;
+}
+
+.#{$ns}-breadcrumb {
+  &:hover {
+    text-decoration: none;
+  }
+
+  &.#{$ns}-disabled {
+    color: $pt-text-color-disabled;
+    cursor: not-allowed;
+  }
+
+  .#{$ns}-icon {
+    margin-right: $pt-grid-size * 0.5;
+  }
+}
+
+.#{$ns}-breadcrumb-current {
+  color: inherit;
+  font-weight: 600;
+
+  .#{$ns}-input {
+    font-size: inherit;
+    font-weight: inherit;
+    vertical-align: baseline;
+  }
+}
+
+.#{$ns}-breadcrumbs-collapsed {
+  background: $light-gray1;
+  border: none;
+  border-radius: $pt-border-radius;
+  cursor: pointer;
+  margin-right: 2px;
+  padding: 1px ($pt-grid-size * 0.5);
+  vertical-align: text-bottom;
+
+  &::before {
+    background: svg-icon("16px/more.svg", (circle: (fill: $pt-icon-color))) center no-repeat;
+    content: "";
+    display: block;
+    height: $pt-icon-size-standard;
+    width: $pt-icon-size-standard;
+  }
+
+  &:hover {
+    background: $gray5;
+    color: $pt-text-color;
+    text-decoration: none;
+  }
+}
+
+.#{$ns}-dark {
+  .#{$ns}-breadcrumb,
+  .#{$ns}-breadcrumbs-collapsed {
+    color: $pt-dark-text-color-muted;
+  }
+
+  .#{$ns}-breadcrumbs > li::after {
+    color: $pt-dark-icon-color;
+  }
+
+  .#{$ns}-breadcrumb.#{$ns}-disabled {
+    color: $pt-dark-text-color-disabled;
+  }
+
+  .#{$ns}-breadcrumb-current {
+    color: $pt-dark-text-color;
+  }
+
+  .#{$ns}-breadcrumbs-collapsed {
+    background: rgba($black, 0.4);
+
+    &:hover {
+      background: rgba($black, 0.6);
+      color: $pt-dark-text-color;
+    }
+  }
+}