@itwin/itwinui-css 1.0.0-dev.1 → 1.0.0-dev.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 (49) hide show
  1. package/css/alert.css +78 -78
  2. package/css/all.css +1744 -2220
  3. package/css/anchor.css +3 -3
  4. package/css/avatar.css +46 -46
  5. package/css/backdrop.css +6 -4
  6. package/css/badge.css +8 -8
  7. package/css/blockquote.css +6 -6
  8. package/css/breadcrumbs.css +57 -52
  9. package/css/button.css +93 -89
  10. package/css/carousel.css +15 -14
  11. package/css/checkbox.css +20 -20
  12. package/css/code.css +14 -14
  13. package/css/color-picker.css +36 -39
  14. package/css/date-picker.css +59 -88
  15. package/css/dialog.css +25 -25
  16. package/css/expandable-block.css +33 -30
  17. package/css/fieldset.css +7 -7
  18. package/css/file-upload.css +13 -12
  19. package/css/footer.css +11 -11
  20. package/css/global.css +50 -617
  21. package/css/header.css +52 -51
  22. package/css/information-panel.css +33 -32
  23. package/css/input.css +56 -56
  24. package/css/keyboard.css +6 -6
  25. package/css/location-marker.css +26 -18
  26. package/css/menu.css +34 -27
  27. package/css/non-ideal-state.css +12 -12
  28. package/css/progress-indicator.css +33 -35
  29. package/css/radio-tile.css +33 -33
  30. package/css/radio.css +20 -20
  31. package/css/select.css +83 -80
  32. package/css/side-navigation.css +27 -26
  33. package/css/skip-to-content.css +11 -11
  34. package/css/slider.css +59 -32
  35. package/css/stepper.css +15 -15
  36. package/css/surface.css +2 -2
  37. package/css/table.css +151 -133
  38. package/css/tabs.css +54 -47
  39. package/css/tag.css +24 -25
  40. package/css/text.css +24 -24
  41. package/css/tile.css +120 -101
  42. package/css/time-picker.css +16 -14
  43. package/css/toast.css +47 -47
  44. package/css/toggle-switch.css +26 -26
  45. package/css/tooltip.css +6 -6
  46. package/css/tree.css +24 -22
  47. package/css/utils.css +162 -148
  48. package/css/workflow-diagram.css +8 -8
  49. package/package.json +2 -2
package/css/keyboard.css CHANGED
@@ -7,13 +7,13 @@
7
7
  padding:0;
8
8
  border:none;
9
9
  vertical-align:baseline;
10
- border-radius:4px;
10
+ border-radius:var(--iui-border-radius-1);
11
11
  display:inline-block;
12
- font-size:12px;
13
- font-weight:600;
14
- font-family:"Noto Sans Mono", ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
12
+ font-size:var(--iui-font-size-0);
13
+ font-weight:var(--iui-font-weight-semibold);
14
+ font-family:var(--iui-font-mono);
15
15
  line-height:1;
16
- padding:4px 8px;
16
+ padding:calc(var(--iui-size-s) * 0.33) var(--iui-size-xs);
17
17
  white-space:nowrap;
18
18
  text-transform:uppercase;
19
19
  -webkit-user-select:none;
@@ -27,7 +27,7 @@
27
27
  }
28
28
  @media (prefers-reduced-motion: no-preference){
29
29
  .iui-keyboard{
30
- transition:box-shadow 0.2s ease-out;
30
+ transition:box-shadow var(--iui-duration-1) ease-out;
31
31
  }
32
32
  }
33
33
  .iui-keyboard:hover{
package/css/location-marker.css CHANGED
@@ -15,12 +15,12 @@
15
15
  position:relative;
16
16
  display:flex;
17
17
  flex-shrink:0;
18
- width:24px;
19
- height:24px;
18
+ width:calc(1.5 * var(--iui-size-m));
19
+ height:calc(1.5 * var(--iui-size-m));
20
20
  cursor:pointer;
21
21
  }
22
22
  .iui-location-marker-default > .iui-location-marker-default-pin{
23
- filter:drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25));
23
+ filter:drop-shadow(var(--iui-shadow-1));
24
24
  }
25
25
  .iui-location-marker-default > .iui-location-marker-default-pin > .iui-location-marker-default-pin-dot{
26
26
  fill:var(--iui-color-foreground-accessory);
@@ -40,12 +40,12 @@
40
40
  cursor:pointer;
41
41
  }
42
42
  .iui-location-marker-data-rich > .iui-location-marker-data-rich-body{
43
- min-width:32px;
44
- border-radius:4px;
43
+ min-width:var(--iui-size-xl);
44
+ border-radius:var(--iui-border-radius-1);
45
45
  text-align:center;
46
- font-size:16px;
47
- padding:3px 8px;
48
- filter:drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25));
46
+ font-size:var(--iui-font-size-2);
47
+ padding:calc(var(--iui-size-s) * 0.25) var(--iui-size-xs);
48
+ filter:drop-shadow(var(--iui-shadow-1));
49
49
  position:relative;
50
50
  border:solid 1px var(--iui-color-foreground-accessory);
51
51
  background-color:var(--iui-color-foreground-accessory);
@@ -61,15 +61,15 @@
61
61
  left:0;
62
62
  right:0;
63
63
  margin:auto;
64
- border-width:4px;
64
+ border-width:var(--iui-size-2xs);
65
65
  border-style:solid;
66
66
  border-color:var(--iui-color-foreground-accessory) transparent transparent transparent;
67
67
  }
68
68
  .iui-location-marker-data-rich > .iui-location-marker-data-rich-body > .iui-location-marker-data-rich-icon{
69
69
  display:flex;
70
70
  flex-shrink:0;
71
- width:16px;
72
- height:16px;
71
+ width:var(--iui-size-m);
72
+ height:var(--iui-size-m);
73
73
  display:inline-block;
74
74
  font-size:inherit;
75
75
  vertical-align:-2px;
@@ -91,19 +91,27 @@
91
91
  position:relative;
92
92
  display:flex;
93
93
  flex-shrink:0;
94
- width:24px;
95
- height:24px;
94
+ width:calc(1.5 * var(--iui-size-m));
95
+ height:calc(1.5 * var(--iui-size-m));
96
96
  position:relative;
97
97
  border-radius:50%;
98
98
  cursor:default;
99
- background:radial-gradient(circle at center, rgba(var(--iui-color-foreground-primary-rgb), 0), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5)));
99
+ }
100
+ .iui-location-marker-me::before{
101
+ content:"";
102
+ position:absolute;
103
+ inset:0;
104
+ z-index:-1;
105
+ opacity:var(--iui-opacity-5);
106
+ background-color:var(--iui-color-foreground-primary);
107
+ border-radius:inherit;
100
108
  }
101
109
  .iui-location-marker-me > .iui-location-marker-me-dot{
102
- width:12px;
103
- height:12px;
110
+ width:var(--iui-size-s);
111
+ height:var(--iui-size-s);
104
112
  position:absolute;
105
- top:6px;
106
- left:6px;
113
+ top:calc(var(--iui-size-2xs) * 1.5);
114
+ left:calc(var(--iui-size-2xs) * 1.5);
107
115
  border-radius:50%;
108
116
  border:1px solid var(--iui-color-foreground-accessory);
109
117
  background-color:var(--iui-color-background-primary);
package/css/menu.css CHANGED
@@ -5,11 +5,11 @@
5
5
  .iui-menu{
6
6
  --iui-surface-background-color:var(--iui-color-background-1);
7
7
  --iui-surface-border-radius:0;
8
- --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
8
+ --iui-surface-elevation:var(--iui-shadow-1);
9
9
  background-color:var(--iui-surface-background-color);
10
10
  border-radius:var(--iui-surface-border-radius);
11
11
  box-shadow:var(--iui-surface-elevation);
12
- color:var(--iui-text-color);
12
+ color:var(--iui-color-foreground-2);
13
13
  margin:0;
14
14
  padding:0;
15
15
  border:none;
@@ -23,6 +23,7 @@
23
23
  margin:0;
24
24
  padding:0;
25
25
  max-height:var(--iui-menu-max-height);
26
+ border-radius:var(--iui-border-radius-1);
26
27
  }
27
28
  @media (forced-colors: active){
28
29
  .iui-menu{
@@ -30,15 +31,15 @@
30
31
  }
31
32
  }
32
33
  .iui-menu .iui-header-menu-icon{
33
- margin:0 4px;
34
+ margin:0 var(--iui-size-2xs);
34
35
  }
35
36
  .iui-menu div.iui-header-menu-icon{
36
37
  display:flex;
37
38
  flex-shrink:0;
38
- width:24px;
39
- height:24px;
39
+ width:calc(1.5 * var(--iui-size-m));
40
+ height:calc(1.5 * var(--iui-size-m));
40
41
  margin:0;
41
- border-radius:4px;
42
+ border-radius:var(--iui-border-radius-1);
42
43
  }
43
44
  .iui-menu.iui-scroll{
44
45
  overflow-y:auto;
@@ -49,12 +50,14 @@
49
50
  .iui-menu-item{
50
51
  display:flex;
51
52
  align-items:center;
52
- font-size:14px;
53
- padding:0 13px;
54
- height:40px;
53
+ font-size:var(--iui-font-size-1);
54
+ padding-block:var(--iui-size-2xs);
55
+ padding-inline:calc(var(--iui-size-s) + 1px);
56
+ min-height:var(--iui-component-height);
55
57
  cursor:pointer;
56
58
  line-height:normal;
57
59
  color:var(--iui-color-foreground-2);
60
+ border-radius:var(--iui-border-radius-1);
58
61
  }
59
62
  .iui-menu-item + .iui-menu-item{
60
63
  margin-top:-1px;
@@ -71,26 +74,26 @@
71
74
  }
72
75
  .iui-menu-item .iui-content + .iui-icon{
73
76
  margin-right:0;
74
- margin-left:8px;
77
+ margin-left:var(--iui-size-xs);
75
78
  }
76
79
  .iui-menu-item .iui-menu-description{
77
80
  display:none;
78
- font-size:12px;
81
+ font-size:var(--iui-font-size-0);
79
82
  opacity:var(--iui-opacity-3);
80
83
  }
81
84
  .iui-menu-item > .iui-icon{
82
85
  display:flex;
83
86
  flex-shrink:0;
84
- width:16px;
85
- height:16px;
87
+ width:var(--iui-size-m);
88
+ height:var(--iui-size-m);
86
89
  flex:0 0 auto;
87
- fill:var(--iui-icon-color-actionable);
90
+ fill:var(--iui-color-foreground-2);
88
91
  }
89
92
  .iui-menu-item > .iui-icon + .iui-content{
90
- margin-left:8px;
93
+ margin-left:var(--iui-size-xs);
91
94
  }
92
95
  .iui-menu-item:hover{
93
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
96
+ background-color:var(--iui-color-background-transparent-hover);
94
97
  }
95
98
  .iui-menu-item:focus, .iui-menu-item.iui-focused{
96
99
  outline:thin solid var(--iui-color-foreground-primary);
@@ -100,13 +103,13 @@
100
103
  outline:none;
101
104
  }
102
105
  .iui-menu-item.iui-large{
103
- height:52px;
106
+ min-height:var(--iui-component-height-large);
104
107
  }
105
108
  .iui-menu-item.iui-large .iui-menu-description{
106
109
  display:block;
107
110
  }
108
111
  .iui-menu-item.iui-active, .iui-menu-item.iui-active:hover{
109
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
112
+ background-color:var(--iui-color-background-subtle-primary);
110
113
  color:var(--iui-color-foreground-primary);
111
114
  outline:thin solid var(--iui-color-foreground-primary);
112
115
  outline-offset:-1px;
@@ -115,10 +118,10 @@
115
118
  opacity:1;
116
119
  }
117
120
  .iui-menu-item.iui-active > .iui-icon{
118
- fill:var(--iui-icon-color-primary);
121
+ fill:var(--iui-color-foreground-primary);
119
122
  }
120
123
  .iui-menu-item.iui-active:focus, .iui-menu-item.iui-active.iui-focused{
121
- outline-width:2px;
124
+ outline-width:var(--iui-size-3xs);
122
125
  outline-offset:-2px;
123
126
  }
124
127
  .iui-menu-item.iui-active:focus:not(:focus-visible){
@@ -129,10 +132,10 @@
129
132
  cursor:not-allowed;
130
133
  outline:none;
131
134
  background-color:var(--iui-color-background-1);
132
- color:var(--iui-text-color-placeholder);
135
+ color:var(--iui-color-foreground-5);
133
136
  }
134
137
  .iui-menu-item.iui-disabled > .iui-icon, .iui-menu-item.iui-disabled:hover > .iui-icon{
135
- fill:var(--iui-icon-color-actionable-disabled);
138
+ fill:var(--iui-color-foreground-5);
136
139
  }
137
140
  .iui-menu-item-skeleton{
138
141
  --iui-menu-item-content-skeleton-max-width:30%;
@@ -143,26 +146,30 @@
143
146
  }
144
147
  .iui-menu-item-skeleton .iui-menu-label{
145
148
  width:100%;
146
- height:14px;
149
+ height:var(--iui-font-size-1);
147
150
  vertical-align:middle;
148
151
  }
149
152
  .iui-menu-item-skeleton .iui-menu-description{
150
153
  width:70%;
151
- height:12px;
154
+ height:var(--iui-font-size-0);
152
155
  vertical-align:middle;
153
- margin-top:4px;
156
+ margin-top:var(--iui-size-2xs);
154
157
  }
155
158
  .iui-menu-item-skeleton:hover{
156
159
  background-color:unset;
157
160
  }
158
161
 
159
162
  .iui-menu-content{
160
- padding:12px 13px;
163
+ padding-block:var(--iui-size-xs);
164
+ padding-inline:calc(var(--iui-size-m) + 1px);
165
+ min-height:var(--iui-component-height);
166
+ display:grid;
167
+ align-items:center;
161
168
  }
162
169
 
163
170
  .iui-menu-divider{
164
171
  height:1px;
165
- width:calc(100% - 24px);
172
+ width:calc(100% - var(--iui-size-l));
166
173
  margin:1px auto;
167
174
  background-color:var(--iui-color-background-border);
168
175
  }
package/css/non-ideal-state.css CHANGED
@@ -21,7 +21,7 @@
21
21
  .iui-non-ideal-state > .iui-non-ideal-state-illustration{
22
22
  max-width:220px;
23
23
  max-height:242px;
24
- margin-bottom:24px;
24
+ margin-bottom:var(--iui-size-l);
25
25
  text-align:center;
26
26
  display:flex;
27
27
  justify-content:center;
@@ -32,34 +32,34 @@
32
32
  padding:0;
33
33
  border:none;
34
34
  vertical-align:baseline;
35
- font-size:32px;
36
- font-weight:300;
37
- line-height:48px;
35
+ font-size:var(--iui-font-size-5);
36
+ font-weight:var(--iui-font-weight-light);
37
+ line-height:calc(2 * var(--iui-size-l));
38
38
  padding:0;
39
- margin:0 0 24px;
39
+ margin:0 0 var(--iui-size-l);
40
40
  }
41
41
  .iui-non-ideal-state > .iui-non-ideal-state-description{
42
42
  margin:0;
43
43
  padding:0;
44
44
  border:none;
45
45
  vertical-align:baseline;
46
- font-size:14px;
47
- font-weight:400;
48
- line-height:24px;
46
+ font-size:var(--iui-font-size-1);
47
+ font-weight:var(--iui-font-weight-normal);
48
+ line-height:var(--iui-size-l);
49
49
  padding:0;
50
- margin:0 0 24px;
50
+ margin:0 0 var(--iui-size-l);
51
51
  }
52
52
  .iui-non-ideal-state > .iui-non-ideal-state-actions{
53
53
  display:flex;
54
54
  align-items:center;
55
- margin-bottom:8px;
55
+ margin-bottom:var(--iui-size-xs);
56
56
  }
57
57
  .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-input-container{
58
58
  display:inline-block;
59
59
  width:200px;
60
60
  text-align:left;
61
- margin:0 4px 0 0;
61
+ margin:0 var(--iui-size-2xs) 0 0;
62
62
  }
63
63
  .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-button{
64
- margin:0 4px;
64
+ margin:0 var(--iui-size-2xs);
65
65
  }
package/css/progress-indicator.css CHANGED
@@ -26,9 +26,9 @@
26
26
  align-items:center;
27
27
  width:100%;
28
28
  overflow:hidden;
29
- margin-top:4px;
29
+ margin-top:var(--iui-size-2xs);
30
30
  display:flex;
31
- font-size:12px;
31
+ font-size:var(--iui-font-size-0);
32
32
  justify-content:space-between;
33
33
  }
34
34
  .iui-progress-indicator-linear > .iui-label > :only-child{
@@ -43,8 +43,8 @@
43
43
  .iui-progress-indicator-linear > .iui-label svg{
44
44
  display:flex;
45
45
  flex-shrink:0;
46
- width:16px;
47
- height:16px;
46
+ width:var(--iui-size-m);
47
+ height:var(--iui-size-m);
48
48
  }
49
49
  .iui-progress-indicator-linear.iui-positive > .iui-track,
50
50
  .iui-progress-indicator-linear.iui-positive > .iui-track > *{
@@ -54,14 +54,14 @@
54
54
  color:var(--iui-color-foreground-positive);
55
55
  }
56
56
  .iui-progress-indicator-linear.iui-positive > .iui-label svg{
57
- fill:var(--iui-icon-color-positive);
57
+ fill:var(--iui-color-foreground-positive);
58
58
  }
59
59
  .iui-progress-indicator-linear.iui-positive > .iui-label > span::-moz-selection, .iui-progress-indicator-linear.iui-positive > .iui-label > span *::-moz-selection{
60
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
60
+ background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
61
61
  }
62
62
  .iui-progress-indicator-linear.iui-positive > .iui-label > span::selection,
63
63
  .iui-progress-indicator-linear.iui-positive > .iui-label > span *::selection{
64
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
64
+ background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
65
65
  }
66
66
  .iui-progress-indicator-linear.iui-negative > .iui-track > *{
67
67
  width:100%;
@@ -71,14 +71,14 @@
71
71
  color:var(--iui-color-foreground-negative);
72
72
  }
73
73
  .iui-progress-indicator-linear.iui-negative > .iui-label svg{
74
- fill:var(--iui-icon-color-negative);
74
+ fill:var(--iui-color-foreground-negative);
75
75
  }
76
76
  .iui-progress-indicator-linear.iui-negative > .iui-label > span::-moz-selection, .iui-progress-indicator-linear.iui-negative > .iui-label > span *::-moz-selection{
77
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
77
+ background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
78
78
  }
79
79
  .iui-progress-indicator-linear.iui-negative > .iui-label > span::selection,
80
80
  .iui-progress-indicator-linear.iui-negative > .iui-label > span *::selection{
81
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
81
+ background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
82
82
  }
83
83
  .iui-progress-indicator-linear > .iui-track > .iui-determinate{
84
84
  transition:width 2s ease-in-out;
@@ -114,8 +114,9 @@
114
114
  .iui-progress-indicator-radial{
115
115
  position:relative;
116
116
  display:inline-block;
117
- width:32px;
118
- height:32px;
117
+ --_iui-progress-indicator-radial-size:var(--iui-size-xl);
118
+ width:var(--_iui-progress-indicator-radial-size);
119
+ height:var(--_iui-progress-indicator-radial-size);
119
120
  }
120
121
  .iui-progress-indicator-radial > .iui-radial{
121
122
  height:100%;
@@ -134,14 +135,14 @@
134
135
  .iui-progress-indicator-radial .iui-inner-content{
135
136
  position:absolute;
136
137
  display:flex;
137
- width:calc(100% - 8px);
138
- height:calc(100% - 8px);
138
+ width:calc(100% - var(--iui-size-xs));
139
+ height:calc(100% - var(--iui-size-xs));
139
140
  left:50%;
140
141
  top:50%;
141
142
  transform:translate(-50%, -50%);
142
143
  align-items:center;
143
144
  justify-content:center;
144
- font-size:12px;
145
+ font-size:var(--iui-font-size-0);
145
146
  -webkit-user-select:none;
146
147
  -moz-user-select:none;
147
148
  -ms-user-select:none;
@@ -152,13 +153,13 @@
152
153
  .iui-progress-indicator-radial .iui-inner-content img{
153
154
  display:flex;
154
155
  flex-shrink:0;
155
- width:16px;
156
- height:16px;
157
- fill:var(--iui-icon-color-actionable);
156
+ width:var(--iui-size-m);
157
+ height:var(--iui-size-m);
158
+ fill:var(--iui-color-foreground-2);
158
159
  }
159
160
  .iui-progress-indicator-radial .iui-inner-content svg:hover,
160
161
  .iui-progress-indicator-radial .iui-inner-content img:hover{
161
- fill:var(--iui-icon-color-actionable-hover);
162
+ fill:var(--iui-color-foreground-1);
162
163
  }
163
164
  .iui-progress-indicator-radial.iui-positive{
164
165
  color:var(--iui-color-foreground-positive);
@@ -168,7 +169,7 @@
168
169
  stroke:var(--iui-color-foreground-positive);
169
170
  }
170
171
  .iui-progress-indicator-radial.iui-positive .iui-inner-content svg{
171
- fill:var(--iui-icon-color-positive);
172
+ fill:var(--iui-color-foreground-positive);
172
173
  }
173
174
  .iui-progress-indicator-radial.iui-negative{
174
175
  color:var(--iui-color-foreground-negative);
@@ -177,32 +178,29 @@
177
178
  stroke:var(--iui-color-foreground-negative);
178
179
  }
179
180
  .iui-progress-indicator-radial.iui-negative .iui-inner-content svg{
180
- fill:var(--iui-icon-color-negative);
181
+ fill:var(--iui-color-foreground-negative);
181
182
  }
182
183
  .iui-progress-indicator-radial.iui-x-small{
183
- width:16px;
184
- height:16px;
184
+ --_iui-progress-indicator-radial-size:var(--iui-size-m);
185
185
  }
186
186
  .iui-progress-indicator-radial.iui-x-small .iui-inner-content{
187
187
  display:none;
188
188
  }
189
189
  .iui-progress-indicator-radial.iui-small{
190
- width:24px;
191
- height:24px;
190
+ --_iui-progress-indicator-radial-size:calc(1.5 * var(--iui-size-m));
192
191
  }
193
192
  .iui-progress-indicator-radial.iui-large{
194
- width:48px;
195
- height:48px;
193
+ --_iui-progress-indicator-radial-size:calc(3 * var(--iui-size-m));
196
194
  }
197
195
  .iui-progress-indicator-radial.iui-large .iui-inner-content{
198
- font-size:16px;
196
+ font-size:var(--iui-font-size-2);
199
197
  }
200
198
  .iui-progress-indicator-radial.iui-large .iui-inner-content svg,
201
199
  .iui-progress-indicator-radial.iui-large .iui-inner-content img{
202
200
  display:flex;
203
201
  flex-shrink:0;
204
- width:24px;
205
- height:24px;
202
+ width:calc(1.5 * var(--iui-size-m));
203
+ height:calc(1.5 * var(--iui-size-m));
206
204
  }
207
205
  .iui-progress-indicator-radial.iui-determinate:not(.iui-positive) svg.iui-radial{
208
206
  transform:rotate(-90deg);
@@ -267,16 +265,16 @@
267
265
  left:0;
268
266
  z-index:10000;
269
267
  pointer-events:none;
270
- background-color:rgba(var(--iui-color-background-1-rgb), var(--iui-opacity-2));
268
+ background-color:Hsl(var(--iui-color-background-1-hsl)/var(--iui-opacity-2));
271
269
  }
272
270
  @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
273
271
  .iui-progress-indicator-overlay{
274
- background-color:rgba(var(--iui-color-background-1-rgb), var(--iui-opacity-3));
272
+ background-color:Hsl(var(--iui-color-background-1-hsl)/var(--iui-opacity-3));
275
273
  -webkit-backdrop-filter:blur(5px);
276
274
  backdrop-filter:blur(5px);
277
275
  }
278
276
  }
279
- .iui-progress-indicator-overlay:focus, .iui-progress-indicator-overlay:focus-visible{
277
+ .iui-progress-indicator-overlay:focus{
280
278
  outline:0;
281
279
  }
282
280
  .iui-progress-indicator-overlay .iui-progress-indicator-linear{
@@ -300,6 +298,6 @@
300
298
  }
301
299
  }
302
300
  .iui-progress-indicator-overlay .iui-overlay-exiting{
303
- -webkit-animation:closeAnimation 0.2s linear;
304
- animation:closeAnimation 0.2s linear;
301
+ -webkit-animation:closeAnimation var(--iui-duration-1) linear;
302
+ animation:closeAnimation var(--iui-duration-1) linear;
305
303
  }