@dialpad/dialtone 6.34.2 → 6.36.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,58 @@
1
+ //@import (reference) '../utilities/spacing.less';
2
+
3
+ //
4
+ // DIALTONE
5
+ // COMPONENTS: CARD
6
+ //
7
+ // These are card classes for Dialpad's design system Dialtone.
8
+ // For further documentation of these and other classes,
9
+ // visit https://dialpad.design/components/card
10
+ //
11
+ // TABLE OF CONTENTS
12
+ // • BASE STYLE
13
+ // • HEADER
14
+ // • CONTENT
15
+ // • FOOTER
16
+ //
17
+ // ============================================================================
18
+ // $ BASE STYLE
19
+ // ============================================================================
20
+ // $$ WRAPPER
21
+ // ----------------------------------------------------------------------------
22
+ .d-card {
23
+ display: flex;
24
+ flex-direction: column;
25
+ justify-content: center;
26
+ background: var(--white);
27
+ border-radius: var(--su4);
28
+ box-shadow: var(--bs-card);
29
+ }
30
+
31
+
32
+ // ============================================================================
33
+ // $ CARD AREAS
34
+ // ----------------------------------------------------------------------------
35
+ // $$ HEADER
36
+ // ----------------------------------------------------------------------------
37
+ .d-card__header {
38
+ display: flex;
39
+ flex-direction: row;
40
+ align-items: center;
41
+ justify-content: space-between;
42
+ padding: var(--su8) var(--su8) 0 var(--su16);
43
+ }
44
+
45
+ // $$ CONTENT
46
+ // ----------------------------------------------------------------------------
47
+ .d-card__content {
48
+ padding: var(--su16);
49
+ overflow-y: auto;
50
+ }
51
+
52
+ // $$ FOOTER
53
+ // ----------------------------------------------------------------------------
54
+ .d-card__footer {
55
+ display: flex;
56
+ align-items: center;
57
+ padding: var(--su8);
58
+ }
@@ -16,6 +16,7 @@
16
16
  @import 'components/banner';
17
17
  @import 'components/breadcrumbs';
18
18
  @import 'components/button';
19
+ @import 'components/card';
19
20
  @import 'components/chip';
20
21
  @import 'components/forms';
21
22
  @import 'components/input';
@@ -34,26 +34,65 @@
34
34
 
35
35
 
36
36
  @theme-vars: {
37
- primary-color-h: var(--purple-500-h);
38
- primary-color-s: var(--purple-500-s);
39
- primary-color-l: var(--purple-500-l);
40
- primary-color-hsl: var(--primary-color-h) var(--primary-color-s) var(--primary-color-l);
41
- primary-color: hsl(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l));
42
- primary-color-hover: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) - 10%));
43
- nav-background-color-h: var(--purple-800-h);
44
- nav-background-color-s: var(--purple-800-s);
45
- nav-background-color-l: var(--purple-800-l);
46
- nav-background-color: hsl(var(--nav-background-color-h) var(--nav-background-color-s) var(--nav-background-color-l));
37
+ primary-color-h: var(--purple-500-h);
38
+ primary-color-s: var(--purple-500-s);
39
+ primary-color-l: var(--purple-500-l);
40
+ primary-color-hsl: var(--primary-color-h) var(--primary-color-s) var(--primary-color-l);
41
+ primary-color: hsl(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l));
42
+ primary-color-hover: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) - 10%));
47
43
 
48
- topbar-height: var(--su64);
44
+ topbar-height: var(--su64);
49
45
 
50
- base--font-size: var(--fs16);
51
- base--font-family: @ff-custom;
52
- base--font-feature-settings: 'calt' 0;
53
- base--line-height: var(--lh-normal);
54
- base--corner-radius: 0.25em;
46
+ base--font-size: var(--fs16);
47
+ base--font-family: @ff-custom;
48
+ base--font-feature-settings: 'calt' 0;
49
+ base--line-height: var(--lh-normal);
50
+ base--corner-radius: 0.25em;
51
+
52
+ theme-topbar-color: hsl(var(--theme-topbar-color-hsl));
53
+ theme-topbar-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l); // Use with d-fco[##] Opacity utility
54
+ theme-topbar-color-background: #f9f9f9; // DT7 TBD, possibly black-100?
55
+
56
+ theme-sidebar-color: hsl(var(--theme-sidebar-color-hsl));
57
+ theme-sidebar-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l); // Use with d-fco[##] Opacity utility
58
+ theme-sidebar-color-background: #f9f9f9; // DT7 TBD, possibly black-100?
59
+
60
+ // theme-sidebar-row-color-background: {UNUSED}
61
+ theme-sidebar-row-color-background-hover: var(--purple-100);
62
+ theme-sidebar-active-row-color: hsl(var(--theme-sidebar-active-row-color-hsl));
63
+ theme-sidebar-active-row-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l); // Use with d-fco[##] Opacity utility
64
+ theme-sidebar-active-row-color-background: #e9e9e9; // DT7 TBD, possibly black-100?
65
+
66
+ theme-presence-color-background-available: var(--green-500);
67
+ theme-presence-color-background-busy-unavailable: var(--red-500);
68
+ theme-presence-color-background-busy: var(--yellow-500);
69
+
70
+ theme-mention-color-background: var(--purple-500);
55
71
  }
56
72
 
73
+ // ============================================================================
74
+ // $ THEME CLASSES
75
+ // ============================================================================
76
+
77
+ .d-theme-topbar-fc {
78
+ --fco: 75%;
79
+
80
+ color: hsla(var(--theme-topbar-color-hsl) / var(--fco)) !important;
81
+
82
+ &:hover {
83
+ --fco: 100%;
84
+ }
85
+ }
86
+ .d-theme-topbar-bgc { background-color: var(--theme-topbar-color-background) !important; }
87
+ .d-theme-sidebar-fc { color: hsla(var(--theme-sidebar-color-hsl) / var(--fco)) !important; }
88
+ .d-theme-sidebar-bgc { background-color: var(--theme-sidebar-color-background) !important; }
89
+ .d-theme-sidebar-row-bgc:hover { background-color: var(--theme-sidebar-row-color-background-hover) !important; }
90
+ .d-theme-sidebar-row-active-fc { color: hsla(var(--theme-sidebar-active-row-color-hsl) / var(--fco)) !important; }
91
+ .d-theme-sidebar-row-active-bgc { background-color: var(--theme-sidebar-active-row-color-background) !important; }
92
+ .d-theme-presence-available { background-color: var(--theme-presence-color-background-available) !important; }
93
+ .d-theme-presence-busy-unavailable { background-color: var(--theme-presence-color-background-busy-unavailable) !important; }
94
+ .d-theme-presence-busy { background-color: var(--theme-presence-color-background-busy) !important; }
95
+ .d-theme-mention { background-color: var(--theme-mention-color-background) !important; }
57
96
 
58
97
  // ============================================================================
59
98
  // $ OUTPUT VARIABLES
@@ -121,9 +121,11 @@
121
121
 
122
122
  // $ OPACITY CLASSES
123
123
  // ----------------------------------------------------------------------------
124
+ #d-internals #opacity-classes(100);
124
125
  #d-internals #opacity-classes(99);
125
126
  #d-internals #opacity-classes(95);
126
127
  #d-internals #opacity-classes(90);
128
+ #d-internals #opacity-classes(85);
127
129
  #d-internals #opacity-classes(75);
128
130
  #d-internals #opacity-classes(50);
129
131
  #d-internals #opacity-classes(25);
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M22.325 10.95C20.8583 9.56665 19.2667 8.46249 17.55 7.63749C15.8333 6.81249 13.9833 6.39999 12 6.39999C11.4167 6.39999 10.8625 6.43332 10.3375 6.49999C9.8125 6.56665 9.375 6.66665 9.025 6.79999L7.05 4.82499C7.78333 4.55832 8.56667 4.35415 9.4 4.21249C10.2333 4.07082 11.1 3.99999 12 3.99999C14.3333 3.99999 16.5292 4.48332 18.5875 5.44999C20.6458 6.41665 22.45 7.69165 24 9.27499L22.325 10.95ZM18.25 15.025C17.7 14.4917 17.2 14.0625 16.75 13.7375C16.3 13.4125 15.7333 13.1 15.05 12.8L12.275 10.025C13.8417 10.075 15.2167 10.4042 16.4 11.0125C17.5833 11.6208 18.7083 12.45 19.775 13.5L18.25 15.025ZM20.075 22.325L10.3 12.55C9.4 12.7833 8.58333 13.1375 7.85 13.6125C7.11667 14.0875 6.46667 14.6083 5.9 15.175L4.225 13.5C4.84167 12.8833 5.47083 12.3458 6.1125 11.8875C6.75417 11.4292 7.525 11.0167 8.425 10.65L5.75 7.97499C4.98333 8.37499 4.25833 8.82915 3.575 9.33749C2.89167 9.84582 2.25833 10.3833 1.675 10.95L0 9.27499C0.583333 8.67499 1.21667 8.10832 1.9 7.57499C2.58333 7.04165 3.275 6.58332 3.975 6.19999L1.675 3.92499L2.8 2.79999L21.2 21.2L20.075 22.325ZM12 21.275L8.3 17.55C8.78333 17.0667 9.3375 16.6875 9.9625 16.4125C10.5875 16.1375 11.2667 16 12 16C12.7333 16 13.4125 16.1375 14.0375 16.4125C14.6625 16.6875 15.2167 17.0667 15.7 17.55L12 21.275Z" fill="#0D0C0F"/>
3
+ </svg>
@@ -1057,6 +1057,30 @@ body {
1057
1057
  .d-btn-group.d-btn-group--space-between {
1058
1058
  justify-content: space-between;
1059
1059
  }
1060
+ .d-card {
1061
+ display: flex;
1062
+ flex-direction: column;
1063
+ justify-content: center;
1064
+ background: var(--white);
1065
+ border-radius: var(--su4);
1066
+ box-shadow: var(--bs-card);
1067
+ }
1068
+ .d-card__header {
1069
+ display: flex;
1070
+ flex-direction: row;
1071
+ align-items: center;
1072
+ justify-content: space-between;
1073
+ padding: var(--su8) var(--su8) 0 var(--su16);
1074
+ }
1075
+ .d-card__content {
1076
+ padding: var(--su16);
1077
+ overflow-y: auto;
1078
+ }
1079
+ .d-card__footer {
1080
+ display: flex;
1081
+ align-items: center;
1082
+ padding: var(--su8);
1083
+ }
1060
1084
  .d-chip {
1061
1085
  position: relative;
1062
1086
  display: inline-flex;
@@ -13179,6 +13203,127 @@ body.theme-dark .d\:d-bgc-red-700 {
13179
13203
  .fv\:d-bc-unset:focus-visible {
13180
13204
  border-color: unset !important;
13181
13205
  }
13206
+ .d-fco100,
13207
+ .h\:d-fco100:hover,
13208
+ .f\:d-fco100:focus {
13209
+ --fco: 100% !important;
13210
+ }
13211
+ .f\:d-fco100:focus-within {
13212
+ --fco: 100% !important;
13213
+ }
13214
+ .fv\:d-fco100.focus-visible {
13215
+ --fco: 100% !important;
13216
+ }
13217
+ .fv\:d-fco100:focus-visible {
13218
+ --fco: 100% !important;
13219
+ }
13220
+ @media (prefers-color-scheme: dark) {
13221
+ body.theme-system .d\:d-fco100 {
13222
+ --fco: 100% !important;
13223
+ }
13224
+ }
13225
+ body.theme-dark .d\:d-fco100 {
13226
+ --fco: 100% !important;
13227
+ }
13228
+ .d-bco100,
13229
+ .h\:d-bco100:hover,
13230
+ .f\:d-bco100:focus {
13231
+ --bco: 100% !important;
13232
+ }
13233
+ .f\:d-bco100:focus-within {
13234
+ --bco: 100% !important;
13235
+ }
13236
+ .fv\:d-bco100.focus-visible {
13237
+ --bco: 100% !important;
13238
+ }
13239
+ .fv\:d-bco100:focus-visible {
13240
+ --bco: 100% !important;
13241
+ }
13242
+ @media (prefers-color-scheme: dark) {
13243
+ body.theme-system .d\:d-bco100 {
13244
+ --bco: 100% !important;
13245
+ }
13246
+ }
13247
+ body.theme-dark .d\:d-bco100 {
13248
+ --bco: 100% !important;
13249
+ }
13250
+ .d-dco100 > * + * {
13251
+ --dco: 100% !important;
13252
+ }
13253
+ @media (prefers-color-scheme: dark) {
13254
+ body.theme-system .d\:d-dco100 > * + * {
13255
+ --dco: 100% !important;
13256
+ }
13257
+ }
13258
+ body.theme-dark .d\:d-dco100 > * + * {
13259
+ --dco: 100% !important;
13260
+ }
13261
+ .d-bgo100,
13262
+ .h\:d-bgo100:hover,
13263
+ .f\:d-bgo100:focus {
13264
+ --bgo: 100% !important;
13265
+ }
13266
+ .f\:d-bgo100:focus-within {
13267
+ --bgo: 100% !important;
13268
+ }
13269
+ .fv\:d-bgo100.focus-visible {
13270
+ --bgo: 100% !important;
13271
+ }
13272
+ .fv\:d-bgo100:focus-visible {
13273
+ --bgo: 100% !important;
13274
+ }
13275
+ @media (prefers-color-scheme: dark) {
13276
+ body.theme-system .d\:d-bgo100 {
13277
+ --bgo: 100% !important;
13278
+ }
13279
+ }
13280
+ body.theme-dark .d\:d-bgo100 {
13281
+ --bgo: 100% !important;
13282
+ }
13283
+ .d-bgg-from-o100,
13284
+ .h\:d-bgg-from-100:hover,
13285
+ .f\:d-bgg-from-100:focus {
13286
+ --bgg-from-opacity: 100% !important;
13287
+ }
13288
+ .f\:d-bgg-from-100:focus-within {
13289
+ --bgg-from-opacity: 100% !important;
13290
+ }
13291
+ .fv\:d-bgg-from-100.focus-visible {
13292
+ --bgg-from-opacity: 100% !important;
13293
+ }
13294
+ .fv\:d-bgg-from-100:focus-visible {
13295
+ --bgg-from-opacity: 100% !important;
13296
+ }
13297
+ @media (prefers-color-scheme: dark) {
13298
+ body.theme-system .d\:d-bgg-from-100 {
13299
+ --bgg-from-opacity: 100% !important;
13300
+ }
13301
+ }
13302
+ body.theme-dark .d\:d-bgg-from-100 {
13303
+ --bgg-from-opacity: 100% !important;
13304
+ }
13305
+ .d-bgg-to-o100,
13306
+ .h\:d-bgg-to-100:hover,
13307
+ .f\:d-bgg-to-100:focus {
13308
+ --bgg-to-opacity: 100% !important;
13309
+ }
13310
+ .f\:d-bgg-to-100:focus-within {
13311
+ --bgg-to-opacity: 100% !important;
13312
+ }
13313
+ .fv\:d-bgg-to-100.focus-visible {
13314
+ --bgg-to-opacity: 100% !important;
13315
+ }
13316
+ .fv\:d-bgg-to-100:focus-visible {
13317
+ --bgg-to-opacity: 100% !important;
13318
+ }
13319
+ @media (prefers-color-scheme: dark) {
13320
+ body.theme-system .d\:d-bgg-to-100 {
13321
+ --bgg-to-opacity: 100% !important;
13322
+ }
13323
+ }
13324
+ body.theme-dark .d\:d-bgg-to-100 {
13325
+ --bgg-to-opacity: 100% !important;
13326
+ }
13182
13327
  .d-fco99,
13183
13328
  .h\:d-fco99:hover,
13184
13329
  .f\:d-fco99:focus {
@@ -13542,6 +13687,127 @@ body.theme-dark .d\:d-bgg-from-90 {
13542
13687
  body.theme-dark .d\:d-bgg-to-90 {
13543
13688
  --bgg-to-opacity: 90% !important;
13544
13689
  }
13690
+ .d-fco85,
13691
+ .h\:d-fco85:hover,
13692
+ .f\:d-fco85:focus {
13693
+ --fco: 85% !important;
13694
+ }
13695
+ .f\:d-fco85:focus-within {
13696
+ --fco: 85% !important;
13697
+ }
13698
+ .fv\:d-fco85.focus-visible {
13699
+ --fco: 85% !important;
13700
+ }
13701
+ .fv\:d-fco85:focus-visible {
13702
+ --fco: 85% !important;
13703
+ }
13704
+ @media (prefers-color-scheme: dark) {
13705
+ body.theme-system .d\:d-fco85 {
13706
+ --fco: 85% !important;
13707
+ }
13708
+ }
13709
+ body.theme-dark .d\:d-fco85 {
13710
+ --fco: 85% !important;
13711
+ }
13712
+ .d-bco85,
13713
+ .h\:d-bco85:hover,
13714
+ .f\:d-bco85:focus {
13715
+ --bco: 85% !important;
13716
+ }
13717
+ .f\:d-bco85:focus-within {
13718
+ --bco: 85% !important;
13719
+ }
13720
+ .fv\:d-bco85.focus-visible {
13721
+ --bco: 85% !important;
13722
+ }
13723
+ .fv\:d-bco85:focus-visible {
13724
+ --bco: 85% !important;
13725
+ }
13726
+ @media (prefers-color-scheme: dark) {
13727
+ body.theme-system .d\:d-bco85 {
13728
+ --bco: 85% !important;
13729
+ }
13730
+ }
13731
+ body.theme-dark .d\:d-bco85 {
13732
+ --bco: 85% !important;
13733
+ }
13734
+ .d-dco85 > * + * {
13735
+ --dco: 85% !important;
13736
+ }
13737
+ @media (prefers-color-scheme: dark) {
13738
+ body.theme-system .d\:d-dco85 > * + * {
13739
+ --dco: 85% !important;
13740
+ }
13741
+ }
13742
+ body.theme-dark .d\:d-dco85 > * + * {
13743
+ --dco: 85% !important;
13744
+ }
13745
+ .d-bgo85,
13746
+ .h\:d-bgo85:hover,
13747
+ .f\:d-bgo85:focus {
13748
+ --bgo: 85% !important;
13749
+ }
13750
+ .f\:d-bgo85:focus-within {
13751
+ --bgo: 85% !important;
13752
+ }
13753
+ .fv\:d-bgo85.focus-visible {
13754
+ --bgo: 85% !important;
13755
+ }
13756
+ .fv\:d-bgo85:focus-visible {
13757
+ --bgo: 85% !important;
13758
+ }
13759
+ @media (prefers-color-scheme: dark) {
13760
+ body.theme-system .d\:d-bgo85 {
13761
+ --bgo: 85% !important;
13762
+ }
13763
+ }
13764
+ body.theme-dark .d\:d-bgo85 {
13765
+ --bgo: 85% !important;
13766
+ }
13767
+ .d-bgg-from-o85,
13768
+ .h\:d-bgg-from-85:hover,
13769
+ .f\:d-bgg-from-85:focus {
13770
+ --bgg-from-opacity: 85% !important;
13771
+ }
13772
+ .f\:d-bgg-from-85:focus-within {
13773
+ --bgg-from-opacity: 85% !important;
13774
+ }
13775
+ .fv\:d-bgg-from-85.focus-visible {
13776
+ --bgg-from-opacity: 85% !important;
13777
+ }
13778
+ .fv\:d-bgg-from-85:focus-visible {
13779
+ --bgg-from-opacity: 85% !important;
13780
+ }
13781
+ @media (prefers-color-scheme: dark) {
13782
+ body.theme-system .d\:d-bgg-from-85 {
13783
+ --bgg-from-opacity: 85% !important;
13784
+ }
13785
+ }
13786
+ body.theme-dark .d\:d-bgg-from-85 {
13787
+ --bgg-from-opacity: 85% !important;
13788
+ }
13789
+ .d-bgg-to-o85,
13790
+ .h\:d-bgg-to-85:hover,
13791
+ .f\:d-bgg-to-85:focus {
13792
+ --bgg-to-opacity: 85% !important;
13793
+ }
13794
+ .f\:d-bgg-to-85:focus-within {
13795
+ --bgg-to-opacity: 85% !important;
13796
+ }
13797
+ .fv\:d-bgg-to-85.focus-visible {
13798
+ --bgg-to-opacity: 85% !important;
13799
+ }
13800
+ .fv\:d-bgg-to-85:focus-visible {
13801
+ --bgg-to-opacity: 85% !important;
13802
+ }
13803
+ @media (prefers-color-scheme: dark) {
13804
+ body.theme-system .d\:d-bgg-to-85 {
13805
+ --bgg-to-opacity: 85% !important;
13806
+ }
13807
+ }
13808
+ body.theme-dark .d\:d-bgg-to-85 {
13809
+ --bgg-to-opacity: 85% !important;
13810
+ }
13545
13811
  .d-fco75,
13546
13812
  .h\:d-fco75:hover,
13547
13813
  .f\:d-fco75:focus {
@@ -19710,6 +19976,43 @@ body {
19710
19976
  .js-focus-visible :focus:not(.focus-visible) {
19711
19977
  outline: none;
19712
19978
  }
19979
+ .d-theme-topbar-fc {
19980
+ --fco: 75%;
19981
+ color: hsla(var(--theme-topbar-color-hsl) / var(--fco)) !important;
19982
+ }
19983
+ .d-theme-topbar-fc:hover {
19984
+ --fco: 100%;
19985
+ }
19986
+ .d-theme-topbar-bgc {
19987
+ background-color: var(--theme-topbar-color-background) !important;
19988
+ }
19989
+ .d-theme-sidebar-fc {
19990
+ color: hsla(var(--theme-sidebar-color-hsl) / var(--fco)) !important;
19991
+ }
19992
+ .d-theme-sidebar-bgc {
19993
+ background-color: var(--theme-sidebar-color-background) !important;
19994
+ }
19995
+ .d-theme-sidebar-row-bgc:hover {
19996
+ background-color: var(--theme-sidebar-row-color-background-hover) !important;
19997
+ }
19998
+ .d-theme-sidebar-row-active-fc {
19999
+ color: hsla(var(--theme-sidebar-active-row-color-hsl) / var(--fco)) !important;
20000
+ }
20001
+ .d-theme-sidebar-row-active-bgc {
20002
+ background-color: var(--theme-sidebar-active-row-color-background) !important;
20003
+ }
20004
+ .d-theme-presence-available {
20005
+ background-color: var(--theme-presence-color-background-available) !important;
20006
+ }
20007
+ .d-theme-presence-busy-unavailable {
20008
+ background-color: var(--theme-presence-color-background-busy-unavailable) !important;
20009
+ }
20010
+ .d-theme-presence-busy {
20011
+ background-color: var(--theme-presence-color-background-busy) !important;
20012
+ }
20013
+ .d-theme-mention {
20014
+ background-color: var(--theme-mention-color-background) !important;
20015
+ }
19713
20016
  body {
19714
20017
  --bgo: 100%;
19715
20018
  --bco: 100%;
@@ -20196,16 +20499,26 @@ body {
20196
20499
  --primary-color-hsl: var(--primary-color-h) var(--primary-color-s) var(--primary-color-l);
20197
20500
  --primary-color: hsl(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l));
20198
20501
  --primary-color-hover: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) - 10%));
20199
- --nav-background-color-h: var(--purple-800-h);
20200
- --nav-background-color-s: var(--purple-800-s);
20201
- --nav-background-color-l: var(--purple-800-l);
20202
- --nav-background-color: hsl(var(--nav-background-color-h) var(--nav-background-color-s) var(--nav-background-color-l));
20203
20502
  --topbar-height: var(--su64);
20204
20503
  --base--font-size: var(--fs16);
20205
20504
  --base--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
20206
20505
  --base--font-feature-settings: 'calt' 0;
20207
20506
  --base--line-height: var(--lh-normal);
20208
20507
  --base--corner-radius: 0.25em;
20508
+ --theme-topbar-color: hsl(var(--theme-topbar-color-hsl));
20509
+ --theme-topbar-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
20510
+ --theme-topbar-color-background: #f9f9f9;
20511
+ --theme-sidebar-color: hsl(var(--theme-sidebar-color-hsl));
20512
+ --theme-sidebar-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
20513
+ --theme-sidebar-color-background: #f9f9f9;
20514
+ --theme-sidebar-row-color-background-hover: var(--purple-100);
20515
+ --theme-sidebar-active-row-color: hsl(var(--theme-sidebar-active-row-color-hsl));
20516
+ --theme-sidebar-active-row-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
20517
+ --theme-sidebar-active-row-color-background: #e9e9e9;
20518
+ --theme-presence-color-background-available: var(--green-500);
20519
+ --theme-presence-color-background-busy-unavailable: var(--red-500);
20520
+ --theme-presence-color-background-busy: var(--yellow-500);
20521
+ --theme-mention-color-background: var(--purple-500);
20209
20522
  }
20210
20523
  body.theme-dark {
20211
20524
  --white-h: 260;
@@ -20777,6 +21090,9 @@ body.theme-dark {
20777
21090
  --dco: 100%;
20778
21091
  border-color: hsla(var(--red-700-h) var(--red-700-s) var(--red-700-l) / var(--dco)) !important;
20779
21092
  }
21093
+ .sm\:d-dco100 > * + * {
21094
+ --dco: 100% !important;
21095
+ }
20780
21096
  .sm\:d-dco99 > * + * {
20781
21097
  --dco: 99% !important;
20782
21098
  }
@@ -20786,6 +21102,9 @@ body.theme-dark {
20786
21102
  .sm\:d-dco90 > * + * {
20787
21103
  --dco: 90% !important;
20788
21104
  }
21105
+ .sm\:d-dco85 > * + * {
21106
+ --dco: 85% !important;
21107
+ }
20789
21108
  .sm\:d-dco75 > * + * {
20790
21109
  --dco: 75% !important;
20791
21110
  }
@@ -22238,6 +22557,9 @@ body.theme-dark {
22238
22557
  --dco: 100%;
22239
22558
  border-color: hsla(var(--red-700-h) var(--red-700-s) var(--red-700-l) / var(--dco)) !important;
22240
22559
  }
22560
+ .md\:d-dco100 > * + * {
22561
+ --dco: 100% !important;
22562
+ }
22241
22563
  .md\:d-dco99 > * + * {
22242
22564
  --dco: 99% !important;
22243
22565
  }
@@ -22247,6 +22569,9 @@ body.theme-dark {
22247
22569
  .md\:d-dco90 > * + * {
22248
22570
  --dco: 90% !important;
22249
22571
  }
22572
+ .md\:d-dco85 > * + * {
22573
+ --dco: 85% !important;
22574
+ }
22250
22575
  .md\:d-dco75 > * + * {
22251
22576
  --dco: 75% !important;
22252
22577
  }
@@ -23699,6 +24024,9 @@ body.theme-dark {
23699
24024
  --dco: 100%;
23700
24025
  border-color: hsla(var(--red-700-h) var(--red-700-s) var(--red-700-l) / var(--dco)) !important;
23701
24026
  }
24027
+ .lg\:d-dco100 > * + * {
24028
+ --dco: 100% !important;
24029
+ }
23702
24030
  .lg\:d-dco99 > * + * {
23703
24031
  --dco: 99% !important;
23704
24032
  }
@@ -23708,6 +24036,9 @@ body.theme-dark {
23708
24036
  .lg\:d-dco90 > * + * {
23709
24037
  --dco: 90% !important;
23710
24038
  }
24039
+ .lg\:d-dco85 > * + * {
24040
+ --dco: 85% !important;
24041
+ }
23711
24042
  .lg\:d-dco75 > * + * {
23712
24043
  --dco: 75% !important;
23713
24044
  }
@@ -25160,6 +25491,9 @@ body.theme-dark {
25160
25491
  --dco: 100%;
25161
25492
  border-color: hsla(var(--red-700-h) var(--red-700-s) var(--red-700-l) / var(--dco)) !important;
25162
25493
  }
25494
+ .xl\:d-dco100 > * + * {
25495
+ --dco: 100% !important;
25496
+ }
25163
25497
  .xl\:d-dco99 > * + * {
25164
25498
  --dco: 99% !important;
25165
25499
  }
@@ -25169,6 +25503,9 @@ body.theme-dark {
25169
25503
  .xl\:d-dco90 > * + * {
25170
25504
  --dco: 90% !important;
25171
25505
  }
25506
+ .xl\:d-dco85 > * + * {
25507
+ --dco: 85% !important;
25508
+ }
25172
25509
  .xl\:d-dco75 > * + * {
25173
25510
  --dco: 75% !important;
25174
25511
  }