@jetbrains/ring-ui 5.0.0-beta.3 → 5.0.0-beta.7

package/components/global/variables.css

@@ -5,44 +5,45 @@
 
   /* Element */
   --ring-line-color: #dfe5eb;
-  --ring-dark-line-color: #475159;
-  --ring-borders-color: #b8d1e5;
-  --ring-dark-borders-color: #406380;
-  --ring-icon-color: var(--ring-borders-color);
+  --ring-borders-color: #c5d1db;
+  --ring-icon-color: #b8d1e5;
   --ring-icon-secondary-color: #999;
-  --ring-border-disabled-color: #dbdbdb;
-  --ring-icon-disabled-color: #bbb;
+  --ring-border-disabled-color: #d4d4d4;
+  --ring-border-unselected-disabled-color: #e8e8e8;
+  --ring-icon-disabled-color: #d4d4d4;
   --ring-border-hover-color: #80c6ff;
-  --ring-dark-border-hover-color: #70b1e6;
   --ring-icon-hover-color: var(--ring-link-hover-color);
-  --ring-main-color: #008eff;
-  --ring-main-hover-color: #007ee5;
+  --ring-main-color: #0080e5;
+  --ring-main-hover-color: #0070cc;
   --ring-icon-error-color: #db5860;
   --ring-icon-warning-color: #eda200;
   --ring-icon-success-color: #59a869;
   --ring-pale-control-color: #cfdbe5;
-  --ring-popup-border-components: 0, 42, 76;
-  --ring-popup-border-color: rgba(var(--ring-popup-border-components), 0.1);
-  --ring-popup-shadow-color: rgba(var(--ring-popup-border-components), 0.15);
+  --ring-popup-border-components: 0, 28, 54;
+  --ring-popup-border-color: var(--ring-line-color);
+  --ring-popup-shadow-color: rgba(var(--ring-popup-border-components), 0.1);
+  --ring-popup-secondary-shadow-color: rgba(var(--ring-popup-border-components), 0.04);
   --ring-message-shadow-color: rgba(var(--ring-popup-border-components), 0.3);
+  --ring-popup-shadow: 0 2px 8px var(--ring-popup-shadow-color), 0 1px 2px var(--ring-popup-secondary-shadow-color);
+  --ring-dialog-shadow: 0 4px 24px var(--ring-popup-shadow-color), 0 2px 6px var(--ring-popup-secondary-shadow-color);
   --ring-pinned-shadow-color: #737577;
+  --ring-button-danger-hover-color: var(--ring-icon-error-color);
+  --ring-button-primary-border-color: #0062b2;
 
   /* Text */
   --ring-search-color: #669ecc;
   --ring-hint-color: #406380;
   --ring-link-color: #0f5b99;
   --ring-link-hover-color: #ff008c;
-  --ring-error-color: #c22731;
-  --ring-warning-color: #cc8b00;
-  --ring-success-color: #1b8833;
+  --ring-error-color: #a90f1a;
+  --ring-warning-color: #b25c00;
+  --ring-success-color: #0c7523;
   --ring-text-color: #1f2326;
-  --ring-dark-text-color: #fff;
+  --ring-active-text-color: var(--ring-text-color);
+  --ring-white-text-color: #fff;
   --ring-heading-color: var(--ring-text-color);
   --ring-secondary-color: #737577;
-  --ring-dark-secondary-color: #888;
   --ring-disabled-color: #999;
-  --ring-dark-disabled-color: #444;
-  --ring-dark-active-color: #ccc;
 
   /* Background */
   --ring-content-background-color: #fff;
@@ -50,13 +51,17 @@
   --ring-sidebar-background-color: #f7f9fa;
   --ring-selected-background-color: #d4edff;
   --ring-hover-background-color: #ebf6ff;
-  --ring-dark-selected-background-color: #002a4d;
   --ring-message-background-color: #111314;
-  --ring-navigation-background-color: #000;
+  --ring-navigation-background-color: #fff;
   --ring-tag-background-color: #e6ecf2;
+  --ring-tag-hover-background-color: #d3dae0;
   --ring-removed-background-color: #ffd5cb;
   --ring-warning-background-color: #faeccd;
-  --ring-added-background-color: #bce8bb;
+  --ring-added-background-color: #d8f0d8;
+  --ring-disabled-background-color: #f5f5f5;
+  --ring-button-danger-active-color: #ffe7e8;
+  --ring-button-loader-background: #33a3ff;
+  --ring-button-primary-background-color: #1a98ff;
 
   /* Code */
   --ring-code-background-color: var(--ring-content-background-color);
@@ -75,10 +80,10 @@
   --ring-code-deletion-color: #c8c8c8;
 
   /* Metrics */
-  --ring-border-radius: 3px;
+  --ring-border-radius: 4px;
   --ring-border-radius-small: 2px;
-  --ring-font-size-larger: 14px;
-  --ring-font-size: 13px;
+  --ring-font-size-larger: 15px;
+  --ring-font-size: 14px;
   --ring-font-size-smaller: 12px;
   --ring-line-height-taller: 21px;
   --ring-line-height: 20px;

package/components/global/variables.d.ts

@@ -2,15 +2,13 @@ import type { Property } from 'csstype';
 export interface RingCSSProperties {
     '--ring-unit'?: string;
     '--ring-line-color'?: Property.BorderColor;
-    '--ring-dark-line-color'?: Property.BorderColor;
     '--ring-borders-color'?: Property.BorderColor;
-    '--ring-dark-borders-color'?: Property.BorderColor;
     '--ring-icon-color'?: Property.Color;
     '--ring-icon-secondary-color'?: Property.Color;
     '--ring-border-disabled-color'?: Property.BorderColor;
+    '--ring-border-unselected-disabled-color'?: Property.Color;
     '--ring-icon-disabled-color'?: Property.Color;
     '--ring-border-hover-color'?: Property.BorderColor;
-    '--ring-dark-border-hover-color'?: Property.BorderColor;
     '--ring-icon-hover-color'?: Property.Color;
     '--ring-main-color'?: Property.Color;
     '--ring-main-hover-color'?: Property.Color;
@@ -23,6 +21,8 @@ export interface RingCSSProperties {
     '--ring-popup-shadow-color'?: Property.Color;
     '--ring-message-shadow-color'?: Property.Color;
     '--ring-pinned-shadow-color'?: Property.Color;
+    '--ring-button-danger-hover-color'?: Property.Color;
+    '--ring-button-primary-border-color'?: Property.Color;
     '--ring-search-color'?: Property.Color;
     '--ring-hint-color'?: Property.Color;
     '--ring-link-color'?: Property.Color;
@@ -31,25 +31,27 @@ export interface RingCSSProperties {
     '--ring-warning-color'?: Property.Color;
     '--ring-success-color'?: Property.Color;
     '--ring-text-color'?: Property.Color;
-    '--ring-dark-text-color'?: Property.Color;
+    '--ring-active-text-color'?: Property.Color;
+    '--ring-white-text-color'?: Property.Color;
     '--ring-heading-color'?: Property.Color;
     '--ring-secondary-color'?: Property.Color;
-    '--ring-dark-secondary-color'?: Property.Color;
     '--ring-disabled-color'?: Property.Color;
-    '--ring-dark-disabled-color'?: Property.Color;
-    '--ring-dark-active-color'?: Property.Color;
     '--ring-content-background-color'?: Property.BackgroundColor;
     '--ring-popup-background-color'?: Property.BackgroundColor;
     '--ring-sidebar-background-color'?: Property.BackgroundColor;
     '--ring-selected-background-color'?: Property.BackgroundColor;
     '--ring-hover-background-color'?: Property.BackgroundColor;
-    '--ring-dark-selected-background-color'?: Property.BackgroundColor;
     '--ring-message-background-color'?: Property.BackgroundColor;
     '--ring-navigation-background-color'?: Property.BackgroundColor;
     '--ring-tag-background-color'?: Property.BackgroundColor;
+    '--ring-tag-hover-background-color'?: Property.BackgroundColor;
     '--ring-removed-background-color'?: Property.BackgroundColor;
     '--ring-warning-background-color'?: Property.BackgroundColor;
     '--ring-added-background-color'?: Property.BackgroundColor;
+    '--ring-disabled-background-color'?: Property.BackgroundColor;
+    '--ring-button-danger-active-color'?: Property.BackgroundColor;
+    '--ring-button-loader-background'?: Property.BackgroundColor;
+    '--ring-button-primary-background-color'?: Property.BackgroundColor;
     '--ring-code-background-color'?: Property.BackgroundColor;
     '--ring-code-color'?: Property.Color;
     '--ring-code-comment-color'?: Property.Color;

package/components/global/variables_dark.css

@@ -0,0 +1,68 @@
+/* stylelint-disable color-no-hex */
+
+.dark {
+  --ring-line-color: #475159;
+  --ring-borders-color: #406380;
+  --ring-icon-color: #80929d;
+  --ring-icon-secondary-color: #80929d;
+  --ring-border-disabled-color: #475159;
+  --ring-border-unselected-disabled-color: #363636;
+  --ring-icon-disabled-color: #505253;
+  --ring-border-hover-color: #70b1e6;
+  --ring-main-color: #008eff;
+  --ring-main-hover-color: #007ee5;
+  --ring-icon-error-color: #db5860;
+  --ring-icon-warning-color: #eda200;
+  --ring-icon-success-color: #59a869;
+  --ring-popup-border-components: 0, 42, 76;
+  --ring-popup-border-color: rgba(var(--ring-popup-border-components), 0.1);
+  --ring-popup-shadow-color: rgba(var(--ring-popup-border-components), 0.15);
+  --ring-message-shadow-color: rgba(var(--ring-popup-border-components), 0.3);
+  --ring-pinned-shadow-color: #000;
+  --ring-button-danger-hover-color: var(--ring-error-color);
+  --ring-button-primary-border-color: #80c6ff;
+
+  /* Text */
+  --ring-hint-color: #80929d;
+  --ring-link-color: #70b1e6;
+  --ring-error-color: #db5860;
+  --ring-warning-color: #eda200;
+  --ring-success-color: #47d464;
+  --ring-text-color: #bbb;
+  --ring-active-text-color: #fff;
+  --ring-heading-color: var(--ring-text-color);
+  --ring-secondary-color: #80929d;
+  --ring-disabled-color: #80929d;
+
+  /* Background */
+  --ring-content-background-color: #23272b;
+  --ring-popup-background-color: #111314;
+  --ring-sidebar-background-color: #28343d;
+  --ring-selected-background-color: #062640;
+  --ring-hover-background-color: #0b1a26;
+  --ring-message-background-color: var(--ring-popup-background-color);
+  --ring-navigation-background-color: #111314;
+  --ring-tag-background-color: #3e4d59;
+  --ring-tag-hover-background-color: #333e47;
+  --ring-removed-background-color: #8f5247;
+  --ring-warning-background-color: #593d01;
+  --ring-added-background-color: #365947;
+  --ring-disabled-background-color: #303030;
+  --ring-button-danger-active-color: #26080a;
+  --ring-button-primary-background-color: #007ee5;
+
+  /* Code */
+  --ring-code-background-color: #2b2b2b;
+  --ring-code-color: #a9b7c6;
+  --ring-code-meta-color: #bbb529;
+  --ring-code-keyword-color: #cc7832;
+  --ring-code-tag-background-color: #2b2b2b;
+  --ring-code-tag-color: #e8bf6a;
+  --ring-code-tag-font-weight: normal;
+  --ring-code-field-color: #9876aa;
+  --ring-code-attribute-color: #bababa;
+  --ring-code-number-color: #6897bb;
+  --ring-code-string-color: #6a8759;
+  --ring-code-addition-color: #447152;
+  --ring-code-deletion-color: #656e76;
+}

package/components/header/header.css

@@ -1,22 +1,18 @@
 @import "../global/variables.css";
 
+@value dark from "../global/variables_dark.css";
 @value unit from "../global/global.css";
+@value active from "../link/link.css";
 @value height: calc(unit * 8);
 @value compensate: 3px;
 @value compensated: calc(height - compensate);
 
-.light {
-  background-color: transparent;
+:root {
+  --ring-header-link-color: var(--ring-link-color);
 }
 
 .dark {
-  color: var(--ring-dark-text-color);
-  background-color: var(--ring-navigation-background-color);
-
-  /* override link */
-  & > a {
-    color: var(--ring-dark-secondary-color);
-  }
+  --ring-header-link-color: var(--ring-text-color);
 }
 
 .header {
@@ -27,6 +23,10 @@
   box-sizing: border-box;
   height: height;
 
+  color: var(--ring-text-color);
+
+  background-color: var(--ring-navigation-background-color);
+
   line-height: compensated;
 
   & > * {
@@ -36,6 +36,15 @@
     height: height;
     padding: 0 calc(unit * 1.5) compensate;
   }
+
+  /* override link */
+  & a {
+    color: var(--ring-header-link-color);
+  }
+
+  & .active {
+    color: var(--ring-active-text-color);
+  }
 }
 
 .headerSpaced {
@@ -154,7 +163,7 @@
 
     content: "";
 
-    border: 1px solid var(--ring-dark-text-color);
+    border: 1px solid var(--ring-white-text-color);
     border-radius: 50%;
     background-color: var(--ring-link-hover-color);
   }