@dialpad/dialtone-css 8.57.0 → 8.57.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.
@@ -3,8 +3,7 @@
3
3
  flex-flow: row wrap;
4
4
  gap: var(--description-list-gap);
5
5
  align-items: flex-start;
6
- font-size: var(--dt-font-size-100);
7
- line-height: var(--dt-font-line-height-300);
6
+ font: var(--dt-typography-body-sm);
8
7
 
9
8
  --description-list-gap: var(--dt-space-400);
10
9
  each(range(0, 600, 100), {
@@ -20,6 +19,7 @@
20
19
  &__term {
21
20
  flex: 0 1 40%;
22
21
  color: var(--dt-color-foreground-tertiary);
22
+ font: var(--dt-typography-label-sm);
23
23
  }
24
24
 
25
25
  &__description {
@@ -186,6 +186,7 @@ optgroup,
186
186
  select,
187
187
  textarea {
188
188
  margin: 0; /* 2 */
189
+ color: inherit;
189
190
  font-size: 100%; /* 1 */
190
191
  font-family: inherit; /* 1 */
191
192
  line-height: 1.15; /* 1 */
@@ -282,6 +283,7 @@ progress {
282
283
 
283
284
  textarea {
284
285
  overflow: auto;
286
+ color: inherit;
285
287
  }
286
288
 
287
289
  /**
@@ -103,7 +103,7 @@
103
103
  width: var(--dt-size-550);
104
104
  height: var(--dt-size-550);
105
105
  margin-bottom: var(--dt-space-450-negative);
106
- color: var(--dt-color-neutral-white);
106
+ color: var(--dt-color-foreground-primary-inverted);
107
107
  font-size: var(--dt-font-size-200);
108
108
 
109
109
  .d-recipe-ivr-node__connector--selected {
@@ -71,12 +71,21 @@
71
71
  .d-h100vh { height: 100vh !important; }
72
72
  .d-h-auto { height: auto !important; }
73
73
  .d-h-unset { height: unset !important; }
74
+ .d-h-fit-content { height: fit-content !important; }
75
+ .d-h-max-content { height: max-content !important; }
76
+ .d-h-min-content { height: min-content !important; }
74
77
 
75
78
  .d-hmn-auto { min-height: auto !important; }
76
79
  .d-hmn-unset { min-height: unset !important; }
80
+ .d-hmn-fit-content { min-height: fit-content !important; }
81
+ .d-hmn-max-content { min-height: max-content !important; }
82
+ .d-hmn-min-content { min-height: min-content !important; }
77
83
 
78
84
  .d-hmx-auto { max-height: auto !important; }
79
85
  .d-hmx-unset { max-height: unset !important; }
86
+ .d-hmx-fit-content { max-height: fit-content !important; }
87
+ .d-hmx-max-content { max-height: max-content !important; }
88
+ .d-hmx-min-content { max-height: min-content !important; }
80
89
 
81
90
 
82
91
  // ============================================================================
@@ -163,6 +163,7 @@ select,
163
163
  textarea {
164
164
  margin: 0;
165
165
  /* 2 */
166
+ color: inherit;
166
167
  font-size: 100%;
167
168
  /* 1 */
168
169
  font-family: inherit;
@@ -251,6 +252,7 @@ progress {
251
252
  */
252
253
  textarea {
253
254
  overflow: auto;
255
+ color: inherit;
254
256
  }
255
257
  /**
256
258
  * 1. Add the correct box sizing in IE 10.
@@ -2335,8 +2337,7 @@ template {
2335
2337
  flex-flow: row wrap;
2336
2338
  gap: var(--description-list-gap);
2337
2339
  align-items: flex-start;
2338
- font-size: var(--dt-font-size-100);
2339
- line-height: var(--dt-font-line-height-300);
2340
+ font: var(--dt-typography-body-sm);
2340
2341
  --description-list-gap: var(--dt-space-400);
2341
2342
  }
2342
2343
  .d-description-list--gap-0 {
@@ -2366,6 +2367,7 @@ template {
2366
2367
  .d-description-list__term {
2367
2368
  flex: 0 1 40%;
2368
2369
  color: var(--dt-color-foreground-tertiary);
2370
+ font: var(--dt-typography-label-sm);
2369
2371
  }
2370
2372
  .d-description-list__description {
2371
2373
  flex: 1 1 50%;
@@ -7502,18 +7504,57 @@ legend .d-label--md {
7502
7504
  .d-h-unset {
7503
7505
  height: unset !important;
7504
7506
  }
7507
+ .d-h-fit-content {
7508
+ height: -webkit-fit-content !important;
7509
+ height: -moz-fit-content !important;
7510
+ height: fit-content !important;
7511
+ }
7512
+ .d-h-max-content {
7513
+ height: -webkit-max-content !important;
7514
+ height: max-content !important;
7515
+ }
7516
+ .d-h-min-content {
7517
+ height: -webkit-min-content !important;
7518
+ height: min-content !important;
7519
+ }
7505
7520
  .d-hmn-auto {
7506
7521
  min-height: auto !important;
7507
7522
  }
7508
7523
  .d-hmn-unset {
7509
7524
  min-height: unset !important;
7510
7525
  }
7526
+ .d-hmn-fit-content {
7527
+ min-height: -webkit-fit-content !important;
7528
+ min-height: -moz-fit-content !important;
7529
+ min-height: fit-content !important;
7530
+ }
7531
+ .d-hmn-max-content {
7532
+ min-height: -webkit-max-content !important;
7533
+ min-height: max-content !important;
7534
+ }
7535
+ .d-hmn-min-content {
7536
+ min-height: -webkit-min-content !important;
7537
+ min-height: min-content !important;
7538
+ }
7511
7539
  .d-hmx-auto {
7512
7540
  max-height: auto !important;
7513
7541
  }
7514
7542
  .d-hmx-unset {
7515
7543
  max-height: unset !important;
7516
7544
  }
7545
+ .d-hmx-fit-content {
7546
+ max-height: -webkit-fit-content !important;
7547
+ max-height: -moz-fit-content !important;
7548
+ max-height: fit-content !important;
7549
+ }
7550
+ .d-hmx-max-content {
7551
+ max-height: -webkit-max-content !important;
7552
+ max-height: max-content !important;
7553
+ }
7554
+ .d-hmx-min-content {
7555
+ max-height: -webkit-min-content !important;
7556
+ max-height: min-content !important;
7557
+ }
7517
7558
  .d-w10p {
7518
7559
  width: 10% !important;
7519
7560
  }
@@ -9221,7 +9262,7 @@ ul {
9221
9262
  width: var(--dt-size-550);
9222
9263
  height: var(--dt-size-550);
9223
9264
  margin-bottom: var(--dt-space-450-negative);
9224
- color: var(--dt-color-neutral-white);
9265
+ color: var(--dt-color-foreground-primary-inverted);
9225
9266
  font-size: var(--dt-font-size-200);
9226
9267
  }
9227
9268
  .d-recipe-ivr-node__connector-dtmf .d-recipe-ivr-node__connector--selected {
@@ -10023,6 +10064,7 @@ body {
10023
10064
  --dt-color-brand-purple-hsl: var(--dt-color-brand-purple-h) var(--dt-color-brand-purple-s) var(--dt-color-brand-purple-l);
10024
10065
  --dt-color-brand-purple-hsla: hsl(var(--dt-color-brand-purple-h) var(--dt-color-brand-purple-s) var(--dt-color-brand-purple-l) / var(--alpha, 100%));
10025
10066
  --dt-color-brand-purple: #7C52FF; /* Primary brand color. */
10067
+ --dt-color-gradient-gold-red-magenta-purple: linear-gradient(135deg, #471571 0%, #551B84 3.08%, #7C229E 14.48%, #9024A4 23.67%, #B02290 35.5%, #D32B86 48.3%, #E92F6F 60.29%, #F6484F 70.08%, #FB7328 90.02%, #F3960F 97.29%, #F3960F 100%); /* Gradient for Ai-oriented treatments. */
10026
10068
  --dt-color-indigo-1000-h: 203.2258064516129;
10027
10069
  --dt-color-indigo-1000-s: 100%;
10028
10070
  --dt-color-indigo-1000-l: 6.078431372549019%;
@@ -11438,7 +11480,6 @@ body {
11438
11480
  --dt-shadow-large: var(--dt-shadow-large-offset-x) var(--dt-shadow-large-offset-y) var(--dt-shadow-large-blur) var(--dt-shadow-large-spread) var(--dt-shadow-large-color);
11439
11481
  --dt-shadow-medium: var(--dt-shadow-medium-offset-x) var(--dt-shadow-medium-offset-y) var(--dt-shadow-medium-blur) var(--dt-shadow-medium-spread) var(--dt-shadow-medium-color);
11440
11482
  --dt-shadow-small: var(--dt-shadow-small-offset-x) var(--dt-shadow-small-offset-y) var(--dt-shadow-small-blur) var(--dt-shadow-small-spread) var(--dt-shadow-small-color);
11441
- --dt-color-gradient-gold-red-magenta-purple: linear-gradient(140deg, #FF5E2F 0%, var(--dt-color-brand-red) 25%, var(--dt-color-brand-magenta) 66%, #9D42EA 100%); /* Gradient for Ai-oriented treatments. */
11442
11483
  --dt-color-gradient-magenta-purple: linear-gradient(135deg, var(--dt-color-brand-magenta) 10%, var(--dt-color-brand-purple) 90%); /* Gradient for Ai-oriented treatments. */
11443
11484
  --dt-size-base: calc(1rem * 0.8);
11444
11485
  --dt-font-family-expressive: "Season Mix", var(--dt-font-family-body);
@@ -32260,6 +32301,7 @@ body {
32260
32301
  --dt-badge-color-foreground-default-hsl: var(--dt-color-black-1000-hsl);
32261
32302
  --dt-badge-color-foreground-default-hsla: var(--dt-color-black-1000-hsla);
32262
32303
  --dt-badge-color-foreground-default: var(--dt-color-black-1000);
32304
+ --dt-badge-color-background-ai: var(--dt-color-gradient-gold-red-magenta-purple);
32263
32305
  --dt-badge-color-background-bulletin-subtle-h: var(--dt-color-purple-200-h);
32264
32306
  --dt-badge-color-background-bulletin-subtle-s: var(--dt-color-purple-200-s);
32265
32307
  --dt-badge-color-background-bulletin-subtle-l: var(--dt-color-purple-200-l);
@@ -32649,6 +32691,7 @@ body {
32649
32691
  --dt-color-border-accent-hsl: var(--dt-color-brand-magenta-hsl);
32650
32692
  --dt-color-border-accent-hsla: var(--dt-color-brand-magenta-hsla);
32651
32693
  --dt-color-border-accent: var(--dt-color-brand-magenta);
32694
+ --dt-color-border-ai: var(--dt-color-gradient-gold-red-magenta-purple);
32652
32695
  --dt-color-border-focus-h: var(--dt-color-blue-425-h);
32653
32696
  --dt-color-border-focus-s: var(--dt-color-blue-425-s);
32654
32697
  --dt-color-border-focus-l: var(--dt-color-blue-425-l);
@@ -32880,6 +32923,7 @@ body {
32880
32923
  --dt-color-border-subtle-hsl: var(--dt-color-border-subtle-h) var(--dt-color-border-subtle-s) var(--dt-color-border-subtle-l);
32881
32924
  --dt-color-border-subtle-hsla: hsl(var(--dt-color-border-subtle-h) var(--dt-color-border-subtle-s) var(--dt-color-border-subtle-l) / var(--alpha, 11%));
32882
32925
  --dt-color-border-subtle: hsl(0 0% 11% / 0.11);
32926
+ --dt-color-surface-ai: var(--dt-color-gradient-gold-red-magenta-purple);
32883
32927
  --dt-color-surface-backdrop-h: 0;
32884
32928
  --dt-color-surface-backdrop-s: 0%;
32885
32929
  --dt-color-surface-backdrop-l: 0%;
@@ -33694,7 +33738,6 @@ body {
33694
33738
  --dt-badge-color-border-default-hsl: var(--dt-color-border-subtle-hsl);
33695
33739
  --dt-badge-color-border-default-hsla: var(--dt-color-border-subtle-hsla);
33696
33740
  --dt-badge-color-border-default: var(--dt-color-border-subtle);
33697
- --dt-badge-color-background-ai: var(--dt-color-gradient-gold-red-magenta-purple);
33698
33741
  --dt-badge-color-background-bulletin-h: var(--dt-color-surface-brand-strong-h);
33699
33742
  --dt-badge-color-background-bulletin-s: var(--dt-color-surface-brand-strong-s);
33700
33743
  --dt-badge-color-background-bulletin-l: var(--dt-color-surface-brand-strong-l);
@@ -34192,8 +34235,6 @@ body {
34192
34235
  --dt-typography-body-sm-font-size: var(--dt-font-size-100); /* Reduced small text style for less prominent or adjacent content. */
34193
34236
  --dt-typography-body-md-compact-font-size: var(--dt-font-size-200); /* A tighter-spaced version of medium body style. */
34194
34237
  --dt-typography-body-md-font-size: var(--dt-font-size-200); /* Base default medium text style for main content. */
34195
- --dt-color-border-ai: var(--dt-color-gradient-gold-red-magenta-purple);
34196
- --dt-color-surface-ai: var(--dt-color-gradient-gold-red-magenta-purple);
34197
34238
  --dt-color-surface-primary-opaque-inverted-h: 0;
34198
34239
  --dt-color-surface-primary-opaque-inverted-s: 0%;
34199
34240
  --dt-color-surface-primary-opaque-inverted-l: 0%;