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

package/components/tag/tag.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value max-height: 20px;
 
 .tag {
@@ -15,7 +14,7 @@
   max-width: 100%;
   height: max-height;
 
-  padding: 0 unit;
+  padding: 0 var(--ring-unit);
 
   cursor: pointer;
 
@@ -46,9 +45,9 @@
 
   display: inline-block;
 
-  max-width: calc(100% - unit / 2);
+  max-width: calc(100% - var(--ring-unit) / 2);
 
-  margin-right: calc(unit / 2);
+  margin-right: calc(var(--ring-unit) / 2);
 
   white-space: nowrap;
 }
@@ -77,8 +76,8 @@
 
   margin-bottom: -5px !important;
 
-  margin-left: unit;
-  padding-left: calc(unit / 2);
+  margin-left: var(--ring-unit);
+  padding-left: calc(var(--ring-unit) / 2);
 
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
@@ -131,9 +130,9 @@
   right: 0;
 
   height: auto;
-  padding: 0 calc(unit / 2);
+  padding: 0 calc(var(--ring-unit) / 2);
 
-  line-height: calc(unit * 2);
+  line-height: calc(var(--ring-unit) * 2);
 }
 
 .removeIcon.removeIcon {
@@ -157,8 +156,8 @@
   box-sizing: border-box;
   width: max-height;
   height: max-height;
-  margin-right: calc(unit / 2);
-  margin-left: calc(0 - unit);
+  margin-right: calc(var(--ring-unit) / 2);
+  margin-left: calc(var(--ring-unit) * -1);
 
   vertical-align: top;
 
@@ -167,10 +166,10 @@
 }
 
 .customIcon {
-  max-width: calc(unit * 2);
-  max-height: calc(unit * 2);
+  max-width: calc(var(--ring-unit) * 2);
+  max-height: calc(var(--ring-unit) * 2);
 
-  margin-right: calc(unit / 2);
+  margin-right: calc(var(--ring-unit) / 2);
 
   vertical-align: bottom;
 }

package/components/tags-input/tags-input.css

@@ -1,10 +1,9 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value outerContainer, container, input from "../input/input.css";
 
 .tagsInput {
-  --ring-input-icon-offset: calc(unit * 2.5);
+  --ring-input-icon-offset: calc(var(--ring-unit) * 2.5);
   --ring-input-padding-inline: 3px;
 
   box-sizing: border-box;

package/components/toggle/toggle.css

@@ -1,8 +1,6 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value padding: 2px;
-@value disabled-line-color: rgba(255, 255, 255, 0.9);
 @value duration: 300ms;
 @value timing-function: cubic-bezier(0.23, 1, 0.32, 1);
 
@@ -21,11 +19,11 @@
 }
 
 .label {
-  margin-left: unit;
+  margin-left: var(--ring-unit);
 }
 
 .leftLabel {
-  margin-right: unit;
+  margin-right: var(--ring-unit);
 }
 
 .switchWrapper {
@@ -49,17 +47,24 @@
 
 .switch {
   --ring-toggle-item-color: var(--ring-white-text-color);
+  --ring-toggle-background-color: var(--ring-icon-color);
+  --ring-toggle-border-color: var(--ring-toggle-background-color);
+  --ring-switch-border-color: var(--ring-toggle-item-color);
 
   position: relative;
 
   display: block;
 
+  box-sizing: border-box;
+
   width: 100%;
   height: 100%;
 
   transition: background-color timing-function duration;
 
-  background-color: var(--ring-icon-color);
+  border: solid 1px var(--ring-toggle-border-color);
+
+  background-color: var(--ring-toggle-background-color);
 
   .input:focus + & {
     box-shadow: inset 0 0 0 1px var(--ring-border-hover-color), 0 0 0 1px var(--ring-border-hover-color);
@@ -67,11 +72,13 @@
 
   &::before {
     position: absolute;
-    top: padding;
-    left: 0;
+    top: calc(padding - 1px);
+    left: -1px;
 
-    width: calc(unit * 1.5);
-    height: calc(unit * 1.5);
+    box-sizing: border-box;
+
+    width: calc(var(--ring-unit) * 1.5);
+    height: calc(var(--ring-unit) * 1.5);
 
     content: "";
 
@@ -79,13 +86,15 @@
 
     transform: translateX(padding);
 
-    border-radius: calc(unit * 0.75);
+    border: solid 1px var(--ring-switch-border-color);
+
+    border-radius: calc(var(--ring-unit) * 0.75);
     background-color: var(--ring-toggle-item-color);
   }
 }
 
 .input:checked + .switch {
-  background-color: var(--ring-main-color);
+  --ring-toggle-background-color: var(--ring-main-color);
 }
 
 :checked:hover + .switch {
@@ -94,32 +103,32 @@
 
 .size16 {
   & .switchWrapper {
-    width: calc(unit * 3);
-    height: calc(unit * 2);
+    width: calc(var(--ring-unit) * 3);
+    height: calc(var(--ring-unit) * 2);
 
     vertical-align: -3px;
   }
 
   & .switch {
-    border-radius: unit;
+    border-radius: var(--ring-unit);
 
     &::before {
-      width: calc(unit * 1.5);
-      height: calc(unit * 1.5);
+      width: calc(var(--ring-unit) * 1.5);
+      height: calc(var(--ring-unit) * 1.5);
 
-      border-radius: calc(unit * 0.75);
+      border-radius: calc(var(--ring-unit) * 0.75);
     }
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
   & .input:checked + ::before {
-    transform: translateX(calc(unit * 1.5 - padding));
+    transform: translateX(calc(var(--ring-unit) * 1.5 - padding));
   }
 }
 
 .size14 {
   & .switchWrapper {
-    width: calc(unit * 3);
+    width: calc(var(--ring-unit) * 3);
     height: 14px;
 
     vertical-align: -2px;
@@ -144,64 +153,46 @@
 
 .size20 {
   & .switchWrapper {
-    width: calc(unit * 4);
-    height: calc(unit * 2.5);
+    width: calc(var(--ring-unit) * 4);
+    height: calc(var(--ring-unit) * 2.5);
 
     vertical-align: -5px;
   }
 
   & .switch {
-    border-radius: calc(unit * 1.25);
+    border-radius: calc(var(--ring-unit) * 1.25);
 
     &::before {
-      width: calc(unit * 2);
-      height: calc(unit * 2);
+      width: calc(var(--ring-unit) * 2);
+      height: calc(var(--ring-unit) * 2);
 
-      border-radius: calc(unit);
+      border-radius: calc(var(--ring-unit));
     }
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
   & .input:checked + ::before {
-    transform: translateX(calc(unit * 2 - padding));
+    transform: translateX(calc(var(--ring-unit) * 2 - padding));
   }
 }
 
-.input[disabled] + .switch {
-  --ring-toggle-item-color: var(--ring-content-background-color);
+/* stylelint-disable-next-line selector-max-specificity */
+.input:checked[disabled] + .switch {
+  --ring-toggle-background-color: var(--ring-border-selected-disabled-color);
 }
 
-.input[disabled] + ::after {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  width: 100%;
-  height: 100%;
-
-  content: "";
-
-  border-radius: unit;
-  background-image:
-    linear-gradient(
-      45deg,
-      transparent,
-      transparent 37.5%,
-      disabled-line-color 37.5%,
-      disabled-line-color 50%,
-      transparent 50%,
-      transparent 87.5%,
-      disabled-line-color 87.5%,
-      disabled-line-color
-    );
-  background-repeat: repeat;
-  background-size: 4px 4px;
+/* stylelint-disable-next-line selector-max-specificity */
+.input[disabled]:not(:checked) + .switch {
+  --ring-toggle-item-color: var(--ring-content-background-color);
+  --ring-toggle-background-color: var(--ring-disabled-background-color);
+  --ring-toggle-border-color: var(--ring-border-disabled-color);
+  --ring-switch-border-color: var(--ring-border-disabled-color);
 }
 
 .paleSwitch.paleSwitch {
-  background-color: var(--ring-pale-control-color);
+  --ring-toggle-background-color: var(--ring-pale-control-color);
 }
 
 .input:checked + .paleSwitch {
-  background-color: var(--ring-border-hover-color);
+  --ring-toggle-background-color: var(--ring-border-disabled-color);
 }

package/components/tooltip/tooltip.css

@@ -1,10 +1,8 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .tooltip {
-  max-width: calc(unit * 50);
-  padding: unit;
+  max-width: calc(var(--ring-unit) * 50);
+  padding: var(--ring-unit);
 
   text-align: left;
 
@@ -12,7 +10,7 @@
 }
 
 .long {
-  padding: unit calc(unit * 1.5);
+  padding: var(--ring-unit) calc(var(--ring-unit) * 1.5);
 
   font-size: var(--ring-font-size-smaller);
   line-height: var(--ring-line-height-lowest);

package/components/user-agreement/user-agreement.css

@@ -1,6 +1,6 @@
 @import "../global/variables.css";
 
-@value unit, extra-small-screen-media from "../global/global.css";
+@value extra-small-screen-media from "../global/global.css";
 
 .agreementDialog {
   padding-bottom: 80px;
@@ -17,7 +17,7 @@
 }
 
 .suggestion {
-  padding-bottom: unit;
+  padding-bottom: var(--ring-unit);
 
   white-space: nowrap;
 

package/components/user-card/user-card.css

@@ -1,9 +1,7 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .userCardSpaced {
-  padding: calc(unit * 2) calc(unit * 2);
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 2);
 }
 
 .userInformationContainer {
@@ -111,8 +109,8 @@
 .userActiveStatus {
   display: inline-block;
 
-  width: unit;
-  height: unit;
+  width: var(--ring-unit);
+  height: var(--ring-unit);
   margin-right: var(--ring-unit);
   margin-left: 6px;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "6.0.7-beta.0",
+  "version": "6.0.8",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -76,67 +76,68 @@
   },
   "readmeFilename": "README.md",
   "devDependencies": {
-    "@babel/cli": "^7.23.4",
-    "@babel/eslint-parser": "^7.23.3",
-    "@csstools/stylelint-no-at-nest-rule": "^1.0.0",
+    "@babel/cli": "^7.23.9",
+    "@babel/eslint-parser": "^7.23.10",
+    "@csstools/stylelint-no-at-nest-rule": "^2.0.0",
+    "@csstools/css-parser-algorithms": "^2.6.0",
     "@jetbrains/eslint-config": "^5.4.1",
-    "@jetbrains/stylelint-config": "^4.0.1",
+    "@jetbrains/stylelint-config": "^4.0.2",
     "@primer/octicons": "^19.8.0",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-json": "^6.0.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
-    "@storybook/addon-a11y": "7.6.3",
-    "@storybook/addon-docs": "7.6.3",
-    "@storybook/addon-essentials": "7.6.3",
-    "@storybook/addon-storyshots": "7.6.3",
-    "@storybook/addon-storyshots-puppeteer": "7.6.3",
-    "@storybook/addon-storysource": "7.6.3",
-    "@storybook/addons": "7.6.3",
-    "@storybook/preview-api": "7.6.3",
-    "@storybook/react": "7.6.3",
-    "@storybook/react-webpack5": "7.6.3",
-    "@storybook/source-loader": "7.6.3",
-    "@storybook/theming": "7.6.3",
-    "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "^14.5.1",
+    "@storybook/addon-a11y": "7.6.16",
+    "@storybook/addon-docs": "7.6.16",
+    "@storybook/addon-essentials": "7.6.16",
+    "@storybook/addon-storyshots": "7.6.16",
+    "@storybook/addon-storyshots-puppeteer": "7.6.16",
+    "@storybook/addon-storysource": "7.6.16",
+    "@storybook/addons": "7.6.16",
+    "@storybook/preview-api": "7.6.16",
+    "@storybook/react": "7.6.16",
+    "@storybook/react-webpack5": "7.6.16",
+    "@storybook/source-loader": "7.6.16",
+    "@storybook/theming": "7.6.16",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/chai": "^4.3.11",
     "@types/chai-as-promised": "^7.1.8",
     "@types/chai-dom": "0.0.10",
     "@types/chai-enzyme": "^0.6.13",
-    "@types/enzyme": "^3.10.17",
-    "@types/markdown-it": "^13.0.2",
-    "@types/react": "^18.2.39",
-    "@types/react-dom": "^18.2.17",
-    "@types/sinon": "^17.0.2",
+    "@types/enzyme": "^3.10.18",
+    "@types/markdown-it": "^13.0.7",
+    "@types/react": "^18.2.57",
+    "@types/react-dom": "^18.2.19",
+    "@types/sinon": "^17.0.3",
     "@types/sinon-chai": "^3.2.12",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.13.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
-    "acorn": "^8.11.2",
+    "acorn": "^8.11.3",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001566",
-    "chai": "^4.3.10",
+    "caniuse-lite": "^1.0.30001588",
+    "chai": "^5.1.0",
     "chai-as-promised": "^7.1.1",
     "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^1.0.0-rc.12",
-    "core-js": "^3.33.3",
+    "core-js": "^3.36.0",
     "cpy-cli": "^3.1.1",
     "enzyme": "^3.11.0",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "eslint-import-resolver-webpack": "^0.13.8",
     "eslint-plugin-bdd": "^2.1.1",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "events": "^3.3.0",
     "glob": "^10.3.10",
-    "html-webpack-plugin": "^5.5.3",
-    "husky": "^8.0.3",
+    "html-webpack-plugin": "^5.6.0",
+    "husky": "^9.0.11",
     "identity-obj-proxy": "^3.0.0",
-    "imports-loader": "^4.0.1",
+    "imports-loader": "^5.0.0",
     "jest": "~29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-teamcity": "^1.10.0",
@@ -145,35 +146,35 @@
     "karma-mocha": "^2.0.1",
     "karma-sourcemap-loader": "^0.4.0",
     "karma-teamcity-reporter": "^2.0.0",
-    "karma-webpack": "^5.0.0",
-    "lint-staged": "^14.0.1",
-    "markdown-it": "^13.0.2",
+    "karma-webpack": "^5.0.1",
+    "lint-staged": "^15.2.2",
+    "markdown-it": "^14.0.0",
     "merge-options": "^3.0.4",
-    "mocha": "^10.2.0",
+    "mocha": "^10.3.0",
     "pinst": "^3.0.0",
-    "prettier": "^3.1.0",
-    "puppeteer": "^21.2.1",
+    "prettier": "^3.2.5",
+    "puppeteer": "^22.1.0",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
-    "regenerator-runtime": "^0.14.0",
+    "regenerator-runtime": "^0.14.1",
     "rimraf": "^5.0.5",
-    "rollup": "^3.29.4",
+    "rollup": "^4.12.0",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-styles": "^4.0.0",
     "sinon": "^17.0.1",
     "sinon-chai": "^3.7.0",
     "storage-mock": "^2.1.0",
-    "storybook": "^7.6.3",
+    "storybook": "7.6.16",
     "storybook-addon-themes": "^6.1.0",
-    "stylelint": "^15.11.0",
+    "stylelint": "^16.2.1",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
-    "terser-webpack-plugin": "^5.3.9",
-    "typescript": "~5.3.2",
+    "terser-webpack-plugin": "^5.3.10",
+    "typescript": "~5.3.3",
     "wallaby-webpack": "^3.9.16",
-    "webpack": "^5.89.0",
+    "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4",
     "xmlappend": "^1.0.4"
   },
@@ -197,54 +198,54 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.23.5",
+    "@babel/core": "^7.23.9",
     "@babel/preset-typescript": "^7.23.3",
     "@jetbrains/babel-preset-jetbrains": "^2.3.2",
-    "@jetbrains/icons": "^3.22.0",
-    "@jetbrains/logos": "^2.2.23",
+    "@jetbrains/icons": "^4.0.1",
+    "@jetbrains/logos": "^2.2.25",
     "@jetbrains/postcss-require-hover": "^0.1.2",
     "@types/combokeys": "^2.4.9",
     "@types/deep-equal": "^1.0.4",
     "@types/element-resize-detector": "^1.1.6",
     "@types/prop-types": "^15.7.11",
-    "@types/react-virtualized": "9.21.28",
+    "@types/react-virtualized": "9.21.29",
     "@types/util-deprecate": "^1.0.3",
     "@ungap/url-search-params": "^0.2.2",
     "babel-loader": "9.1.3",
     "babel-plugin-transform-define": "^2.1.4",
-    "browserslist": "^4.22.2",
+    "browserslist": "^4.23.0",
     "change-case": "^4.1.1",
-    "classnames": "^2.3.2",
+    "classnames": "^2.5.1",
     "combokeys": "^3.0.1",
-    "css-loader": "^6.8.1",
-    "csstype": "^3.1.2",
-    "date-fns": "^2.30.0",
+    "css-loader": "^6.10.0",
+    "csstype": "^3.1.3",
+    "date-fns": "^3.3.1",
     "deep-equal": "^2.2.3",
     "element-resize-detector": "^1.2.4",
     "es6-error": "^4.1.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "fastdom": "^1.0.11",
+    "fastdom": "^1.0.12",
     "file-loader": "^6.2.0",
     "focus-trap": "^7.5.4",
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.4.32",
+    "postcss": "^8.4.35",
     "postcss-calc": "^9.0.1",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",
-    "postcss-loader": "^7.3.3",
+    "postcss-loader": "^8.1.0",
     "postcss-modules-values-replace": "^4.1.0",
-    "postcss-preset-env": "^9.3.0",
+    "postcss-preset-env": "^9.4.0",
     "prop-types": "^15.8.1",
     "react-movable": "^3.0.4",
     "react-virtualized": "^9.22.5",
     "react-waypoint": "^10.3.0",
     "scrollbar-width": "^3.1.1",
     "simply-uuid": "^1.0.1",
-    "sniffr": "^1.3.1",
+    "sniffr": "^1.3.2",
     "style-inject": "^0.3.0",
-    "style-loader": "~3.3.3",
+    "style-loader": "~3.3.4",
     "url-loader": "^4.1.1",
     "util-deprecate": "^1.0.2"
   },