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

package/src/avatar/avatar.css

@@ -17,7 +17,7 @@
    * proportion of that length rather than a scale of its own, which is the
    * reasoning `badge` used for the overhang of an anchored count.
    */
-  [data-ui='avatar'][data-part='root'] {
+  [data-ui-avatar][data-part-root] {
     /**
      * Tone. `secondary` reads the `solid-hover` step rather than `solid` for
      * the reason `badge` records: `secondary.solid` is the surface colour in
@@ -189,7 +189,7 @@
 
   /* ── Tone: which of the five semantic colours the name resolves to ─────── */
 
-  [data-ui='avatar'][data-part='root'][data-tone='accent'] {
+  [data-ui-avatar][data-part-root][data-tone='accent'] {
     --_solid: var(--slotted-tone-accent-solid);
     --_solid-edge: var(--slotted-tone-accent-solid);
     --_on-solid: var(--slotted-tone-accent-on-solid);
@@ -198,7 +198,7 @@
     --_text: var(--slotted-tone-accent-text);
   }
 
-  [data-ui='avatar'][data-part='root'][data-tone='success'] {
+  [data-ui-avatar][data-part-root][data-tone='success'] {
     --_solid: var(--slotted-tone-success-solid);
     --_solid-edge: var(--slotted-tone-success-solid);
     --_on-solid: var(--slotted-tone-success-on-solid);
@@ -207,7 +207,16 @@
     --_text: var(--slotted-tone-success-text);
   }
 
-  [data-ui='avatar'][data-part='root'][data-tone='warning'] {
+  [data-ui-avatar][data-part-root][data-tone='info'] {
+    --_solid: var(--slotted-tone-info-solid);
+    --_solid-edge: 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-avatar][data-part-root][data-tone='warning'] {
     --_solid: var(--slotted-tone-warning-solid);
     --_solid-edge: var(--slotted-tone-warning-solid);
     --_on-solid: var(--slotted-tone-warning-on-solid);
@@ -216,7 +225,7 @@
     --_text: var(--slotted-tone-warning-text);
   }
 
-  [data-ui='avatar'][data-part='root'][data-tone='danger'] {
+  [data-ui-avatar][data-part-root][data-tone='danger'] {
     --_solid: var(--slotted-tone-danger-solid);
     --_solid-edge: var(--slotted-tone-danger-solid);
     --_on-solid: var(--slotted-tone-danger-on-solid);
@@ -236,14 +245,14 @@
    * There is no `outline`: an avatar drawn as a ring around nothing is not an
    * avatar, and every one of the fourteen surveyed implementations fills.
    */
-  [data-ui='avatar'][data-part='root'][data-variant='soft'] {
+  [data-ui-avatar][data-part-root][data-variant='soft'] {
     --_ground: var(--_surface, ButtonFace);
 
     background-color: var(--_ground);
     color: var(--_text, ButtonText);
   }
 
-  [data-ui='avatar'][data-part='root'][data-variant='solid'] {
+  [data-ui-avatar][data-part-root][data-variant='solid'] {
     --_edge: var(--_solid-edge);
     --_ground: var(--_solid, ButtonFace);
 
@@ -265,29 +274,29 @@
    * Rounded to the pixel: a sixth of 64 is 10.67 and of 28 is 4.67, and a
    * fractional radius spreads the curve over partial pixels at every corner.
    */
-  [data-ui='avatar'][data-part='root'][data-shape='square'] {
+  [data-ui-avatar][data-part-root][data-shape='square'] {
     --_radius: var(--slotted-avatar-radius, round(nearest, calc(var(--_size) / 6), 1px));
   }
 
   /* ── Size ─────────────────────────────────────────────────────────────── */
 
-  [data-ui='avatar'][data-part='root'][data-size='xs'] {
+  [data-ui-avatar][data-part-root][data-size='xs'] {
     --slotted-avatar-size: var(--slotted-avatar-size-xs, 24px);
   }
 
-  [data-ui='avatar'][data-part='root'][data-size='sm'] {
+  [data-ui-avatar][data-part-root][data-size='sm'] {
     --slotted-avatar-size: var(--slotted-avatar-size-sm, 28px);
   }
 
-  [data-ui='avatar'][data-part='root'][data-size='md'] {
+  [data-ui-avatar][data-part-root][data-size='md'] {
     --slotted-avatar-size: var(--slotted-avatar-size-md, 36px);
   }
 
-  [data-ui='avatar'][data-part='root'][data-size='lg'] {
+  [data-ui-avatar][data-part-root][data-size='lg'] {
     --slotted-avatar-size: var(--slotted-avatar-size-lg, 48px);
   }
 
-  [data-ui='avatar'][data-part='root'][data-size='xl'] {
+  [data-ui-avatar][data-part-root][data-size='xl'] {
     --slotted-avatar-size: var(--slotted-avatar-size-xl, 64px);
   }
 
@@ -304,7 +313,7 @@
    * `prefers-reduced-motion` collapses the duration in the theme, and nothing
    * here loops.
    */
-  [data-ui='avatar'] [data-part='image'] {
+  [data-ui-avatar] [data-part-image] {
     block-size: 100%;
     border-radius: inherit;
     inline-size: 100%;
@@ -320,14 +329,14 @@
    * enters on the entering curve and, when a later request fails, leaves on the
    * exiting one. The fallback below is the mirror of it.
    */
-  [data-ui='avatar'][data-status='loaded'] [data-part='image'] {
+  [data-ui-avatar][data-status='loaded'] [data-part-image] {
     opacity: 1;
     transition-timing-function: var(--slotted-easing-enter);
   }
 
   /* ── What stands in for it ────────────────────────────────────────────── */
 
-  [data-ui='avatar'] [data-part='fallback'] {
+  [data-ui-avatar] [data-part-fallback] {
     /**
      * The last step of the fallback order, and the only artwork this family
      * owns. It is reached when there is no picture and no name to take
@@ -357,7 +366,7 @@
     transition: opacity var(--slotted-duration-short) var(--slotted-easing-enter);
   }
 
-  [data-ui='avatar'][data-status='loaded'] [data-part='fallback'] {
+  [data-ui-avatar][data-status='loaded'] [data-part-fallback] {
     /**
      * It leaves as the picture arrives rather than the instant the load
      * reports, so the two cross rather than flicker. It is still painted
@@ -394,7 +403,7 @@
    * family's own glyph as well, which is an icon and needs no line at all.
    */
   @supports (text-box: trim-both cap alphabetic) {
-    [data-ui='avatar'] [data-part='fallback']:not(:has(> *)) {
+    [data-ui-avatar] [data-part-fallback]:not(:has(> *)) {
       align-content: center;
       display: block;
       text-align: center;
@@ -413,8 +422,29 @@
    * resolve in the order `STATE_PRECEDENCE` declares with no selector weight
    * standing in for the order.
    */
-  [data-ui='avatar'][data-part='root'][data-status='loaded'] {
+  [data-ui-avatar][data-part-root][data-status='loaded'] {
+    /* The picture is the avatar once it has loaded: the tone's ground stood
+       behind it, and a logo with transparency designed for a white ground
+       vanished on the dark tint. */
+    --_ground: transparent;
+    --_edge: var(--slotted-border-subtle, ButtonBorder);
+  }
+
+  /**
+   * The ground, when the consumer chooses it. `none` paints none, the fallback
+   * included: initials standing on the page. `plate` paints a light plate in
+   * every scheme, for a logo designed for a white ground; the hairline keeps
+   * it apart from a light page, and the fallback's ink is dark on it.
+   */
+  [data-ui-avatar][data-part-root][data-surface='none'] {
+    --_ground: transparent;
+  }
+
+  [data-ui-avatar][data-part-root][data-surface='plate'] {
     --_edge: var(--slotted-border-subtle, ButtonBorder);
+    --_ground: var(--slotted-avatar-plate-surface, #ffffff);
+
+    color: var(--slotted-avatar-plate-color, #1f2937);
   }
 
   /* ── Disabled ─────────────────────────────────────────────────────────── */
@@ -425,7 +455,7 @@
    * disabled foreground, which the theme holds against the disabled ground, and
    * the photograph loses its colour rather than its contrast.
    */
-  [data-ui='avatar'][data-part='root'][data-disabled] {
+  [data-ui-avatar][data-part-root][data-disabled] {
     --_solid: var(--slotted-disabled-background, Canvas);
     --_on-solid: var(--slotted-disabled-foreground, GrayText);
     --_surface: var(--slotted-disabled-background, Canvas);
@@ -440,7 +470,7 @@
    * has no photograph at all. Grey alone kept every luminance, which made a
    * deactivated portrait the strongest thing in a row of disabled avatars.
    */
-  [data-ui='avatar'][data-part='root'][data-disabled] [data-part='image'] {
+  [data-ui-avatar][data-part-root][data-disabled] [data-part-image] {
     filter: var(--slotted-avatar-disabled-image-filter, grayscale(1) opacity(0.5));
   }
 
@@ -456,9 +486,9 @@
    * A weak state held back for the stronger one: a disabled avatar answers no
    * hover, which is the rule that test exists to keep.
    */
-  [data-ui='avatar'][data-part='root']:any-link,
-  button[data-ui='avatar'][data-part='root'],
-  [data-ui='avatar'][data-part='root'][tabindex] {
+  [data-ui-avatar][data-part-root]:any-link,
+  button[data-ui-avatar][data-part-root],
+  [data-ui-avatar][data-part-root][tabindex] {
     cursor: pointer;
     /**
      * The target below hangs outside the box on purpose. A box whose content
@@ -492,9 +522,9 @@
    * Press exists because `render` makes the root a link or a button, and a
    * command that does not answer the press reads as one that did not register.
    */
-  [data-ui='avatar'][data-part='root']:any-link:not([data-disabled]):hover,
-  button[data-ui='avatar'][data-part='root']:not([data-disabled]):hover,
-  [data-ui='avatar'][data-part='root'][tabindex]:not([data-disabled]):hover {
+  [data-ui-avatar][data-part-root]:any-link:not([data-disabled]):hover,
+  button[data-ui-avatar][data-part-root]:not([data-disabled]):hover,
+  [data-ui-avatar][data-part-root][tabindex]:not([data-disabled]):hover {
     background-color: color-mix(
       in oklab,
       var(--_ground),
@@ -502,9 +532,9 @@
     );
   }
 
-  [data-ui='avatar'][data-part='root']:any-link:not([data-disabled]):active,
-  button[data-ui='avatar'][data-part='root']:not([data-disabled]):active,
-  [data-ui='avatar'][data-part='root'][tabindex]:not([data-disabled]):active {
+  [data-ui-avatar][data-part-root]:any-link:not([data-disabled]):active,
+  button[data-ui-avatar][data-part-root]:not([data-disabled]):active,
+  [data-ui-avatar][data-part-root][tabindex]:not([data-disabled]):active {
     background-color: color-mix(
       in oklab,
       var(--_ground),
@@ -525,17 +555,17 @@
    * declaration of the same token win without either file knowing the order
    * the other is loaded in.
    */
-  [data-ui='avatar'][data-status='loaded']:any-link:not([data-disabled]):hover,
-  button[data-ui='avatar'][data-status='loaded']:not([data-disabled]):hover,
-  [data-ui='avatar'][data-status='loaded'][tabindex]:not([data-disabled]):hover {
+  [data-ui-avatar][data-status='loaded']:any-link:not([data-disabled]):hover,
+  button[data-ui-avatar][data-status='loaded']:not([data-disabled]):hover,
+  [data-ui-avatar][data-status='loaded'][tabindex]:not([data-disabled]):hover {
     --_edge: var(--slotted-border-strong, CanvasText);
     --slotted-avatar-ring-width: var(--slotted-border-width-thin, 1px);
     --slotted-avatar-ring-color: var(--slotted-border-strong, CanvasText);
   }
 
-  [data-ui='avatar'][data-status='loaded']:any-link:not([data-disabled]):active,
-  button[data-ui='avatar'][data-status='loaded']:not([data-disabled]):active,
-  [data-ui='avatar'][data-status='loaded'][tabindex]:not([data-disabled]):active {
+  [data-ui-avatar][data-status='loaded']:any-link:not([data-disabled]):active,
+  button[data-ui-avatar][data-status='loaded']:not([data-disabled]):active,
+  [data-ui-avatar][data-status='loaded'][tabindex]:not([data-disabled]):active {
     --slotted-avatar-ring-width: var(--slotted-border-width-thick, 2px);
   }
 
@@ -544,7 +574,7 @@
    * on its own, and a ring that appears only where a family expects focus is a
    * ring that goes missing the first time a consumer makes one a link.
    */
-  [data-ui='avatar'][data-part='root']:focus-visible {
+  [data-ui-avatar][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);
   }
@@ -570,9 +600,9 @@
    * Fluent ships a 16-pixel avatar and Atlassian a 16- and a 20-pixel one, and
    * both accept a click on it as it stands.
    */
-  [data-ui='avatar'][data-part='root']:any-link::after,
-  button[data-ui='avatar'][data-part='root']::after,
-  [data-ui='avatar'][data-part='root'][tabindex]::after {
+  [data-ui-avatar][data-part-root]:any-link::after,
+  button[data-ui-avatar][data-part-root]::after,
+  [data-ui-avatar][data-part-root][tabindex]::after {
     content: '';
     inset: min(0px, calc((100% - var(--slotted-target-min, 24px)) / 2));
     position: absolute;
@@ -591,7 +621,7 @@
    * photograph.
    */
   @media (forced-colors: active) {
-    [data-ui='avatar'][data-part='root'] {
+    [data-ui-avatar][data-part-root] {
       --_edge: currentColor;
     }
   }

package/src/avatar/avatar.tokens.json

@@ -6,6 +6,8 @@
   "--slotted-avatar-font-weight",
   "--slotted-avatar-glyph-size",
   "--slotted-avatar-initials-size",
+  "--slotted-avatar-plate-color",
+  "--slotted-avatar-plate-surface",
   "--slotted-avatar-radius",
   "--slotted-avatar-ring-color",
   "--slotted-avatar-ring-width",
@@ -46,6 +48,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-hover",

package/src/avatar-group/avatar-group.css

@@ -12,7 +12,7 @@
    * the decision `button-group` already took for the same question: a second
    * way to name one thing is a second thing to get wrong.
    */
-  [data-ui='avatar-group'][data-part='root'] {
+  [data-ui-avatar-group][data-part-root] {
     /**
      * How much of a member the next one covers, as a fraction of its own box.
      * A proportion rather than a step of the space scale, because what has to
@@ -76,12 +76,12 @@
    * beside it drifts for a reason nobody can see in the markup. The same
    * decision `button-group` took.
    */
-  [data-ui='avatar-group'][data-part='root']:empty {
+  [data-ui-avatar-group][data-part-root]:empty {
     display: none;
   }
 
-  [data-ui='avatar-group'] [data-part='item'],
-  [data-ui='avatar-group'] [data-part='overflow'] {
+  [data-ui-avatar-group] [data-part-item],
+  [data-ui-avatar-group] [data-part-overflow] {
     display: flex;
     /* Not a stacking context: `z-index` stays `auto` so a member raised on
        hover rises above its neighbours rather than only inside its own item. */
@@ -95,30 +95,29 @@
    * curve of the state it arrives at, which is why the rest rule carries the
    * exit.
    */
-  [data-ui='avatar-group'][data-part='root'][data-layout='stack']
-    [data-ui='avatar'][data-part='root'] {
+  [data-ui-avatar-group][data-part-root][data-layout='stack'] [data-ui-avatar][data-part-root] {
     transition-timing-function: var(--slotted-easing-exit);
   }
 
   /* ── Size ─────────────────────────────────────────────────────────────── */
 
-  [data-ui='avatar-group'][data-part='root'][data-size='xs'] {
+  [data-ui-avatar-group][data-part-root][data-size='xs'] {
     --slotted-avatar-size: var(--slotted-avatar-size-xs, 24px);
   }
 
-  [data-ui='avatar-group'][data-part='root'][data-size='sm'] {
+  [data-ui-avatar-group][data-part-root][data-size='sm'] {
     --slotted-avatar-size: var(--slotted-avatar-size-sm, 28px);
   }
 
-  [data-ui='avatar-group'][data-part='root'][data-size='md'] {
+  [data-ui-avatar-group][data-part-root][data-size='md'] {
     --slotted-avatar-size: var(--slotted-avatar-size-md, 36px);
   }
 
-  [data-ui='avatar-group'][data-part='root'][data-size='lg'] {
+  [data-ui-avatar-group][data-part-root][data-size='lg'] {
     --slotted-avatar-size: var(--slotted-avatar-size-lg, 48px);
   }
 
-  [data-ui='avatar-group'][data-part='root'][data-size='xl'] {
+  [data-ui-avatar-group][data-part-root][data-size='xl'] {
     --slotted-avatar-size: var(--slotted-avatar-size-xl, 64px);
   }
 
@@ -132,7 +131,7 @@
    * Members are not wrapped: a stack that broke across two lines would leave
    * the last face of the first line overlapping nothing.
    */
-  [data-ui='avatar-group'][data-part='root'][data-layout='stack'] {
+  [data-ui-avatar-group][data-part-root][data-layout='stack'] {
     flex-wrap: nowrap;
   }
 
@@ -141,7 +140,7 @@
    * so the stack has one curve per face instead of a second thick ring layered
    * over every member.
    */
-  [data-ui='avatar-group'][data-part='root'][data-layout='stack'] > * + * {
+  [data-ui-avatar-group][data-part-root][data-layout='stack'] > * + * {
     /* Whole pixels: 0.28 of 36 is 10.08, which left every member after the
        first on a fractional x (50.92, 76.84, 102.77) and softened its edge. */
     margin-inline-start: calc(round(nearest, calc(var(--_size) * var(--_overlap)), 1px) * -1);
@@ -152,7 +151,7 @@
    * to go somewhere, and a group laid out apart has no stacking order to lose
    * by breaking.
    */
-  [data-ui='avatar-group'][data-part='root'][data-layout='spread'] {
+  [data-ui-avatar-group][data-part-root][data-layout='spread'] {
     flex-wrap: wrap;
     /**
      * A step of the space scale rather than a proportion of the avatar, because
@@ -206,8 +205,8 @@
    * neighbours keep the box they had at rest, in three schemes and three
    * densities.
    */
-  [data-ui='avatar-group'][data-layout='stack']
-    [data-ui='avatar'][data-part='root']:not([data-disabled]):hover {
+  [data-ui-avatar-group][data-layout='stack']
+    [data-ui-avatar][data-part-root]:not([data-disabled]):hover {
     --slotted-avatar-ring-width: var(--_raise-ring);
     --slotted-avatar-elevation: var(--_raise-shadow);
 
@@ -216,7 +215,7 @@
     transition-timing-function: var(--slotted-easing-enter);
   }
 
-  [data-ui='avatar-group'][data-layout='stack'] [data-ui='avatar'][data-part='root']:focus-visible {
+  [data-ui-avatar-group][data-layout='stack'] [data-ui-avatar][data-part-root]:focus-visible {
     z-index: 1;
     transform: translateY(var(--_raise-lift));
     transition-timing-function: var(--slotted-easing-enter);
@@ -227,8 +226,8 @@
    * translate and not a scale for the reason the lift is (R7), and it is a
    * different answer from the hover, which is the whole point of a press.
    */
-  [data-ui='avatar-group'][data-layout='stack']
-    [data-ui='avatar'][data-part='root']:not([data-disabled]):active {
+  [data-ui-avatar-group][data-layout='stack']
+    [data-ui-avatar][data-part-root]:not([data-disabled]):active {
     transform: translateY(calc(var(--_raise-lift) / 2));
   }
 
@@ -240,12 +239,12 @@
    * not move is a light source switching on.
    */
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='avatar-group'][data-part='root'][data-layout='stack'] {
+    [data-ui-avatar-group][data-part-root][data-layout='stack'] {
       --_raise-lift: 0px;
       --_raise-shadow: 0 0 transparent;
     }
 
-    [data-ui='avatar-group'][data-layout='stack'] [data-ui='avatar'][data-part='root'] {
+    [data-ui-avatar-group][data-layout='stack'] [data-ui-avatar][data-part-root] {
       transition: none;
     }
   }
@@ -260,7 +259,7 @@
    * from jittering as the count crosses a power of ten, which is the same rule
    * `badge` applies to its own count.
    */
-  [data-ui='avatar-group'] [data-part='overflow'] [data-ui='avatar'][data-part='root'] {
+  [data-ui-avatar-group] [data-part-overflow] [data-ui-avatar][data-part-root] {
     --slotted-avatar-initials-size: round(nearest, calc(var(--_size) * 0.36), 1px);
 
     font-variant-numeric: tabular-nums;