@itwin/itwinui-css 0.37.2 → 0.40.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 (64) hide show
  1. package/css/all.css +563 -367
  2. package/css/breadcrumbs.css +26 -15
  3. package/css/button.css +192 -137
  4. package/css/code.css +2 -0
  5. package/css/color-picker.css +2 -0
  6. package/css/date-picker.css +2 -0
  7. package/css/header.css +134 -91
  8. package/css/information-panel.css +26 -0
  9. package/css/inputs.css +79 -43
  10. package/css/menu.css +3 -3
  11. package/css/side-navigation.css +27 -24
  12. package/css/table.css +9 -2
  13. package/css/tabs.css +15 -12
  14. package/css/tile.css +46 -40
  15. package/package.json +6 -2
  16. package/scss/breadcrumbs/breadcrumbs.scss +1 -1
  17. package/scss/button/borderless.scss +31 -46
  18. package/scss/button/button-group.scss +6 -15
  19. package/scss/button/button-icon.scss +12 -0
  20. package/scss/button/button.scss +28 -35
  21. package/scss/button/classes.scss +25 -3
  22. package/scss/button/cta.scss +22 -19
  23. package/scss/button/default.scss +29 -41
  24. package/scss/button/disabled.scss +3 -14
  25. package/scss/button/high-visibility.scss +22 -19
  26. package/scss/button/index.scss +1 -0
  27. package/scss/button/split-menu.scss +7 -8
  28. package/scss/code/codeblock.scss +4 -0
  29. package/scss/color-picker/color-picker.scss +16 -1
  30. package/scss/date-picker/date-picker.scss +2 -8
  31. package/scss/header/classes.scss +4 -0
  32. package/scss/header/header.scss +72 -60
  33. package/scss/information-panel/classes.scss +4 -0
  34. package/scss/information-panel/information-panel.scss +37 -0
  35. package/scss/inputs/checkbox-radio.scss +9 -9
  36. package/scss/inputs/checkbox.scss +36 -0
  37. package/scss/inputs/classes.scss +5 -1
  38. package/scss/inputs/labeled-inputs.scss +41 -16
  39. package/scss/inputs/radio-tile.scss +2 -4
  40. package/scss/keyboard/keyboard.scss +2 -4
  41. package/scss/location-marker/data-rich.scss +1 -2
  42. package/scss/menu/menu.scss +3 -11
  43. package/scss/modal/modal.scss +1 -2
  44. package/scss/progress-indicator/linear.scss +3 -10
  45. package/scss/progress-indicator/overlay.scss +3 -9
  46. package/scss/progress-indicator/radial.scss +4 -4
  47. package/scss/side-navigation/side-navigation.scss +32 -29
  48. package/scss/slider/slider.scss +5 -3
  49. package/scss/style/global.scss +1 -4
  50. package/scss/style/mixins.scss +17 -12
  51. package/scss/style/theme.scss +63 -208
  52. package/scss/table/table.scss +7 -19
  53. package/scss/table/variables.scss +2 -4
  54. package/scss/tabs/borderless.scss +3 -12
  55. package/scss/tabs/pill.scss +2 -8
  56. package/scss/tabs/tabs.scss +11 -8
  57. package/scss/tile/tile.scss +4 -2
  58. package/scss/time-picker/time-picker.scss +1 -4
  59. package/scss/toast-notification/categories.scss +1 -4
  60. package/scss/toast-notification/toast.scss +1 -3
  61. package/scss/toggle-switch/toggle-switch.scss +4 -8
  62. package/scss/tooltip/tooltip.scss +1 -2
  63. package/scss/user-icon/user-icon.scss +3 -6
  64. package/scss/wizard/wizard.scss +2 -1
package/css/breadcrumbs.css CHANGED
@@ -49,38 +49,49 @@
49
49
  color:var(--iui-color-foreground-primary-overlay);
50
50
  text-decoration:underline; }
51
51
  .iui-breadcrumbs-item .iui-button{
52
- background-color:transparent;
53
52
  border-color:transparent;
53
+ background-color:transparent;
54
54
  padding:0 8px;
55
+ height:38px;
56
+ gap:8px;
55
57
  margin:0 -9px; }
56
- .iui-breadcrumbs-item .iui-button.iui-small{
57
- padding:0 2px; }
58
- .iui-breadcrumbs-item .iui-button.iui-large{
59
- padding:0 12px; }
60
- .iui-breadcrumbs-item .iui-button > .iui-icon:only-child{
58
+ .iui-breadcrumbs-item .iui-button > .iui-button-icon:only-child{
61
59
  margin-left:3px;
62
60
  margin-right:3px; }
63
- .iui-breadcrumbs-item .iui-button:enabled:hover, .iui-breadcrumbs-item .iui-button:enabled:active, .iui-breadcrumbs-item .iui-button:focus-visible{
61
+ .iui-breadcrumbs-item .iui-button:hover, .iui-breadcrumbs-item .iui-button:focus{
64
62
  background-color:rgba(0, 0, 0, 0.1);
65
63
  border-color:transparent;
66
64
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
67
65
  border-color:transparent; }
68
- .iui-breadcrumbs-item .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled, .iui-breadcrumbs-item .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover, .iui-breadcrumbs-item .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active{
69
- background:transparent;
66
+ .iui-breadcrumbs-item .iui-button:focus:not(:focus-visible){
67
+ border-color:transparent;
68
+ background-color:transparent; }
69
+ .iui-breadcrumbs-item .iui-button:focus:not(:focus-visible) > .iui-button-icon:only-child{
70
+ margin-left:3px;
71
+ margin-right:3px; }
72
+ .iui-breadcrumbs-item .iui-button.iui-active{
70
73
  background-color:rgba(0, 139, 225, 0.1);
74
+ color:#008BE1;
71
75
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
76
+ color:var(--iui-color-foreground-primary);
72
77
  border-color:transparent; }
73
- .iui-breadcrumbs-item .iui-button[disabled], .iui-breadcrumbs-item .iui-button[disabled]:hover, .iui-breadcrumbs-item .iui-button[disabled]:active, .iui-breadcrumbs-item .iui-button[disabled]:focus{
78
+ .iui-breadcrumbs-item .iui-button[disabled], .iui-breadcrumbs-item .iui-button:disabled{
79
+ cursor:not-allowed;
80
+ background:#EEF0F3;
81
+ border-color:#EEF0F3;
82
+ color:rgba(0, 0, 0, 0.2);
83
+ background:var(--iui-color-background-disabled);
84
+ border-color:var(--iui-color-background-disabled);
85
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
86
+ background-color:transparent;
87
+ border-color:transparent;
74
88
  background-color:transparent;
75
89
  border-color:transparent; }
76
- .iui-breadcrumbs-item .iui-button[disabled] > .iui-icon, .iui-breadcrumbs-item .iui-button[disabled]:hover > .iui-icon, .iui-breadcrumbs-item .iui-button[disabled]:active > .iui-icon, .iui-breadcrumbs-item .iui-button[disabled]:focus > .iui-icon{
77
- fill:rgba(0, 0, 0, 0.2);
78
- fill:var(--iui-icons-color-actionable-disabled); }
79
- .iui-breadcrumbs-item .iui-button[disabled].iui-active, .iui-breadcrumbs-item .iui-button[disabled]:hover.iui-active, .iui-breadcrumbs-item .iui-button[disabled]:active.iui-active, .iui-breadcrumbs-item .iui-button[disabled]:focus.iui-active{
90
+ .iui-breadcrumbs-item .iui-button[disabled].iui-active, .iui-breadcrumbs-item .iui-button:disabled.iui-active{
80
91
  background-color:rgba(0, 0, 0, 0.05);
81
92
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
82
93
  .iui-breadcrumbs-item > *,
83
- .iui-breadcrumbs-item .iui-label{
94
+ .iui-breadcrumbs-item .iui-button-label{
84
95
  overflow:hidden;
85
96
  white-space:nowrap;
86
97
  text-overflow:ellipsis; }
package/css/button.css CHANGED
@@ -28,25 +28,21 @@
28
28
  cursor:pointer;
29
29
  white-space:nowrap;
30
30
  border:1px solid transparent;
31
+ color:rgba(0, 0, 0, 0.8);
32
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
31
33
  padding:0 16px;
32
34
  height:38px;
33
- background-color:#FFF;
34
- border-color:rgba(0, 0, 0, 0.4);
35
- color:rgba(0, 0, 0, 0.8);
36
- background-color:var(--iui-color-background-1);
37
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
38
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
35
+ gap:8px;
36
+ padding:0 16px;
37
+ height:38px;
38
+ gap:8px; }
39
39
  @media (prefers-reduced-motion: no-preference){
40
40
  .iui-button{
41
41
  transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out; } }
42
- .iui-button > .iui-icon:not(.iui-user-icon){
43
- width:16px;
44
- height:16px; }
45
- @media (prefers-reduced-motion: no-preference){
46
- .iui-button > .iui-icon:not(.iui-user-icon){
47
- transition:fill 0.2s ease-out; } }
48
- .iui-button:enabled:hover{
49
- text-decoration:none; }
42
+ .iui-button:hover{
43
+ text-decoration:none;
44
+ color:black;
45
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
50
46
  .iui-button:focus{
51
47
  outline:0;
52
48
  box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
@@ -57,65 +53,66 @@
57
53
  outline:0;
58
54
  box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
59
55
  box-shadow:var(--iui-focus-box-shadow); }
60
- .iui-button > .iui-icon + .iui-label,
61
- .iui-button > .iui-label + .iui-icon,
62
- .iui-button > .iui-icon + .iui-icon{
63
- margin-left:8px; }
64
- .iui-button.iui-small{
65
- padding:0 8px;
66
- height:27px; }
67
- .iui-button.iui-small > .iui-icon + .iui-label,
68
- .iui-button.iui-small > .iui-label + .iui-icon,
69
- .iui-button.iui-small > .iui-icon + .iui-icon{
70
- margin-left:4px; }
71
- .iui-button.iui-large{
72
- padding:0 24px;
73
- height:49px;
74
- font-size:16px; }
75
- .iui-button.iui-large > .iui-icon + .iui-label,
76
- .iui-button.iui-large > .iui-label + .iui-icon,
77
- .iui-button.iui-large > .iui-icon + .iui-icon{
78
- margin-left:12px; }
79
- .iui-button > .iui-icon{
80
- fill:rgba(0, 0, 0, 0.8);
81
- fill:var(--iui-icons-color-actionable); }
82
- .iui-button:enabled:hover, .iui-button:enabled:active, .iui-button:focus-visible{
83
- background-color:#f2f2f2;
84
- border-color:black;
85
- color:black;
86
- background-color:var(--iui-color-background-1-overlay);
87
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
88
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
89
- .iui-button:enabled:hover .iui-notification-primary::before,
90
- .iui-button:enabled:hover .iui-notification-positive::before,
91
- .iui-button:enabled:hover .iui-notification-warning::before,
92
- .iui-button:enabled:hover .iui-notification-negative::before, .iui-button:enabled:active .iui-notification-primary::before,
93
- .iui-button:enabled:active .iui-notification-positive::before,
94
- .iui-button:enabled:active .iui-notification-warning::before,
95
- .iui-button:enabled:active .iui-notification-negative::before, .iui-button:focus-visible .iui-notification-primary::before,
96
- .iui-button:focus-visible .iui-notification-positive::before,
97
- .iui-button:focus-visible .iui-notification-warning::before,
98
- .iui-button:focus-visible .iui-notification-negative::before{
99
- border-color:#f2f2f2;
100
- border-color:var(--iui-color-background-1-overlay); }
101
- .iui-button:enabled:hover > .iui-icon, .iui-button:enabled:active > .iui-icon, .iui-button:focus-visible > .iui-icon{
102
- fill:black;
103
- fill:var(--iui-icons-color-actionable-hover); }
104
- .iui-button.iui-dropdown{
105
- padding-right:8px; }
106
- .iui-button.iui-dropdown.iui-small{
107
- padding-right:4px; }
108
- .iui-button.iui-dropdown.iui-large{
109
- padding-right:12px; }
110
- .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active{
111
- background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
112
- 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)); }
113
- .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled > .iui-label, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover > .iui-label, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active > .iui-label{
56
+ .iui-button[disabled], .iui-button:disabled{
57
+ cursor:not-allowed;
58
+ background:#EEF0F3;
59
+ border-color:#EEF0F3;
60
+ color:rgba(0, 0, 0, 0.2);
61
+ background:var(--iui-color-background-disabled);
62
+ border-color:var(--iui-color-background-disabled);
63
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
64
+ .iui-button.iui-default{
65
+ background-color:#FFF;
66
+ border-color:rgba(0, 0, 0, 0.4);
67
+ color:rgba(0, 0, 0, 0.8);
68
+ background-color:var(--iui-color-background-1);
69
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
70
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
71
+ .iui-button.iui-default:hover, .iui-button.iui-default:active, .iui-button.iui-default:focus{
72
+ background-color:#f2f2f2;
73
+ border-color:black;
74
+ color:black;
75
+ background-color:var(--iui-color-background-1-overlay);
76
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
77
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
78
+ .iui-button.iui-default:hover .iui-notification-primary::before,
79
+ .iui-button.iui-default:hover .iui-notification-positive::before,
80
+ .iui-button.iui-default:hover .iui-notification-warning::before,
81
+ .iui-button.iui-default:hover .iui-notification-negative::before, .iui-button.iui-default:active .iui-notification-primary::before,
82
+ .iui-button.iui-default:active .iui-notification-positive::before,
83
+ .iui-button.iui-default:active .iui-notification-warning::before,
84
+ .iui-button.iui-default:active .iui-notification-negative::before, .iui-button.iui-default:focus .iui-notification-primary::before,
85
+ .iui-button.iui-default:focus .iui-notification-positive::before,
86
+ .iui-button.iui-default:focus .iui-notification-warning::before,
87
+ .iui-button.iui-default:focus .iui-notification-negative::before{
88
+ border-color:#f2f2f2;
89
+ border-color:var(--iui-color-background-1-overlay); }
90
+ .iui-button.iui-default:focus:not(:focus-visible){
91
+ background-color:#FFF;
92
+ border-color:rgba(0, 0, 0, 0.4);
93
+ color:rgba(0, 0, 0, 0.8);
94
+ background-color:var(--iui-color-background-1);
95
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
96
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
97
+ .iui-button.iui-default.iui-dropdown{
98
+ padding-right:8px; }
99
+ .iui-button.iui-default.iui-dropdown.iui-small{
100
+ padding-right:4px; }
101
+ .iui-button.iui-default.iui-dropdown.iui-large{
102
+ padding-right:12px; }
103
+ .iui-button.iui-default.iui-active{
104
+ background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
114
105
  color:#008BE1;
106
+ 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));
115
107
  color:var(--iui-color-foreground-primary); }
116
- .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled > .iui-icon, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover > .iui-icon, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active > .iui-icon{
117
- fill:#008BE1;
118
- fill:var(--iui-icons-color-primary); }
108
+ .iui-button.iui-default[disabled], .iui-button.iui-default:disabled{
109
+ cursor:not-allowed;
110
+ background:#EEF0F3;
111
+ border-color:#EEF0F3;
112
+ color:rgba(0, 0, 0, 0.2);
113
+ background:var(--iui-color-background-disabled);
114
+ border-color:var(--iui-color-background-disabled);
115
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
119
116
  .iui-button.iui-high-visibility{
120
117
  background-color:#008BE1;
121
118
  border-color:#008BE1;
@@ -123,19 +120,28 @@
123
120
  background-color:var(--iui-color-background-primary);
124
121
  border-color:var(--iui-color-background-primary);
125
122
  color:var(--iui-color-foreground-accessory); }
126
- .iui-button.iui-high-visibility > .iui-icon{
127
- fill:#FFF;
128
- fill:var(--iui-color-foreground-accessory); }
129
- .iui-button.iui-high-visibility:enabled:hover, .iui-button.iui-high-visibility:enabled:active, .iui-button.iui-high-visibility:focus-visible{
123
+ .iui-button.iui-high-visibility:hover, .iui-button.iui-high-visibility:active, .iui-button.iui-high-visibility:focus{
130
124
  background-color:#006bae;
131
125
  border-color:#006bae;
132
126
  color:#FFF;
133
127
  background-color:var(--iui-color-background-primary-overlay);
134
128
  border-color:var(--iui-color-background-primary-overlay);
135
129
  color:var(--iui-color-foreground-accessory); }
136
- .iui-button.iui-high-visibility:enabled:hover > .iui-icon, .iui-button.iui-high-visibility:enabled:active > .iui-icon, .iui-button.iui-high-visibility:focus-visible > .iui-icon{
137
- fill:#FFF;
138
- fill:var(--iui-color-foreground-accessory); }
130
+ .iui-button.iui-high-visibility:focus:not(:focus-visible){
131
+ background-color:#008BE1;
132
+ border-color:#008BE1;
133
+ color:#FFF;
134
+ background-color:var(--iui-color-background-primary);
135
+ border-color:var(--iui-color-background-primary);
136
+ color:var(--iui-color-foreground-accessory); }
137
+ .iui-button.iui-high-visibility[disabled], .iui-button.iui-high-visibility:disabled{
138
+ cursor:not-allowed;
139
+ background:#EEF0F3;
140
+ border-color:#EEF0F3;
141
+ color:rgba(0, 0, 0, 0.2);
142
+ background:var(--iui-color-background-disabled);
143
+ border-color:var(--iui-color-background-disabled);
144
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
139
145
  .iui-button.iui-cta{
140
146
  background-color:#53A21A;
141
147
  border-color:#53A21A;
@@ -143,19 +149,28 @@
143
149
  background-color:var(--iui-color-background-positive);
144
150
  border-color:var(--iui-color-background-positive);
145
151
  color:var(--iui-color-foreground-accessory); }
146
- .iui-button.iui-cta > .iui-icon{
147
- fill:#FFF;
148
- fill:var(--iui-color-foreground-accessory); }
149
- .iui-button.iui-cta:enabled:hover, .iui-button.iui-cta:enabled:active, .iui-button.iui-cta:focus-visible{
152
+ .iui-button.iui-cta:hover, .iui-button.iui-cta:active, .iui-button.iui-cta:focus{
150
153
  background-color:#3c7613;
151
154
  border-color:#3c7613;
152
155
  color:#FFF;
153
156
  background-color:var(--iui-color-background-positive-overlay);
154
157
  border-color:var(--iui-color-background-positive-overlay);
155
158
  color:var(--iui-color-foreground-accessory); }
156
- .iui-button.iui-cta:enabled:hover > .iui-icon, .iui-button.iui-cta:enabled:active > .iui-icon, .iui-button.iui-cta:focus-visible > .iui-icon{
157
- fill:#FFF;
158
- fill:var(--iui-color-foreground-accessory); }
159
+ .iui-button.iui-cta:focus:not(:focus-visible){
160
+ background-color:#53A21A;
161
+ border-color:#53A21A;
162
+ color:#FFF;
163
+ background-color:var(--iui-color-background-positive);
164
+ border-color:var(--iui-color-background-positive);
165
+ color:var(--iui-color-foreground-accessory); }
166
+ .iui-button.iui-cta[disabled], .iui-button.iui-cta:disabled{
167
+ cursor:not-allowed;
168
+ background:#EEF0F3;
169
+ border-color:#EEF0F3;
170
+ color:rgba(0, 0, 0, 0.2);
171
+ background:var(--iui-color-background-disabled);
172
+ border-color:var(--iui-color-background-disabled);
173
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
159
174
  .iui-button.iui-idea{
160
175
  background-color:#008BE1;
161
176
  border-color:#008BE1;
@@ -168,61 +183,87 @@
168
183
  position:fixed;
169
184
  bottom:11px;
170
185
  right:16px; }
171
- .iui-button.iui-idea > .iui-icon{
172
- fill:#FFF;
173
- fill:var(--iui-color-foreground-accessory); }
174
- .iui-button.iui-idea:enabled:hover, .iui-button.iui-idea:enabled:active, .iui-button.iui-idea:focus-visible{
186
+ .iui-button.iui-idea:hover, .iui-button.iui-idea:active, .iui-button.iui-idea:focus{
175
187
  background-color:#006bae;
176
188
  border-color:#006bae;
177
189
  color:#FFF;
178
190
  background-color:var(--iui-color-background-primary-overlay);
179
191
  border-color:var(--iui-color-background-primary-overlay);
180
192
  color:var(--iui-color-foreground-accessory); }
181
- .iui-button.iui-idea:enabled:hover > .iui-icon, .iui-button.iui-idea:enabled:active > .iui-icon, .iui-button.iui-idea:focus-visible > .iui-icon{
182
- fill:#FFF;
183
- fill:var(--iui-color-foreground-accessory); }
193
+ .iui-button.iui-idea:focus:not(:focus-visible){
194
+ background-color:#008BE1;
195
+ border-color:#008BE1;
196
+ color:#FFF;
197
+ background-color:var(--iui-color-background-primary);
198
+ border-color:var(--iui-color-background-primary);
199
+ color:var(--iui-color-foreground-accessory); }
200
+ .iui-button.iui-idea[disabled], .iui-button.iui-idea:disabled{
201
+ cursor:not-allowed;
202
+ background:#EEF0F3;
203
+ border-color:#EEF0F3;
204
+ color:rgba(0, 0, 0, 0.2);
205
+ background:var(--iui-color-background-disabled);
206
+ border-color:var(--iui-color-background-disabled);
207
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
184
208
  .iui-button.iui-borderless{
185
- background-color:transparent;
186
209
  border-color:transparent;
187
- padding:0 8px; }
188
- .iui-button.iui-borderless.iui-small{
189
- padding:0 2px; }
190
- .iui-button.iui-borderless.iui-large{
191
- padding:0 12px; }
192
- .iui-button.iui-borderless > .iui-icon:only-child{
210
+ background-color:transparent;
211
+ padding:0 8px;
212
+ height:38px;
213
+ gap:8px; }
214
+ .iui-button.iui-borderless > .iui-button-icon:only-child{
193
215
  margin-left:3px;
194
216
  margin-right:3px; }
195
- .iui-button.iui-borderless:enabled:hover, .iui-button.iui-borderless:enabled:active, .iui-button.iui-borderless:focus-visible{
217
+ .iui-button.iui-borderless:hover, .iui-button.iui-borderless:focus{
196
218
  background-color:rgba(0, 0, 0, 0.1);
197
219
  border-color:transparent;
198
220
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
199
221
  border-color:transparent; }
200
- .iui-button.iui-borderless.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled, .iui-button.iui-borderless.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover, .iui-button.iui-borderless.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active{
201
- background:transparent;
222
+ .iui-button.iui-borderless:focus:not(:focus-visible){
223
+ border-color:transparent;
224
+ background-color:transparent; }
225
+ .iui-button.iui-borderless:focus:not(:focus-visible) > .iui-button-icon:only-child{
226
+ margin-left:3px;
227
+ margin-right:3px; }
228
+ .iui-button.iui-borderless.iui-active{
202
229
  background-color:rgba(0, 139, 225, 0.1);
230
+ color:#008BE1;
203
231
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
232
+ color:var(--iui-color-foreground-primary);
204
233
  border-color:transparent; }
205
- .iui-button.iui-borderless[disabled], .iui-button.iui-borderless[disabled]:hover, .iui-button.iui-borderless[disabled]:active, .iui-button.iui-borderless[disabled]:focus{
234
+ .iui-button.iui-borderless[disabled], .iui-button.iui-borderless:disabled{
235
+ cursor:not-allowed;
236
+ background:#EEF0F3;
237
+ border-color:#EEF0F3;
238
+ color:rgba(0, 0, 0, 0.2);
239
+ background:var(--iui-color-background-disabled);
240
+ border-color:var(--iui-color-background-disabled);
241
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
242
+ background-color:transparent;
243
+ border-color:transparent;
206
244
  background-color:transparent;
207
245
  border-color:transparent; }
208
- .iui-button.iui-borderless[disabled] > .iui-icon, .iui-button.iui-borderless[disabled]:hover > .iui-icon, .iui-button.iui-borderless[disabled]:active > .iui-icon, .iui-button.iui-borderless[disabled]:focus > .iui-icon{
209
- fill:rgba(0, 0, 0, 0.2);
210
- fill:var(--iui-icons-color-actionable-disabled); }
211
- .iui-button.iui-borderless[disabled].iui-active, .iui-button.iui-borderless[disabled]:hover.iui-active, .iui-button.iui-borderless[disabled]:active.iui-active, .iui-button.iui-borderless[disabled]:focus.iui-active{
246
+ .iui-button.iui-borderless[disabled].iui-active, .iui-button.iui-borderless:disabled.iui-active{
212
247
  background-color:rgba(0, 0, 0, 0.05);
213
248
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
214
- .iui-button[disabled]{
215
- cursor:not-allowed;
216
- background-color:#EEF0F3;
217
- border-color:#EEF0F3;
218
- background-color:var(--iui-color-background-disabled);
219
- border-color:var(--iui-color-background-disabled); }
220
- .iui-button[disabled] > .iui-label{
221
- color:rgba(0, 0, 0, 0.2);
222
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
223
- .iui-button[disabled] > .iui-icon{
224
- fill:rgba(0, 0, 0, 0.2);
225
- fill:var(--iui-icons-color-actionable-disabled); }
249
+ .iui-button.iui-small{
250
+ padding:0 8px;
251
+ height:27px;
252
+ gap:4px; }
253
+ .iui-button.iui-small.iui-borderless{
254
+ padding:0 2px;
255
+ height:27px;
256
+ gap:4px; }
257
+ .iui-button.iui-large{
258
+ padding:0 24px;
259
+ height:49px;
260
+ font-size:16px;
261
+ gap:12px; }
262
+ .iui-button.iui-large.iui-borderless{
263
+ padding:0 12px;
264
+ height:49px;
265
+ font-size:16px;
266
+ gap:12px; }
226
267
 
227
268
  .iui-button-group{
228
269
  display:inline-flex;
@@ -235,17 +276,17 @@
235
276
  .iui-button-group > .iui-button:last-of-type:not(.iui-borderless){
236
277
  border-top-right-radius:3px;
237
278
  border-bottom-right-radius:3px; }
238
- .iui-button-group > .iui-button:not(.iui-borderless):not(.iui-cta):not(.iui-high-visibility):not(:last-of-type){
279
+ .iui-button-group > .iui-button.iui-default:not(:last-of-type){
239
280
  border-right:none; }
240
- .iui-button-group > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled + :disabled{
281
+ .iui-button-group > .iui-button.iui-default:not(:disabled) + :disabled{
241
282
  border-left-color:rgba(0, 0, 0, 0.4);
242
283
  border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
243
- .iui-button-group > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:hover + .iui-button,
244
- .iui-button-group > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:active + .iui-button,
245
- .iui-button-group > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:focus-visible + .iui-button{
284
+ .iui-button-group > .iui-button.iui-default:not(:disabled):hover + .iui-button,
285
+ .iui-button-group > .iui-button.iui-default:not(:disabled):active + .iui-button,
286
+ .iui-button-group > .iui-button.iui-default:not(:disabled):focus-visible + .iui-button{
246
287
  border-left-color:black;
247
288
  border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
248
- .iui-button-group > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):disabled + .iui-button:disabled{
289
+ .iui-button-group > .iui-button.iui-default:disabled + .iui-button:disabled{
249
290
  border-left-color:#DCE0E3;
250
291
  border-left-color:var(--iui-color-background-4); }
251
292
  .iui-button-group > .iui-active::after{
@@ -275,17 +316,17 @@
275
316
  .iui-button-split-menu > .iui-button:last-of-type:not(.iui-borderless){
276
317
  border-top-right-radius:3px;
277
318
  border-bottom-right-radius:3px; }
278
- .iui-button-split-menu > .iui-button:not(.iui-borderless):not(.iui-cta):not(.iui-high-visibility):not(:last-of-type){
319
+ .iui-button-split-menu > .iui-button.iui-default:not(:last-of-type){
279
320
  border-right:none; }
280
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled + :disabled{
321
+ .iui-button-split-menu > .iui-button.iui-default:not(:disabled) + :disabled{
281
322
  border-left-color:rgba(0, 0, 0, 0.4);
282
323
  border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
283
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:hover + .iui-button,
284
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:active + .iui-button,
285
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:focus-visible + .iui-button{
324
+ .iui-button-split-menu > .iui-button.iui-default:not(:disabled):hover + .iui-button,
325
+ .iui-button-split-menu > .iui-button.iui-default:not(:disabled):active + .iui-button,
326
+ .iui-button-split-menu > .iui-button.iui-default:not(:disabled):focus-visible + .iui-button{
286
327
  border-left-color:black;
287
328
  border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
288
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):disabled + .iui-button:disabled{
329
+ .iui-button-split-menu > .iui-button.iui-default:disabled + .iui-button:disabled{
289
330
  border-left-color:#DCE0E3;
290
331
  border-left-color:var(--iui-color-background-4); }
291
332
  .iui-button-split-menu > .iui-active::after{
@@ -309,17 +350,17 @@
309
350
  .iui-button-split-menu > .iui-button:last-of-type:not(.iui-borderless){
310
351
  border-top-right-radius:3px;
311
352
  border-bottom-right-radius:3px; }
312
- .iui-button-split-menu > .iui-button:not(.iui-borderless):not(.iui-cta):not(.iui-high-visibility):not(:last-of-type){
353
+ .iui-button-split-menu > .iui-button.iui-default:not(:last-of-type){
313
354
  border-right:none; }
314
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled + :disabled{
355
+ .iui-button-split-menu > .iui-button.iui-default:not(:disabled) + :disabled{
315
356
  border-left-color:rgba(0, 0, 0, 0.4);
316
357
  border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
317
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:hover + .iui-button,
318
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:active + .iui-button,
319
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:focus-visible + .iui-button{
358
+ .iui-button-split-menu > .iui-button.iui-default:not(:disabled):hover + .iui-button,
359
+ .iui-button-split-menu > .iui-button.iui-default:not(:disabled):active + .iui-button,
360
+ .iui-button-split-menu > .iui-button.iui-default:not(:disabled):focus-visible + .iui-button{
320
361
  border-left-color:black;
321
362
  border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
322
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):disabled + .iui-button:disabled{
363
+ .iui-button-split-menu > .iui-button.iui-default:disabled + .iui-button:disabled{
323
364
  border-left-color:#DCE0E3;
324
365
  border-left-color:var(--iui-color-background-4); }
325
366
  .iui-button-split-menu > .iui-active::after{
@@ -355,3 +396,17 @@
355
396
  .iui-button-split-menu.iui-disabled{
356
397
  background-color:transparent;
357
398
  background-color:transparent; }
399
+ .iui-button-split-menu[disabled], .iui-button-split-menu:disabled{
400
+ cursor:not-allowed;
401
+ background:#EEF0F3;
402
+ border-color:#EEF0F3;
403
+ color:rgba(0, 0, 0, 0.2);
404
+ background:var(--iui-color-background-disabled);
405
+ border-color:var(--iui-color-background-disabled);
406
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
407
+
408
+ .iui-button-icon{
409
+ width:16px;
410
+ height:16px;
411
+ transition:fill 0.2s ease-out;
412
+ fill:currentColor; }
package/css/code.css CHANGED
@@ -39,6 +39,8 @@
39
39
  user-select:all; }
40
40
  .iui-codeblock > .iui-title-bar > .iui-button{
41
41
  margin-left:auto; }
42
+ .iui-codeblock .iui-button{
43
+ gap:0; }
42
44
  .iui-codeblock > .iui-codeblock-content{
43
45
  margin:0;
44
46
  overflow-x:auto;
package/css/color-picker.css CHANGED
@@ -9,7 +9,9 @@
9
9
  vertical-align:baseline;
10
10
  box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
11
11
  background-color:#FFF;
12
+ color:rgba(0, 0, 0, 0.8);
12
13
  background-color:var(--iui-color-background-1);
14
+ color:var(--iui-text-color);
13
15
  box-sizing:border-box;
14
16
  border-radius:3px;
15
17
  display:inline-flex;
package/css/date-picker.css CHANGED
@@ -9,7 +9,9 @@
9
9
  vertical-align:baseline;
10
10
  box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
11
11
  background-color:#FFF;
12
+ color:rgba(0, 0, 0, 0.8);
12
13
  background-color:var(--iui-color-background-1);
14
+ color:var(--iui-text-color);
13
15
  box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
14
16
  -webkit-user-select:none;
15
17
  -moz-user-select:none;