@dialpad/dialtone-css 8.31.1 → 8.32.0

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,56 @@
1
+ //
2
+ // DIALTONE
3
+ // COMPONENTS: EMPTY-STATE
4
+ //
5
+ // These are the styles for empty-state component.
6
+ //
7
+ //
8
+ // TABLE OF CONTENTS
9
+ // • BASE STYLE
10
+
11
+ // @@ BASE STYLE
12
+ // ----------------------------------------------------------------------------
13
+ .d-empty-state {
14
+ display: flex;
15
+ flex-direction: column;
16
+ align-items: center;
17
+ justify-content: center;
18
+ text-align: center;
19
+ margin: 0 auto;
20
+
21
+ &--size-sm {
22
+ width: 50%;
23
+ padding: var(--dt-space-500);
24
+
25
+ h1{
26
+ font: var(--dt-typography-headline-md);
27
+ }
28
+ p{
29
+ font: var(--dt-typography-body-sm);
30
+ }
31
+ }
32
+
33
+ &--size-md {
34
+ width: 70%;
35
+ padding: var(--dt-space-500);
36
+
37
+ h1{
38
+ font: var(--dt-typography-headline-xl);
39
+ }
40
+ p{
41
+ font: var(--dt-typography-body-sm);
42
+ }
43
+ }
44
+
45
+ &--size-lg {
46
+ width: 100%;
47
+ padding: var(--dt-space-600);
48
+
49
+ h1{
50
+ font: var(--dt-typography-headline-xxl);
51
+ }
52
+ p{
53
+ font: var(--dt-typography-body-md);
54
+ }
55
+ }
56
+ }
@@ -130,6 +130,47 @@
130
130
  }
131
131
  }
132
132
 
133
+ // $$ INVERTED DANGER
134
+ // ----------------------------------------------------------------------------
135
+ &--inverted-danger {
136
+ --link-color-default: var(--dt-color-link-critical-inverted);
137
+ --link-color-default-hover: var(--dt-color-link-critical-inverted-hover);
138
+ }
139
+
140
+ // $$ INVERTED SUCCESS
141
+ // ----------------------------------------------------------------------------
142
+ &--inverted-success {
143
+ --link-color-default: var(--dt-color-link-success-inverted);
144
+ --link-color-default-hover: var(--dt-color-link-success-inverted-hover);
145
+ }
146
+
147
+ // $$ INVERTED WARNING
148
+ // ----------------------------------------------------------------------------
149
+ &--inverted-warning {
150
+ --link-color-default: var(--dt-color-link-warning-inverted);
151
+ --link-color-default-hover: var(--dt-color-link-warning-inverted-hover);
152
+ }
153
+
154
+ // $$ INVERTED MUTED
155
+ // ----------------------------------------------------------------------------
156
+ &--inverted-muted {
157
+ --link-color-default: var(--dt-color-link-muted-inverted);
158
+ --link-color-default-hover: var(--dt-color-link-muted-inverted-hover);
159
+ }
160
+
161
+ // $$ INVERTED MENTION
162
+ // ----------------------------------------------------------------------------
163
+ &--inverted-mention {
164
+ --link-color-default: var(--dt-color-link-primary-inverted);
165
+ --link-color-default-hover: var(--dt-color-link-primary-inverted-hover);
166
+ --link-text-decoration: none;
167
+ --link-padding: 0 var(--dt-space-200);
168
+ --link-background-color: hsl(var(--dt-color-purple-400-hsl) / 0.2);
169
+
170
+ line-height: var(--dt-font-line-height-200);
171
+ border-radius: var(--dt-size-radius-200);
172
+ }
173
+
133
174
  // $$ MENTION
134
175
  // ----------------------------------------------------------------------------
135
176
  // Styling specific to mentions such as @brad.paugh. The underline highlighting
@@ -35,84 +35,84 @@
35
35
  }
36
36
 
37
37
  .d-tooltip {
38
- // -- COMPONENT CSS VARS
39
- // -----------------------
40
- --tooltip-color-background: var(--dt-color-black-800);
41
- --tooltip-color-text: var(--dt-color-foreground-primary-inverted);
42
- --tooltip-font-weight: var(--dt-font-weight-medium);
43
- --tooltip-line-height: var(--dt-font-line-height-300);
44
- --tooltip-padding-y: var(--dt-space-400); // 8
45
- --tooltip-padding-x: var(--dt-space-450); // 12
46
- --tooltip-border-radius: var(--dt-size-radius-300); // 4
38
+ // -- COMPONENT CSS VARS
39
+ // -----------------------
40
+ --tooltip-color-background: var(--dt-color-surface-contrast);
41
+ --tooltip-color-text: var(--dt-color-foreground-primary-inverted);
42
+ --tooltip-font-weight: var(--dt-font-weight-medium);
43
+ --tooltip-line-height: var(--dt-font-line-height-300);
44
+ --tooltip-padding-y: var(--dt-space-400); // 8
45
+ --tooltip-padding-x: var(--dt-space-450); // 12
46
+ --tooltip-border-radius: var(--dt-size-radius-300); // 4
47
47
 
48
- z-index: var(--zi-tooltip);
49
- max-width: var(--dt-size-875);
50
- padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
51
- color: var(--tooltip-color-text);
52
- font-weight: var(--tooltip-font-weight);
53
- font-size: var(--dt-font-size-100);
54
- line-height: var(--tooltip-line-height);
55
- letter-spacing: calc(var(--dt-space-100) * 0.25);
56
- text-align: center;
57
- background-color: var(--tooltip-color-background);
58
- border-radius: var(--tooltip-border-radius);
48
+ z-index: var(--zi-tooltip);
49
+ max-width: var(--dt-size-875);
50
+ padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
51
+ color: var(--tooltip-color-text);
52
+ font-weight: var(--tooltip-font-weight);
53
+ font-size: var(--dt-font-size-100);
54
+ line-height: var(--tooltip-line-height);
55
+ letter-spacing: calc(var(--dt-space-100) * 0.25);
56
+ text-align: center;
57
+ background-color: var(--tooltip-color-background);
58
+ border-radius: var(--tooltip-border-radius);
59
59
 
60
- &::after {
61
- position: absolute;
62
- border: var(--dt-size-350) solid transparent;
63
- content: '';
64
- }
60
+ &::after {
61
+ position: absolute;
62
+ border: var(--dt-size-350) solid transparent;
63
+ content: '';
64
+ }
65
65
  }
66
66
 
67
67
  // ============================================================================
68
68
  // $ INVERTED STYLE
69
69
  // ----------------------------------------------------------------------------
70
70
  .d-tooltip--inverted {
71
- // -- COMPONENT CSS VARS
72
- // -----------------------
73
- --tooltip-color-background: var(--dt-color-black-200);
74
- --tooltip-color-text: var(--dt-color-foreground-secondary);
71
+ // -- COMPONENT CSS VARS
72
+ // -----------------------
73
+ --tooltip-color-background: var(--dt-color-surface-moderate);
74
+ --tooltip-color-text: var(--dt-color-foreground-secondary);
75
75
  }
76
76
 
77
77
  // ============================================================================
78
78
  // $ HIDE STYLE
79
79
  // ----------------------------------------------------------------------------
80
80
  .d-tooltip--hide {
81
- visibility: hidden;
82
- opacity: 0;
83
- transition:
84
- visibility 0s 200ms,
85
- transform 200ms var(--ttf-in-out) 0s,
86
- opacity 200ms var(--ttf-in-out) 0s;
81
+ visibility: hidden;
82
+ opacity: 0;
83
+ transition:
84
+ visibility 0s 200ms,
85
+ transform 200ms var(--ttf-in-out) 0s,
86
+ opacity 200ms var(--ttf-in-out) 0s;
87
87
  }
88
88
 
89
89
  // ============================================================================
90
90
  // $ SHOW STYLE
91
91
  // ----------------------------------------------------------------------------
92
92
  .d-tooltip--show {
93
- transform: translate(0, 0);
94
- visibility: visible;
95
- opacity: 1;
96
- transition:
97
- visibility 0s 0s,
98
- transform 200ms var(--ttf-in-out) 10ms,
99
- opacity 200ms var(--ttf-in-out) 10ms;
93
+ transform: translate(0, 0);
94
+ visibility: visible;
95
+ opacity: 1;
96
+ transition:
97
+ visibility 0s 0s,
98
+ transform 200ms var(--ttf-in-out) 10ms,
99
+ opacity 200ms var(--ttf-in-out) 10ms;
100
100
  }
101
101
 
102
102
  // ============================================================================
103
103
  // $ HOVER AND FOCUS STYLES
104
104
  // ----------------------------------------------------------------------------
105
105
  .d-tooltip--hover {
106
- .d-tooltip {
107
- &:extend(.d-tooltip--hide);
108
- }
106
+ .d-tooltip {
107
+ &:extend(.d-tooltip--hide);
108
+ }
109
109
 
110
- &:hover,
111
- &:focus-visible {
112
- .d-tooltip {
113
- &:extend(.d-tooltip--show);
114
- }
115
- }
110
+ &:hover,
111
+ &:focus-visible {
112
+ .d-tooltip {
113
+ &:extend(.d-tooltip--show);
114
+ }
115
+ }
116
116
  }
117
117
 
118
118
  // ============================================================================
@@ -126,14 +126,14 @@
126
126
  .d-tooltip__arrow--top-left,
127
127
  .d-tooltip__arrow--top-center,
128
128
  .d-tooltip__arrow--top-right {
129
- top: calc(100% + var(--dt-space-450)); // 100% + 12
130
- transform: translateY(var(--dt-space-500)); // 16
129
+ top: calc(100% + var(--dt-space-450)); // 100% + 12
130
+ transform: translateY(var(--dt-space-500)); // 16
131
131
 
132
- &::after {
133
- top: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
134
- border-top-width: 0;
135
- border-bottom-color: var(--tooltip-color-background);
136
- }
132
+ &::after {
133
+ top: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
134
+ border-top-width: 0;
135
+ border-bottom-color: var(--tooltip-color-background);
136
+ }
137
137
  }
138
138
 
139
139
  // $$ BOTTOM
@@ -144,14 +144,14 @@
144
144
  .d-tooltip__arrow--bottom-left,
145
145
  .d-tooltip__arrow--bottom-center,
146
146
  .d-tooltip__arrow--bottom-right {
147
- bottom: calc(100% + var(--dt-space-450)); // 100% + 12
148
- transform: translateY(var(--dt-space-500-negative)); // -16
147
+ bottom: calc(100% + var(--dt-space-450)); // 100% + 12
148
+ transform: translateY(var(--dt-space-500-negative)); // -16
149
149
 
150
- &::after {
151
- bottom: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
152
- border-top-color: var(--tooltip-color-background);
153
- border-bottom-width: 0;
154
- }
150
+ &::after {
151
+ bottom: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
152
+ border-top-color: var(--tooltip-color-background);
153
+ border-bottom-width: 0;
154
+ }
155
155
  }
156
156
 
157
157
  // $$ TOP / BOTTOM LEFT
@@ -160,11 +160,11 @@
160
160
  .d-tooltip__arrow-tippy--top-start,
161
161
  .d-tooltip__arrow--top-left,
162
162
  .d-tooltip__arrow--bottom-left {
163
- left: var(--dt-space-200-negative); // -2
163
+ left: var(--dt-space-200-negative); // -2
164
164
 
165
- &::after {
166
- left: var(--dt-space-500); // 16
167
- }
165
+ &::after {
166
+ left: var(--dt-space-500); // 16
167
+ }
168
168
  }
169
169
 
170
170
  // $$ TOP / BOTTOM CENTER
@@ -173,10 +173,10 @@
173
173
  .d-tooltip__arrow-tippy--top,
174
174
  .d-tooltip__arrow--top-center,
175
175
  .d-tooltip__arrow--bottom-center {
176
- &::after {
177
- left: 50%;
178
- margin-left: var(--dt-space-350-negative); // -6
179
- }
176
+ &::after {
177
+ left: 50%;
178
+ margin-left: var(--dt-space-350-negative); // -6
179
+ }
180
180
  }
181
181
 
182
182
  // $$ TOP / BOTTOM RIGHT
@@ -185,11 +185,11 @@
185
185
  .d-tooltip__arrow-tippy--top-end,
186
186
  .d-tooltip__arrow--top-right,
187
187
  .d-tooltip__arrow--bottom-right {
188
- right: var(--dt-space-200-negative); // -2
188
+ right: var(--dt-space-200-negative); // -2
189
189
 
190
- &::after {
191
- right: var(--dt-space-500); // 16
192
- }
190
+ &::after {
191
+ right: var(--dt-space-500); // 16
192
+ }
193
193
  }
194
194
 
195
195
  // $$ RIGHT
@@ -200,14 +200,14 @@
200
200
  .d-tooltip__arrow--right-top,
201
201
  .d-tooltip__arrow--right-center,
202
202
  .d-tooltip__arrow--right-bottom {
203
- right: calc(100% + var(--dt-space-450)); // 100% + 12
204
- transform: translateX(var(--dt-space-500-negative)); // -16
203
+ right: calc(100% + var(--dt-space-450)); // 100% + 12
204
+ transform: translateX(var(--dt-space-500-negative)); // -16
205
205
 
206
- &::after {
207
- right: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
208
- border-right-width: 0;
209
- border-left-color: var(--tooltip-color-background);
210
- }
206
+ &::after {
207
+ right: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
208
+ border-right-width: 0;
209
+ border-left-color: var(--tooltip-color-background);
210
+ }
211
211
  }
212
212
 
213
213
  // $$ LEFT
@@ -218,14 +218,14 @@
218
218
  .d-tooltip__arrow--left-top,
219
219
  .d-tooltip__arrow--left-center,
220
220
  .d-tooltip__arrow--left-bottom {
221
- left: calc(100% + var(--dt-space-450)); // 100% + 12
222
- transform: translateX(var(--dt-space-500)); // 16
221
+ left: calc(100% + var(--dt-space-450)); // 100% + 12
222
+ transform: translateX(var(--dt-space-500)); // 16
223
223
 
224
- &::after {
225
- left: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
226
- border-right-color: var(--tooltip-color-background);
227
- border-left-width: 0;
228
- }
224
+ &::after {
225
+ left: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
226
+ border-right-color: var(--tooltip-color-background);
227
+ border-left-width: 0;
228
+ }
229
229
  }
230
230
 
231
231
  // $$ RIGHT / LEFT TOP
@@ -234,11 +234,11 @@
234
234
  .d-tooltip__arrow-tippy--left-start,
235
235
  .d-tooltip__arrow--right-top,
236
236
  .d-tooltip__arrow--left-top {
237
- top: var(--dt-space-100-negative); // -1
237
+ top: var(--dt-space-100-negative); // -1
238
238
 
239
- &::after {
240
- top: var(--dt-space-400); // 8
241
- }
239
+ &::after {
240
+ top: var(--dt-space-400); // 8
241
+ }
242
242
  }
243
243
 
244
244
  // $$ RIGHT / LEFT CENTER
@@ -247,10 +247,10 @@
247
247
  .d-tooltip__arrow-tippy--left,
248
248
  .d-tooltip__arrow--right-center,
249
249
  .d-tooltip__arrow--left-center {
250
- &::after {
251
- top: 50%;
252
- margin-top: var(--dt-space-350-negative); // -6
253
- }
250
+ &::after {
251
+ top: 50%;
252
+ margin-top: var(--dt-space-350-negative); // -6
253
+ }
254
254
  }
255
255
 
256
256
  // $$ RIGHT / LEFT BOTTOM
@@ -259,9 +259,9 @@
259
259
  .d-tooltip__arrow-tippy--left-end,
260
260
  .d-tooltip__arrow--right-bottom,
261
261
  .d-tooltip__arrow--left-bottom {
262
- bottom: var(--dt-space-100-negative); // -1
262
+ bottom: var(--dt-space-100-negative); // -1
263
263
 
264
- &::after {
265
- bottom: var(--dt-space-400); // 8
266
- }
264
+ &::after {
265
+ bottom: var(--dt-space-400); // 8
266
+ }
267
267
  }
@@ -27,6 +27,7 @@
27
27
  @import 'components/emoji';
28
28
  @import 'components/emoji-text-wrapper';
29
29
  @import 'components/emoji-picker';
30
+ @import 'components/empty-state';
30
31
  @import 'components/forms';
31
32
  @import 'components/image-viewer';
32
33
  @import 'components/input';
@@ -1871,6 +1871,44 @@ template {
1871
1871
  width: 100%;
1872
1872
  max-width: calc(var(--dt-size-905) + var(--dt-size-550) + var(--dt-size-200));
1873
1873
  }
1874
+ .d-empty-state {
1875
+ display: flex;
1876
+ flex-direction: column;
1877
+ align-items: center;
1878
+ justify-content: center;
1879
+ text-align: center;
1880
+ margin: 0 auto;
1881
+ }
1882
+ .d-empty-state--size-sm {
1883
+ width: 50%;
1884
+ padding: var(--dt-space-500);
1885
+ }
1886
+ .d-empty-state--size-sm h1 {
1887
+ font: var(--dt-typography-headline-md);
1888
+ }
1889
+ .d-empty-state--size-sm p {
1890
+ font: var(--dt-typography-body-sm);
1891
+ }
1892
+ .d-empty-state--size-md {
1893
+ width: 70%;
1894
+ padding: var(--dt-space-500);
1895
+ }
1896
+ .d-empty-state--size-md h1 {
1897
+ font: var(--dt-typography-headline-xl);
1898
+ }
1899
+ .d-empty-state--size-md p {
1900
+ font: var(--dt-typography-body-sm);
1901
+ }
1902
+ .d-empty-state--size-lg {
1903
+ width: 100%;
1904
+ padding: var(--dt-space-600);
1905
+ }
1906
+ .d-empty-state--size-lg h1 {
1907
+ font: var(--dt-typography-headline-xxl);
1908
+ }
1909
+ .d-empty-state--size-lg p {
1910
+ font: var(--dt-typography-body-md);
1911
+ }
1874
1912
  fieldset {
1875
1913
  min-width: 0;
1876
1914
  margin: 0;
@@ -2475,6 +2513,31 @@ legend .d-label {
2475
2513
  .d-link--inverted-disabled:hover {
2476
2514
  cursor: not-allowed;
2477
2515
  }
2516
+ .d-link--inverted-danger {
2517
+ --link-color-default: var(--dt-color-link-critical-inverted);
2518
+ --link-color-default-hover: var(--dt-color-link-critical-inverted-hover);
2519
+ }
2520
+ .d-link--inverted-success {
2521
+ --link-color-default: var(--dt-color-link-success-inverted);
2522
+ --link-color-default-hover: var(--dt-color-link-success-inverted-hover);
2523
+ }
2524
+ .d-link--inverted-warning {
2525
+ --link-color-default: var(--dt-color-link-warning-inverted);
2526
+ --link-color-default-hover: var(--dt-color-link-warning-inverted-hover);
2527
+ }
2528
+ .d-link--inverted-muted {
2529
+ --link-color-default: var(--dt-color-link-muted-inverted);
2530
+ --link-color-default-hover: var(--dt-color-link-muted-inverted-hover);
2531
+ }
2532
+ .d-link--inverted-mention {
2533
+ --link-color-default: var(--dt-color-link-primary-inverted);
2534
+ --link-color-default-hover: var(--dt-color-link-primary-inverted-hover);
2535
+ --link-text-decoration: none;
2536
+ --link-padding: 0 var(--dt-space-200);
2537
+ --link-background-color: hsl(var(--dt-color-purple-400-hsl) / 0.2);
2538
+ line-height: var(--dt-font-line-height-200);
2539
+ border-radius: var(--dt-size-radius-200);
2540
+ }
2478
2541
  .d-link--mention {
2479
2542
  --link-text-decoration: none;
2480
2543
  --link-padding: 0 var(--dt-space-200);
@@ -3817,7 +3880,7 @@ legend .d-label {
3817
3880
  justify-content: center;
3818
3881
  }
3819
3882
  .d-tooltip {
3820
- --tooltip-color-background: var(--dt-color-black-800);
3883
+ --tooltip-color-background: var(--dt-color-surface-contrast);
3821
3884
  --tooltip-color-text: var(--dt-color-foreground-primary-inverted);
3822
3885
  --tooltip-font-weight: var(--dt-font-weight-medium);
3823
3886
  --tooltip-line-height: var(--dt-font-line-height-300);
@@ -3842,7 +3905,7 @@ legend .d-label {
3842
3905
  content: '';
3843
3906
  }
3844
3907
  .d-tooltip--inverted {
3845
- --tooltip-color-background: var(--dt-color-black-200);
3908
+ --tooltip-color-background: var(--dt-color-surface-moderate);
3846
3909
  --tooltip-color-text: var(--dt-color-foreground-secondary);
3847
3910
  }
3848
3911
  .d-tooltip--hide,
@@ -7485,7 +7548,7 @@ body {
7485
7548
  }
7486
7549
  /**
7487
7550
  * Do not edit directly
7488
- * Generated on Thu, 09 May 2024 17:09:14 GMT
7551
+ * Generated on Thu, 23 May 2024 21:34:38 GMT
7489
7552
  */
7490
7553
 
7491
7554
  .dialtone-theme-light {
@@ -8302,7 +8365,7 @@ body {
8302
8365
 
8303
8366
  /**
8304
8367
  * Do not edit directly
8305
- * Generated on Thu, 09 May 2024 17:09:15 GMT
8368
+ * Generated on Thu, 23 May 2024 21:34:38 GMT
8306
8369
  */
8307
8370
 
8308
8371
  .dialtone-theme-dark {