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

JetBrains · Aug 29, 2018 · 88bac70 · 88bac70
2 parents 0fbe2ca + 37766fd
commit 88bac70
Show file tree

Hide file tree

Showing 120 changed files with 162 additions and 153 deletions.
diff --git a/components/alert/alert.css b/components/alert/alert.css
@@ -1,6 +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;
 
@@ -24,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/auth/down-notification.css b/components/auth/down-notification.css
@@ -11,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-editor/avatar-editor.scss b/components/avatar-editor/avatar-editor.scss
@@ -1,4 +1,3 @@
-@import url("../global/variables.css");
 @import "../global/global";
 
 .ring-avatar-editor {

diff --git a/components/badge/badge.css b/components/badge/badge.css
@@ -2,13 +2,6 @@
 
 @value unit from "../global/global.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;
-
 .badge {
   display: inline-block;
 
@@ -21,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);
 
@@ -31,7 +24,7 @@
   line-height: 17px;
 
   &.gray {
-    background-color: gray-background-color;
+    background-color: var(--ring-sidebar-background-color);
   }
 
   &.valid {
@@ -43,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
@@ -1,4 +1,3 @@
-@import url("../global/variables.css");
 @import "../global/global";
 
 // Breadcrumbs

diff --git a/components/button/button.css b/components/button/button.css
@@ -5,6 +5,19 @@
 @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);
@@ -31,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 {
@@ -74,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);
   }
 
@@ -84,7 +97,7 @@
   }
 
   &[disabled] .icon {
-    color: #333;
+    color: var(--ring-button-dark-icon-color);
   }
 
   &.primary:active,
@@ -96,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 {
@@ -115,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%
       );
   }
@@ -221,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/button/button.scss b/components/button/button.scss
@@ -1,4 +1,3 @@
-@import url("../global/variables.css");
 @import "../global/global";
 
 @mixin button-background($dark, $light) {

diff --git a/components/checkbox/checkbox.css b/components/checkbox/checkbox.css
@@ -2,7 +2,6 @@
 
 @value unit from "../global/global.css";
 @value checkboxSize: 14px;
-@value disabledBorderColor: #f0f0f0;
 
 .checkbox {
   position: relative;
@@ -96,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/date-picker/date-picker.css b/components/date-picker/date-picker.css
@@ -1,13 +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;
 }
@@ -206,7 +209,7 @@
 .activeBetween {
   transition: none;
 
-  background-color: hover-color;
+  background-color: var(--ring-date-picker-hover-color);
 }
 
 .current {
@@ -220,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 {
@@ -272,7 +275,7 @@
     &::after {
       transition: none;
 
-      background-color: hover-color;
+      background-color: var(--ring-date-picker-hover-color);
     }
   }
 }
@@ -351,7 +354,7 @@
   & + .Tuesday::before {
     transition: none;
 
-    background-color: hover-color;
+    background-color: var(--ring-date-picker-hover-color);
   }
 }
 

diff --git a/components/docked-panel-ng/docked-panel-ng.scss b/components/docked-panel-ng/docked-panel-ng.scss
@@ -1,4 +1,3 @@
-@import url("../global/variables.css");
 @import "../global/global";
 
 .ring-docked-panel {
@@ -19,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/error-bubble/error-bubble.css b/components/error-bubble/error-bubble.css
@@ -1,7 +1,6 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
-@value borderColor: #e5e5e5;
 
 .errorBubblePopup {
   overflow: visible;
@@ -27,10 +26,10 @@
 
   color: var(--ring-error-color);
 
-  border: 1px solid borderColor;
+  border: 1px solid var(--ring-popup-border-color);
   border-radius: var(--ring-border-radius);
 
-  background: #fff;
+  background: var(--ring-content-background-color);
   box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.15);
 
   font-size: 12px;
@@ -49,9 +48,9 @@
     content: '';
     transform: rotate(45deg);
 
-    border: 1px solid borderColor;
+    border: 1px solid var(--ring-borders-color);
     border-top: none;
     border-right: none;
-    background: #fff;
+    background: var(--ring-content-background-color);
   }
 }
diff --git a/components/error-bubble/error-bubble.scss b/components/error-bubble/error-bubble.scss
@@ -1,4 +1,3 @@
-@import url("../global/variables.css");
 @import "../global/global";
 
 /*

diff --git a/components/error-message-ng/error-message-ng.scss b/components/error-message-ng/error-message-ng.scss
@@ -1,4 +1,3 @@
-@import url("../global/variables.css");
 @import "../global/global";
 
 .error-message {

diff --git a/components/error-page/error-page.scss b/components/error-page/error-page.scss
@@ -1,4 +1,3 @@
-@import url("../global/variables.css");
 @import "../global/global";
 
 // Using a pseudo-element rather than the element itself to prevent

diff --git a/components/form/form.scss b/components/form/form.scss
@@ -1,4 +1,3 @@
-@import url("../global/variables.css");
 @import "../global/global";
 
 /**

diff --git a/components/global/variables.css b/components/global/variables.css
@@ -35,7 +35,7 @@
   --ring-content-background-color: #fff;
   --ring-sidebar-background-color: #f7f9fa;
   --ring-selected-background-color: #e5f4ff;
-  --ring-dark-selected-background-color: #001526;
+  --ring-dark-selected-background-color: #002a4d;
   --ring-message-background-color: rgba(0, 21, 38, 0.9);
   --ring-navigation-background-color: #000;
 

diff --git a/components/header/services.css b/components/header/services.css
@@ -6,7 +6,7 @@
   max-width: calc(calc(unit * 50) + 2px);
   padding: calc(unit * 4) calc(unit * 4) calc(unit * 3);
 
-  background-color: #000;
+  background-color: var(--ring-navigation-background-color);
 
   line-height: 10px; /* Eliminate gap between clickable blocks rows */
 }
@@ -26,7 +26,7 @@
   text-align: center;
   text-overflow: ellipsis;
 
-  color: #fff;
+  color: var(--ring-dark-text-color);
 
   line-height: initial;
 
@@ -38,7 +38,7 @@
 
   &:not(:hover),
   &:visited:not(:hover) {
-    color: #fff;
+    color: var(--ring-dark-text-color);
   }
 
   /* Disable animation .ring-icon_loading in Header in Edge, see https://youtrack.jetbrains.com/issue/RG-928 */
@@ -64,7 +64,7 @@
   composes: active;
 
   &:hover {
-    color: #fff;
+    color: var(--ring-dark-text-color);
   }
 }
 

diff --git a/components/icon/package.json b/components/icon/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@ring-ui/icon",
-  "version": "1.0.0-beta.21",
+  "version": "1.0.0-beta.22",
   "main": "index.js",
   "scripts": {
     "prepublish": "node generate-exports"

diff --git a/components/input-size/input-size.scss b/components/input-size/input-size.scss
@@ -1,4 +1,3 @@
-@import url("../global/variables.css");
 @import "../global/global";
 @import "../error-bubble/error-bubble";