@itwin/itwinui-css 0.45.0 → 0.48.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 (43) hide show
  1. package/css/all.css +699 -710
  2. package/css/badge.css +4 -2
  3. package/css/button.css +31 -96
  4. package/css/color-picker.css +26 -21
  5. package/css/expandable-block.css +12 -0
  6. package/css/inputs.css +498 -503
  7. package/css/popover.css +3 -3
  8. package/css/side-navigation.css +2 -4
  9. package/css/skip-to-content.css +51 -0
  10. package/css/table.css +10 -49
  11. package/css/tile.css +42 -15
  12. package/css/tree.css +21 -15
  13. package/package.json +2 -2
  14. package/scss/badge/badge.scss +5 -2
  15. package/scss/button/button-group.scss +19 -41
  16. package/scss/button/button.scss +19 -1
  17. package/scss/button/classes.scss +0 -1
  18. package/scss/button/default.scss +1 -0
  19. package/scss/classes.scss +1 -0
  20. package/scss/color-picker/color-picker.scss +57 -52
  21. package/scss/expandable-block/block.scss +23 -0
  22. package/scss/index.scss +1 -0
  23. package/scss/inputs/checkbox-radio.scss +17 -136
  24. package/scss/inputs/checkbox.scss +77 -43
  25. package/scss/inputs/classes.scss +15 -9
  26. package/scss/inputs/index.scss +1 -0
  27. package/scss/inputs/input-with-icon.scss +36 -0
  28. package/scss/inputs/input.scss +1 -0
  29. package/scss/inputs/labeled-inputs.scss +49 -14
  30. package/scss/inputs/radio.scss +9 -3
  31. package/scss/inputs/select.scss +44 -93
  32. package/scss/popover/popover.scss +7 -6
  33. package/scss/side-navigation/side-navigation.scss +3 -6
  34. package/scss/skip-to-content/classes.scss +7 -0
  35. package/scss/skip-to-content/index.scss +3 -0
  36. package/scss/skip-to-content/skip-to-content.scss +37 -0
  37. package/scss/style/mixins.scss +29 -4
  38. package/scss/style/variables.scss +1 -0
  39. package/scss/table/paginator.scss +5 -10
  40. package/scss/tile/classes.scss +4 -0
  41. package/scss/tile/tile.scss +17 -16
  42. package/scss/tree/classes.scss +4 -0
  43. package/scss/tree/tree.scss +17 -4
package/css/badge.css CHANGED
@@ -3,6 +3,8 @@
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-badge{
6
+ --iui-badge-background-color:#C7CCD1;
7
+ --_iui-badge-text-color:rgba(0, 0, 0, 0.6);
6
8
  margin:0;
7
9
  padding:0;
8
10
  border:none;
@@ -12,8 +14,8 @@
12
14
  padding:0 6px;
13
15
  margin:6px 0;
14
16
  border-radius:3px;
15
- background-color:var(--badge-color, #C7CCD1);
16
- color:var(--badge-text-color, rgba(0, 0, 0, 0.6));
17
+ background-color:var(--iui-badge-background-color);
18
+ color:var(--_iui-badge-text-color);
17
19
  text-transform:uppercase;
18
20
  -webkit-user-select:none;
19
21
  -moz-user-select:none;
package/css/button.css CHANGED
@@ -3,6 +3,7 @@
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-button{
6
+ --_iui-button-active-stripe-inset:initial;
6
7
  margin:0;
7
8
  padding:0;
8
9
  border:none;
@@ -16,7 +17,6 @@
16
17
  box-sizing:border-box;
17
18
  border-radius:3px;
18
19
  line-height:22px;
19
- outline:none;
20
20
  box-shadow:none;
21
21
  font-size:14px;
22
22
  font-weight:400;
@@ -58,6 +58,13 @@
58
58
  background:var(--iui-color-background-disabled);
59
59
  border-color:var(--iui-color-background-disabled);
60
60
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
61
+ .iui-button.iui-active::after{
62
+ content:'';
63
+ position:absolute;
64
+ inset:var(--_iui-button-active-stripe-inset);
65
+ background-color:var(--iui-color-foreground-primary); }
66
+ .iui-button.iui-active[disabled]::after, .iui-button.iui-active:disabled::after{
67
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
61
68
  .iui-button.iui-default{
62
69
  background-color:#FFF;
63
70
  border-color:rgba(0, 0, 0, 0.4);
@@ -264,133 +271,61 @@
264
271
  isolation:isolate; }
265
272
  .iui-button-group > *{
266
273
  display:flex; }
267
- .iui-button-group > * input, .iui-button-group > * button{
274
+ .iui-button-group > * .iui-input-container, .iui-button-group > * .iui-button, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)){
268
275
  position:relative;
269
- transition-duration:0ms; }
270
- .iui-button-group > * input:hover, .iui-button-group > * button:hover{
276
+ --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px); }
277
+ .iui-button-group > * .iui-input-container:hover, .iui-button-group > * .iui-button:hover, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
271
278
  z-index:1; }
272
- .iui-button-group > * input:focus, .iui-button-group > * button:focus{
279
+ .iui-button-group > * .iui-input-container:focus, .iui-button-group > * .iui-input-container:focus-within, .iui-button-group > * .iui-button:focus, .iui-button-group > * .iui-button:focus-within, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
273
280
  z-index:2; }
274
- .iui-button-group > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-group > * button:focus:where(:not(:focus-visible):not(:hover)){
275
- z-index:revert; }
276
- .iui-button-group > * input:disabled, .iui-button-group > * button:disabled{
281
+ .iui-button-group > * .iui-input-container:disabled, .iui-button-group > * .iui-input-container.iui-disabled, .iui-button-group > * .iui-input-container[aria-disabled="true"], .iui-button-group > * .iui-button:disabled, .iui-button-group > * .iui-button.iui-disabled, .iui-button-group > * .iui-button[aria-disabled="true"], .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled="true"]{
277
282
  z-index:-1; }
278
- .iui-button-group > * input:hover, .iui-button-group > * input:focus, .iui-button-group > * button:hover, .iui-button-group > * button:focus{
283
+ .iui-button-group > * .iui-input, .iui-button-group > * .iui-button:where(:not(.iui-borderless)){
284
+ border-radius:0;
285
+ transition-duration:0ms; }
286
+ .iui-button-group > * .iui-input:hover, .iui-button-group > * .iui-input:focus, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):focus{
279
287
  transition-duration:0.2s; }
280
- .iui-button-group > * input.iui-active::after, .iui-button-group > * button.iui-active::after{
281
- content:'';
282
- position:absolute;
283
- height:2px;
284
- opacity:1;
285
- top:2px;
286
- left:2px;
287
- width:calc(100% - 4px);
288
- background-color:#008BE1;
289
- background-color:var(--iui-color-foreground-primary); }
290
- .iui-button-group > * input.iui-active:disabled::after, .iui-button-group > * button.iui-active:disabled::after{
291
- background-color:rgba(0, 0, 0, 0.2);
292
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
293
- .iui-button-group > * input:not(.iui-borderless), .iui-button-group > * button:not(.iui-borderless){
294
- border-radius:0; }
295
- .iui-button-group > *:first-child input, .iui-button-group > *:first-child button:not(.iui-borderless){
288
+ .iui-button-group > *:first-child .iui-input, .iui-button-group > *:first-child .iui-button:where(:not(.iui-borderless)){
296
289
  border-top-left-radius:3px;
297
290
  border-bottom-left-radius:3px; }
298
- .iui-button-group > *:last-child input, .iui-button-group > *:last-child button:not(.iui-borderless){
291
+ .iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not(.iui-borderless)){
299
292
  border-top-right-radius:3px;
300
293
  border-bottom-right-radius:3px; }
301
294
  .iui-button-group > * + *{
302
295
  margin-left:-1px; }
303
- .iui-button-group > *:not(:first-child) .iui-default:disabled{
296
+ .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled="true"]{
304
297
  border-left-color:#DCE0E3;
305
298
  border-left-color:var(--iui-color-background-4); }
306
299
 
307
300
  .iui-button-split-menu{
308
- display:inline-flex;
309
- align-items:center;
310
- isolation:isolate;
311
301
  display:inline-flex;
312
302
  align-items:center;
313
303
  isolation:isolate; }
314
304
  .iui-button-split-menu > *{
315
305
  display:flex; }
316
- .iui-button-split-menu > * input, .iui-button-split-menu > * button{
306
+ .iui-button-split-menu > * .iui-input-container, .iui-button-split-menu > * .iui-button, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)){
317
307
  position:relative;
318
- transition-duration:0ms; }
319
- .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
308
+ --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px); }
309
+ .iui-button-split-menu > * .iui-input-container:hover, .iui-button-split-menu > * .iui-button:hover, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
320
310
  z-index:1; }
321
- .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
311
+ .iui-button-split-menu > * .iui-input-container:focus, .iui-button-split-menu > * .iui-input-container:focus-within, .iui-button-split-menu > * .iui-button:focus, .iui-button-split-menu > * .iui-button:focus-within, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
322
312
  z-index:2; }
323
- .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
324
- z-index:revert; }
325
- .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
313
+ .iui-button-split-menu > * .iui-input-container:disabled, .iui-button-split-menu > * .iui-input-container.iui-disabled, .iui-button-split-menu > * .iui-input-container[aria-disabled="true"], .iui-button-split-menu > * .iui-button:disabled, .iui-button-split-menu > * .iui-button.iui-disabled, .iui-button-split-menu > * .iui-button[aria-disabled="true"], .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled="true"]{
326
314
  z-index:-1; }
327
- .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus{
328
- transition-duration:0.2s; }
329
- .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
330
- content:'';
331
- position:absolute;
332
- height:2px;
333
- opacity:1;
334
- top:2px;
335
- left:2px;
336
- width:calc(100% - 4px);
337
- background-color:#008BE1;
338
- background-color:var(--iui-color-foreground-primary); }
339
- .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
340
- background-color:rgba(0, 0, 0, 0.2);
341
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
342
- .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
343
- border-radius:0; }
344
- .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
345
- border-top-left-radius:3px;
346
- border-bottom-left-radius:3px; }
347
- .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
348
- border-top-right-radius:3px;
349
- border-bottom-right-radius:3px; }
350
- .iui-button-split-menu > * + *{
351
- margin-left:-1px; }
352
- .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
353
- border-left-color:#DCE0E3;
354
- border-left-color:var(--iui-color-background-4); }
355
- .iui-button-split-menu > *{
356
- display:flex; }
357
- .iui-button-split-menu > * input, .iui-button-split-menu > * button{
358
- position:relative;
315
+ .iui-button-split-menu > * .iui-input, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)){
316
+ border-radius:0;
359
317
  transition-duration:0ms; }
360
- .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
361
- z-index:1; }
362
- .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
363
- z-index:2; }
364
- .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
365
- z-index:revert; }
366
- .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
367
- z-index:-1; }
368
- .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus{
318
+ .iui-button-split-menu > * .iui-input:hover, .iui-button-split-menu > * .iui-input:focus, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):focus{
369
319
  transition-duration:0.2s; }
370
- .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
371
- content:'';
372
- position:absolute;
373
- height:2px;
374
- opacity:1;
375
- top:2px;
376
- left:2px;
377
- width:calc(100% - 4px);
378
- background-color:#008BE1;
379
- background-color:var(--iui-color-foreground-primary); }
380
- .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
381
- background-color:rgba(0, 0, 0, 0.2);
382
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
383
- .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
384
- border-radius:0; }
385
- .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
320
+ .iui-button-split-menu > *:first-child .iui-input, .iui-button-split-menu > *:first-child .iui-button:where(:not(.iui-borderless)){
386
321
  border-top-left-radius:3px;
387
322
  border-bottom-left-radius:3px; }
388
- .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
323
+ .iui-button-split-menu > *:last-child .iui-input, .iui-button-split-menu > *:last-child .iui-button:where(:not(.iui-borderless)){
389
324
  border-top-right-radius:3px;
390
325
  border-bottom-right-radius:3px; }
391
326
  .iui-button-split-menu > * + *{
392
327
  margin-left:-1px; }
393
- .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
328
+ .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled="true"]{
394
329
  border-left-color:#DCE0E3;
395
330
  border-left-color:var(--iui-color-background-4); }
396
331
  .iui-button-split-menu:hover{
package/css/color-picker.css CHANGED
@@ -3,6 +3,7 @@
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-color-picker{
6
+ --iui-color-picker-selected-color:initial;
6
7
  margin:0;
7
8
  padding:0;
8
9
  border:none;
@@ -83,34 +84,43 @@
83
84
  appearance:none; }
84
85
 
85
86
  .iui-color-swatch{
87
+ --iui-color-swatch-background:initial;
86
88
  height:24px;
87
89
  width:24px;
88
90
  cursor:pointer;
89
91
  border-radius:5px;
90
- background-color:var(--swatch-color);
91
92
  margin-bottom:4px;
92
93
  margin-right:4px;
93
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
94
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
94
+ position:relative;
95
+ background-color:var(--iui-color-swatch-background);
96
+ background-position:0 0, 8px 8px;
97
+ background-size:16px 16px;
98
+ background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
99
+ background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)); }
95
100
  @supports (gap: 8px){
96
101
  .iui-color-swatch{
97
102
  margin-bottom:0;
98
103
  margin-right:0; } }
104
+ .iui-color-swatch::after{
105
+ content:'';
106
+ position:absolute;
107
+ width:inherit;
108
+ height:inherit;
109
+ border-radius:inherit;
110
+ background-color:inherit;
111
+ box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
99
112
  .iui-color-swatch:hover{
100
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
101
113
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
102
114
  .iui-color-swatch:focus-visible{
103
115
  outline:2px solid var(--iui-color-foreground-primary);
104
- outline-offset:0; }
116
+ outline-offset:1px; }
105
117
  @supports not selector(*:focus-visible){
106
118
  .iui-color-swatch:focus{
107
119
  outline:2px solid var(--iui-color-foreground-primary);
108
- outline-offset:0; } }
120
+ outline-offset:1px; } }
109
121
  .iui-color-swatch.iui-active{
110
- box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
111
122
  box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
112
123
  .iui-color-swatch.iui-active:hover{
113
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
114
124
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
115
125
 
116
126
  .iui-color-picker-section-label{
@@ -126,12 +136,12 @@
126
136
  min-width:280px; }
127
137
 
128
138
  .iui-color-field{
139
+ --iui-color-field-hue:initial;
129
140
  position:relative;
130
141
  cursor:crosshair;
131
142
  width:100%;
132
143
  height:209px;
133
- background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--hue));
134
- background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--hue)); }
144
+ background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue)); }
135
145
  .iui-color-field:not(:last-child){
136
146
  margin-bottom:6px; }
137
147
 
@@ -145,37 +155,32 @@
145
155
 
146
156
  .iui-opacity-slider .iui-slider-rail{
147
157
  height:8px;
148
- background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
149
158
  background-position:0 0, 4px 4px;
150
159
  background-size:8px 8px;
151
- background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
152
- background-position:0 0, 4px 4px;
153
- background-size:8px 8px; }
160
+ background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
161
+ background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)); }
154
162
  .iui-opacity-slider .iui-slider-rail::before{
155
163
  display:block;
156
164
  content:'';
157
165
  width:100%;
158
166
  height:100%;
159
- background-image:linear-gradient(to right, transparent 0%, var(--selected-color) 100%); }
167
+ background-image:linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%); }
160
168
 
161
169
  .iui-opacity-slider .iui-slider-thumb{
162
170
  top:7px; }
163
171
 
164
172
  .iui-color-dot{
173
+ --iui-color-dot-inset:initial;
165
174
  position:absolute;
166
- top:var(--top, 0%);
167
- left:var(--left, 0%);
175
+ inset:var(--iui-color-dot-inset);
168
176
  width:16px;
169
177
  height:16px;
170
178
  border-radius:50%;
171
179
  transform:translate(-8px, -8px);
172
180
  cursor:crosshair;
173
- box-shadow:white 0 0 0 1px, inset 0 0 0 1px rgba(255, 255, 255, 0.1);
174
- background-color:var(--selected-color);
175
181
  box-shadow:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)) 0 0 0 1px, inset 0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-6));
176
- background-color:var(--selected-color); }
182
+ background-color:var(--iui-color-picker-selected-color); }
177
183
  .iui-color-dot:hover{
178
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
179
184
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
180
185
  .iui-color-dot:focus-visible{
181
186
  outline:2px solid var(--iui-color-foreground-primary);
package/css/expandable-block.css CHANGED
@@ -161,3 +161,15 @@
161
161
  margin-left:8px; }
162
162
  .iui-expandable-block.iui-small .iui-header > .iui-status-icon{
163
163
  margin-left:8px; }
164
+ .iui-expandable-block.iui-borderless,
165
+ .iui-expandable-block.iui-borderless .iui-header,
166
+ .iui-expandable-block.iui-borderless .iui-expandable-content{
167
+ background-color:transparent;
168
+ border:initial; }
169
+ .iui-expandable-block.iui-borderless .iui-header{
170
+ border-radius:3px; }
171
+ .iui-expandable-block.iui-borderless .iui-header:hover{
172
+ background-color:rgba(0, 0, 0, 0.1);
173
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
174
+ .iui-expandable-block.iui-borderless .iui-expandable-content > div{
175
+ padding:0; }