@dialpad/dialtone 7.25.1 → 8.0.0-version8.2
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/box-shadows.mjs +17 -0
- package/lib/build/js/dialtone_migration_helper/configs/colors.mjs +63 -0
- package/lib/build/js/dialtone_migration_helper/configs/fonts.mjs +38 -0
- package/lib/build/js/dialtone_migration_helper/configs/size-and-space.mjs +77 -0
- package/lib/build/js/dialtone_migration_helper/index.mjs +1 -1
- package/lib/build/less/components/avatar.less +44 -44
- package/lib/build/less/components/badge.less +47 -47
- package/lib/build/less/components/banner.less +25 -27
- package/lib/build/less/components/breadcrumbs.less +13 -13
- package/lib/build/less/components/button.less +111 -113
- package/lib/build/less/components/card.less +6 -8
- package/lib/build/less/components/chip.less +49 -49
- package/lib/build/less/components/forms.less +28 -30
- package/lib/build/less/components/icon.less +1 -1
- package/lib/build/less/components/input.less +40 -43
- package/lib/build/less/components/link.less +15 -15
- package/lib/build/less/components/list-group.less +11 -11
- package/lib/build/less/components/modal.less +40 -42
- package/lib/build/less/components/notice.less +36 -38
- package/lib/build/less/components/popover.less +9 -9
- package/lib/build/less/components/presence.less +8 -10
- package/lib/build/less/components/radio-checkbox.less +26 -26
- package/lib/build/less/components/selects.less +16 -20
- package/lib/build/less/components/skeleton.less +2 -2
- package/lib/build/less/components/stack.less +6 -6
- package/lib/build/less/components/table.less +18 -20
- package/lib/build/less/components/tabs.less +40 -40
- package/lib/build/less/components/toast.less +34 -37
- package/lib/build/less/components/toggle.less +29 -31
- package/lib/build/less/components/tooltip.less +35 -35
- package/lib/build/less/dialtone-reset.less +2 -2
- package/lib/build/less/dialtone-variables.less +0 -4
- package/lib/build/less/dialtone.less +0 -3
- package/lib/build/less/themes/default.less +29 -188
- package/lib/build/less/themes/example.less +3 -2
- package/lib/build/less/utilities/backgrounds.less +4 -25
- package/lib/build/less/utilities/borders.less +37 -64
- package/lib/build/less/utilities/colors.less +93 -318
- package/lib/build/less/utilities/effects.less +25 -34
- package/lib/build/less/utilities/flex.less +12 -21
- package/lib/build/less/utilities/grid.less +0 -77
- package/lib/build/less/utilities/interactivity.less +2 -2
- package/lib/build/less/utilities/layout.less +0 -55
- package/lib/build/less/utilities/sizing.less +0 -34
- package/lib/build/less/utilities/spacing.less +62 -234
- package/lib/build/less/utilities/svg.less +16 -17
- package/lib/build/less/utilities/typography.less +78 -103
- package/lib/build/less/variables/layout.less +0 -97
- package/lib/build/less/variables/sizes.less +25 -30
- package/lib/build/less/variables/typography.less +2 -151
- package/lib/build/less/variables/visual-styles.less +4 -24
- package/lib/dist/css/dialtone.css +8137 -19405
- package/lib/dist/css/dialtone.min.css +1 -1
- package/lib/dist/js/dialtone_migration_helper/configs/box-shadows.mjs +17 -0
- package/lib/dist/js/dialtone_migration_helper/configs/colors.mjs +63 -0
- package/lib/dist/js/dialtone_migration_helper/configs/fonts.mjs +38 -0
- package/lib/dist/js/dialtone_migration_helper/configs/size-and-space.mjs +77 -0
- package/lib/dist/js/dialtone_migration_helper/index.mjs +1 -1
- package/package.json +17 -6
- package/lib/build/js/dialtone_migration_helper/configs/tokens-migration.mjs +0 -13
- package/lib/build/less/utilities/internals.less +0 -504
- package/lib/build/less/variables/borders.less +0 -37
- package/lib/build/less/variables/colors.less +0 -279
- package/lib/build/less/variables/icons.less +0 -43
- package/lib/build/less/variables/spacing.less +0 -81
- package/lib/dist/js/dialtone_migration_helper/configs/tokens-migration.mjs +0 -13
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
//@import (reference) '../variables/icons.less';
|
|
2
|
-
|
|
3
1
|
//
|
|
4
2
|
// DIALTONE 6 SHIM
|
|
5
3
|
// UTILITIES: SVG
|
|
@@ -14,43 +12,44 @@
|
|
|
14
12
|
// ============================================================================
|
|
15
13
|
// @ SIZE
|
|
16
14
|
// ----------------------------------------------------------------------------
|
|
17
|
-
// -- First, the mixin
|
|
18
|
-
.d-svg-size(@size) {
|
|
19
|
-
width: @size !important;
|
|
20
|
-
height: @size !important;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
// -- Now, the size classes
|
|
24
15
|
.d-svg--size14 {
|
|
25
|
-
|
|
16
|
+
width: var(--dt-icon-size-200) !important;
|
|
17
|
+
height: var(--dt-icon-size-200) !important;
|
|
26
18
|
}
|
|
27
19
|
|
|
28
20
|
.d-svg--size16 {
|
|
29
|
-
|
|
21
|
+
width: var(--dt-size-500) !important;
|
|
22
|
+
height: var(--dt-size-500) !important;
|
|
30
23
|
}
|
|
31
24
|
|
|
32
25
|
.d-svg--size18 {
|
|
33
|
-
|
|
26
|
+
width: var(--dt-icon-size-300) !important;
|
|
27
|
+
height: var(--dt-icon-size-300) !important;
|
|
34
28
|
}
|
|
35
29
|
|
|
36
30
|
.d-svg--size20 {
|
|
37
|
-
|
|
31
|
+
width: var(--dt-icon-size-400) !important;
|
|
32
|
+
height: var(--dt-icon-size-400) !important;
|
|
38
33
|
}
|
|
39
34
|
|
|
40
35
|
.d-svg--size24 {
|
|
41
|
-
|
|
36
|
+
width: var(--dt-icon-size-500) !important;
|
|
37
|
+
height: var(--dt-icon-size-500) !important;
|
|
42
38
|
}
|
|
43
39
|
|
|
44
40
|
.d-svg--size32 {
|
|
45
|
-
|
|
41
|
+
width: var(--dt-icon-size-600) !important;
|
|
42
|
+
height: var(--dt-icon-size-600) !important;
|
|
46
43
|
}
|
|
47
44
|
|
|
48
45
|
.d-svg--size48 {
|
|
49
|
-
|
|
46
|
+
width: var(--dt-size-650) !important;
|
|
47
|
+
height: var(--dt-size-650) !important;
|
|
50
48
|
}
|
|
51
49
|
|
|
52
50
|
.d-svg--size64 {
|
|
53
|
-
|
|
51
|
+
width: var(--dt-size-700) !important;
|
|
52
|
+
height: var(--dt-size-700) !important;
|
|
54
53
|
}
|
|
55
54
|
|
|
56
55
|
.d-svg--size100p {
|
|
@@ -1,18 +1,12 @@
|
|
|
1
|
-
//@import (reference) '../variables/typography.less';
|
|
2
|
-
//@import (reference) '../variables/spacing.less';
|
|
3
|
-
//@import (reference) '../utilities/internals.less';
|
|
4
|
-
//@import (reference) '../utilities/grid.less';
|
|
5
|
-
|
|
6
1
|
//
|
|
7
2
|
// DIALTONE
|
|
8
|
-
//
|
|
3
|
+
// UTILITIES: TYPOGRAPHY
|
|
9
4
|
//
|
|
10
5
|
// These are utility typography classes for Dialpad's design system Dialtone.
|
|
11
6
|
// For further documentation of these and other classes,
|
|
12
7
|
// visit https://dialpad.design/utilties/typography
|
|
13
8
|
//
|
|
14
9
|
// TABLE OF CONTENTS
|
|
15
|
-
// • FONT-FACE
|
|
16
10
|
// • FONT FAMILY
|
|
17
11
|
// • RESET HEADERS & PARAGRAPH MARGINS
|
|
18
12
|
// • FONT SIZE
|
|
@@ -26,34 +20,15 @@
|
|
|
26
20
|
// • TEXT TRANSFORM
|
|
27
21
|
// • VERTICAL ALIGN
|
|
28
22
|
// • WHITESPACE
|
|
29
|
-
// •
|
|
23
|
+
// • WORD-BREAK
|
|
30
24
|
//
|
|
31
25
|
// ============================================================================
|
|
32
|
-
// $ FONT FACE
|
|
33
|
-
// To turn on custom webfonts, set @define-font-face to true.
|
|
34
|
-
// ----------------------------------------------------------------------------
|
|
35
|
-
#d-internals #font-face(@define-ff-custom-adjusted, @define-ff-custom-adjusted-name, normal, true, 95%);
|
|
36
|
-
#d-internals #font-face(@define-ff-custom-adjusted-italic, @define-ff-custom-adjusted-name, italic, true, 95%);
|
|
37
|
-
#d-internals #font-face(@define-ff-mono, @define-ff-mono-name, normal, true);
|
|
38
|
-
#d-internals #font-face(@define-ff-marketing, @define-ff-marketing-name);
|
|
39
|
-
#d-internals #font-face(@define-ff-marketing-semi-expanded, @define-ff-marketing-semi-expanded-name);
|
|
40
|
-
#d-internals #font-face(@define-ff-marketing-expanded, @define-ff-marketing-expanded-name);
|
|
41
|
-
|
|
42
|
-
@font-face {
|
|
43
|
-
font-family: 'Segoe UI Adjusted';
|
|
44
|
-
src: local(Segoe UI Bold);
|
|
45
|
-
ascent-override: 90%;
|
|
46
|
-
font-weight: 700;
|
|
47
|
-
}
|
|
48
|
-
// ============================================================================
|
|
49
26
|
// $ FONT FAMILY
|
|
50
27
|
// ----------------------------------------------------------------------------
|
|
51
|
-
.d-ff-custom { font-family:
|
|
52
|
-
.d-ff-sans { font-family:
|
|
53
|
-
.d-ff-mono { font-family:
|
|
54
|
-
.d-ff-marketing { font-family:
|
|
55
|
-
.d-ff-marketing-semi-expanded { font-family: @ff-marketing-semi-expanded !important; }
|
|
56
|
-
.d-ff-marketing-expanded { font-family: @ff-marketing-expanded !important; }
|
|
28
|
+
.d-ff-custom { font-family: var(--dt-font-family-body) !important; }
|
|
29
|
+
.d-ff-sans { font-family: var(--dt-font-family-body) !important; }
|
|
30
|
+
.d-ff-mono { font-family: var(--dt-font-family-mono) !important; }
|
|
31
|
+
.d-ff-marketing { font-family: var(--dt-font-family-expressive) !important; }
|
|
57
32
|
.d-ff-unset { font-family: unset !important; }
|
|
58
33
|
|
|
59
34
|
// ============================================================================
|
|
@@ -75,84 +50,84 @@ ul {
|
|
|
75
50
|
// ============================================================================
|
|
76
51
|
// $ BODY STYLES
|
|
77
52
|
// ----------------------------------------------------------------------------
|
|
78
|
-
.d-body-base { line-height: var(--
|
|
79
|
-
.d-body-small { line-height: var(--
|
|
80
|
-
.d-body-compact { line-height: var(--
|
|
81
|
-
.d-body-compact-small { line-height: var(--
|
|
53
|
+
.d-body-base { line-height: var(--dt-font-line-height-400); font-size: var(--dt-font-size-200); }
|
|
54
|
+
.d-body-small { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-100); }
|
|
55
|
+
.d-body-compact { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-200); }
|
|
56
|
+
.d-body-compact-small { line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-100); }
|
|
82
57
|
|
|
83
58
|
// ============================================================================
|
|
84
59
|
// $ LABEL STYLES
|
|
85
60
|
// ----------------------------------------------------------------------------
|
|
86
|
-
.d-label-base { line-height: var(--
|
|
87
|
-
.d-label-small { line-height: var(--
|
|
88
|
-
.d-label-compact { line-height: var(--
|
|
89
|
-
.d-label-plain { line-height: var(--
|
|
90
|
-
.d-label-compact-plain { line-height: var(--
|
|
91
|
-
.d-label-compact-small { line-height: var(--
|
|
92
|
-
.d-label-plain-small { line-height: var(--
|
|
93
|
-
.d-label-compact-plain-small { line-height: var(--
|
|
61
|
+
.d-label-base { line-height: var(--dt-font-line-height-400); font-size: var(--dt-font-size-200); font-weight: var(--dt-font-weight-semi-bold); }
|
|
62
|
+
.d-label-small { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-100); font-weight: var(--dt-font-weight-semi-bold); }
|
|
63
|
+
.d-label-compact { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-200); font-weight: var(--dt-font-weight-semi-bold); }
|
|
64
|
+
.d-label-plain { line-height: var(--dt-font-line-height-400); font-size: var(--dt-font-size-200); }
|
|
65
|
+
.d-label-compact-plain { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-200); }
|
|
66
|
+
.d-label-compact-small { line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-100); font-weight: var(--dt-font-weight-semi-bold); }
|
|
67
|
+
.d-label-plain-small { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-100); }
|
|
68
|
+
.d-label-compact-plain-small { line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-100); }
|
|
94
69
|
|
|
95
70
|
// ============================================================================
|
|
96
71
|
// $ HELPER STYLES
|
|
97
72
|
// ----------------------------------------------------------------------------
|
|
98
|
-
.d-helper-base { line-height: var(--
|
|
99
|
-
.d-helper-small { line-height: var(--
|
|
73
|
+
.d-helper-base { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-200); }
|
|
74
|
+
.d-helper-small { line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-100); }
|
|
100
75
|
|
|
101
76
|
// ============================================================================
|
|
102
77
|
// $ CODE STYLES
|
|
103
78
|
// ----------------------------------------------------------------------------
|
|
104
79
|
|
|
105
|
-
.d-code-base { font-family: var(--
|
|
106
|
-
.d-code-small { font-family: var(--
|
|
80
|
+
.d-code-base { font-family: var(--dt-font-family-mono); line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-200); }
|
|
81
|
+
.d-code-small { font-family: var(--dt-font-family-mono); line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-100); }
|
|
107
82
|
|
|
108
83
|
// ============================================================================
|
|
109
84
|
// $ FONT SIZE
|
|
110
85
|
// ----------------------------------------------------------------------------
|
|
111
|
-
.d-fs-100 { font-size: var(--
|
|
112
|
-
.d-fs-200 { font-size: var(--
|
|
113
|
-
.d-fs-300 { font-size: var(--
|
|
114
|
-
.d-fs-400 { font-size: var(--
|
|
115
|
-
.d-fs-500 { font-size: var(--
|
|
116
|
-
|
|
117
|
-
.d-fs-100-mobile { font-size: var(--
|
|
118
|
-
.d-fs-200-mobile { font-size: var(--
|
|
119
|
-
.d-fs-300-mobile { font-size: var(--
|
|
120
|
-
.d-fs-400-mobile { font-size: var(--
|
|
121
|
-
.d-fs-500-mobile { font-size: var(--
|
|
122
|
-
|
|
123
|
-
.d-fs-100-tc8 { font-size: var(--
|
|
124
|
-
.d-fs-200-tc8 { font-size: var(--
|
|
125
|
-
.d-fs-300-tc8 { font-size: var(--
|
|
126
|
-
.d-fs-400-tc8 { font-size: var(--
|
|
127
|
-
.d-fs-500-tc8 { font-size: var(--
|
|
128
|
-
|
|
129
|
-
.d-fs-100-tv { font-size: var(--
|
|
130
|
-
.d-fs-200-tv { font-size: var(--
|
|
131
|
-
.d-fs-300-tv { font-size: var(--
|
|
132
|
-
.d-fs-400-tv { font-size: var(--
|
|
133
|
-
.d-fs-500-tv { font-size: var(--
|
|
134
|
-
|
|
135
|
-
.d-headline10 { .d-fs-100(); font-weight:
|
|
136
|
-
.d-headline24 { .d-fs-300(); font-weight:
|
|
137
|
-
.d-headline28 { .d-fs-400(); font-weight:
|
|
138
|
-
.d-headline32 { .d-fs-400(); font-weight:
|
|
139
|
-
.d-headline36 { .d-fs-400(); font-weight:
|
|
140
|
-
.d-headline42 { .d-fs-500(); font-weight:
|
|
141
|
-
.d-headline48 { .d-fs-500(); font-weight:
|
|
142
|
-
.d-headline54 { .d-fs-500(); font-weight:
|
|
143
|
-
|
|
144
|
-
.d-headline-eyebrow { line-height: var(--
|
|
145
|
-
.d-headline-small { line-height: var(--
|
|
146
|
-
.d-headline-soft-small { line-height: var(--
|
|
147
|
-
.d-headline-medium { line-height: var(--
|
|
148
|
-
.d-headline-compact-small { line-height: var(--
|
|
149
|
-
.d-headline-compact-soft-small { line-height: var(--
|
|
86
|
+
.d-fs-100 { font-size: var(--dt-font-size-100) !important; }
|
|
87
|
+
.d-fs-200 { font-size: var(--dt-font-size-200) !important; }
|
|
88
|
+
.d-fs-300 { font-size: var(--dt-font-size-300) !important; }
|
|
89
|
+
.d-fs-400 { font-size: var(--dt-font-size-400) !important; }
|
|
90
|
+
.d-fs-500 { font-size: var(--dt-font-size-500) !important; }
|
|
91
|
+
|
|
92
|
+
.d-fs-100-mobile { font-size: var(--dt-font-size-100-mobile) !important; }
|
|
93
|
+
.d-fs-200-mobile { font-size: var(--dt-font-size-200-mobile) !important; }
|
|
94
|
+
.d-fs-300-mobile { font-size: var(--dt-font-size-300-mobile) !important; }
|
|
95
|
+
.d-fs-400-mobile { font-size: var(--dt-font-size-400-mobile) !important; }
|
|
96
|
+
.d-fs-500-mobile { font-size: var(--dt-font-size-500-mobile) !important; }
|
|
97
|
+
|
|
98
|
+
.d-fs-100-tc8 { font-size: var(--dt-font-size-100-tc8) !important; }
|
|
99
|
+
.d-fs-200-tc8 { font-size: var(--dt-font-size-200-tc8) !important; }
|
|
100
|
+
.d-fs-300-tc8 { font-size: var(--dt-font-size-300-tc8) !important; }
|
|
101
|
+
.d-fs-400-tc8 { font-size: var(--dt-font-size-400-tc8) !important; }
|
|
102
|
+
.d-fs-500-tc8 { font-size: var(--dt-font-size-500-tc8) !important; }
|
|
103
|
+
|
|
104
|
+
.d-fs-100-tv { font-size: var(--dt-font-size-100-tv) !important; }
|
|
105
|
+
.d-fs-200-tv { font-size: var(--dt-font-size-200-tv) !important; }
|
|
106
|
+
.d-fs-300-tv { font-size: var(--dt-font-size-300-tv) !important; }
|
|
107
|
+
.d-fs-400-tv { font-size: var(--dt-font-size-400-tv) !important; }
|
|
108
|
+
.d-fs-500-tv { font-size: var(--dt-font-size-500-tv) !important; }
|
|
109
|
+
|
|
110
|
+
.d-headline10 { .d-fs-100(); font-weight: var(--dt-font-weight-bold); .d-tt-uppercase(); }
|
|
111
|
+
.d-headline24 { .d-fs-300(); font-weight: var(--dt-font-weight-bold) !important; }
|
|
112
|
+
.d-headline28 { .d-fs-400(); font-weight: var(--dt-font-weight-bold) !important; }
|
|
113
|
+
.d-headline32 { .d-fs-400(); font-weight: var(--dt-font-weight-bold) !important; }
|
|
114
|
+
.d-headline36 { .d-fs-400(); font-weight: var(--dt-font-weight-bold) !important; }
|
|
115
|
+
.d-headline42 { .d-fs-500(); font-weight: var(--dt-font-weight-bold) !important; }
|
|
116
|
+
.d-headline48 { .d-fs-500(); font-weight: var(--dt-font-weight-bold) !important; }
|
|
117
|
+
.d-headline54 { .d-fs-500(); font-weight: var(--dt-font-weight-bold) !important; }
|
|
118
|
+
|
|
119
|
+
.d-headline-eyebrow { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-100); font-weight: var(--dt-font-weight-normal); .d-tt-uppercase(); }
|
|
120
|
+
.d-headline-small { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-100); font-weight: var(--dt-font-weight-bold); }
|
|
121
|
+
.d-headline-soft-small { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-100); font-weight: var(--dt-font-weight-medium); }
|
|
122
|
+
.d-headline-medium { line-height: var(--dt-font-line-height-400); font-size: var(--dt-font-size-200); font-weight: var(--dt-font-weight-bold); }
|
|
123
|
+
.d-headline-compact-small { line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-100); font-weight: var(--dt-font-weight-bold); }
|
|
124
|
+
.d-headline-compact-soft-small { line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-100); font-weight: var(--dt-font-weight-medium); }
|
|
150
125
|
.d-headline-compact-base,
|
|
151
|
-
.d-headline-compact-medium { line-height: var(--
|
|
152
|
-
.d-headline-compact-large { line-height: var(--
|
|
153
|
-
.d-headline-large { line-height: var(--
|
|
154
|
-
.d-headline-extra-large { line-height: var(--
|
|
155
|
-
.d-headline-extra-extra-large { line-height: var(--
|
|
126
|
+
.d-headline-compact-medium { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-200); font-weight: var(--dt-font-weight-bold); }
|
|
127
|
+
.d-headline-compact-large { line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-300); font-weight: var(--dt-font-weight-bold); }
|
|
128
|
+
.d-headline-large { line-height: var(--dt-font-line-height-400); font-size: var(--dt-font-size-300); font-weight: var(--dt-font-weight-bold); }
|
|
129
|
+
.d-headline-extra-large { line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-400); font-weight: var(--dt-font-weight-medium); }
|
|
130
|
+
.d-headline-extra-extra-large { line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-500); font-weight: var(--dt-font-weight-medium); }
|
|
156
131
|
|
|
157
132
|
.d-fs-unset { font-size: unset !important; }
|
|
158
133
|
|
|
@@ -167,10 +142,10 @@ ul {
|
|
|
167
142
|
// ============================================================================
|
|
168
143
|
// $$ FONT WEIGHT
|
|
169
144
|
// ----------------------------------------------------------------------------
|
|
170
|
-
.d-fw-normal { font-weight: var(--
|
|
171
|
-
.d-fw-medium { font-weight: var(--
|
|
172
|
-
.d-fw-semibold { font-weight: var(--
|
|
173
|
-
.d-fw-bold { font-weight: var(--
|
|
145
|
+
.d-fw-normal { font-weight: var(--dt-font-weight-normal) !important; }
|
|
146
|
+
.d-fw-medium { font-weight: var(--dt-font-weight-medium) !important; }
|
|
147
|
+
.d-fw-semibold { font-weight: var(--dt-font-weight-semi-bold) !important; }
|
|
148
|
+
.d-fw-bold { font-weight: var(--dt-font-weight-bold) !important; }
|
|
174
149
|
.d-fw-unset { font-weight: unset !important; }
|
|
175
150
|
|
|
176
151
|
|
|
@@ -187,12 +162,12 @@ ul {
|
|
|
187
162
|
.d-lh16 { line-height: var(--lh16) !important; }
|
|
188
163
|
.d-lh20 { line-height: var(--lh20) !important; }
|
|
189
164
|
.d-lh24 { line-height: var(--lh24) !important; }
|
|
190
|
-
.d-lh-100 { line-height: var(--
|
|
191
|
-
.d-lh-200 { line-height: var(--
|
|
192
|
-
.d-lh-300 { line-height: var(--
|
|
193
|
-
.d-lh-400 { line-height: var(--
|
|
194
|
-
.d-lh-500 { line-height: var(--
|
|
195
|
-
.d-lh-600 { line-height: var(--
|
|
165
|
+
.d-lh-100 { line-height: var(--dt-font-line-height-100) !important; }
|
|
166
|
+
.d-lh-200 { line-height: var(--dt-font-line-height-200) !important; }
|
|
167
|
+
.d-lh-300 { line-height: var(--dt-font-line-height-300) !important; }
|
|
168
|
+
.d-lh-400 { line-height: var(--dt-font-line-height-400) !important; }
|
|
169
|
+
.d-lh-500 { line-height: var(--dt-font-line-height-500) !important; }
|
|
170
|
+
.d-lh-600 { line-height: var(--dt-font-line-height-600) !important; }
|
|
196
171
|
.d-lh-unset { line-height: unset !important; }
|
|
197
172
|
|
|
198
173
|
|
|
@@ -205,8 +180,8 @@ ul {
|
|
|
205
180
|
li,
|
|
206
181
|
ol,
|
|
207
182
|
ul {
|
|
208
|
-
margin:
|
|
209
|
-
padding:
|
|
183
|
+
margin: 0;
|
|
184
|
+
padding: 0;
|
|
210
185
|
.d-ls-none();
|
|
211
186
|
}
|
|
212
187
|
}
|
|
@@ -6,98 +6,6 @@
|
|
|
6
6
|
// For further documentation of these and other classes,
|
|
7
7
|
// visit https://dialpad.design/tokens/z-index
|
|
8
8
|
//
|
|
9
|
-
// ============================================================================
|
|
10
|
-
// $ WIDTHS
|
|
11
|
-
// ----------------------------------------------------------------------------
|
|
12
|
-
@sizes-percentages: {
|
|
13
|
-
0: 0;
|
|
14
|
-
10: 10%;
|
|
15
|
-
20: 20%;
|
|
16
|
-
25: 25%;
|
|
17
|
-
30: 30%;
|
|
18
|
-
40: 40%;
|
|
19
|
-
50: 50%;
|
|
20
|
-
60: 60%;
|
|
21
|
-
70: 70%;
|
|
22
|
-
75: 75%;
|
|
23
|
-
80: 80%;
|
|
24
|
-
90: 90%;
|
|
25
|
-
100: 100%;
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
@size0: 0;
|
|
29
|
-
@size1: 0.1rem;
|
|
30
|
-
@size2: 0.2rem;
|
|
31
|
-
@size4: 0.4rem;
|
|
32
|
-
@size6: 0.6rem;
|
|
33
|
-
@size8: 0.8rem;
|
|
34
|
-
@size12: 1.2rem;
|
|
35
|
-
@size16: 1.6rem;
|
|
36
|
-
@size20: 2rem;
|
|
37
|
-
@size24: 2.4rem;
|
|
38
|
-
@size32: 3.2rem;
|
|
39
|
-
@size42: 4.2rem;
|
|
40
|
-
@size48: 4.8rem;
|
|
41
|
-
@size64: 6.4rem;
|
|
42
|
-
@size72: 7.2rem;
|
|
43
|
-
@size84: 8.4rem;
|
|
44
|
-
@size96: 9.6rem;
|
|
45
|
-
@size102: 10.2rem;
|
|
46
|
-
@size114: 11.4rem;
|
|
47
|
-
@size128: 12.8rem;
|
|
48
|
-
@size164: 16.4rem;
|
|
49
|
-
@size216: 21.6rem;
|
|
50
|
-
@size264: 26.4rem;
|
|
51
|
-
@size332: 33.2rem;
|
|
52
|
-
@size464: 46.4rem;
|
|
53
|
-
@size512: 51.2rem;
|
|
54
|
-
@size628: 62.8rem;
|
|
55
|
-
@size764: 76.4rem;
|
|
56
|
-
@size828: 82.8rem;
|
|
57
|
-
@size912: 91.2rem;
|
|
58
|
-
@size1024: 102.4rem;
|
|
59
|
-
@size1140: 114rem;
|
|
60
|
-
@size1268: 126.8rem;
|
|
61
|
-
@size1340: 134rem;
|
|
62
|
-
|
|
63
|
-
@sizes-fixed: {
|
|
64
|
-
size0: @size0;
|
|
65
|
-
size1: @size1;
|
|
66
|
-
size2: @size2;
|
|
67
|
-
size4: @size4;
|
|
68
|
-
size6: @size6;
|
|
69
|
-
size8: @size8;
|
|
70
|
-
size12: @size12;
|
|
71
|
-
size16: @size16;
|
|
72
|
-
size20: @size20;
|
|
73
|
-
size24: @size24;
|
|
74
|
-
size32: @size32;
|
|
75
|
-
size42: @size42;
|
|
76
|
-
size48: @size48;
|
|
77
|
-
size64: @size64;
|
|
78
|
-
size72: @size72;
|
|
79
|
-
size84: @size84;
|
|
80
|
-
size96: @size96;
|
|
81
|
-
size102: @size102;
|
|
82
|
-
size114: @size114;
|
|
83
|
-
size128: @size128;
|
|
84
|
-
size164: @size164;
|
|
85
|
-
size216: @size216;
|
|
86
|
-
size264: @size264;
|
|
87
|
-
size332: @size332;
|
|
88
|
-
size464: @size464;
|
|
89
|
-
size512: @size512;
|
|
90
|
-
size628: @size628;
|
|
91
|
-
size764: @size764;
|
|
92
|
-
size828: @size828;
|
|
93
|
-
size912: @size912;
|
|
94
|
-
size1024: @size1024;
|
|
95
|
-
size1140: @size1140;
|
|
96
|
-
size1268: @size1268;
|
|
97
|
-
size1340: @size1340;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
|
|
101
9
|
// ============================================================================
|
|
102
10
|
// $ Z-INDEX
|
|
103
11
|
// ----------------------------------------------------------------------------
|
|
@@ -148,8 +56,3 @@
|
|
|
148
56
|
grid-column-width: minmax(min-content, 24rem);
|
|
149
57
|
grid-column-auto: 1fr;
|
|
150
58
|
}
|
|
151
|
-
|
|
152
|
-
// ============================================================================
|
|
153
|
-
// $ FLEX VARIABLES
|
|
154
|
-
// ----------------------------------------------------------------------------
|
|
155
|
-
@flex-columns: 12;
|
|
@@ -3,67 +3,62 @@
|
|
|
3
3
|
// TOKENS: SIZES
|
|
4
4
|
//
|
|
5
5
|
// These are shared sizes for buttons, inputs, select menus (native),
|
|
6
|
-
// and
|
|
6
|
+
// and text-areas.
|
|
7
7
|
// ============================================================================
|
|
8
8
|
// $ SHARED INPUT & BUTTON SIZES
|
|
9
9
|
// ============================================================================
|
|
10
10
|
// $$ EXTRA SMALL
|
|
11
11
|
// ----------------------------------------------------------------------------
|
|
12
|
+
|
|
12
13
|
#d-internal__input-and-select-xs() {
|
|
13
|
-
--input-padding-y: calc(calc(var(--space-400) - var(--space-100)) - var(--input-border-width));
|
|
14
|
-
--input-padding-x: calc(var(--space-400) - var(--input-border-width));
|
|
15
|
-
--input-font-size: var(--
|
|
16
|
-
--input-border-radius: var(--size-300);
|
|
14
|
+
--input-padding-y: calc(calc(var(--dt-space-400) - var(--dt-space-100)) - var(--input-border-width));
|
|
15
|
+
--input-padding-x: calc(var(--dt-space-400) - var(--input-border-width));
|
|
16
|
+
--input-font-size: var(--dt-font-size-100);
|
|
17
|
+
--input-border-radius: var(--dt-size-300);
|
|
17
18
|
|
|
18
19
|
.d-btn__icon {
|
|
19
|
-
width:
|
|
20
|
-
height:
|
|
20
|
+
width: calc(var(--dt-size-500) - var(--dt-size-200));
|
|
21
|
+
height: calc(var(--dt-size-500) - var(--dt-size-200));
|
|
21
22
|
}
|
|
22
23
|
}
|
|
23
24
|
|
|
24
25
|
// $$ SMALL
|
|
25
26
|
// ----------------------------------------------------------------------------
|
|
26
27
|
#d-internal__input-and-select-sm() {
|
|
27
|
-
--input-padding-y: calc(var(--space-400) - var(--input-border-width));
|
|
28
|
-
--input-padding-x: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
|
|
29
|
-
--input-font-size: var(--
|
|
28
|
+
--input-padding-y: calc(var(--dt-space-400) - var(--input-border-width));
|
|
29
|
+
--input-padding-x: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
|
|
30
|
+
--input-font-size: var(--dt-font-size-100);
|
|
30
31
|
|
|
31
32
|
.d-btn__icon {
|
|
32
|
-
width:
|
|
33
|
-
height:
|
|
33
|
+
width: var(--dt-size-500);
|
|
34
|
+
height: var(--dt-size-500);
|
|
34
35
|
}
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
// $$ LARGE
|
|
38
39
|
// ----------------------------------------------------------------------------
|
|
39
40
|
#d-internal__input-and-select-lg() {
|
|
40
|
-
--input-padding-y: calc((var(--space-400) + var(--space-200)) - var(--input-border-width));
|
|
41
|
-
--input-padding-x: calc(var(--space-500) - var(--input-border-width));
|
|
42
|
-
--input-font-size: var(--
|
|
43
|
-
--input-border-radius:
|
|
41
|
+
--input-padding-y: calc((var(--dt-space-400) + var(--dt-space-200)) - var(--input-border-width));
|
|
42
|
+
--input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
|
|
43
|
+
--input-font-size: var(--dt-font-size-300);
|
|
44
|
+
--input-border-radius: var(--dt-size-450);
|
|
44
45
|
|
|
45
46
|
.d-btn__icon {
|
|
46
|
-
width:
|
|
47
|
-
height:
|
|
47
|
+
width: calc(var(--dt-size-300) * 5);
|
|
48
|
+
height: calc(var(--dt-size-300) * 5);
|
|
48
49
|
}
|
|
49
50
|
}
|
|
50
51
|
|
|
51
52
|
// $$ EXTRA LARGE
|
|
52
53
|
// ----------------------------------------------------------------------------
|
|
53
54
|
#d-internal__input-and-select-xl() {
|
|
54
|
-
--input-padding-y: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
|
|
55
|
-
--input-padding-x: calc(var(--space-500) - var(--input-border-width));
|
|
56
|
-
--input-font-size: var(--
|
|
57
|
-
--input-border-radius: var(--size-500);
|
|
55
|
+
--input-padding-y: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
|
|
56
|
+
--input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
|
|
57
|
+
--input-font-size: var(--dt-font-size-400);
|
|
58
|
+
--input-border-radius: var(--dt-size-500);
|
|
58
59
|
|
|
59
60
|
.d-btn__icon {
|
|
60
|
-
width:
|
|
61
|
-
height:
|
|
61
|
+
width: var(--dt-size-550);
|
|
62
|
+
height: var(--dt-size-550);
|
|
62
63
|
}
|
|
63
64
|
}
|
|
64
|
-
|
|
65
|
-
#d-internals #spacing-classes(0.8rem, 'size');
|
|
66
|
-
#d-internals #spacing-classes(1.6rem, 'size', '-16');
|
|
67
|
-
#d-internals #spacing-classes(3.2rem, 'size', '-32');
|
|
68
|
-
#d-internals #spacing-classes(6.4rem, 'size', '-64');
|
|
69
|
-
#d-internals #spacing-classes(12.8rem, 'size', '-128');
|