@itwin/itwinui-css 1.0.0-dev.0 → 1.0.0-dev.3

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 (245) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/css/alert.css +81 -92
  3. package/css/all.css +2079 -2678
  4. package/css/anchor.css +3 -3
  5. package/css/avatar.css +46 -46
  6. package/css/backdrop.css +6 -4
  7. package/css/badge.css +8 -8
  8. package/css/blockquote.css +6 -6
  9. package/css/breadcrumbs.css +63 -52
  10. package/css/button.css +113 -135
  11. package/css/carousel.css +17 -15
  12. package/css/checkbox.css +24 -21
  13. package/css/code.css +15 -14
  14. package/css/color-picker.css +41 -44
  15. package/css/date-picker.css +59 -88
  16. package/css/dialog.css +28 -26
  17. package/css/expandable-block.css +36 -57
  18. package/css/fieldset.css +7 -7
  19. package/css/file-upload.css +20 -28
  20. package/css/footer.css +35 -35
  21. package/css/global.css +50 -617
  22. package/css/header.css +58 -51
  23. package/css/information-panel.css +38 -32
  24. package/css/input.css +64 -56
  25. package/css/keyboard.css +6 -10
  26. package/css/location-marker.css +32 -18
  27. package/css/menu.css +41 -27
  28. package/css/non-ideal-state.css +12 -12
  29. package/css/progress-indicator.css +37 -35
  30. package/css/radio-tile.css +39 -38
  31. package/css/radio.css +24 -21
  32. package/css/select.css +89 -80
  33. package/css/side-navigation.css +34 -38
  34. package/css/skip-to-content.css +11 -11
  35. package/css/slider.css +155 -55
  36. package/css/stepper.css +17 -17
  37. package/css/surface.css +2 -2
  38. package/css/table.css +152 -134
  39. package/css/tabs.css +61 -47
  40. package/css/tag.css +24 -25
  41. package/css/text.css +24 -24
  42. package/css/tile.css +145 -154
  43. package/css/time-picker.css +16 -14
  44. package/css/toast.css +49 -47
  45. package/css/toggle-switch.css +26 -26
  46. package/css/tooltip.css +6 -10
  47. package/css/tree.css +30 -35
  48. package/css/utils.css +228 -154
  49. package/css/workflow-diagram.css +8 -8
  50. package/package.json +8 -11
  51. package/css/icon.css +0 -117
  52. package/css/textarea.css +0 -96
  53. package/scss/alert/alert.scss +0 -89
  54. package/scss/alert/classes.scss +0 -33
  55. package/scss/alert/index.scss +0 -3
  56. package/scss/anchor/anchor.scss +0 -78
  57. package/scss/anchor/classes.scss +0 -11
  58. package/scss/anchor/index.scss +0 -3
  59. package/scss/avatar/avatar-sizes.scss +0 -23
  60. package/scss/avatar/avatar.scss +0 -215
  61. package/scss/avatar/classes.scss +0 -27
  62. package/scss/avatar/index.scss +0 -3
  63. package/scss/backdrop/backdrop.scss +0 -27
  64. package/scss/backdrop/classes.scss +0 -7
  65. package/scss/backdrop/index.scss +0 -3
  66. package/scss/badge/badge.scss +0 -34
  67. package/scss/badge/classes.scss +0 -7
  68. package/scss/badge/index.scss +0 -3
  69. package/scss/blockquote/blockquote.scss +0 -26
  70. package/scss/blockquote/classes.scss +0 -7
  71. package/scss/blockquote/index.scss +0 -3
  72. package/scss/breadcrumbs/breadcrumbs.scss +0 -119
  73. package/scss/breadcrumbs/classes.scss +0 -31
  74. package/scss/breadcrumbs/index.scss +0 -3
  75. package/scss/button/borderless.scss +0 -36
  76. package/scss/button/button-group.scss +0 -118
  77. package/scss/button/button.scss +0 -119
  78. package/scss/button/classes.scss +0 -80
  79. package/scss/button/default.scss +0 -51
  80. package/scss/button/idea.scss +0 -12
  81. package/scss/button/index.scss +0 -9
  82. package/scss/button/split-button.scss +0 -45
  83. package/scss/button/variant.scss +0 -44
  84. package/scss/carousel/carousel.scss +0 -113
  85. package/scss/carousel/classes.scss +0 -15
  86. package/scss/carousel/index.scss +0 -3
  87. package/scss/checkbox/checkbox.scss +0 -154
  88. package/scss/checkbox/classes.scss +0 -7
  89. package/scss/checkbox/index.scss +0 -3
  90. package/scss/classes.scss +0 -52
  91. package/scss/code/classes.scss +0 -11
  92. package/scss/code/code.scss +0 -16
  93. package/scss/code/codeblock.scss +0 -59
  94. package/scss/code/index.scss +0 -4
  95. package/scss/color-picker/classes.scss +0 -43
  96. package/scss/color-picker/color-picker.scss +0 -241
  97. package/scss/color-picker/index.scss +0 -3
  98. package/scss/date-picker/classes.scss +0 -47
  99. package/scss/date-picker/date-picker.scss +0 -246
  100. package/scss/date-picker/index.scss +0 -3
  101. package/scss/dialog/classes.scss +0 -48
  102. package/scss/dialog/dialog.scss +0 -178
  103. package/scss/dialog/index.scss +0 -3
  104. package/scss/expandable-block/block.scss +0 -165
  105. package/scss/expandable-block/classes.scss +0 -7
  106. package/scss/expandable-block/index.scss +0 -3
  107. package/scss/fieldset/classes.scss +0 -7
  108. package/scss/fieldset/fieldset.scss +0 -29
  109. package/scss/fieldset/index.scss +0 -3
  110. package/scss/file-upload/classes.scss +0 -7
  111. package/scss/file-upload/file-upload.scss +0 -80
  112. package/scss/file-upload/index.scss +0 -3
  113. package/scss/footer/classes.scss +0 -7
  114. package/scss/footer/footer.scss +0 -55
  115. package/scss/footer/index.scss +0 -3
  116. package/scss/header/classes.scss +0 -79
  117. package/scss/header/header-buttons.scss +0 -316
  118. package/scss/header/header.scss +0 -75
  119. package/scss/header/index.scss +0 -4
  120. package/scss/icon/classes.scss +0 -27
  121. package/scss/icon/icon.scss +0 -65
  122. package/scss/icon/index.scss +0 -3
  123. package/scss/index.scss +0 -50
  124. package/scss/information-panel/classes.scss +0 -27
  125. package/scss/information-panel/index.scss +0 -3
  126. package/scss/information-panel/information-panel.scss +0 -215
  127. package/scss/input/classes.scss +0 -15
  128. package/scss/input/index.scss +0 -4
  129. package/scss/input/input-with-icon.scss +0 -37
  130. package/scss/input/input.scss +0 -70
  131. package/scss/keyboard/classes.scss +0 -7
  132. package/scss/keyboard/index.scss +0 -3
  133. package/scss/keyboard/keyboard.scss +0 -29
  134. package/scss/location-marker/classes.scss +0 -15
  135. package/scss/location-marker/data-rich.scss +0 -49
  136. package/scss/location-marker/default.scss +0 -19
  137. package/scss/location-marker/index.scss +0 -6
  138. package/scss/location-marker/location-marker.scss +0 -11
  139. package/scss/location-marker/me.scss +0 -29
  140. package/scss/menu/classes.scss +0 -21
  141. package/scss/menu/index.scss +0 -3
  142. package/scss/menu/menu.scss +0 -185
  143. package/scss/non-ideal-state/classes.scss +0 -7
  144. package/scss/non-ideal-state/index.scss +0 -3
  145. package/scss/non-ideal-state/non-ideal-state.scss +0 -56
  146. package/scss/progress-indicator/classes.scss +0 -31
  147. package/scss/progress-indicator/index.scss +0 -5
  148. package/scss/progress-indicator/linear.scss +0 -108
  149. package/scss/progress-indicator/overlay.scss +0 -51
  150. package/scss/progress-indicator/radial.scss +0 -155
  151. package/scss/radio/classes.scss +0 -7
  152. package/scss/radio/index.scss +0 -3
  153. package/scss/radio/radio.scss +0 -18
  154. package/scss/radio-tile/classes.scss +0 -31
  155. package/scss/radio-tile/index.scss +0 -3
  156. package/scss/radio-tile/radio-tile.scss +0 -167
  157. package/scss/select/classes.scss +0 -27
  158. package/scss/select/index.scss +0 -3
  159. package/scss/select/select.scss +0 -124
  160. package/scss/side-navigation/classes.scss +0 -15
  161. package/scss/side-navigation/index.scss +0 -3
  162. package/scss/side-navigation/side-navigation.scss +0 -202
  163. package/scss/skip-to-content/classes.scss +0 -7
  164. package/scss/skip-to-content/index.scss +0 -3
  165. package/scss/skip-to-content/skip-to-content.scss +0 -40
  166. package/scss/slider/classes.scss +0 -27
  167. package/scss/slider/index.scss +0 -3
  168. package/scss/slider/slider.scss +0 -135
  169. package/scss/stepper/classes.scss +0 -32
  170. package/scss/stepper/index.scss +0 -3
  171. package/scss/stepper/stepper.scss +0 -151
  172. package/scss/style/baseline.scss +0 -4
  173. package/scss/style/color.scss +0 -39
  174. package/scss/style/elevation.scss +0 -11
  175. package/scss/style/global-variables.scss +0 -23
  176. package/scss/style/global.scss +0 -69
  177. package/scss/style/icon-sizes.scss +0 -14
  178. package/scss/style/index.scss +0 -11
  179. package/scss/style/space.scss +0 -11
  180. package/scss/style/speed.scss +0 -8
  181. package/scss/style/theme.scss +0 -443
  182. package/scss/style/typography.scss +0 -55
  183. package/scss/surface/classes.scss +0 -7
  184. package/scss/surface/index.scss +0 -3
  185. package/scss/surface/surface.scss +0 -17
  186. package/scss/table/classes.scss +0 -64
  187. package/scss/table/column-filter.scss +0 -34
  188. package/scss/table/index.scss +0 -6
  189. package/scss/table/paginator.scss +0 -79
  190. package/scss/table/sizes.scss +0 -31
  191. package/scss/table/table-densities.scss +0 -11
  192. package/scss/table/table.scss +0 -482
  193. package/scss/tabs/borderless.scss +0 -59
  194. package/scss/tabs/classes.scss +0 -44
  195. package/scss/tabs/default.scss +0 -89
  196. package/scss/tabs/index.scss +0 -6
  197. package/scss/tabs/pill.scss +0 -38
  198. package/scss/tabs/tabs.scss +0 -192
  199. package/scss/tag/classes.scss +0 -30
  200. package/scss/tag/index.scss +0 -3
  201. package/scss/tag/tag.scss +0 -89
  202. package/scss/text/classes.scss +0 -40
  203. package/scss/text/index.scss +0 -5
  204. package/scss/text/mixins.scss +0 -43
  205. package/scss/text/muted.scss +0 -7
  206. package/scss/text/skeleton.scss +0 -43
  207. package/scss/textarea/classes.scss +0 -7
  208. package/scss/textarea/index.scss +0 -3
  209. package/scss/textarea/textarea.scss +0 -15
  210. package/scss/tile/classes.scss +0 -51
  211. package/scss/tile/index.scss +0 -3
  212. package/scss/tile/tile.scss +0 -340
  213. package/scss/time-picker/classes.scss +0 -16
  214. package/scss/time-picker/index.scss +0 -3
  215. package/scss/time-picker/time-picker.scss +0 -63
  216. package/scss/toast/categories.scss +0 -22
  217. package/scss/toast/classes.scss +0 -98
  218. package/scss/toast/index.scss +0 -4
  219. package/scss/toast/toast.scss +0 -70
  220. package/scss/toggle-switch/classes.scss +0 -11
  221. package/scss/toggle-switch/index.scss +0 -3
  222. package/scss/toggle-switch/toggle-switch.scss +0 -203
  223. package/scss/tooltip/classes.scss +0 -24
  224. package/scss/tooltip/index.scss +0 -3
  225. package/scss/tooltip/tooltip.scss +0 -40
  226. package/scss/tree/classes.scss +0 -19
  227. package/scss/tree/index.scss +0 -3
  228. package/scss/tree/tree.scss +0 -126
  229. package/scss/utils/classes.scss +0 -6
  230. package/scss/utils/index.scss +0 -6
  231. package/scss/utils/input-container/classes.scss +0 -39
  232. package/scss/utils/input-container/index.scss +0 -3
  233. package/scss/utils/input-container/input-container.scss +0 -285
  234. package/scss/utils/mixins.scss +0 -171
  235. package/scss/utils/notification-marker/classes.scss +0 -9
  236. package/scss/utils/notification-marker/index.scss +0 -3
  237. package/scss/utils/notification-marker/notification-marker.scss +0 -55
  238. package/scss/utils/popover/classes.scss +0 -7
  239. package/scss/utils/popover/index.scss +0 -3
  240. package/scss/utils/popover/popover.scss +0 -21
  241. package/scss/variables.scss +0 -3
  242. package/scss/workflow-diagram/classes.scss +0 -15
  243. package/scss/workflow-diagram/index.scss +0 -3
  244. package/scss/workflow-diagram/workflow-diagram.scss +0 -64
  245. package/src/index.scss +0 -50
package/css/code.css CHANGED
@@ -8,15 +8,15 @@
8
8
  border:none;
9
9
  vertical-align:baseline;
10
10
  display:inline-block;
11
- font-family:"Noto Sans Mono", ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
12
- font-size:12px;
13
- padding:0 4px;
14
- border-radius:4px;
11
+ font-family:var(--iui-font-mono);
12
+ font-size:var(--iui-font-size-0);
13
+ padding:0 var(--iui-size-2xs);
14
+ border-radius:var(--iui-border-radius-1);
15
15
  -webkit-user-select:all;
16
16
  -moz-user-select:all;
17
17
  user-select:all;
18
18
  background-color:var(--iui-color-background-3);
19
- color:var(--iui-text-color);
19
+ color:var(--iui-color-foreground-2);
20
20
  }
21
21
 
22
22
  .iui-codeblock{
@@ -24,16 +24,16 @@
24
24
  padding:0;
25
25
  border:none;
26
26
  vertical-align:baseline;
27
- margin:6px 0;
27
+ margin:calc(var(--iui-size-s) * 0.5) 0;
28
28
  }
29
29
  .iui-codeblock > .iui-title-bar{
30
30
  display:flex;
31
31
  align-items:center;
32
- border-radius:4px 4px 0 0;
32
+ border-radius:var(--iui-border-radius-1) var(--iui-border-radius-1) 0 0;
33
33
  background-color:var(--iui-color-background-3);
34
34
  }
35
35
  .iui-codeblock > .iui-title-bar > .iui-title{
36
- margin-left:12px;
36
+ margin-left:var(--iui-size-s);
37
37
  -webkit-user-select:all;
38
38
  -moz-user-select:all;
39
39
  user-select:all;
@@ -43,9 +43,10 @@
43
43
  }
44
44
  .iui-codeblock > .iui-codeblock-content{
45
45
  margin:0;
46
+ display:grid;
46
47
  overflow-x:auto;
47
48
  overflow-y:auto;
48
- border-radius:0 0 4px 4px;
49
+ border-radius:0 0 var(--iui-border-radius-1) var(--iui-border-radius-1);
49
50
  white-space:normal;
50
51
  border:1px solid var(--iui-color-background-3);
51
52
  }
@@ -67,18 +68,18 @@
67
68
  -ms-hyphens:auto;
68
69
  hyphens:auto;
69
70
  counter-increment:section;
70
- font-family:"Noto Sans Mono", ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
71
+ font-family:var(--iui-font-mono);
71
72
  background-color:var(--iui-color-background-1);
72
73
  }
73
74
  .iui-codeblock > .iui-codeblock-content > code:nth-child(even){
74
- background:rgba(var(--iui-color-foreground-body-rgb), 0.02);
75
+ background-color:hsl(var(--iui-color-foreground-1-hsl)/0.02);
75
76
  }
76
77
  .iui-codeblock > .iui-codeblock-content > code::before{
77
78
  content:counter(section);
78
79
  text-align:right;
79
80
  display:inline-block;
80
- padding:0 8px;
81
- width:24px;
81
+ padding:0 var(--iui-size-xs);
82
+ width:calc(var(--iui-size-l) + 2 * var(--iui-size-xs));
82
83
  background-color:var(--iui-color-background-2);
83
- color:var(--iui-text-color-muted);
84
+ color:var(--iui-color-foreground-4);
84
85
  }
package/css/color-picker.css CHANGED
@@ -6,22 +6,22 @@
6
6
  --iui-color-picker-selected-color:initial;
7
7
  --iui-surface-background-color:var(--iui-color-background-1);
8
8
  --iui-surface-border-radius:0;
9
- --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
9
+ --iui-surface-elevation:var(--iui-shadow-1);
10
10
  background-color:var(--iui-surface-background-color);
11
11
  border-radius:var(--iui-surface-border-radius);
12
12
  box-shadow:var(--iui-surface-elevation);
13
- color:var(--iui-text-color);
14
- border-radius:4px;
13
+ color:var(--iui-color-foreground-2);
14
+ border-radius:var(--iui-border-radius-1);
15
15
  display:inline-flex;
16
- padding:11px 12px;
16
+ padding:var(--iui-size-s) var(--iui-size-s);
17
17
  -webkit-user-select:none;
18
18
  -moz-user-select:none;
19
19
  -ms-user-select:none;
20
20
  user-select:none;
21
21
  overflow-y:auto;
22
22
  flex-direction:column;
23
- max-height:495px;
24
- row-gap:11px;
23
+ max-height:calc(var(--iui-size-s) * 45);
24
+ row-gap:var(--iui-size-s);
25
25
  }
26
26
  @media (forced-colors: active){
27
27
  .iui-color-picker{
@@ -38,19 +38,16 @@
38
38
  display:flex;
39
39
  flex-wrap:wrap;
40
40
  align-content:flex-start;
41
- min-height:24px;
42
- min-width:24px;
43
- gap:8px;
44
- }
45
- .iui-color-palette button[data-iui-variant=borderless]{
46
- --_iui-button-height:24px;
47
- --_iui-button-padding-inline:0;
41
+ align-items:center;
42
+ min-height:var(--iui-size-l);
43
+ min-width:var(--iui-size-l);
44
+ gap:var(--iui-size-xs);
48
45
  }
49
46
  .iui-color-palette-wrapper{
50
- max-width:280px;
47
+ max-width:calc(var(--iui-size-l) * 9 + var(--iui-size-xs) * 8);
51
48
  }
52
49
  .iui-color-palette-wrapper:only-child{
53
- max-width:312px;
50
+ max-width:calc(var(--iui-size-l) * 10 + var(--iui-size-xs) * 9);
54
51
  }
55
52
 
56
53
  .iui-color-input{
@@ -58,15 +55,15 @@
58
55
  align-items:center;
59
56
  }
60
57
  .iui-color-input-wrapper{
61
- max-width:280px;
58
+ max-width:calc(var(--iui-size-l) * 9 + var(--iui-size-xs) * 8);
62
59
  }
63
60
  .iui-color-input .iui-button{
64
- margin-right:4px;
61
+ margin-right:var(--iui-size-2xs);
65
62
  }
66
63
  .iui-color-input-fields{
67
64
  display:flex;
68
65
  width:100%;
69
- gap:2px;
66
+ gap:var(--iui-size-3xs);
70
67
  }
71
68
  .iui-color-input-fields > *{
72
69
  flex-grow:1;
@@ -87,15 +84,15 @@
87
84
 
88
85
  .iui-color-swatch{
89
86
  --iui-color-swatch-background:initial;
90
- height:24px;
91
- width:24px;
87
+ height:var(--iui-size-l);
88
+ width:var(--iui-size-l);
92
89
  cursor:pointer;
93
90
  border-radius:5px;
94
91
  position:relative;
95
92
  background-color:var(--iui-color-swatch-background);
96
93
  forced-color-adjust:none;
97
- background-position:0 0, 8px 8px;
98
- background-size:16px 16px;
94
+ background-position:0 0, calc(var(--iui-size-m) * 0.5) calc(var(--iui-size-m) * 0.5);
95
+ background-size:var(--iui-size-m) var(--iui-size-m);
99
96
  background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
100
97
  }
101
98
  .iui-color-swatch::after{
@@ -107,10 +104,10 @@
107
104
  height:inherit;
108
105
  border-radius:inherit;
109
106
  background-color:inherit;
110
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
107
+ box-shadow:inset 0 0 0 1px var(--iui-color-foreground-5);
111
108
  }
112
109
  .iui-color-swatch:hover{
113
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
110
+ box-shadow:0 0 0 var(--iui-size-3xs) var(--iui-color-foreground-4), inset 0 0 0 1px var(--iui-color-foreground-5);
114
111
  }
115
112
  .iui-color-swatch:focus-visible{
116
113
  outline:2px solid var(--iui-color-foreground-primary);
@@ -123,14 +120,14 @@
123
120
  }
124
121
  }
125
122
  .iui-color-swatch.iui-active{
126
- box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
123
+ box-shadow:0 0 0 var(--iui-size-3xs) var(--iui-color-foreground-primary), inset 0 0 0 1px var(--iui-color-foreground-5);
127
124
  }
128
125
  .iui-color-swatch.iui-active:hover{
129
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
126
+ box-shadow:0 0 0 var(--iui-size-3xs) var(--iui-color-foreground-4), inset 0 0 0 1px var(--iui-color-foreground-5), 0 0 0 var(--iui-size-3xs) var(--iui-color-foreground-primary);
130
127
  }
131
128
 
132
129
  .iui-color-picker-section-label{
133
- margin-bottom:5.5px;
130
+ margin-bottom:calc(var(--iui-size-s) * 0.5);
134
131
  overflow:hidden;
135
132
  text-overflow:ellipsis;
136
133
  white-space:nowrap;
@@ -140,7 +137,7 @@
140
137
  .iui-color-selection-wrapper{
141
138
  display:flex;
142
139
  flex-direction:column;
143
- min-width:280px;
140
+ min-width:calc(var(--iui-size-l) * 9 + var(--iui-size-xs) * 8);
144
141
  }
145
142
 
146
143
  .iui-color-field{
@@ -148,38 +145,38 @@
148
145
  position:relative;
149
146
  cursor:crosshair;
150
147
  width:100%;
151
- height:209px;
148
+ height:calc(var(--iui-size-s) * 18);
152
149
  forced-color-adjust:none;
153
150
  background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue));
154
151
  }
155
152
  .iui-color-field:not(:last-child){
156
- margin-bottom:6px;
153
+ margin-bottom:calc(var(--iui-size-s) * 0.5);
157
154
  }
158
155
 
159
- .iui-hue-slider .iui-slider-rail{
160
- height:8px;
156
+ .iui-hue-slider .iui-slider-container .iui-slider-rail{
157
+ height:var(--iui-size-xs);
161
158
  forced-color-adjust:none;
162
159
  background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
163
160
  }
164
- .iui-hue-slider .iui-slider-thumb{
161
+ .iui-hue-slider .iui-slider-container .iui-slider-thumb{
165
162
  top:7px;
166
163
  }
167
164
 
168
- .iui-opacity-slider .iui-slider-rail{
169
- height:8px;
165
+ .iui-opacity-slider .iui-slider-container .iui-slider-rail{
166
+ height:var(--iui-size-xs);
170
167
  forced-color-adjust:none;
171
- background-position:0 0, 4px 4px;
172
- background-size:8px 8px;
168
+ background-position:0 0, calc(var(--iui-size-xs) * 0.5) calc(var(--iui-size-xs) * 0.5);
169
+ background-size:var(--iui-size-xs) var(--iui-size-xs);
173
170
  background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
174
171
  }
175
- .iui-opacity-slider .iui-slider-rail::before{
172
+ .iui-opacity-slider .iui-slider-container .iui-slider-rail::before{
176
173
  display:block;
177
174
  content:"";
178
175
  width:100%;
179
176
  height:100%;
180
177
  background-image:linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%);
181
178
  }
182
- .iui-opacity-slider .iui-slider-thumb{
179
+ .iui-opacity-slider .iui-slider-container .iui-slider-thumb{
183
180
  top:7px;
184
181
  }
185
182
 
@@ -187,16 +184,16 @@
187
184
  --iui-color-dot-inset:initial;
188
185
  position:absolute;
189
186
  inset:var(--iui-color-dot-inset);
190
- width:16px;
191
- height:16px;
187
+ width:var(--iui-size-m);
188
+ height:var(--iui-size-m);
192
189
  border-radius:50%;
193
- transform:translate(-8px, -8px);
190
+ transform:translate(calc(0px - var(--iui-size-xs)), calc(0px - var(--iui-size-xs)));
194
191
  cursor:crosshair;
195
- box-shadow:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)) 0 0 0 1px, inset 0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-6));
192
+ box-shadow:rgba(0, 0, 0, var(--iui-opacity-1)) 0 0 0 calc(var(--iui-size-3xs) - 1px), inset 0 0 0 calc(var(--iui-size-3xs) - 1px) rgba(0, 0, 0, var(--iui-opacity-6));
196
193
  background-color:var(--iui-color-picker-selected-color);
197
194
  }
198
195
  .iui-color-dot:hover{
199
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
196
+ box-shadow:0 0 0 var(--iui-size-3xs) var(--iui-color-foreground-4);
200
197
  }
201
198
  .iui-color-dot:focus-visible{
202
199
  outline:2px solid var(--iui-color-foreground-primary);
package/css/date-picker.css CHANGED
@@ -4,12 +4,12 @@
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-date-picker{
6
6
  --iui-surface-background-color:var(--iui-color-background-1);
7
- --iui-surface-border-radius:0;
8
- --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
7
+ --iui-surface-border-radius:var(--iui-border-radius-1);
8
+ --iui-surface-elevation:var(--iui-shadow-1);
9
9
  background-color:var(--iui-surface-background-color);
10
10
  border-radius:var(--iui-surface-border-radius);
11
11
  box-shadow:var(--iui-surface-elevation);
12
- color:var(--iui-text-color);
12
+ color:var(--iui-color-foreground-2);
13
13
  -webkit-user-select:none;
14
14
  -moz-user-select:none;
15
15
  -ms-user-select:none;
@@ -32,9 +32,9 @@
32
32
  width:100%;
33
33
  align-items:center;
34
34
  justify-content:space-between;
35
- padding:0 4px;
36
- font-weight:700;
37
- gap:4px;
35
+ padding:0 var(--iui-size-2xs);
36
+ font-weight:var(--iui-font-weight-bold);
37
+ gap:var(--iui-size-2xs);
38
38
  }
39
39
  .iui-calendar-month-year > span{
40
40
  width:156px;
@@ -43,7 +43,7 @@
43
43
  flex-shrink:0;
44
44
  align-items:center;
45
45
  justify-content:center;
46
- line-height:44px;
46
+ line-height:calc(var(--iui-size-s) * 4);
47
47
  }
48
48
 
49
49
  .iui-calendar-month{
@@ -57,8 +57,8 @@
57
57
  .iui-calendar-weekdays{
58
58
  line-height:36px;
59
59
  display:flex;
60
- padding:0 8px;
61
- font-weight:700;
60
+ padding:0 var(--iui-size-xs);
61
+ font-weight:var(--iui-font-weight-bold);
62
62
  background-color:var(--iui-color-background-2);
63
63
  }
64
64
  .iui-calendar-weekdays > div{
@@ -72,8 +72,8 @@
72
72
  white-space:nowrap;
73
73
  line-height:36px;
74
74
  display:flex;
75
- padding:0 8px;
76
- margin-bottom:2px;
75
+ padding:0 var(--iui-size-xs);
76
+ margin-bottom:var(--iui-size-3xs);
77
77
  }
78
78
 
79
79
  .iui-calendar-day, .iui-calendar-day-today{
@@ -81,7 +81,7 @@
81
81
  text-align:center;
82
82
  width:40px;
83
83
  height:36px;
84
- border-radius:4px;
84
+ border-radius:var(--iui-border-radius-1);
85
85
  font-variant-numeric:tabular-nums;
86
86
  }
87
87
  .iui-calendar-day:focus-visible, .iui-calendar-day-today:focus-visible{
@@ -95,13 +95,12 @@
95
95
  }
96
96
  }
97
97
  .iui-calendar-day:hover, .iui-calendar-day-today:hover{
98
- font-weight:600;
99
- color:var(--iui-color-foreground-primary);
100
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
98
+ font-weight:var(--iui-font-weight-semibold);
99
+ background-color:var(--iui-color-background-transparent-hover);
101
100
  }
102
101
  .iui-calendar-day-today{
103
102
  position:relative;
104
- font-weight:600;
103
+ font-weight:var(--iui-font-weight-semibold);
105
104
  }
106
105
  .iui-calendar-day-today::before{
107
106
  content:"";
@@ -109,18 +108,14 @@
109
108
  display:block;
110
109
  width:32px;
111
110
  height:32px;
112
- border-radius:9999px;
111
+ border-radius:var(--iui-border-radius-round);
113
112
  top:50%;
114
113
  left:50%;
115
114
  transform:translate(-50%, -50%);
116
- border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
115
+ border:2px solid var(--iui-color-foreground-5);
117
116
  }
118
117
  .iui-calendar-day-today:hover{
119
- background-color:initial;
120
- color:var(--iui-color-foreground-primary);
121
- }
122
- .iui-calendar-day-today:hover::before{
123
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
118
+ background-color:var(--iui-color-background-transparent-hover);
124
119
  }
125
120
 
126
121
  .iui-calendar-day-selected, .iui-calendar-day-selected-today{
@@ -128,9 +123,9 @@
128
123
  text-align:center;
129
124
  width:40px;
130
125
  height:36px;
131
- border-radius:4px;
126
+ border-radius:var(--iui-border-radius-1);
132
127
  font-variant-numeric:tabular-nums;
133
- font-weight:600;
128
+ font-weight:var(--iui-font-weight-semibold);
134
129
  background-color:var(--iui-color-background-primary);
135
130
  color:var(--iui-color-foreground-accessory);
136
131
  cursor:default;
@@ -157,7 +152,7 @@
157
152
  }
158
153
  .iui-calendar-day-selected-today{
159
154
  position:relative;
160
- font-weight:600;
155
+ font-weight:var(--iui-font-weight-semibold);
161
156
  }
162
157
  .iui-calendar-day-selected-today::before{
163
158
  content:"";
@@ -165,18 +160,14 @@
165
160
  display:block;
166
161
  width:32px;
167
162
  height:32px;
168
- border-radius:9999px;
163
+ border-radius:var(--iui-border-radius-round);
169
164
  top:50%;
170
165
  left:50%;
171
166
  transform:translate(-50%, -50%);
172
- border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
167
+ border:2px solid var(--iui-color-foreground-5);
173
168
  }
174
169
  .iui-calendar-day-selected-today:hover{
175
- background-color:initial;
176
- color:var(--iui-color-foreground-primary);
177
- }
178
- .iui-calendar-day-selected-today:hover::before{
179
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
170
+ background-color:var(--iui-color-background-transparent-hover);
180
171
  }
181
172
  .iui-calendar-day-selected-today:hover{
182
173
  background-color:var(--iui-color-background-primary);
@@ -186,7 +177,7 @@
186
177
  background-color:initial;
187
178
  }
188
179
  .iui-calendar-day-selected-today::before{
189
- border-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
180
+ border-color:rgba(255, 255, 255, var(--iui-opacity-4));
190
181
  }
191
182
 
192
183
  .iui-calendar-day-outside-month, .iui-calendar-day-outside-month-today{
@@ -194,9 +185,9 @@
194
185
  text-align:center;
195
186
  width:40px;
196
187
  height:36px;
197
- border-radius:4px;
188
+ border-radius:var(--iui-border-radius-1);
198
189
  font-variant-numeric:tabular-nums;
199
- color:var(--iui-text-color-muted);
190
+ color:var(--iui-color-foreground-4);
200
191
  }
201
192
  .iui-calendar-day-outside-month:focus-visible, .iui-calendar-day-outside-month-today:focus-visible{
202
193
  outline:1px solid var(--iui-color-foreground-primary);
@@ -209,13 +200,12 @@
209
200
  }
210
201
  }
211
202
  .iui-calendar-day-outside-month:hover, .iui-calendar-day-outside-month-today:hover{
212
- font-weight:600;
213
- color:var(--iui-color-foreground-primary);
214
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
203
+ font-weight:var(--iui-font-weight-semibold);
204
+ background-color:var(--iui-color-background-transparent-hover);
215
205
  }
216
206
  .iui-calendar-day-outside-month-today{
217
207
  position:relative;
218
- font-weight:600;
208
+ font-weight:var(--iui-font-weight-semibold);
219
209
  }
220
210
  .iui-calendar-day-outside-month-today::before{
221
211
  content:"";
@@ -223,18 +213,14 @@
223
213
  display:block;
224
214
  width:32px;
225
215
  height:32px;
226
- border-radius:9999px;
216
+ border-radius:var(--iui-border-radius-round);
227
217
  top:50%;
228
218
  left:50%;
229
219
  transform:translate(-50%, -50%);
230
- border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
220
+ border:2px solid var(--iui-color-foreground-5);
231
221
  }
232
222
  .iui-calendar-day-outside-month-today:hover{
233
- background-color:initial;
234
- color:var(--iui-color-foreground-primary);
235
- }
236
- .iui-calendar-day-outside-month-today:hover::before{
237
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
223
+ background-color:var(--iui-color-background-transparent-hover);
238
224
  }
239
225
 
240
226
  .iui-calendar-day-range-start, .iui-calendar-day-range-start-today{
@@ -242,9 +228,9 @@
242
228
  text-align:center;
243
229
  width:40px;
244
230
  height:36px;
245
- border-radius:4px;
231
+ border-radius:var(--iui-border-radius-1);
246
232
  font-variant-numeric:tabular-nums;
247
- font-weight:600;
233
+ font-weight:var(--iui-font-weight-semibold);
248
234
  background-color:var(--iui-color-background-primary);
249
235
  color:var(--iui-color-foreground-accessory);
250
236
  border-top-right-radius:0;
@@ -273,7 +259,7 @@
273
259
  }
274
260
  .iui-calendar-day-range-start-today{
275
261
  position:relative;
276
- font-weight:600;
262
+ font-weight:var(--iui-font-weight-semibold);
277
263
  }
278
264
  .iui-calendar-day-range-start-today::before{
279
265
  content:"";
@@ -281,18 +267,14 @@
281
267
  display:block;
282
268
  width:32px;
283
269
  height:32px;
284
- border-radius:9999px;
270
+ border-radius:var(--iui-border-radius-round);
285
271
  top:50%;
286
272
  left:50%;
287
273
  transform:translate(-50%, -50%);
288
- border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
274
+ border:2px solid var(--iui-color-foreground-5);
289
275
  }
290
276
  .iui-calendar-day-range-start-today:hover{
291
- background-color:initial;
292
- color:var(--iui-color-foreground-primary);
293
- }
294
- .iui-calendar-day-range-start-today:hover::before{
295
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
277
+ background-color:var(--iui-color-background-transparent-hover);
296
278
  }
297
279
  .iui-calendar-day-range-start-today:hover{
298
280
  background-color:var(--iui-color-background-primary);
@@ -302,7 +284,7 @@
302
284
  background-color:initial;
303
285
  }
304
286
  .iui-calendar-day-range-start-today::before{
305
- border-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
287
+ border-color:rgba(255, 255, 255, var(--iui-opacity-4));
306
288
  }
307
289
 
308
290
  .iui-calendar-day-range-end, .iui-calendar-day-range-end-today{
@@ -310,9 +292,9 @@
310
292
  text-align:center;
311
293
  width:40px;
312
294
  height:36px;
313
- border-radius:4px;
295
+ border-radius:var(--iui-border-radius-1);
314
296
  font-variant-numeric:tabular-nums;
315
- font-weight:600;
297
+ font-weight:var(--iui-font-weight-semibold);
316
298
  background-color:var(--iui-color-background-primary);
317
299
  color:var(--iui-color-foreground-accessory);
318
300
  border-top-left-radius:0;
@@ -340,7 +322,7 @@
340
322
  }
341
323
  .iui-calendar-day-range-end-today{
342
324
  position:relative;
343
- font-weight:600;
325
+ font-weight:var(--iui-font-weight-semibold);
344
326
  }
345
327
  .iui-calendar-day-range-end-today::before{
346
328
  content:"";
@@ -348,18 +330,14 @@
348
330
  display:block;
349
331
  width:32px;
350
332
  height:32px;
351
- border-radius:9999px;
333
+ border-radius:var(--iui-border-radius-round);
352
334
  top:50%;
353
335
  left:50%;
354
336
  transform:translate(-50%, -50%);
355
- border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
337
+ border:2px solid var(--iui-color-foreground-5);
356
338
  }
357
339
  .iui-calendar-day-range-end-today:hover{
358
- background-color:initial;
359
- color:var(--iui-color-foreground-primary);
360
- }
361
- .iui-calendar-day-range-end-today:hover::before{
362
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
340
+ background-color:var(--iui-color-background-transparent-hover);
363
341
  }
364
342
  .iui-calendar-day-range-end-today:hover{
365
343
  background-color:var(--iui-color-background-primary);
@@ -369,7 +347,7 @@
369
347
  background-color:initial;
370
348
  }
371
349
  .iui-calendar-day-range-end-today::before{
372
- border-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
350
+ border-color:rgba(255, 255, 255, var(--iui-opacity-4));
373
351
  }
374
352
 
375
353
  .iui-calendar-day-range, .iui-calendar-day-range-today{
@@ -377,11 +355,11 @@
377
355
  text-align:center;
378
356
  width:40px;
379
357
  height:36px;
380
- border-radius:4px;
358
+ border-radius:var(--iui-border-radius-1);
381
359
  font-variant-numeric:tabular-nums;
382
360
  border-radius:0;
383
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
384
- color:var(--iui-text-color);
361
+ background-color:var(--iui-color-background-subtle-primary);
362
+ color:var(--iui-color-foreground-2);
385
363
  }
386
364
  .iui-calendar-day-range:focus-visible, .iui-calendar-day-range-today:focus-visible{
387
365
  outline:1px solid var(--iui-color-foreground-primary);
@@ -394,12 +372,12 @@
394
372
  }
395
373
  }
396
374
  .iui-calendar-day-range:hover, .iui-calendar-day-range-today:hover{
397
- font-weight:600;
398
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
375
+ font-weight:var(--iui-font-weight-semibold);
376
+ background-color:var(--iui-color-background-transparent-hover);
399
377
  }
400
378
  .iui-calendar-day-range-today{
401
379
  position:relative;
402
- font-weight:600;
380
+ font-weight:var(--iui-font-weight-semibold);
403
381
  }
404
382
  .iui-calendar-day-range-today::before{
405
383
  content:"";
@@ -407,26 +385,19 @@
407
385
  display:block;
408
386
  width:32px;
409
387
  height:32px;
410
- border-radius:9999px;
388
+ border-radius:var(--iui-border-radius-round);
411
389
  top:50%;
412
390
  left:50%;
413
391
  transform:translate(-50%, -50%);
414
- border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
392
+ border:2px solid var(--iui-color-foreground-5);
415
393
  }
416
394
  .iui-calendar-day-range-today:hover{
417
- background-color:initial;
418
- color:var(--iui-color-foreground-primary);
419
- }
420
- .iui-calendar-day-range-today:hover::before{
421
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
395
+ background-color:var(--iui-color-background-transparent-hover);
422
396
  }
423
397
  .iui-calendar-day-range-today:hover{
424
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
425
- color:var(--iui-text-color);
426
- }
427
- .iui-calendar-day-range-today:hover::before{
428
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
398
+ background-color:var(--iui-color-background-transparent-hover);
399
+ color:var(--iui-color-foreground-2);
429
400
  }
430
401
  .iui-calendar-day-range-today::before{
431
- border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
402
+ border-color:var(--iui-color-foreground-primary);
432
403
  }