@dialpad/dialtone 7.0.0-beta.4 → 7.0.0-beta.6

package/lib/build/less/components/avatar.less

@@ -18,8 +18,8 @@
 .d-avatar {
   //  Component CSS Vars
   //  ------------------------------------------------------------------------
-  --avatar--fc: var(--fc-lighter);
-  --avatar--bgc: var(--fc-dark);
+  --avatar--fc: var(--fc-tertiary);
+  --avatar--bgc: var(--fc-primary);
   --avatar--size: var(--su12);
 
   width: var(--avatar--size);
@@ -67,12 +67,12 @@
   }
 
   &.d-avatar--purple-300 {
-      --avatar--fc: var(--purple-800);
+      --avatar--fc: var(--purple-600);
       --avatar--bgc: var(--purple-300);
   }
 
   &.d-avatar--purple-200 {
-      --avatar--fc: var(--purple-800);
+      --avatar--fc: var(--purple-600);
       --avatar--bgc: var(--purple-200);
   }
 
@@ -116,24 +116,24 @@
       --avatar--bgc: var(--magenta-100);
   }
 
-  &.d-avatar--yellow-500 {
-      --avatar--fc: var(--yellow-600);
-      --avatar--bgc: var(--yellow-500);
+  &.d-avatar--gold-500 {
+      --avatar--fc: var(--white);
+      --avatar--bgc: var(--gold-500);
   }
 
-  &.d-avatar--yellow-400 {
-      --avatar--fc: var(--yellow-600);
-      --avatar--bgc: var(--yellow-400);
+  &.d-avatar--gold-300 {
+      --avatar--fc: var(--gold-500);
+      --avatar--bgc: var(--gold-300);
   }
 
-  &.d-avatar--yellow-300 {
-      --avatar--fc: var(--yellow-600);
-      --avatar--bgc: var(--yellow-300);
+  &.d-avatar--gold-200 {
+      --avatar--fc: var(--gold-500);
+      --avatar--bgc: var(--gold-200);
   }
 
-  &.d-avatar--yellow-200 {
-      --avatar--fc: var(--yellow-600);
-      --avatar--bgc: var(--yellow-200);
+  &.d-avatar--gold-100 {
+      --avatar--fc: var(--gold-500);
+      --avatar--bgc: var(--gold-100);
   }
 }
 

package/lib/build/less/components/badge.less

@@ -15,7 +15,7 @@
 //  ----------------------------------------------------------------------------
 .d-badge {
   //  Component CSS Vars
-  --badge--fc: var(--fc-dark);
+  --badge--fc: var(--fc-primary);
   --badge--bgc: var(--black-200);
 
   display: inline-block;
@@ -84,8 +84,8 @@
   --badge--bgc: var(--magenta-500);
 }
 
-.d-badge--yellow-300 {
-  --badge--bgc: var(--yellow-300);
+.d-badge--gold-200 {
+  --badge--bgc: var(--gold-200);
 }
 
 .d-badge--green-400 {

package/lib/build/less/components/banner.less

@@ -16,7 +16,7 @@
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
     --banner--bgc: var(--black-100);
-    --banner--fc: var(--fc-dark);
+    --banner--fc: var(--fc-primary);
 
     position: fixed;
     top: 0;
@@ -127,10 +127,10 @@
 //  $$  WARNING
 //  ----------------------------------------------------------------------------
 .d-banner--warning {
-    --banner--bgc: var(--yellow-100);
+    --banner--bgc: var(--gold-100);
 
     &.d-banner--important {
-        --banner--bgc: var(--yellow-400);
-        --banner--fc: var(--fc-dark);
+        --banner--bgc: var(--gold-200);
+        --banner--fc: var(--fc-primary);
     }
 }

package/lib/build/less/components/button.less

@@ -70,8 +70,8 @@
     }
 
     &[disabled] {
-        color: var(--black-500);
-        background-color: var(--black-400);
+        color: var(--fc-disabled);
+        background-color: var(--black-300);
         border-color: transparent;
         cursor: not-allowed;
         transition: none;
@@ -433,8 +433,8 @@
 //  $$  DISABLED STATE
 //  ----------------------------------------------------------------------------
 .d-btn--disabled {
-    color: var(--black-500);
-    background-color: var(--black-400);
+    color: var(--fc-disabled);
+    background-color: var(--black-300);
     border-color: transparent;
     cursor: not-allowed;
     transition: none;

package/lib/build/less/components/chip.less

@@ -22,7 +22,7 @@
 
 .d-chip__label {
   //  Component CSS Vars
-  --chip--fc: var(--fc-dark);
+  --chip--fc: var(--fc-primary);
   --chip--bgc: var(--black-200);
   --chip--br: var(--su102);
 

package/lib/build/less/components/forms.less

@@ -106,7 +106,7 @@ fieldset {
 //  $   VALIDATION MESSAGES
 //  ----------------------------------------------------------------------------
 .d-validation-message {
-  --validation--fc: var(--fc-light);
+  --validation--fc: var(--fc-tertiary);
 
   display: inline-flex;
   align-items: flex-start;

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: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
@@ -59,24 +52,17 @@
     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-500);
+        color: var(--fc-placeholder);
     }
     //  --  Remove input EDGE additions
     &::-ms-clear {
         display: none;
     }
     //  --  FOCUS
-    &:focus {
+    &:focus,
+    &:focus-within {
         --input--bc: var(--input--focus-bc);
 
         outline: 0;
@@ -87,15 +73,16 @@
     &[read-only] {
         --input--bc: var(--black-400) !important;
         --input--bgc: var(--black-300);
-        --input--fc: var(--black-500);
+        --input--fc: var(--fc-disabled);
 
-        &:focus {
+        &:focus,
+        &:focus-within {
             box-shadow: none !important;
         }
 
         //  --  Placeholder copy
         &::placeholder {
-            color: var(--black-500);
+            color: var(--fc-placeholder);
         }
     }
     //  --  DISABLED
@@ -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/link.less

@@ -113,10 +113,10 @@
 // by buttons using .d-link. Links with a disabled attribute are not valid mark-up.
 .d-link[disabled],
 .d-link--disabled {
-    color: var(--black-500);
+    color: var(--fc-disabled);
 
     &:hover {
-        color: var(--black-500);
+        color: var(--fc-disabled);
         text-decoration: underline;
         cursor: not-allowed;
     }

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);
@@ -175,7 +175,7 @@
   padding: var(--su12) var(--su24);
   font-size: var(--fs-200);
   line-height: var(--lh4);
-  background-color: var(--yellow-200);
+  background-color: var(--gold-100);
   border-radius: var(--br8) var(--br8) 0 0;
 
   &:not(.d-d-none) + .d-modal__dialog {
@@ -240,7 +240,7 @@
 //  $$  DANGER
 //  ----------------------------------------------------------------------------
 .d-modal--danger {
-  --modal-header--fc: var(--fc-error);
+  --modal-header--fc: var(--fc-dark);
 }
 
 

package/lib/build/less/components/notice.less

@@ -16,7 +16,7 @@
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
     --notice--bgc: var(--black-100);
-    --notice--fc: var(--fc-dark);
+    --notice--fc: var(--fc-primary);
 
     display: flex;
     align-items: center;
@@ -141,12 +141,12 @@
 .d-notice--warning,
 .d-banner--warning,
 .d-toast--warning {
-    --notice--bgc: var(--yellow-100);
+    --notice--bgc: var(--gold-100);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice--bgc: var(--yellow-400);
-        --notice--fc: var(--fc-dark);
+        --notice--bgc: var(--gold-200);
+        --notice--fc: var(--fc-primary);
     }
 }

package/lib/build/less/components/radio-checkbox.less

@@ -71,7 +71,7 @@
     //  --  DISABLED
     &[disabled],
     &--disabled {
-        --check-radio--color: var(--black-400);
+        --check-radio--color: var(--fc-disabled);
         --check-radio--bc: var(--black-400);
         --check-radio--bgc: var(--black-300);
 
@@ -95,7 +95,7 @@
     &.d-radio-group--disabled {
         .d-checkbox__label,
         .d-radio__label {
-            color: var(--black-400);
+            color: var(--fc-disabled);
             cursor: not-allowed;
         }
     }
@@ -195,7 +195,7 @@
         //  Disabled
         &[disabled],
         &--disabled {
-            --check-radio--color: var(--black-400);
+            --check-radio--color: var(--fc-disabled);
             --check-radio--bc: var(--black-400);
             --check-radio--bgc: var(--black-300);
         }
@@ -245,7 +245,7 @@
         // Disabled
         &[disabled],
         &--disabled {
-            --check-radio--color: var(--black-400);
+            --check-radio--color: var(--fc-disabled);
             --check-radio--bc: var(--black-400);
             --check-radio--bgc: var(--black-300);
         }

package/lib/build/less/components/selects.less

@@ -36,7 +36,7 @@
   font-weight: inherit;
   font-size: var(--fs-200);
   font-family: inherit;
-  line-height: var(--lh-tight);
+  line-height: var(--lh-200);
 
   //  --  Arrows
   &::before,
@@ -121,7 +121,7 @@
   }
 
   &:disabled {
-    color: var(--black-500);
+    color: var(--fc-disabled);
     background: var(--black-300);
     border: 1px solid var(--black-400);
   }

package/lib/build/less/components/tabs.less

@@ -17,7 +17,7 @@
     position: relative;
     display: flex;
     flex-wrap: wrap;
-    color: var(--fc-light);
+    color: var(--fc-tertiary);
     font-size: var(--fs-200);
 
     // Add a bottom border unless no border is requested
@@ -89,7 +89,7 @@
 
     &:hover {
         --tab--bgc: var(--black-100);
-        --tab--fc: var(--fc-dark);
+        --tab--fc: var(--fc-primary);
     }
 
     //  Turn off animations if someone doesn't want them.

package/lib/build/less/components/toast.less

@@ -28,7 +28,7 @@
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
     --toast--bgc: var(--black-100);
-    --toast--fc: var(--fc-dark);
+    --toast--fc: var(--fc-primary);
 
     z-index: var(--zi-notification);
     box-sizing: border-box;
@@ -104,7 +104,7 @@
 //  ----------------------------------------------------------------------------
 .d-toast--info {
     --toast--bgc: var(--purple-100);
-    --toast--fc: var(--fc-dark);
+    --toast--fc: var(--fc-primary);
 
     &.d-toast--important {
         --toast--bgc: var(--purple-400);
@@ -127,11 +127,11 @@
 //  $$  WARNING
 //  ----------------------------------------------------------------------------
 .d-toast--warning {
-    --toast--bgc: var(--yellow-100);
+    --toast--bgc: var(--gold-100);
 
     &.d-toast--important {
-        --toast--bgc: var(--yellow-400);
-        --toast--fc: var(--fc-dark);
+        --toast--bgc: var(--gold-200);
+        --toast--fc: var(--fc-primary);
     }
 }
 

package/lib/build/less/components/tooltip.less

@@ -45,7 +45,7 @@
     padding: var(--su8);
     color: var(--tooltip--fc);
     font-size: var(--fs-100);
-    line-height: var(--lh-normal);
+    line-height: var(--lh-300);
     text-align: center;
     background-color: var(--tooltip--bgc);
     border-radius: var(--br4);