@dialpad/dialtone 7.13.1 → 7.15.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/lib/build/js/dialtone_health_check/deprecated_icons.js +104 -0
- package/lib/build/js/dialtone_health_check/index.js +82 -0
- package/lib/build/js/dialtone_health_check/non_dialtone_properties.js +44 -0
- package/lib/build/less/components/banner.less +2 -2
- package/lib/build/less/components/modal.less +20 -0
- package/lib/build/less/components/radio-checkbox.less +1 -76
- package/lib/build/less/components/root-layout.less +19 -0
- package/lib/build/less/dialtone.less +1 -0
- package/lib/dist/css/dialtone.css +23 -59
- package/lib/dist/css/dialtone.min.css +1 -1
- package/lib/dist/js/dialtone_health_check/deprecated_icons.js +104 -0
- package/lib/dist/js/dialtone_health_check/index.js +82 -0
- package/lib/dist/js/dialtone_health_check/non_dialtone_properties.js +44 -0
- package/package.json +5 -4
- package/lib/build/js/dialtone_health_check.js +0 -101
- package/lib/dist/js/dialtone_health_check.js +0 -101
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
const fs = require('fs');
|
|
2
|
+
const iconRegex = /.*@dialpad\/dialtone\/(vue\/.*|.+\.svg)/gim;
|
|
3
|
+
const brandIconsList = [
|
|
4
|
+
'IconAirtable',
|
|
5
|
+
'IconAmex',
|
|
6
|
+
'IconAppStoreBadge',
|
|
7
|
+
'IconApple',
|
|
8
|
+
'IconAsana',
|
|
9
|
+
'IconBrandDialpadMeetings',
|
|
10
|
+
'IconBrandDialpad',
|
|
11
|
+
'IconBullhorn',
|
|
12
|
+
'IconClockify',
|
|
13
|
+
'IconCopperCrm',
|
|
14
|
+
'IconDialpadAi',
|
|
15
|
+
'IconDinersClub',
|
|
16
|
+
'IconDiscover',
|
|
17
|
+
'IconEvernote',
|
|
18
|
+
'IconFacebook',
|
|
19
|
+
'IconFreshsalesCrm',
|
|
20
|
+
'IconFront',
|
|
21
|
+
'IconGmail',
|
|
22
|
+
'IconGoogleBusinessMessaging',
|
|
23
|
+
'IconGoogleCalendar',
|
|
24
|
+
'IconGoogleDocs',
|
|
25
|
+
'IconGoogleDrive',
|
|
26
|
+
'IconGoogleGlyph',
|
|
27
|
+
'IconGreenhouse',
|
|
28
|
+
'IconHighfive',
|
|
29
|
+
'IconHubspot',
|
|
30
|
+
'IconInstagram',
|
|
31
|
+
'IconIntercom',
|
|
32
|
+
'IconJcb',
|
|
33
|
+
'IconJiraServiceDesk',
|
|
34
|
+
'IconLineMessenger',
|
|
35
|
+
'IconLinkedin',
|
|
36
|
+
'IconMaestro',
|
|
37
|
+
'IconMastercard',
|
|
38
|
+
'IconMessenger',
|
|
39
|
+
'IconMicrosoftDynamics365',
|
|
40
|
+
'IconMicrosoftTeams',
|
|
41
|
+
'IconMicrosoft',
|
|
42
|
+
'IconMiro',
|
|
43
|
+
'IconMondayCom',
|
|
44
|
+
'IconOffice365',
|
|
45
|
+
'IconPipedrive',
|
|
46
|
+
'IconPlayStoreBadge',
|
|
47
|
+
'IconSalesforceGlyph',
|
|
48
|
+
'IconSalesforceLogo',
|
|
49
|
+
'IconServicenow',
|
|
50
|
+
'IconSlack',
|
|
51
|
+
'IconSnapchat',
|
|
52
|
+
'IconTelegram',
|
|
53
|
+
'IconTiktok',
|
|
54
|
+
'IconToggl',
|
|
55
|
+
'IconTwitter',
|
|
56
|
+
'IconUnionPay',
|
|
57
|
+
'IconViber',
|
|
58
|
+
'IconVisa',
|
|
59
|
+
'IconWeChat',
|
|
60
|
+
'IconWhatsapp',
|
|
61
|
+
'IconZendesk',
|
|
62
|
+
'IconZohoCrm',
|
|
63
|
+
'IconZohoDesk',
|
|
64
|
+
'IconZoho',
|
|
65
|
+
'IconZoom',
|
|
66
|
+
];
|
|
67
|
+
let totalIconsCount = 0;
|
|
68
|
+
|
|
69
|
+
function isBrandIcon (source) {
|
|
70
|
+
const iconName = source.split('/').pop().slice(0, -2);
|
|
71
|
+
return brandIconsList.includes(iconName);
|
|
72
|
+
}
|
|
73
|
+
const main = (files, noLineNumbers) => {
|
|
74
|
+
try {
|
|
75
|
+
for (const file of files) {
|
|
76
|
+
const data = fs.readFileSync(file, 'utf8');
|
|
77
|
+
const lines = data.split('\n');
|
|
78
|
+
let iconCount = 0;
|
|
79
|
+
|
|
80
|
+
for (const [lineNumber, line] of lines.entries()) {
|
|
81
|
+
const iconMatch = iconRegex.exec(line);
|
|
82
|
+
// If import doesn't match or is a brand or spot icon, continue
|
|
83
|
+
if (!iconMatch ||
|
|
84
|
+
iconMatch.input.includes('/brand/') ||
|
|
85
|
+
iconMatch.input.includes('/spot/') ||
|
|
86
|
+
isBrandIcon(iconMatch.input)) continue;
|
|
87
|
+
|
|
88
|
+
if (!noLineNumbers) {
|
|
89
|
+
console.log(`\tdeprecated icon usage found on line ${lineNumber + 1}: ${iconMatch.input}`);
|
|
90
|
+
}
|
|
91
|
+
iconCount++;
|
|
92
|
+
totalIconsCount++;
|
|
93
|
+
}
|
|
94
|
+
if (iconCount > 0) {
|
|
95
|
+
console.log(`${file}: ${iconCount} Deprecated icons found`);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
console.log(`Found ${totalIconsCount} total deprecated icons usage in this directory.`);
|
|
99
|
+
} catch (err) {
|
|
100
|
+
console.error(err);
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
module.exports = main;
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
/* Will search the files in the provided directory for any properties that are not set to dialtone values.
|
|
4
|
+
It does this by simply checking whether the property is set to a less @variable or CSS var such as var(--val).
|
|
5
|
+
It does not compare to an actual list of dialtone token values so it is not perfect, and sometimes gives false
|
|
6
|
+
positives. This will however give a pretty good idea of where dialtone values aren't being used that should.
|
|
7
|
+
|
|
8
|
+
Searches some key properties by default as shown in the defaultSearch array below. You are however not limited to
|
|
9
|
+
this, you can make this application search any css property you wish. See the below options or run this application
|
|
10
|
+
with the -h switch for more details. */
|
|
11
|
+
|
|
12
|
+
const path = require('path');
|
|
13
|
+
const fs = require('fs');
|
|
14
|
+
const { exit } = require('process');
|
|
15
|
+
const { docopt } = require('docopt');
|
|
16
|
+
const nonDialtoneProperties = require('./non_dialtone_properties');
|
|
17
|
+
const deprecatedIcons = require('./deprecated_icons');
|
|
18
|
+
|
|
19
|
+
const doc = `
|
|
20
|
+
Usage:
|
|
21
|
+
./dialtone_health_check <path> [options] (--icons|--properties) [<properties>]
|
|
22
|
+
|
|
23
|
+
Examples:
|
|
24
|
+
./dialtone_health_check <path> --ext=vue,js --no-line-numbers --icons
|
|
25
|
+
./dialtone_health_check <path> --ext=vue,js --properties color,background-color
|
|
26
|
+
./dialtone_health_check <path> --ext=vue,js --icons --properties color,background-color
|
|
27
|
+
|
|
28
|
+
Arguments:
|
|
29
|
+
<properties> CSS Properties to search. Default properties if list is not provided:
|
|
30
|
+
color,background-color,border-color,font-family
|
|
31
|
+
<path> The directory to recursively search all files in.
|
|
32
|
+
|
|
33
|
+
Options:
|
|
34
|
+
-p --properties Verify the usage of non-dialtone properties.
|
|
35
|
+
-i --icons Verify the status of icons migration.
|
|
36
|
+
-h --help Show this screen.
|
|
37
|
+
--ext=<ext> Filter by file extension. comma separate to filter multiple. ex: js,vue
|
|
38
|
+
--no-line-numbers Only output files and their total count, do not output individual instances and
|
|
39
|
+
their line number.
|
|
40
|
+
`;
|
|
41
|
+
const options = docopt(doc);
|
|
42
|
+
const extensionFilters = options['--ext']?.split(',') ?? [''];
|
|
43
|
+
const searchProperties = options['--properties'];
|
|
44
|
+
const properties = options['<properties>']?.split(',');
|
|
45
|
+
const noLineNumbers = options['--no-line-numbers'];
|
|
46
|
+
const searchIcons = options['--icons'];
|
|
47
|
+
const files = [];
|
|
48
|
+
|
|
49
|
+
function fromDir (startPath, fileExtension) {
|
|
50
|
+
if (!fs.existsSync(startPath)) {
|
|
51
|
+
console.error('Directory not found');
|
|
52
|
+
exit(1);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
const results = [];
|
|
56
|
+
const files = fs.readdirSync(startPath);
|
|
57
|
+
for (let i = 0; i < files.length; i++) {
|
|
58
|
+
const filename = path.join(startPath, files[i]);
|
|
59
|
+
const stat = fs.lstatSync(filename);
|
|
60
|
+
if (stat.isDirectory()) {
|
|
61
|
+
results.push(...fromDir(filename, fileExtension)); // recurse
|
|
62
|
+
} else if (filename.endsWith(fileExtension)) {
|
|
63
|
+
results.push(filename);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
return results;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
extensionFilters.forEach(extension => {
|
|
70
|
+
files.push(...fromDir(options['<path>'], extension));
|
|
71
|
+
});
|
|
72
|
+
if (files.length <= 0) {
|
|
73
|
+
console.error('No files found in directory');
|
|
74
|
+
exit(1);
|
|
75
|
+
}
|
|
76
|
+
if (!searchProperties && !searchIcons) {
|
|
77
|
+
console.error('You must set at least one flag [--icons|--properties]');
|
|
78
|
+
exit(1);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
searchProperties && nonDialtoneProperties(properties, files, noLineNumbers);
|
|
82
|
+
searchIcons && deprecatedIcons(files, noLineNumbers);
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
const fs = require('fs');
|
|
2
|
+
const defaultSearch = [
|
|
3
|
+
'color',
|
|
4
|
+
'background-color',
|
|
5
|
+
'border-color',
|
|
6
|
+
'font-family',
|
|
7
|
+
];
|
|
8
|
+
let totalPropertiesCount = 0;
|
|
9
|
+
|
|
10
|
+
const main = (props = defaultSearch, files, noLineNumbers) => {
|
|
11
|
+
const regex = props.map(property => {
|
|
12
|
+
return new RegExp(`^\\s*${property}:\\s(?:(?!var\\(--))(?:(?!@)).*`, 'gm');
|
|
13
|
+
});
|
|
14
|
+
try {
|
|
15
|
+
for (const file of files) {
|
|
16
|
+
const data = fs.readFileSync(file, 'utf8');
|
|
17
|
+
const lines = data.split('\n');
|
|
18
|
+
let propertiesMatch;
|
|
19
|
+
let propertiesCount = 0;
|
|
20
|
+
|
|
21
|
+
for (const [lineNumber, line] of lines.entries()) {
|
|
22
|
+
regex.forEach(re => {
|
|
23
|
+
// eslint-disable-next-line no-cond-assign
|
|
24
|
+
while (propertiesMatch = re.exec(line)) {
|
|
25
|
+
if (!noLineNumbers) {
|
|
26
|
+
console.log(`\tnon-dialtone property found on line ${lineNumber + 1}: ${propertiesMatch}`);
|
|
27
|
+
}
|
|
28
|
+
propertiesCount++;
|
|
29
|
+
totalPropertiesCount++;
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
if (propertiesCount > 0) {
|
|
34
|
+
console.log(`${file}: ${propertiesCount}`);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
console.log(`Found ${totalPropertiesCount} total ${props.join(', ')} \
|
|
38
|
+
CSS properties that are not dialtone in this directory.`);
|
|
39
|
+
} catch (err) {
|
|
40
|
+
console.error(err);
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
module.exports = main;
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
--banner-color-background: var(--bgc-secondary);
|
|
19
19
|
--banner-color-text: var(--fc-primary);
|
|
20
20
|
--notice-color-icon: var(--toast-color-text);
|
|
21
|
-
--banner-color-border:
|
|
21
|
+
--banner-color-border: hsla(var(--black-900-hsl) / 0.1);
|
|
22
22
|
--banner-font-size: var(--fs-200);
|
|
23
23
|
--banner-line-height: var(--lh-200);
|
|
24
24
|
--banner-dialog-padding-y: var(--space-400);
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
font-size: var(--banner-font-size);
|
|
38
38
|
line-height: var(--banner-line-height);
|
|
39
39
|
background-color: var(--banner-color-background);
|
|
40
|
+
border-bottom: 1px solid var(--banner-color-border);
|
|
40
41
|
border-radius: 0;
|
|
41
42
|
box-shadow: none;
|
|
42
43
|
|
|
@@ -76,7 +77,6 @@
|
|
|
76
77
|
min-height: 100%;
|
|
77
78
|
margin: 0 auto;
|
|
78
79
|
padding: var(--banner-dialog-padding-y) var(--banner-dialog-padding-x);
|
|
79
|
-
border-bottom: var(--banner-color-border);
|
|
80
80
|
|
|
81
81
|
.d-notice__content {
|
|
82
82
|
flex-direction: row;
|
|
@@ -171,6 +171,26 @@
|
|
|
171
171
|
border-radius: var(--size-500) var(--size-500) 0 0;
|
|
172
172
|
box-shadow: var(--modal-dialog-shadow);
|
|
173
173
|
|
|
174
|
+
&--warning {
|
|
175
|
+
--modal-banner-color-background: var(--bgc-warning);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
&--info {
|
|
179
|
+
--modal-banner-color-background: var(--bgc-info);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
&--critical {
|
|
183
|
+
--modal-banner-color-background: var(--bgc-critical);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
&--success {
|
|
187
|
+
--modal-banner-color-background: var(--bgc-success);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
&--general {
|
|
191
|
+
--modal-banner-color-background: var(--bgc-secondary);
|
|
192
|
+
}
|
|
193
|
+
|
|
174
194
|
&::before {
|
|
175
195
|
// 🤦 don't ask. or do, i'm not even sorry.
|
|
176
196
|
position: absolute;
|
|
@@ -13,10 +13,8 @@
|
|
|
13
13
|
// • LABELS
|
|
14
14
|
// • CHECKBOXES
|
|
15
15
|
// - Modifications
|
|
16
|
-
// - Validation States
|
|
17
16
|
// • RADIOS
|
|
18
17
|
// - Modifications
|
|
19
|
-
// - Validation States
|
|
20
18
|
//
|
|
21
19
|
// ============================================================================
|
|
22
20
|
// $ RADIOS & CHECKBOXES
|
|
@@ -29,7 +27,7 @@
|
|
|
29
27
|
--check-radio-color: var(--purple-400);
|
|
30
28
|
--check-radio-color-border: var(--black-400);
|
|
31
29
|
--check-radio-color-border-disabled: hsla(var(--black-900-hsl) / 0.09);
|
|
32
|
-
--check-radio-color-background: var(--
|
|
30
|
+
--check-radio-color-background: hsla(var(--black-900-hsl) / 0.03);
|
|
33
31
|
--check-radio-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
|
|
34
32
|
--check-radio-border-width: calc(var(--size-100) + calc(var(--size-100) / 2)); // 1.5
|
|
35
33
|
|
|
@@ -209,76 +207,3 @@
|
|
|
209
207
|
}
|
|
210
208
|
}
|
|
211
209
|
}
|
|
212
|
-
|
|
213
|
-
// $$ CHECKBOX VALIDATION STATES
|
|
214
|
-
// ----------------------------------------------------------------------------
|
|
215
|
-
.d-checkbox--warning {
|
|
216
|
-
--check-radio-color: var(--gold-500);
|
|
217
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
.d-checkbox--error {
|
|
221
|
-
--check-radio-color: var(--red-300);
|
|
222
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
.d-checkbox--success {
|
|
226
|
-
--check-radio-color: var(--green-400);
|
|
227
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
// ============================================================================
|
|
231
|
-
// $ RADIOS
|
|
232
|
-
// ----------------------------------------------------------------------------
|
|
233
|
-
.d-radio {
|
|
234
|
-
@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
|
|
235
|
-
border-radius: var(--br-circle);
|
|
236
|
-
|
|
237
|
-
// Disabled
|
|
238
|
-
&[disabled],
|
|
239
|
-
&--disabled {
|
|
240
|
-
--check-radio-color: var(--fc-disabled);
|
|
241
|
-
--check-radio-color-border: var(--check-radio-color-border-disabled);
|
|
242
|
-
--check-radio-color-background: var(--check-radio-color-background-disabled);
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
&:focus-visible,
|
|
246
|
-
&:checked:focus-visible {
|
|
247
|
-
box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--size-200) var(--white);
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
&:checked {
|
|
251
|
-
--check-radio-color-background: var(--check-radio-color);
|
|
252
|
-
|
|
253
|
-
box-shadow: inset 0 0 0 var(--size-200) var(--white);
|
|
254
|
-
|
|
255
|
-
// Disabled
|
|
256
|
-
&[disabled] {
|
|
257
|
-
--check-radio-color-background: var(--black-400);
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
&--disabled:checked {
|
|
262
|
-
--check-radio-color-border: var(--check-radio-color-border-disabled);
|
|
263
|
-
--check-radio-color-background: var(--black-400);
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
// $$ RADIO VALIDATION STATES
|
|
270
|
-
// ----------------------------------------------------------------------------
|
|
271
|
-
.d-radio--warning {
|
|
272
|
-
--check-radio-color: var(--gold-500);
|
|
273
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
.d-radio--error {
|
|
277
|
-
--check-radio-color: var(--red-300);
|
|
278
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
.d-radio--success {
|
|
282
|
-
--check-radio-color: var(--green-400);
|
|
283
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
284
|
-
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
//
|
|
2
|
+
// DIALTONE
|
|
3
|
+
// COMPONENTS: Root Layout
|
|
4
|
+
//
|
|
5
|
+
// These are the styles for root layout for Dialpad's design system Dialtone.
|
|
6
|
+
// For further documentation of these and other classes,
|
|
7
|
+
// visit https://dialpad.design/components/root-layout.html
|
|
8
|
+
//
|
|
9
|
+
// TABLE OF CONTENTS
|
|
10
|
+
// • BASE STYLE
|
|
11
|
+
//
|
|
12
|
+
// ============================================================================
|
|
13
|
+
// $ BASE STYLE
|
|
14
|
+
// ----------------------------------------------------------------------------
|
|
15
|
+
.d-root-layout {
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
height: 100vh;
|
|
19
|
+
}
|
|
@@ -603,7 +603,7 @@ body {
|
|
|
603
603
|
--banner-color-background: var(--bgc-secondary);
|
|
604
604
|
--banner-color-text: var(--fc-primary);
|
|
605
605
|
--notice-color-icon: var(--toast-color-text);
|
|
606
|
-
--banner-color-border:
|
|
606
|
+
--banner-color-border: hsla(var(--black-900-hsl) / 0.1);
|
|
607
607
|
--banner-font-size: var(--fs-200);
|
|
608
608
|
--banner-line-height: var(--lh-200);
|
|
609
609
|
--banner-dialog-padding-y: var(--space-400);
|
|
@@ -621,6 +621,7 @@ body {
|
|
|
621
621
|
font-size: var(--banner-font-size);
|
|
622
622
|
line-height: var(--banner-line-height);
|
|
623
623
|
background-color: var(--banner-color-background);
|
|
624
|
+
border-bottom: 1px solid var(--banner-color-border);
|
|
624
625
|
border-radius: 0;
|
|
625
626
|
box-shadow: none;
|
|
626
627
|
}
|
|
@@ -649,7 +650,6 @@ body {
|
|
|
649
650
|
min-height: 100%;
|
|
650
651
|
margin: 0 auto;
|
|
651
652
|
padding: var(--banner-dialog-padding-y) var(--banner-dialog-padding-x);
|
|
652
|
-
border-bottom: var(--banner-color-border);
|
|
653
653
|
}
|
|
654
654
|
.d-banner__dialog .d-notice__content {
|
|
655
655
|
flex-direction: row;
|
|
@@ -2101,6 +2101,21 @@ legend .d-label {
|
|
|
2101
2101
|
border-radius: var(--size-500) var(--size-500) 0 0;
|
|
2102
2102
|
box-shadow: var(--modal-dialog-shadow);
|
|
2103
2103
|
}
|
|
2104
|
+
.d-modal__banner--warning {
|
|
2105
|
+
--modal-banner-color-background: var(--bgc-warning);
|
|
2106
|
+
}
|
|
2107
|
+
.d-modal__banner--info {
|
|
2108
|
+
--modal-banner-color-background: var(--bgc-info);
|
|
2109
|
+
}
|
|
2110
|
+
.d-modal__banner--critical {
|
|
2111
|
+
--modal-banner-color-background: var(--bgc-critical);
|
|
2112
|
+
}
|
|
2113
|
+
.d-modal__banner--success {
|
|
2114
|
+
--modal-banner-color-background: var(--bgc-success);
|
|
2115
|
+
}
|
|
2116
|
+
.d-modal__banner--general {
|
|
2117
|
+
--modal-banner-color-background: var(--bgc-secondary);
|
|
2118
|
+
}
|
|
2104
2119
|
.d-modal__banner::before {
|
|
2105
2120
|
position: absolute;
|
|
2106
2121
|
right: 0;
|
|
@@ -2500,7 +2515,7 @@ body {
|
|
|
2500
2515
|
--check-radio-color: var(--purple-400);
|
|
2501
2516
|
--check-radio-color-border: var(--black-400);
|
|
2502
2517
|
--check-radio-color-border-disabled: hsla(var(--black-900-hsl) / 0.09);
|
|
2503
|
-
--check-radio-color-background: var(--
|
|
2518
|
+
--check-radio-color-background: hsla(var(--black-900-hsl) / 0.03);
|
|
2504
2519
|
--check-radio-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
|
|
2505
2520
|
--check-radio-border-width: calc(var(--size-100) + calc(var(--size-100) / 2));
|
|
2506
2521
|
flex: 0 auto;
|
|
@@ -2644,62 +2659,6 @@ body {
|
|
|
2644
2659
|
--check-radio-color-background: var(--check-radio-color-background-disabled);
|
|
2645
2660
|
}
|
|
2646
2661
|
}
|
|
2647
|
-
.d-checkbox--warning {
|
|
2648
|
-
--check-radio-color: var(--gold-500);
|
|
2649
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
2650
|
-
}
|
|
2651
|
-
.d-checkbox--error {
|
|
2652
|
-
--check-radio-color: var(--red-300);
|
|
2653
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
2654
|
-
}
|
|
2655
|
-
.d-checkbox--success {
|
|
2656
|
-
--check-radio-color: var(--green-400);
|
|
2657
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
2658
|
-
}
|
|
2659
|
-
@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
|
|
2660
|
-
.d-radio {
|
|
2661
|
-
border-radius: var(--br-circle);
|
|
2662
|
-
}
|
|
2663
|
-
.d-radio[disabled],
|
|
2664
|
-
.d-radio--disabled {
|
|
2665
|
-
--check-radio-color: var(--fc-disabled);
|
|
2666
|
-
--check-radio-color-border: var(--check-radio-color-border-disabled);
|
|
2667
|
-
--check-radio-color-background: var(--check-radio-color-background-disabled);
|
|
2668
|
-
}
|
|
2669
|
-
.d-radio.focus-visible.js-focus-visible,
|
|
2670
|
-
.js-focus-visible .d-radio.focus-visible,
|
|
2671
|
-
.d-radio:checked.focus-visible.js-focus-visible,
|
|
2672
|
-
.js-focus-visible .d-radio:checked.focus-visible {
|
|
2673
|
-
box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--size-200) var(--white);
|
|
2674
|
-
}
|
|
2675
|
-
.d-radio:focus-visible,
|
|
2676
|
-
.d-radio:checked:focus-visible {
|
|
2677
|
-
box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--size-200) var(--white);
|
|
2678
|
-
}
|
|
2679
|
-
.d-radio:checked {
|
|
2680
|
-
--check-radio-color-background: var(--check-radio-color);
|
|
2681
|
-
box-shadow: inset 0 0 0 var(--size-200) var(--white);
|
|
2682
|
-
}
|
|
2683
|
-
.d-radio:checked[disabled] {
|
|
2684
|
-
--check-radio-color-background: var(--black-400);
|
|
2685
|
-
}
|
|
2686
|
-
.d-radio--disabled:checked {
|
|
2687
|
-
--check-radio-color-border: var(--check-radio-color-border-disabled);
|
|
2688
|
-
--check-radio-color-background: var(--black-400);
|
|
2689
|
-
}
|
|
2690
|
-
}
|
|
2691
|
-
.d-radio--warning {
|
|
2692
|
-
--check-radio-color: var(--gold-500);
|
|
2693
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
2694
|
-
}
|
|
2695
|
-
.d-radio--error {
|
|
2696
|
-
--check-radio-color: var(--red-300);
|
|
2697
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
2698
|
-
}
|
|
2699
|
-
.d-radio--success {
|
|
2700
|
-
--check-radio-color: var(--green-400);
|
|
2701
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
2702
|
-
}
|
|
2703
2662
|
.d-select {
|
|
2704
2663
|
--select-color-border: var(--black-500);
|
|
2705
2664
|
--select-notch-position-right: calc(var(--size-300) * 2);
|
|
@@ -3516,6 +3475,11 @@ body {
|
|
|
3516
3475
|
.d-icon--size-100 {
|
|
3517
3476
|
--icon-size: var(--icon-size-100);
|
|
3518
3477
|
}
|
|
3478
|
+
.d-root-layout {
|
|
3479
|
+
display: flex;
|
|
3480
|
+
flex-direction: column;
|
|
3481
|
+
height: 100vh;
|
|
3482
|
+
}
|
|
3519
3483
|
.d-bgg-from-black-600,
|
|
3520
3484
|
.h\:d-bgg-from-black-600:hover,
|
|
3521
3485
|
.f\:d-bgg-from-black-600:focus {
|