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

package/src/dialog/dialog.tokens.json

@@ -8,6 +8,7 @@
   "--slotted-control-radius",
   "--slotted-control-transition-duration",
   "--slotted-control-transition-easing",
+  "--slotted-dialog-backdrop-filter",
   "--slotted-dialog-body-color",
   "--slotted-dialog-border-color",
   "--slotted-dialog-close-active-background",
@@ -17,6 +18,10 @@
   "--slotted-dialog-description-color",
   "--slotted-dialog-footer-surface",
   "--slotted-dialog-measure",
+  "--slotted-dialog-padding-block",
+  "--slotted-dialog-padding-block-sm",
+  "--slotted-dialog-padding-inline",
+  "--slotted-dialog-padding-inline-sm",
   "--slotted-dialog-radius",
   "--slotted-dialog-rule-color",
   "--slotted-dialog-scrim",
@@ -57,6 +62,7 @@
   "--slotted-text-muted",
   "--slotted-tone-accent-text",
   "--slotted-tone-danger-text",
+  "--slotted-tone-info-text",
   "--slotted-tone-secondary-subtle-active",
   "--slotted-tone-secondary-subtle-hover",
   "--slotted-tone-secondary-text",

package/src/divider/divider.css

@@ -11,7 +11,7 @@
    * start` is the common one — otherwise sizes the rule from its content,
    * which for a rule is nothing at all.
    */
-  [data-ui='divider'] {
+  [data-ui-divider] {
     align-self: stretch;
     border: 0;
     flex-shrink: 0;
@@ -26,14 +26,14 @@
    * holds a length that has to follow the type size at the point of use. A
    * theme that wants a fixed floor sets the token.
    */
-  [data-ui='divider']:not([data-labelled])[data-orientation='horizontal'] {
+  [data-ui-divider]:not([data-labelled])[data-orientation='horizontal'] {
     block-size: 0;
     border-block-start: var(--slotted-divider-thickness, var(--slotted-border-width-thin, 1px))
       solid var(--slotted-divider-color, var(--slotted-border-subtle, ButtonBorder));
     min-inline-size: var(--slotted-divider-min-length, 1em);
   }
 
-  [data-ui='divider']:not([data-labelled])[data-orientation='vertical'] {
+  [data-ui-divider]:not([data-labelled])[data-orientation='vertical'] {
     border-inline-start: var(--slotted-divider-thickness, var(--slotted-border-width-thin, 1px))
       solid var(--slotted-divider-color, var(--slotted-border-subtle, ButtonBorder));
     inline-size: 0;
@@ -46,11 +46,11 @@
    * almost always the one inside a menu or a list built from controls, and it
    * has to line up with their text at every density.
    */
-  [data-ui='divider'][data-inset][data-orientation='horizontal'] {
+  [data-ui-divider][data-inset][data-orientation='horizontal'] {
     margin-inline: var(--slotted-divider-inset, var(--slotted-control-padding-inline-md, 13px));
   }
 
-  [data-ui='divider'][data-inset][data-orientation='vertical'] {
+  [data-ui-divider][data-inset][data-orientation='vertical'] {
     margin-block: var(--slotted-divider-inset, var(--slotted-control-padding-inline-md, 13px));
   }
 
@@ -60,13 +60,13 @@
    * so the DOM a consumer reads is the root and the label, and nothing else
    * becomes an accidental promise.
    */
-  [data-ui='divider'][data-labelled] {
+  [data-ui-divider][data-labelled] {
     align-items: center;
     display: flex;
     gap: var(--slotted-divider-gap, var(--slotted-space-4, 0.5rem));
   }
 
-  [data-ui='divider'][data-labelled][data-orientation='vertical'] {
+  [data-ui-divider][data-labelled][data-orientation='vertical'] {
     flex-direction: column;
     min-block-size: var(--slotted-divider-min-length, 1em);
   }
@@ -77,29 +77,29 @@
    * rule. Unthemed, they disappear rather than reaching for a system colour,
    * which is the right failure for decoration.
    */
-  [data-ui='divider'][data-labelled]::before,
-  [data-ui='divider'][data-labelled]::after {
+  [data-ui-divider][data-labelled]::before,
+  [data-ui-divider][data-labelled]::after {
     content: '';
     flex: 1 0 var(--slotted-space-5, 0.75rem);
   }
 
-  [data-ui='divider'][data-labelled][data-orientation='horizontal']::before,
-  [data-ui='divider'][data-labelled][data-orientation='horizontal']::after {
+  [data-ui-divider][data-labelled][data-orientation='horizontal']::before,
+  [data-ui-divider][data-labelled][data-orientation='horizontal']::after {
     block-size: 0;
     border-block-start: var(--slotted-divider-thickness, var(--slotted-border-width-thin, 1px))
       solid var(--slotted-divider-color, var(--slotted-border-subtle));
   }
 
-  [data-ui='divider'][data-labelled][data-orientation='vertical']::before,
-  [data-ui='divider'][data-labelled][data-orientation='vertical']::after {
+  [data-ui-divider][data-labelled][data-orientation='vertical']::before,
+  [data-ui-divider][data-labelled][data-orientation='vertical']::after {
     border-inline-start: var(--slotted-divider-thickness, var(--slotted-border-width-thin, 1px))
       solid var(--slotted-divider-color, var(--slotted-border-subtle));
     inline-size: 0;
   }
 
   /* A label at one end keeps one half of the rule, not a stub of the other. */
-  [data-ui='divider'][data-labelled][data-align='start']::before,
-  [data-ui='divider'][data-labelled][data-align='end']::after {
+  [data-ui-divider][data-labelled][data-align='start']::before,
+  [data-ui-divider][data-labelled][data-align='end']::after {
     display: none;
   }
 
@@ -109,7 +109,7 @@
    * muted text colour. It wraps before it overflows, and a single token longer
    * than the container breaks rather than pushing the rule out of the layout.
    */
-  [data-ui='divider'] [data-part='label'] {
+  [data-ui-divider] [data-part-label] {
     color: var(--slotted-divider-label-color, var(--slotted-text-muted, GrayText));
     font-family: var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);
     font-size: var(--slotted-font-size-xs, 0.75rem);
@@ -121,11 +121,11 @@
   }
 
   /* A label that wraps keeps the edge it was placed against. */
-  [data-ui='divider'][data-align='start'] [data-part='label'] {
+  [data-ui-divider][data-align='start'] [data-part-label] {
     text-align: start;
   }
 
-  [data-ui='divider'][data-align='end'] [data-part='label'] {
+  [data-ui-divider][data-align='end'] [data-part-label] {
     text-align: end;
   }
 }