@dialpad/dialtone-css 8.35.0 → 8.37.0

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

@@ -22,7 +22,7 @@
   //  --------------------------------------------------------------------------
   --badge-color-text: var(--dt-badge-color-foreground-default);
   --badge-color-background: var(--dt-badge-color-background-default);
-  --badge-color-outline: var(--dt-color-border-subtle);
+  --badge-color-outline: var(--dt-badge-color-border-default);
   --badge-radius: var(--dt-size-300);
   --badge-line-height: calc(var(--dt-size-500) + var(--dt-size-200));
   --badge-font-size: var(--dt-font-size-100);
@@ -85,14 +85,9 @@
     --badge-color-background: var(--dt-badge-color-background-bulletin);
 
     &.d-badge--subtle {
-      --badge-color-text: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) - 40%));
-      --badge-color-background: hsla(var(--primary-color-hsl) / 0.1);
-      --badge-color-outline: hsla(var(--primary-color-hsl) / 0.5);
-
-      .dialtone-theme-dark & {
-        --badge-color-text: var(--dt-color-foreground-primary);
-        --badge-color-background: hsla(var(--primary-color-hsl) / 0.6);
-      }
+      --badge-color-text: var(--dt-badge-color-foreground-bulletin-subtle);
+      --badge-color-background: var(--dt-badge-color-background-bulletin-subtle);
+      --badge-color-outline: var(--dt-badge-color-border-bulletin-subtle);
     }
   }
 

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

@@ -30,6 +30,7 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
+  max-width: var(--dt-size-100-percent);
   padding: var(--dt-space-300) var(--dt-space-400);
   color: var(--chip-color-text);
   font-size: var(--dt-font-size-200);
@@ -38,10 +39,9 @@
   background-color: var(--chip-color-background);
   border: none;
   border-radius: var(--chip-border-radius);
-  transition-timing-function: var(--ttf-in-out);
+  transition-timing-function: var(--ttf-out-quint);
   transition-duration: var(--td200);
   transition-property: background-color;
-  max-width: var(--dt-size-100-percent);
 
   // Reserves space within the chip for the close button, since the close button is
   // not nested within the chip. Only apply if close button exists (more than one child).
@@ -61,13 +61,13 @@
     cursor: pointer;
 
     &:hover {
-      --chip-color-background: var(--dt-color-black-300);
+      --chip-color-background: var(--dt-color-surface-bold-opaque);
 
       text-decoration: none;
     }
 
     &:active {
-      --chip-color-background: var(--dt-color-black-400);
+      --chip-color-background: var(--dt-color-surface-moderate-opaque);
     }
 
     &:focus-visible {

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

@@ -145,23 +145,56 @@
     margin-bottom: var(--dt-space-200);
 }
 
+.d-input--hidden {
+    visibility: hidden;
+}
+
 //  $$  INPUT WRAPPER
 //  ----------------------------------------------------------------------------
 .d-input__wrapper {
     padding: 0;
     overflow-y: auto;
 
-    .d-input-icon.d-input-icon--right {
-        margin-right: var(--dt-space-400);
+    .d-textarea + .d-input-icon--right {
+      position: absolute;
+      right: var(--dt-space-450);
     }
 
-    .d-input-icon.d-input-icon--left {
-        margin-left: var(--dt-space-400);
+    .d-input-icon--left:has(+ .d-textarea) {
+        align-items: flex-start;
     }
 
-    .d-textarea + .d-input-icon.d-input-icon--right {
-      position: absolute;
-      right: var(--dt-space-450);
+    .d-input-icon:has(+ .d-textarea),
+    .d-textarea+.d-input-icon {
+        padding-top: calc(var(--input-padding-y) + var(--dt-space-200));
+    }
+
+    .d-input-icon:has(+ .d-textarea--xs),
+    .d-textarea--xs + .d-input-icon {
+        #d-internal__input-and-select-xs();
+
+        padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
+    }
+
+    .d-input-icon:has(+ .d-textarea--sm),
+    .d-textarea--sm+.d-input-icon {
+        #d-internal__input-and-select-sm();
+
+        padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
+    }
+
+    .d-input-icon:has(+ .d-textarea--lg),
+    .d-textarea--lg+.d-input-icon {
+        #d-internal__input-and-select-lg();
+
+        padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
+    }
+
+    .d-input-icon:has(+ .d-textarea--xl),
+    .d-textarea--xl+.d-input-icon {
+        #d-internal__input-and-select-xl();
+
+        padding-top: calc(var(--input-padding-y) + (var(--dt-space-350) - var(--dt-space-100)));
     }
 
     .d-input,
@@ -176,20 +209,6 @@
             outline: 0;
             box-shadow: none !important;
         }
-
-        &.d-input-icon--right {
-            padding-right: var(--dt-space-350);
-        }
-
-        &.d-input-icon--left {
-            padding-left: var(--dt-space-350);
-        }
-    }
-
-    .d-textarea {
-      &.d-input-icon--right {
-        padding-right: var(--dt-space-625);
-      }
     }
 }
 
@@ -270,54 +289,18 @@
 //  $  INPUT ICONS
 //  ----------------------------------------------------------------------------
 .d-input-icon {
-    //  Component CSS Vars
-    //  ------------------------------------------------------------------------
-    --input-icon-size: var(--dt-size-500);
-    --input-icon-container-height: var(--dt-size-600);
-
-    z-index: var(--zi-base1);
-    display: inline-flex;
+    display: none;
     align-items: center;
-    height: var(--input-icon-container-height);
-    margin: 0;
-}
-
-
-
-//  $$ SIZES
-//  ----------------------------------------------------------------------------
-.d-input-icon.d-input--xs {
-    --input-icon-container-height: calc(var(--dt-size-600) - var(--dt-size-300));
-}
-
-.d-input-icon--xs {
-    // Backwards-compatible to DT6 icons
-    --input-icon-size: var(--dt-icon-size-100);
-}
-
-.d-input-icon.d-input--sm {
-    --input-icon-container-height: var(--dt-size-600);
-}
 
-.d-input-icon--sm {
-    // Backwards-compatible to DT6 icons
-    --input-icon-size: var(--dt-icon-size-200);
-}
-
-.d-input-icon.d-input--lg {
-    --input-icon-container-height: calc(var(--dt-size-300) * 10);
-}
-
-.d-input-icon--lg {
-    // Backwards-compatible to DT6 icons
-    --input-icon-size: var(--dt-icon-size-400);
-}
-
-.d-input-icon.d-input--xl {
-    --input-icon-container-height: calc(var(--dt-size-300) * 14);
-}
+    &:has( > svg) {
+        display: inline-flex;
+    }
 
-.d-input-icon--xl {
-    // Backwards-compatible to DT6 icons
-    --input-icon-size: var(--dt-icon-size-500);
-}
+    &--right:has( > svg) {
+        margin-right: var(--dt-space-400);
+    }
+    
+    &--left:has(> svg) {
+        margin-left: var(--dt-space-400);
+    }
+} 

package/lib/dist/dialtone.css

@@ -736,7 +736,7 @@ template {
 .d-badge {
   --badge-color-text: var(--dt-badge-color-foreground-default);
   --badge-color-background: var(--dt-badge-color-background-default);
-  --badge-color-outline: var(--dt-color-border-subtle);
+  --badge-color-outline: var(--dt-badge-color-border-default);
   --badge-radius: var(--dt-size-300);
   --badge-line-height: calc(var(--dt-size-500) + var(--dt-size-200));
   --badge-font-size: var(--dt-font-size-100);
@@ -787,13 +787,9 @@ template {
   --badge-color-background: var(--dt-badge-color-background-bulletin);
 }
 .d-badge--bulletin.d-badge--subtle {
-  --badge-color-text: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) - 40%));
-  --badge-color-background: hsla(var(--primary-color-hsl) / 0.1);
-  --badge-color-outline: hsla(var(--primary-color-hsl) / 0.5);
-}
-.dialtone-theme-dark .d-badge--bulletin.d-badge--subtle {
-  --badge-color-text: var(--dt-color-foreground-primary);
-  --badge-color-background: hsla(var(--primary-color-hsl) / 0.6);
+  --badge-color-text: var(--dt-badge-color-foreground-bulletin-subtle);
+  --badge-color-background: var(--dt-badge-color-background-bulletin-subtle);
+  --badge-color-outline: var(--dt-badge-color-border-bulletin-subtle);
 }
 .d-badge--ai {
   --badge-color-text: var(--dt-badge-color-foreground-bulletin);
@@ -1362,6 +1358,7 @@ template {
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
+  max-width: var(--dt-size-100-percent);
   padding: var(--dt-space-300) var(--dt-space-400);
   color: var(--chip-color-text);
   font-size: var(--dt-font-size-200);
@@ -1370,10 +1367,9 @@ template {
   background-color: var(--chip-color-background);
   border: none;
   border-radius: var(--chip-border-radius);
-  transition-timing-function: var(--ttf-in-out);
+  transition-timing-function: var(--ttf-out-quint);
   transition-duration: var(--td200);
   transition-property: background-color;
-  max-width: var(--dt-size-100-percent);
 }
 .d-chip__label:not(:only-child)::after {
   flex-shrink: 0;
@@ -1392,14 +1388,14 @@ template {
 .d-chip__label:is(button):hover,
 .d-chip__label:is([role='button']):hover,
 .d-chip__label:is([role='link']):hover {
-  --chip-color-background: var(--dt-color-black-300);
+  --chip-color-background: var(--dt-color-surface-bold-opaque);
   text-decoration: none;
 }
 .d-chip__label:is(a):active,
 .d-chip__label:is(button):active,
 .d-chip__label:is([role='button']):active,
 .d-chip__label:is([role='link']):active {
-  --chip-color-background: var(--dt-color-black-400);
+  --chip-color-background: var(--dt-color-surface-moderate-opaque);
 }
 .d-chip__label:is(a):focus-visible,
 .d-chip__label:is(button):focus-visible,
@@ -2247,20 +2243,75 @@ legend .d-label {
 .d-input__length-description {
   margin-bottom: var(--dt-space-200);
 }
+.d-input--hidden {
+  visibility: hidden;
+}
 .d-input__wrapper {
   padding: 0;
   overflow-y: auto;
 }
-.d-input__wrapper .d-input-icon.d-input-icon--right {
-  margin-right: var(--dt-space-400);
-}
-.d-input__wrapper .d-input-icon.d-input-icon--left {
-  margin-left: var(--dt-space-400);
-}
-.d-input__wrapper .d-textarea + .d-input-icon.d-input-icon--right {
+.d-input__wrapper .d-textarea + .d-input-icon--right {
   position: absolute;
   right: var(--dt-space-450);
 }
+.d-input__wrapper .d-input-icon--left:has(+ .d-textarea) {
+  align-items: flex-start;
+}
+.d-input__wrapper .d-input-icon:has(+ .d-textarea),
+.d-input__wrapper .d-textarea + .d-input-icon {
+  padding-top: calc(var(--input-padding-y) + var(--dt-space-200));
+}
+.d-input__wrapper .d-input-icon:has(+ .d-textarea--xs),
+.d-input__wrapper .d-textarea--xs + .d-input-icon {
+  --input-padding-y: calc(calc(var(--dt-space-400) - var(--dt-space-100)) - var(--input-border-width));
+  --input-padding-x: calc(var(--dt-space-400) - var(--input-border-width));
+  --input-font-size: var(--dt-font-size-100);
+  --input-border-radius: var(--dt-size-300);
+  padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
+}
+.d-input__wrapper .d-input-icon:has(+ .d-textarea--xs) .d-btn__icon,
+.d-input__wrapper .d-textarea--xs + .d-input-icon .d-btn__icon {
+  width: calc(var(--dt-size-500) - var(--dt-size-200));
+  height: calc(var(--dt-size-500) - var(--dt-size-200));
+}
+.d-input__wrapper .d-input-icon:has(+ .d-textarea--sm),
+.d-input__wrapper .d-textarea--sm + .d-input-icon {
+  --input-padding-y: calc(var(--dt-space-400) - var(--input-border-width));
+  --input-padding-x: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
+  --input-font-size: var(--dt-font-size-100);
+  padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
+}
+.d-input__wrapper .d-input-icon:has(+ .d-textarea--sm) .d-btn__icon,
+.d-input__wrapper .d-textarea--sm + .d-input-icon .d-btn__icon {
+  width: var(--dt-size-500);
+  height: var(--dt-size-500);
+}
+.d-input__wrapper .d-input-icon:has(+ .d-textarea--lg),
+.d-input__wrapper .d-textarea--lg + .d-input-icon {
+  --input-padding-y: calc((var(--dt-space-400) + var(--dt-space-200)) - var(--input-border-width));
+  --input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
+  --input-font-size: var(--dt-font-size-300);
+  --input-border-radius: var(--dt-size-450);
+  padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
+}
+.d-input__wrapper .d-input-icon:has(+ .d-textarea--lg) .d-btn__icon,
+.d-input__wrapper .d-textarea--lg + .d-input-icon .d-btn__icon {
+  width: calc(var(--dt-size-300) * 5);
+  height: calc(var(--dt-size-300) * 5);
+}
+.d-input__wrapper .d-input-icon:has(+ .d-textarea--xl),
+.d-input__wrapper .d-textarea--xl + .d-input-icon {
+  --input-padding-y: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
+  --input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
+  --input-font-size: var(--dt-font-size-400);
+  --input-border-radius: var(--dt-size-500);
+  padding-top: calc(var(--input-padding-y) + (var(--dt-space-350) - var(--dt-space-100)));
+}
+.d-input__wrapper .d-input-icon:has(+ .d-textarea--xl) .d-btn__icon,
+.d-input__wrapper .d-textarea--xl + .d-input-icon .d-btn__icon {
+  width: var(--dt-size-550);
+  height: var(--dt-size-550);
+}
 .d-input__wrapper .d-input,
 .d-input__wrapper .d-textarea {
   flex: 1;
@@ -2275,17 +2326,6 @@ legend .d-label {
   outline: 0;
   box-shadow: none !important;
 }
-.d-input__wrapper .d-input.d-input-icon--right,
-.d-input__wrapper .d-textarea.d-input-icon--right {
-  padding-right: var(--dt-space-350);
-}
-.d-input__wrapper .d-input.d-input-icon--left,
-.d-input__wrapper .d-textarea.d-input-icon--left {
-  padding-left: var(--dt-space-350);
-}
-.d-input__wrapper .d-textarea.d-input-icon--right {
-  padding-right: var(--dt-space-625);
-}
 .d-input.d-input--xs {
   --input-padding-y: calc(calc(var(--dt-space-400) - var(--dt-space-100)) - var(--input-border-width));
   --input-padding-x: calc(var(--dt-space-400) - var(--input-border-width));
@@ -2388,37 +2428,17 @@ legend .d-label {
   --input-color-border: var(--dt-inputs-color-border-success) !important;
 }
 .d-input-icon {
-  --input-icon-size: var(--dt-size-500);
-  --input-icon-container-height: var(--dt-size-600);
-  z-index: var(--zi-base1);
-  display: inline-flex;
+  display: none;
   align-items: center;
-  height: var(--input-icon-container-height);
-  margin: 0;
-}
-.d-input-icon.d-input--xs {
-  --input-icon-container-height: calc(var(--dt-size-600) - var(--dt-size-300));
 }
-.d-input-icon--xs {
-  --input-icon-size: var(--dt-icon-size-100);
-}
-.d-input-icon.d-input--sm {
-  --input-icon-container-height: var(--dt-size-600);
-}
-.d-input-icon--sm {
-  --input-icon-size: var(--dt-icon-size-200);
-}
-.d-input-icon.d-input--lg {
-  --input-icon-container-height: calc(var(--dt-size-300) * 10);
-}
-.d-input-icon--lg {
-  --input-icon-size: var(--dt-icon-size-400);
+.d-input-icon:has( > svg) {
+  display: inline-flex;
 }
-.d-input-icon.d-input--xl {
-  --input-icon-container-height: calc(var(--dt-size-300) * 14);
+.d-input-icon--right:has( > svg) {
+  margin-right: var(--dt-space-400);
 }
-.d-input-icon--xl {
-  --input-icon-size: var(--dt-icon-size-500);
+.d-input-icon--left:has(> svg) {
+  margin-left: var(--dt-space-400);
 }
 .d-keyboard-shortcut {
   display: inline-flex;
@@ -7587,7 +7607,7 @@ body {
 }
 /**
  * Do not edit directly
- * Generated on Fri, 07 Jun 2024 22:29:04 GMT
+ * Generated on Thu, 04 Jul 2024 22:07:54 GMT
  */
 
 .dialtone-theme-light {
@@ -8369,9 +8389,13 @@ body {
   --dt-badge-color-background-warning: #FFF4CC;
   --dt-badge-color-background-critical: #FFE5E6;
   --dt-badge-color-background-bulletin: #7C52FF;
+  --dt-badge-color-background-bulletin-subtle: hsl(255 100% 66.1% / 0.1);
   --dt-badge-color-background-ai: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
   --dt-badge-color-foreground-default: #000000;
   --dt-badge-color-foreground-bulletin: #ffffff;
+  --dt-badge-color-foreground-bulletin-subtle: hsl(255 100% 26.4%);
+  --dt-badge-color-border-default: hsl(0 0% 0% / 0.1);
+  --dt-badge-color-border-bulletin-subtle: hsl(255 100% 66.1% / 0.5);
   --dt-checkbox-size-width: 1.6rem;
   --dt-checkbox-size-height: 1.6rem;
   --dt-checkbox-size-radius: 0.4rem;
@@ -8404,7 +8428,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Fri, 07 Jun 2024 22:29:05 GMT
+ * Generated on Thu, 04 Jul 2024 22:07:54 GMT
  */
 
 .dialtone-theme-dark {
@@ -9306,9 +9330,13 @@ body {
   --dt-badge-color-background-warning: #815008;
   --dt-badge-color-background-critical: #5B0505;
   --dt-badge-color-background-bulletin: #7C52FF;
+  --dt-badge-color-background-bulletin-subtle: hsl(261 100% 74.7% / 0.6);
   --dt-badge-color-background-ai: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
   --dt-badge-color-foreground-default: #E6E6E6;
   --dt-badge-color-foreground-bulletin: #ffffff;
+  --dt-badge-color-foreground-bulletin-subtle: hsl(0 0% 90.2%);
+  --dt-badge-color-border-default: hsl(0 0% 100% / 0.14);
+  --dt-badge-color-border-bulletin-subtle: hsl(261 100% 74.7% / 0.6);
   --dt-checkbox-size-width: 1.6rem;
   --dt-checkbox-size-height: 1.6rem;
   --dt-checkbox-size-radius: 0.4rem;
@@ -10836,43 +10864,43 @@ body {
   --fco: 0% !important;
 }
 
-.d-bco-100, .h\:d-bco-100:hover, .f\:d-bco-100:focus, .f\:d-bco-100:focus-within, .fv\:d-bco-100:focus-visible {
+.d-bco100, .h\:d-bco100:hover, .f\:d-bco100:focus, .f\:d-bco100:focus-within, .fv\:d-bco100:focus-visible {
   --bco: 100% !important;
 }
 
-.d-bco-99, .h\:d-bco-99:hover, .f\:d-bco-99:focus, .f\:d-bco-99:focus-within, .fv\:d-bco-99:focus-visible {
+.d-bco99, .h\:d-bco99:hover, .f\:d-bco99:focus, .f\:d-bco99:focus-within, .fv\:d-bco99:focus-visible {
   --bco: 99% !important;
 }
 
-.d-bco-95, .h\:d-bco-95:hover, .f\:d-bco-95:focus, .f\:d-bco-95:focus-within, .fv\:d-bco-95:focus-visible {
+.d-bco95, .h\:d-bco95:hover, .f\:d-bco95:focus, .f\:d-bco95:focus-within, .fv\:d-bco95:focus-visible {
   --bco: 95% !important;
 }
 
-.d-bco-90, .h\:d-bco-90:hover, .f\:d-bco-90:focus, .f\:d-bco-90:focus-within, .fv\:d-bco-90:focus-visible {
+.d-bco90, .h\:d-bco90:hover, .f\:d-bco90:focus, .f\:d-bco90:focus-within, .fv\:d-bco90:focus-visible {
   --bco: 90% !important;
 }
 
-.d-bco-85, .h\:d-bco-85:hover, .f\:d-bco-85:focus, .f\:d-bco-85:focus-within, .fv\:d-bco-85:focus-visible {
+.d-bco85, .h\:d-bco85:hover, .f\:d-bco85:focus, .f\:d-bco85:focus-within, .fv\:d-bco85:focus-visible {
   --bco: 85% !important;
 }
 
-.d-bco-75, .h\:d-bco-75:hover, .f\:d-bco-75:focus, .f\:d-bco-75:focus-within, .fv\:d-bco-75:focus-visible {
+.d-bco75, .h\:d-bco75:hover, .f\:d-bco75:focus, .f\:d-bco75:focus-within, .fv\:d-bco75:focus-visible {
   --bco: 75% !important;
 }
 
-.d-bco-50, .h\:d-bco-50:hover, .f\:d-bco-50:focus, .f\:d-bco-50:focus-within, .fv\:d-bco-50:focus-visible {
+.d-bco50, .h\:d-bco50:hover, .f\:d-bco50:focus, .f\:d-bco50:focus-within, .fv\:d-bco50:focus-visible {
   --bco: 50% !important;
 }
 
-.d-bco-25, .h\:d-bco-25:hover, .f\:d-bco-25:focus, .f\:d-bco-25:focus-within, .fv\:d-bco-25:focus-visible {
+.d-bco25, .h\:d-bco25:hover, .f\:d-bco25:focus, .f\:d-bco25:focus-within, .fv\:d-bco25:focus-visible {
   --bco: 25% !important;
 }
 
-.d-bco-10, .h\:d-bco-10:hover, .f\:d-bco-10:focus, .f\:d-bco-10:focus-within, .fv\:d-bco-10:focus-visible {
+.d-bco10, .h\:d-bco10:hover, .f\:d-bco10:focus, .f\:d-bco10:focus-within, .fv\:d-bco10:focus-visible {
   --bco: 10% !important;
 }
 
-.d-bco-0, .h\:d-bco-0:hover, .f\:d-bco-0:focus, .f\:d-bco-0:focus-within, .fv\:d-bco-0:focus-visible {
+.d-bco0, .h\:d-bco0:hover, .f\:d-bco0:focus, .f\:d-bco0:focus-within, .fv\:d-bco0:focus-visible {
   --bco: 0% !important;
 }