@itwin/itwinui-css 0.46.0 → 0.48.1

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 (38) hide show
  1. package/css/all.css +492 -487
  2. package/css/badge.css +4 -2
  3. package/css/button.css +31 -95
  4. package/css/color-picker.css +26 -21
  5. package/css/expandable-block.css +12 -0
  6. package/css/inputs.css +293 -284
  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 -48
  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 -0
  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/labeled-inputs.scss +4 -2
  26. package/scss/inputs/radio.scss +14 -3
  27. package/scss/popover/popover.scss +7 -6
  28. package/scss/side-navigation/side-navigation.scss +3 -6
  29. package/scss/skip-to-content/classes.scss +7 -0
  30. package/scss/skip-to-content/index.scss +3 -0
  31. package/scss/skip-to-content/skip-to-content.scss +37 -0
  32. package/scss/style/mixins.scss +29 -4
  33. package/scss/style/variables.scss +1 -0
  34. package/scss/table/paginator.scss +5 -10
  35. package/scss/tile/classes.scss +4 -0
  36. package/scss/tile/tile.scss +17 -16
  37. package/scss/tree/classes.scss +4 -0
  38. 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;
@@ -57,6 +58,13 @@
57
58
  background:var(--iui-color-background-disabled);
58
59
  border-color:var(--iui-color-background-disabled);
59
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)); }
60
68
  .iui-button.iui-default{
61
69
  background-color:#FFF;
62
70
  border-color:rgba(0, 0, 0, 0.4);
@@ -263,133 +271,61 @@
263
271
  isolation:isolate; }
264
272
  .iui-button-group > *{
265
273
  display:flex; }
266
- .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)){
267
275
  position:relative;
268
- transition-duration:0ms; }
269
- .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{
270
278
  z-index:1; }
271
- .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{
272
280
  z-index:2; }
273
- .iui-button-group > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-group > * button:focus:where(:not(:focus-visible):not(:hover)){
274
- z-index:revert; }
275
- .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"]{
276
282
  z-index:-1; }
277
- .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{
278
287
  transition-duration:0.2s; }
279
- .iui-button-group > * input.iui-active::after, .iui-button-group > * button.iui-active::after{
280
- content:'';
281
- position:absolute;
282
- height:2px;
283
- opacity:1;
284
- top:2px;
285
- left:2px;
286
- width:calc(100% - 4px);
287
- background-color:#008BE1;
288
- background-color:var(--iui-color-foreground-primary); }
289
- .iui-button-group > * input.iui-active:disabled::after, .iui-button-group > * button.iui-active:disabled::after{
290
- background-color:rgba(0, 0, 0, 0.2);
291
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
292
- .iui-button-group > * input:not(.iui-borderless), .iui-button-group > * button:not(.iui-borderless){
293
- border-radius:0; }
294
- .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)){
295
289
  border-top-left-radius:3px;
296
290
  border-bottom-left-radius:3px; }
297
- .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)){
298
292
  border-top-right-radius:3px;
299
293
  border-bottom-right-radius:3px; }
300
294
  .iui-button-group > * + *{
301
295
  margin-left:-1px; }
302
- .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"]{
303
297
  border-left-color:#DCE0E3;
304
298
  border-left-color:var(--iui-color-background-4); }
305
299
 
306
300
  .iui-button-split-menu{
307
- display:inline-flex;
308
- align-items:center;
309
- isolation:isolate;
310
301
  display:inline-flex;
311
302
  align-items:center;
312
303
  isolation:isolate; }
313
304
  .iui-button-split-menu > *{
314
305
  display:flex; }
315
- .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)){
316
307
  position:relative;
317
- transition-duration:0ms; }
318
- .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{
319
310
  z-index:1; }
320
- .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{
321
312
  z-index:2; }
322
- .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
323
- z-index:revert; }
324
- .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"]{
325
314
  z-index:-1; }
326
- .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus{
327
- transition-duration:0.2s; }
328
- .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
329
- content:'';
330
- position:absolute;
331
- height:2px;
332
- opacity:1;
333
- top:2px;
334
- left:2px;
335
- width:calc(100% - 4px);
336
- background-color:#008BE1;
337
- background-color:var(--iui-color-foreground-primary); }
338
- .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
339
- background-color:rgba(0, 0, 0, 0.2);
340
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
341
- .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
342
- border-radius:0; }
343
- .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
344
- border-top-left-radius:3px;
345
- border-bottom-left-radius:3px; }
346
- .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
347
- border-top-right-radius:3px;
348
- border-bottom-right-radius:3px; }
349
- .iui-button-split-menu > * + *{
350
- margin-left:-1px; }
351
- .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
352
- border-left-color:#DCE0E3;
353
- border-left-color:var(--iui-color-background-4); }
354
- .iui-button-split-menu > *{
355
- display:flex; }
356
- .iui-button-split-menu > * input, .iui-button-split-menu > * button{
357
- position:relative;
315
+ .iui-button-split-menu > * .iui-input, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)){
316
+ border-radius:0;
358
317
  transition-duration:0ms; }
359
- .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
360
- z-index:1; }
361
- .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
362
- z-index:2; }
363
- .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
364
- z-index:revert; }
365
- .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
366
- z-index:-1; }
367
- .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{
368
319
  transition-duration:0.2s; }
369
- .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
370
- content:'';
371
- position:absolute;
372
- height:2px;
373
- opacity:1;
374
- top:2px;
375
- left:2px;
376
- width:calc(100% - 4px);
377
- background-color:#008BE1;
378
- background-color:var(--iui-color-foreground-primary); }
379
- .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
380
- background-color:rgba(0, 0, 0, 0.2);
381
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
382
- .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
383
- border-radius:0; }
384
- .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)){
385
321
  border-top-left-radius:3px;
386
322
  border-bottom-left-radius:3px; }
387
- .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)){
388
324
  border-top-right-radius:3px;
389
325
  border-bottom-right-radius:3px; }
390
326
  .iui-button-split-menu > * + *{
391
327
  margin-left:-1px; }
392
- .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"]{
393
329
  border-left-color:#DCE0E3;
394
330
  border-left-color:var(--iui-color-background-4); }
395
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; }