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