@dialpad/dialtone-css 8.74.0-next.1 → 8.74.0-next.3

package/lib/build/less/recipes/attachment_carousel.less

@@ -19,11 +19,16 @@
 .d-recipe-attachment-carousel__arrow {
   position: absolute;
   inset-block-start: var(--dt-size-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-size-100) solid;
-  border-color: var(--bc-default);
+  border-color: var(--dt-color-border-moderate-inverted);
   border-width: var(--dt-size-100);
   opacity: 0;
+
+  &:hover {
+    color: var(--dt-color-foreground-primary-inverted);
+  }
 }
 
 .d-recipe-attachment-carousel:hover .d-recipe-attachment-carousel__arrow {
@@ -46,12 +51,13 @@
   position: absolute;
   inset-block-start: inherit;
   inset-inline-end: inherit;
-  color: var(--dt-color-neutral-white);
-  background-color: var(--dt-color-black-400);
-  border: var(--dt-size-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;
+
+  &: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 {
@@ -79,33 +85,8 @@
   inset-block-start: inherit;
   inset-inline-end: inherit;
   display: flex;
-  background-color: var(--dt-color-neutral-white);
-  border: var(--dt-size-100) solid;
-  border-color: var(--dt-color-border-subtle);
-  border-width: var(--dt-size-200);
-  border-radius: 50%;
-  transform: rotate(-90deg);
-}
-
-.d-recipe-attachment-carousel__progress-bar {
-  inline-size: var(--dt-size-550);
-  block-size: 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-800);
-  stroke-dashoffset: var(--stroke-dashoffset);
+  padding: var(--dt-size-300);
+  background-color: var(--dt-color-surface-moderate);
+  border-radius: var(--dt-size-radius-circle);
 }
 }

package/lib/build/less/variables/sizes.less

@@ -11,7 +11,7 @@
 //  ----------------------------------------------------------------------------
 
 #d-internal__input-and-select-xs() {
-    --input-padding-y: calc(calc(var(--dt-size-400) - var(--dt-size-100)) - var(--input-border-width));
+    --input-padding-y: calc(calc(var(--dt-size-350) - var(--dt-size-100)) - var(--input-border-width));
     --input-padding-x: calc(var(--dt-size-400) - var(--input-border-width));
     --input-border-radius: var(--dt-inputs-size-radius-xs);
     --input-typography: var(--dt-typography-inputs-xs);
@@ -25,7 +25,7 @@
 //  $$  SMALL
 //  ----------------------------------------------------------------------------
 #d-internal__input-and-select-sm() {
-    --input-padding-y: calc(var(--dt-size-400) - var(--input-border-width));
+    --input-padding-y: calc(var(--dt-size-350) - var(--input-border-width));
     --input-padding-x: calc((var(--dt-size-500) - var(--dt-size-300)) - var(--input-border-width));
     --input-typography: var(--dt-typography-inputs-sm);
     --input-border-radius: var(--dt-inputs-size-radius-sm);