npm - @stoplight/ui-kit - Versions diffs - 3.0.0-beta.37 → 3.0.0-beta.40 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/styles/blueprint/src/_typography.scss ADDED Viewed

@@ -0,0 +1,459 @@
+@charset "utf-8"; // foreign characters ahead (in KSS markup)
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+@import "common/variables";
+@import "common/mixins";
+@import "~@blueprintjs/icons/src/icons";
+/*
+Headings
+Markup:
+<div>
+  <h1 class="@ns-heading">H1 heading</h1>
+  <h2 class="@ns-heading">H2 heading</h2>
+  <h3 class="@ns-heading">H3 heading</h3>
+  <h4 class="@ns-heading">H4 heading</h4>
+  <h5 class="@ns-heading">H5 heading</h5>
+  <h6 class="@ns-heading">H6 heading</h6>
+</div>
+Styleguide headings
+*/
+.#{$ns}-heading {
+  @include heading-typography();
+  margin: 0 0 $pt-grid-size;
+  padding: 0;
+}
+// tag: (font-size, line-height)
+$headings: (
+  "h1": (36px, 40px),
+  "h2": (28px, 32px),
+  "h3": (22px, 25px),
+  "h4": (18px, 21px),
+  "h5": (16px, 19px),
+  "h6": (14px, 16px)
+) !default;
+@each $tag, $props in $headings {
+  %#{$tag} {
+    font-size: nth($props, 1);
+    line-height: nth($props, 2);
+  }
+  #{$tag}.#{$ns}-heading {
+    @extend %#{$tag};
+  }
+}
+/*
+UI text
+Markup:
+<div class="{{.modifier}}">
+  More than a decade ago, we set out to create products that would transform
+  the way organizations use their data. Today, our products are deployed at
+  the most critical government, commercial, and non-profit institutions in
+  the world to solve problems we hadn’t even dreamed of back then.
+</div>
+.#{$ns}-ui-text - Default Blueprint font styles, applied to the `<body>` tag and available as a class for nested resets.
+.#{$ns}-monospace-text - Use a monospace font (ideal for code).
+.#{$ns}-running-text - Increase line height ideal for longform text. See [Running text](#core/typography.running-text) below for additional features.
+.#{$ns}-text-large - Use a larger font size.
+.#{$ns}-text-small - Use a smaller font size.
+.#{$ns}-text-muted - Change text color to a gentler gray.
+.#{$ns}-text-disabled - Change text color to a transparent, faded gray.
+.#{$ns}-text-overflow-ellipsis - Truncate a single line of text with an ellipsis if it overflows its container.
+Styleguide ui-text
+*/
+.#{$ns}-ui-text {
+  @include base-typography();
+}
+.#{$ns}-monospace-text {
+  @include monospace-typography();
+}
+// NOTE: .#{$ns}-text-large defined below after .#{$ns}-running-text
+.#{$ns}-text-muted {
+  color: $pt-text-color-muted;
+  .#{$ns}-dark & {
+    color: $pt-dark-text-color-muted;
+  }
+}
+.#{$ns}-text-disabled {
+  color: $pt-text-color-disabled;
+  .#{$ns}-dark & {
+    color: $pt-dark-text-color-disabled;
+  }
+}
+.#{$ns}-text-overflow-ellipsis {
+  @include overflow-ellipsis();
+}
+/*
+Running text
+Markup:
+<div class="@ns-running-text {{.modifier}}">
+  <p>
+    We build products that make people better at their most important
+    work — the kind of work you read about on the front page of the
+    newspaper, not just the technology section.
+  </p>
+  <ul>
+    <li>Item the <code>first</code>.</li>
+    <li>Item the <strong>second</strong></code>.</li>
+    <li>Item the <a href="#core/typography.running-text">third</a>.</li>
+  </ul>
+  <h3>Scale, Speed, Agility</h3>
+  <p>
+    A successful data transformation requires the whole organization — users, the IT shop, and
+    leadership — to operate in lockstep. With Foundry, the enterprise comes together to
+    transform the organization and turn data into a competitive advantage.
+  </p>
+</div>
+.#{$ns}-text-large - Use larger font size.
+Styleguide running-text
+*/
+.#{$ns}-running-text {
+  @include running-typography();
+  @each $tag, $props in $headings {
+    #{$tag} {
+      @extend %#{$tag};
+      @include heading-typography();
+      margin-bottom: $pt-grid-size * 2;
+      margin-top: $pt-grid-size * 4;
+    }
+  }
+  hr {
+    border: none;
+    border-bottom: 1px solid $pt-divider-black;
+    margin: ($pt-grid-size * 2) 0;
+    .#{$ns}-dark & {
+      border-color: $pt-dark-divider-white;
+    }
+  }
+  p {
+    margin: 0 0 $pt-grid-size;
+    padding: 0;
+  }
+  blockquote {
+    @extend %blockquote;
+  }
+  code {
+    @extend %code;
+  }
+  kbd {
+    @extend %keyboard;
+  }
+  pre {
+    @extend %code-block;
+  }
+  table {
+    @extend %html-table;
+  }
+  ul,
+  ol {
+    @extend %list;
+  }
+}
+// NOTE: these must be defined after .@ns-running-text in order to override font-size.
+.#{$ns}-text-large {
+  font-size: $pt-font-size-large;
+  // line-height comes from .@ns-(ui|running)-text
+}
+.#{$ns}-text-small {
+  font-size: $pt-font-size-small;
+  // line-height comes from .@ns-(ui|running)-text
+}
+/*
+Links
+Simply use an `<a href="">` tag as you normally would. No class is necessary for Blueprint styles.
+Links are underlined only when hovered.
+Putting an icon inside a link will cause it to inherit the link's text color.
+Styleguide typography.links
+*/
+a {
+  color: $pt-link-color;
+  text-decoration: none;
+  &:hover {
+    color: $pt-link-color;
+    cursor: pointer;
+    text-decoration: underline;
+  }
+  #{$icon-classes} {
+    color: inherit;
+  }
+  code,
+  .#{$ns}-dark & code {
+    color: inherit;
+  }
+  .#{$ns}-dark &,
+  .#{$ns}-dark &:hover {
+    color: $pt-dark-link-color;
+    #{$icon-classes} {
+      color: inherit;
+    }
+  }
+}
+/*
+Preformatted text
+Markup:
+<div>
+  <p>Use the <code class="@ns-code">&lt;code></code> tag for snippets of code.</p>
+  <pre class="@ns-code-block">Use the &lt;pre> tag for blocks of code.</pre>
+  <pre class="@ns-code-block"><code>// code sample
+export function hasModifier(
+  modifiers: ts.ModifiersArray,
+  ...modifierKinds: ts.SyntaxKind[],
+) {
+  if (modifiers == null || modifierKinds == null) {
+    return false;
+  }
+  return modifiers.some(m => modifierKinds.some(k => m.kind === k));
+}</code></pre>
+</div>
+Styleguide preformatted
+*/
+%code {
+  @include monospace-typography();
+  background: $pt-code-background-color;
+  border-radius: $pt-border-radius;
+  box-shadow: inset border-shadow(0.2);
+  color: $pt-code-text-color;
+  font-size: smaller;
+  padding: 2px 5px;
+  .#{$ns}-dark & {
+    background: $pt-dark-code-background-color;
+    box-shadow: inset border-shadow(0.4);
+    color: $pt-dark-code-text-color;
+  }
+  a > & {
+    // <code> in links. markdown: [`code`](http://url)
+    // $pt-link-color does not have good contrast with non-link <code>'s in light theme, so we use a brighter hue
+    color: $pt-intent-primary;
+    .#{$ns}-dark & {
+      color: inherit;
+    }
+  }
+}
+%code-block {
+  @include monospace-typography();
+  background: $pt-code-background-color;
+  border-radius: $pt-border-radius;
+  box-shadow: inset 0 0 0 1px $pt-divider-black;
+  color: $pt-text-color;
+  display: block;
+  font-size: $pt-font-size - 1px;
+  line-height: 1.4;
+  margin: $pt-grid-size 0;
+  padding: ($pt-grid-size * 1.3) ($pt-grid-size * 1.5) ($pt-grid-size * 1.2);
+  word-break: break-all;
+  word-wrap: break-word;
+  .#{$ns}-dark & {
+    background: $pt-dark-code-background-color;
+    box-shadow: inset 0 0 0 1px $pt-dark-divider-black;
+    color: $pt-dark-text-color;
+  }
+  > code {
+    background: none;
+    box-shadow: none;
+    color: inherit;
+    font-size: inherit;
+    padding: 0;
+  }
+}
+.#{$ns}-code {
+  @extend %code;
+}
+.#{$ns}-code-block {
+  @extend %code-block;
+}
+%keyboard {
+  align-items: center;
+  background: $white;
+  border-radius: $pt-border-radius;
+  box-shadow: $pt-elevation-shadow-1;
+  color: $pt-text-color-muted;
+  display: inline-flex;
+  font-family: inherit;
+  font-size: $pt-font-size-small;
+  height: $pt-button-height-small;
+  justify-content: center;
+  line-height: $pt-button-height-small;
+  min-width: $pt-button-height-small;
+  padding: $pt-border-radius ($pt-border-radius * 2);
+  vertical-align: middle;
+  #{$icon-classes} {
+    margin-right: $pt-grid-size * 0.5;
+  }
+  .#{$ns}-dark & {
+    background: $dark-gray5;
+    box-shadow: $pt-dark-elevation-shadow-1;
+    color: $pt-dark-text-color-muted;
+  }
+}
+.#{$ns}-key {
+  @extend %keyboard;
+}
+/*
+Block quotes
+Markup:
+<blockquote class="@ns-blockquote">
+  Premium Aerotec is a key supplier for Airbus, producing 30 million parts per year,
+  which is huge complexity. Skywise helps us manage all the production steps.
+  It gives Airbus much better visibility into where the product is in the supply chain,
+  and it lets us immediately see our weak points so we can react on the spot.
+</blockquote>
+Styleguide blockquote
+*/
+%blockquote {
+  border-left: solid 4px rgba($gray4, 0.5);
+  margin: 0 0 $pt-grid-size;
+  padding: 0 ($pt-grid-size * 2);
+  .#{$ns}-dark & {
+    border-color: rgba($gray2, 0.5);
+  }
+}
+.#{$ns}-blockquote {
+  @extend %blockquote;
+}
+/*
+Lists
+Markup:
+<ol class="{{.modifier}}">
+  <li>Item the first</li>
+  <li>Item the second</li>
+  <li>
+    Item the third
+    <ul class="{{.modifier}}">
+      <li>Item the fourth</li>
+      <li>Item the fifth</li>
+    </ul>
+  </li>
+</ol>
+.#{$ns}-list - Add a little spacing between items for readability.
+.#{$ns}-list-unstyled - Remove all list styling (including indicators) so you can add your own.
+Styleguide lists
+*/
+%list {
+  margin: $pt-grid-size 0;
+  padding-left: $pt-grid-size * 3;
+  li:not(:last-child) {
+    margin-bottom: $pt-grid-size * 0.5;
+  }
+  // nested lists
+  ol,
+  ul {
+    margin-top: $pt-grid-size * 0.5;
+  }
+}
+.#{$ns}-list {
+  @extend %list;
+}
+.#{$ns}-list-unstyled {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  li {
+    padding: 0;
+  }
+}
+/*
+Right-to-left text
+Markup:
+<h5 class="@ns-heading">Arabic:</h5>
+<p class="@ns-rtl">
+  لكل لأداء بمحاولة من. مدينة الواقعة يبق أي, وإعلان وقوعها، حول كل, حدى عجّل مشروط الخاسرة قد.
+  من الذود تكبّد بين, و لها واحدة الأراضي. عل الصفحة والروسية يتم, أي للحكومة استعملت شيء. أم وصل زهاء اليا
+</p>
+<h5 class="@ns-heading">Hebrew:</h5>
+<p class="@ns-rtl">
+  כדי על עזרה יידיש הבהרה, מלא באגים טכניים דת. תנך או ברית ביולי. כתב בה הטבע למנוע, דת כלים פיסיקה החופשית זכר.
+  מתן החלל מאמרשיחהצפה ב. הספרות אנציקלופדיה אם זכר, על שימושי שימושיים תאולוגיה עזה
+</p>
+Styleguide rtl
+*/
+.#{$ns}-rtl {
+  text-align: right;
+}
+.#{$ns}-dark {
+  color: $pt-dark-text-color;
+}

package/styles/blueprint/src/accessibility/_focus-states.scss ADDED Viewed

@@ -0,0 +1,17 @@
+// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+:focus {
+  @include focus-outline();
+}
+.#{$ns}-focus-disabled :focus {
+  // override any focus outline anywhere
+  // stylelint-disable declaration-no-important
+  outline: none !important;
+  // special override for checkbox etc which render focus on a separate element
+  ~ .#{$ns}-control-indicator {
+    outline: none !important;
+  }
+}

package/styles/blueprint/src/blueprint-hi-contrast.scss ADDED Viewed

@@ -0,0 +1,22 @@
+/*
+Copyright 2019-present Palantir Technologies, Inc. All rights reserved.
+Licensed under the Apache License, Version 2.0.
+*/
+// override some intent colors to pass contrast requirements
+$pt-intent-primary: #106ba3 !default; // $blue2
+$pt-intent-success: #0d8050 !default; // $green2;
+$pt-intent-warning: #a66321 !default; // $orange1;
+$pt-intent-danger: #c23030 !default; // $red2;
+// Import files in the same order that they are documented in the docs
+@import "common/variables";
+@import "common/colors";
+@import "reset";
+@import "typography";
+@import "accessibility/focus-states";
+@import "components/index";

package/styles/blueprint/src/blueprint.scss ADDED Viewed

@@ -0,0 +1,16 @@
+/*
+Copyright 2015-present Palantir Technologies, Inc. All rights reserved.
+Licensed under the Apache License, Version 2.0.
+*/
+// Import files in the same order that they are documented in the docs
+@import "common/variables";
+@import "common/colors";
+@import "reset";
+@import "typography";
+@import "accessibility/focus-states";
+@import "components/index";

package/styles/blueprint/src/common/_color-aliases.scss ADDED Viewed

@@ -0,0 +1,43 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+$pt-intent-primary: $blue3 !default;
+$pt-intent-success: $green3 !default;
+$pt-intent-warning: $orange3 !default;
+$pt-intent-danger: $red3 !default;
+$pt-app-background-color: $light-gray5 !default;
+$pt-dark-app-background-color: $dark-gray3 !default;
+$pt-outline-color: rgba($blue3, 0.6);
+$pt-text-color: $dark-gray1 !default;
+$pt-text-color-muted: $gray1 !default;
+$pt-text-color-disabled: rgba($pt-text-color-muted, 0.6) !default;
+$pt-heading-color: $pt-text-color !default;
+$pt-link-color: $blue2 !default;
+$pt-dark-text-color: $light-gray5 !default;
+$pt-dark-text-color-muted: $gray4 !default;
+$pt-dark-text-color-disabled: rgba($pt-dark-text-color-muted, 0.6) !default;
+$pt-dark-heading-color: $pt-dark-text-color !default;
+$pt-dark-link-color: $blue5 !default;
+// Default text selection color using #7dbcff
+$pt-text-selection-color: rgba(125, 188, 255, 0.6) !default;
+$pt-icon-color: $pt-text-color-muted !default;
+$pt-icon-color-hover: $pt-text-color !default;
+$pt-icon-color-disabled: $pt-text-color-disabled !default;
+$pt-icon-color-selected: $pt-intent-primary !default;
+$pt-dark-icon-color: $pt-dark-text-color-muted !default;
+$pt-dark-icon-color-hover: $pt-dark-text-color !default;
+$pt-dark-icon-color-disabled: $pt-dark-text-color-disabled !default;
+$pt-dark-icon-color-selected: $pt-intent-primary !default;
+$pt-divider-black: rgba($black, 0.15) !default;
+$pt-dark-divider-black: rgba($black, 0.4) !default;
+$pt-dark-divider-white: rgba($white, 0.15) !default;
+$pt-code-text-color: $pt-text-color-muted !default;
+$pt-dark-code-text-color: $pt-dark-text-color-muted !default;
+$pt-code-background-color: rgba($white, 0.7) !default;
+$pt-dark-code-background-color: rgba($black, 0.3) !default;

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

@@ -0,0 +1,116 @@
+// 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";