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

package/styles/blueprint/src/components/button/_common.scss

@@ -0,0 +1,507 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/mixins";
+@import "../../common/variables";
+@import "../progress-bar/common";
+
+$button-border-width: 1px !default;
+$button-padding: ($pt-grid-size * 0.5) $pt-grid-size !default;
+$button-padding-small: 0 ($pt-grid-size * 0.7) !default;
+$button-padding-large: ($pt-grid-size * 0.5) ($pt-grid-size * 1.5) !default;
+$button-icon-spacing: ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
+$button-icon-spacing-large: ($pt-button-height-large - $pt-icon-size-large) * 0.5 !default;
+
+/*
+CSS `border` property issues:
+- An element can only have one border.
+- Borders can't stack with shadows.
+- Borders modify the size of the element they're applied to.
+- Border positioning requires the extra `box-sizing` property.
+
+`box-shadow` doesn't have these issues, we're using it instead of `border`.
+*/
+$button-box-shadow:
+  inset 0 0 0 $button-border-width rgba($black, 0.2),
+  inset 0 (-$button-border-width) 0 rgba($black, 0.1) !default;
+$button-box-shadow-active:
+  inset 0 0 0 $button-border-width rgba($black, 0.2),
+  inset 0 1px 2px rgba($black, 0.2) !default;
+$button-intent-box-shadow:
+  inset 0 0 0 $button-border-width rgba($black, 0.4),
+  inset 0 (-$button-border-width) 0 rgba($black, 0.2) !default;
+$button-intent-box-shadow-active:
+  inset 0 0 0 $button-border-width rgba($black, 0.4),
+  inset 0 1px 2px rgba($black, 0.2) !default;
+
+/*
+Overlay shadows are used for default buttons
+floating on top of other elements. This way, the
+shadows blend with the colors beneath it.
+Switches and slider handles both use these variables.
+*/
+$button-box-shadow-overlay:
+  0 0 0 $button-border-width rgba($black, 0.2),
+  0 1px 1px rgba($black, 0.2) !default;
+$button-box-shadow-overlay-active:
+  0 0 0 $button-border-width rgba($black, 0.2),
+  inset 0 1px 1px rgba($black, 0.1) !default;
+
+$dark-button-box-shadow:
+  0 0 0 $button-border-width rgba($black, 0.4) !default;
+$dark-button-box-shadow-active:
+  0 0 0 $button-border-width rgba($black, 0.6),
+  inset 0 1px 2px rgba($black, 0.2) !default;
+$dark-button-intent-box-shadow:
+  0 0 0 $button-border-width rgba($black, 0.4) !default;
+$dark-button-intent-box-shadow-active:
+  0 0 0 $button-border-width rgba($black, 0.4),
+  inset 0 1px 2px rgba($black, 0.2) !default;
+
+$button-gradient: linear-gradient(to bottom, rgba($white, 0.8), rgba($white, 0)) !default;
+$button-intent-gradient: linear-gradient(to bottom, rgba($white, 0.1), rgba($white, 0)) !default;
+$dark-button-gradient: linear-gradient(to bottom, rgba($white, 0.05), rgba($white, 0)) !default;
+
+$button-color-disabled: $pt-text-color-disabled !default;
+$button-background-color: $light-gray5 !default;
+$button-background-color-hover: $light-gray4 !default;
+$button-background-color-active: $light-gray2 !default;
+$button-background-color-disabled: rgba($light-gray1, 0.5) !default;
+$button-background-color-active-disabled: rgba($light-gray1, 0.7) !default;
+$button-intent-color-disabled: rgba($white, 0.6);
+$dark-button-color-disabled: $pt-dark-text-color-disabled !default;
+$dark-button-background-color: $dark-gray5 !default;
+$dark-button-background-color-hover: $dark-gray4 !default;
+$dark-button-background-color-active: $dark-gray2 !default;
+$dark-button-background-color-disabled: rgba($dark-gray5, 0.5) !default;
+$dark-button-background-color-active-disabled: rgba($dark-gray5, 0.7) !default;
+$dark-button-intent-color-disabled: rgba($white, 0.3);
+
+$minimal-button-divider-width: 1px !default;
+$minimal-button-background-color: none !default;
+$minimal-button-background-color-hover: rgba($gray4, 0.3) !default;
+$minimal-button-background-color-active: rgba($gray2, 0.3) !default;
+$dark-minimal-button-background-color: none !default;
+$dark-minimal-button-background-color-hover: rgba($gray3, 0.15) !default;
+$dark-minimal-button-background-color-active: rgba($gray3, 0.3) !default;
+
+$button-outlined-width: 1px !default;
+$button-outlined-border-intent-opacity: 0.6 !default;
+$button-outlined-border-disabled-intent-opacity: 0.2 !default;
+
+// "intent": (default, hover, active colors)
+$button-intents: (
+  "primary": ($pt-intent-primary, $blue2, $blue1),
+  "success": ($pt-intent-success, $green2, $green1),
+  "warning": ($pt-intent-warning, $orange2, $orange1),
+  "danger": ($pt-intent-danger, $red2, $red1)
+) !default;
+
+@mixin pt-button-base() {
+  @include pt-flex-container(row, $button-icon-spacing, $inline: inline);
+  align-items: center;
+
+  border: none;
+  border-radius: $pt-border-radius;
+  cursor: pointer;
+  font-size: $pt-font-size;
+  justify-content: center;
+  padding: $button-padding;
+  text-align: left;
+  vertical-align: middle;
+}
+
+@mixin pt-button-height($height) {
+  min-height: $height;
+  min-width: $height;
+}
+
+@mixin pt-button-height-large() {
+  @include pt-button-height($pt-button-height-large);
+  @include pt-flex-margin(row, $button-icon-spacing-large);
+  font-size: $pt-font-size-large;
+  padding: $button-padding-large;
+}
+
+@mixin pt-button-height-default() {
+  @include pt-button-height($pt-button-height);
+  padding: $button-padding;
+}
+
+@mixin pt-button-height-small() {
+  @include pt-button-height($pt-button-height-small);
+  padding: $button-padding-small;
+}
+
+@mixin pt-button() {
+  background-color: $button-background-color;
+  background-image: $button-gradient;
+  box-shadow: $button-box-shadow;
+  color: $pt-text-color;
+
+  &:hover {
+    @include pt-button-hover();
+  }
+
+  &:active,
+  &.#{$ns}-active {
+    @include pt-button-active();
+  }
+
+  &:disabled,
+  &.#{$ns}-disabled {
+    @include pt-button-disabled();
+  }
+}
+
+@mixin pt-button-hover() {
+  background-clip: padding-box;
+  background-color: $button-background-color-hover;
+  box-shadow: $button-box-shadow;
+}
+
+@mixin pt-button-active() {
+  background-color: $button-background-color-active;
+  background-image: none;
+  box-shadow: $button-box-shadow-active;
+}
+
+@mixin pt-button-disabled() {
+  background-color: $button-background-color-disabled;
+  background-image: none;
+  box-shadow: none;
+  color: $button-color-disabled;
+  cursor: not-allowed;
+  outline: none;
+
+  &.#{$ns}-active,
+  &.#{$ns}-active:hover {
+    background: $button-background-color-active-disabled;
+  }
+}
+
+@mixin pt-button-intent($default-color, $hover-color, $active-color) {
+  background-color: $default-color;
+  background-image: $button-intent-gradient;
+  box-shadow: $button-intent-box-shadow;
+  color: $white;
+
+  &:hover,
+  &:active,
+  &.#{$ns}-active {
+    color: $white;
+  }
+
+  &:hover {
+    background-color: $hover-color;
+    box-shadow: $button-intent-box-shadow;
+  }
+
+  &:active,
+  &.#{$ns}-active {
+    background-color: $active-color;
+    background-image: none;
+    box-shadow: $button-intent-box-shadow-active;
+  }
+
+  &:disabled,
+  &.#{$ns}-disabled {
+    @include pt-button-intent-disabled($default-color);
+  }
+}
+
+@mixin pt-button-intent-disabled($default-color) {
+  background-color: rgba($default-color, 0.5);
+  background-image: none;
+  border-color: transparent;
+  box-shadow: none;
+  color: $button-intent-color-disabled;
+}
+
+@mixin pt-dark-button() {
+  background-color: $dark-button-background-color;
+  background-image: $dark-button-gradient;
+  box-shadow: $dark-button-box-shadow;
+  color: $pt-dark-text-color;
+
+  &:hover,
+  &:active,
+  &.#{$ns}-active {
+    color: $pt-dark-text-color;
+  }
+
+  &:hover {
+    @include pt-dark-button-hover();
+  }
+
+  &:active,
+  &.#{$ns}-active {
+    @include pt-dark-button-active();
+  }
+
+  &:disabled,
+  &.#{$ns}-disabled {
+    @include pt-dark-button-disabled();
+  }
+
+  .#{$ns}-button-spinner .#{$ns}-spinner-head {
+    background: $dark-progress-track-color;
+    stroke: $dark-progress-head-color;
+  }
+}
+
+@mixin pt-dark-button-hover() {
+  background-color: $dark-button-background-color-hover;
+  box-shadow: $dark-button-box-shadow;
+}
+
+@mixin pt-dark-button-active() {
+  background-color: $dark-button-background-color-active;
+  background-image: none;
+  box-shadow: $dark-button-box-shadow-active;
+}
+
+@mixin pt-dark-button-disabled() {
+  background-color: $dark-button-background-color-disabled;
+  background-image: none;
+  box-shadow: none;
+  color: $dark-button-color-disabled;
+
+  &.#{$ns}-active {
+    background: $dark-button-background-color-active-disabled;
+  }
+}
+
+@mixin pt-dark-button-intent() {
+  box-shadow: $dark-button-intent-box-shadow;
+
+  &:hover {
+    box-shadow: $dark-button-intent-box-shadow;
+  }
+
+  &:active,
+  &.#{$ns}-active {
+    box-shadow: $dark-button-intent-box-shadow-active;
+  }
+
+  &:disabled,
+  &.#{$ns}-disabled {
+    @include pt-dark-button-intent-disabled();
+  }
+}
+
+@mixin pt-dark-button-intent-disabled() {
+  background-image: none;
+  box-shadow: none;
+  color: $dark-button-intent-color-disabled;
+}
+
+@mixin pt-button-minimal() {
+  background: $minimal-button-background-color;
+  box-shadow: none;
+
+  &:hover {
+    background: $minimal-button-background-color-hover;
+    box-shadow: none;
+    color: $pt-text-color;
+    text-decoration: none;
+  }
+
+  &:active,
+  &.#{$ns}-active {
+    background: $minimal-button-background-color-active;
+    box-shadow: none;
+    color: $pt-text-color;
+  }
+
+  &:disabled,
+  &:disabled:hover,
+  &.#{$ns}-disabled,
+  &.#{$ns}-disabled:hover {
+    background: none;
+    color: $pt-text-color-disabled;
+    cursor: not-allowed;
+
+    &.#{$ns}-active {
+      background: $minimal-button-background-color-active;
+    }
+  }
+
+  .#{$ns}-dark & {
+    @include pt-dark-button-minimal();
+  }
+
+  @each $intent, $colors in $button-intents {
+    &.#{$ns}-intent-#{$intent} {
+      @include pt-button-minimal-intent(
+        map-get($pt-intent-colors, $intent),
+        map-get($pt-intent-text-colors, $intent),
+        map-get($pt-dark-intent-text-colors, $intent)
+      );
+    }
+  }
+}
+
+@mixin pt-dark-button-minimal() {
+  background: $dark-minimal-button-background-color;
+  box-shadow: none;
+  color: inherit;
+
+  &:hover,
+  &:active,
+  &.#{$ns}-active {
+    background: none;
+    box-shadow: none;
+  }
+
+  &:hover {
+    background: $dark-minimal-button-background-color-hover;
+  }
+
+  &:active,
+  &.#{$ns}-active {
+    background: $dark-minimal-button-background-color-active;
+    color: $pt-dark-text-color;
+  }
+
+  &:disabled,
+  &:disabled:hover,
+  &.#{$ns}-disabled,
+  &.#{$ns}-disabled:hover {
+    background: none;
+    color: $pt-dark-text-color-disabled;
+    cursor: not-allowed;
+
+    &.#{$ns}-active {
+      background: $dark-minimal-button-background-color-active;
+    }
+  }
+}
+
+@mixin pt-button-minimal-intent($intent-color, $text-color, $dark-text-color) {
+  color: $text-color;
+
+  &:hover,
+  &:active,
+  &.#{$ns}-active {
+    background: none;
+    box-shadow: none;
+    color: $text-color;
+  }
+
+  &:hover {
+    background: rgba($intent-color, 0.15);
+    color: $text-color;
+  }
+
+  &:active,
+  &.#{$ns}-active {
+    background: rgba($intent-color, 0.3);
+    color: $text-color;
+  }
+
+  &:disabled,
+  &.#{$ns}-disabled {
+    background: none;
+    color: rgba($text-color, 0.5);
+
+    &.#{$ns}-active {
+      background: rgba($intent-color, 0.3);
+    }
+  }
+
+  .#{$ns}-button-spinner .#{$ns}-spinner-head {
+    stroke: $text-color;
+  }
+
+  .#{$ns}-dark & {
+    color: $dark-text-color;
+
+    &:hover {
+      background: rgba($intent-color, 0.2);
+      color: $dark-text-color;
+    }
+
+    &:active,
+    &.#{$ns}-active {
+      background: rgba($intent-color, 0.3);
+      color: $dark-text-color;
+    }
+
+    &:disabled,
+    &.#{$ns}-disabled {
+      background: none;
+      color: rgba($dark-text-color, 0.5);
+
+      &.#{$ns}-active {
+        background: rgba($intent-color, 0.3);
+      }
+    }
+  }
+}
+
+@mixin pt-button-minimal-divider() {
+  $divider-height: $pt-grid-size * 2;
+  background: $pt-divider-black;
+
+  margin: ($pt-button-height - $divider-height) * 0.5;
+  width: $minimal-button-divider-width;
+
+  .#{$ns}-dark & {
+    background: $pt-dark-divider-white;
+  }
+}
+
+@mixin pt-button-outlined() {
+  border: $button-outlined-width solid rgba($pt-text-color, 0.2);
+  box-sizing: border-box;
+
+  &:disabled,
+  &.#{$ns}-disabled,
+  &:disabled:hover,
+  &.#{$ns}-disabled:hover {
+    border-color: rgba($pt-text-color-disabled, 0.1);
+  }
+
+  .#{$ns}-dark & {
+    @include pt-dark-button-outlined();
+  }
+
+  @each $intent, $colors in $button-intents {
+    &.#{$ns}-intent-#{$intent} {
+      @include pt-button-outlined-intent(
+        map-get($pt-intent-text-colors, $intent),
+        map-get($pt-dark-intent-text-colors, $intent)
+      );
+    }
+  }
+}
+
+@mixin pt-dark-button-outlined() {
+  border-color: rgba($white, 0.4);
+
+  &:disabled,
+  &:disabled:hover,
+  &.#{$ns}-disabled,
+  &.#{$ns}-disabled:hover {
+    border-color: rgba($white, 0.2);
+  }
+}
+
+@mixin pt-button-outlined-intent($text-color, $dark-text-color) {
+  border-color: rgba($text-color, $button-outlined-border-intent-opacity);
+
+  &:disabled,
+  &.#{$ns}-disabled {
+    border-color: rgba($text-color, $button-outlined-border-disabled-intent-opacity);
+  }
+
+  .#{$ns}-dark & {
+    border-color: rgba($dark-text-color, $button-outlined-border-intent-opacity);
+
+    &:disabled,
+    &.#{$ns}-disabled {
+      border-color: rgba($dark-text-color, $button-outlined-border-disabled-intent-opacity);
+    }
+  }
+}

package/styles/blueprint/src/components/callout/_callout.scss

@@ -0,0 +1,99 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+
+/*
+Callout
+
+Markup:
+<div class="#{$ns}-callout {{.modifier}}">
+  <h4 class="#{$ns}-heading">Callout Heading</h4>
+  It's dangerous to go alone! Take this.
+</div>
+
+.#{$ns}-intent-primary - Primary intent
+.#{$ns}-intent-success - Success intent
+.#{$ns}-intent-warning - Warning intent
+.#{$ns}-intent-danger  - Danger intent
+.#{$ns}-icon-info-sign - With an icon
+
+Styleguide callout
+*/
+
+.#{$ns}-callout {
+  @include running-typography();
+  background-color: rgba($gray3, 0.15);
+  border-radius: $pt-border-radius;
+  padding: $pt-grid-size ($pt-grid-size * 1.2) ($pt-grid-size * 0.9);
+  position: relative;
+  width: 100%;
+
+  // CSS API support
+  &[class*="#{$ns}-icon-"] {
+    padding-left: ($pt-grid-size * 2) + $pt-icon-size-large;
+
+    &::before {
+      @include pt-icon($pt-icon-size-large);
+      color: $pt-icon-color;
+      left: $pt-grid-size;
+      position: absolute;
+      top: $pt-grid-size;
+    }
+  }
+
+  &.#{$ns}-callout-icon {
+    padding-left: ($pt-grid-size * 2) + $pt-icon-size-large;
+
+    > .#{$ns}-icon:first-child {
+      color: $pt-icon-color;
+      left: $pt-grid-size;
+      position: absolute;
+      top: $pt-grid-size;
+    }
+  }
+
+  .#{$ns}-heading {
+    line-height: $pt-icon-size-large;
+    margin-bottom: $pt-grid-size * 0.5;
+    margin-top: 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .#{$ns}-dark & {
+    background-color: rgba($gray3, 0.2);
+
+    &[class*="#{$ns}-icon-"]::before {
+      color: $pt-dark-icon-color;
+    }
+  }
+
+  @each $intent, $color in $pt-intent-colors {
+    &.#{$ns}-intent-#{$intent} {
+      background-color: rgba($color, 0.15);
+
+      &[class*="#{$ns}-icon-"]::before,
+      > .#{$ns}-icon:first-child,
+      .#{$ns}-heading {
+        color: map-get($pt-intent-text-colors, $intent);
+      }
+
+      .#{$ns}-dark & {
+        background-color: rgba($color, 0.25);
+
+        &[class*="#{$ns}-icon-"]::before,
+        > .#{$ns}-icon:first-child,
+        .#{$ns}-heading {
+          color: map-get($pt-dark-intent-text-colors, $intent);
+        }
+      }
+    }
+  }
+
+  .#{$ns}-running-text & {
+    margin: ($pt-grid-size * 2) 0;
+  }
+}

package/styles/blueprint/src/components/card/_card.scss

@@ -0,0 +1,91 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+
+/*
+Cards
+
+Markup:
+<div class="#{$ns}-card {{.modifier}}">
+  We build products that make people better at their most important work.
+</div>
+
+.#{$ns}-elevation-0 - Ground floor. This level provides just a gentle border shadow.
+.#{$ns}-elevation-1 - First. Subtle drop shadow intended for static containers.
+.#{$ns}-elevation-2 - Second. An even stronger shadow, moving on up.
+.#{$ns}-elevation-3 - Third. For containers overlaying content temporarily.
+.#{$ns}-elevation-4 - Fourth. The strongest shadow, usually for overlay containers on top of backdrops.
+.#{$ns}-interactive - On hover, increase elevation and use pointer cursor.
+
+Styleguide card
+*/
+
+$card-padding: $pt-grid-size * 2 !default;
+
+$card-background-color: $white !default;
+$dark-card-background-color: $dark-gray4 !default;
+
+$elevation-shadows: (
+  $pt-elevation-shadow-0
+  $pt-elevation-shadow-1
+  $pt-elevation-shadow-2
+  $pt-elevation-shadow-3
+  $pt-elevation-shadow-4
+);
+$dark-elevation-shadows: (
+  $pt-dark-elevation-shadow-0
+  $pt-dark-elevation-shadow-1
+  $pt-dark-elevation-shadow-2
+  $pt-dark-elevation-shadow-3
+  $pt-dark-elevation-shadow-4
+);
+
+.#{$ns}-card {
+  background-color: $card-background-color;
+  border-radius: $pt-border-radius;
+  box-shadow: $pt-elevation-shadow-0;
+  padding: $card-padding;
+  transition: transform ($pt-transition-duration * 2) $pt-transition-ease,
+              box-shadow ($pt-transition-duration * 2) $pt-transition-ease;
+
+  &.#{$ns}-dark,
+  .#{$ns}-dark & {
+    background-color: $dark-card-background-color;
+    box-shadow: $pt-dark-elevation-shadow-0;
+  }
+}
+
+@for $index from 1 through length($elevation-shadows) {
+  .#{$ns}-elevation-#{$index - 1} {
+    box-shadow: nth($elevation-shadows, $index);
+
+    &.#{$ns}-dark,
+    .#{$ns}-dark & {
+      box-shadow: nth($dark-elevation-shadows, $index);
+    }
+  }
+}
+
+.#{$ns}-card.#{$ns}-interactive {
+  &:hover {
+    box-shadow: $pt-elevation-shadow-3;
+    cursor: pointer;
+
+    &.#{$ns}-dark,
+    .#{$ns}-dark & {
+      box-shadow: $pt-dark-elevation-shadow-3;
+    }
+  }
+
+  &:active {
+    box-shadow: $pt-elevation-shadow-1;
+    opacity: 0.9;
+    transition-duration: 0;
+
+    &.#{$ns}-dark,
+    .#{$ns}-dark & {
+      box-shadow: $pt-dark-elevation-shadow-1;
+    }
+  }
+}

package/styles/blueprint/src/components/collapse/_collapse.scss

@@ -0,0 +1,20 @@
+// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+
+$collapse-transition: ($pt-transition-duration * 2) $pt-transition-ease !default;
+
+.#{$ns}-collapse {
+  height: 0;
+  overflow-y: hidden;
+  transition: height $collapse-transition;
+
+  .#{$ns}-collapse-body {
+    transition: transform $collapse-transition;
+
+    &[aria-hidden="true"] {
+      display: none;
+    }
+  }
+}