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

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 (176) hide show
  1. package/package.json +1 -1
  2. package/src/accordion/accordion.css +10 -10
  3. package/src/action-bar/action-bar.css +31 -32
  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 +139 -64
  17. package/src/button/button.tokens.json +10 -0
  18. package/src/button-group/button-group.css +76 -72
  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 +84 -90
  36. package/src/container/container.css +24 -24
  37. package/src/context-menu/context-menu.css +8 -8
  38. package/src/currency-field/currency-field.css +210 -88
  39. package/src/currency-field/currency-field.tokens.json +13 -0
  40. package/src/dashboard-grid/dashboard-grid.css +148 -116
  41. package/src/data-grid/data-grid.css +504 -469
  42. package/src/data-grid/data-grid.tokens.json +2 -0
  43. package/src/data-list/data-list.css +81 -70
  44. package/src/data-list/data-list.tokens.json +2 -1
  45. package/src/date-field/date-field.css +55 -52
  46. package/src/date-field/date-field.tokens.json +1 -0
  47. package/src/date-picker/date-picker.css +40 -42
  48. package/src/date-range-picker/date-range-picker.css +114 -118
  49. package/src/datetime-field/datetime-field.css +78 -80
  50. package/src/datetime-field/datetime-field.tokens.json +1 -0
  51. package/src/datetime-picker/datetime-picker.css +61 -63
  52. package/src/datetime-range-picker/datetime-range-picker.css +149 -156
  53. package/src/description-list/description-list.css +61 -64
  54. package/src/detail-panel/detail-panel.css +70 -70
  55. package/src/dialog/dialog.css +334 -153
  56. package/src/dialog/dialog.tokens.json +5 -0
  57. package/src/divider/divider.css +18 -18
  58. package/src/drawer/drawer.css +186 -209
  59. package/src/entity-picker/entity-picker.css +238 -241
  60. package/src/entity-picker/entity-picker.tokens.json +1 -0
  61. package/src/event-calendar/event-calendar.css +343 -385
  62. package/src/field/field.css +74 -78
  63. package/src/field-group/field-group.css +22 -25
  64. package/src/filter-bar/filter-bar.css +193 -209
  65. package/src/form/form.css +34 -24
  66. package/src/form/form.tokens.json +1 -0
  67. package/src/fullscreen/fullscreen.css +24 -25
  68. package/src/grid/grid.css +28 -28
  69. package/src/highlight/highlight.css +6 -6
  70. package/src/hover-card/hover-card.css +6 -6
  71. package/src/icon/icon.css +19 -15
  72. package/src/icon/icon.tokens.json +1 -0
  73. package/src/image/image.css +39 -39
  74. package/src/import-export-center/import-export-center.css +135 -156
  75. package/src/inline/inline.css +27 -27
  76. package/src/inline-message/inline-message.css +52 -28
  77. package/src/inline-message/inline-message.tokens.json +4 -0
  78. package/src/kbd/kbd.css +30 -26
  79. package/src/link/link.css +15 -15
  80. package/src/list/list.css +44 -17
  81. package/src/list/list.tokens.json +4 -0
  82. package/src/list-item/list-item.css +80 -66
  83. package/src/list-item/list-item.tokens.json +7 -0
  84. package/src/listbox/listbox.css +56 -59
  85. package/src/loading-overlay/loading-overlay.css +75 -92
  86. package/src/markdown/markdown.css +17 -17
  87. package/src/menu/menu.css +83 -63
  88. package/src/menubar/menubar.css +13 -13
  89. package/src/message/message.css +182 -202
  90. package/src/message/message.tokens.json +5 -0
  91. package/src/message-scroller/message-scroller.css +41 -42
  92. package/src/multi-select/multi-select.css +152 -145
  93. package/src/multi-select/multi-select.tokens.json +1 -0
  94. package/src/navigation-menu/navigation-menu.css +167 -188
  95. package/src/notification-center/notification-center.css +140 -148
  96. package/src/notification-center/notification-center.tokens.json +3 -0
  97. package/src/number-field/number-field.css +84 -83
  98. package/src/number-field/number-field.tokens.json +1 -0
  99. package/src/otp-input/otp-input.css +67 -57
  100. package/src/otp-input/otp-input.tokens.json +1 -0
  101. package/src/page/page.css +23 -23
  102. package/src/page-header/page-header.css +268 -281
  103. package/src/page-header/page-header.tokens.json +1 -0
  104. package/src/pagination/pagination.css +68 -72
  105. package/src/popover/popover.css +40 -49
  106. package/src/progress-indicator/progress-indicator.css +177 -120
  107. package/src/progress-indicator/progress-indicator.tokens.json +1 -1
  108. package/src/prompt-composer/prompt-composer.css +221 -102
  109. package/src/prompt-composer/prompt-composer.tokens.json +15 -0
  110. package/src/prose/prose.css +71 -75
  111. package/src/radio-group/radio-group.css +98 -103
  112. package/src/rating/rating.css +136 -132
  113. package/src/rating/rating.tokens.json +1 -0
  114. package/src/result-state/result-state.css +74 -77
  115. package/src/runtime-properties.mjs +2 -0
  116. package/src/saved-views/saved-views.css +41 -47
  117. package/src/scroll-area/scroll-area.css +39 -32
  118. package/src/section/section.css +161 -41
  119. package/src/section/section.tokens.json +7 -2
  120. package/src/segmented-control/segmented-control.css +254 -97
  121. package/src/segmented-control/segmented-control.tokens.json +15 -11
  122. package/src/select/select.css +118 -117
  123. package/src/select/select.tokens.json +1 -0
  124. package/src/side-navigation/side-navigation.css +179 -182
  125. package/src/side-navigation/side-navigation.tokens.json +1 -0
  126. package/src/skeleton/skeleton.css +47 -48
  127. package/src/slider/slider.css +86 -88
  128. package/src/sparkline/sparkline.css +62 -40
  129. package/src/sparkline/sparkline.tokens.json +2 -0
  130. package/src/spinner/spinner.css +39 -182
  131. package/src/spinner/spinner.tokens.json +0 -2
  132. package/src/split-button/split-button.css +30 -31
  133. package/src/split-button/split-button.tokens.json +1 -0
  134. package/src/splitter/splitter.css +35 -35
  135. package/src/stack/stack.css +24 -24
  136. package/src/stat-card/stat-card.css +341 -224
  137. package/src/stat-card/stat-card.tokens.json +3 -0
  138. package/src/status-indicator/status-indicator.css +28 -28
  139. package/src/stepper/stepper.css +58 -62
  140. package/src/switch/switch.css +86 -92
  141. package/src/table/table.css +310 -165
  142. package/src/table/table.tokens.json +6 -0
  143. package/src/table-of-contents/table-of-contents.css +51 -54
  144. package/src/tabs/tabs.css +330 -302
  145. package/src/tabs/tabs.tokens.json +8 -5
  146. package/src/tag/tag.css +79 -71
  147. package/src/tag/tag.tokens.json +9 -0
  148. package/src/tags-input/tags-input.css +145 -82
  149. package/src/tags-input/tags-input.tokens.json +7 -1
  150. package/src/text-field/text-field.css +132 -136
  151. package/src/text-field/text-field.tokens.json +1 -0
  152. package/src/textarea/textarea.css +31 -28
  153. package/src/textarea/textarea.tokens.json +1 -0
  154. package/src/time-field/time-field.css +72 -69
  155. package/src/time-field/time-field.tokens.json +1 -0
  156. package/src/time-picker/time-picker.css +56 -58
  157. package/src/time-range-picker/time-range-picker.css +126 -133
  158. package/src/timeline/timeline.css +254 -266
  159. package/src/timeline/timeline.tokens.json +5 -0
  160. package/src/toast/toast.css +89 -90
  161. package/src/toast/toast.tokens.json +5 -0
  162. package/src/toggle/toggle.css +62 -25
  163. package/src/toggle/toggle.tokens.json +8 -0
  164. package/src/toggle-group/toggle-group.css +106 -60
  165. package/src/toggle-group/toggle-group.tokens.json +10 -0
  166. package/src/toolbar/toolbar.css +30 -35
  167. package/src/tooltip/tooltip.css +26 -26
  168. package/src/top-navigation/top-navigation.css +243 -259
  169. package/src/tour/tour.css +51 -60
  170. package/src/transfer/transfer.css +160 -164
  171. package/src/tree/tree.css +103 -111
  172. package/src/typography/typography.css +40 -36
  173. package/src/typography/typography.tokens.json +1 -0
  174. package/src/upload/upload.css +224 -224
  175. package/src/visually-hidden/visually-hidden.css +1 -1
  176. 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",