@dialpad/dialtone 6.40.0 → 6.41.0

package/lib/build/less/components/input.less

@@ -18,19 +18,12 @@
 //    - Sizes
 //  • INPUT ICONS
 //
-//  ============================================================================
-//  Inputs CSS Vars
-//  ----------------------------------------------------------------------------
-@inputs-icon-spacing--xs: calc(var(--su4) + @icon12 + var(--su8));
-@inputs-icon-spacing--sm: calc(var(--su4) + @icon14 + var(--su8));
-@inputs-icon-spacing:     calc(var(--su4) + @icon16 + var(--su8));
-@inputs-icon-spacing--lg: calc(var(--su4) + @icon20 + var(--su8));
-@inputs-icon-spacing--xl: calc(var(--su4) + @icon24 + var(--su8));
 
 //  $  INPUTS
 //  ----------------------------------------------------------------------------
 .d-input,
-.d-textarea {
+.d-textarea,
+.d-input__wrapper {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
     --input--focus-bc: var(--primary-color);
@@ -59,14 +52,6 @@
     transition-duration: 100ms;
     transition-property: border, box-shadow, background-color;
 
-    &.d-input-icon--right {
-        padding-right: @inputs-icon-spacing;
-    }
-
-    &.d-input-icon--left {
-        padding-left: @inputs-icon-spacing;
-    }
-
     //  --  Placeholder copy
     &::placeholder {
         color: var(--black-300);
@@ -76,7 +61,8 @@
         display: none;
     }
     //  --  FOCUS
-    &:focus {
+    &:focus,
+    &:focus-within {
         --input--bc: var(--input--focus-bc);
 
         outline: 0;
@@ -89,7 +75,8 @@
         --input--bgc: var(--black-075);
         --input--fc: var(--black-400);
 
-        &:focus {
+        &:focus,
+        &:focus-within {
             box-shadow: none !important;
         }
 
@@ -107,57 +94,54 @@
 //  $$  INPUT WRAPPER
 //  ----------------------------------------------------------------------------
 .d-input__wrapper {
-    position: relative;
+    padding: 0;
+
+    .d-input-icon.d-input-icon--right {
+        margin-right: var(--su8);
+    }
+
+    .d-input-icon.d-input-icon--left {
+        margin-left: var(--su8);
+    }
+
+    .d-input,
+    .d-textarea {
+        flex: 1;
+        border: none;
+        border-radius: var(--base--corner-radius);
+
+        &:focus {
+            border: none;
+            outline: 0;
+            box-shadow: none !important;
+        }
+
+        &.d-input-icon--right {
+            padding-right: var(--su6);
+        }
+
+        &.d-input-icon--left {
+            padding-left: var(--su6);
+        }
+    }
 }
 
 //  $$  SIZES
 //  ----------------------------------------------------------------------------
 .d-input.d-input--xs {
     .input-button-xs();
-
-    &.d-input-icon--right {
-        padding-right: @inputs-icon-spacing--xs;
-    }
-
-    &.d-input-icon--left {
-        padding-left: @inputs-icon-spacing--xs;
-    }
 }
 
 .d-input.d-input--sm {
     .input-button-sm();
-
-    &.d-input-icon--right {
-        padding-right: @inputs-icon-spacing--sm;
-    }
-
-    &.d-input-icon--left {
-        padding-left: @inputs-icon-spacing--sm;
-    }
 }
 
 .d-input.d-input--lg {
     .input-button-lg();
-
-    &.d-input-icon--right {
-        padding-right: @inputs-icon-spacing--lg;
-    }
-
-    &.d-input-icon--left {
-        padding-left: @inputs-icon-spacing--lg;
-    }
 }
 
 .d-input.d-input--xl {
     .input-button-xl();
-
-    &.d-input-icon--right {
-        padding-right: @inputs-icon-spacing--xl;
-    }
-
-    &.d-input-icon--left {
-        padding-left: @inputs-icon-spacing--xl;
-    }
 }
 
 
@@ -175,56 +159,24 @@
     .input-button-xs();
 
     min-height: 4rem;
-
-    &.d-input-icon--right {
-        padding-right: @inputs-icon-spacing--xs;
-    }
-
-    &.d-input-icon--left {
-        padding-left: @inputs-icon-spacing--xs;
-    }
 }
 
 .d-textarea--sm {
     .input-button-sm();
 
     min-height: 4.8rem;
-
-    &.d-input-icon--right {
-        padding-right: @inputs-icon-spacing--sm;
-    }
-
-    &.d-input-icon--left {
-        padding-left: @inputs-icon-spacing--sm;
-    }
 }
 
 .d-textarea--lg {
     .input-button-lg();
 
     min-height: 9.2rem;
-
-    &.d-input-icon--right {
-        padding-right: @inputs-icon-spacing--lg;
-    }
-
-    &.d-input-icon--left {
-        padding-left: @inputs-icon-spacing--lg;
-    }
 }
 
 .d-textarea--xl {
     .input-button-xl();
 
     min-height: 10rem;
-
-    &.d-input-icon--right {
-        padding-right: @inputs-icon-spacing--xl;
-    }
-
-    &.d-input-icon--left {
-        padding-left: @inputs-icon-spacing--xl;
-    }
 }
 
 //  $$  VALIDATION STATES
@@ -267,7 +219,6 @@
     //  ------------------------------------------------------------------------
     --input-icon-size: @icon16;
 
-    position: absolute;
     z-index: var(--zi-base1);
     display: inline-flex;
     align-items: center;
@@ -279,24 +230,6 @@
         width: var(--input-icon-size);
         height: var(--input-icon-size);
     }
-
-    &.d-input-icon--left {
-        left: var(--su8);
-        // Update padding for d-input if d-input-icon--left is present
-        & ~ .d-input,
-        & ~ .d-textarea {
-            padding-left: @inputs-icon-spacing;
-        }
-    }
-
-    &.d-input-icon--right {
-        right: var(--su8);
-
-        // Update padding for d-input if d-input-icon--right is present
-        & ~ .d-input {
-            padding-right: @inputs-icon-spacing;
-        }
-    }
 }
 
 
@@ -309,19 +242,6 @@
 
 .d-input-icon--xs {
     --input-icon-size: @icon12;
-
-    // For backwards compatibility purposes only.
-    // Update padding for d-input, d-textarea if d-input-icon--left is present
-    &.d-input-icon--left ~ .d-input,
-    &.d-input-icon--left ~ .d-textarea {
-        padding-left: @inputs-icon-spacing--xs;
-    }
-
-    // For backwards compatibility purposes only.
-    // Update padding for d-input if d-input-icon--right is present
-    &.d-input-icon--right ~ .d-input {
-        padding-right: @inputs-icon-spacing--xs;
-    }
 }
 
 .d-input-icon.d-input--sm {
@@ -330,19 +250,6 @@
 
 .d-input-icon--sm {
     --input-icon-size: @icon14;
-
-    // For backwards compatibility purposes only.
-    // Update padding for d-input, d-textarea if d-input-icon--left is present
-    &.d-input-icon--left ~ .d-input,
-    &.d-input-icon--left ~ .d-textarea {
-        padding-left: @inputs-icon-spacing--sm;
-    }
-
-    // For backwards compatibility purposes only.
-    // Update padding for d-input if d-input-icon--right is present
-    &.d-input-icon--right ~ .d-input {
-        padding-right: @inputs-icon-spacing--sm;
-    }
 }
 
 .d-input-icon.d-input--lg {
@@ -351,19 +258,6 @@
 
 .d-input-icon--lg {
     --input-icon-size: @icon20;
-
-    // For backwards compatibility purposes only.
-    // Update padding for d-input, d-textarea if d-input-icon--left is present
-    &.d-input-icon--left ~ .d-input,
-    &.d-input-icon--left ~ .d-textarea {
-        padding-left: @inputs-icon-spacing--lg;
-    }
-
-    // For backwards compatibility purposes only.
-    // Update padding for d-input if d-input-icon--right is present
-    &.d-input-icon--right ~ .d-input {
-        padding-right: @inputs-icon-spacing--lg;
-    }
 }
 
 .d-input-icon.d-input--xl {
@@ -372,17 +266,4 @@
 
 .d-input-icon--xl {
     --input-icon-size: @icon24;
-
-    // For backwards compatibility purposes only.
-    // Update padding for d-input, d-textarea if d-input-icon--left is present
-    &.d-input-icon--left ~ .d-input,
-    &.d-input-icon--left ~ .d-textarea {
-        padding-left: @inputs-icon-spacing--xl;
-    }
-
-    // For backwards compatibility purposes only.
-    // Update padding for d-input if d-input-icon--right is present
-    &.d-input-icon--right ~ .d-input {
-        padding-right: @inputs-icon-spacing--xl;
-    }
 }

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

@@ -27,7 +27,7 @@
 .d-modal {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --modal--bgc: hsla(var(--black-900-hsl) ~' / ' 85%);
+    --modal--bgc: hsla(var(--black-900-hsl) ~' / ' 60%);
     --modal-dialog--bgc: var(--white);
     --modal-dialog--fc: var(--black-700);
     --modal-header--fc: var(--black-800);
@@ -240,7 +240,7 @@
 //  $$  DANGER
 //  ----------------------------------------------------------------------------
 .d-modal--danger {
-  --modal-header--fc: var(--fc-error);
+  --modal-header--fc: var(--fc-dark);
 }
 
 

package/lib/build/svg/system/barge.svg

@@ -1,4 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="3" y="3" width="18" height="18" rx="2" />
-<path d="M9.01818 7.68L10.5455 6L16 12L10.5455 18L9.01818 16.32L11.8545 13.2H3V10.8H11.8545L9.01818 7.68Z" fill="#E5E5E5"/>
+<path d="M5 3h14s2 0 2 2v14s0 2 -2 2h-14s-2 0 -2 -2v-14s0 -2 2 -2 M9.01818 7.68L10.5455 6L16 12L10.5455 18L9.01818 16.32L11.8545 13.2H3V10.8H11.8545L9.01818 7.68Z" fill="black" fill-rule="evenodd"/>
 </svg>

package/lib/build/svg/system/router.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M19.1111 3.22222L20 2.33333C18.4444 0.777778 16.4444 0 14.4444 0C12.4444 0 10.4444 0.777778 8.88889 2.33333L9.77778 3.22222C11.1111 2 12.7778 1.33333 14.4444 1.33333C16.1111 1.33333 17.7778 2 19.1111 3.22222ZM18.1111 4.11111C17.1111 3.11111 15.7778 2.55556 14.4444 2.55556C13.1111 2.55556 11.7778 3.11111 10.7778 4.11111L11.6667 5C12.4444 4.22222 13.4444 3.88889 14.4444 3.88889C15.4444 3.88889 16.4444 4.22222 17.2222 5L18.1111 4.11111ZM17.7778 11.1111H15.5556V6.66667H13.3333V11.1111H2.22222C1 11.1111 0 12.1111 0 13.3333V17.7778C0 19 1 20 2.22222 20H17.7778C19 20 20 19 20 17.7778V13.3333C20 12.1111 19 11.1111 17.7778 11.1111ZM5.55556 16.6667H3.33333V14.4444H5.55556V16.6667ZM9.44444 16.6667H7.22222V14.4444H9.44444V16.6667ZM13.3333 16.6667H11.1111V14.4444H13.3333V16.6667Z" fill="#0D0C0F"/>
-</svg>
+</svg>