@dialpad/dialtone-css 8.37.2 → 8.38.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,32 @@
1
+ .scrollbar {
2
+ .os-theme-dark {
3
+ // main color for the scrollbars handle
4
+ --os-handle-color: var(--dt-color-surface-contrast);
5
+ --os-handle-bg: var(--os-handle-color);
6
+ --os-handle-bg-hover: var(--os-handle-color);
7
+ --os-handle-bg-active: var(--os-handle-color);
8
+ }
9
+
10
+ .os-scrollbar {
11
+ &.os-scrollbar-horizontal .os-scrollbar-handle:hover {
12
+ height: calc(var(--os-handle-perpendicular-size) + var(--dt-size-200));
13
+ }
14
+
15
+ &.os-scrollbar-vertical .os-scrollbar-handle:hover {
16
+ width: calc(var(--os-handle-perpendicular-size) + var(--dt-size-200));
17
+ }
18
+
19
+ .os-scrollbar-handle {
20
+ cursor: auto;
21
+ opacity: var(--dt-opacity-700);
22
+
23
+ &:hover {
24
+ opacity: var(--dt-opacity-800);
25
+ }
26
+
27
+ &:active {
28
+ opacity: var(--dt-opacity-900);
29
+ }
30
+ }
31
+ }
32
+ }
@@ -51,6 +51,7 @@
51
51
  @import 'components/toggle';
52
52
  @import 'components/presence';
53
53
  @import 'components/icon';
54
+ @import 'components/scrollbar';
54
55
 
55
56
  // -- UTILITIES
56
57
  @import 'utilities/backgrounds';
@@ -4275,6 +4275,28 @@ legend .d-label {
4275
4275
  align-items: center;
4276
4276
  justify-content: center;
4277
4277
  }
4278
+ .scrollbar .os-theme-dark {
4279
+ --os-handle-color: var(--dt-color-surface-contrast);
4280
+ --os-handle-bg: var(--os-handle-color);
4281
+ --os-handle-bg-hover: var(--os-handle-color);
4282
+ --os-handle-bg-active: var(--os-handle-color);
4283
+ }
4284
+ .scrollbar .os-scrollbar.os-scrollbar-horizontal .os-scrollbar-handle:hover {
4285
+ height: calc(var(--os-handle-perpendicular-size) + var(--dt-size-200));
4286
+ }
4287
+ .scrollbar .os-scrollbar.os-scrollbar-vertical .os-scrollbar-handle:hover {
4288
+ width: calc(var(--os-handle-perpendicular-size) + var(--dt-size-200));
4289
+ }
4290
+ .scrollbar .os-scrollbar .os-scrollbar-handle {
4291
+ cursor: auto;
4292
+ opacity: var(--dt-opacity-700);
4293
+ }
4294
+ .scrollbar .os-scrollbar .os-scrollbar-handle:hover {
4295
+ opacity: var(--dt-opacity-800);
4296
+ }
4297
+ .scrollbar .os-scrollbar .os-scrollbar-handle:active {
4298
+ opacity: var(--dt-opacity-900);
4299
+ }
4278
4300
  .d-bga-scroll {
4279
4301
  background-attachment: scroll !important;
4280
4302
  }
@@ -7579,7 +7601,7 @@ body {
7579
7601
  }
7580
7602
  /**
7581
7603
  * Do not edit directly
7582
- * Generated on Tue, 09 Jul 2024 10:08:49 GMT
7604
+ * Generated on Tue, 23 Jul 2024 10:08:52 GMT
7583
7605
  */
7584
7606
 
7585
7607
  .dialtone-theme-light {
@@ -7876,6 +7898,7 @@ body {
7876
7898
  --dt-color-gradient-magenta-purple: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%); /* Gradient for Ai-oriented treatments. */
7877
7899
  --dt-color-brand-purple: #7C52FF; /* Primary brand color. */
7878
7900
  --dt-color-brand-magenta: #F9008E; /* Secondary brand color, typically used as an accent color. */
7901
+ --dt-color-brand-gold: #F6AB3C; /* Secondary brand color, typically used as an accent color. */
7879
7902
  --dt-color-foreground-primary: #000000; /* Default text color throughout the UI. */
7880
7903
  --dt-color-foreground-secondary: #3A3A3A; /* Example uses include introduction paragraphs, labels, and descriptions paired with form elements. */
7881
7904
  --dt-color-foreground-tertiary: #555555; /* Used to imply visual hierarchy relative to primary and secondary text colors, e.g. headlines and labels. */
@@ -8400,7 +8423,7 @@ body {
8400
8423
 
8401
8424
  /**
8402
8425
  * Do not edit directly
8403
- * Generated on Tue, 09 Jul 2024 10:08:49 GMT
8426
+ * Generated on Tue, 23 Jul 2024 10:08:53 GMT
8404
8427
  */
8405
8428
 
8406
8429
  .dialtone-theme-dark {
@@ -8697,6 +8720,7 @@ body {
8697
8720
  --dt-color-gradient-magenta-purple: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%); /* Gradient for Ai-oriented treatments. */
8698
8721
  --dt-color-brand-purple: #7C52FF; /* Primary brand color. */
8699
8722
  --dt-color-brand-magenta: #F9008E; /* Secondary brand color, typically used as an accent color. */
8723
+ --dt-color-brand-gold: #F6AB3C; /* Secondary brand color, typically used as an accent color. */
8700
8724
  --dt-color-foreground-primary: #E6E6E6; /* Default text color throughout the UI. */
8701
8725
  --dt-color-foreground-secondary: #C2C2C2; /* Example uses include introduction paragraphs, labels, and descriptions paired with form elements. */
8702
8726
  --dt-color-foreground-tertiary: #AAAAAA; /* Used to imply visual hierarchy relative to primary and secondary text colors, e.g. headlines and labels. */