@ozen-ui/kit 0.39.0 → 0.40.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 (13) hide show
  1. package/__inner__/cjs/components/ButtonNext/Button.css +32 -25
  2. package/__inner__/cjs/components/IconButtonNext/IconButton.css +14 -1
  3. package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_bBusinessDark.css +25 -25
  4. package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_bBusinessDefault.css +30 -30
  5. package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_ozenDark.css +25 -25
  6. package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_ozenDefault.css +25 -25
  7. package/__inner__/esm/components/ButtonNext/Button.css +32 -25
  8. package/__inner__/esm/components/IconButtonNext/IconButton.css +14 -1
  9. package/__inner__/esm/components/ThemeProvider/_color/Theme_color_bBusinessDark.css +25 -25
  10. package/__inner__/esm/components/ThemeProvider/_color/Theme_color_bBusinessDefault.css +30 -30
  11. package/__inner__/esm/components/ThemeProvider/_color/Theme_color_ozenDark.css +25 -25
  12. package/__inner__/esm/components/ThemeProvider/_color/Theme_color_ozenDefault.css +25 -25
  13. package/package.json +4 -4
package/__inner__/cjs/components/ButtonNext/Button.css CHANGED
@@ -80,11 +80,12 @@
80
80
 
81
81
  text-transform: var(--typography-text-l-text_transform, none);
82
82
  }
83
+ /** contained */
83
84
  .ButtonNext_variant_contained.ButtonNext_color_primary {
84
85
  --button-bg-color: var(--color-background-action);
85
86
  --button-bg-color-hover: var(--color-background-action-hover);
86
87
  --button-bg-color-active: var(--color-background-action-pressed);
87
- --button-bg-color-focus: var(--color-background-action);
88
+ --button-bg-color-focus: var(--color-background-action-hover);
88
89
  --button-font-color: var(--color-content-action-on);
89
90
  --button-font-color-hover: var(--color-content-action-on);
90
91
  --button-font-color-active: var(--color-content-action-on);
@@ -94,7 +95,7 @@
94
95
  --button-bg-color: var(--color-background-action-secondary);
95
96
  --button-bg-color-hover: var(--color-background-action-secondary-hover);
96
97
  --button-bg-color-active: var(--color-background-action-secondary-pressed);
97
- --button-bg-color-focus: var(--color-background-action-secondary);
98
+ --button-bg-color-focus: var(--color-background-action-secondary-hover);
98
99
  --button-font-color: var(--color-content-action-on);
99
100
  --button-font-color-hover: var(--color-content-action-on);
100
101
  --button-font-color-active: var(--color-content-action-on);
@@ -104,7 +105,7 @@
104
105
  --button-bg-color: var(--color-background-tertiary);
105
106
  --button-bg-color-hover: var(--color-background-tertiary-hover);
106
107
  --button-bg-color-active: var(--color-background-tertiary-pressed);
107
- --button-bg-color-focus: var(--color-background-tertiary);
108
+ --button-bg-color-focus: var(--color-background-tertiary-hover);
108
109
  --button-font-color: var(--color-content-primary);
109
110
  --button-font-color-hover: var(--color-content-primary);
110
111
  --button-font-color-active: var(--color-content-primary);
@@ -114,17 +115,18 @@
114
115
  --button-bg-color: var(--color-background-error);
115
116
  --button-bg-color-hover: var(--color-background-error-hover);
116
117
  --button-bg-color-active: var(--color-background-error-pressed);
117
- --button-bg-color-focus: var(--color-background-error);
118
+ --button-bg-color-focus: var(--color-background-error-hover);
118
119
  --button-font-color: var(--color-content-action-on);
119
120
  --button-font-color-hover: var(--color-content-action-on);
120
121
  --button-font-color-active: var(--color-content-action-on);
121
122
  --button-font-color-focus: var(--color-content-action-on);
122
123
  }
124
+ /** contained-additional */
123
125
  .ButtonNext_variant_contained-additional.ButtonNext_color_primary {
124
126
  --button-bg-color: var(--color-background-action-light);
125
127
  --button-bg-color-hover: var(--color-background-action-light-hover);
126
128
  --button-bg-color-active: var(--color-background-action-light-pressed);
127
- --button-bg-color-focus: unset;
129
+ --button-bg-color-focus: var(--color-background-action-light-hover);
128
130
  --button-font-color: var(--color-content-action);
129
131
  --button-font-color-hover: var(--color-content-action);
130
132
  --button-font-color-active: var(--color-content-action);
@@ -134,7 +136,7 @@
134
136
  --button-bg-color: var(--color-background-secondary);
135
137
  --button-bg-color-hover: var(--color-background-secondary-hover);
136
138
  --button-bg-color-active: var(--color-background-secondary-pressed);
137
- --button-bg-color-focus: unset;
139
+ --button-bg-color-focus: var(--color-background-secondary-hover);
138
140
  --button-font-color: var(--color-content-primary);
139
141
  --button-font-color-hover: var(--color-content-primary);
140
142
  --button-font-color-active: var(--color-content-primary);
@@ -144,7 +146,7 @@
144
146
  --button-bg-color: var(--color-background-primary);
145
147
  --button-bg-color-hover: var(--color-background-primary-hover);
146
148
  --button-bg-color-active: var(--color-background-primary-pressed);
147
- --button-bg-color-focus: unset;
149
+ --button-bg-color-focus: var(--color-background-primary-hover);
148
150
  --button-font-color: var(--color-content-secondary);
149
151
  --button-font-color-hover: var(--color-content-secondary);
150
152
  --button-font-color-active: var(--color-content-secondary);
@@ -154,52 +156,54 @@
154
156
  --button-bg-color: var(--color-background-error-light);
155
157
  --button-bg-color-hover: var(--color-background-error-light-hover);
156
158
  --button-bg-color-active: var(--color-background-error-light-pressed);
157
- --button-bg-color-focus: unset;
159
+ --button-bg-color-focus: var(--color-background-error-light-hover);
158
160
  --button-font-color: var(--color-content-error);
159
161
  --button-font-color-hover: var(--color-content-error);
160
162
  --button-font-color-active: var(--color-content-error);
161
163
  --button-font-color-focus: var(--color-content-error);
162
164
  }
165
+ /** ghost */
163
166
  .ButtonNext_variant_ghost.ButtonNext_color_primary {
164
- --button-bg-color: unset;
165
- --button-bg-color-hover: var(--color-background-success-light-hover);
166
- --button-bg-color-active: var(--color-background-success-light-pressed);
167
- --button-bg-color-focus: unset;
167
+ --button-bg-color: transparent;
168
+ --button-bg-color-hover: var(--color-background-action-light-hover);
169
+ --button-bg-color-active: var(--color-background-action-light-pressed);
170
+ --button-bg-color-focus: var(--color-background-action-light-hover);
168
171
  --button-font-color: var(--color-content-action);
169
172
  --button-font-color-hover: var(--color-content-action);
170
173
  --button-font-color-active: var(--color-content-action);
171
174
  --button-font-color-focus: var(--color-content-action);
172
175
  }
173
176
  .ButtonNext_variant_ghost.ButtonNext_color_secondary {
174
- --button-bg-color: unset;
177
+ --button-bg-color: transparent;
175
178
  --button-bg-color-hover: var(--color-background-secondary-hover);
176
179
  --button-bg-color-active: var(--color-background-secondary-pressed);
177
- --button-bg-color-focus: unset;
180
+ --button-bg-color-focus: var(--color-background-secondary-hover);
178
181
  --button-font-color: var(--color-content-primary);
179
182
  --button-font-color-hover: var(--color-content-primary);
180
183
  --button-font-color-active: var(--color-content-primary);
181
184
  --button-font-color-focus: var(--color-content-primary);
182
185
  }
183
186
  .ButtonNext_variant_ghost.ButtonNext_color_tertiary {
184
- --button-bg-color: unset;
187
+ --button-bg-color: transparent;
185
188
  --button-bg-color-hover: var(--color-background-primary-hover);
186
189
  --button-bg-color-active: var(--color-background-primary-pressed);
187
- --button-bg-color-focus: unset;
190
+ --button-bg-color-focus: var(--color-background-primary-hover);
188
191
  --button-font-color: var(--color-content-secondary);
189
192
  --button-font-color-hover: var(--color-content-secondary);
190
193
  --button-font-color-active: var(--color-content-secondary);
191
194
  --button-font-color-focus: var(--color-content-secondary);
192
195
  }
193
196
  .ButtonNext_variant_ghost.ButtonNext_color_error {
194
- --button-bg-color: unset;
197
+ --button-bg-color: transparent;
195
198
  --button-bg-color-hover: var(--color-background-error-light-hover);
196
199
  --button-bg-color-active: var(--color-background-error-light-pressed);
197
- --button-bg-color-focus: unset;
200
+ --button-bg-color-focus: var(--color-background-error-light-hover);
198
201
  --button-font-color: var(--color-content-error);
199
202
  --button-font-color-hover: var(--color-content-error);
200
203
  --button-font-color-active: var(--color-content-error);
201
204
  --button-font-color-focus: var(--color-content-error);
202
205
  }
206
+ /** function */
203
207
  .ButtonNext_variant_function {
204
208
  --button-height: auto;
205
209
  --button-min-width: auto;
@@ -209,10 +213,10 @@
209
213
  .ButtonNext_variant_function.ButtonNext_color_secondary,
210
214
  .ButtonNext_variant_function.ButtonNext_color_tertiary,
211
215
  .ButtonNext_variant_function.ButtonNext_color_error {
212
- --button-bg-color: unset;
213
- --button-bg-color-hover: unset;
214
- --button-bg-color-active: unset;
215
- --button-bg-color-focus: unset;
216
+ --button-bg-color: transparent;
217
+ --button-bg-color-hover: transparent;
218
+ --button-bg-color-active: transparent;
219
+ --button-bg-color-focus: transparent;
216
220
  }
217
221
  .ButtonNext_variant_function.ButtonNext_color_primary {
218
222
  --button-font-color: var(--color-content-action);
@@ -238,6 +242,7 @@
238
242
  --button-font-color-active: var(--color-content-error-pressed);
239
243
  --button-font-color-focus: var(--color-content-error-pressed);
240
244
  }
245
+ /** disabled & loading */
241
246
  .ButtonNext_variant_contained.ButtonNext_disabled,
242
247
  .ButtonNext_variant_contained.ButtonNext_loading,
243
248
  .ButtonNext_variant_contained-additional.ButtonNext_disabled,
@@ -260,13 +265,15 @@
260
265
  .ButtonNext_variant_ghost.ButtonNext_loading,
261
266
  .ButtonNext_variant_function.ButtonNext_disabled,
262
267
  .ButtonNext_variant_function.ButtonNext_loading {
263
- --button-bg-color: unset;
264
- --button-bg-color-hover: unset;
265
- --button-bg-color-active: unset;
268
+ --button-bg-color: transparent;
269
+ --button-bg-color-hover: transparent;
270
+ --button-bg-color-active: transparent;
266
271
  }
272
+ /** focus */
267
273
  .ButtonNext:focus:not(:focus-visible, :active, :hover) {
268
274
  box-shadow: none;
269
275
  color: var(--button-font-color);
276
+ background-color: var(--button-bg-color);
270
277
  }
271
278
  .ButtonNext:focus:not(:focus-visible) {
272
279
  box-shadow: none;
package/__inner__/cjs/components/IconButtonNext/IconButton.css CHANGED
@@ -71,6 +71,7 @@
71
71
  --icon-button-bg-color: var(--color-background-action);
72
72
  --icon-button-bg-color-hover: var(--color-background-action-hover);
73
73
  --icon-button-bg-color-active: var(--color-background-action-pressed);
74
+ --icon-button-bg-color-focus: var(--color-background-action-hover);
74
75
  --icon-button-font-color: var(--color-content-action-on);
75
76
  --icon-button-font-color-hover: var(--color-content-action-on);
76
77
  --icon-button-font-color-active: var(--color-content-action-on);
@@ -83,6 +84,7 @@
83
84
  --icon-button-bg-color-active: var(
84
85
  --color-content-action-secondary-pressed
85
86
  );
87
+ --icon-button-bg-color-focus: var(--color-content-action-secondary-hover);
86
88
  --icon-button-font-color: var(--color-content-action-on);
87
89
  --icon-button-font-color-hover: var(--color-content-action-on);
88
90
  --icon-button-font-color-active: var(--color-content-action-on);
@@ -93,6 +95,7 @@
93
95
  --icon-button-bg-color: var(--color-background-tertiary);
94
96
  --icon-button-bg-color-hover: var(--color-background-tertiary-hover);
95
97
  --icon-button-bg-color-active: var(--color-background-tertiary-pressed);
98
+ --icon-button-bg-color-focus: var(--color-background-tertiary-hover);
96
99
  --icon-button-font-color: var(--color-content-primary);
97
100
  --icon-button-font-color-hover: var(--color-content-primary);
98
101
  --icon-button-font-color-active: var(--color-content-primary);
@@ -103,6 +106,7 @@
103
106
  --icon-button-bg-color: var(--color-background-error);
104
107
  --icon-button-bg-color-hover: var(--color-background-error-hover);
105
108
  --icon-button-bg-color-active: var(--color-background-error-pressed);
109
+ --icon-button-bg-color-focus: var(--color-background-error-hover);
106
110
  --icon-button-font-color: var(--color-content-action-on);
107
111
  --icon-button-font-color-hover: var(--color-content-action-on);
108
112
  --icon-button-font-color-active: var(--color-content-action-on);
@@ -115,6 +119,7 @@
115
119
  --icon-button-bg-color: var(--color-background-action-light);
116
120
  --icon-button-bg-color-hover: var(--color-background-action-light-hover);
117
121
  --icon-button-bg-color-active: var(--color-background-action-light-pressed);
122
+ --icon-button-bg-color-focus: var(--color-background-action-light-hover);
118
123
  --icon-button-font-color: var(--color-content-action);
119
124
  --icon-button-font-color-hover: var(--color-content-action);
120
125
  --icon-button-font-color-active: var(--color-content-action);
@@ -125,6 +130,7 @@
125
130
  --icon-button-bg-color: var(--color-background-secondary);
126
131
  --icon-button-bg-color-hover: var(--color-background-secondary-hover);
127
132
  --icon-button-bg-color-active: var(--color-background-secondary-pressed);
133
+ --icon-button-bg-color-focus: var(--color-background-secondary-hover);
128
134
  --icon-button-font-color: var(--color-content-primary);
129
135
  --icon-button-font-color-hover: var(--color-content-primary);
130
136
  --icon-button-font-color-active: var(--color-content-primary);
@@ -135,6 +141,7 @@
135
141
  --icon-button-bg-color: var(--color-background-primary);
136
142
  --icon-button-bg-color-hover: var(--color-background-primary-hover);
137
143
  --icon-button-bg-color-active: var(--color-background-primary-pressed);
144
+ --icon-button-bg-color-focus: var(--color-background-primary-hover);
138
145
  --icon-button-font-color: var(--color-content-secondary);
139
146
  --icon-button-font-color-hover: var(--color-content-secondary);
140
147
  --icon-button-font-color-active: var(--color-content-secondary);
@@ -145,6 +152,7 @@
145
152
  --icon-button-bg-color: var(--color-background-error-light);
146
153
  --icon-button-bg-color-hover: var(--color-background-error-light-hover);
147
154
  --icon-button-bg-color-active: var(--color-background-error-light-pressed);
155
+ --icon-button-bg-color-focus: var(--color-background-error-light-hover);
148
156
  --icon-button-font-color: var(--color-content-error);
149
157
  --icon-button-font-color-hover: var(--color-content-error);
150
158
  --icon-button-font-color-active: var(--color-content-error);
@@ -157,6 +165,7 @@
157
165
  --icon-button-bg-color: transparent;
158
166
  --icon-button-bg-color-hover: var(--color-background-action-light-hover);
159
167
  --icon-button-bg-color-active: var(--color-background-action-light-pressed);
168
+ --icon-button-bg-color-focus: var(--color-background-action-light-hover);
160
169
  --icon-button-font-color: var(--color-content-action);
161
170
  --icon-button-font-color-hover: var(--color-content-action);
162
171
  --icon-button-font-color-active: var(--color-content-action);
@@ -167,6 +176,7 @@
167
176
  --icon-button-bg-color: transparent;
168
177
  --icon-button-bg-color-hover: var(--color-background-secondary-hover);
169
178
  --icon-button-bg-color-active: var(--color-background-secondary-pressed);
179
+ --icon-button-bg-color-focus: var(--color-background-secondary-hover);
170
180
  --icon-button-font-color: var(--color-content-primary);
171
181
  --icon-button-font-color-hover: var(--color-content-primary);
172
182
  --icon-button-font-color-active: var(--color-content-primary);
@@ -177,6 +187,7 @@
177
187
  --icon-button-bg-color: transparent;
178
188
  --icon-button-bg-color-hover: var(--color-background-primary-hover);
179
189
  --icon-button-bg-color-active: var(--color-background-primary-pressed);
190
+ --icon-button-bg-color-focus: var(--color-background-primary-hover);
180
191
  --icon-button-font-color: var(--color-content-secondary);
181
192
  --icon-button-font-color-hover: var(--color-content-secondary);
182
193
  --icon-button-font-color-active: var(--color-content-secondary);
@@ -187,6 +198,7 @@
187
198
  --icon-button-bg-color: transparent;
188
199
  --icon-button-bg-color-hover: var(--color-background-error-light-hover);
189
200
  --icon-button-bg-color-active: var(--color-background-error-light-pressed);
201
+ --icon-button-bg-color-focus: var(--color-background-error-light-hover);
190
202
  --icon-button-font-color: var(--color-content-error);
191
203
  --icon-button-font-color-hover: var(--color-content-error);
192
204
  --icon-button-font-color-active: var(--color-content-error);
@@ -269,7 +281,7 @@
269
281
  border-radius: 50%;
270
282
  }
271
283
 
272
- /** disabled */
284
+ /** disabled & loading */
273
285
 
274
286
  .IconButtonNext_variant_contained.IconButtonNext_disabled,
275
287
  .IconButtonNext_variant_contained.IconButtonNext_loading,
@@ -321,6 +333,7 @@
321
333
  /* the bug in outline property before chrome version 94 – doesn't repeat radius of an element */
322
334
  box-shadow: var(--shadow-outline-focused);
323
335
  color: var(--icon-button-font-color-focus);
336
+ background-color: var(--icon-button-bg-color-focus);
324
337
  }
325
338
 
326
339
  .IconButtonNext:focus:not(:focus-visible) {
package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_bBusinessDark.css CHANGED
@@ -3,7 +3,7 @@
3
3
  --color-content-secondary: #aeb1c4;
4
4
  --color-content-primary: #fff;
5
5
  --color-content-tertiary: #7e8194;
6
- --color-content-disabled: #7e8194;
6
+ --color-content-disabled: #636574;
7
7
  --color-content-ghost-disabled: rgb(255 255 255 / 40%);
8
8
  --color-content-action: #023dff;
9
9
  --color-content-action-hover: #0534d0;
@@ -145,28 +145,28 @@
145
145
  --color-accent-tertiary-pressed: #43475b;
146
146
  --color-accent-disabled: #2f3240;
147
147
  --color-accent-main-inverse: #c7c8ce;
148
- --color-additional-a1: #0b6abe;
149
- --color-additional-a2: #1899e9;
150
- --color-additional-a3: #b3f1ff;
151
- --color-additional-b1: #b5215f;
152
- --color-additional-b2: #e62d73;
153
- --color-additional-b3: #ffb5cd;
154
- --color-additional-c1: #e64920;
155
- --color-additional-c2: #f46c1b;
156
- --color-additional-c3: #ffe2a8;
157
- --color-additional-d1: #ff8e00;
158
- --color-additional-d2: #ffc100;
159
- --color-additional-d3: #fff9a2;
160
- --color-additional-e1: #771db4;
161
- --color-additional-e2: #a02be5;
162
- --color-additional-e3: #e9b7fe;
163
- --color-additional-f1: #107c60;
164
- --color-additional-f2: #17ae87;
165
- --color-additional-f3: #abeada;
166
- --color-additional-g1: #b88f27;
167
- --color-additional-g2: #e0b548;
168
- --color-additional-g3: #f4d37d;
169
- --color-additional-h1: #747e89;
170
- --color-additional-h2: #bdc4cb;
171
- --color-additional-h3: #e1e4e7;
148
+ --color-additional-a1: #866c47;
149
+ --color-additional-a2: #d4aa6b;
150
+ --color-additional-a3: #eeddc4;
151
+ --color-additional-b1: #763986;
152
+ --color-additional-b2: #ba55d3;
153
+ --color-additional-b3: #e3bbed;
154
+ --color-additional-c1: #638125;
155
+ --color-additional-c2: #9acd32;
156
+ --color-additional-c3: #d7ebad;
157
+ --color-additional-d1: #23867f;
158
+ --color-additional-d2: #30d5c8;
159
+ --color-additional-d3: #aceee9;
160
+ --color-additional-e1: #9f5237;
161
+ --color-additional-e2: #ff7f50;
162
+ --color-additional-e3: #ffccb9;
163
+ --color-additional-f1: #1966a0;
164
+ --color-additional-f2: #1fa1ff;
165
+ --color-additional-f3: #a5d9ff;
166
+ --color-additional-g1: #9a4270;
167
+ --color-additional-g2: #f664af;
168
+ --color-additional-g3: #fbc1df;
169
+ --color-additional-h1: #9f891a;
170
+ --color-additional-h2: #ffda1f;
171
+ --color-additional-h3: #fff0a5;
172
172
  }
package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_bBusinessDefault.css CHANGED
@@ -47,7 +47,7 @@
47
47
  --color-background-tertiary: #d7d8e1;
48
48
  --color-background-tertiary-hover: #c2c5d3;
49
49
  --color-background-tertiary-pressed: #aeb1c4;
50
- --color-background-disabled: #d7d8e1;
50
+ --color-background-disabled: #ebecf0;
51
51
  --color-background-action: #023dff;
52
52
  --color-background-action-hover: #0534d0;
53
53
  --color-background-action-pressed: #082ba0;
@@ -55,9 +55,9 @@
55
55
  --color-background-action-light: #d9e2ff;
56
56
  --color-background-action-light-hover: #ccd8ff;
57
57
  --color-background-action-light-pressed: #9ab1ff;
58
- --color-background-accent-action-light: #0534d0;
59
- --color-background-accent-action-light-hover: #082ba0;
60
- --color-background-accent-action-light-pressed: #0a2171;
58
+ --color-background-accent-action-light: #082ba0;
59
+ --color-background-accent-action-light-hover: #0a2171;
60
+ --color-background-accent-action-light-pressed: #0d1841;
61
61
  --color-background-action-secondary: #2c2c33;
62
62
  --color-background-action-secondary-hover: #1e1d22;
63
63
  --color-background-action-secondary-pressed: #17161a;
@@ -116,7 +116,7 @@
116
116
  --color-border-secondary: #d7d8e1;
117
117
  --color-border-secondary-hover: #c2c5d3;
118
118
  --color-border-secondary-pressed: #aeb1c4;
119
- --color-border-disabled: #c2c5d3;
119
+ --color-border-disabled: #d7d8e1;
120
120
  --color-border-ghost-disabled: rgb(255 255 255 / 40%);
121
121
  --color-border-focused: #9ab1ff;
122
122
  --color-border-action: #023dff;
@@ -144,29 +144,29 @@
144
144
  --color-accent-tertiary-hover: #393c4d;
145
145
  --color-accent-tertiary-pressed: #43475b;
146
146
  --color-accent-disabled: #2f3240;
147
- --color-accent-main-inverse: #d9dade;
148
- --color-additional-a1: #0b6abe;
149
- --color-additional-a2: #1899e9;
150
- --color-additional-a3: #b3f1ff;
151
- --color-additional-b1: #b5215f;
152
- --color-additional-b2: #e62d73;
153
- --color-additional-b3: #ffb5cd;
154
- --color-additional-c1: #e64920;
155
- --color-additional-c2: #f46c1b;
156
- --color-additional-c3: #ffe2a8;
157
- --color-additional-d1: #ff8e00;
158
- --color-additional-d2: #ffc100;
159
- --color-additional-d3: #fff9a2;
160
- --color-additional-e1: #771db4;
161
- --color-additional-e2: #a02be5;
162
- --color-additional-e3: #e9b7fe;
163
- --color-additional-f1: #107c60;
164
- --color-additional-f2: #17ae87;
165
- --color-additional-f3: #abeada;
166
- --color-additional-g1: #b88f27;
167
- --color-additional-g2: #e0b548;
168
- --color-additional-g3: #f4d37d;
169
- --color-additional-h1: #747e89;
170
- --color-additional-h2: #bdc4cb;
171
- --color-additional-h3: #e1e4e7;
147
+ --color-accent-main-inverse: #c7c8ce;
148
+ --color-additional-a1: #866c47;
149
+ --color-additional-a2: #d4aa6b;
150
+ --color-additional-a3: #eeddc4;
151
+ --color-additional-b1: #763986;
152
+ --color-additional-b2: #ba55d3;
153
+ --color-additional-b3: #e3bbed;
154
+ --color-additional-c1: #638125;
155
+ --color-additional-c2: #9acd32;
156
+ --color-additional-c3: #d7ebad;
157
+ --color-additional-d1: #23867f;
158
+ --color-additional-d2: #30d5c8;
159
+ --color-additional-d3: #aceee9;
160
+ --color-additional-e1: #9f5237;
161
+ --color-additional-e2: #ff7f50;
162
+ --color-additional-e3: #ffccb9;
163
+ --color-additional-f1: #1966a0;
164
+ --color-additional-f2: #1fa1ff;
165
+ --color-additional-f3: #a5d9ff;
166
+ --color-additional-g1: #9a4270;
167
+ --color-additional-g2: #f664af;
168
+ --color-additional-g3: #fbc1df;
169
+ --color-additional-h1: #9f891a;
170
+ --color-additional-h2: #ffda1f;
171
+ --color-additional-h3: #fff0a5;
172
172
  }
package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_ozenDark.css CHANGED
@@ -3,7 +3,7 @@
3
3
  --color-content-secondary: #aeb1c4;
4
4
  --color-content-primary: #fff;
5
5
  --color-content-tertiary: #7e8194;
6
- --color-content-disabled: #7e8194;
6
+ --color-content-disabled: #636574;
7
7
  --color-content-ghost-disabled: rgb(255 255 255 / 40%);
8
8
  --color-content-action: #0b0;
9
9
  --color-content-action-hover: #039904;
@@ -145,28 +145,28 @@
145
145
  --color-accent-tertiary-pressed: #43475b;
146
146
  --color-accent-disabled: #2f3240;
147
147
  --color-accent-main-inverse: #c7c8ce;
148
- --color-additional-a1: #0b6abe;
149
- --color-additional-a2: #1899e9;
150
- --color-additional-a3: #b3f1ff;
151
- --color-additional-b1: #b5215f;
152
- --color-additional-b2: #e62d73;
153
- --color-additional-b3: #ffb5cd;
154
- --color-additional-c1: #e64920;
155
- --color-additional-c2: #f46c1b;
156
- --color-additional-c3: #ffe2a8;
157
- --color-additional-d1: #ff8e00;
158
- --color-additional-d2: #ffc100;
159
- --color-additional-d3: #fff9a2;
160
- --color-additional-e1: #771db4;
161
- --color-additional-e2: #a02be5;
162
- --color-additional-e3: #e9b7fe;
163
- --color-additional-f1: #107c60;
164
- --color-additional-f2: #17ae87;
165
- --color-additional-f3: #abeada;
166
- --color-additional-g1: #b88f27;
167
- --color-additional-g2: #e0b548;
168
- --color-additional-g3: #f4d37d;
169
- --color-additional-h1: #747e89;
170
- --color-additional-h2: #bdc4cb;
171
- --color-additional-h3: #e1e4e7;
148
+ --color-additional-a1: #866c47;
149
+ --color-additional-a2: #d4aa6b;
150
+ --color-additional-a3: #eeddc4;
151
+ --color-additional-b1: #763986;
152
+ --color-additional-b2: #ba55d3;
153
+ --color-additional-b3: #e3bbed;
154
+ --color-additional-c1: #638125;
155
+ --color-additional-c2: #9acd32;
156
+ --color-additional-c3: #d7ebad;
157
+ --color-additional-d1: #23867f;
158
+ --color-additional-d2: #30d5c8;
159
+ --color-additional-d3: #aceee9;
160
+ --color-additional-e1: #9f5237;
161
+ --color-additional-e2: #ff7f50;
162
+ --color-additional-e3: #ffccb9;
163
+ --color-additional-f1: #1966a0;
164
+ --color-additional-f2: #1fa1ff;
165
+ --color-additional-f3: #a5d9ff;
166
+ --color-additional-g1: #9a4270;
167
+ --color-additional-g2: #f664af;
168
+ --color-additional-g3: #fbc1df;
169
+ --color-additional-h1: #9f891a;
170
+ --color-additional-h2: #ffda1f;
171
+ --color-additional-h3: #fff0a5;
172
172
  }
package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_ozenDefault.css CHANGED
@@ -116,7 +116,7 @@
116
116
  --color-border-secondary: #d7d8e1;
117
117
  --color-border-secondary-hover: #c2c5d3;
118
118
  --color-border-secondary-pressed: #aeb1c4;
119
- --color-border-disabled: #d7d8e1;
119
+ --color-border-disabled: #c2c5d3;
120
120
  --color-border-ghost-disabled: rgb(255 255 255 / 40%);
121
121
  --color-border-focused: #99e499;
122
122
  --color-border-action: #0b0;
@@ -145,28 +145,28 @@
145
145
  --color-accent-tertiary-pressed: #43475b;
146
146
  --color-accent-disabled: #2f3240;
147
147
  --color-accent-main-inverse: #c7c8ce;
148
- --color-additional-a1: #0b6abe;
149
- --color-additional-a2: #1899e9;
150
- --color-additional-a3: #b3f1ff;
151
- --color-additional-b1: #b5215f;
152
- --color-additional-b2: #e62d73;
153
- --color-additional-b3: #ffb5cd;
154
- --color-additional-c1: #e64920;
155
- --color-additional-c2: #f46c1b;
156
- --color-additional-c3: #ffe2a8;
157
- --color-additional-d1: #ff8e00;
158
- --color-additional-d2: #ffc100;
159
- --color-additional-d3: #fff9a2;
160
- --color-additional-e1: #771db4;
161
- --color-additional-e2: #a02be5;
162
- --color-additional-e3: #e9b7fe;
163
- --color-additional-f1: #107c60;
164
- --color-additional-f2: #17ae87;
165
- --color-additional-f3: #abeada;
166
- --color-additional-g1: #b88f27;
167
- --color-additional-g2: #e0b548;
168
- --color-additional-g3: #f4d37d;
169
- --color-additional-h1: #747e89;
170
- --color-additional-h2: #bdc4cb;
171
- --color-additional-h3: #e1e4e7;
148
+ --color-additional-a1: #866c47;
149
+ --color-additional-a2: #d4aa6b;
150
+ --color-additional-a3: #eeddc4;
151
+ --color-additional-b1: #763986;
152
+ --color-additional-b2: #ba55d3;
153
+ --color-additional-b3: #e3bbed;
154
+ --color-additional-c1: #638125;
155
+ --color-additional-c2: #9acd32;
156
+ --color-additional-c3: #d7ebad;
157
+ --color-additional-d1: #23867f;
158
+ --color-additional-d2: #30d5c8;
159
+ --color-additional-d3: #aceee9;
160
+ --color-additional-e1: #9f5237;
161
+ --color-additional-e2: #ff7f50;
162
+ --color-additional-e3: #ffccb9;
163
+ --color-additional-f1: #1966a0;
164
+ --color-additional-f2: #1fa1ff;
165
+ --color-additional-f3: #a5d9ff;
166
+ --color-additional-g1: #9a4270;
167
+ --color-additional-g2: #f664af;
168
+ --color-additional-g3: #fbc1df;
169
+ --color-additional-h1: #9f891a;
170
+ --color-additional-h2: #ffda1f;
171
+ --color-additional-h3: #fff0a5;
172
172
  }
package/__inner__/esm/components/ButtonNext/Button.css CHANGED
@@ -80,11 +80,12 @@
80
80
 
81
81
  text-transform: var(--typography-text-l-text_transform, none);
82
82
  }
83
+ /** contained */
83
84
  .ButtonNext_variant_contained.ButtonNext_color_primary {
84
85
  --button-bg-color: var(--color-background-action);
85
86
  --button-bg-color-hover: var(--color-background-action-hover);
86
87
  --button-bg-color-active: var(--color-background-action-pressed);
87
- --button-bg-color-focus: var(--color-background-action);
88
+ --button-bg-color-focus: var(--color-background-action-hover);
88
89
  --button-font-color: var(--color-content-action-on);
89
90
  --button-font-color-hover: var(--color-content-action-on);
90
91
  --button-font-color-active: var(--color-content-action-on);
@@ -94,7 +95,7 @@
94
95
  --button-bg-color: var(--color-background-action-secondary);
95
96
  --button-bg-color-hover: var(--color-background-action-secondary-hover);
96
97
  --button-bg-color-active: var(--color-background-action-secondary-pressed);
97
- --button-bg-color-focus: var(--color-background-action-secondary);
98
+ --button-bg-color-focus: var(--color-background-action-secondary-hover);
98
99
  --button-font-color: var(--color-content-action-on);
99
100
  --button-font-color-hover: var(--color-content-action-on);
100
101
  --button-font-color-active: var(--color-content-action-on);
@@ -104,7 +105,7 @@
104
105
  --button-bg-color: var(--color-background-tertiary);
105
106
  --button-bg-color-hover: var(--color-background-tertiary-hover);
106
107
  --button-bg-color-active: var(--color-background-tertiary-pressed);
107
- --button-bg-color-focus: var(--color-background-tertiary);
108
+ --button-bg-color-focus: var(--color-background-tertiary-hover);
108
109
  --button-font-color: var(--color-content-primary);
109
110
  --button-font-color-hover: var(--color-content-primary);
110
111
  --button-font-color-active: var(--color-content-primary);
@@ -114,17 +115,18 @@
114
115
  --button-bg-color: var(--color-background-error);
115
116
  --button-bg-color-hover: var(--color-background-error-hover);
116
117
  --button-bg-color-active: var(--color-background-error-pressed);
117
- --button-bg-color-focus: var(--color-background-error);
118
+ --button-bg-color-focus: var(--color-background-error-hover);
118
119
  --button-font-color: var(--color-content-action-on);
119
120
  --button-font-color-hover: var(--color-content-action-on);
120
121
  --button-font-color-active: var(--color-content-action-on);
121
122
  --button-font-color-focus: var(--color-content-action-on);
122
123
  }
124
+ /** contained-additional */
123
125
  .ButtonNext_variant_contained-additional.ButtonNext_color_primary {
124
126
  --button-bg-color: var(--color-background-action-light);
125
127
  --button-bg-color-hover: var(--color-background-action-light-hover);
126
128
  --button-bg-color-active: var(--color-background-action-light-pressed);
127
- --button-bg-color-focus: unset;
129
+ --button-bg-color-focus: var(--color-background-action-light-hover);
128
130
  --button-font-color: var(--color-content-action);
129
131
  --button-font-color-hover: var(--color-content-action);
130
132
  --button-font-color-active: var(--color-content-action);
@@ -134,7 +136,7 @@
134
136
  --button-bg-color: var(--color-background-secondary);
135
137
  --button-bg-color-hover: var(--color-background-secondary-hover);
136
138
  --button-bg-color-active: var(--color-background-secondary-pressed);
137
- --button-bg-color-focus: unset;
139
+ --button-bg-color-focus: var(--color-background-secondary-hover);
138
140
  --button-font-color: var(--color-content-primary);
139
141
  --button-font-color-hover: var(--color-content-primary);
140
142
  --button-font-color-active: var(--color-content-primary);
@@ -144,7 +146,7 @@
144
146
  --button-bg-color: var(--color-background-primary);
145
147
  --button-bg-color-hover: var(--color-background-primary-hover);
146
148
  --button-bg-color-active: var(--color-background-primary-pressed);
147
- --button-bg-color-focus: unset;
149
+ --button-bg-color-focus: var(--color-background-primary-hover);
148
150
  --button-font-color: var(--color-content-secondary);
149
151
  --button-font-color-hover: var(--color-content-secondary);
150
152
  --button-font-color-active: var(--color-content-secondary);
@@ -154,52 +156,54 @@
154
156
  --button-bg-color: var(--color-background-error-light);
155
157
  --button-bg-color-hover: var(--color-background-error-light-hover);
156
158
  --button-bg-color-active: var(--color-background-error-light-pressed);
157
- --button-bg-color-focus: unset;
159
+ --button-bg-color-focus: var(--color-background-error-light-hover);
158
160
  --button-font-color: var(--color-content-error);
159
161
  --button-font-color-hover: var(--color-content-error);
160
162
  --button-font-color-active: var(--color-content-error);
161
163
  --button-font-color-focus: var(--color-content-error);
162
164
  }
165
+ /** ghost */
163
166
  .ButtonNext_variant_ghost.ButtonNext_color_primary {
164
- --button-bg-color: unset;
165
- --button-bg-color-hover: var(--color-background-success-light-hover);
166
- --button-bg-color-active: var(--color-background-success-light-pressed);
167
- --button-bg-color-focus: unset;
167
+ --button-bg-color: transparent;
168
+ --button-bg-color-hover: var(--color-background-action-light-hover);
169
+ --button-bg-color-active: var(--color-background-action-light-pressed);
170
+ --button-bg-color-focus: var(--color-background-action-light-hover);
168
171
  --button-font-color: var(--color-content-action);
169
172
  --button-font-color-hover: var(--color-content-action);
170
173
  --button-font-color-active: var(--color-content-action);
171
174
  --button-font-color-focus: var(--color-content-action);
172
175
  }
173
176
  .ButtonNext_variant_ghost.ButtonNext_color_secondary {
174
- --button-bg-color: unset;
177
+ --button-bg-color: transparent;
175
178
  --button-bg-color-hover: var(--color-background-secondary-hover);
176
179
  --button-bg-color-active: var(--color-background-secondary-pressed);
177
- --button-bg-color-focus: unset;
180
+ --button-bg-color-focus: var(--color-background-secondary-hover);
178
181
  --button-font-color: var(--color-content-primary);
179
182
  --button-font-color-hover: var(--color-content-primary);
180
183
  --button-font-color-active: var(--color-content-primary);
181
184
  --button-font-color-focus: var(--color-content-primary);
182
185
  }
183
186
  .ButtonNext_variant_ghost.ButtonNext_color_tertiary {
184
- --button-bg-color: unset;
187
+ --button-bg-color: transparent;
185
188
  --button-bg-color-hover: var(--color-background-primary-hover);
186
189
  --button-bg-color-active: var(--color-background-primary-pressed);
187
- --button-bg-color-focus: unset;
190
+ --button-bg-color-focus: var(--color-background-primary-hover);
188
191
  --button-font-color: var(--color-content-secondary);
189
192
  --button-font-color-hover: var(--color-content-secondary);
190
193
  --button-font-color-active: var(--color-content-secondary);
191
194
  --button-font-color-focus: var(--color-content-secondary);
192
195
  }
193
196
  .ButtonNext_variant_ghost.ButtonNext_color_error {
194
- --button-bg-color: unset;
197
+ --button-bg-color: transparent;
195
198
  --button-bg-color-hover: var(--color-background-error-light-hover);
196
199
  --button-bg-color-active: var(--color-background-error-light-pressed);
197
- --button-bg-color-focus: unset;
200
+ --button-bg-color-focus: var(--color-background-error-light-hover);
198
201
  --button-font-color: var(--color-content-error);
199
202
  --button-font-color-hover: var(--color-content-error);
200
203
  --button-font-color-active: var(--color-content-error);
201
204
  --button-font-color-focus: var(--color-content-error);
202
205
  }
206
+ /** function */
203
207
  .ButtonNext_variant_function {
204
208
  --button-height: auto;
205
209
  --button-min-width: auto;
@@ -209,10 +213,10 @@
209
213
  .ButtonNext_variant_function.ButtonNext_color_secondary,
210
214
  .ButtonNext_variant_function.ButtonNext_color_tertiary,
211
215
  .ButtonNext_variant_function.ButtonNext_color_error {
212
- --button-bg-color: unset;
213
- --button-bg-color-hover: unset;
214
- --button-bg-color-active: unset;
215
- --button-bg-color-focus: unset;
216
+ --button-bg-color: transparent;
217
+ --button-bg-color-hover: transparent;
218
+ --button-bg-color-active: transparent;
219
+ --button-bg-color-focus: transparent;
216
220
  }
217
221
  .ButtonNext_variant_function.ButtonNext_color_primary {
218
222
  --button-font-color: var(--color-content-action);
@@ -238,6 +242,7 @@
238
242
  --button-font-color-active: var(--color-content-error-pressed);
239
243
  --button-font-color-focus: var(--color-content-error-pressed);
240
244
  }
245
+ /** disabled & loading */
241
246
  .ButtonNext_variant_contained.ButtonNext_disabled,
242
247
  .ButtonNext_variant_contained.ButtonNext_loading,
243
248
  .ButtonNext_variant_contained-additional.ButtonNext_disabled,
@@ -260,13 +265,15 @@
260
265
  .ButtonNext_variant_ghost.ButtonNext_loading,
261
266
  .ButtonNext_variant_function.ButtonNext_disabled,
262
267
  .ButtonNext_variant_function.ButtonNext_loading {
263
- --button-bg-color: unset;
264
- --button-bg-color-hover: unset;
265
- --button-bg-color-active: unset;
268
+ --button-bg-color: transparent;
269
+ --button-bg-color-hover: transparent;
270
+ --button-bg-color-active: transparent;
266
271
  }
272
+ /** focus */
267
273
  .ButtonNext:focus:not(:focus-visible, :active, :hover) {
268
274
  box-shadow: none;
269
275
  color: var(--button-font-color);
276
+ background-color: var(--button-bg-color);
270
277
  }
271
278
  .ButtonNext:focus:not(:focus-visible) {
272
279
  box-shadow: none;
package/__inner__/esm/components/IconButtonNext/IconButton.css CHANGED
@@ -71,6 +71,7 @@
71
71
  --icon-button-bg-color: var(--color-background-action);
72
72
  --icon-button-bg-color-hover: var(--color-background-action-hover);
73
73
  --icon-button-bg-color-active: var(--color-background-action-pressed);
74
+ --icon-button-bg-color-focus: var(--color-background-action-hover);
74
75
  --icon-button-font-color: var(--color-content-action-on);
75
76
  --icon-button-font-color-hover: var(--color-content-action-on);
76
77
  --icon-button-font-color-active: var(--color-content-action-on);
@@ -83,6 +84,7 @@
83
84
  --icon-button-bg-color-active: var(
84
85
  --color-content-action-secondary-pressed
85
86
  );
87
+ --icon-button-bg-color-focus: var(--color-content-action-secondary-hover);
86
88
  --icon-button-font-color: var(--color-content-action-on);
87
89
  --icon-button-font-color-hover: var(--color-content-action-on);
88
90
  --icon-button-font-color-active: var(--color-content-action-on);
@@ -93,6 +95,7 @@
93
95
  --icon-button-bg-color: var(--color-background-tertiary);
94
96
  --icon-button-bg-color-hover: var(--color-background-tertiary-hover);
95
97
  --icon-button-bg-color-active: var(--color-background-tertiary-pressed);
98
+ --icon-button-bg-color-focus: var(--color-background-tertiary-hover);
96
99
  --icon-button-font-color: var(--color-content-primary);
97
100
  --icon-button-font-color-hover: var(--color-content-primary);
98
101
  --icon-button-font-color-active: var(--color-content-primary);
@@ -103,6 +106,7 @@
103
106
  --icon-button-bg-color: var(--color-background-error);
104
107
  --icon-button-bg-color-hover: var(--color-background-error-hover);
105
108
  --icon-button-bg-color-active: var(--color-background-error-pressed);
109
+ --icon-button-bg-color-focus: var(--color-background-error-hover);
106
110
  --icon-button-font-color: var(--color-content-action-on);
107
111
  --icon-button-font-color-hover: var(--color-content-action-on);
108
112
  --icon-button-font-color-active: var(--color-content-action-on);
@@ -115,6 +119,7 @@
115
119
  --icon-button-bg-color: var(--color-background-action-light);
116
120
  --icon-button-bg-color-hover: var(--color-background-action-light-hover);
117
121
  --icon-button-bg-color-active: var(--color-background-action-light-pressed);
122
+ --icon-button-bg-color-focus: var(--color-background-action-light-hover);
118
123
  --icon-button-font-color: var(--color-content-action);
119
124
  --icon-button-font-color-hover: var(--color-content-action);
120
125
  --icon-button-font-color-active: var(--color-content-action);
@@ -125,6 +130,7 @@
125
130
  --icon-button-bg-color: var(--color-background-secondary);
126
131
  --icon-button-bg-color-hover: var(--color-background-secondary-hover);
127
132
  --icon-button-bg-color-active: var(--color-background-secondary-pressed);
133
+ --icon-button-bg-color-focus: var(--color-background-secondary-hover);
128
134
  --icon-button-font-color: var(--color-content-primary);
129
135
  --icon-button-font-color-hover: var(--color-content-primary);
130
136
  --icon-button-font-color-active: var(--color-content-primary);
@@ -135,6 +141,7 @@
135
141
  --icon-button-bg-color: var(--color-background-primary);
136
142
  --icon-button-bg-color-hover: var(--color-background-primary-hover);
137
143
  --icon-button-bg-color-active: var(--color-background-primary-pressed);
144
+ --icon-button-bg-color-focus: var(--color-background-primary-hover);
138
145
  --icon-button-font-color: var(--color-content-secondary);
139
146
  --icon-button-font-color-hover: var(--color-content-secondary);
140
147
  --icon-button-font-color-active: var(--color-content-secondary);
@@ -145,6 +152,7 @@
145
152
  --icon-button-bg-color: var(--color-background-error-light);
146
153
  --icon-button-bg-color-hover: var(--color-background-error-light-hover);
147
154
  --icon-button-bg-color-active: var(--color-background-error-light-pressed);
155
+ --icon-button-bg-color-focus: var(--color-background-error-light-hover);
148
156
  --icon-button-font-color: var(--color-content-error);
149
157
  --icon-button-font-color-hover: var(--color-content-error);
150
158
  --icon-button-font-color-active: var(--color-content-error);
@@ -157,6 +165,7 @@
157
165
  --icon-button-bg-color: transparent;
158
166
  --icon-button-bg-color-hover: var(--color-background-action-light-hover);
159
167
  --icon-button-bg-color-active: var(--color-background-action-light-pressed);
168
+ --icon-button-bg-color-focus: var(--color-background-action-light-hover);
160
169
  --icon-button-font-color: var(--color-content-action);
161
170
  --icon-button-font-color-hover: var(--color-content-action);
162
171
  --icon-button-font-color-active: var(--color-content-action);
@@ -167,6 +176,7 @@
167
176
  --icon-button-bg-color: transparent;
168
177
  --icon-button-bg-color-hover: var(--color-background-secondary-hover);
169
178
  --icon-button-bg-color-active: var(--color-background-secondary-pressed);
179
+ --icon-button-bg-color-focus: var(--color-background-secondary-hover);
170
180
  --icon-button-font-color: var(--color-content-primary);
171
181
  --icon-button-font-color-hover: var(--color-content-primary);
172
182
  --icon-button-font-color-active: var(--color-content-primary);
@@ -177,6 +187,7 @@
177
187
  --icon-button-bg-color: transparent;
178
188
  --icon-button-bg-color-hover: var(--color-background-primary-hover);
179
189
  --icon-button-bg-color-active: var(--color-background-primary-pressed);
190
+ --icon-button-bg-color-focus: var(--color-background-primary-hover);
180
191
  --icon-button-font-color: var(--color-content-secondary);
181
192
  --icon-button-font-color-hover: var(--color-content-secondary);
182
193
  --icon-button-font-color-active: var(--color-content-secondary);
@@ -187,6 +198,7 @@
187
198
  --icon-button-bg-color: transparent;
188
199
  --icon-button-bg-color-hover: var(--color-background-error-light-hover);
189
200
  --icon-button-bg-color-active: var(--color-background-error-light-pressed);
201
+ --icon-button-bg-color-focus: var(--color-background-error-light-hover);
190
202
  --icon-button-font-color: var(--color-content-error);
191
203
  --icon-button-font-color-hover: var(--color-content-error);
192
204
  --icon-button-font-color-active: var(--color-content-error);
@@ -269,7 +281,7 @@
269
281
  border-radius: 50%;
270
282
  }
271
283
 
272
- /** disabled */
284
+ /** disabled & loading */
273
285
 
274
286
  .IconButtonNext_variant_contained.IconButtonNext_disabled,
275
287
  .IconButtonNext_variant_contained.IconButtonNext_loading,
@@ -321,6 +333,7 @@
321
333
  /* the bug in outline property before chrome version 94 – doesn't repeat radius of an element */
322
334
  box-shadow: var(--shadow-outline-focused);
323
335
  color: var(--icon-button-font-color-focus);
336
+ background-color: var(--icon-button-bg-color-focus);
324
337
  }
325
338
 
326
339
  .IconButtonNext:focus:not(:focus-visible) {
package/__inner__/esm/components/ThemeProvider/_color/Theme_color_bBusinessDark.css CHANGED
@@ -3,7 +3,7 @@
3
3
  --color-content-secondary: #aeb1c4;
4
4
  --color-content-primary: #fff;
5
5
  --color-content-tertiary: #7e8194;
6
- --color-content-disabled: #7e8194;
6
+ --color-content-disabled: #636574;
7
7
  --color-content-ghost-disabled: rgb(255 255 255 / 40%);
8
8
  --color-content-action: #023dff;
9
9
  --color-content-action-hover: #0534d0;
@@ -145,28 +145,28 @@
145
145
  --color-accent-tertiary-pressed: #43475b;
146
146
  --color-accent-disabled: #2f3240;
147
147
  --color-accent-main-inverse: #c7c8ce;
148
- --color-additional-a1: #0b6abe;
149
- --color-additional-a2: #1899e9;
150
- --color-additional-a3: #b3f1ff;
151
- --color-additional-b1: #b5215f;
152
- --color-additional-b2: #e62d73;
153
- --color-additional-b3: #ffb5cd;
154
- --color-additional-c1: #e64920;
155
- --color-additional-c2: #f46c1b;
156
- --color-additional-c3: #ffe2a8;
157
- --color-additional-d1: #ff8e00;
158
- --color-additional-d2: #ffc100;
159
- --color-additional-d3: #fff9a2;
160
- --color-additional-e1: #771db4;
161
- --color-additional-e2: #a02be5;
162
- --color-additional-e3: #e9b7fe;
163
- --color-additional-f1: #107c60;
164
- --color-additional-f2: #17ae87;
165
- --color-additional-f3: #abeada;
166
- --color-additional-g1: #b88f27;
167
- --color-additional-g2: #e0b548;
168
- --color-additional-g3: #f4d37d;
169
- --color-additional-h1: #747e89;
170
- --color-additional-h2: #bdc4cb;
171
- --color-additional-h3: #e1e4e7;
148
+ --color-additional-a1: #866c47;
149
+ --color-additional-a2: #d4aa6b;
150
+ --color-additional-a3: #eeddc4;
151
+ --color-additional-b1: #763986;
152
+ --color-additional-b2: #ba55d3;
153
+ --color-additional-b3: #e3bbed;
154
+ --color-additional-c1: #638125;
155
+ --color-additional-c2: #9acd32;
156
+ --color-additional-c3: #d7ebad;
157
+ --color-additional-d1: #23867f;
158
+ --color-additional-d2: #30d5c8;
159
+ --color-additional-d3: #aceee9;
160
+ --color-additional-e1: #9f5237;
161
+ --color-additional-e2: #ff7f50;
162
+ --color-additional-e3: #ffccb9;
163
+ --color-additional-f1: #1966a0;
164
+ --color-additional-f2: #1fa1ff;
165
+ --color-additional-f3: #a5d9ff;
166
+ --color-additional-g1: #9a4270;
167
+ --color-additional-g2: #f664af;
168
+ --color-additional-g3: #fbc1df;
169
+ --color-additional-h1: #9f891a;
170
+ --color-additional-h2: #ffda1f;
171
+ --color-additional-h3: #fff0a5;
172
172
  }
package/__inner__/esm/components/ThemeProvider/_color/Theme_color_bBusinessDefault.css CHANGED
@@ -47,7 +47,7 @@
47
47
  --color-background-tertiary: #d7d8e1;
48
48
  --color-background-tertiary-hover: #c2c5d3;
49
49
  --color-background-tertiary-pressed: #aeb1c4;
50
- --color-background-disabled: #d7d8e1;
50
+ --color-background-disabled: #ebecf0;
51
51
  --color-background-action: #023dff;
52
52
  --color-background-action-hover: #0534d0;
53
53
  --color-background-action-pressed: #082ba0;
@@ -55,9 +55,9 @@
55
55
  --color-background-action-light: #d9e2ff;
56
56
  --color-background-action-light-hover: #ccd8ff;
57
57
  --color-background-action-light-pressed: #9ab1ff;
58
- --color-background-accent-action-light: #0534d0;
59
- --color-background-accent-action-light-hover: #082ba0;
60
- --color-background-accent-action-light-pressed: #0a2171;
58
+ --color-background-accent-action-light: #082ba0;
59
+ --color-background-accent-action-light-hover: #0a2171;
60
+ --color-background-accent-action-light-pressed: #0d1841;
61
61
  --color-background-action-secondary: #2c2c33;
62
62
  --color-background-action-secondary-hover: #1e1d22;
63
63
  --color-background-action-secondary-pressed: #17161a;
@@ -116,7 +116,7 @@
116
116
  --color-border-secondary: #d7d8e1;
117
117
  --color-border-secondary-hover: #c2c5d3;
118
118
  --color-border-secondary-pressed: #aeb1c4;
119
- --color-border-disabled: #c2c5d3;
119
+ --color-border-disabled: #d7d8e1;
120
120
  --color-border-ghost-disabled: rgb(255 255 255 / 40%);
121
121
  --color-border-focused: #9ab1ff;
122
122
  --color-border-action: #023dff;
@@ -144,29 +144,29 @@
144
144
  --color-accent-tertiary-hover: #393c4d;
145
145
  --color-accent-tertiary-pressed: #43475b;
146
146
  --color-accent-disabled: #2f3240;
147
- --color-accent-main-inverse: #d9dade;
148
- --color-additional-a1: #0b6abe;
149
- --color-additional-a2: #1899e9;
150
- --color-additional-a3: #b3f1ff;
151
- --color-additional-b1: #b5215f;
152
- --color-additional-b2: #e62d73;
153
- --color-additional-b3: #ffb5cd;
154
- --color-additional-c1: #e64920;
155
- --color-additional-c2: #f46c1b;
156
- --color-additional-c3: #ffe2a8;
157
- --color-additional-d1: #ff8e00;
158
- --color-additional-d2: #ffc100;
159
- --color-additional-d3: #fff9a2;
160
- --color-additional-e1: #771db4;
161
- --color-additional-e2: #a02be5;
162
- --color-additional-e3: #e9b7fe;
163
- --color-additional-f1: #107c60;
164
- --color-additional-f2: #17ae87;
165
- --color-additional-f3: #abeada;
166
- --color-additional-g1: #b88f27;
167
- --color-additional-g2: #e0b548;
168
- --color-additional-g3: #f4d37d;
169
- --color-additional-h1: #747e89;
170
- --color-additional-h2: #bdc4cb;
171
- --color-additional-h3: #e1e4e7;
147
+ --color-accent-main-inverse: #c7c8ce;
148
+ --color-additional-a1: #866c47;
149
+ --color-additional-a2: #d4aa6b;
150
+ --color-additional-a3: #eeddc4;
151
+ --color-additional-b1: #763986;
152
+ --color-additional-b2: #ba55d3;
153
+ --color-additional-b3: #e3bbed;
154
+ --color-additional-c1: #638125;
155
+ --color-additional-c2: #9acd32;
156
+ --color-additional-c3: #d7ebad;
157
+ --color-additional-d1: #23867f;
158
+ --color-additional-d2: #30d5c8;
159
+ --color-additional-d3: #aceee9;
160
+ --color-additional-e1: #9f5237;
161
+ --color-additional-e2: #ff7f50;
162
+ --color-additional-e3: #ffccb9;
163
+ --color-additional-f1: #1966a0;
164
+ --color-additional-f2: #1fa1ff;
165
+ --color-additional-f3: #a5d9ff;
166
+ --color-additional-g1: #9a4270;
167
+ --color-additional-g2: #f664af;
168
+ --color-additional-g3: #fbc1df;
169
+ --color-additional-h1: #9f891a;
170
+ --color-additional-h2: #ffda1f;
171
+ --color-additional-h3: #fff0a5;
172
172
  }
package/__inner__/esm/components/ThemeProvider/_color/Theme_color_ozenDark.css CHANGED
@@ -3,7 +3,7 @@
3
3
  --color-content-secondary: #aeb1c4;
4
4
  --color-content-primary: #fff;
5
5
  --color-content-tertiary: #7e8194;
6
- --color-content-disabled: #7e8194;
6
+ --color-content-disabled: #636574;
7
7
  --color-content-ghost-disabled: rgb(255 255 255 / 40%);
8
8
  --color-content-action: #0b0;
9
9
  --color-content-action-hover: #039904;
@@ -145,28 +145,28 @@
145
145
  --color-accent-tertiary-pressed: #43475b;
146
146
  --color-accent-disabled: #2f3240;
147
147
  --color-accent-main-inverse: #c7c8ce;
148
- --color-additional-a1: #0b6abe;
149
- --color-additional-a2: #1899e9;
150
- --color-additional-a3: #b3f1ff;
151
- --color-additional-b1: #b5215f;
152
- --color-additional-b2: #e62d73;
153
- --color-additional-b3: #ffb5cd;
154
- --color-additional-c1: #e64920;
155
- --color-additional-c2: #f46c1b;
156
- --color-additional-c3: #ffe2a8;
157
- --color-additional-d1: #ff8e00;
158
- --color-additional-d2: #ffc100;
159
- --color-additional-d3: #fff9a2;
160
- --color-additional-e1: #771db4;
161
- --color-additional-e2: #a02be5;
162
- --color-additional-e3: #e9b7fe;
163
- --color-additional-f1: #107c60;
164
- --color-additional-f2: #17ae87;
165
- --color-additional-f3: #abeada;
166
- --color-additional-g1: #b88f27;
167
- --color-additional-g2: #e0b548;
168
- --color-additional-g3: #f4d37d;
169
- --color-additional-h1: #747e89;
170
- --color-additional-h2: #bdc4cb;
171
- --color-additional-h3: #e1e4e7;
148
+ --color-additional-a1: #866c47;
149
+ --color-additional-a2: #d4aa6b;
150
+ --color-additional-a3: #eeddc4;
151
+ --color-additional-b1: #763986;
152
+ --color-additional-b2: #ba55d3;
153
+ --color-additional-b3: #e3bbed;
154
+ --color-additional-c1: #638125;
155
+ --color-additional-c2: #9acd32;
156
+ --color-additional-c3: #d7ebad;
157
+ --color-additional-d1: #23867f;
158
+ --color-additional-d2: #30d5c8;
159
+ --color-additional-d3: #aceee9;
160
+ --color-additional-e1: #9f5237;
161
+ --color-additional-e2: #ff7f50;
162
+ --color-additional-e3: #ffccb9;
163
+ --color-additional-f1: #1966a0;
164
+ --color-additional-f2: #1fa1ff;
165
+ --color-additional-f3: #a5d9ff;
166
+ --color-additional-g1: #9a4270;
167
+ --color-additional-g2: #f664af;
168
+ --color-additional-g3: #fbc1df;
169
+ --color-additional-h1: #9f891a;
170
+ --color-additional-h2: #ffda1f;
171
+ --color-additional-h3: #fff0a5;
172
172
  }
package/__inner__/esm/components/ThemeProvider/_color/Theme_color_ozenDefault.css CHANGED
@@ -116,7 +116,7 @@
116
116
  --color-border-secondary: #d7d8e1;
117
117
  --color-border-secondary-hover: #c2c5d3;
118
118
  --color-border-secondary-pressed: #aeb1c4;
119
- --color-border-disabled: #d7d8e1;
119
+ --color-border-disabled: #c2c5d3;
120
120
  --color-border-ghost-disabled: rgb(255 255 255 / 40%);
121
121
  --color-border-focused: #99e499;
122
122
  --color-border-action: #0b0;
@@ -145,28 +145,28 @@
145
145
  --color-accent-tertiary-pressed: #43475b;
146
146
  --color-accent-disabled: #2f3240;
147
147
  --color-accent-main-inverse: #c7c8ce;
148
- --color-additional-a1: #0b6abe;
149
- --color-additional-a2: #1899e9;
150
- --color-additional-a3: #b3f1ff;
151
- --color-additional-b1: #b5215f;
152
- --color-additional-b2: #e62d73;
153
- --color-additional-b3: #ffb5cd;
154
- --color-additional-c1: #e64920;
155
- --color-additional-c2: #f46c1b;
156
- --color-additional-c3: #ffe2a8;
157
- --color-additional-d1: #ff8e00;
158
- --color-additional-d2: #ffc100;
159
- --color-additional-d3: #fff9a2;
160
- --color-additional-e1: #771db4;
161
- --color-additional-e2: #a02be5;
162
- --color-additional-e3: #e9b7fe;
163
- --color-additional-f1: #107c60;
164
- --color-additional-f2: #17ae87;
165
- --color-additional-f3: #abeada;
166
- --color-additional-g1: #b88f27;
167
- --color-additional-g2: #e0b548;
168
- --color-additional-g3: #f4d37d;
169
- --color-additional-h1: #747e89;
170
- --color-additional-h2: #bdc4cb;
171
- --color-additional-h3: #e1e4e7;
148
+ --color-additional-a1: #866c47;
149
+ --color-additional-a2: #d4aa6b;
150
+ --color-additional-a3: #eeddc4;
151
+ --color-additional-b1: #763986;
152
+ --color-additional-b2: #ba55d3;
153
+ --color-additional-b3: #e3bbed;
154
+ --color-additional-c1: #638125;
155
+ --color-additional-c2: #9acd32;
156
+ --color-additional-c3: #d7ebad;
157
+ --color-additional-d1: #23867f;
158
+ --color-additional-d2: #30d5c8;
159
+ --color-additional-d3: #aceee9;
160
+ --color-additional-e1: #9f5237;
161
+ --color-additional-e2: #ff7f50;
162
+ --color-additional-e3: #ffccb9;
163
+ --color-additional-f1: #1966a0;
164
+ --color-additional-f2: #1fa1ff;
165
+ --color-additional-f3: #a5d9ff;
166
+ --color-additional-g1: #9a4270;
167
+ --color-additional-g2: #f664af;
168
+ --color-additional-g3: #fbc1df;
169
+ --color-additional-h1: #9f891a;
170
+ --color-additional-h2: #ffda1f;
171
+ --color-additional-h3: #fff0a5;
172
172
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ozen-ui/kit",
3
- "version": "0.39.0",
3
+ "version": "0.40.0",
4
4
  "description": "React component library",
5
5
  "files": [
6
6
  "*"
@@ -27,9 +27,9 @@
27
27
  "react-popper": "^2.3.0",
28
28
  "react-transition-group": "^4.4.5",
29
29
  "tslib": "^2.6.2",
30
- "@ozen-ui/icons": "0.39.0",
31
- "@ozen-ui/fonts": "0.39.0",
32
- "@ozen-ui/logger": "0.39.0"
30
+ "@ozen-ui/fonts": "0.40.0",
31
+ "@ozen-ui/icons": "0.40.0",
32
+ "@ozen-ui/logger": "0.40.0"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "react": ">=17.0.2 <19.0.0",