@jetbrains/ring-ui 7.0.12 → 7.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6,8 +6,14 @@
6
6
  --ring-button-focus-border-color: var(--ring-border-hover-color);
7
7
  --ring-button-shadow: inset 0 0 0 1px;
8
8
  --ring-button-loader-width: calc(var(--ring-unit) * 8);
9
+ --ring-button-flat-disabled-color: var(--ring-white-text-color);
9
10
  }
10
11
 
12
+ :global(.ring-ui-theme-dark) {
13
+ --ring-button-flat-disabled-color: var(--ring-icon-color);
14
+ }
15
+
16
+
11
17
  .heightS {
12
18
  --ring-button-height: calc(var(--ring-unit) * 3);
13
19
  --ring-button-padding-block: calc(var(--ring-unit) * 0.5);
@@ -149,6 +155,52 @@
149
155
  }
150
156
  }
151
157
 
158
+ .active.block {
159
+ --ring-button-background-color: var(--ring-hover-background-color);
160
+ --ring-button-border-color: var(--ring-main-color);
161
+
162
+ transition: none;
163
+ }
164
+
165
+ .danger {
166
+ --ring-button-focus-border-color: var(--ring-button-danger-hover-color);
167
+
168
+ color: var(--ring-error-color);
169
+
170
+ &:active,
171
+ &.active {
172
+ --ring-button-background-color: var(--ring-button-danger-active-color);
173
+ }
174
+
175
+ &:active,
176
+ &.active,
177
+ &:hover {
178
+ --ring-button-border-color: var(--ring-button-danger-hover-color);
179
+ }
180
+ }
181
+
182
+ .disabled {
183
+ cursor: auto;
184
+
185
+ &,
186
+ &:hover,
187
+ &:active {
188
+ --ring-button-background-color: var(--ring-disabled-background-color);
189
+ --ring-button-border-color: var(--ring-border-disabled-color);
190
+
191
+ color: var(--ring-disabled-color);
192
+
193
+ & .icon {
194
+ color: var(--ring-icon-disabled-color);
195
+ }
196
+ }
197
+
198
+ &.active {
199
+ --ring-button-background-color: var(--ring-disabled-selected-background-color);
200
+ --ring-button-border-color: var(--ring-border-selected-disabled-color);
201
+ }
202
+ }
203
+
152
204
  .primaryBlock {
153
205
  --ring-button-background-color: var(--ring-main-color);
154
206
  --ring-button-border-color: transparent;
@@ -172,8 +224,14 @@
172
224
  }
173
225
 
174
226
  &.disabled {
175
- --ring-button-background-color: var(--ring-disabled-background-color);
176
- --ring-button-border-color: var(--ring-border-disabled-color);
227
+ --ring-button-background-color: var(--ring-border-disabled-active-color);
228
+ --ring-button-border-color: transparent;
229
+
230
+ color: var(--ring-button-flat-disabled-color);
231
+
232
+ & .icon {
233
+ color: var(--ring-button-flat-disabled-color);
234
+ }
177
235
  }
178
236
 
179
237
  &.loader {
@@ -187,66 +245,19 @@
187
245
  left: 0;
188
246
 
189
247
  border-radius: var(--ring-border-radius);
248
+ background-color: var(--ring-main-color);
190
249
 
191
250
  &::before {
192
251
  background-image: linear-gradient(
193
252
  to right,
194
- var(--ring-main-color),
253
+ transparent,
195
254
  var(--ring-button-loader-background) 40%,
196
- var(--ring-main-color) 80%
255
+ transparent 80%
197
256
  );
198
257
  }
199
258
  }
200
259
  }
201
260
 
202
- .danger {
203
- --ring-button-focus-border-color: var(--ring-button-danger-hover-color);
204
-
205
- color: var(--ring-error-color);
206
-
207
- &:active,
208
- &.active {
209
- --ring-button-background-color: var(--ring-button-danger-active-color);
210
- }
211
-
212
- &:active,
213
- &.active,
214
- &:hover {
215
- --ring-button-border-color: var(--ring-button-danger-hover-color);
216
- }
217
- }
218
-
219
- .disabled {
220
- cursor: auto;
221
-
222
- &,
223
- &:hover,
224
- &:active {
225
- --ring-button-background-color: var(--ring-disabled-background-color);
226
- --ring-button-border-color: var(--ring-border-disabled-color);
227
-
228
- color: var(--ring-disabled-color);
229
-
230
- & .icon {
231
- color: var(--ring-icon-disabled-color);
232
- }
233
- }
234
- }
235
-
236
- .active {
237
- &.block {
238
- --ring-button-background-color: var(--ring-hover-background-color);
239
- --ring-button-border-color: var(--ring-main-color);
240
-
241
- transition: none;
242
- }
243
-
244
- &.disabled {
245
- --ring-button-background-color: var(--ring-disabled-selected-background-color);
246
- --ring-button-border-color: var(--ring-border-selected-disabled-color);
247
- }
248
- }
249
-
250
261
  .iconOnly {
251
262
  &.heightS {
252
263
  --ring-button-padding-block: calc(var(--ring-unit) * 0.75);
@@ -51,8 +51,8 @@
51
51
  --ring-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #6C707E */
52
52
  --ring-button-danger-hover-components: var(--ring-icon-error-color);
53
53
  --ring-button-danger-hover-color: var(--ring-icon-error-color);
54
- --ring-button-primary-border-components: 49, 95, 189;
55
- --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #315FBD */
54
+ --ring-button-primary-border-components: 46, 85, 163;
55
+ --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #2E55A3 */
56
56
  --ring-dialog-overlay-components: 0, 0, 0;
57
57
  --ring-dialog-overlay-opacity: 0.4;
58
58
  --ring-popup-shadow: 0 2px 8px var(--ring-popup-shadow-color), 0 1px 2px var(--ring-popup-secondary-shadow-color);
@@ -115,8 +115,7 @@
115
115
  --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #EBECF0 */
116
116
  --ring-button-danger-active-components: 250, 212, 216;
117
117
  --ring-button-danger-active-color: rgb(var(--ring-button-danger-active-components)); /* #FAD4D8 */
118
- --ring-button-loader-background-components: 70, 130, 250;
119
- --ring-button-loader-background: rgb(var(--ring-button-loader-background-components)); /* #4682FA */
118
+ --ring-button-loader-background: rgba(var(--ring-white-text-components), 0.4);
120
119
  --ring-button-primary-background-components: 53, 116, 240;
121
120
  --ring-button-primary-background-color: rgb(var(--ring-button-primary-background-components)); /* #3574F0 */
122
121
  --ring-table-loader-background-color: rgba(var(--ring-content-background-components), 0.5); /* #FFFFFF50 */
@@ -41,8 +41,8 @@
41
41
  --ring-pinned-shadow-components: 0, 0, 0;
42
42
  --ring-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #000 */
43
43
  --ring-button-danger-hover-color: var(--ring-error-color);
44
- --ring-button-primary-border-components: 53, 116, 240;
45
- --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #3574F0 */
44
+ --ring-button-primary-border-components: 153, 187, 255;
45
+ --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #99BBFF */
46
46
  --ring-dialog-overlay-components: 0, 0, 0;
47
47
  --ring-dialog-overlay-opacity: 0.7;
48
48
  --ring-popup-shadow: 0 2px 8px var(--ring-popup-shadow-color), 0 1px 2px var(--ring-popup-secondary-shadow-color);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jetbrains/ring-ui",
3
- "version": "7.0.12",
3
+ "version": "7.0.14",
4
4
  "description": "JetBrains UI library",
5
5
  "author": "JetBrains",
6
6
  "license": "Apache-2.0",
@@ -77,37 +77,37 @@
77
77
  },
78
78
  "readmeFilename": "README.md",
79
79
  "devDependencies": {
80
- "@babel/cli": "^7.25.9",
80
+ "@babel/cli": "^7.26.4",
81
81
  "@babel/eslint-parser": "^7.25.9",
82
82
  "@babel/plugin-syntax-import-assertions": "^7.26.0",
83
83
  "@csstools/css-parser-algorithms": "^3.0.4",
84
84
  "@csstools/stylelint-no-at-nest-rule": "^4.0.0",
85
- "@eslint/compat": "^1.2.3",
85
+ "@eslint/compat": "^1.2.4",
86
86
  "@eslint/eslintrc": "^3.2.0",
87
87
  "@eslint/js": "^9.15.0",
88
88
  "@jetbrains/eslint-config": "^6.0.4",
89
89
  "@jetbrains/logos": "3.0.0-canary.734b213.0",
90
90
  "@jetbrains/stylelint-config": "^4.0.2",
91
91
  "@jetbrains/rollup-css-plugin": "./packages/rollup-css-plugin",
92
- "@primer/octicons": "^19.12.0",
92
+ "@primer/octicons": "^19.13.0",
93
93
  "@rollup/plugin-babel": "^6.0.4",
94
94
  "@rollup/plugin-json": "^6.1.0",
95
95
  "@rollup/plugin-node-resolve": "^15.3.0",
96
96
  "@rollup/plugin-replace": "^6.0.1",
97
- "@storybook/addon-a11y": "8.4.5",
98
- "@storybook/addon-docs": "8.4.5",
99
- "@storybook/addon-essentials": "8.4.5",
100
- "@storybook/addon-themes": "^8.4.5",
101
- "@storybook/components": "8.4.5",
102
- "@storybook/csf": "^0.1.11",
103
- "@storybook/manager-api": "8.4.5",
104
- "@storybook/preview-api": "8.4.5",
105
- "@storybook/react": "8.4.5",
106
- "@storybook/react-webpack5": "8.4.5",
107
- "@storybook/test-runner": "^0.20.0",
108
- "@storybook/theming": "8.4.5",
97
+ "@storybook/addon-a11y": "8.4.7",
98
+ "@storybook/addon-docs": "8.4.7",
99
+ "@storybook/addon-essentials": "8.4.7",
100
+ "@storybook/addon-themes": "^8.4.7",
101
+ "@storybook/components": "8.4.7",
102
+ "@storybook/csf": "^0.1.12",
103
+ "@storybook/manager-api": "8.4.7",
104
+ "@storybook/preview-api": "8.4.7",
105
+ "@storybook/react": "8.4.7",
106
+ "@storybook/react-webpack5": "8.4.7",
107
+ "@storybook/test-runner": "^0.20.1",
108
+ "@storybook/theming": "8.4.7",
109
109
  "@testing-library/dom": "^10.4.0",
110
- "@testing-library/react": "^16.0.1",
110
+ "@testing-library/react": "^16.1.0",
111
111
  "@testing-library/user-event": "^14.5.2",
112
112
  "@types/chai": "^5.0.1",
113
113
  "@types/chai-as-promised": "^8.0.1",
@@ -122,7 +122,7 @@
122
122
  "@types/sinon-chai": "^4.0.0",
123
123
  "@types/webpack-env": "^1.18.5",
124
124
  "@vitejs/plugin-react": "^4.3.4",
125
- "@vitest/eslint-plugin": "^1.1.12",
125
+ "@vitest/eslint-plugin": "^1.1.14",
126
126
  "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
127
127
  "acorn": "^8.14.0",
128
128
  "axe-playwright": "^2.0.3",
@@ -136,7 +136,7 @@
136
136
  "core-js": "^3.39.0",
137
137
  "cpy-cli": "^5.0.0",
138
138
  "enzyme": "^3.11.0",
139
- "eslint": "^9.15.0",
139
+ "eslint": "^9.16.0",
140
140
  "eslint-config-prettier": "^9.1.0",
141
141
  "eslint-formatter-jslint-xml": "^8.40.0",
142
142
  "eslint-import-resolver-webpack": "^0.13.9",
@@ -144,11 +144,11 @@
144
144
  "eslint-plugin-jsx-a11y": "^6.10.2",
145
145
  "eslint-plugin-prettier": "^5.2.1",
146
146
  "eslint-plugin-react": "^7.37.2",
147
- "eslint-plugin-react-hooks": "^5.0.0",
147
+ "eslint-plugin-react-hooks": "^5.1.0",
148
148
  "eslint-plugin-storybook": "^0.11.1",
149
149
  "events": "^3.3.0",
150
150
  "glob": "^11.0.0",
151
- "globals": "^15.12.0",
151
+ "globals": "^15.13.0",
152
152
  "html-webpack-plugin": "^5.6.3",
153
153
  "http-server": "^14.1.1",
154
154
  "husky": "^9.1.7",
@@ -160,26 +160,26 @@
160
160
  "markdown-it": "^14.1.0",
161
161
  "merge-options": "^3.0.4",
162
162
  "pinst": "^3.0.0",
163
- "prettier": "^3.4.1",
163
+ "prettier": "^3.4.2",
164
164
  "raw-loader": "^4.0.2",
165
165
  "react": "^18.3.1",
166
166
  "react-dom": "^18.3.1",
167
- "react-test-renderer": "^18.3.1",
167
+ "react-test-renderer": "^19.0.0",
168
168
  "regenerator-runtime": "^0.14.1",
169
169
  "rimraf": "^6.0.1",
170
- "rollup": "^4.27.4",
170
+ "rollup": "^4.28.1",
171
171
  "rollup-plugin-clear": "^2.0.7",
172
172
  "sinon": "^19.0.2",
173
173
  "sinon-chai": "^4.0.0",
174
174
  "storage-mock": "^2.1.0",
175
- "storybook": "8.4.5",
175
+ "storybook": "8.4.7",
176
176
  "stylelint": "^16.11.0",
177
177
  "svg-inline-loader": "^0.8.2",
178
178
  "teamcity-service-messages": "^0.1.14",
179
179
  "terser-webpack-plugin": "^5.3.10",
180
180
  "typescript": "~5.7.2",
181
- "typescript-eslint": "^8.16.0",
182
- "vitest": "^2.1.6",
181
+ "typescript-eslint": "^8.17.0",
182
+ "vitest": "^2.1.8",
183
183
  "vitest-teamcity-reporter": "^0.3.1",
184
184
  "wallaby-webpack": "^3.9.16",
185
185
  "webpack": "^5.97.1",
@@ -210,7 +210,7 @@
210
210
  "@babel/preset-typescript": "^7.26.0",
211
211
  "@jetbrains/babel-preset-jetbrains": "^2.4.0",
212
212
  "@jetbrains/icons": "^5.4.0",
213
- "@jetbrains/postcss-require-hover": "^0.1.2",
213
+ "@jetbrains/postcss-require-hover": "^0.1.3",
214
214
  "@types/combokeys": "^2.4.9",
215
215
  "@types/element-resize-detector": "^1.1.6",
216
216
  "@types/react-virtualized": "9.22.0",