@slotted/styles 0.1.0-beta.1 → 0.1.0-beta.11

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 (180) hide show
  1. package/package.json +1 -1
  2. package/src/accordion/accordion.css +10 -10
  3. package/src/action-bar/action-bar.css +35 -42
  4. package/src/action-sheet/action-sheet.css +36 -36
  5. package/src/alert/alert.css +43 -35
  6. package/src/alert/alert.tokens.json +5 -0
  7. package/src/app-shell/app-shell.css +356 -301
  8. package/src/aspect-ratio/aspect-ratio.css +9 -9
  9. package/src/attachment/attachment.css +91 -99
  10. package/src/avatar/avatar.css +71 -41
  11. package/src/avatar/avatar.tokens.json +7 -0
  12. package/src/avatar-group/avatar-group.css +21 -22
  13. package/src/badge/badge.css +45 -37
  14. package/src/badge/badge.tokens.json +5 -0
  15. package/src/breadcrumb/breadcrumb.css +37 -37
  16. package/src/button/button.css +149 -68
  17. package/src/button/button.tokens.json +10 -0
  18. package/src/button-group/button-group.css +79 -74
  19. package/src/button-group/button-group.tokens.json +2 -0
  20. package/src/calendar/calendar.css +93 -103
  21. package/src/card/card.css +54 -61
  22. package/src/carousel/carousel.css +150 -161
  23. package/src/cascader/cascader.css +152 -153
  24. package/src/cascader/cascader.tokens.json +1 -0
  25. package/src/chart/chart.css +242 -239
  26. package/src/chart/chart.tokens.json +1 -0
  27. package/src/checkbox/checkbox.css +119 -124
  28. package/src/checkbox-group/checkbox-group.css +7 -7
  29. package/src/code-block/code-block.css +81 -85
  30. package/src/collapsible/collapsible.css +69 -76
  31. package/src/color-picker/color-picker.css +83 -91
  32. package/src/column-manager/column-manager.css +106 -114
  33. package/src/combobox/combobox.css +132 -107
  34. package/src/combobox/combobox.tokens.json +1 -0
  35. package/src/command-palette/command-palette.css +103 -90
  36. package/src/command-palette/command-palette.tokens.json +1 -0
  37. package/src/container/container.css +24 -24
  38. package/src/context-menu/context-menu.css +8 -8
  39. package/src/currency-field/currency-field.css +210 -88
  40. package/src/currency-field/currency-field.tokens.json +13 -0
  41. package/src/dashboard-grid/dashboard-grid.css +148 -116
  42. package/src/data-grid/data-grid.css +535 -470
  43. package/src/data-grid/data-grid.tokens.json +4 -0
  44. package/src/data-list/data-list.css +81 -70
  45. package/src/data-list/data-list.tokens.json +2 -1
  46. package/src/date-field/date-field.css +55 -52
  47. package/src/date-field/date-field.tokens.json +1 -0
  48. package/src/date-picker/date-picker.css +40 -42
  49. package/src/date-range-picker/date-range-picker.css +114 -118
  50. package/src/datetime-field/datetime-field.css +78 -80
  51. package/src/datetime-field/datetime-field.tokens.json +1 -0
  52. package/src/datetime-picker/datetime-picker.css +61 -63
  53. package/src/datetime-range-picker/datetime-range-picker.css +149 -156
  54. package/src/description-list/description-list.css +61 -64
  55. package/src/detail-panel/detail-panel.css +86 -71
  56. package/src/detail-panel/detail-panel.tokens.json +2 -0
  57. package/src/dialog/dialog.css +372 -153
  58. package/src/dialog/dialog.tokens.json +6 -0
  59. package/src/divider/divider.css +18 -18
  60. package/src/drawer/drawer.css +205 -210
  61. package/src/drawer/drawer.tokens.json +1 -0
  62. package/src/entity-picker/entity-picker.css +238 -241
  63. package/src/entity-picker/entity-picker.tokens.json +1 -0
  64. package/src/event-calendar/event-calendar.css +343 -385
  65. package/src/field/field.css +74 -78
  66. package/src/field-group/field-group.css +22 -25
  67. package/src/filter-bar/filter-bar.css +193 -209
  68. package/src/form/form.css +34 -24
  69. package/src/form/form.tokens.json +1 -0
  70. package/src/fullscreen/fullscreen.css +24 -25
  71. package/src/grid/grid.css +28 -28
  72. package/src/highlight/highlight.css +6 -6
  73. package/src/hover-card/hover-card.css +6 -6
  74. package/src/icon/icon.css +19 -15
  75. package/src/icon/icon.tokens.json +1 -0
  76. package/src/image/image.css +39 -39
  77. package/src/import-export-center/import-export-center.css +135 -156
  78. package/src/inline/inline.css +27 -27
  79. package/src/inline-message/inline-message.css +52 -28
  80. package/src/inline-message/inline-message.tokens.json +4 -0
  81. package/src/kbd/kbd.css +30 -26
  82. package/src/link/link.css +15 -15
  83. package/src/list/list.css +44 -17
  84. package/src/list/list.tokens.json +4 -0
  85. package/src/list-item/list-item.css +80 -66
  86. package/src/list-item/list-item.tokens.json +7 -0
  87. package/src/listbox/listbox.css +56 -59
  88. package/src/loading-overlay/loading-overlay.css +75 -92
  89. package/src/markdown/markdown.css +17 -17
  90. package/src/menu/menu.css +83 -63
  91. package/src/menubar/menubar.css +13 -13
  92. package/src/message/message.css +182 -202
  93. package/src/message/message.tokens.json +5 -0
  94. package/src/message-scroller/message-scroller.css +41 -42
  95. package/src/multi-select/multi-select.css +152 -145
  96. package/src/multi-select/multi-select.tokens.json +1 -0
  97. package/src/navigation-menu/navigation-menu.css +167 -188
  98. package/src/notification-center/notification-center.css +140 -148
  99. package/src/notification-center/notification-center.tokens.json +3 -0
  100. package/src/number-field/number-field.css +84 -83
  101. package/src/number-field/number-field.tokens.json +1 -0
  102. package/src/otp-input/otp-input.css +67 -57
  103. package/src/otp-input/otp-input.tokens.json +1 -0
  104. package/src/page/page.css +39 -23
  105. package/src/page/page.tokens.json +1 -0
  106. package/src/page-header/page-header.css +323 -283
  107. package/src/page-header/page-header.tokens.json +5 -0
  108. package/src/pagination/pagination.css +68 -72
  109. package/src/popover/popover.css +40 -49
  110. package/src/progress-indicator/progress-indicator.css +177 -120
  111. package/src/progress-indicator/progress-indicator.tokens.json +1 -1
  112. package/src/prompt-composer/prompt-composer.css +221 -102
  113. package/src/prompt-composer/prompt-composer.tokens.json +15 -0
  114. package/src/prose/prose.css +71 -75
  115. package/src/radio-group/radio-group.css +98 -103
  116. package/src/rating/rating.css +136 -132
  117. package/src/rating/rating.tokens.json +1 -0
  118. package/src/result-state/result-state.css +74 -77
  119. package/src/runtime-properties.mjs +2 -0
  120. package/src/saved-views/saved-views.css +41 -47
  121. package/src/scroll-area/scroll-area.css +39 -32
  122. package/src/section/section.css +161 -41
  123. package/src/section/section.tokens.json +7 -2
  124. package/src/segmented-control/segmented-control.css +254 -97
  125. package/src/segmented-control/segmented-control.tokens.json +15 -11
  126. package/src/select/select.css +118 -117
  127. package/src/select/select.tokens.json +1 -0
  128. package/src/side-navigation/side-navigation.css +179 -182
  129. package/src/side-navigation/side-navigation.tokens.json +1 -0
  130. package/src/skeleton/skeleton.css +47 -48
  131. package/src/slider/slider.css +86 -88
  132. package/src/sparkline/sparkline.css +62 -40
  133. package/src/sparkline/sparkline.tokens.json +2 -0
  134. package/src/spinner/spinner.css +83 -180
  135. package/src/spinner/spinner.tokens.json +0 -1
  136. package/src/split-button/split-button.css +30 -31
  137. package/src/split-button/split-button.tokens.json +1 -0
  138. package/src/splitter/splitter.css +35 -35
  139. package/src/stack/stack.css +24 -24
  140. package/src/stat-card/stat-card.css +341 -224
  141. package/src/stat-card/stat-card.tokens.json +3 -0
  142. package/src/status-indicator/status-indicator.css +28 -28
  143. package/src/stepper/stepper.css +58 -62
  144. package/src/switch/switch.css +86 -92
  145. package/src/table/table.css +310 -165
  146. package/src/table/table.tokens.json +6 -0
  147. package/src/table-of-contents/table-of-contents.css +51 -54
  148. package/src/tabs/tabs.css +337 -302
  149. package/src/tabs/tabs.tokens.json +8 -5
  150. package/src/tag/tag.css +79 -71
  151. package/src/tag/tag.tokens.json +9 -0
  152. package/src/tags-input/tags-input.css +145 -82
  153. package/src/tags-input/tags-input.tokens.json +7 -1
  154. package/src/text-field/text-field.css +132 -136
  155. package/src/text-field/text-field.tokens.json +1 -0
  156. package/src/textarea/textarea.css +31 -28
  157. package/src/textarea/textarea.tokens.json +1 -0
  158. package/src/time-field/time-field.css +72 -69
  159. package/src/time-field/time-field.tokens.json +1 -0
  160. package/src/time-picker/time-picker.css +56 -58
  161. package/src/time-range-picker/time-range-picker.css +126 -133
  162. package/src/timeline/timeline.css +254 -266
  163. package/src/timeline/timeline.tokens.json +5 -0
  164. package/src/toast/toast.css +108 -90
  165. package/src/toast/toast.tokens.json +6 -0
  166. package/src/toggle/toggle.css +62 -25
  167. package/src/toggle/toggle.tokens.json +8 -0
  168. package/src/toggle-group/toggle-group.css +106 -60
  169. package/src/toggle-group/toggle-group.tokens.json +10 -0
  170. package/src/toolbar/toolbar.css +30 -35
  171. package/src/tooltip/tooltip.css +26 -26
  172. package/src/top-navigation/top-navigation.css +243 -259
  173. package/src/tour/tour.css +51 -60
  174. package/src/transfer/transfer.css +160 -164
  175. package/src/tree/tree.css +103 -111
  176. package/src/typography/typography.css +40 -36
  177. package/src/typography/typography.tokens.json +1 -0
  178. package/src/upload/upload.css +224 -224
  179. package/src/visually-hidden/visually-hidden.css +1 -1
  180. package/src/wizard/wizard.css +185 -197
package/src/typography/typography.css CHANGED
@@ -5,7 +5,7 @@
5
5
  * so text placed on a tonal surface reads that surface instead of arguing
6
6
  * with it; `data-tone` is how a consumer asks for a colour of its own.
7
7
  */
8
- [data-ui='typography'] {
8
+ [data-ui-typography] {
9
9
  font-family: var(
10
10
  --slotted-typography-font-family,
11
11
  var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif)
@@ -30,7 +30,7 @@
30
30
  * tells a heading from a line of text here: both carry `data-ui` and
31
31
  * `data-part='root'`, and `Heading` always renders `h1` to `h6`.
32
32
  */
33
- [data-ui='typography']:is(h1, h2, h3, h4, h5, h6) {
33
+ [data-ui-typography]:is(h1, h2, h3, h4, h5, h6) {
34
34
  font-family: var(
35
35
  --slotted-font-family-heading,
36
36
  var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif)
@@ -38,78 +38,82 @@
38
38
  }
39
39
 
40
40
  /* Each step carries the line height the scale pairs it with. */
41
- [data-ui='typography'][data-size='xs'] {
41
+ [data-ui-typography][data-size='xs'] {
42
42
  font-size: var(--slotted-font-size-xs, 0.75rem);
43
43
  line-height: var(--slotted-line-height-xs, 1.4);
44
44
  }
45
45
 
46
- [data-ui='typography'][data-size='sm'] {
46
+ [data-ui-typography][data-size='sm'] {
47
47
  font-size: var(--slotted-font-size-sm, 0.8125rem);
48
48
  line-height: var(--slotted-line-height-sm, 1.45);
49
49
  }
50
50
 
51
- [data-ui='typography'][data-size='md'] {
51
+ [data-ui-typography][data-size='md'] {
52
52
  font-size: var(--slotted-font-size-md, 0.875rem);
53
53
  line-height: var(--slotted-line-height-md, 1.5);
54
54
  }
55
55
 
56
- [data-ui='typography'][data-size='lg'] {
56
+ [data-ui-typography][data-size='lg'] {
57
57
  font-size: var(--slotted-font-size-lg, 1rem);
58
58
  line-height: var(--slotted-line-height-lg, 1.5);
59
59
  }
60
60
 
61
- [data-ui='typography'][data-size='xl'] {
61
+ [data-ui-typography][data-size='xl'] {
62
62
  font-size: var(--slotted-font-size-xl, 1.125rem);
63
63
  line-height: var(--slotted-line-height-xl, 1.45);
64
64
  }
65
65
 
66
- [data-ui='typography'][data-size='2xl'] {
66
+ [data-ui-typography][data-size='2xl'] {
67
67
  font-size: var(--slotted-font-size-2xl, 1.25rem);
68
68
  line-height: var(--slotted-line-height-2xl, 1.4);
69
69
  }
70
70
 
71
- [data-ui='typography'][data-size='3xl'] {
71
+ [data-ui-typography][data-size='3xl'] {
72
72
  font-size: var(--slotted-font-size-3xl, 1.5rem);
73
73
  line-height: var(--slotted-line-height-3xl, 1.3);
74
74
  }
75
75
 
76
- [data-ui='typography'][data-weight='regular'] {
76
+ [data-ui-typography][data-weight='regular'] {
77
77
  font-weight: var(--slotted-font-weight-regular, 400);
78
78
  }
79
79
 
80
- [data-ui='typography'][data-weight='medium'] {
80
+ [data-ui-typography][data-weight='medium'] {
81
81
  font-weight: var(--slotted-font-weight-medium, 500);
82
82
  }
83
83
 
84
- [data-ui='typography'][data-weight='semibold'] {
84
+ [data-ui-typography][data-weight='semibold'] {
85
85
  font-weight: var(--slotted-font-weight-semibold, 600);
86
86
  }
87
87
 
88
- [data-ui='typography'][data-tone='default'] {
88
+ [data-ui-typography][data-tone='default'] {
89
89
  color: var(--slotted-text, CanvasText);
90
90
  }
91
91
 
92
- [data-ui='typography'][data-tone='muted'] {
92
+ [data-ui-typography][data-tone='muted'] {
93
93
  color: var(--slotted-text-muted, GrayText);
94
94
  }
95
95
 
96
- [data-ui='typography'][data-tone='accent'] {
96
+ [data-ui-typography][data-tone='accent'] {
97
97
  color: var(--slotted-tone-accent-text, LinkText);
98
98
  }
99
99
 
100
- [data-ui='typography'][data-tone='success'] {
100
+ [data-ui-typography][data-tone='success'] {
101
101
  color: var(--slotted-tone-success-text, CanvasText);
102
102
  }
103
103
 
104
- [data-ui='typography'][data-tone='warning'] {
104
+ [data-ui-typography][data-tone='info'] {
105
+ color: var(--slotted-tone-info-text, CanvasText);
106
+ }
107
+
108
+ [data-ui-typography][data-tone='warning'] {
105
109
  color: var(--slotted-tone-warning-text, CanvasText);
106
110
  }
107
111
 
108
- [data-ui='typography'][data-tone='danger'] {
112
+ [data-ui-typography][data-tone='danger'] {
109
113
  color: var(--slotted-tone-danger-text, CanvasText);
110
114
  }
111
115
 
112
- [data-ui='typography'][data-tone='inverse'] {
116
+ [data-ui-typography][data-tone='inverse'] {
113
117
  color: var(--slotted-text-inverse, Canvas);
114
118
  }
115
119
 
@@ -118,54 +122,54 @@
118
122
  * asking for alignment is what turns the span into a block; a consumer who
119
123
  * wants inline text simply does not ask.
120
124
  */
121
- [data-ui='typography'][data-align] {
125
+ [data-ui-typography][data-align] {
122
126
  display: block;
123
127
  }
124
128
 
125
- [data-ui='typography'][data-align='start'] {
129
+ [data-ui-typography][data-align='start'] {
126
130
  text-align: start;
127
131
  }
128
132
 
129
- [data-ui='typography'][data-align='center'] {
133
+ [data-ui-typography][data-align='center'] {
130
134
  text-align: center;
131
135
  }
132
136
 
133
- [data-ui='typography'][data-align='end'] {
137
+ [data-ui-typography][data-align='end'] {
134
138
  text-align: end;
135
139
  }
136
140
 
137
141
  /* Every wrapping value is stated, because text-wrap inherits: a heading's
138
142
  balance would otherwise reach the running text inside it. */
139
- [data-ui='typography'][data-wrap='normal'] {
143
+ [data-ui-typography][data-wrap='normal'] {
140
144
  text-wrap: wrap;
141
145
  white-space: normal;
142
146
  }
143
147
 
144
- [data-ui='typography'][data-wrap='nowrap'] {
148
+ [data-ui-typography][data-wrap='nowrap'] {
145
149
  white-space: nowrap;
146
150
  }
147
151
 
148
- [data-ui='typography'][data-wrap='balance'] {
152
+ [data-ui-typography][data-wrap='balance'] {
149
153
  text-wrap: balance;
150
154
  }
151
155
 
152
- [data-ui='typography'][data-wrap='pretty'] {
156
+ [data-ui-typography][data-wrap='pretty'] {
153
157
  text-wrap: pretty;
154
158
  }
155
159
 
156
- [data-ui='typography'][data-numeric='normal'] {
160
+ [data-ui-typography][data-numeric='normal'] {
157
161
  font-variant-numeric: normal;
158
162
  }
159
163
 
160
- [data-ui='typography'][data-numeric='tabular'] {
164
+ [data-ui-typography][data-numeric='tabular'] {
161
165
  font-variant-numeric: tabular-nums;
162
166
  }
163
167
 
164
- [data-ui='typography'][data-transform='none'] {
168
+ [data-ui-typography][data-transform='none'] {
165
169
  text-transform: none;
166
170
  }
167
171
 
168
- [data-ui='typography'][data-transform='capitalize'] {
172
+ [data-ui-typography][data-transform='capitalize'] {
169
173
  text-transform: capitalize;
170
174
  }
171
175
 
@@ -175,7 +179,7 @@
175
179
  * holds no tracking step, and this value corrects an optical effect rather
176
180
  * than stating one; a theme retunes it through the token.
177
181
  */
178
- [data-ui='typography'][data-transform='uppercase'] {
182
+ [data-ui-typography][data-transform='uppercase'] {
179
183
  letter-spacing: var(--slotted-typography-uppercase-tracking, 0.06em);
180
184
  text-transform: uppercase;
181
185
  }
@@ -186,9 +190,9 @@
186
190
  * written in it. The list is the common ones, not every one: a language it
187
191
  * misses sets --slotted-typography-uppercase-tracking to normal.
188
192
  */
189
- [data-ui='typography']:lang(ar),
190
- [data-ui='typography']:lang(fa),
191
- [data-ui='typography']:lang(ur) {
193
+ [data-ui-typography]:lang(ar),
194
+ [data-ui-typography]:lang(fa),
195
+ [data-ui-typography]:lang(ur) {
192
196
  letter-spacing: normal;
193
197
  }
194
198
 
@@ -199,7 +203,7 @@
199
203
  * and the count reaches CSS as a custom property because a line-clamp cannot
200
204
  * be read from an attribute.
201
205
  */
202
- [data-ui='typography'][data-truncate] {
206
+ [data-ui-typography][data-truncate] {
203
207
  display: -webkit-box;
204
208
  -webkit-box-orient: vertical;
205
209
  -webkit-line-clamp: var(--slotted-typography-lines, 1);
package/src/typography/typography.tokens.json CHANGED
@@ -23,6 +23,7 @@
23
23
  "--slotted-text-muted",
24
24
  "--slotted-tone-accent-text",
25
25
  "--slotted-tone-danger-text",
26
+ "--slotted-tone-info-text",
26
27
  "--slotted-tone-success-text",
27
28
  "--slotted-tone-warning-text",
28
29
  "--slotted-typography-font-family",