@jetbrains/ring-ui 6.0.7-beta.0 → 6.0.8

package/components/panel/panel.css

@@ -1,14 +1,12 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .panel {
   composes: panel from "../dialog/dialog.css"; /* TODO: Invert dependency using :externals CSS Modules selector */
 
   position: relative;
 
-  margin-top: calc(unit * 2);
-  padding: calc(unit * 2) calc(unit * 4) calc(unit * 4);
+  margin-top: calc(var(--ring-unit) * 2);
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4) calc(var(--ring-unit) * 4);
 
   border-top: 1px solid var(--ring-popup-border-color);
 
@@ -17,6 +15,6 @@
   }
 
   & > button:not(:last-child) {
-    margin-right: unit;
+    margin-right: var(--ring-unit);
   }
 }

package/components/progress-bar/progress-bar.css

@@ -1,7 +1,6 @@
 @import "../global/variables.css";
 
 @value dark from "../global/variables_dark.css";
-@value unit from "../global/global.css";
 
 :root {
   --ring-progress-bar-background-color: rgba(0, 0, 0, 0.2);
@@ -20,8 +19,8 @@
 
   overflow: hidden;
 
-  height: calc(unit / 2);
-  margin-bottom: calc(unit / 2);
+  height: calc(var(--ring-unit) / 2);
+  margin-bottom: calc(var(--ring-unit) / 2);
 
   border-radius: 2px;
   background-color: var(--ring-progress-bar-background-color);
@@ -49,7 +48,7 @@
   border-radius: 2px;
   background-color: var(--ring-main-color);
 
-  line-height: calc(unit / 2);
+  line-height: calc(var(--ring-unit) / 2);
 
   &::after {
     position: absolute;

package/components/query-assist/query-assist.css

@@ -1,13 +1,12 @@
 @import "../global/variables.css";
 @import "../button/button.css";
 
-@value unit from "../global/global.css";
 @value overInputZIndex: 2;
-@value inputGap: calc(unit * 3);
+@value inputGap: calc(var(--ring-unit) * 3);
 
 .queryAssist {
-  --ring-input-icon-offset: calc(unit * 2.5);
-  --ring-input-padding-inline: unit;
+  --ring-input-icon-offset: calc(var(--ring-unit) * 2.5);
+  --ring-input-padding-inline: var(--ring-unit);
   --ring-input-padding-block: 1px;
 
   position: relative;

package/components/radio/radio.css

@@ -1,8 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-@value radio-size: calc(2 * unit);
-
 .radio {
   position: relative;
 
@@ -30,15 +27,15 @@
   flex-shrink: 0;
 
   box-sizing: border-box;
-  width: radio-size;
-  height: radio-size;
+  width: calc(2 * var(--ring-unit));
+  height: calc(2 * var(--ring-unit));
 
   user-select: none;
   transition: border-color var(--ring-ease), box-shadow var(--ring-ease);
   pointer-events: none;
 
   border: 1px solid var(--ring-borders-color);
-  border-radius: unit;
+  border-radius: var(--ring-unit);
   background-color: var(--ring-content-background-color);
 
   &::after {
@@ -46,8 +43,8 @@
     top: 3px;
     left: 3px;
 
-    width: unit;
-    height: unit;
+    width: var(--ring-unit);
+    height: var(--ring-unit);
 
     content: "";
 
@@ -57,7 +54,7 @@
 
     opacity: 0;
 
-    border-radius: calc(unit / 2);
+    border-radius: calc(var(--ring-unit) / 2);
     background-color: var(--ring-main-color);
   }
 }
@@ -109,7 +106,7 @@
 
     /* stylelint-disable-next-line selector-max-specificity */
     &::after {
-      background-color: var(--ring-icon-disabled-color);
+      background-color: var(--ring-border-selected-disabled-color);
     }
   }
 
@@ -119,7 +116,7 @@
 }
 
 .label {
-  margin-left: unit;
+  margin-left: var(--ring-unit);
 
   line-height: var(--ring-line-height);
 }

package/components/select/select-popup.css

@@ -1,11 +1,9 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .filterWithTags {
   overflow: hidden;
 
-  margin: calc(unit * 2) unit 0;
+  margin: calc(var(--ring-unit) * 2) var(--ring-unit) 0;
   padding: 3px;
 
   text-align: left;
@@ -52,26 +50,26 @@
   display: flex;
 
   margin: 0;
-  padding-right: unit;
-  padding-left: calc(unit * 5.5);
+  padding-right: var(--ring-unit);
+  padding-left: calc(var(--ring-unit) * 5.5);
 
   border-bottom: 1px solid var(--ring-borders-color);
 
   [dir="rtl"] & {
-    padding-right: calc(unit * 5.5);
-    padding-left: unit;
+    padding-right: calc(var(--ring-unit) * 5.5);
+    padding-left: var(--ring-unit);
   }
 }
 
 .filterIcon {
   position: absolute;
   top: 7px;
-  left: calc(unit * 2);
+  left: calc(var(--ring-unit) * 2);
 
   color: var(--ring-icon-color);
 
   [dir="rtl"] & {
-    right: calc(unit * 2);
+    right: calc(var(--ring-unit) * 2);
     left: auto;
   }
 }
@@ -93,8 +91,8 @@
 .message {
   display: inline-block;
 
-  margin: unit 0;
-  padding: 0 calc(2 * unit);
+  margin: var(--ring-unit) 0;
+  padding: 0 calc(2 * var(--ring-unit));
 }
 
 .selectAll {

package/components/select/select.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value button-shadow from "../button/button.css";
 
 .select {
@@ -29,12 +28,12 @@
   }
 
   .toolbar & {
-    height: calc(4 * unit);
-    margin: unit 0;
+    height: calc(4 * var(--ring-unit));
+    margin: var(--ring-unit) 0;
   }
 
   &.buttonSpaced {
-    padding: 0 calc(2 * unit);
+    padding: 0 calc(2 * var(--ring-unit));
   }
 }
 
@@ -63,8 +62,8 @@
 
   display: inline-block;
 
-  width: calc(2 * unit);
-  height: calc(2 * unit);
+  width: calc(2 * var(--ring-unit));
+  height: calc(2 * var(--ring-unit));
   margin: 0 4px;
 
   background-repeat: no-repeat;
@@ -80,15 +79,15 @@
 }
 
 .sizeS {
-  width: calc(unit * 12);
+  width: calc(var(--ring-unit) * 12);
 }
 
 .sizeM {
-  width: calc(unit * 30);
+  width: calc(var(--ring-unit) * 30);
 }
 
 .sizeL {
-  width: calc(unit * 50);
+  width: calc(var(--ring-unit) * 50);
 }
 
 .sizeFULL {
@@ -113,7 +112,7 @@
 
   box-sizing: border-box;
   width: 100%;
-  height: calc(unit * 4 + 1px);
+  height: calc(var(--ring-unit) * 4 + 1px);
   padding: 0 0 3px;
 
   cursor: pointer;
@@ -157,10 +156,10 @@
   display: block;
 
   width: 100%;
-  padding-left: unit;
+  padding-left: var(--ring-unit);
 
   text-align: left;
-  vertical-align: calc(0 - unit);
+  vertical-align: calc(var(--ring-unit) * -1);
 }
 
 .buttonValue:focus-visible {
@@ -216,8 +215,8 @@
 }
 
 .popup {
-  min-width: calc(unit * 30);
-  max-width: calc(unit * 40);
+  min-width: calc(var(--ring-unit) * 30);
+  max-width: calc(var(--ring-unit) * 40);
 }
 
 .chevron.chevron {

package/components/sidebar/sidebar.css

@@ -1,7 +1,5 @@
 @import "../global/global.css";
 
-@value unit from "../global/global.css";
-
 @keyframes show-sidebar {
   0% {
     right: -100%;
@@ -25,10 +23,10 @@
 
   box-sizing: border-box;
 
-  width: calc(unit * 58);
+  width: calc(var(--ring-unit) * 58);
   height: 100%;
 
-  padding-top: calc(2 * unit);
+  padding-top: calc(2 * var(--ring-unit));
 
   transition: right 0.5s ease, visibility 0.5s;
 
@@ -60,16 +58,16 @@
 :global(.ring-sidebar__avatar) {
   float: left;
 
-  width: calc(6 * unit);
-  height: calc(6 * unit);
+  width: calc(6 * var(--ring-unit));
+  height: calc(6 * var(--ring-unit));
   object-fit: contain;
 
-  padding: 0 calc(2 * unit) 0 calc(4 * unit);
+  padding: 0 calc(2 * var(--ring-unit)) 0 calc(4 * var(--ring-unit));
 }
 
 :global(.ring-sidebar__title) {
   margin: 0;
-  padding-left: calc(4 * unit);
+  padding-left: calc(4 * var(--ring-unit));
 
   vertical-align: middle;
 
@@ -90,8 +88,8 @@
 :global(.ring-sidebar__section) {
   position: relative;
 
-  margin-top: calc(3 * unit);
-  padding: 0 calc(2 * unit) 0 calc(4 * unit);
+  margin-top: calc(3 * var(--ring-unit));
+  padding: 0 calc(2 * var(--ring-unit)) 0 calc(4 * var(--ring-unit));
 }
 
 :global(.ring-sidebar__section-title) {
@@ -107,7 +105,7 @@
   color: var(--ring-text-color);
 
   font-size: var(--ring-font-size);
-  line-height: calc(3 * unit);
+  line-height: calc(3 * var(--ring-unit));
 }
 
 :global(.ring-sidebar__section-text_multiline) {
@@ -117,7 +115,7 @@
 }
 
 :global(.ring-sidebar__section-roster) {
-  margin-top: unit;
+  margin-top: var(--ring-unit);
 }
 
 :global(.ring-sidebar__section-icon) {
@@ -126,7 +124,7 @@
 
   display: block;
 
-  width: calc(4 * unit);
+  width: calc(4 * var(--ring-unit));
 
   text-align: center;
 
@@ -136,7 +134,7 @@
 }
 
 :global(.ring-sidebar__empty) {
-  margin-top: calc(unit * 4);
+  margin-top: calc(var(--ring-unit) * 4);
 
   text-align: center;
 }
@@ -148,7 +146,7 @@
 }
 
 :global(.ring-sidebar__empty-description) {
-  margin-top: calc(unit * 2);
+  margin-top: calc(var(--ring-unit) * 2);
   padding-top: 4px;
 
   color: var(--ring-text-color);

package/components/table/table.css

@@ -1,9 +1,7 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-@value height: calc(4 * unit);
 @value compensate: 2px;
-@value compensated: calc(height - compensate);
+@value compensated: calc(calc(4 * var(--ring-unit)) - compensate);
 
 .tableWrapper {
   position: relative;
@@ -23,8 +21,8 @@
   composes: font-smaller-lower from "../global/global.css";
 
   box-sizing: border-box;
-  height: calc(unit * 3);
-  padding-right: calc(unit * 5);
+  height: calc(var(--ring-unit) * 3);
+  padding-right: calc(var(--ring-unit) * 5);
 
   text-align: left;
   white-space: nowrap;
@@ -35,12 +33,12 @@
 }
 
 .headerCell:first-child {
-  padding-left: calc(unit * 4);
+  padding-left: calc(var(--ring-unit) * 4);
 }
 
 .headerCell:last-child {
   width: 100%;
-  padding-right: calc(unit * 4);
+  padding-right: calc(var(--ring-unit) * 4);
 }
 
 .headerCell:first-child:only-child {
@@ -76,7 +74,7 @@
 }
 
 .caption {
-  padding-top: unit;
+  padding-top: var(--ring-unit);
   padding-bottom: 6px;
 
   color: var(--ring-text-color);
@@ -152,15 +150,15 @@
 
   min-width: 0;
 
-  height: height;
+  height: calc(4 * var(--ring-unit));
   padding: 0;
-  padding-right: calc(unit * 5);
+  padding-right: calc(var(--ring-unit) * 5);
 
   color: var(--ring-text-color);
 }
 
 .cell:first-child {
-  padding-left: calc(unit * 4);
+  padding-left: calc(var(--ring-unit) * 4);
 }
 
 .cell:last-child {
@@ -169,12 +167,12 @@
   /* Markup hack, allows cell to have content which is wider than cell and collapses it */
 
   max-width: 0;
-  padding-right: calc(unit * 4);
+  padding-right: calc(var(--ring-unit) * 4);
 }
 
 .cell:first-child {
-  min-width: calc(unit * 37);
-  max-width: calc(unit * 77);
+  min-width: calc(var(--ring-unit) * 37);
+  max-width: calc(var(--ring-unit) * 77);
 }
 
 .cell:first-child:only-child {
@@ -207,7 +205,7 @@
 
 .dragHandle {
   top: top;
-  left: calc(-2 * unit);
+  left: calc(-2 * var(--ring-unit));
 
   cursor: grab;
 
@@ -218,7 +216,7 @@
 .dragHandle.dragHandle {
   position: absolute;
 
-  height: calc(height - top);
+  height: calc(calc(4 * var(--ring-unit)) - top);
   padding: 0;
 }
 
@@ -228,7 +226,7 @@
 }
 
 .rowCollapseExpandButton {
-  padding-right: calc(unit / 2);
+  padding-right: calc(var(--ring-unit) / 2);
   padding-left: 7px;
 }
 

package/components/table-legacy/table-legacy.css

@@ -1,7 +1,5 @@
 @import "./table-legacy__toolbar.css";
 
-@value unit from "../global/global.css";
-
 :global(.ring-table) {
   width: 100%;
 
@@ -32,7 +30,7 @@
 
   display: table-cell;
 
-  padding: 0 unit;
+  padding: 0 var(--ring-unit);
 
   text-align: left;
   white-space: nowrap;
@@ -51,7 +49,7 @@
 }
 
 :global(.ring-table__title:first-child) {
-  padding-left: calc(unit * 4);
+  padding-left: calc(var(--ring-unit) * 4);
 }
 
 /* Have to emulate right border because of Fx weird bug —
@@ -79,7 +77,7 @@
 }
 
 :global(.ring-table__title_nested) {
-  padding-left: calc(unit * 5);
+  padding-left: calc(var(--ring-unit) * 5);
 }
 
 /* fix header checkbox position in nested table */
@@ -96,7 +94,7 @@
   width: 12px;
   height: 9px;
 
-  margin-left: calc(unit * 2);
+  margin-left: calc(var(--ring-unit) * 2);
   padding-bottom: 21px;
 
   cursor: pointer;
@@ -129,7 +127,7 @@
 }
 
 :global(.ring-table__column_selector) {
-  min-width: calc(3 * unit);
+  min-width: calc(3 * var(--ring-unit));
   padding: 0 !important;
 
   text-align: center;
@@ -138,13 +136,13 @@
 :global(.ring-table__selector) {
   display: inline-block;
 
-  margin: 0 0 0 calc(unit / 2);
+  margin: 0 0 0 calc(var(--ring-unit) / 2);
 }
 
 :global(.ring-table__column) {
   display: table-cell;
 
-  padding: calc(unit - 2px) unit;
+  padding: calc(var(--ring-unit) - 2px) var(--ring-unit);
 
   vertical-align: middle;
   white-space: nowrap;
@@ -162,7 +160,7 @@
 }
 
 :global(.ring-table__column:first-child) {
-  padding-left: calc(4 * unit);
+  padding-left: calc(4 * var(--ring-unit));
 }
 
 :global(.ring-table__column.ring-table__column_gap) {
@@ -172,7 +170,7 @@
 
 /* Combined class is required here for specificity */
 :global(.ring-table__column.ring-table__column_toggle) {
-  width: calc(unit * 2);
+  width: calc(var(--ring-unit) * 2);
   padding: 0;
 
   text-align: right;
@@ -201,7 +199,7 @@
 }
 
 :global(.ring-table__column_gap) {
-  padding-left: calc(unit * 2) !important;
+  padding-left: calc(var(--ring-unit) * 2) !important;
 }
 
 :global(.ring-table__column-title) {
@@ -209,13 +207,13 @@
 }
 
 :global(.ring-table__column_wide) {
-  min-width: calc(10 * unit);
+  min-width: calc(10 * var(--ring-unit));
 }
 
 :global(.ring-table__column_limited) {
   overflow: hidden;
 
-  max-width: calc(50 * unit);
+  max-width: calc(50 * var(--ring-unit));
 
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -232,7 +230,7 @@
 }
 
 :global(.ring-table__column_narrow) {
-  min-width: calc(3 * unit);
+  min-width: calc(3 * var(--ring-unit));
   padding: 0 !important;
 }
 
@@ -244,7 +242,7 @@
   display: table-row;
 
   width: 100%;
-  height: calc(5 * unit);
+  height: calc(5 * var(--ring-unit));
 }
 
 :global(.ring-table__row .ring-table__row_ghost) {
@@ -294,7 +292,7 @@
 }
 
 :global(.ring-table__description) {
-  margin-left: unit;
+  margin-left: var(--ring-unit);
 
   color: var(--ring-secondary-color);
 
@@ -302,13 +300,13 @@
 }
 
 :global(.ring-table__avatar) {
-  width: calc(3 * unit);
-  height: calc(3 * unit + 3px); /* If avatar is missing */
+  width: calc(3 * var(--ring-unit));
+  height: calc(3 * var(--ring-unit) + 3px); /* If avatar is missing */
 }
 
 :global(.ring-table__avatar-img) {
-  width: calc(3 * unit);
-  height: calc(3 * unit);
+  width: calc(3 * var(--ring-unit));
+  height: calc(3 * var(--ring-unit));
 }
 
 :global(.ring-table__header_sticky) {
@@ -325,17 +323,17 @@
 }
 
 :global(.table__pager) {
-  padding: calc(4 * unit) calc(4 * unit);
+  padding: calc(4 * var(--ring-unit)) calc(4 * var(--ring-unit));
 }
 
 :global(.table__pager-links) {
-  margin-bottom: calc(2 * unit);
+  margin-bottom: calc(2 * var(--ring-unit));
 }
 
 :global(.table__pager-link) {
   display: inline-block;
 
-  margin-right: calc(4 * unit);
+  margin-right: calc(4 * var(--ring-unit));
 }
 
 :global(.table__pager-link_disabled) {

package/components/table-legacy/table-legacy__toolbar.css

@@ -1,5 +1,3 @@
-@value unit from "../global/global.css";
-
 :global(.ring-table__toolbar) {
   background: inherit;
 }
@@ -9,9 +7,9 @@
 
   display: block;
 
-  min-height: calc(unit * 3);
+  min-height: calc(var(--ring-unit) * 3);
 
-  padding: calc(unit * 2) calc(unit * 4);
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4);
 
   white-space: initial;
 

package/components/tabs/tabs.css

@@ -4,7 +4,6 @@
 @import "../link/link.css";
 
 @value dark from "../global/variables_dark.css";
-@value unit from "../global/global.css";
 @value line-shadow: inset 0 -1px 0 0;
 @value selected-line-shadow: inset 0 -2px 0 0;
 
@@ -24,7 +23,7 @@
 .titles {
   display: inline-block;
 
-  margin-bottom: calc(unit * 2);
+  margin-bottom: calc(var(--ring-unit) * 2);
 }
 
 .titles {
@@ -48,7 +47,7 @@
   border-radius: 0;
   background: none;
 
-  line-height: calc(unit * 4);
+  line-height: calc(var(--ring-unit) * 4);
 
   &:hover,
   &:active {
@@ -82,7 +81,7 @@
 }
 
 .title + .title {
-  margin-left: calc(unit * 3);
+  margin-left: calc(var(--ring-unit) * 3);
 }
 
 .title[disabled] {