@dialpad/dialtone 7.10.4 → 7.11.0

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

@@ -24,96 +24,41 @@
   //  Component CSS Vars
   //  --------------------------------------------------------------------------
   --select-color-border: var(--black-500);
-  --select-color-background: var(--white);
-  --select-color-text: var(--black-800);
+  --select-notch-position-right: calc(var(--size-300) * 2);
 
   position: relative;
-  display: inline-flex; // important to the children alignment
-  box-sizing: border-box;
-  width: 100%; // important to fill the available space
-  width: -webkit-fill-available; // important to fill the available space
-  font-weight: inherit;
-  font-size: var(--fs-200);
-  font-family: inherit;
-  line-height: var(--lh-200);
+  width: stretch;
 
   //  --  Arrows
-  &::before,
   &::after {
+    --select-arrow-size: calc(var(--size-300) * 3.5);
+
     position: absolute;
-    right: 0.75em;
+    top: 50%;
+    right: var(--select-notch-position-right);
     z-index: var(--zi-selected);
-    border-color: var(--black-900) transparent;
-    border-style: solid;
-    border-width: 0.25em;
+    width: var(--select-arrow-size);
+    height: var(--select-arrow-size);
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4KICA8cGF0aCBmaWxsPSIjNTU1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjE0NiA3LjE0NmEuNS41IDAgMCAxIC43MDggMEw2IDkuMjkzbDIuMTQ2LTIuMTQ3YS41LjUgMCAxIDEgLjcwOC43MDhsLTIuNSAyLjVhLjUuNSAwIDAgMS0uNzA4IDBsLTIuNS0yLjVhLjUuNSAwIDAgMSAwLS43MDhabTIuNS01LjVhLjUuNSAwIDAgMSAuNzA4IDBsMi41IDIuNWEuNS41IDAgMSAxLS43MDguNzA4TDYgMi43MDcgMy44NTQgNC44NTRhLjUuNSAwIDEgMS0uNzA4LS43MDhsMi41LTIuNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K');
+    background-repeat: no-repeat;
+    background-size: 100%;
+    transform: translateY(-50%);
     content: '';
     pointer-events: none;
   }
-
-  &::before {
-    top: calc(~'50% - 0.25em');
-    border-top-width: 0;
-  }
-
-  &::after {
-    top: calc(~'50% + 0.125em');
-    border-bottom-width: 0;
-  }
-}
-
-//  $$  SIZES
-//  ----------------------------------------------------------------------------
-.d-select--xs {
-  font-size: var(--fs-200);
-
-  .d-select__input {
-    .input-button-xs();
-  }
-}
-
-.d-select--sm {
-  font-size: var(--fs-200);
-
-  .d-select__input {
-    .input-button-sm();
-  }
-}
-
-.d-select--lg {
-  font-size: var(--fs-300);
-
-  .d-select__input {
-    .input-button-lg();
-  }
-}
-
-.d-select--xl {
-  font-size: var(--fs-300);
-
-  .d-select__input {
-    .input-button-xl();
-  }
 }
 
 //  $  SELECT MENU INPUT
 //  ----------------------------------------------------------------------------
 .d-select__input {
-  --select-input-padding: calc(var(--space-400) - var(--space-100)) 2em calc(var(--space-400) - var(--space-100)) var(--space-400);// 7px 2em 7px 8px
-
-  height: 100%; // Fill the height of its parent
-  padding: var(--select-input-padding) !important;
-  color: var(--select-color-text);
-  background-color: var(--select-color-background);
-  border-color: var(--select-color-border);
-  //  [1] Reset the appearance
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-
-  //  [2] Update the styles
+  --select-color-border: var(--input-color-border);
+  --select-notch-padding-right: calc(var(--space-300) * 6);
+
+  // Use shared style properties of d-input (<input>, <textarea>)
   .d-input();
 
-  --select-color-border: var(--black-600);
+  // Adjust space on right beneath arrows
+  padding-right: var(--select-notch-padding-right);
 
   &:focus {
     --select-color-border: var(--purple-400);
@@ -121,10 +66,13 @@
     box-shadow: var(--bs-focus-ring);
   }
 
-  &:disabled {
+  &[disabled],
+  &[read-only] {
     color: var(--fc-disabled);
-    background: var(--black-300);
-    border: 1px solid var(--black-400);
+    background: var(--input-color-background-disabled);
+    border-color: transparent;
+    border-style: solid;
+    border-width: var(--input-border-width);
   }
 
   &::-moz-focus-inner {
@@ -141,33 +89,73 @@
   }
 }
 
+//  $$  SIZES
+//  ----------------------------------------------------------------------------
+.d-select--xs {
+  .d-select__input {
+    #d-internal__input-and-select-xs();
+  }
+}
+
+.d-select--sm {
+  .d-select__input {
+    #d-internal__input-and-select-sm();
+  }
+}
+
+.d-select--lg {
+  .d-select__input {
+    #d-internal__input-and-select-lg();
+
+    --select-notch-padding-right: calc(var(--space-300) * 9);
+  }
+
+  &::after {
+    --select-arrow-size: calc(var(--size-300) * 4.5);
+    --select-notch-position-right: calc(var(--size-300) * 3);
+  }
+}
+
+.d-select--xl {
+  .d-select__input {
+    #d-internal__input-and-select-xl();
+
+    --select-notch-padding-right: calc(var(--space-300) * 9);
+  }
+
+  &::after {
+    --select-arrow-size: calc(var(--size-300) * 4.5);
+    --select-notch-position-right: calc(var(--size-300) * 3);
+  }
+}
+
 //  $$  VALIDATION STATES
 //  ------------------------------------------------------------------------
 .d-select__input--success {
-  --select-color-border: var(--success-color);
+  --input-color-border: var(--success-color);
 
   &:focus {
-    --select-color-border: var(--success-color);
+    --input-color-border: var(--success-color);
 
     box-shadow: var(--bs-focus-ring-success) !important;
   }
 }
 
 .d-select__input--error {
-  --select-color-border: var(--error-color);
+  --input-color-border: var(--error-color);
 
   &:focus {
-    --select-color-border: var(--error-color);
+    --input-color-border: var(--error-color);
 
     box-shadow: var(--bs-focus-ring-error) !important;
   }
 }
 
 .d-select__input--warning {
-  --select-color-border: var(--warning-color);
+  --input-color-border: var(--gold-400);
 
   &:focus {
-    --select-color-border: var(--warning-color);
+    --input-color-border: var(--warning-color);
 
     box-shadow: var(--bs-focus-ring-warning) !important;
   }
@@ -176,6 +164,6 @@
 .d-select--disabled {
   &::before,
   &::after {
-    border-color: var(--black-500) transparent;
+    opacity: 0.33;
   }
 }

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

@@ -39,16 +39,23 @@
     //  -----------------------
     --tooltip-color-background: var(--black-800);
     --tooltip-color-text: var(--white);
+    --tooltip-font-weight: var(--fw-medium);
+    --tooltip-line-height: var(--lh-300);
+    --tooltip-padding-y: var(--space-400);
+    --tooltip-padding-x: calc(var(--space-300) * 3);
+    --tooltip-border-radius: var(--size-300);
 
     z-index: var(--zi-tooltip);
     max-width: calc(var(--size-300) * 54); // 216
-    padding: var(--space-400); // 8
+    padding: var(--tooltip-padding-y) var(--tooltip-padding-x); // 8 12
     color: var(--tooltip-color-text);
+    font-weight: var(--tooltip-font-weight);
     font-size: var(--fs-100);
-    line-height: var(--lh-300);
+    line-height: var(--tooltip-line-height);
+    letter-spacing: calc(var(--size-100) * 0.25);
     text-align: center;
     background-color: var(--tooltip-color-background);
-    border-radius: var(--size-300); // 4
+    border-radius: var(--tooltip-border-radius); // 4
 
     &::after {
         position: absolute;

package/lib/build/less/dialtone-reset.less

@@ -349,5 +349,5 @@ template {
  */
 
 [hidden] {
-  display: none;
+  display: none !important;
 }

package/lib/build/less/themes/default.less

@@ -277,9 +277,6 @@ body {
     each(@focus-rings, {
         --@{key}: @value;
     });
-    each(@input-button-vars, {
-        --@{key}: @value;
-    });
 
     //  $$  THEME VARS
     //      These should always come last

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

@@ -63,7 +63,7 @@
 .d-fc-warning { color: var(--fc-warning); }
 #d-internals #generate-hover-focus(d-fc-warning, {.d-fc-warning();});
 
-.d-fc-error { &:extend(.d-fc-red-400); }
+.d-fc-error { &:extend(.d-fc-red-300); }
 #d-internals #generate-hover-focus(d-fc-error, {.d-fc-error();});
 
 .d-fc-current { color: currentColor !important; }

package/lib/build/less/utilities/effects.less

@@ -195,10 +195,12 @@
 .d-td100 { transition-duration: var(--td100) !important; }
 .d-td150 { transition-duration: var(--td150) !important; }
 .d-td200 { transition-duration: var(--td200) !important; }
+.d-td300 { transition-duration: var(--td300) !important; }
 
 //  --  TRANSITION TIMING
 .d-ttf-in-out { transition-timing-function: var(--ttf-in-out) !important; }
 .d-ttf-out { transition-timing-function: var(--ttf-out) !important; }
+.ttf-out-quint { transition-timing-function: var(--ttf-out-quint) !important; }
 
 //  --  TRANSITION PROPERTY
 .d-tp-all { transition-property: all !important; }
@@ -214,3 +216,4 @@
 .d-t-delay100 { transition-delay: var(--td100) !important; }
 .d-t-delay150 { transition-delay: var(--td150) !important; }
 .d-t-delay200 { transition-delay: var(--td200) !important; }
+.d-t-delay300 { transition-delay: var(--td300) !important; }

package/lib/build/less/variables/colors.less

@@ -58,9 +58,9 @@
 
 @red-100:                       #FFE5E6;
 @red-200:                       #FF8585;
-@red-300:                       #FF2E2E;
-@red-400:                       #A41111;
-@red-500:                       #540000;
+@red-300:                       #EC0E0E;
+@red-400:                       #B70B0B;
+@red-500:                       #5B0505;
 
 @blue-100:                      #EAF2FA;
 @blue-200:                      #99C8FF;
@@ -79,21 +79,21 @@
 //      Used for inputs, notices, and button statuses
 //  ----------------------------------------------------------------------------
 @color-states: {
-    error-color:                var(--red-400);
-    error-color-hsl:            var(--red-400-hsl);
-    error-color-hover:          var(--red-500);
+    error-color:                var(--red-300);
+    error-color-hsl:            var(--red-300-hsl);
+    error-color-hover:          hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
 
     warning-color:              var(--fc-warning);
-    warning-color-hsl:          var(--yellow-500-hsl);
+    warning-color-hsl:          var(--gold-500-hsl);
     warning-color-hover:        var(--fc-warning-hover);
 
     success-color:              var(--fc-success);
     success-color-hsl:          var(--green-500-hsl);
     success-color-hover:        var(--green-500);
 
-    muted-color:                var(--black-800);
-    muted-color-hsl:            var(--black-800-hsl);
-    muted-color-hover:          var(--black-800);
+    muted-color:                var(--black-700);
+    muted-color-hsl:            var(--black-700-hsl);
+    muted-color-hover:          var(--black-700);
 
     inverted-color:             var(--fc-primary-inverted);
     inverted-color-hsl:         var(--black-100-hsl);
@@ -127,9 +127,9 @@
     fc-muted:                   hsla(var(--black-800-h) var(--black-800-s) var(--black-800-l) ~' / ' var(--alpha, 50%));
     fc-placeholder:             var(--black-500);
     fc-disabled:                var(--black-500);
-    fc-error:                   var(--red-400);
+    fc-error:                   var(--red-300);
     fc-success:                 #00671d;
-    fc-warning:                 #683e00;
+    fc-warning:                 var(--gold-500);
     fc-warning-hover:           var(--black-900);
 
     //  --  BASE TEMPLATE

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

@@ -4,28 +4,16 @@
 //
 //  These are shared sizes for buttons, inputs, select menus (native),
 //  and textareas.
-//
-//  ============================================================================
-//  $   CSS VARS
-//  ============================================================================
-// I don't think these are used anymore. Confirm and remove.
-@input-button-vars: {
-    input-button__padding:                  calc(var(--space-400) - var(--space-100)) var(--space-400);
-    input-button__text-size:                var(--fs-200);
-    input-button__line-height:              var(--lh4);
-    input-button__icon-size:                @icon-size18;
-}
-
 //  ============================================================================
 //  $   SHARED INPUT & BUTTON SIZES
 //  ============================================================================
 //  $$  EXTRA SMALL
-//      Target height: 24px
 //  ----------------------------------------------------------------------------
-.input-button-xs() {
-    padding-top: var(--space-100 / 2); // .5rem
-    padding-bottom: calc(var(--space-400) + var(--space-100)); // 5px
-    font-size: var(--fs-100);
+#d-internal__input-and-select-xs() {
+    --input-padding-y: calc(calc(var(--space-400) - var(--space-100)) - var(--input-border-width));
+    --input-padding-x: calc(var(--space-400) - var(--input-border-width));
+    --input-font-size: var(--fs-100);
+    --input-border-radius: var(--size-300);
 
     .d-btn__icon {
         width: @icon-size14;
@@ -34,14 +22,11 @@
 }
 
 //  $$  SMALL
-//      Target height: 32px
 //  ----------------------------------------------------------------------------
-.input-button-sm() {
-    --padding-y: calc(var(--space-300) + var(--space-200)); // 6
-
-    padding-top: var(--padding-y);
-    padding-bottom: var(--padding-y);
-    font-size: var(--fs-200);
+#d-internal__input-and-select-sm() {
+    --input-padding-y: calc(var(--space-400) - var(--input-border-width));
+    --input-padding-x: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
+    --input-font-size: var(--fs-100);
 
     .d-btn__icon {
         width: @icon-size16;
@@ -50,14 +35,12 @@
 }
 
 //  $$  LARGE
-//      Target height: 48px
 //  ----------------------------------------------------------------------------
-.input-button-lg() {
-    --padding-y: calc(calc(var(--space-300) + var(--space-200)) + calc(var(--space-300) + var(--space-200))); // 11 yes this is awkward
-
-    padding-top: var(--padding-y);
-    padding-bottom: var(--padding-y);
-    font-size: var(--fs-300);
+#d-internal__input-and-select-lg() {
+    --input-padding-y: calc((var(--space-400) + var(--space-200)) - var(--input-border-width));
+    --input-padding-x: calc(var(--space-500) - var(--input-border-width));
+    --input-font-size: var(--fs-300);
+    --input-border-radius: calc(var(--size-300) * 3);
 
     .d-btn__icon {
         width: @icon-size20;
@@ -66,14 +49,12 @@
 }
 
 //  $$  EXTRA LARGE
-//      Target height: 56px
 //  ----------------------------------------------------------------------------
-.input-button-xl() {
-    --padding-y: calc(calc(var(--space-400) + var(--space-300)) + var(--space-100)); // 13
-
-    padding-top: var(--padding-y);
-    padding-bottom: var(--padding-y);
-    font-size: var(--fs-300);
+#d-internal__input-and-select-xl() {
+    --input-padding-y: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
+    --input-padding-x: calc(var(--space-500) - var(--input-border-width));
+    --input-font-size: var(--fs-400);
+    --input-border-radius: var(--size-500);
 
     .d-btn__icon {
         width: @icon-size24;
@@ -81,6 +62,8 @@
     }
 }
 
+#d-internals #spacing-classes(0.8rem, 'size');
+
 #d-internals #spacing-classes(0.8rem, 'size');
 #d-internals #spacing-classes(1.6rem, 'size', '-16');
 #d-internals #spacing-classes(3.2rem, 'size', '-32');

package/lib/build/less/variables/visual-styles.less

@@ -52,11 +52,13 @@
 @transition: {
    ttf-in-out:      cubic-bezier(0.645, 0.045, 0.355, 1);
    ttf-out:         cubic-bezier(0.23, 1, 0.32, 1);
+   ttf-out-quint:   cubic-bezier(0.22, 1, 0.36, 1);
    td0:             0s;
    td50:            50ms;
    td100:           100ms;
    td150:           150ms;
    td200:           200ms;
+   td300:           300ms;
 }