@stoplight/ui-kit 3.0.1 → 3.0.3

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

@@ -1,116 +0,0 @@
-// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
-// Licensed under the Apache License, Version 2.0.
-
-// Gray scale
-
-$black: #10161a !default;
-
-$dark-gray1: #182026 !default;
-$dark-gray2: #202b33 !default;
-$dark-gray3: #293742 !default;
-$dark-gray4: #30404d !default;
-$dark-gray5: #394b59 !default;
-
-$gray1: #5c7080 !default;
-$gray2: #738694 !default;
-$gray3: #8a9ba8 !default;
-$gray4: #a7b6c2 !default;
-$gray5: #bfccd6 !default;
-
-$light-gray1: #ced9e0 !default;
-$light-gray2: #d8e1e8 !default;
-$light-gray3: #e1e8ed !default;
-$light-gray4: #ebf1f5 !default;
-$light-gray5: #f5f8fa !default;
-
-$white: #ffffff !default;
-
-// Core colors
-
-$blue1: #0e5a8a !default;
-$blue2: #106ba3 !default;
-$blue3: #137cbd !default;
-$blue4: #2b95d6 !default;
-$blue5: #48aff0 !default;
-
-$green1: #0a6640 !default;
-$green2: #0d8050 !default;
-$green3: #0f9960 !default;
-$green4: #15b371 !default;
-$green5: #3dcc91 !default;
-
-$orange1: #a66321 !default;
-$orange2: #bf7326 !default;
-$orange3: #d9822b !default;
-$orange4: #f29d49 !default;
-$orange5: #ffb366 !default;
-
-$red1: #a82a2a !default;
-$red2: #c23030 !default;
-$red3: #db3737 !default;
-$red4: #f55656 !default;
-$red5: #ff7373 !default;
-
-// Extended colors
-
-$vermilion1: #9e2b0e !default;
-$vermilion2: #b83211 !default;
-$vermilion3: #d13913 !default;
-$vermilion4: #eb532d !default;
-$vermilion5: #ff6e4a !default;
-
-$rose1: #a82255 !default;
-$rose2: #c22762 !default;
-$rose3: #db2c6f !default;
-$rose4: #f5498b !default;
-$rose5: #ff66a1 !default;
-
-$violet1: #5c255c !default;
-$violet2: #752f75 !default;
-$violet3: #8f398f !default;
-$violet4: #a854a8 !default;
-$violet5: #c274c2 !default;
-
-$indigo1: #5642a6 !default;
-$indigo2: #634dbf !default;
-$indigo3: #7157d9 !default;
-$indigo4: #9179f2 !default;
-$indigo5: #ad99ff !default;
-
-$cobalt1: #1f4b99 !default;
-$cobalt2: #2458b3 !default;
-$cobalt3: #2965cc !default;
-$cobalt4: #4580e6 !default;
-$cobalt5: #669eff !default;
-
-$turquoise1: #008075 !default;
-$turquoise2: #00998c !default;
-$turquoise3: #00b3a4 !default;
-$turquoise4: #14ccbd !default;
-$turquoise5: #2ee6d6 !default;
-
-$forest1: #1d7324 !default;
-$forest2: #238c2c !default;
-$forest3: #29a634 !default;
-$forest4: #43bf4d !default;
-$forest5: #62d96b !default;
-
-$lime1: #728c23 !default;
-$lime2: #87a629 !default;
-$lime3: #9bbf30 !default;
-$lime4: #b6d94c !default;
-$lime5: #d1f26d !default;
-
-$gold1: #a67908 !default;
-$gold2: #bf8c0a !default;
-$gold3: #d99e0b !default;
-$gold4: #f2b824 !default;
-$gold5: #ffc940 !default;
-
-$sepia1: #63411e !default;
-$sepia2: #7d5125 !default;
-$sepia3: #96622d !default;
-$sepia4: #b07b46 !default;
-$sepia5: #c99765 !default;
-
-@import "color-aliases";

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

@@ -1,49 +0,0 @@
-// 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/src/styles/blueprint/src/common/_mixins.scss

@@ -1,128 +0,0 @@
-// 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/src/styles/blueprint/src/common/_react-transition.scss

@@ -1,117 +0,0 @@
-// 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/src/styles/blueprint/src/common/_variables.scss

@@ -1,131 +0,0 @@
-// 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/src/styles/blueprint/src/components/_index.scss

@@ -1,38 +0,0 @@
-// 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/src/styles/blueprint/src/components/alert/_alert.scss

@@ -1,33 +0,0 @@
-// 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;
-  }
-}