Merge branch 'master' into dependencies.io-update-build-348.1.0

JetBrains · Aug 29, 2018 · 3ccca6f · 3ccca6f
2 parents 4c5e831 + 37766fd
commit 3ccca6f
Show file tree

Hide file tree

Showing 157 changed files with 417 additions and 251 deletions.
diff --git a/components/alert/alert.css b/components/alert/alert.css
@@ -1,4 +1,7 @@
+@import "../global/variables.css";
+
 @value unit from "../global/global.css";
+@value link from "../link/link.css";
 @value animation-duration: 300ms;
 @value animation-easing: ease-out;
 
@@ -22,6 +25,10 @@
 
   font-size: var(--ring-font-size);
   line-height: calc(unit * 5);
+
+  & a {
+    color: var(--ring-main-color);
+  }
 }
 
 .alertInline {

diff --git a/components/alert/alert.examples.html b/components/alert/alert.examples.html
@@ -53,14 +53,16 @@
     import {render} from 'react-dom';
     import React from 'react';
     import Button from '@jetbrains/ring-ui/components/button/button';
+    import Link from '@jetbrains/ring-ui/components/link/link';
     import Alert, {Container} from '@jetbrains/ring-ui/components/alert/alert';
 
     class AlertContainerDemo extends React.Component {
       state = {
         alerts: [
           {type: Alert.Type.WARNING, key: 1, message: 'Test warning', isClosing: false},
           {type: Alert.Type.LOADING, key: 2, message: 'Test loading', isClosing: false},
-          {type: Alert.Type.MESSAGE, key: 3, message: 'Test message', isClosing: false}
+          {type: Alert.Type.MESSAGE, key: 3, message: 'Test message', isClosing: false},
+          {type: Alert.Type.MESSAGE, key: 3, message: <span>Message <Link href="#">with link</Link></span>, isClosing: false},
         ]
       };
 

diff --git a/components/alert/container.css b/components/alert/container.css
@@ -1,3 +1,5 @@
+@import "../global/variables.css";
+
 @value unit from "../global/global.css";
 @value alert from './alert.css';
 

diff --git a/components/auth-dialog/auth-dialog.css b/components/auth-dialog/auth-dialog.css
@@ -1,3 +1,5 @@
+@import "../global/variables.css";
+
 @value unit from "../global/global.css";
 
 .dialog.dialog {

diff --git a/components/auth/down-notification.css b/components/auth/down-notification.css
@@ -1,3 +1,5 @@
+@import "../global/variables.css";
+
 @value unit from "../global/global.css";
 
 .title {
@@ -9,7 +11,7 @@
 
   word-wrap: break-word;
 
-  color: var(--ring-error-color);
+  color: var(--ring-dark-active-color);
 
   line-height: calc(unit * 2);
 }
diff --git a/components/avatar/avatar.css b/components/avatar/avatar.css
@@ -1,3 +1,5 @@
+@import "../global/variables.css";
+
 .avatar {
   object-fit: contain;
   object-position: center;

diff --git a/components/badge/badge.css b/components/badge/badge.css
@@ -1,11 +1,6 @@
-@value unit from "../global/global.css";
+@import "../global/variables.css";
 
-/* TODO: Replace with palette colors */
-@value disabled-color: #C3120F;
-@value gray-background-color: #F8F8F8;
-@value disabled-background-color: #EBD9DA;
-@value normal-border-color: #F0F0F0;
-@value disabled-border-color: #EBD9DA;
+@value unit from "../global/global.css";
 
 .badge {
   display: inline-block;
@@ -19,7 +14,7 @@
   vertical-align: baseline;
 
   color: var(--ring-secondary-color);
-  border: 1px normal-border-color solid;
+  border: 1px var(--ring-line-color) solid;
   border-radius: var(--ring-border-radius);
   background-color: var(--ring-content-background-color);
 
@@ -29,7 +24,7 @@
   line-height: 17px;
 
   &.gray {
-    background-color: gray-background-color;
+    background-color: var(--ring-sidebar-background-color);
   }
 
   &.valid {
@@ -41,8 +36,8 @@
   }
 
   &.disabled {
-    color: disabled-color;
-    border-color: disabled-border-color;
-    background-color: disabled-background-color;
+    /* Deprecated: duplicates invalid */
+
+    color: var(--ring-error-color);
   }
 }
diff --git a/components/breadcrumb/breadcrumb.scss b/components/breadcrumb/breadcrumb.scss
@@ -78,5 +78,5 @@
 .ring-breadcrumb__sep__icon {
   margin: 0 2px;
   margin-top: -14px;
-  color: #DBDBDB;
+  color: var(--ring-icon-disabled-color);
 }
diff --git a/components/button-group/button-group.css b/components/button-group/button-group.css
@@ -1,3 +1,5 @@
+@import "../global/variables.css";
+
 @value unit from "../global/global.css";
 
 .buttonGroup {

diff --git a/components/button-ng/button-ng.css b/components/button-ng/button-ng.css
@@ -1,3 +1,5 @@
+@import "../global/variables.css";
+
 /* This fixes vertical align of icons, contained in button content */
 /* stylelint-disable-next-line selector-type-no-unknown */
 .ringIconVerticalAlignFix rg-icon {

diff --git a/components/button-set/button-set.css b/components/button-set/button-set.css
@@ -1,3 +1,5 @@
+@import "../global/variables.css";
+
 @value unit from "../global/global.css";
 
 .buttonSet {

diff --git a/components/button-toolbar/button-toolbar.css b/components/button-toolbar/button-toolbar.css
@@ -1,3 +1,5 @@
+@import "../global/variables.css";
+
 @value unit from "../global/global.css";
 
 .buttonToolbar {

diff --git a/components/button/button.css b/components/button/button.css
@@ -1,8 +1,23 @@
+@import "../global/variables.css";
+
 @value unit from "../global/global.css";
 @value button-shadow: inset 0 0 0 1px;
 @value height: calc(unit * 3);
 @value loaderWidth: calc(unit * 8);
 
+:root {
+  --ring-button-primary-background-color: #1a98ff;
+  --ring-button-primary-border-color: #0062b2;
+  --ring-button-danger-active-color: #ffe7e8;
+  --ring-button-danger-hover-color: #ffb3b8;
+  --ring-button-loader-background: #33a3ff;
+  --ring-button-dark-icon-color: #333;
+  --ring-button-dark-danger-active-color: #26080a;
+  --ring-button-dark-danger-hover-color: #db5860;
+  --ring-button-dark-active-color: #001526; /* TODO: Can't it be replaced with #002A4D? */
+  --ring-button-dark-loader-background: #002039;
+}
+
 .light {
   color: var(--ring-text-color);
   background-color: var(--ring-content-background-color);
@@ -29,20 +44,20 @@
 
   &.primary:active,
   &.primary.active {
-    background-color: #1a98ff;
-    box-shadow: button-shadow #0062b2;
+    background-color: var(--ring-button-primary-background-color);
+    box-shadow: button-shadow var(--ring-button-primary-border-color);
   }
 
   &.danger:active,
   &.danger.active {
-    background-color: #ffe7e8;
+    background-color: var(--ring-button-danger-active-color);
   }
 
   &.danger:active,
   &.danger.active,
   &.danger:focus,
   &.danger:hover {
-    box-shadow: button-shadow #ffb3b8;
+    box-shadow: button-shadow var(--ring-button-danger-hover-color);
   }
 
   &.withIcon {
@@ -72,7 +87,7 @@
   &:active,
   &.active {
     color: var(--ring-dark-text-color);
-    background-color: var(--ring-dark-selected-background-color);
+    background-color: var(--ring-button-dark-active-color);
     box-shadow: button-shadow var(--ring-main-color);
   }
 
@@ -82,7 +97,7 @@
   }
 
   &[disabled] .icon {
-    color: #333;
+    color: var(--ring-button-dark-icon-color);
   }
 
   &.primary:active,
@@ -94,14 +109,14 @@
   &.danger:active,
   &.danger.active {
     color: var(--ring-error-color);
-    background-color: #26080a;
+    background-color: var(--ring-button-dark-danger-active-color);
   }
 
   &.danger:active,
   &.danger.active,
   &.danger:focus,
   &.danger:hover {
-    box-shadow: button-shadow #db5860;
+    box-shadow: button-shadow var(--ring-button-dark-danger-hover-color);
   }
 
   &.withIcon {
@@ -113,7 +128,7 @@
       linear-gradient(
         to right,
         var(--ring-navigation-background-color),
-        #002039 40%,
+        var(--ring-button-dark-loader-background) 40%,
         var(--ring-navigation-background-color) 80%
       );
   }
@@ -219,7 +234,7 @@
         linear-gradient(
           to right,
           var(--ring-main-color),
-          #33a3ff 40%,
+          var(--ring-button-loader-background) 40%,
           var(--ring-main-color) 80%
         );
     }

diff --git a/components/checkbox/checkbox.css b/components/checkbox/checkbox.css
@@ -1,6 +1,7 @@
+@import "../global/variables.css";
+
 @value unit from "../global/global.css";
 @value checkboxSize: 14px;
-@value disabledBorderColor: #f0f0f0;
 
 .checkbox {
   position: relative;
@@ -94,7 +95,7 @@
   }
 
   &[disabled] + .cell {
-    border-color: disabledBorderColor;
+    border-color: var(--ring-line-color);
     background-color: var(--ring-content-background-color);
   }
 

diff --git a/components/code/code.css b/components/code/code.css
@@ -1,3 +1,5 @@
+@import "../global/variables.css";
+
 @value unit from "../global/global.css";
 
 .code {

diff --git a/components/confirm/confirm.css b/components/confirm/confirm.css
@@ -1,3 +1,5 @@
+@import "../global/variables.css";
+
 @value unit from "../global/global.css";
 
 .description {

diff --git a/components/content-layout/content-layout.css b/components/content-layout/content-layout.css
@@ -1,3 +1,5 @@
+@import "../global/variables.css";
+
 @value unit, extra-small-screen-media, small-screen-media from '../global/global.css';
 @value sidebarWidth: calc(unit * 30);
 

diff --git a/components/data-list/data-list.css b/components/data-list/data-list.css
@@ -1,3 +1,5 @@
+@import "../global/variables.css";
+
 @value unit from "../global/global.css";
 @value height, compensate, hover-color from '../table/table.css';
 
@@ -45,7 +47,7 @@
 .showMore {
   padding: 4px 60px;
 
-  color: #999;
+  color: var(--ring-secondary-color);
   outline: none;
 
   font-size: 12px;
@@ -61,14 +63,14 @@
 .expanderBox {
   width: calc(unit * 3);
 
-  color: #bbb;
+  color: var(--ring-disabled-color);
 }
 
 .expanderBox {
   cursor: pointer;
 
   &:hover {
-    color: #ff5a00;
+    color: var(--ring-link-hover-color);
   }
 }
 

diff --git a/components/date-picker/date-picker.css b/components/date-picker/date-picker.css
@@ -1,11 +1,16 @@
+@import "../global/variables.css";
+
 @value unit from "../global/global.css";
-@value hover-color: #cef;
 @value cellSize: calc(unit * 3);
 @value calHeight: calc(unit * 36);
 @value calWidth: calc(unit * 37);
 @value yearHeight: calc(unit * 4);
 @value yearWidth: calc(unit * 6);
 
+:root {
+  --ring-date-picker-hover-color: #cef;
+}
+
 .container {
   display: inline-block;
 }
@@ -204,7 +209,7 @@
 .activeBetween {
   transition: none;
 
-  background-color: hover-color;
+  background-color: var(--ring-date-picker-hover-color);
 }
 
 .current {
@@ -218,7 +223,7 @@
 
   color: var(--ring-link-hover-color);
   border-radius: var(--ring-border-radius);
-  background-color: hover-color;
+  background-color: var(--ring-date-picker-hover-color);
 }
 
 .from {
@@ -270,7 +275,7 @@
     &::after {
       transition: none;
 
-      background-color: hover-color;
+      background-color: var(--ring-date-picker-hover-color);
     }
   }
 }
@@ -349,7 +354,7 @@
   & + .Tuesday::before {
     transition: none;
 
-    background-color: hover-color;
+    background-color: var(--ring-date-picker-hover-color);
   }
 }
 

diff --git a/components/dialog-ng/dialog-ng.css b/components/dialog-ng/dialog-ng.css
@@ -1,3 +1,5 @@
+@import "../global/variables.css";
+
 @value unit from "../global/global.css";
 
 .dialogContainer {

diff --git a/components/dialog/dialog.css b/components/dialog/dialog.css
@@ -1,3 +1,5 @@
+@import "../global/variables.css";
+
 @value unit from "../global/global.css";
 
 .container {

diff --git a/components/docked-panel-ng/docked-panel-ng.scss b/components/docked-panel-ng/docked-panel-ng.scss
@@ -18,6 +18,6 @@
   z-index: 2; // should be on top of button groups which have z-index: 1 for active element
   width: 100%;
   margin-left: 0;
-  background-color: #fff;
-  border-top: 1px solid rgba(0, 42, 76, .1);
+  background-color: var(--ring-content-background-color);
+  border-top: 1px solid var(--ring-popup-border-color);
 }
diff --git a/components/dropdown/dropdown.css b/components/dropdown/dropdown.css
@@ -1,3 +1,5 @@
+@import "../global/variables.css";
+
 .dropdown {
   display: inline-block;
 }