@dialpad/dialtone-css 8.37.2 → 8.38.0

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

@@ -4275,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;
 }
@@ -7579,7 +7596,7 @@ body {
 }
 /**
  * Do not edit directly
- * Generated on Tue, 09 Jul 2024 10:08:49 GMT
+ * Generated on Fri, 12 Jul 2024 19:36:11 GMT
  */
 
 .dialtone-theme-light {
@@ -7876,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. */
@@ -8400,7 +8418,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Tue, 09 Jul 2024 10:08:49 GMT
+ * Generated on Fri, 12 Jul 2024 19:36:12 GMT
  */
 
 .dialtone-theme-dark {
@@ -8697,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. */