@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/expandable-block.css CHANGED
@@ -11,18 +11,19 @@
11
11
  flex-direction:column;
12
12
  width:100%;
13
13
  background-color:var(--iui-color-background-1);
14
+ border-radius:var(--iui-border-radius-1);
14
15
  }
15
16
  .iui-expandable-block > .iui-header{
16
17
  display:flex;
17
18
  align-items:center;
18
- padding:12px 12px;
19
+ padding:var(--iui-size-s);
19
20
  cursor:pointer;
20
21
  -webkit-user-select:none;
21
22
  -moz-user-select:none;
22
23
  -ms-user-select:none;
23
24
  user-select:none;
25
+ border-radius:inherit;
24
26
  border:1px solid var(--iui-color-background-3);
25
- border-bottom-color:var(--iui-color-background-4);
26
27
  background-color:var(--iui-color-background-3);
27
28
  }
28
29
  .iui-expandable-block > .iui-header:focus-visible{
@@ -37,38 +38,38 @@
37
38
  }
38
39
  @media (prefers-reduced-motion: no-preference){
39
40
  .iui-expandable-block > .iui-header{
40
- transition:background-color 0.2s ease-out;
41
+ transition:background-color var(--iui-duration-1) ease-out;
41
42
  }
42
43
  }
43
44
  .iui-expandable-block > .iui-header > .iui-icon,
44
45
  .iui-expandable-block > .iui-header > .iui-status-icon{
45
46
  display:flex;
46
47
  flex-shrink:0;
47
- width:16px;
48
- height:16px;
48
+ width:var(--iui-size-m);
49
+ height:var(--iui-size-m);
49
50
  }
50
51
  .iui-expandable-block > .iui-header > .iui-icon{
51
- fill:var(--iui-icon-color-actionable);
52
+ fill:var(--iui-color-foreground-2);
52
53
  }
53
54
  @media (prefers-reduced-motion: no-preference){
54
55
  .iui-expandable-block > .iui-header > .iui-icon{
55
- transition:transform 0.2s ease-out;
56
+ transition:transform var(--iui-duration-1) ease-out;
56
57
  }
57
58
  }
58
59
  .iui-expandable-block > .iui-header > .iui-status-icon{
59
- margin-left:12px;
60
+ margin-left:var(--iui-size-s);
60
61
  }
61
62
  .iui-expandable-block > .iui-header .iui-expandable-block-label{
62
63
  display:flex;
63
64
  flex-direction:column;
64
65
  flex:auto;
65
66
  min-width:0;
66
- margin-left:12px;
67
- color:var(--iui-text-color);
67
+ margin-left:var(--iui-size-s);
68
+ color:var(--iui-color-foreground-2);
68
69
  }
69
70
  @media (prefers-reduced-motion: no-preference){
70
71
  .iui-expandable-block > .iui-header .iui-expandable-block-label{
71
- transition:color 0.2s ease;
72
+ transition:color var(--iui-duration-1) ease;
72
73
  }
73
74
  }
74
75
  .iui-expandable-block > .iui-header .iui-title,
@@ -78,11 +79,11 @@
78
79
  text-overflow:ellipsis;
79
80
  }
80
81
  .iui-expandable-block > .iui-header .iui-title{
81
- font-size:16px;
82
+ font-size:var(--iui-font-size-2);
82
83
  }
83
84
  .iui-expandable-block > .iui-header .iui-caption{
84
- font-size:12px;
85
- color:var(--iui-text-color-muted);
85
+ font-size:var(--iui-font-size-0);
86
+ color:var(--iui-color-foreground-4);
86
87
  }
87
88
  .iui-expandable-block > .iui-header:focus-visible{
88
89
  outline:1px solid var(--iui-color-foreground-primary);
@@ -99,6 +100,8 @@
99
100
  border-bottom:1px solid var(--iui-color-background-4);
100
101
  border-right:1px solid var(--iui-color-background-4);
101
102
  border-left:1px solid var(--iui-color-background-4);
103
+ border-bottom-left-radius:inherit;
104
+ border-bottom-right-radius:inherit;
102
105
  }
103
106
  .iui-expandable-block .iui-expandable-content.iui-enter{
104
107
  opacity:0;
@@ -108,7 +111,7 @@
108
111
  }
109
112
  @media (prefers-reduced-motion: no-preference){
110
113
  .iui-expandable-block .iui-expandable-content.iui-enter-active{
111
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
114
+ transition:opacity var(--iui-duration-1) ease-out, width var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out;
112
115
  }
113
116
  }
114
117
  .iui-expandable-block .iui-expandable-content.iui-exit{
@@ -119,33 +122,33 @@
119
122
  }
120
123
  @media (prefers-reduced-motion: no-preference){
121
124
  .iui-expandable-block .iui-expandable-content.iui-exit-active{
122
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
125
+ transition:opacity var(--iui-duration-1) ease-out, width var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out;
123
126
  }
124
127
  }
125
128
  .iui-expandable-block .iui-expandable-content > div{
126
- padding:12px 12px;
129
+ padding:var(--iui-size-s) var(--iui-size-s);
127
130
  }
128
131
  .iui-expandable-block:hover > .iui-header{
129
132
  background-color:var(--iui-color-background-4);
130
133
  }
131
134
  .iui-expandable-block:hover > .iui-header > .iui-icon{
132
- fill:var(--iui-icon-color-actionable-hover);
135
+ fill:var(--iui-color-foreground-1);
133
136
  }
134
137
  .iui-expandable-block:hover > .iui-header .iui-caption,
135
138
  .iui-expandable-block:hover > .iui-header .iui-title{
136
- color:var(--iui-color-foreground-body);
139
+ color:var(--iui-color-foreground-1);
137
140
  }
138
141
  @media (prefers-reduced-motion: no-preference){
139
142
  .iui-expandable-block:hover > .iui-header .iui-caption,
140
143
  .iui-expandable-block:hover > .iui-header .iui-title{
141
- transition:color 0.2s ease;
144
+ transition:color var(--iui-duration-1) ease;
142
145
  }
143
146
  }
144
147
  .iui-expandable-block.iui-expanded > .iui-header{
145
148
  background-color:var(--iui-color-background-3);
146
- border-left:1px solid var(--iui-color-background-4);
147
- border-top:1px solid var(--iui-color-background-4);
148
- border-right:1px solid var(--iui-color-background-4);
149
+ border-color:var(--iui-color-background-4);
150
+ border-bottom-left-radius:0;
151
+ border-bottom-right-radius:0;
149
152
  }
150
153
  .iui-expandable-block.iui-expanded > .iui-header:hover{
151
154
  background-color:var(--iui-color-background-4);
@@ -154,19 +157,19 @@
154
157
  transform:rotate(90deg);
155
158
  }
156
159
  .iui-expandable-block.iui-small .iui-header{
157
- padding:6px 8px;
160
+ padding:calc(var(--iui-size-s) * 0.5) var(--iui-size-xs);
158
161
  }
159
162
  .iui-expandable-block.iui-small .iui-header > .iui-icon{
160
163
  display:flex;
161
164
  flex-shrink:0;
162
- width:12px;
163
- height:12px;
165
+ width:var(--iui-size-s);
166
+ height:var(--iui-size-s);
164
167
  }
165
168
  .iui-expandable-block.iui-small .iui-header > .iui-expandable-block-label{
166
- margin-left:8px;
169
+ margin-left:var(--iui-size-xs);
167
170
  }
168
171
  .iui-expandable-block.iui-small .iui-header > .iui-status-icon{
169
- margin-left:8px;
172
+ margin-left:var(--iui-size-xs);
170
173
  }
171
174
  .iui-expandable-block.iui-borderless,
172
175
  .iui-expandable-block.iui-borderless .iui-header,
@@ -175,10 +178,10 @@
175
178
  border:initial;
176
179
  }
177
180
  .iui-expandable-block.iui-borderless .iui-header{
178
- border-radius:4px;
181
+ border-radius:var(--iui-border-radius-1);
179
182
  }
180
183
  .iui-expandable-block.iui-borderless .iui-header:hover{
181
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
184
+ background-color:var(--iui-color-background-transparent-hover);
182
185
  }
183
186
  .iui-expandable-block.iui-borderless .iui-expandable-content > div{
184
187
  padding:0;
package/css/fieldset.css CHANGED
@@ -7,25 +7,25 @@
7
7
  padding:0;
8
8
  border:none;
9
9
  vertical-align:baseline;
10
- padding:12px 12px;
11
- border-radius:4px;
10
+ padding:var(--iui-size-s) var(--iui-size-s);
11
+ border-radius:var(--iui-border-radius-1);
12
12
  border:1px solid var(--iui-color-background-border);
13
13
  background-color:var(--iui-color-background-1);
14
14
  }
15
15
  .iui-fieldset legend{
16
- font-size:16px;
17
- padding:1px 8px;
18
- border-radius:4px;
16
+ font-size:var(--iui-font-size-2);
17
+ padding-inline:var(--iui-size-xs);
18
+ border-radius:var(--iui-border-radius-1);
19
19
  -webkit-user-select:none;
20
20
  -moz-user-select:none;
21
21
  -ms-user-select:none;
22
22
  user-select:none;
23
23
  background-color:var(--iui-color-background-4);
24
- color:var(--iui-text-color);
24
+ color:var(--iui-color-foreground-2);
25
25
  }
26
26
  .iui-fieldset[disabled]{
27
27
  cursor:not-allowed;
28
28
  }
29
29
  .iui-fieldset[disabled] legend{
30
- color:var(--iui-text-color-muted);
30
+ color:var(--iui-color-foreground-4);
31
31
  }
package/css/file-upload.css CHANGED
@@ -7,8 +7,8 @@
7
7
  padding:0;
8
8
  border:none;
9
9
  vertical-align:baseline;
10
- font-size:14px;
11
- font-weight:400;
10
+ font-size:var(--iui-font-size-1);
11
+ font-weight:var(--iui-font-weight-normal);
12
12
  position:relative;
13
13
  display:flex;
14
14
  }
@@ -27,9 +27,10 @@
27
27
  -moz-user-select:none;
28
28
  -ms-user-select:none;
29
29
  user-select:none;
30
- padding:6px 12px;
30
+ padding:calc(var(--iui-size-s) * 0.5) var(--iui-size-s);
31
31
  background-color:var(--iui-color-background-2);
32
32
  border:1px solid var(--iui-color-background-2);
33
+ border-radius:var(--iui-border-radius-1);
33
34
  }
34
35
  .iui-file-upload > .iui-content .iui-browse-input{
35
36
  width:0.1px;
@@ -42,11 +43,11 @@
42
43
  .iui-file-upload > .iui-content .iui-template-icon{
43
44
  display:flex;
44
45
  flex-shrink:0;
45
- width:64px;
46
- height:64px;
47
- fill:var(--iui-icon-color);
48
- margin-top:12px;
49
- margin-bottom:12px;
46
+ width:var(--iui-size-2xl);
47
+ height:var(--iui-size-2xl);
48
+ fill:var(--iui-color-foreground-4);
49
+ margin-top:var(--iui-size-s);
50
+ margin-bottom:var(--iui-size-s);
50
51
  }
51
52
  @media (forced-colors: active){
52
53
  .iui-file-upload > .iui-content > svg,
@@ -64,18 +65,18 @@
64
65
  outline-offset:-2px;
65
66
  }
66
67
  .iui-file-upload > .iui-content .iui-template-text{
67
- margin-left:24px;
68
+ margin-left:var(--iui-size-l);
68
69
  }
69
70
  .iui-file-upload > .iui-content .iui-template-text > label{
70
- font-weight:700;
71
+ font-weight:var(--iui-font-weight-bold);
71
72
  }
72
73
  .iui-file-upload.iui-drag > .iui-content{
73
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
74
+ background-color:var(--iui-color-background-subtle-primary);
74
75
  border-color:var(--iui-color-foreground-primary);
75
76
  color:var(--iui-color-foreground-primary);
76
77
  visibility:visible;
77
78
  }
78
79
  .iui-file-upload.iui-drag > .iui-content > svg,
79
80
  .iui-file-upload.iui-drag > .iui-content .iui-template-icon{
80
- fill:var(--iui-icon-color-primary);
81
+ fill:var(--iui-color-foreground-primary);
81
82
  }
package/css/footer.css CHANGED
@@ -9,8 +9,8 @@
9
9
  vertical-align:baseline;
10
10
  text-align:center;
11
11
  width:100%;
12
- padding:12px 0;
13
- font-size:12px;
12
+ padding:var(--iui-size-s) 0;
13
+ font-size:var(--iui-font-size-0);
14
14
  }
15
15
 
16
16
  .iui-legal-footer-list{
@@ -32,12 +32,12 @@
32
32
  user-select:none;
33
33
  white-space:nowrap;
34
34
  word-break:keep-all;
35
- color:var(--iui-text-color-muted);
35
+ color:var(--iui-color-foreground-4);
36
36
  }
37
37
  .iui-legal-footer-item > a{
38
38
  color:var(--iui-color-foreground-primary);
39
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
40
- border-radius:4px;
39
+ -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
40
+ border-radius:var(--iui-border-radius-1);
41
41
  cursor:pointer;
42
42
  text-decoration:none;
43
43
  }
@@ -52,7 +52,7 @@
52
52
  }
53
53
  }
54
54
  .iui-legal-footer-item > a:hover{
55
- color:var(--iui-color-foreground-primary-overlay);
55
+ color:var(--iui-color-foreground-primary-hover);
56
56
  }
57
57
  .iui-legal-footer-item > a:hover{
58
58
  text-decoration:underline;
@@ -80,16 +80,16 @@
80
80
  }
81
81
 
82
82
  .iui-legal-footer-item > a, .iui-legal-footer-item > a:hover{
83
- color:var(--iui-text-color-muted);
83
+ color:var(--iui-color-foreground-4);
84
84
  }
85
85
 
86
86
  .iui-legal-footer-separator{
87
- margin:0 8px;
87
+ margin:0 var(--iui-size-xs);
88
88
  width:1px;
89
- height:12px;
90
- background-color:var(--iui-text-color-muted);
89
+ height:var(--iui-size-s);
90
+ background-color:var(--iui-color-foreground-4);
91
91
  }
92
92
 
93
93
  .iui-legal-footer-developer{
94
- color:var(--iui-text-color-muted);
94
+ color:var(--iui-color-foreground-4);
95
95
  }