@dialpad/dialtone-css 8.37.1 → 8.38.0

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

@@ -114,33 +114,6 @@
     }
 }
 
-.d-input__label-text {
-    display: flex;
-    flex: 1 0%;
-    align-items: baseline;
-    justify-content: space-between;
-    box-sizing: border-box;
-    margin-bottom: var(--dt-space-300);
-    color: var(--dt-color-foreground-secondary);
-    font-weight: var(--dt-font-weight-semi-bold);
-    font-size: var(--dt-font-size-200);
-    font-family: inherit;
-    line-height: var(--dt-font-line-height-300);
-    word-break: break-word;
-    overflow-wrap: break-word;
-}
-
-.d-input__description {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    color: var(--dt-color-foreground-tertiary);
-    font-size: var(--dt-font-size-100);
-    font-family: inherit;
-    line-height: var(--dt-font-line-height-400);
-    fill: currentColor;
-}
-
 .d-input__length-description {
     margin-bottom: var(--dt-space-200);
 }
@@ -270,18 +243,15 @@
 
 //  $$  VALIDATION STATES
 //  ----------------------------------------------------------------------------
-.d-input--warning,
-.d-textarea--warning {
+.d-input--warning {
     --input-color-border: var(--dt-inputs-color-border-warning) !important;
 }
 
-.d-input--error,
-.d-textarea--error {
+.d-input--error {
     --input-color-border: var(--dt-inputs-color-border-critical) !important;
 }
 
-.d-input--success,
-.d-textarea--success {
+.d-input--success {
     --input-color-border: var(--dt-inputs-color-border-success) !important;
 }
 
@@ -290,7 +260,7 @@
 //  ----------------------------------------------------------------------------
 .d-input-icon {
     display: none;
-    
+
     &:not(:empty) {
         display: inline-flex;
         align-items: center;
@@ -299,8 +269,8 @@
     &--right:not(:empty) {
         margin-right: var(--dt-space-400);
     }
-    
+
     &--left:not(:empty) {
         margin-left: var(--dt-space-400);
     }
-} 
+}

package/lib/build/less/components/scrollbar.less

@@ -0,0 +1,25 @@
+.scrollbar {
+  .os-theme-dark {
+    // main color for the scrollbars handle
+    --os-handle-color: var(--dt-color-surface-contrast);
+    --os-handle-bg: var(--os-handle-color);
+    --os-handle-bg-hover: var(--os-handle-color);
+    --os-handle-bg-active: var(--os-handle-color);
+  }
+
+  .os-scrollbar {
+    .os-scrollbar-handle {
+      cursor: auto;
+      opacity: var(--dt-opacity-700);
+
+      &:hover {
+        width: calc(var(--os-handle-perpendicular-size) + var(--dt-size-200));
+        opacity: var(--dt-opacity-800);
+      }
+
+      &:active {
+        opacity: var(--dt-opacity-900);
+      }
+    }
+  }
+}

package/lib/build/less/dialtone.less

@@ -51,6 +51,7 @@
 @import 'components/toggle';
 @import 'components/presence';
 @import 'components/icon';
+@import 'components/scrollbar';
 
 //  --  UTILITIES
 @import 'utilities/backgrounds';

package/lib/dist/dialtone.css

@@ -2215,31 +2215,6 @@ legend .d-label {
 .d-input__wrapper::-ms-expand {
   display: none;
 }
-.d-input__label-text {
-  display: flex;
-  flex: 1 0%;
-  align-items: baseline;
-  justify-content: space-between;
-  box-sizing: border-box;
-  margin-bottom: var(--dt-space-300);
-  color: var(--dt-color-foreground-secondary);
-  font-weight: var(--dt-font-weight-semi-bold);
-  font-size: var(--dt-font-size-200);
-  font-family: inherit;
-  line-height: var(--dt-font-line-height-300);
-  word-break: break-word;
-  overflow-wrap: break-word;
-}
-.d-input__description {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  color: var(--dt-color-foreground-tertiary);
-  font-size: var(--dt-font-size-100);
-  font-family: inherit;
-  line-height: var(--dt-font-line-height-400);
-  fill: currentColor;
-}
 .d-input__length-description {
   margin-bottom: var(--dt-space-200);
 }
@@ -2415,16 +2390,13 @@ legend .d-label {
   width: var(--dt-size-550);
   height: var(--dt-size-550);
 }
-.d-input--warning,
-.d-textarea--warning {
+.d-input--warning {
   --input-color-border: var(--dt-inputs-color-border-warning) !important;
 }
-.d-input--error,
-.d-textarea--error {
+.d-input--error {
   --input-color-border: var(--dt-inputs-color-border-critical) !important;
 }
-.d-input--success,
-.d-textarea--success {
+.d-input--success {
   --input-color-border: var(--dt-inputs-color-border-success) !important;
 }
 .d-input-icon {
@@ -4303,6 +4275,23 @@ legend .d-label {
   align-items: center;
   justify-content: center;
 }
+.scrollbar .os-theme-dark {
+  --os-handle-color: var(--dt-color-surface-contrast);
+  --os-handle-bg: var(--os-handle-color);
+  --os-handle-bg-hover: var(--os-handle-color);
+  --os-handle-bg-active: var(--os-handle-color);
+}
+.scrollbar .os-scrollbar .os-scrollbar-handle {
+  cursor: auto;
+  opacity: var(--dt-opacity-700);
+}
+.scrollbar .os-scrollbar .os-scrollbar-handle:hover {
+  width: calc(var(--os-handle-perpendicular-size) + var(--dt-size-200));
+  opacity: var(--dt-opacity-800);
+}
+.scrollbar .os-scrollbar .os-scrollbar-handle:active {
+  opacity: var(--dt-opacity-900);
+}
 .d-bga-scroll {
   background-attachment: scroll !important;
 }
@@ -7607,7 +7596,7 @@ body {
 }
 /**
  * Do not edit directly
- * Generated on Mon, 08 Jul 2024 20:08:28 GMT
+ * Generated on Fri, 12 Jul 2024 19:36:11 GMT
  */
 
 .dialtone-theme-light {
@@ -7904,6 +7893,7 @@ body {
   --dt-color-gradient-magenta-purple: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%); /* Gradient for Ai-oriented treatments. */
   --dt-color-brand-purple: #7C52FF; /* Primary brand color. */
   --dt-color-brand-magenta: #F9008E; /* Secondary brand color, typically used as an accent color. */
+  --dt-color-brand-gold: #F6AB3C; /* Secondary brand color, typically used as an accent color. */
   --dt-color-foreground-primary: #000000; /* Default text color throughout the UI. */
   --dt-color-foreground-secondary: #3A3A3A; /* Example uses include introduction paragraphs, labels, and descriptions paired with form elements. */
   --dt-color-foreground-tertiary: #555555; /* Used to imply visual hierarchy relative to primary and secondary text colors, e.g. headlines and labels. */
@@ -8428,7 +8418,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Mon, 08 Jul 2024 20:08:28 GMT
+ * Generated on Fri, 12 Jul 2024 19:36:12 GMT
  */
 
 .dialtone-theme-dark {
@@ -8725,6 +8715,7 @@ body {
   --dt-color-gradient-magenta-purple: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%); /* Gradient for Ai-oriented treatments. */
   --dt-color-brand-purple: #7C52FF; /* Primary brand color. */
   --dt-color-brand-magenta: #F9008E; /* Secondary brand color, typically used as an accent color. */
+  --dt-color-brand-gold: #F6AB3C; /* Secondary brand color, typically used as an accent color. */
   --dt-color-foreground-primary: #E6E6E6; /* Default text color throughout the UI. */
   --dt-color-foreground-secondary: #C2C2C2; /* Example uses include introduction paragraphs, labels, and descriptions paired with form elements. */
   --dt-color-foreground-tertiary: #AAAAAA; /* Used to imply visual hierarchy relative to primary and secondary text colors, e.g. headlines and labels. */