@jetbrains/ring-ui 6.0.43 → 6.0.44-beta.0

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.
Files changed (7) hide show
  1. package/components/content-layout/content-layout.js +1 -1
  2. package/components/date-picker/date-picker.css +2 -2
  3. package/components/global/variables.css +113 -106
  4. package/components/global/variables_dark.css +111 -102
  5. package/components/shortcuts/core.js +4 -2
  6. package/components/tabs/tabs.css +1 -1
  7. package/package.json +26 -26
package/components/content-layout/content-layout.js CHANGED
@@ -34,7 +34,7 @@ export default class ContentLayout extends Component {
34
34
  contentNode: this.state.contentNode
35
35
  });
36
36
  const contentChildren = childrenArray.filter(child => child !== sidebarChild);
37
- return (<div {...restProps} className={classes}>
37
+ return (<div data-test="content-layout" {...restProps} className={classes}>
38
38
  {sidebar}
39
39
  <main className={contentClasses} ref={this.saveContentNode}>
40
40
  {contentChildren}
package/components/date-picker/date-picker.css CHANGED
@@ -9,7 +9,7 @@
9
9
 
10
10
  :root {
11
11
  /* stylelint-disable-next-line color-no-hex */
12
- --ring-date-picker-hover-color: #b3dfff;
12
+ --ring-date-picker-hover-color: var(--ring-border-hover-color);
13
13
  }
14
14
 
15
15
  .container {
@@ -310,7 +310,7 @@
310
310
  .active.active {
311
311
  transition: none;
312
312
 
313
- color: var(--ring-link-hover-color);
313
+ color: var(--ring-text-color);
314
314
  border-radius: var(--ring-border-radius);
315
315
  background-color: var(--ring-date-picker-hover-color);
316
316
  }
package/components/global/variables.css CHANGED
@@ -5,141 +5,148 @@
5
5
  --ring-unit: 8px;
6
6
 
7
7
  /* Element */
8
- --ring-line-components: 223, 229, 235;
9
- --ring-line-color: rgb(var(--ring-line-components)); /* #dfe5eb */
10
- --ring-borders-components: 197, 209, 219;
11
- --ring-borders-color: rgb(var(--ring-borders-components)); /* #c5d1db */
12
- --ring-icon-components: 132, 150, 173;
13
- --ring-icon-color: rgb(var(--ring-icon-components)); /* #8496ad */
14
- --ring-icon-secondary-components: 153, 153, 153;
15
- --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #999 */
16
- --ring-border-disabled-components: 232, 232, 232;
17
- --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #e8e8e8 */
18
- --ring-border-selected-disabled-components: 199, 199, 199;
19
- --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #C7C7C7 */
20
- --ring-icon-disabled-components: 212, 212, 212;
21
- --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #d4d4d4 */
22
- --ring-border-hover-components: 128, 198, 255;
23
- --ring-border-hover-color: rgb(var(--ring-border-hover-components)); /* #80c6ff */
24
- --ring-icon-hover-components: var(--ring-link-hover-color);
25
- --ring-icon-hover-color: var(--ring-link-hover-color);
26
- --ring-main-components: 0, 128, 229;
27
- --ring-main-color: rgb(var(--ring-main-components)); /* #0080e5 */
28
- --ring-action-link-components: var(--ring-main-components);
29
- --ring-action-link-color: rgb(var(--ring-main-components)); /* #0080e5 */
30
- --ring-main-hover-components: 0, 112, 204;
31
- --ring-main-hover-color: rgb(var(--ring-main-hover-components)); /* #0070cc */
32
- --ring-icon-error-components: 219, 88, 96;
33
- --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #db5860 */
34
- --ring-icon-warning-components: 237, 162, 0;
35
- --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #eda200 */
36
- --ring-icon-success-components: 89, 168, 105;
37
- --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #59a869 */
38
- --ring-pale-control-components: 207, 219, 229;
39
- --ring-pale-control-color: rgb(var(--ring-pale-control-components)); /* #cfdbe5 */
8
+ --ring-line-components: 223, 225, 229;
9
+ --ring-line-color: rgb(var(--ring-line-components)); /* #dfe1e5 */
10
+ --ring-borders-components: 211, 213, 219;
11
+ --ring-borders-color: rgb(var(--ring-borders-components)); /* #d3d5db */
12
+ --ring-icon-components: 129, 133, 148;
13
+ --ring-icon-color: rgb(var(--ring-icon-components)); /* #818594 */
14
+ --ring-icon-secondary-components: 129, 133, 148;
15
+ --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #818594 */
16
+ --ring-border-disabled-components: 235, 236, 240;
17
+ --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #ebecf0 */
18
+ --ring-border-selected-disabled-components: 201, 204, 214;
19
+ --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #c9ccd6 */
20
+ --ring-icon-disabled-components: 211, 213, 219;
21
+ --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #d3d5db */
22
+ --ring-border-hover-components: 160, 189, 248;
23
+ --ring-border-hover-color: rgb(var(--ring-border-hover-components)); /* #a0bdf8 */
24
+ --ring-icon-hover-components: 90, 93, 107;
25
+ --ring-icon-hover-color: rgb(var(--ring-icon-hover-components)); /* #5a5d6b */
26
+ --ring-main-components: 53, 116, 240;
27
+ --ring-main-color: rgb(var(--ring-main-components)); /* #3574f0 */
28
+ --ring-action-link-components: 46, 85, 163;
29
+ --ring-action-link-color: rgb(var(--ring-action-link-components)); /* #2E55A3 */
30
+ --ring-main-hover-components: 51, 105, 214;
31
+ --ring-main-hover-color: rgb(var(--ring-main-hover-components)); /* #3369d6 */
32
+ --ring-icon-error-components: 219, 59, 75;
33
+ --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #db3b4b */
34
+ --ring-icon-warning-components: 255, 175, 15;
35
+ --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #ffaf0f */
36
+ --ring-icon-success-components: 85, 167, 106;
37
+ --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #55a76a */
38
+ --ring-pale-control-components: 194, 214, 252;
39
+ --ring-pale-control-color: rgb(var(--ring-pale-control-components)); /* #C2D6FC */
40
40
  --ring-popup-border-components: 0, 28, 54;
41
41
  --ring-popup-border-color: var(--ring-line-color);
42
42
  --ring-popup-shadow-components: rgba(var(--ring-popup-border-components), 0.1);
43
43
  --ring-popup-shadow-color: rgba(var(--ring-popup-border-components), 0.1);
44
44
  --ring-popup-secondary-shadow-color: rgba(var(--ring-popup-border-components), 0.04);
45
45
  --ring-message-shadow-color: rgba(var(--ring-popup-border-components), 0.3);
46
- --ring-pinned-shadow-components: 115, 117, 119;
47
- --ring-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #737577 */
46
+ --ring-pinned-shadow-components: 108, 112, 126;
47
+ --ring-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #6C707E */
48
48
  --ring-button-danger-hover-components: var(--ring-icon-error-color);
49
49
  --ring-button-danger-hover-color: var(--ring-icon-error-color);
50
- --ring-button-primary-border-components: 0, 98, 178;
51
- --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #0062b2 */
50
+ --ring-button-primary-border-components: 49, 95, 189;
51
+ --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #315FBD */
52
52
  --ring-dialog-overlay-components: 0, 0, 0;
53
53
  --ring-dialog-overlay-opacity: 0.4;
54
54
  --ring-popup-shadow: 0 2px 8px var(--ring-popup-shadow-color), 0 1px 2px var(--ring-popup-secondary-shadow-color);
55
55
  --ring-dialog-shadow: 0 4px 24px var(--ring-popup-shadow-color), 0 2px 6px var(--ring-popup-secondary-shadow-color);
56
56
 
57
+
57
58
  /* Text */
58
- --ring-search-components: 102, 158, 204;
59
- --ring-search-color: rgb(var(--ring-search-components)); /* #669ecc */
60
- --ring-hint-components: 64, 99, 128;
61
- --ring-hint-color: rgb(var(--ring-hint-components)); /* #406380 */
62
- --ring-link-components: 15, 91, 153;
63
- --ring-link-color: rgb(var(--ring-link-components)); /* #0f5b99 */
64
- --ring-link-hover-components: 255, 0, 140;
65
- --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #ff008c */
66
- --ring-error-components: 169, 15, 26;
67
- --ring-error-color: rgb(var(--ring-error-components)); /* #a90f1a */
68
- --ring-warning-components: 178, 92, 0;
69
- --ring-warning-color: rgb(var(--ring-warning-components)); /* #b25c00 */
70
- --ring-success-components: 12, 117, 35;
71
- --ring-success-color: rgb(var(--ring-success-components)); /* #0c7523 */
72
- --ring-text-components: 31, 35, 38;
73
- --ring-text-color: rgb(var(--ring-text-components)); /* #1f2326 */
59
+ --ring-search-components: 112, 156, 245;
60
+ --ring-search-color: rgb(var(--ring-search-components)); /* #709CF5 */
61
+ --ring-hint-components: 46, 85, 163;
62
+ --ring-hint-color: rgb(var(--ring-hint-components)); /* #2E55A3 */
63
+ --ring-link-components: 46, 85, 163;
64
+ --ring-link-color: rgb(var(--ring-link-components)); /* #2E55A3 */
65
+ --ring-link-hover-components: 34, 60, 114;
66
+ --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #223C72 */
67
+ --ring-error-components: 204, 54, 69;
68
+ --ring-error-color: rgb(var(--ring-error-components)); /* #CC3645 */
69
+ --ring-warning-components: 164, 103, 4;
70
+ --ring-warning-color: rgb(var(--ring-warning-components)); /* #A46704 */
71
+ --ring-success-components: 31, 117, 54;
72
+ --ring-success-color: rgb(var(--ring-success-components)); /* #1F7536 */
73
+ --ring-text-components: 39, 40, 46;
74
+ --ring-text-color: rgb(var(--ring-text-components)); /* #27282E */
74
75
  --ring-active-text-color: var(--ring-text-color);
75
76
  --ring-white-text-components: 255, 255, 255;
76
- --ring-white-text-color: rgb(var(--ring-white-text-components)); /* #fff */
77
+ --ring-white-text-color: rgb(var(--ring-white-text-components)); /* #FFFFFF */
77
78
  --ring-heading-color: var(--ring-text-color);
78
- --ring-secondary-components: 115, 117, 119;
79
- --ring-secondary-color: rgb(var(--ring-secondary-components)); /* #737577 */
80
- --ring-disabled-components: 153, 153, 153;
81
- --ring-disabled-color: rgb(var(--ring-disabled-components)); /* #999 */
79
+ --ring-secondary-components: 108, 112, 126;
80
+ --ring-secondary-color: rgb(var(--ring-secondary-components)); /* #6C707E */
81
+ --ring-disabled-components: 168, 173, 189;
82
+ --ring-disabled-color: rgb(var(--ring-disabled-components)); /* #A8ADBD */
82
83
 
83
84
  /* Background */
84
85
  --ring-content-background-components: 255, 255, 255;
85
- --ring-content-background-color: rgb(var(--ring-content-background-components)); /* #fff */
86
+ --ring-content-background-color: rgb(var(--ring-content-background-components)); /* #FFFFFF */
86
87
  --ring-popup-background-components: 255, 255, 255;
87
- --ring-popup-background-color: rgb(var(--ring-popup-background-components)); /* #fff */
88
- --ring-sidebar-background-components: 247, 249, 250;
89
- --ring-sidebar-background-color: rgb(var(--ring-sidebar-background-components)); /* #f7f9fa */
90
- --ring-selected-background-components: 212, 237, 255;
91
- --ring-selected-background-color: rgb(var(--ring-selected-background-components)); /* #d4edff */
92
- --ring-hover-background-components: 235, 246, 255;
93
- --ring-hover-background-color: rgb(var(--ring-hover-background-components)); /* #ebf6ff */
88
+ --ring-popup-background-color: rgb(var(--ring-popup-background-components)); /* #FFFFFF */
89
+ --ring-sidebar-background-components: 247, 248, 250;
90
+ --ring-sidebar-background-color: rgb(var(--ring-sidebar-background-components)); /* #F7F8FA */
91
+ --ring-selected-background-components: 212, 226, 255;
92
+ --ring-selected-background-color: rgb(var(--ring-selected-background-components)); /* #D4E2FF */
93
+ --ring-hover-background-components: 237, 243, 255;
94
+ --ring-hover-background-color: rgb(var(--ring-hover-background-components)); /* #EDF3FF */
94
95
  --ring-navigation-background-components: 255, 255, 255;
95
- --ring-navigation-background-color: rgb(var(--ring-navigation-background-components)); /* #fff */
96
- --ring-tag-background-components: 230, 236, 242;
97
- --ring-tag-background-color: rgb(var(--ring-tag-background-components)); /* #e6ecf2 */
98
- --ring-tag-hover-background-components: 211, 218, 224;
99
- --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #d3dae0 */
100
- --ring-removed-background-components: 255, 213, 203;
101
- --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #ffd5cb */
102
- --ring-warning-background-components: 250, 236, 205;
103
- --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #faeccd */
104
- --ring-added-background-components: 216, 240, 216;
105
- --ring-added-background-color: rgb(var(--ring-added-background-components)); /* #d8f0d8 */
106
- --ring-disabled-background-components: 245, 245, 245;
107
- --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #f5f5f5 */
108
- --ring-disabled-selected-background-components: 232, 232, 232;
109
- --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #e8e8e8 */
110
- --ring-button-danger-active-components: 255, 231, 232;
111
- --ring-button-danger-active-color: rgb(var(--ring-button-danger-active-components)); /* #ffe7e8 */
112
- --ring-button-loader-background-components: 51, 163, 255;
113
- --ring-button-loader-background: rgb(var(--ring-button-loader-background-components)); /* #33a3ff */
114
- --ring-button-primary-background-components: 26, 152, 255;
115
- --ring-button-primary-background-color: rgb(var(--ring-button-primary-background-components)); /* #1a98ff */
116
- --ring-table-loader-background-color: rgba(var(--ring-content-background-components), 0.5); /* #ffffff80 */
96
+ --ring-navigation-background-color: rgb(var(--ring-navigation-background-components)); /* #FFFFFF */
97
+ --ring-tag-background-components: 235, 236, 240;
98
+ --ring-tag-background-color: rgb(var(--ring-tag-background-components)); /* #EBECF0 */
99
+ --ring-tag-hover-background-components: 211, 213, 219;
100
+ --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #D3D5DB */
101
+ --ring-removed-background-components: 250, 212, 216;
102
+ --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #FAD4D8 */
103
+ --ring-warning-background-components: 255, 241, 209;
104
+ --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #FFF1D1 */
105
+ --ring-added-background-components: 197, 229, 204;
106
+ --ring-added-background-color: rgb(var(--ring-added-background-components)); /* #C5E5CC */
107
+ --ring-disabled-background-components: 247, 248, 250;
108
+ --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #F7F8FA */
109
+ --ring-disabled-selected-background-components: 235, 236, 240;
110
+ --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #EBECF0 */
111
+ --ring-button-danger-active-components: 250, 212, 216;
112
+ --ring-button-danger-active-color: rgb(var(--ring-button-danger-active-components)); /* #FAD4D8 */
113
+ --ring-button-loader-background-components: 70, 130, 250;
114
+ --ring-button-loader-background: rgb(var(--ring-button-loader-background-components)); /* #4682FA */
115
+ --ring-button-primary-background-components: 53, 116, 240;
116
+ --ring-button-primary-background-color: rgb(var(--ring-button-primary-background-components)); /* #3574F0 */
117
+ --ring-table-loader-background-color: rgba(var(--ring-content-background-components), 0.5); /* #FFFFFF50 */
118
+ --ring-removed-subtle-background-components: 255, 247, 247;
119
+ --ring-removed-subtle-background-color: rgb(var(--ring-removed-subtle-background-components)); /* #FFF7F7 */
120
+ --ring-warning-subtle-background-components: 255, 250, 235;
121
+ --ring-warning-subtle-background-color: rgb(var(--ring-warning-subtle-background-components)); /* #FFFAEB */
122
+ --ring-added-subtle-background-components: 242, 252, 243;
123
+ --ring-added-subtle-background-color: rgb(var(--ring-added-subtle-background-components)); /* #F2FCF3 */
117
124
 
118
125
  /* Code */
119
126
  --ring-code-background-color: var(--ring-content-background-color);
120
127
  --ring-code-components: 0, 0, 0;
121
- --ring-code-color: rgb(var(--ring-code-components)); /* #000 */
122
- --ring-code-comment-components: 112, 112, 112;
123
- --ring-code-comment-color: rgb(var(--ring-code-comment-components)); /* #707070 */
124
- --ring-code-meta-components: 112, 112, 112;
125
- --ring-code-meta-color: rgb(var(--ring-code-meta-components)); /* #707070 */
126
- --ring-code-keyword-components: 0, 0, 128;
127
- --ring-code-keyword-color: rgb(var(--ring-code-keyword-components)); /* #000080 */
128
- --ring-code-tag-background-components: 239, 239, 239;
129
- --ring-code-tag-background-color: rgb(var(--ring-code-tag-background-components)); /* #efefef */
128
+ --ring-code-color: rgb(var(--ring-code-components)); /* #000000 */
129
+ --ring-code-comment-components: 140, 140, 140;
130
+ --ring-code-comment-color: rgb(var(--ring-code-comment-components)); /* #8C8C8C */
131
+ --ring-code-meta-components: 158, 136, 13;
132
+ --ring-code-meta-color: rgb(var(--ring-code-meta-components)); /* #9E880D */
133
+ --ring-code-keyword-components: 0, 51, 179;
134
+ --ring-code-keyword-color: rgb(var(--ring-code-keyword-components)); /* #0033B3 */
135
+ --ring-code-tag-background-components: 235, 236, 240;
136
+ --ring-code-tag-background-color: rgb(var(--ring-code-tag-background-components)); /* #EBECF0 */
130
137
  --ring-code-tag-color: var(--ring-code-keyword-color);
131
138
  --ring-code-tag-font-weight: var(--ring-font-weight-bold);
132
- --ring-code-field-components: 102, 14, 122;
133
- --ring-code-field-color: rgb(var(--ring-code-field-components)); /* #660e7a */
134
- --ring-code-attribute-components: 0, 0, 255;
135
- --ring-code-attribute-color: rgb(var(--ring-code-attribute-components)); /* #00f */
139
+ --ring-code-field-components: 135, 16, 148;
140
+ --ring-code-field-color: rgb(var(--ring-code-field-components)); /* #871094 */
141
+ --ring-code-attribute-components: 23, 80, 235;
142
+ --ring-code-attribute-color: rgb(var(--ring-code-attribute-components)); /* #1750EB */
136
143
  --ring-code-number-color: var(--ring-code-attribute-color);
137
- --ring-code-string-components: 0, 122, 0;
138
- --ring-code-string-color: rgb(var(--ring-code-string-components)); /* #007a00 */
139
- --ring-code-addition-components: 170, 222, 170;
140
- --ring-code-addition-color: rgb(var(--ring-code-addition-components)); /* #aadeaa */
141
- --ring-code-deletion-components: 200, 200, 200;
142
- --ring-code-deletion-color: rgb(var(--ring-code-deletion-components)); /* #c8c8c8 */
144
+ --ring-code-string-components: 6, 125, 23;
145
+ --ring-code-string-color: rgb(var(--ring-code-string-components)); /* #067D17 */
146
+ --ring-code-addition-components: 197, 229, 204;
147
+ --ring-code-addition-color: rgb(var(--ring-code-addition-components)); /* #C5E5CC */
148
+ --ring-code-deletion-components: 223, 225, 229;
149
+ --ring-code-deletion-color: rgb(var(--ring-code-deletion-components)); /* #DFE1E5 */
143
150
 
144
151
  /* Metrics */
145
152
  --ring-border-radius: 4px;
package/components/global/variables_dark.css CHANGED
@@ -3,131 +3,140 @@
3
3
  :global(.ring-ui-theme-dark),
4
4
  .dark,
5
5
  :root.dark {
6
- --ring-line-components: 61, 63, 69;
7
- --ring-line-color: rgb(var(--ring-line-components)); /* #3D3F45 */
8
- --ring-borders-components: 97, 101, 107;
9
- --ring-borders-color: rgb(var(--ring-borders-components)); /* #61656B */
10
- --ring-icon-components: 138, 145, 163;
11
- --ring-icon-color: rgb(var(--ring-icon-components)); /* #8A91A3 */
12
- --ring-icon-secondary-components: 121, 126, 139;
13
- --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #797E8B */
14
- --ring-border-disabled-components: 79, 79, 79;
15
- --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #4F4F4F */
16
- --ring-border-selected-disabled-components: 102, 102, 102;
17
- --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #666666 */
18
- --ring-icon-disabled-components: 78, 80, 87;
19
- --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #4E5057 */
20
- --ring-border-hover-components: 80, 103, 153;
21
- --ring-border-hover-color: rgb(var(--ring-border-hover-components)); /* #506799 */
6
+ --ring-line-components: 67, 69, 74;
7
+ --ring-line-color: rgb(var(--ring-line-components)); /* #43454A */
8
+ --ring-borders-components: 111, 115, 122;
9
+ --ring-borders-color: rgb(var(--ring-borders-components)); /* #6F737A */
10
+ --ring-icon-components: 134, 138, 145;
11
+ --ring-icon-color: rgb(var(--ring-icon-components)); /* #868A91 */
12
+ --ring-icon-secondary-components: 134, 138, 145;
13
+ --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #868A91 */
14
+ --ring-border-disabled-components: 78, 81, 87;
15
+ --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #4E5157 */
16
+ --ring-border-selected-disabled-components: 90, 93, 99;
17
+ --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #5A5D63 */
18
+ --ring-icon-disabled-components: 78, 81, 87;
19
+ --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #4E5157 */
20
+ --ring-border-hover-components: 55, 95, 173;
21
+ --ring-border-hover-color: rgb(var(--ring-border-hover-components)); /* #375FAD */
22
22
  --ring-main-components: 53, 116, 240;
23
23
  --ring-main-color: rgb(var(--ring-main-components)); /* #3574F0 */
24
- --ring-action-link-components: 138, 170, 232;
25
- --ring-action-link-color: rgb(var(--ring-action-link-components)); /* #8AAAE8 */
26
- --ring-main-hover-components: 45, 105, 224;
27
- --ring-main-hover-color: rgb(var(--ring-main-hover-components)); /* #2D69E0 */
28
- --ring-icon-error-components: 196, 86, 86;
29
- --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #C45656 */
30
- --ring-icon-warning-components: 199, 165, 83;
31
- --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #C7A553 */
32
- --ring-icon-success-components: 97, 161, 101;
33
- --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #61A165 */
34
- --ring-popup-border-components: 61, 63, 69;
35
- --ring-popup-border-color: rgb(var(--ring-popup-border-components)); /* #3D3F45 */
24
+ --ring-action-link-components: 153, 187, 255;
25
+ --ring-action-link-color: rgb(var(--ring-action-link-components)); /* #99BBFF */
26
+ --ring-main-hover-components: 54, 106, 207;
27
+ --ring-main-hover-color: rgb(var(--ring-main-hover-components)); /* #366ACF */
28
+ --ring-icon-error-components: 219, 92, 92;
29
+ --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #DB5C5C */
30
+ --ring-icon-warning-components: 214, 174, 88;
31
+ --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #D6AE58 */
32
+ --ring-icon-success-components: 95, 173, 101;
33
+ --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #5FAD65 */
34
+ --ring-popup-border-components: 57, 59, 64;
35
+ --ring-popup-border-color: rgb(var(--ring-popup-border-components)); /* #393B40 */
36
36
  --ring-popup-shadow-color: rgba(0, 0, 0, 0.31);
37
37
  --ring-popup-secondary-shadow-color: rgba(0, 0, 0, 0.37);
38
38
  --ring-message-shadow-color: rgba(var(--ring-popup-border-components), 0.3);
39
39
  --ring-pinned-shadow-components: 0, 0, 0;
40
40
  --ring-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #000 */
41
41
  --ring-button-danger-hover-color: var(--ring-error-color);
42
- --ring-button-primary-border-components: 128, 198, 255;
43
- --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #80c6ff */
42
+ --ring-button-primary-border-components: 53, 116, 240;
43
+ --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #3574F0 */
44
44
  --ring-dialog-overlay-components: 0, 0, 0;
45
45
  --ring-dialog-overlay-opacity: 0.7;
46
46
  --ring-popup-shadow: 0 2px 8px var(--ring-popup-shadow-color), 0 1px 2px var(--ring-popup-secondary-shadow-color);
47
47
  --ring-dialog-shadow: 0 4px 16px var(--ring-popup-shadow-color), 0 2px 6px var(--ring-popup-secondary-shadow-color);
48
48
 
49
49
  /* Text */
50
- --ring-hint-components: 128, 146, 157;
51
- --ring-hint-color: rgb(var(--ring-hint-components)); /* #80929d */
52
- --ring-link-components: 138, 170, 232;
53
- --ring-link-color: rgb(var(--ring-link-components)); /* #8AAAE8 */
54
- --ring-link-hover-components: 229, 106, 182;
55
- --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #E56AB6 */
56
- --ring-error-components: 227, 102, 102;
57
- --ring-error-color: rgb(var(--ring-error-components)); /* #E36666 */
58
- --ring-warning-components: 222, 182, 90;
59
- --ring-warning-color: rgb(var(--ring-warning-components)); /* #DEB65A */
60
- --ring-success-components: 112, 186, 118;
61
- --ring-success-color: rgb(var(--ring-success-components)); /* #70BA76 */
62
- --ring-text-components: 202, 205, 212;
63
- --ring-text-color: rgb(var(--ring-text-components)); /* #CACDD4 */
50
+ --ring-hint-components: 134, 138, 145;
51
+ --ring-hint-color: rgb(var(--ring-hint-components)); /* #868A91 */
52
+ --ring-link-components: 153, 187, 255;
53
+ --ring-link-color: rgb(var(--ring-link-components)); /* #99BBFF */
54
+ --ring-link-hover-components: 107, 155, 250;
55
+ --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #6B9BFA */
56
+ --ring-error-components: 227, 119, 116;
57
+ --ring-error-color: rgb(var(--ring-error-components)); /* #E37774 */
58
+ --ring-warning-components: 242, 197, 92;
59
+ --ring-warning-color: rgb(var(--ring-warning-components)); /* #F2C55C */
60
+ --ring-success-components: 115, 189, 121;
61
+ --ring-success-color: rgb(var(--ring-success-components)); /* #73BD79 */
62
+ --ring-text-components: 223, 225, 229;
63
+ --ring-text-color: rgb(var(--ring-text-components)); /* #DFE1E5 */
64
64
  --ring-active-text-components: 255, 255, 255;
65
- --ring-active-text-color: rgb(var(--ring-active-text-components)); /* #fff */
65
+ --ring-active-text-color: rgb(var(--ring-active-text-components)); /* #FFFFFF */
66
66
  --ring-heading-color: var(--ring-text-color);
67
- --ring-secondary-components: 144, 148, 156;
68
- --ring-secondary-color: rgb(var(--ring-secondary-components)); /* #90949C */
69
- --ring-disabled-components: 107, 110, 117;
70
- --ring-disabled-color: rgb(var(--ring-disabled-components)); /* #6B6E75 */
67
+ --ring-secondary-components: 157, 160, 168;
68
+ --ring-secondary-color: rgb(var(--ring-secondary-components)); /* #9DA0A8 */
69
+ --ring-disabled-components: 111, 115, 122;
70
+ --ring-disabled-color: rgb(var(--ring-disabled-components)); /* #6F737A */
71
71
 
72
72
  /* Background */
73
- --ring-content-background-components: 44, 45, 48;
74
- --ring-content-background-color: rgb(var(--ring-content-background-components)); /* #2C2D30 */
75
- --ring-popup-background-components: 50, 52, 56;
76
- --ring-popup-background-color: rgb(var(--ring-popup-background-components)); /* #323438 */
77
- --ring-sidebar-background-components: 32, 33, 36;
78
- --ring-sidebar-background-color: rgb(var(--ring-sidebar-background-components)); /* #202124 */
79
- --ring-selected-background-components: 51, 70, 110;
80
- --ring-selected-background-color: rgb(var(--ring-selected-background-components)); /* #33466E */
81
- --ring-hover-background-components: 50, 61, 84;
82
- --ring-hover-background-color: rgb(var(--ring-hover-background-components)); /* #323D54 */
83
- --ring-navigation-background-components: 17, 19, 20;
84
- --ring-navigation-background-color: rgb(var(--ring-navigation-background-components)); /* #111314 */
85
- --ring-tag-background-components: 74, 77, 84;
86
- --ring-tag-background-color: rgb(var(--ring-tag-background-components)); /* #4A4D54 */
87
- --ring-tag-hover-background-components: 67, 69, 76;
88
- --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #43454C */
89
- --ring-removed-background-components: 94, 56, 53;
90
- --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #5E3835 */
91
- --ring-warning-background-components: 87, 71, 47;
92
- --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #57472F */
73
+ --ring-content-background-components: 43, 45, 48;
74
+ --ring-content-background-color: rgb(var(--ring-content-background-components)); /* #2B2D30 */
75
+ --ring-popup-background-components: 57, 59, 64;
76
+ --ring-popup-background-color: rgb(var(--ring-popup-background-components)); /* #393B40 */
77
+ --ring-sidebar-background-components: 30, 31, 34;
78
+ --ring-sidebar-background-color: rgb(var(--ring-sidebar-background-components)); /* #1E1F22 */
79
+ --ring-selected-background-components: 46, 67, 110;
80
+ --ring-selected-background-color: rgb(var(--ring-selected-background-components)); /* #2E436E */
81
+ --ring-hover-background-components: 37, 50, 77;
82
+ --ring-hover-background-color: rgb(var(--ring-hover-background-components)); /* #25324D */
83
+ --ring-navigation-background-components: 30, 31, 34;
84
+ --ring-navigation-background-color: rgb(var(--ring-navigation-background-components)); /* #1E1F22 */
85
+ --ring-tag-background-components: 67, 69, 74;
86
+ --ring-tag-background-color: rgb(var(--ring-tag-background-components)); /* #43454A */
87
+ --ring-tag-hover-background-components: 57, 59, 64;
88
+ --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #393B40 */
89
+ --ring-removed-background-components: 94, 56, 56;
90
+ --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #5E3838 */
91
+ --ring-warning-background-components: 94, 77, 51;
92
+ --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #5E4D33 */
93
93
  --ring-added-background-components: 55, 82, 57;
94
94
  --ring-added-background-color: rgb(var(--ring-added-background-components)); /* #375239 */
95
- --ring-disabled-background-components: 50, 53, 56;
96
- --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #323538 */
97
- --ring-disabled-selected-background-components: 44, 47, 51;
98
- --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #2C2F33 */
99
- --ring-button-danger-active-components: 38, 8, 10;
100
- --ring-button-danger-active-color: rgb(var(--ring-button-danger-active-components)); /* #26080a */
101
- --ring-button-primary-background-components: 0, 126, 229;
102
- --ring-button-primary-background-color: rgb(var(--ring-button-primary-background-components)); /* #007ee5 */
103
- --ring-table-loader-background-color: rgba(var(--ring-content-background-components), 0.5); /* #23272b80 */
95
+ --ring-disabled-background-components: 57, 59, 64;
96
+ --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #393B40 */
97
+ --ring-disabled-selected-background-components: 67, 69, 74;
98
+ --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #43454A */
99
+ --ring-button-danger-active-components: 64, 41, 41;
100
+ --ring-button-danger-active-color: rgb(var(--ring-button-danger-active-components)); /* #402929 */
101
+ --ring-button-primary-background-components: 53, 116, 240;
102
+ --ring-button-primary-background-color: rgb(var(--ring-button-primary-background-components)); /* #3574F0 */
103
+ --ring-table-loader-background-color: rgba(var(--ring-content-background-components), 0.5); /* #2B2D3050 */
104
+ --ring-removed-subtle-background-components: 64, 41, 41;
105
+ --ring-removed-subtle-background-color: rgb(var(--ring-removed-subtle-background-components)); /* #402929 */
106
+ --ring-warning-subtle-background-components: 61, 50, 35;
107
+ --ring-warning-subtle-background-color: rgb(var(--ring-warning-subtle-background-components)); /* #3D3223 */
108
+ --ring-added-subtle-background-components: 37, 54, 39;
109
+ --ring-added-subtle-background-color: rgb(var(--ring-added-subtle-background-components)); /* #253627 */
110
+
104
111
 
105
112
  /* Code */
106
- --ring-code-background-components: 43, 43, 43;
107
- --ring-code-background-color: rgb(var(--ring-code-background-components)); /* #2b2b2b */
108
- --ring-code-components: 169, 183, 198;
109
- --ring-code-color: rgb(var(--ring-code-components)); /* #a9b7c6 */
110
- --ring-code-meta-components: 187, 181, 41;
111
- --ring-code-meta-color: rgb(var(--ring-code-meta-components)); /* #bbb529 */
112
- --ring-code-keyword-components: 204, 120, 50;
113
- --ring-code-keyword-color: rgb(var(--ring-code-keyword-components)); /* #cc7832 */
114
- --ring-code-tag-background-components: 43, 43, 43;
115
- --ring-code-tag-background-color: rgb(var(--ring-code-tag-background-components)); /* #2b2b2b */
116
- --ring-code-tag-components: 232, 191, 106;
117
- --ring-code-tag-color: rgb(var(--ring-code-tag-components)); /* #e8bf6a */
113
+ --ring-code-background-components: 30, 31, 34;
114
+ --ring-code-background-color: rgb(var(--ring-code-background-components)); /* #1E1F22 */
115
+ --ring-code-components: 189, 192, 201;
116
+ --ring-code-color: rgb(var(--ring-code-components)); /* #BDC0C9 */
117
+ --ring-code-comment-components: 110, 121, 138;
118
+ --ring-code-comment-color: rgb(var(--ring-code-comment-components)); /* #6E798A */
119
+ --ring-code-meta-components: 184, 177, 103;
120
+ --ring-code-meta-color: rgb(var(--ring-code-meta-components)); /* #B8B167 */
121
+ --ring-code-keyword-components: 214, 154, 107;
122
+ --ring-code-keyword-color: rgb(var(--ring-code-keyword-components)); /* #D69A6B */
123
+ --ring-code-tag-background-components: 67, 69, 74;
124
+ --ring-code-tag-background-color: rgb(var(--ring-code-tag-background-components)); /* #43454A */
125
+ --ring-code-tag-components: 214, 154, 107;
126
+ --ring-code-tag-color: rgb(var(--ring-code-tag-components)); /* #D69A6B */
118
127
  --ring-code-tag-font-weight: normal;
119
- --ring-code-field-components: 152, 118, 170;
120
- --ring-code-field-color: rgb(var(--ring-code-tag-font-weight)); /* #9876aa */
121
- --ring-code-attribute-components: 186, 186, 186;
122
- --ring-code-attribute-color: rgb(var(--ring-code-attribute-components)); /* #bababa */
123
- --ring-code-number-components: 104, 151, 187;
124
- --ring-code-number-color: rgb(var(--ring-code-number-components)); /* #6897bb */
125
- --ring-code-string-components: 106, 135, 89;
126
- --ring-code-string-color: rgb(var(--ring-code-string-components)); /* #6a8759 */
127
- --ring-code-addition-components: 68, 113, 82;
128
- --ring-code-addition-color: rgb(var(--ring-code-addition-components)); /* #447152 */
129
- --ring-code-deletion-components: 101, 110, 118;
130
- --ring-code-deletion-color: rgb(var(--ring-code-deletion-components)); /* #656e76 */
128
+ --ring-code-field-components: 207, 132, 207;
129
+ --ring-code-field-color: rgb(var(--ring-code-field-components)); /* #CF84CF */
130
+ --ring-code-attribute-components: 81, 192, 207;
131
+ --ring-code-attribute-color: rgb(var(--ring-code-attribute-components)); /* #51C0CF */
132
+ --ring-code-number-components: 81, 192, 207;
133
+ --ring-code-number-color: rgb(var(--ring-code-number-components)); /* #51C0CF */
134
+ --ring-code-string-components: 108, 171, 116;
135
+ --ring-code-string-color: rgb(var(--ring-code-string-components)); /* #6CAB74 */
136
+ --ring-code-addition-components: 55, 82, 57;
137
+ --ring-code-addition-color: rgb(var(--ring-code-addition-components)); /* #375239 */
138
+ --ring-code-deletion-components: 67, 69, 74;
139
+ --ring-code-deletion-color: rgb(var(--ring-code-deletion-components)); /* #43454A */
131
140
 
132
141
  color-scheme: dark;
133
142
  }
package/components/shortcuts/core.js CHANGED
@@ -161,8 +161,10 @@ class Shortcuts {
161
161
  : element.closest(this.ALLOW_SHORTCUTS_SELECTOR) != null)) {
162
162
  return false;
163
163
  }
164
- // stop for input, select, and textarea
165
- return element.matches('input:not([type=checkbox]),select,textarea') || (element.contentEditable === 'true');
164
+ const elementContentEditableAttribute = element.contentEditable;
165
+ const isElementContentEditable = elementContentEditableAttribute === 'true' || elementContentEditableAttribute === 'plaintext-only';
166
+ // stop for input, select, textarea and content-editable elements
167
+ return element.matches('input:not([type=checkbox]),select,textarea') || isElementContentEditable;
166
168
  };
167
169
  _getKeyboardEventType(params) {
168
170
  if (!params.type && sniffr.os.name === 'windows') {
package/components/tabs/tabs.css CHANGED
@@ -13,7 +13,7 @@
13
13
 
14
14
  .dark,
15
15
  :global(.ring-ui-theme-dark) {
16
- --ring-selected-tab-color: var(--ring-main-color);
16
+ --ring-selected-tab-color: var(--ring-text-color);
17
17
  }
18
18
 
19
19
  .tabs {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jetbrains/ring-ui",
3
- "version": "6.0.43",
3
+ "version": "6.0.44-beta.0",
4
4
  "description": "JetBrains UI library",
5
5
  "author": "JetBrains",
6
6
  "license": "Apache-2.0",
@@ -76,29 +76,29 @@
76
76
  },
77
77
  "readmeFilename": "README.md",
78
78
  "devDependencies": {
79
- "@babel/cli": "^7.24.7",
80
- "@babel/eslint-parser": "^7.24.7",
79
+ "@babel/cli": "^7.24.8",
80
+ "@babel/eslint-parser": "^7.24.8",
81
81
  "@csstools/css-parser-algorithms": "^2.7.0",
82
82
  "@csstools/stylelint-no-at-nest-rule": "^2.0.0",
83
83
  "@jetbrains/eslint-config": "^5.4.2",
84
84
  "@jetbrains/logos": "3.0.0-canary.734b213.0",
85
85
  "@jetbrains/stylelint-config": "^4.0.2",
86
- "@primer/octicons": "^19.10.0",
86
+ "@primer/octicons": "^19.11.0",
87
87
  "@rollup/plugin-babel": "^6.0.4",
88
88
  "@rollup/plugin-json": "^6.1.0",
89
89
  "@rollup/plugin-node-resolve": "^15.2.3",
90
90
  "@rollup/plugin-replace": "^5.0.7",
91
- "@storybook/addon-a11y": "8.2.0",
92
- "@storybook/addon-docs": "8.2.0",
93
- "@storybook/addon-essentials": "8.2.0",
94
- "@storybook/components": "8.2.0",
95
- "@storybook/manager-api": "8.2.0",
96
- "@storybook/preview-api": "8.2.0",
97
- "@storybook/react": "8.2.0",
98
- "@storybook/react-webpack5": "8.2.0",
99
- "@storybook/test-runner": "^0.19.0",
100
- "@storybook/theming": "8.2.0",
101
- "@testing-library/dom": "^10.3.1",
91
+ "@storybook/addon-a11y": "8.2.4",
92
+ "@storybook/addon-docs": "8.2.4",
93
+ "@storybook/addon-essentials": "8.2.4",
94
+ "@storybook/components": "8.2.4",
95
+ "@storybook/manager-api": "8.2.4",
96
+ "@storybook/preview-api": "8.2.4",
97
+ "@storybook/react": "8.2.4",
98
+ "@storybook/react-webpack5": "8.2.4",
99
+ "@storybook/test-runner": "^0.19.1",
100
+ "@storybook/theming": "8.2.4",
101
+ "@testing-library/dom": "^10.3.2",
102
102
  "@testing-library/react": "^16.0.0",
103
103
  "@testing-library/user-event": "^14.5.2",
104
104
  "@types/chai": "^4.3.16",
@@ -112,14 +112,14 @@
112
112
  "@types/sinon": "^17.0.3",
113
113
  "@types/sinon-chai": "^3.2.12",
114
114
  "@types/webpack-env": "^1.18.5",
115
- "@typescript-eslint/eslint-plugin": "^7.16.0",
116
- "@typescript-eslint/parser": "^7.16.0",
115
+ "@typescript-eslint/eslint-plugin": "^7.16.1",
116
+ "@typescript-eslint/parser": "^7.16.1",
117
117
  "@vitejs/plugin-react": "^4.3.1",
118
118
  "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
119
119
  "acorn": "^8.12.1",
120
120
  "axe-playwright": "^2.0.1",
121
121
  "babel-plugin-require-context-hook": "^1.0.0",
122
- "caniuse-lite": "^1.0.30001641",
122
+ "caniuse-lite": "^1.0.30001642",
123
123
  "chai": "^5.1.1",
124
124
  "chai-as-promised": "^8.0.0",
125
125
  "chai-dom": "^1.10.0",
@@ -133,7 +133,7 @@
133
133
  "eslint-plugin-bdd": "^2.1.1",
134
134
  "eslint-plugin-import": "^2.29.1",
135
135
  "eslint-plugin-jsx-a11y": "^6.9.0",
136
- "eslint-plugin-react": "^7.34.3",
136
+ "eslint-plugin-react": "^7.34.4",
137
137
  "eslint-plugin-react-hooks": "^4.6.2",
138
138
  "eslint-plugin-storybook": "^0.8.0",
139
139
  "events": "^3.3.0",
@@ -149,30 +149,30 @@
149
149
  "markdown-it": "^14.1.0",
150
150
  "merge-options": "^3.0.4",
151
151
  "pinst": "^3.0.0",
152
- "prettier": "^3.3.2",
152
+ "prettier": "^3.3.3",
153
153
  "raw-loader": "^4.0.2",
154
154
  "react": "^18.3.1",
155
155
  "react-dom": "^18.3.1",
156
156
  "react-test-renderer": "^18.3.1",
157
157
  "regenerator-runtime": "^0.14.1",
158
- "rimraf": "^6.0.0",
158
+ "rimraf": "^6.0.1",
159
159
  "rollup": "^4.18.1",
160
160
  "rollup-plugin-clear": "^2.0.7",
161
161
  "rollup-plugin-styles": "^4.0.0",
162
162
  "sinon": "^18.0.0",
163
163
  "sinon-chai": "^3.7.0",
164
164
  "storage-mock": "^2.1.0",
165
- "storybook": "8.2.0",
165
+ "storybook": "8.2.4",
166
166
  "storybook-addon-themes": "^6.1.0",
167
- "stylelint": "^16.6.1",
167
+ "stylelint": "^16.7.0",
168
168
  "svg-inline-loader": "^0.8.2",
169
169
  "teamcity-service-messages": "^0.1.14",
170
170
  "terser-webpack-plugin": "^5.3.10",
171
171
  "typescript": "~5.5.3",
172
- "vitest": "^2.0.1",
172
+ "vitest": "^2.0.3",
173
173
  "vitest-teamcity-reporter": "^0.3.0",
174
174
  "wallaby-webpack": "^3.9.16",
175
- "webpack": "^5.92.1",
175
+ "webpack": "^5.93.0",
176
176
  "webpack-cli": "^5.1.4",
177
177
  "xmlappend": "^1.0.4"
178
178
  },
@@ -196,7 +196,7 @@
196
196
  }
197
197
  },
198
198
  "dependencies": {
199
- "@babel/core": "^7.24.7",
199
+ "@babel/core": "^7.24.9",
200
200
  "@babel/preset-typescript": "^7.24.7",
201
201
  "@jetbrains/babel-preset-jetbrains": "^2.4.0",
202
202
  "@jetbrains/icons": "^4.2.0",