@dialpad/dialtone 9.166.0 → 9.167.0

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

@@ -3555,6 +3555,8 @@ legend .d-label--md {
 .d-loader__icon {
   -webkit-animation: d-loading-circle 900ms infinite linear;
           animation: d-loading-circle 900ms infinite linear;
+  -webkit-mask-image: conic-gradient(from 270deg, black 0deg, black 105deg, transparent 170deg, transparent 180deg, black 234deg, black 360deg);
+          mask-image: conic-gradient(from 270deg, black 0deg, black 105deg, transparent 170deg, transparent 180deg, black 234deg, black 360deg);
 }
 .d-modal {
   --modal-backdrop-color-background: var(--dt-color-surface-backdrop);
@@ -4241,6 +4243,78 @@ legend .d-label--md {
 .tippy-box[data-popper-reference-hidden] .d-popover__dialog {
   visibility: hidden;
 }
+.d-progress-circle {
+  --progress-size: var(--dt-icon-size-500);
+  --progress-color: var(--dt-color-border-bold);
+  --progress-size-stroke: 3.25;
+  block-size: var(--progress-size);
+  inline-size: var(--progress-size);
+}
+.d-progress-circle--size-100 {
+  --progress-size: var(--dt-icon-size-100);
+}
+.d-progress-circle--size-200 {
+  --progress-size: var(--dt-icon-size-200);
+}
+.d-progress-circle--size-300 {
+  --progress-size: var(--dt-icon-size-300);
+}
+.d-progress-circle--size-400 {
+  --progress-size: var(--dt-icon-size-400);
+}
+.d-progress-circle--size-500 {
+  --progress-size: var(--dt-icon-size-500);
+}
+.d-progress-circle--size-600 {
+  --progress-size: var(--dt-icon-size-600);
+}
+.d-progress-circle--size-700 {
+  --progress-size: var(--dt-icon-size-700);
+}
+.d-progress-circle--size-800 {
+  --progress-size: var(--dt-icon-size-800);
+}
+.d-progress-circle--brand {
+  --progress-color: var(--dt-color-border-brand);
+}
+.d-progress-circle--critical {
+  --progress-color: var(--dt-color-border-critical);
+}
+.d-progress-circle--positive {
+  --progress-color: var(--dt-color-border-success);
+}
+.d-progress-circle--warning {
+  --progress-color: var(--dt-color-border-warning);
+}
+.d-progress-circle--ai {
+  --progress-color: var(--dt-color-border-bold);
+}
+.d-progress-circle--info {
+  --progress-color: var(--dt-color-blue-450);
+}
+.d-progress-circle__bar {
+  display: block;
+  block-size: 100%;
+  inline-size: 100%;
+}
+.d-progress-circle__shape--track {
+  transition: stroke-dasharray var(--td200) linear, stroke-dashoffset var(--td200) linear;
+  stroke: color-mix(in oklch, var(--progress-color) 25%, var(--dt-color-surface-primary));
+  stroke-dasharray: var(--track-dasharray);
+  stroke-dashoffset: var(--track-dashoffset);
+  stroke-linecap: round;
+}
+.d-progress-circle__shape--fill {
+  -webkit-transform: rotate(var(--fill-rotate));
+          transform: rotate(var(--fill-rotate));
+  -webkit-transform-origin: center;
+          transform-origin: center;
+  transition: stroke-dashoffset var(--td200) linear;
+  stroke: var(--progress-color);
+  stroke-dasharray: var(--stroke-dasharray);
+  stroke-dashoffset: var(--fill-dashoffset);
+  stroke-linecap: round;
+}
 .d-checkbox,
 .d-radio {
   --check-radio-color-border: var(--dt-checkbox-color-border-unchecked);
@@ -8851,12 +8925,16 @@ ul {
 .d-recipe-attachment-carousel__arrow {
   position: absolute;
   top: var(--dt-space-30-percent);
-  background-color: var(--dt-color-neutral-white);
+  color: var(--dt-color-foreground-tertiary-inverted);
+  background-color: var(--dt-color-surface-strong);
   border: var(--dt-space-100) solid;
-  border-color: var(--bc-default);
+  border-color: var(--dt-color-border-moderate-inverted);
   border-width: var(--dt-size-100);
   opacity: 0;
 }
+.d-recipe-attachment-carousel__arrow:hover {
+  color: var(--dt-color-foreground-primary-inverted);
+}
 .d-recipe-attachment-carousel:hover .d-recipe-attachment-carousel__arrow {
   opacity: 1;
 }
@@ -8873,13 +8951,13 @@ ul {
   position: absolute;
   top: inherit;
   right: inherit;
-  color: var(--dt-color-neutral-white);
-  background-color: var(--dt-color-black-400);
-  border: var(--dt-space-100) solid;
-  border-color: var(--dt-color-neutral-white);
-  border-width: var(--dt-size-200);
+  color: var(--dt-color-foreground-tertiary-inverted);
+  background-color: var(--dt-color-surface-strong);
   opacity: 0;
 }
+.d-recipe-attachment-carousel__image-close-button:hover {
+  color: var(--dt-color-foreground-primary-inverted);
+}
 .d-recipe-attachment-carousel__image:focus-within .d-recipe-attachment-carousel__image-close-button,
 .d-recipe-attachment-carousel__image:hover .d-recipe-attachment-carousel__image-close-button {
   opacity: 1;
@@ -8904,31 +8982,9 @@ ul {
   top: inherit;
   right: inherit;
   display: flex;
-  background-color: var(--dt-color-neutral-white);
-  border: var(--dt-space-100) solid;
-  border-color: var(--dt-color-border-subtle);
-  border-width: var(--dt-size-200);
-  border-radius: 50%;
-  -webkit-transform: rotate(-90deg);
-          transform: rotate(-90deg);
-}
-.d-recipe-attachment-carousel__progress-bar {
-  width: var(--dt-size-550);
-  height: var(--dt-size-550);
-}
-.d-recipe-attachment-carousel__progress-bar-circle {
-  fill: none;
-  stroke-width: 2;
-  stroke-dasharray: var(--stroke-dasharray);
-}
-.d-recipe-attachment-carousel__progress-bar-circle:nth-child(1) {
-  stroke: var(--dt-color-black-100);
-  stroke-dashoffset: 0;
-}
-.d-recipe-attachment-carousel__progress-bar-circle:nth-child(2) {
-  transition: stroke-dashoffset 500ms linear;
-  stroke: var(--dt-color-purple-500);
-  stroke-dashoffset: var(--stroke-dashoffset);
+  padding: var(--dt-space-300);
+  background-color: var(--dt-color-surface-moderate);
+  border-radius: var(--dt-size-radius-circle);
 }
 .d-recipe-callbar-button {
   padding-right: var(--dt-space-0);