@dialpad/dialtone 7.10.3 → 7.11.0

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

@@ -22,14 +22,29 @@
 //  $  INPUTS
 //  ----------------------------------------------------------------------------
 .d-input,
+.d-input--md,
 .d-textarea,
+.d-textarea--md,
+.d-input__wrapper--md,
 .d-input__wrapper {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
     --input-color-border-focus: var(--purple-400);
-    --input-color-border: var(--black-600);
-    --input-color-background: var(--white);
-    --input-color-text: var(--black-800);
+    --input-color-border: hsla(var(--black-900-hsl) ~' / ' 9%);
+    --input-color-background: hsla(var(--black-900-hsl) ~' / ' 3%);
+    --input-color-background-disabled: hsla(var(--black-900-hsl) ~' / ' 12%);
+    --input-border-width: calc(var(--size-100) + calc(var(--size-100) / 2)); // 1.5
+    --input-border-radius: var(--size-400);
+    --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-color-text: var(--fc-secondary);
+    --input-font-size: var(--fs-200);
+    --input-line-height: var(--lh-200);
+
+    .bg-test & {
+        --input-color-border: var(--black-300);
+        --input-color-background: var(--black-100);
+    }
 
     position: relative;
     display: inline-flex;
@@ -37,20 +52,21 @@
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    padding: calc(var(--space-400) - var(--space-100)) var(--space-400); // 7 8
+    padding: var(--input-padding-y) var(--input-padding-x);
     color: var(--input-color-text);
     font-weight: inherit;
-    font-size: var(--fs-200);
+    font-size: var(--input-font-size);
     font-family: inherit;
-    line-height: var(--lh4);
+    line-height: var(--input-line-height);
     background-color: var(--input-color-background);
-    border: 1px solid var(--input-color-border);
-    border-radius: var(--base--corner-radius);
+    border: var(--input-border-width) solid var(--input-color-border);
+    border-radius: var(--input-border-radius);
     outline: none;
     box-shadow: none;
     transition-timing-function: var(--ttf-in-out);
     transition-duration: 100ms;
     transition-property: border, box-shadow, background-color;
+    appearance: none;
 
     //  --  Placeholder copy
     &::placeholder {
@@ -71,8 +87,8 @@
     //  --  DISABLED / READ-ONLY
     &[disabled],
     &[read-only] {
-        --input-color-border: var(--black-400) !important;
-        --input-color-background: var(--black-300);
+        --input-color-border: transparent !important;
+        --input-color-background: var(--input-color-background-disabled);
         --input-color-text: var(--fc-disabled);
 
         &:focus,
@@ -85,10 +101,25 @@
             color: var(--fc-placeholder);
         }
     }
+
     //  --  DISABLED
     &[disabled] {
         cursor: not-allowed;
     }
+
+    //  --  BROWSER-SPECIFIC
+    &::-moz-focus-inner {
+        outline: none !important;
+    }
+
+    &:-moz-focusring {
+        color: transparent;
+        text-shadow: 0 0 0 var(--black-900);
+    }
+
+    &::-ms-expand {
+        display: none;
+    }
 }
 
 //  $$  INPUT WRAPPER
@@ -97,18 +128,18 @@
     padding: 0;
 
     .d-input-icon.d-input-icon--right {
-        margin-right: var(--space-400); // 8
+        margin-right: var(--space-400);
     }
 
     .d-input-icon.d-input-icon--left {
-        margin-left: var(--space-400); // 8
+        margin-left: var(--space-400);
     }
 
     .d-input,
     .d-textarea {
         flex: 1;
+        background-color: transparent;
         border: none;
-        border-radius: var(--base--corner-radius);
 
         &:focus {
             border: none;
@@ -117,11 +148,11 @@
         }
 
         &.d-input-icon--right {
-            padding-right: calc(var(--space-300) + var(--space-200)); // 6
+            padding-right: calc(var(--space-300) + var(--space-200));
         }
 
         &.d-input-icon--left {
-            padding-left: calc(var(--space-300) + var(--space-200)); // 6
+            padding-left: calc(var(--space-300) + var(--space-200));
         }
     }
 }
@@ -129,19 +160,19 @@
 //  $$  SIZES
 //  ----------------------------------------------------------------------------
 .d-input.d-input--xs {
-    .input-button-xs();
+    #d-internal__input-and-select-xs();
 }
 
 .d-input.d-input--sm {
-    .input-button-sm();
+    #d-internal__input-and-select-sm();
 }
 
 .d-input.d-input--lg {
-    .input-button-lg();
+    #d-internal__input-and-select-lg();
 }
 
 .d-input.d-input--xl {
-    .input-button-xl();
+    #d-internal__input-and-select-xl();
 }
 
 
@@ -151,30 +182,32 @@
 .d-textarea {
     min-height: calc(var(--size-300) * 20); // 80
     vertical-align: top;
+    border-bottom-right-radius: var(--size-300);
+    resize: vertical;
 }
 
 //  $$  SIZES
 //  ----------------------------------------------------------------------------
 .d-textarea--xs {
-    .input-button-xs();
+    #d-internal__input-and-select-xs();
 
     min-height: calc(var(--size-300) * 10); // 40
 }
 
 .d-textarea--sm {
-    .input-button-sm();
+    #d-internal__input-and-select-sm();
 
     min-height: calc(var(--size-300) * 12); // 48
 }
 
 .d-textarea--lg {
-    .input-button-lg();
+    #d-internal__input-and-select-lg();
 
     min-height: calc(var(--size-300) * 23); // 92
 }
 
 .d-textarea--xl {
-    .input-button-xl();
+    #d-internal__input-and-select-xl();
 
     min-height: calc(var(--size-300) * 25); // 100
 }
@@ -183,7 +216,7 @@
 //  ----------------------------------------------------------------------------
 .d-input--warning,
 .d-textarea--warning {
-    --input-color-border: var(--warning-color) !important;
+    --input-color-border: var(--gold-400) !important;
     --input-color-border-focus: var(--warning-color);
 
     &:focus,
@@ -221,15 +254,16 @@
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
     --input-icon-size: var(--size-500);
+    --input-icon-container-height: var(--size-600);
 
     z-index: var(--zi-base1);
     display: inline-flex;
     align-items: center;
-    height: calc(var(--size-300) * 9); // 36
+    height: var(--input-icon-container-height);
     margin: 0;
-    line-height: 0;
 
     svg {
+        // Backwards-compatible to DT6 icons
         width: var(--input-icon-size);
         height: var(--input-icon-size);
     }
@@ -240,33 +274,37 @@
 //  $$ SIZES
 //  ----------------------------------------------------------------------------
 .d-input-icon.d-input--xs {
-    height: calc(var(--size-600) - var(--size-300)); // 28
+    --input-icon-container-height: calc(var(--size-600) - var(--size-300));
 }
 
 .d-input-icon--xs {
+    // Backwards-compatible to DT6 icons
     --input-icon-size: @icon12;
 }
 
 .d-input-icon.d-input--sm {
-    height: var(--size-600); // 32
+    --input-icon-container-height: var(--size-600);
 }
 
 .d-input-icon--sm {
+    // Backwards-compatible to DT6 icons
     --input-icon-size: @icon14;
 }
 
 .d-input-icon.d-input--lg {
-    height: calc(var(--size-300) * 12); // 48
+    --input-icon-container-height: calc(var(--size-300) * 10);
 }
 
 .d-input-icon--lg {
+    // Backwards-compatible to DT6 icons
     --input-icon-size: @icon20;
 }
 
 .d-input-icon.d-input--xl {
-    height: calc(var(--size-300) * 14); // 56
+    --input-icon-container-height: calc(var(--size-300) * 14);
 }
 
 .d-input-icon--xl {
+    // Backwards-compatible to DT6 icons
     --input-icon-size: @icon24;
 }

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

@@ -28,9 +28,12 @@
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
     --modal-color-background: hsla(var(--black-900-hsl) ~' / ' 60%);
+    --modal-dialog-padding: var(--space-600);
     --modal-dialog-color-background: var(--white);
     --modal-dialog-color-text: var(--fc-tertiary);
     --modal-header-color-text: var(--fc-secondary);
+    --modal-dialog-color-shadow: hsla(var(--black-900-hsl) ~' / ' 10%);
+    --modal-dialog-shadow: 0 0 0 1px var(--modal-dialog-color-shadow), var(--bs-card);
 
     position: fixed;
     top: 0;
@@ -78,16 +81,20 @@
 .d-modal__dialog {
   position: relative;
   z-index: var(--zi-hide);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-500); //
   width: 100%;
   max-width: calc(var(--size-300) * 157); // 628
   max-height: 100%;
+  padding: var(--modal-dialog-padding); // 32
   overflow-y: auto;
   color: var(--modal-dialog-color-text);
   font-size: var(--fs-200);
-  line-height: var(--lh8);
+  line-height: var(--lh-400);
   background-color: var(--modal-dialog-color-background);
-  border-radius: var(--br8);
-  box-shadow: var(--bs-card);
+  border-radius: var(--size-500);
+  box-shadow: var(--modal-dialog-shadow);
   transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
   backface-visibility: hidden;
   visibility: hidden;
@@ -116,16 +123,8 @@
 
   display: flex;
   flex-direction: row-reverse;
+  gap: var(--space-400);
   align-items: center;
-  padding: 0 var(--modal-footer-padding) var(--modal-footer-padding) var(--modal-footer-padding); // 0 24 24 24
-
-  >:not(:first-child) {
-    margin-right: var(--space-300); // 4
-  }
-
-  >:not(:last-child) {
-    margin-left: var(--space-300); // 4
-  }
 }
 
 
@@ -138,19 +137,16 @@
   --modal-header-padding: calc(var(--space-300) * 6); // 24
 
   margin: 0 !important;
-  padding: var(--modal-header-padding) var(--modal-header-padding) 0;
   color: var(--modal-header-color-text);
-  font-weight: var(--fw-bold);
-  font-size: var(--fs-300);
-  line-height: var(--lh4);
+  font-weight: var(--fw-medium);
+  font-size: var(--fs-400);
+  line-height: var(--lh-100);
 }
 
 //  $$  CONTENT
 //  ----------------------------------------------------------------------------
 .d-modal__content {
   max-width: 75ch;
-  margin: calc(var(--space-300) * 3) 0; // 12 0
-  padding: var(--space-300) calc(var(--space-300) * 6); // 4 24
 }
 
 
@@ -159,8 +155,8 @@
 //  ----------------------------------------------------------------------------
 .d-modal__close {
   position: absolute;
-  top: var(--space-400); // 8
-  right: var(--space-400); // 8
+  top: var(--space-500); // 16
+  right: var(--space-500); // 16
   margin: 0 !important;
 }
 
@@ -169,15 +165,33 @@
 //  $   BANNERS
 //  ----------------------------------------------------------------------------
 .d-modal__banner {
+  --modal-banner-padding-y: var(--space-500);
+  --modal-banner-padding-x: var(--space-600);
+  --modal-banner-color-background: var(--gold-100);
+
   position: relative;
   box-sizing: border-box;
   width: 100%;
   max-width: calc(var(--size-300) * 157); // 628
-  padding: calc(var(--space-300) * 3) calc(var(--space-300) * 6); // 12 24
+  padding: var(--modal-banner-padding-y) var(--modal-banner-padding-x); // 16 32
+  color: var(--fc-primary);
   font-size: var(--fs-200);
-  line-height: var(--lh4);
-  background-color: var(--gold-100);
-  border-radius: var(--br8) var(--br8) 0 0;
+  line-height: var(--lh-300);
+  background-color: var(--modal-banner-color-background);
+  border-radius: var(--size-500) var(--size-500) 0 0;
+  box-shadow: var(--modal-dialog-shadow);
+
+  &::before {
+    // 🤦 don't ask. or do, i'm not even sorry.
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: var(--zi-modal-element);
+    height: var(--modal-banner-padding-y);
+    background-color: var(--modal-banner-color-background);
+    content: '';
+  }
 
   &:not(.d-d-none) + .d-modal__dialog {
     border-top-left-radius: 0;
@@ -192,6 +206,8 @@
 //  $$  FULL WIDTH
 //  ----------------------------------------------------------------------------
 .d-modal--full {
+  --modal-dialog-padding: 0;
+
   padding: 0;
   overflow: hidden scroll;
   transform: unset !important;

package/lib/build/less/components/popover.less

@@ -8,6 +8,7 @@
 //
 //  TABLE OF CONTENTS
 //  • POPOVER
+//  • CSS CUSTOM PROPERTIES
 //  • POPOVER DIALOG
 //    - Base dialog style
 //    - Content
@@ -16,60 +17,66 @@
 
 //  $  POPOVER
 //  ----------------------------------------------------------------------------
+.d-popover {
+  //  $  CSS CUSTOM PROPERTIES
+  //  ----------------------------------------------------------------------------
 
-//  $  POPOVER DIALOG
-//  ----------------------------------------------------------------------------
-.d-popover__dialog {
-  &,
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
+  --popover-color-background: var(--black-100);
+  --popover-border-width: var(--size-100); // 8
+  --popover-border-radius: var(--size-400);
+  --popover-color-shadow: hsla(var(--black-900-hsl) ~' / ' 10%);
+  --popover-shadow: 0 0 0 1px var(--popover-color-shadow), var(--bs-card);
 
-  display: grid;
-  grid-template-rows: auto 1fr;
-  overflow: auto;
-  background-color: var(--white);
-  border-color: var(--black-400);
-  border-radius: var(--br8); // 8
-  box-shadow: var(--bs-card);
-}
+  //  $  POPOVER DIALOG
+  //  ----------------------------------------------------------------------------
+  &__dialog {
+    &,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
 
-// to be set on the dialog when it is modal
-.d-popover__dialog--modal {
-  z-index: var(--zi-modal-element);
-}
+    display: grid;
+    grid-template-rows: 1fr;
+    overflow: auto;
+    border-radius: var(--popover-border-radius);
+    box-shadow: var(--popover-shadow);
 
-//  $$  DIALOG CONTENT
-//  ----------------------------------------------------------------------------
-.d-popover__content {
-  overflow: auto;
-}
+    // to be set on the dialog when it is modal
+    &--modal {
+      z-index: var(--zi-modal-element);
+    }
+  }
 
-//  $$  DIALOG HEADER / FOOTER
-//  ----------------------------------------------------------------------------
-.d-popover__header-footer-base {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  width: 100%;
-  min-height: var(--size48);
-  padding-top: calc(var(--space-300) + var(--space-200)); // 6
-  padding-bottom: calc(var(--space-300) + var(--space-200)); // 6
-  overflow: auto;
-  font-weight: var(--fw-semibold);
-  font-size: var(--fs-200);
-}
+  //  $$  DIALOG CONTENT
+  //  ----------------------------------------------------------------------------
+  &__content {
+    overflow: auto;
+  }
 
-.d-popover__header {
-  .d-popover__header-footer-base();
+  //  $$  DIALOG HEADER / FOOTER
+  //  ----------------------------------------------------------------------------
 
-  border-bottom: var(--size-100) solid var(--black-300);
-}
+  &__header,
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: 100%;
+    min-height: var(--size48);
+    padding-top: calc(var(--space-300) + var(--space-200)); // 6
+    padding-bottom: calc(var(--space-300) + var(--space-200)); // 6
+    overflow: auto;
+    font-weight: var(--fw-semibold);
+    font-size: var(--fs-200);
+  }
 
-.d-popover__footer {
-  .d-popover__header-footer-base();
+  &__header {
+    border-bottom: var(--popover-border-width) solid var(--popover-color-border);
+  }
 
-  border-top: var(--size-100) solid var(--black-300);
+  &__footer {
+    border-top: var(--popover-border-width) solid var(--popover-color-border);
+  }
 }