@stoplight/ui-kit 3.0.1 → 3.0.3

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

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

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

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

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