@dialpad/dialtone 9.143.0 → 9.145.0

package/README.md

@@ -447,6 +447,27 @@ Example:
 nx run dialtone-documentation:build
 ```
 
+##### Clean build artifacts and cache
+
+Use this to clear stale build artifacts and reset the build cache. Common scenarios include switching branches, troubleshooting unexpected build behavior, or recovering from interrupted builds. This is rarely needed because build scripts already clean their own dist folders and Nx cache invalidation handles most staleness automatically.
+
+```bash
+# Clean everything (dist folders and Nx cache)
+pnpm clean
+
+# Clean only dist folders (stale build artifacts)
+pnpm clean:dist
+
+# Clean only Nx cache (confused incremental builds)
+pnpm clean:cache
+```
+
+What gets cleaned:
+
+- `clean:dist` removes `packages/dialtone-tokens/dist` and VuePress cache/temp directories
+- `clean:cache` clears Nx's build cache (`.nx/cache`)
+- `clean` runs both in sequence
+
 ##### Use local package in another project
 
 A way to see local Dialtone changes in a local running frontend is to use a local package.

package/dist/css/dialtone-default-theme.css

@@ -1019,6 +1019,7 @@ template {
   --avatar-presence-position-right: var(--dt-space-200-negative);
   --avatar-presence-position-bottom: var(--dt-space-200-negative);
   --avatar-count-color-shadow: var(--dt-shell-color-surface-default);
+  --avatar-presence-mask-size: calc(var(--dt-size-450) + var(--dt-size-50));
   position: relative;
   display: flex;
   color: var(--avatar-color-text);
@@ -1084,21 +1085,21 @@ template {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--avatar-size-shape);
-  height: var(--avatar-size-shape);
+  inline-size: var(--avatar-size-shape);
+  block-size: var(--avatar-size-shape);
   overflow: hidden;
   background-color: var(--avatar-color-background);
   border-radius: var(--dt-size-radius-pill);
 }
 .d-avatar__image {
-  width: var(--avatar-size-image);
-  height: var(--avatar-size-image);
+  inline-size: var(--avatar-size-image);
+  block-size: var(--avatar-size-image);
   -o-object-fit: cover;
      object-fit: cover;
   border-radius: var(--dt-size-radius-pill);
 }
 .d-avatar--image-loaded {
-  background-color: transparent;
+  background-color: var(--dt-color-neutral-transparent);
   background-image: unset;
 }
 .d-avatar__initials {
@@ -1141,15 +1142,16 @@ template {
   background-color: var(--dt-color-surface-strong);
   border-radius: var(--dt-size-radius-pill);
   box-shadow: 0 0 0 var(--dt-size-200) var(--avatar-count-color-shadow);
+  --avatar-count-color-shadow: var(--dt-color-neutral-transparent);
 }
 .d-recipe-leftbar-row--selected .d-avatar__count,
 .d-recipe-leftbar-row__primary:hover .d-avatar__count {
   --avatar-count-color-shadow: var(--dt-shell-action-color-background-primary-hover);
 }
 .d-avatar--clickable {
-  --avatar-color-border: transparent;
+  --avatar-color-border: var(--dt-color-neutral-transparent);
   padding: 0;
-  background-color: transparent;
+  background-color: var(--dt-color-neutral-transparent);
   border: var(--dt-size-border-100) solid var(--avatar-color-border);
   border-radius: var(--dt-size-radius-circle);
   cursor: pointer;
@@ -1172,18 +1174,18 @@ template {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--dt-size-100-percent);
-  height: var(--dt-size-100-percent);
+  inline-size: var(--dt-size-100-percent);
+  block-size: var(--dt-size-100-percent);
   background-color: var(--dt-color-surface-contrast-opaque);
   border-radius: var(--dt-size-radius-circle);
   opacity: var(--dt-opacity-900);
 }
 .d-avatar__overlay-icon {
-  width: var(--dt-size-100-percent);
+  inline-size: var(--dt-size-100-percent);
   color: var(--dt-color-foreground-primary-inverted);
 }
 .d-avatar__overlay-text {
-  width: var(--dt-size-100-percent);
+  inline-size: var(--dt-size-100-percent);
   color: var(--dt-color-foreground-primary-inverted);
   font-weight: var(--dt-font-weight-bold);
   font-size: var(--dt-font-size-200);
@@ -1193,35 +1195,120 @@ template {
   --avatar-size-shape: calc(var(--dt-size-500) + var(--dt-size-200));
   --avatar-presence-position-right: var(--dt-space-300-negative);
   --avatar-presence-position-bottom: var(--dt-space-300-negative);
+  --avatar-presence-mask-offset-x: var(--dt-space-200);
+  --avatar-presence-mask-offset-y: var(--dt-space-200);
 }
 .d-avatar--sm {
   --avatar-size-shape: var(--dt-size-550);
   --avatar-size-text: var(--dt-font-size-100);
   --avatar-presence-position-right: var(--dt-space-200-negative);
   --avatar-presence-position-bottom: var(--dt-space-200-negative);
+  --avatar-presence-mask-offset-x: var(--dt-space-300);
+  --avatar-presence-mask-offset-y: var(--dt-space-300);
 }
 .d-avatar--md {
   --avatar-size-shape: var(--dt-size-600);
   --avatar-size-text: var(--dt-font-size-200);
   --avatar-presence-position-right: var(--dt-space-100-negative);
   --avatar-presence-position-bottom: var(--dt-space-100-negative);
+  --avatar-presence-mask-offset-x: calc(var(--dt-space-350) - var(--dt-space-100));
+  --avatar-presence-mask-offset-y: calc(var(--dt-space-350) - var(--dt-space-100));
 }
 .d-avatar--lg {
   --avatar-size-shape: var(--dt-size-650);
   --avatar-size-text: var(--dt-font-size-300);
   --avatar-presence-position-right: var(--dt-space-100);
   --avatar-presence-position-bottom: var(--dt-space-100);
+  --avatar-presence-mask-offset-x: calc(var(--dt-space-400) - var(--dt-space-100));
+  --avatar-presence-mask-offset-y: calc(var(--dt-space-400) - var(--dt-space-100));
 }
 .d-avatar--xl {
   --avatar-size-shape: var(--dt-size-700);
   --avatar-size-text: var(--dt-font-size-400);
   --avatar-presence-position-right: var(--dt-space-300);
   --avatar-presence-position-bottom: var(--dt-space-300);
+  --avatar-presence-mask-offset-x: calc(var(--dt-space-450) - var(--dt-space-200));
+  --avatar-presence-mask-offset-y: calc(var(--dt-space-450) - var(--dt-space-200));
+}
+.d-avatar--presence > .d-avatar__canvas,
+.d-avatar--presence > .d-avatar__overlay {
+  -webkit-mask: radial-gradient(circle calc(var(--avatar-presence-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-x)) calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-y)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
+          mask: radial-gradient(circle calc(var(--avatar-presence-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-x)) calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-y)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
+}
+.d-avatar--presence.d-avatar--clickable {
+  border-color: var(--dt-color-neutral-transparent);
+}
+.d-avatar--presence.d-avatar--clickable::before {
+  position: absolute;
+  background-color: var(--dt-color-neutral-transparent);
+  border: var(--dt-size-border-100) solid var(--avatar-color-border);
+  border-radius: var(--dt-size-radius-circle);
+  content: "";
+  inset: calc(var(--dt-space-100) * -1);
+  -webkit-mask: radial-gradient(circle calc(var(--avatar-presence-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-x) - var(--dt-size-100)) calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-y) - var(--dt-size-100)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
+          mask: radial-gradient(circle calc(var(--avatar-presence-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-x) - var(--dt-size-100)) calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-y) - var(--dt-size-100)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
+}
+.d-avatar--presence > .d-presence {
+  --presence-color-border-base: var(--dt-color-neutral-transparent);
+}
+.d-recipe-leftbar-row--selected .d-avatar--presence .d-presence,
+.d-recipe-leftbar-row:hover .d-avatar--presence .d-presence,
+.d-recipe-leftbar-row:focus-within .d-avatar--presence .d-presence,
+.d-recipe-leftbar-row__primary:hover .d-avatar--presence .d-presence {
+  --presence-color-border-base: var(--dt-color-neutral-transparent);
 }
 .d-avatar--group {
   --avatar-size-shape: calc(var(--dt-size-300) * 4.5);
-  width: var(--dt-size-550);
-  height: var(--dt-size-550);
+  inline-size: var(--dt-size-550);
+  block-size: var(--dt-size-550);
+  --avatar-count-mask-size: calc(var(--dt-size-500) + var(--dt-size-200) + var(--dt-size-100));
+  --avatar-count-mask-outer-circle-radius: calc(var(--dt-size-400) + var(--dt-size-100));
+  --avatar-count-mask-outer-circle-x: calc(var(--dt-size-400) + var(--dt-size-100));
+  --avatar-count-mask-outer-circle-y: calc(var(--dt-size-400) + var(--dt-size-100));
+  --avatar-count-mask-offset-x: var(--dt-space-100);
+  --avatar-count-mask-offset-y: var(--dt-space-100);
+  --avatar-count-mask-svg-w: calc(var(--dt-size-625) - var(--dt-size-200));
+  --avatar-count-mask-svg-h: calc(var(--dt-size-500) + var(--dt-size-200));
+  --avatar-count-color-shadow: var(--dt-color-neutral-transparent);
+}
+.d-avatar--group.d-avatar--clickable {
+  border: none !important;
+}
+.d-avatar--group > .d-avatar__canvas,
+.d-avatar--group > .d-avatar__overlay {
+  -webkit-mask: radial-gradient(circle calc(var(--avatar-count-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-count-mask-offset-x)) calc(var(--dt-size-100-percent) - var(--avatar-count-mask-offset-y)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
+          mask: radial-gradient(circle calc(var(--avatar-count-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-count-mask-offset-x)) calc(var(--dt-size-100-percent) - var(--avatar-count-mask-offset-y)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
+  will-change: transform;
+}
+.d-avatar--group-digits-2 {
+  --avatar-count-mask-offset-x: var(--dt-space-300);
+  --avatar-count-mask-offset-y: var(--dt-space-400);
+}
+.d-avatar--group-digits-2 > .d-avatar__canvas,
+.d-avatar--group-digits-2 > .d-avatar__overlay {
+  -webkit-mask: radial-gradient(circle var(--avatar-count-mask-outer-circle-radius) at var(--avatar-count-mask-outer-circle-x) var(--avatar-count-mask-outer-circle-y), var(--dt-color-neutral-white) 99%, var(--dt-color-neutral-transparent) var(--dt-size-100-percent)), url('data:image/svg+xml,<svg width="40" height="18" viewBox="0 0 40 18" fill="white" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="18" rx="9" fill="white"/></svg>') var(--avatar-count-mask-offset-x) var(--avatar-count-mask-offset-y) / var(--avatar-count-mask-svg-w) var(--avatar-count-mask-svg-h) no-repeat;
+          mask: radial-gradient(circle var(--avatar-count-mask-outer-circle-radius) at var(--avatar-count-mask-outer-circle-x) var(--avatar-count-mask-outer-circle-y), var(--dt-color-neutral-white) 99%, var(--dt-color-neutral-transparent) var(--dt-size-100-percent)), url('data:image/svg+xml,<svg width="40" height="18" viewBox="0 0 40 18" fill="white" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="18" rx="9" fill="white"/></svg>') var(--avatar-count-mask-offset-x) var(--avatar-count-mask-offset-y) / var(--avatar-count-mask-svg-w) var(--avatar-count-mask-svg-h) no-repeat;
+  -webkit-mask-composite: subtract;
+  mask-composite: subtract;
+  will-change: transform;
+}
+.d-avatar--group-digits-2 > .d-avatar__count {
+  inline-size: calc(var(--dt-size-500) + var(--dt-size-200));
+}
+.d-avatar--group-digits-3 {
+  --avatar-count-mask-offset-x: var(--dt-space-300-negative);
+  --avatar-count-mask-offset-y: var(--dt-space-400);
+}
+.d-avatar--group-digits-3 > .d-avatar__canvas,
+.d-avatar--group-digits-3 > .d-avatar__overlay {
+  -webkit-mask: radial-gradient(circle var(--avatar-count-mask-outer-circle-radius) at var(--avatar-count-mask-outer-circle-x) var(--avatar-count-mask-outer-circle-y), var(--dt-color-neutral-white) 99%, var(--dt-color-neutral-transparent) var(--dt-size-100-percent)), url('data:image/svg+xml,<svg width="40" height="18" viewBox="0 0 40 18" fill="white" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="18" rx="9" /></svg>') var(--avatar-count-mask-offset-x) var(--avatar-count-mask-offset-y) / var(--avatar-count-mask-svg-w) var(--avatar-count-mask-svg-h) no-repeat;
+          mask: radial-gradient(circle var(--avatar-count-mask-outer-circle-radius) at var(--avatar-count-mask-outer-circle-x) var(--avatar-count-mask-outer-circle-y), var(--dt-color-neutral-white) 99%, var(--dt-color-neutral-transparent) var(--dt-size-100-percent)), url('data:image/svg+xml,<svg width="40" height="18" viewBox="0 0 40 18" fill="white" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="18" rx="9" /></svg>') var(--avatar-count-mask-offset-x) var(--avatar-count-mask-offset-y) / var(--avatar-count-mask-svg-w) var(--avatar-count-mask-svg-h) no-repeat;
+  -webkit-mask-composite: subtract;
+  mask-composite: subtract;
+  will-change: transform;
+}
+.d-avatar--group-digits-3 > .d-avatar__count {
+  inline-size: calc(var(--dt-size-550) + var(--dt-size-200));
 }
 .d-badge {
   --badge-color-text: var(--dt-badge-color-foreground-default);