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

package/src/alert/alert.css

@@ -20,7 +20,7 @@
    * actions stacks and stretches when the box is narrow, and a page banner
    * puts its actions back on the message's own line when the box is wide.
    */
-  [data-ui='alert'][data-part='root'] {
+  [data-ui-alert][data-part-root] {
     /**
      * The tone's five roles, defaulted to `accent` so an alert with no stated
      * tone is an informational one. Each tone below restates the same five;
@@ -216,7 +216,7 @@
    * holds its place until the fade is over rather than snapping out from
    * under the content below.
    */
-  [data-ui='alert'][data-part='root'][hidden] {
+  [data-ui-alert][data-part-root][hidden] {
     display: none;
     opacity: 0;
     transition:
@@ -235,7 +235,7 @@
    * marks the moment it does. It travels the path the exit takes, in reverse.
    */
   @starting-style {
-    [data-ui='alert'][data-part='root']:is([data-live='polite'], [data-live='assertive']) {
+    [data-ui-alert][data-part-root]:is([data-live='polite'], [data-live='assertive']) {
       opacity: 0;
       translate: 0 calc(-1 * var(--slotted-space-2, 0.25rem));
     }
@@ -255,7 +255,7 @@
    * circle, the triangle and the crossed circle are what is left.
    */
 
-  [data-ui='alert'][data-part='root'][data-tone='accent'] {
+  [data-ui-alert][data-part-root][data-tone='accent'] {
     --_solid: var(--slotted-tone-accent-solid);
     --_on-solid: var(--slotted-tone-accent-on-solid);
     --_surface: var(--slotted-tone-accent-surface);
@@ -263,7 +263,7 @@
     --_text: var(--slotted-tone-accent-text);
   }
 
-  [data-ui='alert'][data-part='root'][data-tone='secondary'] {
+  [data-ui-alert][data-part-root][data-tone='secondary'] {
     --_solid: var(--slotted-tone-secondary-solid);
     --_on-solid: var(--slotted-tone-secondary-on-solid);
     --_surface: var(--slotted-tone-secondary-surface);
@@ -271,7 +271,7 @@
     --_text: var(--slotted-tone-secondary-text);
   }
 
-  [data-ui='alert'][data-part='root'][data-tone='success'] {
+  [data-ui-alert][data-part-root][data-tone='success'] {
     --_solid: var(--slotted-tone-success-solid);
     --_on-solid: var(--slotted-tone-success-on-solid);
     --_surface: var(--slotted-tone-success-surface);
@@ -279,7 +279,15 @@
     --_text: var(--slotted-tone-success-text);
   }
 
-  [data-ui='alert'][data-part='root'][data-tone='warning'] {
+  [data-ui-alert][data-part-root][data-tone='info'] {
+    --_solid: var(--slotted-tone-info-solid);
+    --_on-solid: var(--slotted-tone-info-on-solid);
+    --_surface: var(--slotted-tone-info-surface);
+    --_border: var(--slotted-tone-info-border);
+    --_text: var(--slotted-tone-info-text);
+  }
+
+  [data-ui-alert][data-part-root][data-tone='warning'] {
     --_solid: var(--slotted-tone-warning-solid);
     --_on-solid: var(--slotted-tone-warning-on-solid);
     --_surface: var(--slotted-tone-warning-surface);
@@ -287,7 +295,7 @@
     --_text: var(--slotted-tone-warning-text);
   }
 
-  [data-ui='alert'][data-part='root'][data-tone='danger'] {
+  [data-ui-alert][data-part-root][data-tone='danger'] {
     --_solid: var(--slotted-tone-danger-solid);
     --_on-solid: var(--slotted-tone-danger-on-solid);
     --_surface: var(--slotted-tone-danger-surface);
@@ -313,7 +321,7 @@
    * is a run of coloured text with no box around it — the finding `kbd`
    * recorded about its own soft variant.
    */
-  [data-ui='alert'][data-part='root'][data-variant='soft'] {
+  [data-ui-alert][data-part-root][data-variant='soft'] {
     background-color: var(--_surface);
     border-color: var(--_border);
   }
@@ -332,7 +340,7 @@
    * reads again. `soft` and `solid` survive the inverted surface only because
    * they repaint the ground before they write on it.
    */
-  [data-ui='alert'][data-part='root'][data-variant='outline'] {
+  [data-ui-alert][data-part-root][data-variant='outline'] {
     background-color: transparent;
     border-color: var(--_border);
   }
@@ -343,7 +351,7 @@
    * `solid-active` in every scheme, so the whole box — words, mark and dismiss
    * control — takes it.
    */
-  [data-ui='alert'][data-part='root'][data-variant='solid'] {
+  [data-ui-alert][data-part-root][data-variant='solid'] {
     background-color: var(--_solid);
     border-color: var(--_solid);
     color: var(--_on-solid);
@@ -357,7 +365,7 @@
    */
 
   /** Beside the thing it is about — a field group, a table row, a card. */
-  [data-ui='alert'][data-part='root'][data-reach='inline'] {
+  [data-ui-alert][data-part-root][data-reach='inline'] {
     --_font-size: var(--slotted-control-font-size-sm, 12px);
     --_description-font-size: var(--slotted-control-font-size-sm, 12px);
     --_glyph-size: var(--slotted-control-icon-size-sm, 14px);
@@ -377,7 +385,7 @@
    * The title steps up while the description stays where it was, which is the
    * one place in the family where the two type sizes differ.
    */
-  [data-ui='alert'][data-part='root'][data-reach='page'] {
+  [data-ui-alert][data-part-root][data-reach='page'] {
     --_font-size: var(--slotted-control-font-size-lg, 14px);
     --_glyph-size: var(--slotted-control-icon-size-lg, 18px);
     --_inner-size: var(--slotted-control-inner-size-lg, 28px);
@@ -396,7 +404,7 @@
   }
 
   /** A solid page banner has no edge to lose, so it keeps all four. */
-  [data-ui='alert'][data-part='root'][data-reach='page'][data-variant='solid'] {
+  [data-ui-alert][data-part-root][data-reach='page'][data-variant='solid'] {
     border-block-start-width: var(--_border-width);
     border-inline-width: var(--_border-width);
   }
@@ -437,7 +445,7 @@
    * A mark the page supplies instead of the tone's takes the same box and its
    * place on the first line, centred in it.
    */
-  [data-ui='alert'] > [data-part='icon'] {
+  [data-ui-alert] > [data-part-icon] {
     --slotted-icon-size: calc(var(--_mark-size) * 12 / 11);
 
     align-items: center;
@@ -464,7 +472,7 @@
    * to be clamped too, or an unbreakable word in the title sizes the track to
    * itself and the words run past the box that holds them.
    */
-  [data-ui='alert'] > [data-part='content'] {
+  [data-ui-alert] > [data-part-content] {
     /* The other half of the mark's baseline group: see the mark above. */
     align-self: baseline;
     display: grid;
@@ -490,7 +498,7 @@
    * in a column narrower than the word, which at this type size is a column
    * too narrow for the message anyway.
    */
-  [data-ui='alert'] [data-part='title'] {
+  [data-ui-alert] [data-part-title] {
     /* A title rendered as a heading keeps the root's type rather than the
        user agent's `1.17em`: the mark is `1em` of the root, and a 15-pixel
        title beside a 13-pixel mark put the mark a pixel above its capitals. */
@@ -509,7 +517,7 @@
     overflow-wrap: anywhere;
   }
 
-  [data-ui='alert'] [data-part='description'] {
+  [data-ui-alert] [data-part-description] {
     font-size: var(--_description-font-size);
     /* Its own line, rounded against its own size: a page banner's description
        is set a step below its title, and inheriting the title's 22 pixels
@@ -528,7 +536,7 @@
    * they are outside the live region: a reader hearing the message is not read
    * the labels of two buttons in the middle of it.
    */
-  [data-ui='alert'] > [data-part='actions'] {
+  [data-ui-alert] > [data-part-actions] {
     align-items: center;
     display: flex;
     flex-wrap: wrap;
@@ -557,7 +565,7 @@
    * under it than over it. With both margins the control's margin box is
    * exactly one line, and the inset above the message equals the inset below.
    */
-  [data-ui='alert'] > [data-part='dismiss'] {
+  [data-ui-alert] > [data-part-dismiss] {
     /* The cross is the binding's `Glyph` in an `icon` box at the glyph size
        the formula for this box reads. */
     --slotted-icon-size: var(--_glyph-size);
@@ -597,15 +605,15 @@
    * the reason it exists: a control the browser has already refused must not
    * answer a pointer.
    */
-  [data-ui='alert'] > [data-part='dismiss']:enabled:hover {
+  [data-ui-alert] > [data-part-dismiss]:enabled:hover {
     background-color: var(--_state-hover);
   }
 
-  [data-ui='alert'] > [data-part='dismiss']:enabled:active {
+  [data-ui-alert] > [data-part-dismiss]:enabled:active {
     background-color: var(--_state-active);
   }
 
-  [data-ui='alert'] > [data-part='dismiss']:disabled {
+  [data-ui-alert] > [data-part-dismiss]:disabled {
     color: var(--slotted-disabled-foreground);
     cursor: default;
   }
@@ -614,11 +622,11 @@
      is the one a mouse sees: a transparent box centred on the control reaches
      44 pixels, and the ground and the ring stay square. */
   @media (pointer: coarse) {
-    [data-ui='alert'] > [data-part='dismiss'] {
+    [data-ui-alert] > [data-part-dismiss] {
       position: relative;
     }
 
-    [data-ui='alert'] > [data-part='dismiss']::after {
+    [data-ui-alert] > [data-part-dismiss]::after {
       content: '';
       inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
       position: absolute;
@@ -635,7 +643,7 @@
    * keyboard focus — but a page that deliberately sends focus to a message
    * must not send it somewhere invisible.
    */
-  [data-ui='alert'] > [data-part='dismiss']:focus-visible {
+  [data-ui-alert] > [data-part-dismiss]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(-1 * var(--slotted-focus-ring-width, 2px));
   }
@@ -649,11 +657,11 @@
    * ring-width wide just inside it, in the ink its own words are written in,
    * so the ring is read against that halo rather than against the fill.
    */
-  [data-ui='alert'][data-variant='solid'] > [data-part='dismiss']:focus-visible {
+  [data-ui-alert][data-variant='solid'] > [data-part-dismiss]:focus-visible {
     box-shadow: inset 0 0 0 calc(2 * var(--slotted-focus-ring-width, 2px)) var(--_on-solid);
   }
 
-  [data-ui='alert'][data-part='root']:focus-visible {
+  [data-ui-alert][data-part-root]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -673,7 +681,7 @@
    * exists to check.
    */
   @container slotted-alert (max-width: 22rem) {
-    [data-ui='alert'] > [data-part='actions'] {
+    [data-ui-alert] > [data-part-actions] {
       /**
        * Stacked, and each control still its own width. Stretching them is what
        * the mobile banners in the field do, and it takes a decision that is not
@@ -694,7 +702,7 @@
    * however wide the window is.
    */
   @container slotted-alert (min-width: 40rem) {
-    [data-ui='alert'][data-reach='page'] > [data-part='actions'] {
+    [data-ui-alert][data-reach='page'] > [data-part-actions] {
       align-self: center;
       grid-column: 3;
       grid-row: 1;
@@ -711,7 +719,7 @@
      * box, and the negative bottom margin left behind pulled the control's
      * centre below the action's by half its overhang.
      */
-    [data-ui='alert'][data-reach='page'] > [data-part='dismiss'] {
+    [data-ui-alert][data-reach='page'] > [data-part-dismiss] {
       align-self: center;
       grid-column: 4;
       margin-block: 0;
@@ -741,7 +749,7 @@
      * danger fill, not a system colour, was forced to `Canvas` and took its
      * edge with it.
      */
-    [data-ui='alert'][data-part='root'][data-variant] {
+    [data-ui-alert][data-part-root][data-variant] {
       background-color: Canvas;
       border-color: CanvasText;
       color: CanvasText;
@@ -751,12 +759,12 @@
      * The control's glyph is stroked in `currentcolor`, so giving the control a
      * system colour repaints the mark with it.
      */
-    [data-ui='alert'] > [data-part='dismiss'] {
+    [data-ui-alert] > [data-part-dismiss] {
       color: CanvasText;
     }
 
-    [data-ui='alert'] > [data-part='dismiss']:enabled:hover,
-    [data-ui='alert'] > [data-part='dismiss']:enabled:active {
+    [data-ui-alert] > [data-part-dismiss]:enabled:hover,
+    [data-ui-alert] > [data-part-dismiss]:enabled:active {
       background-color: Highlight;
       color: HighlightText;
     }

package/src/alert/alert.tokens.json

@@ -59,6 +59,11 @@
   "--slotted-tone-danger-solid",
   "--slotted-tone-danger-surface",
   "--slotted-tone-danger-text",
+  "--slotted-tone-info-border",
+  "--slotted-tone-info-on-solid",
+  "--slotted-tone-info-solid",
+  "--slotted-tone-info-surface",
+  "--slotted-tone-info-text",
   "--slotted-tone-secondary-border",
   "--slotted-tone-secondary-on-solid",
   "--slotted-tone-secondary-solid",