@dialpad/dialtone 8.10.1-version8.1 → 8.10.3-version8.1

package/lib/build/less/components/item-layout.less

@@ -36,12 +36,10 @@
   }
 
   &--right {
-    align-self: flex-start;
     padding-left: var(--dt-space-400);
   }
 
   &--left {
-    align-self: flex-start;
     justify-content: flex-end;
     padding-right: var(--dt-space-400);
   }

package/lib/build/less/components/modal.less

@@ -25,7 +25,7 @@
 .d-modal {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --modal-backdrop-color-background: hsla(var(--dt-color-neutral-black-hsl) / 0.7); // TODO: token candidate
+    --modal-backdrop-color-background: var(--dt-color-surface-backdrop);
     --modal-dialog-padding: var(--dt-space-600);
     --modal-dialog-color-background: var(--dt-color-surface-primary);
     --modal-dialog-color-border: var(--dt-color-border-subtle);

package/lib/build/less/utilities/colors.less

@@ -55,6 +55,7 @@
 .d-bgc-bold-opaque { background-color: var(--dt-color-surface-bold-opaque) !important; }
 .d-bgc-strong { background-color: var(--dt-color-surface-strong) !important; }
 .d-bgc-contrast { background-color: var(--dt-color-surface-contrast) !important; }
+.d-bgc-backdrop { background-color: var(--dt-color-surface-backdrop) !important; }
 .d-bgc-success { background-color: var(--dt-color-surface-success) !important; }
 .d-bgc-success-opaque { background-color: var(--dt-color-surface-success-opaque) !important; }
 .d-bgc-success-subtle { background-color: var(--dt-color-surface-success-subtle) !important; }

package/lib/dist/css/dialtone.css

@@ -2253,7 +2253,7 @@ legend .d-label {
   background-color: hsl(var(--dt-color-purple-400-h) var(--dt-color-purple-400-s) calc(var(--dt-color-purple-400-l) + 10%));
 }
 .d-modal {
-  --modal-backdrop-color-background: hsla(var(--dt-color-neutral-black-hsl) / 0.7);
+  --modal-backdrop-color-background: var(--dt-color-surface-backdrop);
   --modal-dialog-padding: var(--dt-space-600);
   --modal-dialog-color-background: var(--dt-color-surface-primary);
   --modal-dialog-color-border: var(--dt-color-border-subtle);
@@ -3905,11 +3905,9 @@ legend .d-label {
   min-width: var(--dt-size-600);
 }
 .dt-item-layout--right {
-  align-self: flex-start;
   padding-left: var(--dt-space-400);
 }
 .dt-item-layout--left {
-  align-self: flex-start;
   justify-content: flex-end;
   padding-right: var(--dt-space-400);
 }
@@ -4500,6 +4498,9 @@ legend .d-label {
 .d-bgc-contrast, .h\:d-bgc-contrast:hover, .f\:d-bgc-contrast:focus, .f\:d-bgc-contrast:focus-within, .fv\:d-bgc-contrast:focus-visible {
   background-color: var(--dt-color-surface-contrast) !important;
 }
+.d-bgc-backdrop, .h\:d-bgc-backdrop:hover, .f\:d-bgc-backdrop:focus, .f\:d-bgc-backdrop:focus-within, .fv\:d-bgc-backdrop:focus-visible {
+  background-color: var(--dt-color-surface-backdrop) !important;
+}
 .d-bgc-success, .h\:d-bgc-success:hover, .f\:d-bgc-success:focus, .f\:d-bgc-success:focus-within, .fv\:d-bgc-success:focus-visible {
   background-color: var(--dt-color-surface-success) !important;
 }
@@ -7132,7 +7133,7 @@ body {
 }
 /**
  * Do not edit directly
- * Generated on Thu, 15 Jun 2023 16:21:07 GMT
+ * Generated on Mon, 24 Jul 2023 16:30:53 GMT
  */
 
 .dialtone-theme-light {
@@ -7244,6 +7245,7 @@ body {
   --dt-color-surface-bold-opaque: rgba(0, 0, 0, 0.18);
   --dt-color-surface-strong-opaque: rgba(0, 0, 0, 0.67);
   --dt-color-surface-contrast-opaque: rgba(0, 0, 0, 0.87);
+  --dt-color-surface-backdrop: rgba(0, 0, 0, 0.7);
   --dt-color-surface-critical-opaque: rgba(236, 14, 14, 0.11);
   --dt-color-surface-critical-subtle-opaque: rgba(236, 14, 14, 0.05);
   --dt-color-surface-warning-opaque: rgba(255, 219, 128, 0.38);
@@ -7917,7 +7919,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 Jun 2023 16:21:07 GMT
+ * Generated on Mon, 24 Jul 2023 16:30:53 GMT
  */
 
 .dialtone-theme-dark {
@@ -8000,7 +8002,7 @@ body {
   --dt-color-foreground-success-inverted: #1aa340;
   --dt-color-foreground-success-strong-inverted: #124620;
   --dt-color-foreground-warning-inverted: #815008;
-  --dt-color-link-primary: #ab7eff;
+  --dt-color-link-primary: #b790ff;
   --dt-color-link-critical: #ff8585;
   --dt-color-link-success: #b0ffa3;
   --dt-color-link-warning: #ffdb80;
@@ -8024,7 +8026,7 @@ body {
   --dt-color-link-muted-inverted-hover: #000000;
   --dt-color-link-disabled-inverted: #808080;
   --dt-color-link-disabled-inverted-hover: #808080;
-  --dt-color-surface-primary: #1a1a1a;
+  --dt-color-surface-primary: #1f1f1f;
   --dt-color-surface-secondary: #262626;
   --dt-color-surface-moderate: #3a3a3a;
   --dt-color-surface-bold: #555555;
@@ -8051,6 +8053,7 @@ body {
   --dt-color-surface-success-subtle-opaque: rgba(9, 35, 16, 0.5);
   --dt-color-surface-info-opaque: rgba(23, 105, 198, 0.29);
   --dt-color-surface-info-subtle-opaque: rgba(1, 30, 65, 0.5);
+  --dt-color-surface-backdrop: rgba(0, 0, 0, 0.7);
   --dt-color-surface-critical-strong: #ff8585;
   --dt-color-surface-warning-strong: #d28f2b;
   --dt-color-surface-success-strong: #b0ffa3;
@@ -8197,11 +8200,11 @@ body {
   --dt-action-color-background-critical-primary-hover: #D90D0D;
   --dt-action-color-background-critical-primary-active: #C50C0C;
   --dt-action-color-background-inverted-primary-active: #3A1D95;
-  --dt-action-color-background-inverted-primary-default: #1a1a1a;
+  --dt-action-color-background-inverted-primary-default: #1f1f1f;
   --dt-action-color-background-inverted-primary-hover: #10022C;
   --dt-action-color-background-inverted-default: transparent;
-  --dt-action-color-background-inverted-hover: #1a1a1a26;
-  --dt-action-color-background-inverted-active: #1a1a1a4d;
+  --dt-action-color-background-inverted-hover: #1f1f1f26;
+  --dt-action-color-background-inverted-active: #1f1f1f4d;
   --dt-action-color-background-muted-default: transparent;
   --dt-action-color-background-muted-hover: #e9e9e91a;
   --dt-action-color-background-muted-active: #e9e9e929;
@@ -8504,7 +8507,7 @@ body {
   --dt-shadow-small-0-y: 0.2rem;
   --dt-shadow-small-0-blur: 0.4rem;
   --dt-shadow-small-0-spread: 0;
-  --dt-shadow-small-0-color: #00000040;
+  --dt-shadow-small-0-color: #00000073;
   --dt-shadow-small-0-type: dropShadow;
   --dt-shadow-small-1-x: 0.05rem;
   --dt-shadow-small-1-y: 0.05rem;
@@ -8534,7 +8537,7 @@ body {
   --dt-shadow-medium-0-y: 0.2rem;
   --dt-shadow-medium-0-blur: 0.8rem;
   --dt-shadow-medium-0-spread: 0;
-  --dt-shadow-medium-0-color: #00000059;
+  --dt-shadow-medium-0-color: #0000008c;
   --dt-shadow-medium-0-type: dropShadow;
   --dt-shadow-medium-1-x: 0.05rem;
   --dt-shadow-medium-1-y: 0.05rem;
@@ -8564,7 +8567,7 @@ body {
   --dt-shadow-large-0-y: 0.2rem;
   --dt-shadow-large-0-blur: 1.6rem;
   --dt-shadow-large-0-spread: 0;
-  --dt-shadow-large-0-color: #00000066;
+  --dt-shadow-large-0-color: #0000008c;
   --dt-shadow-large-0-type: dropShadow;
   --dt-shadow-large-1-x: -0.05rem;
   --dt-shadow-large-1-y: 0.05rem;
@@ -8594,7 +8597,7 @@ body {
   --dt-shadow-extra-large-0-y: 0.2rem;
   --dt-shadow-extra-large-0-blur: 3.2rem;
   --dt-shadow-extra-large-0-spread: 0;
-  --dt-shadow-extra-large-0-color: #00000066;
+  --dt-shadow-extra-large-0-color: #0000008c;
   --dt-shadow-extra-large-0-type: dropShadow;
   --dt-shadow-extra-large-1-x: 0.05rem;
   --dt-shadow-extra-large-1-y: 0.05rem;
@@ -8624,19 +8627,19 @@ body {
   --dt-shadow-card-0-y: 0.1rem;
   --dt-shadow-card-0-blur: 0.2rem;
   --dt-shadow-card-0-spread: 0;
-  --dt-shadow-card-0-color: #00000021;
+  --dt-shadow-card-0-color: #00000059;
   --dt-shadow-card-0-type: dropShadow;
   --dt-shadow-card-1-x: 0;
   --dt-shadow-card-1-y: 0.2rem;
   --dt-shadow-card-1-blur: 0.4rem;
   --dt-shadow-card-1-spread: 0;
-  --dt-shadow-card-1-color: #00000024;
+  --dt-shadow-card-1-color: #00000073;
   --dt-shadow-card-1-type: dropShadow;
   --dt-shadow-card-2-x: 0;
   --dt-shadow-card-2-y: 0.2rem;
   --dt-shadow-card-2-blur: 1.6rem;
   --dt-shadow-card-2-spread: 0;
-  --dt-shadow-card-2-color: #0000002e;
+  --dt-shadow-card-2-color: #00000094;
   --dt-shadow-card-2-type: dropShadow;
   --dt-shadow-card-3-x: 0.05rem;
   --dt-shadow-card-3-y: 0.05rem;