@itwin/itwinui-css 0.63.2-dev.0 → 0.63.2

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 (96) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/alert.css +250 -248
  3. package/css/all.css +969 -925
  4. package/css/anchor.css +58 -56
  5. package/css/backdrop.css +21 -19
  6. package/css/badge.css +26 -24
  7. package/css/blockquote.css +26 -24
  8. package/css/breadcrumbs.css +384 -382
  9. package/css/button.css +462 -460
  10. package/css/carousel.css +119 -117
  11. package/css/code.css +87 -85
  12. package/css/color-picker.css +221 -219
  13. package/css/date-picker.css +449 -447
  14. package/css/dialog.css +153 -151
  15. package/css/expandable-block.css +209 -207
  16. package/css/fieldset.css +33 -31
  17. package/css/file-upload.css +100 -98
  18. package/css/footer.css +87 -85
  19. package/css/global.css +462 -460
  20. package/css/header.css +484 -482
  21. package/css/icon.css +163 -161
  22. package/css/information-panel.css +190 -188
  23. package/css/inputs.css +1257 -1255
  24. package/css/keyboard.css +34 -32
  25. package/css/location-marker.css +110 -108
  26. package/css/menu.css +168 -166
  27. package/css/non-ideal-state.css +62 -60
  28. package/css/notification-marker.css +246 -244
  29. package/css/popover.css +11 -9
  30. package/css/progress-indicator.css +379 -377
  31. package/css/radio-tile.css +184 -182
  32. package/css/reset-global-styles.css +35 -33
  33. package/css/side-navigation.css +209 -207
  34. package/css/skip-to-content.css +55 -53
  35. package/css/slider.css +240 -238
  36. package/css/surface.css +14 -12
  37. package/css/table.css +710 -708
  38. package/css/tabs.css +339 -337
  39. package/css/tag.css +142 -140
  40. package/css/text.css +102 -100
  41. package/css/tile.css +544 -542
  42. package/css/time-picker.css +125 -123
  43. package/css/toast-notification.css +301 -299
  44. package/css/toggle-switch.css +237 -235
  45. package/css/tooltip.css +53 -51
  46. package/css/tree.css +137 -135
  47. package/css/user-icon.css +242 -240
  48. package/css/wizard.css +182 -180
  49. package/package.json +1 -1
  50. package/scss/alert/classes.scss +7 -5
  51. package/scss/anchor/classes.scss +6 -4
  52. package/scss/backdrop/classes.scss +4 -2
  53. package/scss/badge/classes.scss +4 -2
  54. package/scss/blockquote/classes.scss +4 -2
  55. package/scss/breadcrumbs/classes.scss +22 -20
  56. package/scss/button/classes.scss +47 -45
  57. package/scss/carousel/classes.scss +10 -8
  58. package/scss/classes.scss +46 -50
  59. package/scss/code/classes.scss +7 -5
  60. package/scss/color-picker/classes.scss +40 -38
  61. package/scss/date-picker/classes.scss +44 -42
  62. package/scss/dialog/classes.scss +45 -43
  63. package/scss/expandable-block/classes.scss +4 -2
  64. package/scss/fieldset/classes.scss +4 -2
  65. package/scss/file-upload/classes.scss +4 -2
  66. package/scss/footer/classes.scss +16 -14
  67. package/scss/header/classes.scss +7 -5
  68. package/scss/icon/classes.scss +19 -17
  69. package/scss/information-panel/classes.scss +18 -16
  70. package/scss/inputs/classes.scss +62 -60
  71. package/scss/keyboard/classes.scss +4 -2
  72. package/scss/location-marker/classes.scss +10 -8
  73. package/scss/menu/classes.scss +14 -12
  74. package/scss/non-ideal-state/classes.scss +4 -2
  75. package/scss/notification-marker/classes.scss +5 -3
  76. package/scss/popover/classes.scss +4 -2
  77. package/scss/progress-indicator/classes.scss +22 -20
  78. package/scss/radio-tile/classes.scss +22 -20
  79. package/scss/reset-global-styles.scss +25 -23
  80. package/scss/side-navigation/classes.scss +10 -8
  81. package/scss/skip-to-content/classes.scss +4 -2
  82. package/scss/slider/classes.scss +37 -35
  83. package/scss/style/global.scss +49 -47
  84. package/scss/surface/classes.scss +4 -2
  85. package/scss/table/classes.scss +45 -43
  86. package/scss/tabs/classes.scss +31 -29
  87. package/scss/tag/classes.scss +20 -18
  88. package/scss/text/classes.scss +36 -34
  89. package/scss/tile/classes.scss +36 -34
  90. package/scss/time-picker/classes.scss +11 -9
  91. package/scss/toast-notification/classes.scss +71 -69
  92. package/scss/toggle-switch/classes.scss +7 -5
  93. package/scss/tooltip/classes.scss +17 -15
  94. package/scss/tree/classes.scss +13 -11
  95. package/scss/user-icon/classes.scss +18 -16
  96. package/scss/wizard/classes.scss +18 -16
package/css/color-picker.css CHANGED
@@ -2,247 +2,249 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-color-picker{
6
- --iui-color-picker-selected-color:initial;
7
- --iui-surface-background-color:var(--iui-color-background-1);
8
- --iui-surface-border-radius:0;
9
- --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
10
- background-color:var(--iui-surface-background-color);
11
- border-radius:var(--iui-surface-border-radius);
12
- box-shadow:var(--iui-surface-elevation);
13
- box-sizing:border-box;
14
- color:var(--iui-text-color);
15
- box-sizing:border-box;
16
- border-radius:4px;
17
- display:inline-flex;
18
- padding:11px 12px;
19
- -webkit-user-select:none;
20
- -moz-user-select:none;
21
- -ms-user-select:none;
22
- user-select:none;
23
- overflow-y:auto;
24
- flex-direction:column;
25
- max-height:495px;
26
- }
27
- @media (forced-colors: active){
5
+ @layer itwinui-v1{
28
6
  .iui-color-picker{
29
- border:1px solid transparent;
7
+ --iui-color-picker-selected-color:initial;
8
+ --iui-surface-background-color:var(--iui-color-background-1);
9
+ --iui-surface-border-radius:0;
10
+ --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
11
+ background-color:var(--iui-surface-background-color);
12
+ border-radius:var(--iui-surface-border-radius);
13
+ box-shadow:var(--iui-surface-elevation);
14
+ box-sizing:border-box;
15
+ color:var(--iui-text-color);
16
+ box-sizing:border-box;
17
+ border-radius:4px;
18
+ display:inline-flex;
19
+ padding:11px 12px;
20
+ -webkit-user-select:none;
21
+ -moz-user-select:none;
22
+ -ms-user-select:none;
23
+ user-select:none;
24
+ overflow-y:auto;
25
+ flex-direction:column;
26
+ max-height:495px;
30
27
  }
31
- }
32
- @supports (overflow-y: overlay){
33
- .iui-color-picker{
34
- overflow-y:overlay;
28
+ @media (forced-colors: active){
29
+ .iui-color-picker{
30
+ border:1px solid transparent;
31
+ }
35
32
  }
36
- }
37
- @supports (row-gap: 11px){
38
- .iui-color-picker{
39
- row-gap:11px;
33
+ @supports (overflow-y: overlay){
34
+ .iui-color-picker{
35
+ overflow-y:overlay;
36
+ }
37
+ }
38
+ @supports (row-gap: 11px){
39
+ .iui-color-picker{
40
+ row-gap:11px;
41
+ }
40
42
  }
41
- }
42
- .iui-color-picker > div:not(:last-child){
43
- margin-bottom:11px;
44
- }
45
- @supports (row-gap: 11px){
46
43
  .iui-color-picker > div:not(:last-child){
47
- margin-bottom:0;
44
+ margin-bottom:11px;
45
+ }
46
+ @supports (row-gap: 11px){
47
+ .iui-color-picker > div:not(:last-child){
48
+ margin-bottom:0;
49
+ }
48
50
  }
49
- }
50
51
 
51
- .iui-color-palette{
52
- display:flex;
53
- flex-wrap:wrap;
54
- align-content:flex-start;
55
- min-height:24px;
56
- min-width:24px;
57
- }
58
- @supports (gap: 8px){
59
52
  .iui-color-palette{
60
- gap:8px;
61
- }
62
- }
63
- .iui-color-palette button.iui-button.iui-borderless{
64
- height:24px;
65
- width:24px;
66
- padding:0;
67
- }
68
- .iui-color-palette-wrapper{
69
- max-width:280px;
70
- }
71
- .iui-color-palette-wrapper:only-child{
72
- max-width:312px;
73
- }
53
+ display:flex;
54
+ flex-wrap:wrap;
55
+ align-content:flex-start;
56
+ min-height:24px;
57
+ min-width:24px;
58
+ }
59
+ @supports (gap: 8px){
60
+ .iui-color-palette{
61
+ gap:8px;
62
+ }
63
+ }
64
+ .iui-color-palette button.iui-button.iui-borderless{
65
+ height:24px;
66
+ width:24px;
67
+ padding:0;
68
+ }
69
+ .iui-color-palette-wrapper{
70
+ max-width:280px;
71
+ }
72
+ .iui-color-palette-wrapper:only-child{
73
+ max-width:312px;
74
+ }
74
75
 
75
- .iui-color-input{
76
- display:flex;
77
- align-items:center;
78
- }
79
- .iui-color-input-wrapper{
80
- max-width:280px;
81
- }
82
- .iui-color-input .iui-button{
83
- margin-right:4px;
84
- }
85
- .iui-color-input-fields{
86
- display:flex;
87
- width:100%;
88
- gap:2px;
89
- }
90
- .iui-color-input-fields > *{
91
- flex-grow:1;
92
- }
93
- .iui-color-input-fields > *:not(:last-child){
94
- margin-right:2px;
95
- }
96
- @supports (gap: 2px){
76
+ .iui-color-input{
77
+ display:flex;
78
+ align-items:center;
79
+ }
80
+ .iui-color-input-wrapper{
81
+ max-width:280px;
82
+ }
83
+ .iui-color-input .iui-button{
84
+ margin-right:4px;
85
+ }
86
+ .iui-color-input-fields{
87
+ display:flex;
88
+ width:100%;
89
+ gap:2px;
90
+ }
91
+ .iui-color-input-fields > *{
92
+ flex-grow:1;
93
+ }
97
94
  .iui-color-input-fields > *:not(:last-child){
98
- margin-right:0;
99
- }
100
- }
101
- .iui-color-input-fields input{
102
- text-transform:uppercase;
103
- }
104
- .iui-color-input-fields input[type=number]{
105
- -webkit-appearance:textfield;
106
- -moz-appearance:textfield;
107
- appearance:textfield;
108
- text-align:right;
109
- }
110
- .iui-color-input-fields input[type=number]::-webkit-inner-spin-button{
111
- -webkit-appearance:none;
112
- appearance:none;
113
- }
95
+ margin-right:2px;
96
+ }
97
+ @supports (gap: 2px){
98
+ .iui-color-input-fields > *:not(:last-child){
99
+ margin-right:0;
100
+ }
101
+ }
102
+ .iui-color-input-fields input{
103
+ text-transform:uppercase;
104
+ }
105
+ .iui-color-input-fields input[type=number]{
106
+ -webkit-appearance:textfield;
107
+ -moz-appearance:textfield;
108
+ appearance:textfield;
109
+ text-align:right;
110
+ }
111
+ .iui-color-input-fields input[type=number]::-webkit-inner-spin-button{
112
+ -webkit-appearance:none;
113
+ appearance:none;
114
+ }
114
115
 
115
- .iui-color-swatch{
116
- --iui-color-swatch-background:initial;
117
- height:24px;
118
- width:24px;
119
- cursor:pointer;
120
- border-radius:5px;
121
- margin-bottom:4px;
122
- margin-right:4px;
123
- position:relative;
124
- background-color:var(--iui-color-swatch-background);
125
- forced-color-adjust:none;
126
- background-position:0 0, 8px 8px;
127
- background-size:16px 16px;
128
- background-image:repeating-linear-gradient(45deg, #edeff2 25%, transparent 25%, transparent 75%, #edeff2 75%, #edeff2), repeating-linear-gradient(45deg, #edeff2 25%, #c7ccd1 25%, #c7ccd1 75%, #edeff2 75%, #edeff2);
129
- 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));
130
- }
131
- @supports (gap: 8px){
132
116
  .iui-color-swatch{
133
- margin-bottom:0;
134
- margin-right:0;
135
- }
136
- }
137
- .iui-color-swatch::after{
138
- content:"";
139
- position:absolute;
140
- left:0;
141
- top:0;
142
- width:inherit;
143
- height:inherit;
144
- border-radius:inherit;
145
- background-color:inherit;
146
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
147
- }
148
- .iui-color-swatch:hover{
149
- 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));
150
- }
151
- .iui-color-swatch:focus-visible{
152
- outline:2px solid var(--iui-color-foreground-primary);
153
- outline-offset:1px;
154
- }
155
- @supports not selector(*:focus-visible){
156
- .iui-color-swatch:focus{
117
+ --iui-color-swatch-background:initial;
118
+ height:24px;
119
+ width:24px;
120
+ cursor:pointer;
121
+ border-radius:5px;
122
+ margin-bottom:4px;
123
+ margin-right:4px;
124
+ position:relative;
125
+ background-color:var(--iui-color-swatch-background);
126
+ forced-color-adjust:none;
127
+ background-position:0 0, 8px 8px;
128
+ background-size:16px 16px;
129
+ background-image:repeating-linear-gradient(45deg, #edeff2 25%, transparent 25%, transparent 75%, #edeff2 75%, #edeff2), repeating-linear-gradient(45deg, #edeff2 25%, #c7ccd1 25%, #c7ccd1 75%, #edeff2 75%, #edeff2);
130
+ 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));
131
+ }
132
+ @supports (gap: 8px){
133
+ .iui-color-swatch{
134
+ margin-bottom:0;
135
+ margin-right:0;
136
+ }
137
+ }
138
+ .iui-color-swatch::after{
139
+ content:"";
140
+ position:absolute;
141
+ left:0;
142
+ top:0;
143
+ width:inherit;
144
+ height:inherit;
145
+ border-radius:inherit;
146
+ background-color:inherit;
147
+ box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
148
+ }
149
+ .iui-color-swatch:hover{
150
+ 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));
151
+ }
152
+ .iui-color-swatch:focus-visible{
157
153
  outline:2px solid var(--iui-color-foreground-primary);
158
154
  outline-offset:1px;
159
155
  }
160
- }
161
- .iui-color-swatch.iui-active{
162
- 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));
163
- }
164
- .iui-color-swatch.iui-active:hover{
165
- 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));
166
- }
156
+ @supports not selector(*:focus-visible){
157
+ .iui-color-swatch:focus{
158
+ outline:2px solid var(--iui-color-foreground-primary);
159
+ outline-offset:1px;
160
+ }
161
+ }
162
+ .iui-color-swatch.iui-active{
163
+ 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));
164
+ }
165
+ .iui-color-swatch.iui-active:hover{
166
+ 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));
167
+ }
167
168
 
168
- .iui-color-picker-section-label{
169
- margin-bottom:5.5px;
170
- overflow:hidden;
171
- text-overflow:ellipsis;
172
- white-space:nowrap;
173
- flex-shrink:0;
174
- }
169
+ .iui-color-picker-section-label{
170
+ margin-bottom:5.5px;
171
+ overflow:hidden;
172
+ text-overflow:ellipsis;
173
+ white-space:nowrap;
174
+ flex-shrink:0;
175
+ }
175
176
 
176
- .iui-color-selection-wrapper{
177
- display:flex;
178
- flex-direction:column;
179
- min-width:280px;
180
- }
177
+ .iui-color-selection-wrapper{
178
+ display:flex;
179
+ flex-direction:column;
180
+ min-width:280px;
181
+ }
181
182
 
182
- .iui-color-field{
183
- --iui-color-field-hue:initial;
184
- position:relative;
185
- cursor:crosshair;
186
- width:100%;
187
- height:209px;
188
- forced-color-adjust:none;
189
- background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue));
190
- }
191
- .iui-color-field:not(:last-child){
192
- margin-bottom:6px;
193
- }
183
+ .iui-color-field{
184
+ --iui-color-field-hue:initial;
185
+ position:relative;
186
+ cursor:crosshair;
187
+ width:100%;
188
+ height:209px;
189
+ forced-color-adjust:none;
190
+ background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue));
191
+ }
192
+ .iui-color-field:not(:last-child){
193
+ margin-bottom:6px;
194
+ }
194
195
 
195
- .iui-hue-slider .iui-slider-container .iui-slider-rail{
196
- height:8px;
197
- forced-color-adjust:none;
198
- background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
199
- background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
200
- }
201
- .iui-hue-slider .iui-slider-container .iui-slider-thumb{
202
- top:7px;
203
- }
196
+ .iui-hue-slider .iui-slider-container .iui-slider-rail{
197
+ height:8px;
198
+ forced-color-adjust:none;
199
+ background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
200
+ background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
201
+ }
202
+ .iui-hue-slider .iui-slider-container .iui-slider-thumb{
203
+ top:7px;
204
+ }
204
205
 
205
- .iui-opacity-slider .iui-slider-container .iui-slider-rail{
206
- height:8px;
207
- forced-color-adjust:none;
208
- background-position:0 0, 4px 4px;
209
- background-size:8px 8px;
210
- background-image:repeating-linear-gradient(45deg, #edeff2 25%, transparent 25%, transparent 75%, #edeff2 75%, #edeff2), repeating-linear-gradient(45deg, #edeff2 25%, #c7ccd1 25%, #c7ccd1 75%, #edeff2 75%, #edeff2);
211
- 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));
212
- }
213
- .iui-opacity-slider .iui-slider-container .iui-slider-rail::before{
214
- display:block;
215
- content:"";
216
- width:100%;
217
- height:100%;
218
- background-image:linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%);
219
- }
220
- .iui-opacity-slider .iui-slider-container .iui-slider-thumb{
221
- top:7px;
222
- }
206
+ .iui-opacity-slider .iui-slider-container .iui-slider-rail{
207
+ height:8px;
208
+ forced-color-adjust:none;
209
+ background-position:0 0, 4px 4px;
210
+ background-size:8px 8px;
211
+ background-image:repeating-linear-gradient(45deg, #edeff2 25%, transparent 25%, transparent 75%, #edeff2 75%, #edeff2), repeating-linear-gradient(45deg, #edeff2 25%, #c7ccd1 25%, #c7ccd1 75%, #edeff2 75%, #edeff2);
212
+ 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));
213
+ }
214
+ .iui-opacity-slider .iui-slider-container .iui-slider-rail::before{
215
+ display:block;
216
+ content:"";
217
+ width:100%;
218
+ height:100%;
219
+ background-image:linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%);
220
+ }
221
+ .iui-opacity-slider .iui-slider-container .iui-slider-thumb{
222
+ top:7px;
223
+ }
223
224
 
224
- .iui-color-dot{
225
- --iui-color-dot-inset:initial;
226
- position:absolute;
227
- inset:var(--iui-color-dot-inset);
228
- width:16px;
229
- height:16px;
230
- border-radius:50%;
231
- transform:translate(-8px, -8px);
232
- cursor:crosshair;
233
- 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));
234
- background-color:var(--iui-color-picker-selected-color);
235
- }
236
- .iui-color-dot:hover{
237
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
238
- }
239
- .iui-color-dot:focus-visible{
240
- outline:2px solid var(--iui-color-foreground-primary);
241
- outline-offset:0;
242
- }
243
- @supports not selector(*:focus-visible){
244
- .iui-color-dot:focus{
225
+ .iui-color-dot{
226
+ --iui-color-dot-inset:initial;
227
+ position:absolute;
228
+ inset:var(--iui-color-dot-inset);
229
+ width:16px;
230
+ height:16px;
231
+ border-radius:50%;
232
+ transform:translate(-8px, -8px);
233
+ cursor:crosshair;
234
+ 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));
235
+ background-color:var(--iui-color-picker-selected-color);
236
+ }
237
+ .iui-color-dot:hover{
238
+ box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
239
+ }
240
+ .iui-color-dot:focus-visible{
245
241
  outline:2px solid var(--iui-color-foreground-primary);
246
242
  outline-offset:0;
247
243
  }
244
+ @supports not selector(*:focus-visible){
245
+ .iui-color-dot:focus{
246
+ outline:2px solid var(--iui-color-foreground-primary);
247
+ outline-offset:0;
248
+ }
249
+ }
248
250
  }