@dialpad/dialtone 8.12.1 → 8.13.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.
package/README.md
CHANGED
|
@@ -10,13 +10,9 @@ To add Dialtone into your project, you can install it via NPM:
|
|
|
10
10
|
npm install @dialpad/dialtone
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
Once installed, add the following line in your
|
|
13
|
+
Once installed, add the following line in your CSS/LESS file:
|
|
14
14
|
```
|
|
15
|
-
@import "node_modules/@dialpad/dialtone/lib/
|
|
16
|
-
```
|
|
17
|
-
If you only need access to Dialtone's variables and customizations to build a file and don't need the whole library exported, use this line instead in your Less file:
|
|
18
|
-
```
|
|
19
|
-
@import (reference) "node_modules/@dialpad/dialtone/lib/build/less/dialtone.less";
|
|
15
|
+
@import "node_modules/@dialpad/dialtone/lib/dist/css/dialtone.css";
|
|
20
16
|
```
|
|
21
17
|
|
|
22
18
|
## Building Dialtone locally
|
|
@@ -35,4 +31,4 @@ Requesting a feature or reporting a bug? Please do so at the below links:
|
|
|
35
31
|
- [Report Bug](https://dialpad.atlassian.net/secure/CreateIssue.jspa?issuetype=10878&pid=12428)
|
|
36
32
|
|
|
37
33
|
|
|
38
|
-
Please also feel free to contact us via the [#dialtone
|
|
34
|
+
Please also feel free to contact us via the [#dialtone Slack channel](https://dialpad.slack.com/messages/dialtone/) with any questions
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
--avatar-size-text: var(--dt-font-size-200);
|
|
27
27
|
--avatar-presence-position-right: var(--dt-space-200-negative);
|
|
28
28
|
--avatar-presence-position-bottom: var(--dt-space-200-negative);
|
|
29
|
-
--avatar-count-color-shadow: var(--theme-sidebar-color-background);
|
|
29
|
+
--avatar-count-color-shadow: var(--dt-theme-sidebar-color-background);
|
|
30
30
|
|
|
31
31
|
position: relative;
|
|
32
32
|
display: flex;
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
|
|
114
114
|
.dt-leftbar-row--selected &,
|
|
115
115
|
.dt-leftbar-row__primary:hover & {
|
|
116
|
-
--avatar-count-color-shadow: var(--theme-sidebar-row-color-background-hover);
|
|
116
|
+
--avatar-count-color-shadow: var(--dt-theme-sidebar-row-color-background-hover);
|
|
117
117
|
}
|
|
118
118
|
}
|
|
119
119
|
|
|
@@ -7,12 +7,12 @@
|
|
|
7
7
|
// visit https://dialpad.design/components/presence
|
|
8
8
|
|
|
9
9
|
.d-presence {
|
|
10
|
-
--presence-color-border-base: var(--theme-sidebar-color-background);
|
|
10
|
+
--presence-color-border-base: var(--dt-theme-sidebar-color-background);
|
|
11
11
|
--presence-color-border-offline: var(--dt-color-black-600);
|
|
12
|
-
--presence-color-background-active: var(--theme-presence-color-background-available);
|
|
13
|
-
--presence-color-background-busy: var(--theme-presence-color-background-busy-unavailable);
|
|
14
|
-
--presence-color-background-away: var(--theme-presence-color-background-busy);
|
|
15
|
-
--presence-color-background-offline: var(--theme-sidebar-color-background);
|
|
12
|
+
--presence-color-background-active: var(--dt-theme-presence-color-background-available);
|
|
13
|
+
--presence-color-background-busy: var(--dt-theme-presence-color-background-busy-unavailable);
|
|
14
|
+
--presence-color-background-away: var(--dt-theme-presence-color-background-busy);
|
|
15
|
+
--presence-color-background-offline: var(--dt-theme-sidebar-color-background);
|
|
16
16
|
--presence-border-size: var(--dt-size-200);
|
|
17
17
|
--presence-size: var(--dt-size-400);
|
|
18
18
|
|
|
@@ -24,11 +24,11 @@
|
|
|
24
24
|
border-radius: var(--dt-size-radius-circle);
|
|
25
25
|
|
|
26
26
|
.dt-leftbar-row--selected & {
|
|
27
|
-
--presence-color-border-base: var(--theme-sidebar-selected-row-color-background);
|
|
27
|
+
--presence-color-border-base: var(--dt-theme-sidebar-selected-row-color-background);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.dt-leftbar-row__primary:hover & {
|
|
31
|
-
--presence-color-border-base: var(--theme-sidebar-row-color-background-hover);
|
|
31
|
+
--presence-color-border-base: var(--dt-theme-sidebar-row-color-background-hover);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
&__inner {
|
|
@@ -41,63 +41,8 @@
|
|
|
41
41
|
base--font-family: var(--dt-font-family-body);
|
|
42
42
|
base--line-height: var(--dt-font-line-height-300);
|
|
43
43
|
base--corner-radius: 0.25em; // TODO: unused. deprecate or...?
|
|
44
|
-
|
|
45
|
-
theme-topbar-color: hsl(var(--theme-topbar-color-hsl));
|
|
46
|
-
theme-topbar-color-hsl: var(--dt-color-black-900-h) var(--dt-color-black-900-s) var(--dt-color-black-900-l); // Use with d-fco[##] Opacity utility
|
|
47
|
-
theme-topbar-color-background: var(--dt-color-surface-secondary);
|
|
48
|
-
|
|
49
|
-
theme-sidebar-color: var(--dt-color-foreground-primary);
|
|
50
|
-
theme-sidebar-color-hsl: var(--dt-color-black-900-h) var(--dt-color-black-900-s) var(--dt-color-black-900-l);
|
|
51
|
-
theme-sidebar-color-background: var(--dt-color-surface-secondary);
|
|
52
|
-
|
|
53
|
-
theme-sidebar-icon-color: var(--dt-color-foreground-secondary);
|
|
54
|
-
theme-sidebar-status-color: var(--dt-color-foreground-tertiary);
|
|
55
|
-
|
|
56
|
-
theme-sidebar-row-color-background: transparent;
|
|
57
|
-
theme-sidebar-row-color-background-hover: hsla(var(--dt-color-black-900-hsl) / 0.1);
|
|
58
|
-
theme-sidebar-row-color-background-active: var(--dt-color-black-300);
|
|
59
|
-
|
|
60
|
-
theme-sidebar-selected-row-color: var(--dt-color-foreground-primary);
|
|
61
|
-
theme-sidebar-selected-row-color-hsl: var(--dt-color-black-900-h) var(--dt-color-black-900-s) var(--dt-color-black-900-l); // Use with d-fco[##] Opacity utility
|
|
62
|
-
theme-sidebar-selected-row-color-background: var(--dt-color-surface-moderate-opaque);
|
|
63
|
-
|
|
64
|
-
theme-presence-color-background-available: var(--dt-color-green-400);
|
|
65
|
-
theme-presence-color-background-busy-unavailable: var(--dt-color-red-300);
|
|
66
|
-
theme-presence-color-background-busy: var(--dt-color-gold-300);
|
|
67
|
-
|
|
68
|
-
theme-mention-color-background: var(--dt-color-purple-400);
|
|
69
|
-
theme-mention-color-foreground: var(--dt-color-neutral-white);
|
|
70
44
|
}
|
|
71
45
|
|
|
72
|
-
// ============================================================================
|
|
73
|
-
// $ THEME CLASSES
|
|
74
|
-
// ============================================================================
|
|
75
|
-
|
|
76
|
-
.d-theme-topbar-fc {
|
|
77
|
-
--fco: 75%;
|
|
78
|
-
|
|
79
|
-
color: hsla(var(--theme-topbar-color-hsl) / var(--fco)) !important;
|
|
80
|
-
|
|
81
|
-
&:hover {
|
|
82
|
-
--fco: 100%;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
.d-theme-topbar-bgc { background-color: var(--theme-topbar-color-background) !important; }
|
|
86
|
-
.d-theme-sidebar-fc { color: var(--theme-sidebar-color) !important; }
|
|
87
|
-
.d-theme-sidebar-status-fc { color: var(--theme-sidebar-status-color) !important; }
|
|
88
|
-
.d-theme-sidebar-icon-fc { color: var(--theme-sidebar-icon-color) !important; }
|
|
89
|
-
.d-theme-sidebar-bgc { background-color: var(--theme-sidebar-color-background) !important; }
|
|
90
|
-
.d-theme-sidebar-row-bgc:hover { background-color: var(--theme-sidebar-row-color-background-hover) !important; }
|
|
91
|
-
.d-theme-sidebar-row-bgc:active { background-color: var(--theme-sidebar-row-color-background-active) !important; }
|
|
92
|
-
.d-theme-sidebar-row-selected-fc { color: var(--theme-sidebar-selected-row-color) !important; }
|
|
93
|
-
.d-theme-sidebar-row-selected-bgc { background-color: var(--theme-sidebar-selected-row-color-background) !important; }
|
|
94
|
-
.d-theme-presence-available { background-color: var(--theme-presence-color-background-available) !important; }
|
|
95
|
-
.d-theme-presence-busy-unavailable { background-color: var(--theme-presence-color-background-busy-unavailable) !important; }
|
|
96
|
-
.d-theme-presence-busy { background-color: var(--theme-presence-color-background-busy) !important; }
|
|
97
|
-
.d-theme-mention { background-color: var(--theme-mention-color-background) !important; }
|
|
98
|
-
.d-theme-mention-fc { color: var(--theme-mention-color-foreground) !important; }
|
|
99
|
-
|
|
100
|
-
|
|
101
46
|
// ============================================================================
|
|
102
47
|
// $ OUTPUT VARIABLES
|
|
103
48
|
// ============================================================================
|