@dialpad/dialtone 8.0.0-version8.2 → 8.1.1-version8.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.
- package/lib/build/js/dialtone_migration_helper/configs/colors.mjs +13 -9
- package/lib/build/less/components/avatar.less +33 -17
- package/lib/build/less/components/button.less +5 -4
- package/lib/build/less/dialtone.less +4 -0
- package/lib/build/less/themes/example.less +0 -1
- package/lib/build/less/utilities/colors.less +4 -4
- package/lib/dist/css/dialtone.css +3908 -117
- package/lib/dist/css/dialtone.min.css +1 -1
- package/lib/dist/js/dialtone_migration_helper/configs/colors.mjs +13 -9
- package/package.json +5 -6
|
@@ -12,52 +12,56 @@ export default {
|
|
|
12
12
|
// ------------------------------------------------------------ //
|
|
13
13
|
// LESS variables
|
|
14
14
|
{
|
|
15
|
-
from: /@(black|purple|orange|magenta|gold|green|red|blue|tan)(-[1-9]00)/
|
|
15
|
+
from: /@(black|purple|orange|magenta|gold|green|red|blue|tan)(-[1-9]00)/g,
|
|
16
16
|
to: '@dt-color-$1$2',
|
|
17
17
|
},
|
|
18
18
|
// Neutral LESS variables
|
|
19
19
|
{
|
|
20
|
-
from: /@(white|black)/
|
|
20
|
+
from: /@(white|black)/g,
|
|
21
21
|
to: '@dt-color-neutral-$1',
|
|
22
22
|
},
|
|
23
23
|
// CSS variables
|
|
24
24
|
{
|
|
25
|
-
from: /var\(--(black|purple|orange|magenta|gold|green|red|blue|tan)(-[1-9]00)(-(h|s|l|hsl))?\)/
|
|
25
|
+
from: /var\(--(black|purple|orange|magenta|gold|green|red|blue|tan)(-[1-9]00)(-(h|s|l|hsl))?\)/g,
|
|
26
26
|
to: 'var(--dt-color-$1$2$3)',
|
|
27
27
|
},
|
|
28
28
|
// Neutral CSS variables
|
|
29
29
|
{
|
|
30
|
-
from: /var\(--(white|black)(-(h|s|l|hsl))?\)/
|
|
30
|
+
from: /var\(--(white|black)(-(h|s|l|hsl))?\)/g,
|
|
31
31
|
to: 'var(--dt-color-neutral-$1$2)',
|
|
32
32
|
},
|
|
33
33
|
// Background colors
|
|
34
34
|
{
|
|
35
35
|
// eslint-disable-next-line max-len
|
|
36
|
-
from: /var\(--bgc-(primary|secondary|moderate|bold|strong|contrast|critical|success|warning|info)(-(subtle|opaque|subtle-opaque|strong))?\)/
|
|
36
|
+
from: /var\(--bgc-(primary|secondary|moderate|bold|strong|contrast|critical|success|warning|info)(-(subtle|opaque|subtle-opaque|strong))?\)/g,
|
|
37
37
|
to: 'var(--dt-color-surface-$1$2)',
|
|
38
38
|
},
|
|
39
39
|
// Special Background color cases
|
|
40
40
|
{
|
|
41
41
|
// eslint-disable-next-line max-len
|
|
42
|
-
from: /var\(--bgc-(error|danger)(-(subtle|opaque|subtle-opaque|strong))?\)/
|
|
42
|
+
from: /var\(--bgc-(error|danger)(-(subtle|opaque|subtle-opaque|strong))?\)/g,
|
|
43
43
|
to: 'var(--dt-color-surface-critical$2)',
|
|
44
44
|
},
|
|
45
45
|
// Border colors
|
|
46
46
|
{
|
|
47
47
|
// eslint-disable-next-line max-len
|
|
48
|
-
from: /var\(--bc-(default|subtle|moderate|bold|focus|critical|success|warning|brand|ai|accent)(-(inverted|subtle|strong|subtle-inverted|strong-inverted))?\)/
|
|
48
|
+
from: /var\(--bc-(default|subtle|moderate|bold|focus|critical|success|warning|brand|ai|accent)(-(inverted|subtle|strong|subtle-inverted|strong-inverted))?\)/g,
|
|
49
49
|
to: 'var(--dt-color-border-$1$2)',
|
|
50
50
|
},
|
|
51
51
|
// Font colors
|
|
52
52
|
{
|
|
53
53
|
// eslint-disable-next-line max-len
|
|
54
|
-
from: /var\(--fc-(primary|secondary|tertiary|muted|placeholder|disabled|critical|success|warning)(-(strong|inverted|strong-inverted))?\)/
|
|
54
|
+
from: /var\(--fc-(primary|secondary|tertiary|muted|placeholder|disabled|critical|success|warning)(-(strong|inverted|strong-inverted))?\)/g,
|
|
55
55
|
to: 'var(--dt-color-foreground-$1$2)',
|
|
56
56
|
},
|
|
57
57
|
// Special Font color cases
|
|
58
58
|
{
|
|
59
|
-
from: /var\(--fc-(error|danger)(-(strong|inverted|strong-inverted))?\)/
|
|
59
|
+
from: /var\(--fc-(error|danger)(-(strong|inverted|strong-inverted))?\)/g,
|
|
60
60
|
to: 'var(--dt-color-foreground-critical$2)',
|
|
61
61
|
},
|
|
62
|
+
{
|
|
63
|
+
from: /d-(fc|bc)-white/g,
|
|
64
|
+
to: 'd-$1-neutral-white',
|
|
65
|
+
},
|
|
62
66
|
],
|
|
63
67
|
};
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
//
|
|
9
9
|
// TABLE OF CONTENTS
|
|
10
10
|
// • BASE STYLE
|
|
11
|
+
// • COLOR VARIANTS
|
|
11
12
|
// • CHILDREN
|
|
12
13
|
// • SIZES
|
|
13
14
|
// • VARIANTS
|
|
@@ -18,19 +19,14 @@
|
|
|
18
19
|
.d-avatar {
|
|
19
20
|
// Component CSS Vars
|
|
20
21
|
// ------------------------------------------------------------------------
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
--avatar-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
from var(--avatar-gradient-angle) at 50% 50%,
|
|
30
|
-
var(--avatar-gradient-stop-1) 0deg,
|
|
31
|
-
var(--avatar-gradient-stop-2) 180deg,
|
|
32
|
-
var(--avatar-gradient-stop-3) 360deg
|
|
33
|
-
);
|
|
22
|
+
// Hard-coded. Identical in all theme modes.
|
|
23
|
+
// To be replaced by `var (--dt-color-neutral-black)`,
|
|
24
|
+
// or possibly an Avatar-specific Design Token
|
|
25
|
+
--avatar-color-background: #e0e0e0;
|
|
26
|
+
// Hard-coded. Identical in all theme modes.
|
|
27
|
+
// To be replaced by `var (--dt-color-neutral-black)`,
|
|
28
|
+
// or possibly an Avatar-specific Design Token
|
|
29
|
+
--avatar-color-text: #000;
|
|
34
30
|
--avatar-size-shape: var(--dt-size-600);
|
|
35
31
|
--avatar-size-image: 100%;
|
|
36
32
|
--avatar-size-text: var(--dt-font-size-200);
|
|
@@ -42,6 +38,30 @@
|
|
|
42
38
|
display: flex;
|
|
43
39
|
color: var(--avatar-color-text);
|
|
44
40
|
|
|
41
|
+
// -- COLOR VARIANTS
|
|
42
|
+
// ------------------------------------------------------------------------
|
|
43
|
+
|
|
44
|
+
// hard-coded. identical in all theme modes.
|
|
45
|
+
// To be replaced by Avatar-specific Design Tokens,
|
|
46
|
+
&--color-100 { --avatar-color-background: #1aa340; }
|
|
47
|
+
&--color-200 { --avatar-color-background: #aaff83; }
|
|
48
|
+
&--color-300 { --avatar-color-background: #adea88; }
|
|
49
|
+
&--color-400 { --avatar-color-background: #77eca6; }
|
|
50
|
+
&--color-500 { --avatar-color-background: #7aedbd; }
|
|
51
|
+
&--color-600 { --avatar-color-background: #77deec; }
|
|
52
|
+
&--color-700 { --avatar-color-background: #5ed8ff; }
|
|
53
|
+
&--color-800 { --avatar-color-background: #99e7ff; }
|
|
54
|
+
&--color-900 { --avatar-color-background: #51a0fe; }
|
|
55
|
+
&--color-1000 { --avatar-color-background: #b6cfff; }
|
|
56
|
+
&--color-1100 { --avatar-color-background: #f1b7e8; }
|
|
57
|
+
&--color-1200 { --avatar-color-background: #ec77bd; }
|
|
58
|
+
&--color-1300 { --avatar-color-background: #ff67be; }
|
|
59
|
+
&--color-1400 { --avatar-color-background: #f87e7e; }
|
|
60
|
+
&--color-1500 { --avatar-color-background: #eca877; }
|
|
61
|
+
&--color-1600 { --avatar-color-background: #ffbe41; }
|
|
62
|
+
&--color-1700 { --avatar-color-background: #ffd646; }
|
|
63
|
+
&--color-1800 { --avatar-color-background: #f1dab7; }
|
|
64
|
+
|
|
45
65
|
// -- CHILDREN
|
|
46
66
|
// ------------------------------------------------------------------------
|
|
47
67
|
|
|
@@ -55,10 +75,6 @@
|
|
|
55
75
|
background-color: var(--avatar-color-background);
|
|
56
76
|
background-image: var(--avatar-gradient);
|
|
57
77
|
border-radius: var(--dt-size-radius-pill);
|
|
58
|
-
|
|
59
|
-
.d-avatar--no-gradient & {
|
|
60
|
-
background-image: none;
|
|
61
|
-
}
|
|
62
78
|
}
|
|
63
79
|
|
|
64
80
|
&__image {
|
|
@@ -184,6 +184,7 @@
|
|
|
184
184
|
// ----------------------------------------------------------------------------
|
|
185
185
|
.d-btn__label {
|
|
186
186
|
display: inline-flex;
|
|
187
|
+
flex: 1 auto;
|
|
187
188
|
align-items: center;
|
|
188
189
|
justify-content: center;
|
|
189
190
|
// background-color: rgba(0,0,0,.5);
|
|
@@ -377,24 +378,24 @@
|
|
|
377
378
|
// ----------------------------------------------------------------------------
|
|
378
379
|
// -- Base, clear inverted button
|
|
379
380
|
.d-btn--inverted {
|
|
380
|
-
--button-color-text: var(--dt-color-
|
|
381
|
+
--button-color-text: var(--dt-color-foreground-primary-inverted);
|
|
381
382
|
--button-color-background: transparent;
|
|
382
383
|
|
|
383
384
|
&:hover:not([disabled]) {
|
|
384
|
-
--button-color-text: var(--dt-color-
|
|
385
|
+
--button-color-text: var(--dt-color-foreground-primary-inverted);
|
|
385
386
|
--button-color-background: hsla(var(--dt-color-neutral-white-hsl) ~' / ' 15%);
|
|
386
387
|
}
|
|
387
388
|
|
|
388
389
|
&:active:not([disabled]),
|
|
389
390
|
&.d-btn--active:not([disabled]),
|
|
390
391
|
&.d-btn--active:active:not([disabled]) {
|
|
391
|
-
--button-color-text: var(--dt-color-
|
|
392
|
+
--button-color-text: var(--dt-color-foreground-primary-inverted);
|
|
392
393
|
--button-color-background: hsla(var(--dt-color-neutral-white-hsl) ~' / ' 30%);
|
|
393
394
|
}
|
|
394
395
|
|
|
395
396
|
// -- OUTLINED
|
|
396
397
|
&.d-btn--outlined {
|
|
397
|
-
--button-color-border: var(--dt-color-
|
|
398
|
+
--button-color-border: var(--dt-color-border-bold-inverted);
|
|
398
399
|
}
|
|
399
400
|
|
|
400
401
|
// -- PRIMARY
|
|
@@ -17,7 +17,6 @@
|
|
|
17
17
|
// default theme so this file can compile on it's own.
|
|
18
18
|
// ----------------------------------------------------------------------------
|
|
19
19
|
@import (reference) '../dialtone-variables';
|
|
20
|
-
@import (reference) '@dialpad/dialtone-tokens/dist/less/variables';
|
|
21
20
|
@import (reference) 'default';
|
|
22
21
|
|
|
23
22
|
// ============================================================================
|
|
@@ -48,11 +48,11 @@
|
|
|
48
48
|
.d-bgc-secondary { background-color: var(--dt-color-surface-secondary) !important; }
|
|
49
49
|
.d-bgc-secondary-opaque { background-color: var(--dt-color-surface-secondary-opaque) !important; }
|
|
50
50
|
.d-bgc-moderate { background-color: var(--dt-color-surface-moderate) !important; }
|
|
51
|
-
.d-bgc-moderate-opaque { background-color: var(--dt-color-surface-moderate-opaque)!important; }
|
|
52
|
-
.d-bgc-strong-opaque { background-color: var(--dt-color-surface-strong-opaque)!important; }
|
|
53
|
-
.d-bgc-contrast-opaque { background-color: var(--dt-color-surface-contrast-opaque)!important; }
|
|
51
|
+
.d-bgc-moderate-opaque { background-color: var(--dt-color-surface-moderate-opaque) !important; }
|
|
52
|
+
.d-bgc-strong-opaque { background-color: var(--dt-color-surface-strong-opaque) !important; }
|
|
53
|
+
.d-bgc-contrast-opaque { background-color: var(--dt-color-surface-contrast-opaque) !important; }
|
|
54
54
|
.d-bgc-bold { background-color: var(--dt-color-surface-bold) !important; }
|
|
55
|
-
.d-bgc-bold-opaque { background-color: var(--dt-color-surface-bold-opaque)!important; }
|
|
55
|
+
.d-bgc-bold-opaque { background-color: var(--dt-color-surface-bold-opaque) !important; }
|
|
56
56
|
.d-bgc-strong { background-color: var(--dt-color-surface-strong) !important; }
|
|
57
57
|
.d-bgc-contrast { background-color: var(--dt-color-surface-contrast) !important; }
|
|
58
58
|
.d-bgc-success { background-color: var(--dt-color-surface-success) !important; }
|