@itwin/itwinui-css 0.52.0 → 0.53.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 (70) hide show
  1. package/css/alert.css +44 -44
  2. package/css/all.css +1946 -1215
  3. package/css/badge.css +1 -1
  4. package/css/blockquote.css +2 -2
  5. package/css/breadcrumbs.css +12 -12
  6. package/css/button.css +37 -37
  7. package/css/carousel.css +24 -36
  8. package/css/code.css +5 -5
  9. package/css/color-picker.css +14 -10
  10. package/css/date-picker.css +402 -46
  11. package/css/expandable-block.css +19 -19
  12. package/css/fieldset.css +4 -4
  13. package/css/file-upload.css +11 -11
  14. package/css/footer.css +2 -2
  15. package/css/global.css +539 -208
  16. package/css/header.css +49 -38
  17. package/css/icon.css +24 -24
  18. package/css/information-panel.css +15 -8
  19. package/css/inputs.css +72 -72
  20. package/css/keyboard.css +4 -4
  21. package/css/location-marker.css +9 -9
  22. package/css/menu.css +25 -12
  23. package/css/modal.css +1 -1
  24. package/css/notification-marker.css +28 -28
  25. package/css/progress-indicator.css +32 -32
  26. package/css/side-navigation.css +18 -18
  27. package/css/skip-to-content.css +1 -1
  28. package/css/slider.css +13 -13
  29. package/css/surface.css +19 -0
  30. package/css/table.css +78 -74
  31. package/css/tabs.css +23 -23
  32. package/css/tag.css +4 -4
  33. package/css/text.css +1 -1
  34. package/css/tile.css +35 -35
  35. package/css/time-picker.css +15 -15
  36. package/css/toast-notification.css +34 -34
  37. package/css/tooltip.css +3 -1
  38. package/css/tree.css +7 -7
  39. package/css/user-icon.css +15 -16
  40. package/css/wizard.css +26 -26
  41. package/package.json +1 -1
  42. package/scss/carousel/carousel.scss +22 -28
  43. package/scss/classes.scss +1 -0
  44. package/scss/color-picker/color-picker.scss +2 -2
  45. package/scss/date-picker/classes.scss +20 -0
  46. package/scss/date-picker/date-picker.scss +194 -33
  47. package/scss/fieldset/fieldset.scss +1 -1
  48. package/scss/header/header.scss +15 -10
  49. package/scss/index.scss +1 -0
  50. package/scss/information-panel/information-panel.scss +10 -3
  51. package/scss/menu/classes.scss +2 -1
  52. package/scss/menu/menu.scss +8 -11
  53. package/scss/modal/modal.scss +2 -1
  54. package/scss/progress-indicator/linear.scss +1 -1
  55. package/scss/progress-indicator/radial.scss +1 -1
  56. package/scss/side-navigation/side-navigation.scss +5 -5
  57. package/scss/slider/slider.scss +2 -2
  58. package/scss/style/elevation.scss +5 -5
  59. package/scss/style/global.scss +32 -21
  60. package/scss/style/mixins.scss +1 -1
  61. package/scss/style/theme.scss +248 -65
  62. package/scss/surface/classes.scss +7 -0
  63. package/scss/surface/index.scss +3 -0
  64. package/scss/surface/surface.scss +18 -0
  65. package/scss/table/column-filter.scss +2 -2
  66. package/scss/table/table.scss +3 -3
  67. package/scss/tile/tile.scss +5 -5
  68. package/scss/time-picker/time-picker.scss +2 -2
  69. package/scss/tooltip/tooltip.scss +1 -0
  70. package/scss/wizard/wizard.scss +1 -1
package/scss/menu/classes.scss CHANGED
@@ -1,9 +1,10 @@
1
1
  // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
+ @import '../surface/index';
4
5
 
5
6
  .iui-menu {
6
- @include iui-dropdown;
7
+ @include iui-surface;
7
8
  @include iui-list-menu;
8
9
  }
9
10
 
package/scss/menu/menu.scss CHANGED
@@ -5,16 +5,8 @@
5
5
 
6
6
  $iui-active-outline: thin solid t(iui-color-foreground-primary);
7
7
 
8
- @mixin iui-dropdown {
9
- @include iui-reset;
10
- box-shadow: $iui-elevation-2;
11
- @include themed {
12
- background-color: t(iui-color-background-1);
13
- color: t(iui-text-color);
14
- }
15
- }
16
-
17
8
  @mixin iui-list-menu {
9
+ @include iui-reset;
18
10
  list-style-type: none;
19
11
  user-select: none;
20
12
  width: 100%;
@@ -111,12 +103,17 @@ $iui-active-outline: thin solid t(iui-color-foreground-primary);
111
103
  &,
112
104
  &:hover {
113
105
  @include themed {
114
- background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-5));
106
+ background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
107
+ color: t(iui-color-foreground-primary);
115
108
  outline: $iui-active-outline;
116
109
  outline-offset: -1px;
117
110
  }
118
111
  }
119
112
 
113
+ .iui-menu-description {
114
+ opacity: 1;
115
+ }
116
+
120
117
  > .iui-icon {
121
118
  @include themed {
122
119
  fill: t(iui-icons-color-primary);
@@ -163,7 +160,7 @@ $iui-active-outline: thin solid t(iui-color-foreground-primary);
163
160
  width: calc(100% - #{$iui-l});
164
161
  margin: 1px auto;
165
162
  @include themed {
166
- background-color: t(iui-color-background-4);
163
+ background-color: t(iui-color-background-border);
167
164
  }
168
165
  }
169
166
 
package/scss/modal/modal.scss CHANGED
@@ -125,7 +125,8 @@
125
125
  > .iui-modal-dialog {
126
126
  transform: translateY(100%);
127
127
  @media (prefers-reduced-motion: no-preference) {
128
- transition: visibility $iui-speed-instant linear $iui-speed, opacity $iui-speed-instant linear $iui-speed, transform $iui-speed ease-in;
128
+ transition: visibility $iui-speed-instant linear $iui-speed, opacity $iui-speed-instant linear $iui-speed,
129
+ transform $iui-speed ease-in;
129
130
  }
130
131
  }
131
132
 
package/scss/progress-indicator/linear.scss CHANGED
@@ -13,7 +13,7 @@
13
13
  overflow: hidden;
14
14
 
15
15
  @include themed {
16
- background-color: t(iui-color-background-5);
16
+ background-color: t(iui-color-background-border);
17
17
  }
18
18
 
19
19
  > .iui-fill {
package/scss/progress-indicator/radial.scss CHANGED
@@ -27,7 +27,7 @@
27
27
  animation: dash $iui-speed-slow linear infinite;
28
28
 
29
29
  @include themed {
30
- border-bottom-color: t(iui-color-background-5);
30
+ border-bottom-color: t(iui-color-background-border);
31
31
  }
32
32
  }
33
33
 
package/scss/side-navigation/side-navigation.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  }
15
15
  @include themed {
16
16
  background-color: t(iui-color-background-3);
17
- border-right: 1px solid t(iui-color-background-5);
17
+ border-right: 1px solid t(iui-color-background-border);
18
18
  }
19
19
 
20
20
  > .iui-sidenav-content {
@@ -51,7 +51,7 @@
51
51
  + .iui-sidenav-button.iui-expand {
52
52
  border: none;
53
53
  @include themed {
54
- border-top: 1px solid t(iui-color-background-5);
54
+ border-top: 1px solid t(iui-color-background-border);
55
55
  }
56
56
  }
57
57
  }
@@ -105,7 +105,7 @@
105
105
  &:hover,
106
106
  &[disabled] {
107
107
  @include themed {
108
- border-color: t(iui-color-background-5);
108
+ border-color: t(iui-color-background-border);
109
109
  }
110
110
  }
111
111
 
@@ -133,7 +133,7 @@
133
133
  justify-content: center;
134
134
  border: none;
135
135
  @include themed {
136
- border-bottom: 1px solid t(iui-color-background-5);
136
+ border-bottom: 1px solid t(iui-color-background-border);
137
137
  }
138
138
 
139
139
  > .iui-button-icon {
@@ -157,7 +157,7 @@
157
157
  resize: horizontal;
158
158
  @include themed {
159
159
  background-color: t(iui-color-background-1);
160
- border-right: 1px solid t(iui-color-background-5);
160
+ border-right: 1px solid t(iui-color-background-border);
161
161
  }
162
162
 
163
163
  @include iui-transition-group;
package/scss/slider/slider.scss CHANGED
@@ -53,7 +53,7 @@ $tick-height: $iui-baseline; // 11px
53
53
  height: $track-height;
54
54
  top: $iui-sm;
55
55
  @include themed {
56
- background-color: t(iui-color-background-4);
56
+ background-color: t(iui-color-background-border);
57
57
  }
58
58
  }
59
59
 
@@ -71,7 +71,7 @@ $tick-height: $iui-baseline; // 11px
71
71
  @include iui-focus($thickness: 2px);
72
72
  @include themed {
73
73
  background: t(iui-color-background-1);
74
- border: 1px solid t(iui-color-background-5);
74
+ border: 1px solid t(iui-color-background-border);
75
75
  }
76
76
 
77
77
  &:active {
package/scss/style/elevation.scss CHANGED
@@ -3,8 +3,8 @@
3
3
  /// Elevations:
4
4
 
5
5
  $iui-elevation-0: 0;
6
- $iui-elevation-2: 0 1px 5px rgba(0, 0, 0, 0.25);
7
- $iui-elevation-4: 0 1px 10px rgba(0, 0, 0, 0.25);
8
- $iui-elevation-8: 0 3px 14px rgba(0, 0, 0, 0.25);
9
- $iui-elevation-16: 0 6px 30px rgba(0, 0, 0, 0.25);
10
- $iui-elevation-24: 0 9px 46px rgba(0, 0, 0, 0.25);
6
+ $iui-elevation-2: 0 1px 5px hsla(200, 12%, 0%, 0.25);
7
+ $iui-elevation-4: 0 1px 10px hsla(200, 12%, 0%, 0.25);
8
+ $iui-elevation-8: 0 3px 14px hsla(200, 12%, 0%, 0.25);
9
+ $iui-elevation-16: 0 6px 30px hsla(200, 12%, 0%, 0.25);
10
+ $iui-elevation-24: 0 9px 46px hsla(200, 12%, 0%, 0.25);
package/scss/style/global.scss CHANGED
@@ -2,6 +2,38 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
+ html {
6
+ @include theme-variables(light);
7
+
8
+ @media (prefers-color-scheme: dark) {
9
+ @include theme-variables(dark);
10
+ }
11
+
12
+ @media (prefers-color-scheme: light) and (prefers-contrast: more) {
13
+ @include theme-variables(light-hc);
14
+ }
15
+
16
+ @media (prefers-color-scheme: dark) and (prefers-contrast: more) {
17
+ @include theme-variables(dark-hc);
18
+ }
19
+
20
+ &.iui-theme-light {
21
+ @include theme-variables(light);
22
+ }
23
+
24
+ &.iui-theme-dark {
25
+ @include theme-variables(dark);
26
+ }
27
+
28
+ &.iui-theme-light-hc {
29
+ @include theme-variables(light-hc);
30
+ }
31
+
32
+ &.iui-theme-dark-hc {
33
+ @include theme-variables(dark-hc);
34
+ }
35
+ }
36
+
5
37
  .iui-body {
6
38
  @include themed {
7
39
  background-color: t(iui-color-background-2);
@@ -31,24 +63,3 @@
31
63
  // Scrollbar
32
64
  @include iui-scrollbar;
33
65
  }
34
-
35
- html {
36
- &,
37
- &.iui-theme-light {
38
- @include theme-variables(light);
39
- }
40
-
41
- &.iui-theme-dark {
42
- @include theme-variables(dark);
43
- }
44
-
45
- @media (prefers-color-scheme: light) {
46
- // fall back to default - light theme variables
47
- }
48
-
49
- @media (prefers-color-scheme: dark) {
50
- &:not([class*='iui-theme-']) {
51
- @include theme-variables(dark);
52
- }
53
- }
54
- }
package/scss/style/mixins.scss CHANGED
@@ -67,7 +67,7 @@
67
67
  &::selection,
68
68
  *::selection {
69
69
  @include themed {
70
- background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-4));
70
+ background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-5));
71
71
  }
72
72
  }
73
73
  }