@dialpad/dialtone-css 1.0.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.
Files changed (134) hide show
  1. package/CHANGELOG.json +1 -0
  2. package/LICENSE.md +21 -0
  3. package/README.md +64 -0
  4. package/lib/build/favicons/dialpad/favicon-beta-notification__512.png +0 -0
  5. package/lib/build/favicons/dialpad/favicon-beta__512.png +0 -0
  6. package/lib/build/favicons/dialpad/favicon-csr__512.png +0 -0
  7. package/lib/build/favicons/dialpad/favicon-notification__512.png +0 -0
  8. package/lib/build/favicons/dialpad/favicon-staging-notification__512.png +0 -0
  9. package/lib/build/favicons/dialpad/favicon-staging__512.png +0 -0
  10. package/lib/build/favicons/dialpad/favicon__512.png +0 -0
  11. package/lib/build/favicons/favicon-dialtone__512.png +0 -0
  12. package/lib/build/favicons/uberconference/favicon-uberconference__512.png +0 -0
  13. package/lib/build/fonts/Archivo-Bold.woff2 +0 -0
  14. package/lib/build/fonts/Archivo-Regular.woff2 +0 -0
  15. package/lib/build/fonts/Archivo-SemiBold.woff2 +0 -0
  16. package/lib/build/fonts/ArchivoExpanded-SemiBold.woff2 +0 -0
  17. package/lib/build/fonts/ArchivoSemiExpanded-Medium.woff2 +0 -0
  18. package/lib/build/fonts/ArchivoSemiExpanded-SemiBold.woff2 +0 -0
  19. package/lib/build/js/dialtone_health_check/deprecated_icons.cjs +105 -0
  20. package/lib/build/js/dialtone_health_check/index.cjs +82 -0
  21. package/lib/build/js/dialtone_health_check/non_dialtone_properties.cjs +44 -0
  22. package/lib/build/js/dialtone_migration_helper/configs/box-shadows.mjs +19 -0
  23. package/lib/build/js/dialtone_migration_helper/configs/colors.mjs +69 -0
  24. package/lib/build/js/dialtone_migration_helper/configs/fonts.mjs +49 -0
  25. package/lib/build/js/dialtone_migration_helper/configs/size-and-space.mjs +124 -0
  26. package/lib/build/js/dialtone_migration_helper/helpers.mjs +212 -0
  27. package/lib/build/js/dialtone_migration_helper/index.mjs +135 -0
  28. package/lib/build/less/components/avatar.less +169 -0
  29. package/lib/build/less/components/badge.less +139 -0
  30. package/lib/build/less/components/banner.less +77 -0
  31. package/lib/build/less/components/breadcrumbs.less +88 -0
  32. package/lib/build/less/components/button.less +554 -0
  33. package/lib/build/less/components/card.less +56 -0
  34. package/lib/build/less/components/chip.less +192 -0
  35. package/lib/build/less/components/codeblock.less +26 -0
  36. package/lib/build/less/components/collapsible.less +33 -0
  37. package/lib/build/less/components/combobox.less +28 -0
  38. package/lib/build/less/components/datepicker.less +146 -0
  39. package/lib/build/less/components/emoji-picker.less +223 -0
  40. package/lib/build/less/components/forms.less +153 -0
  41. package/lib/build/less/components/icon.less +63 -0
  42. package/lib/build/less/components/image-viewer.less +35 -0
  43. package/lib/build/less/components/input.less +321 -0
  44. package/lib/build/less/components/item-layout.less +53 -0
  45. package/lib/build/less/components/keyboard-shortcut.less +39 -0
  46. package/lib/build/less/components/link.less +130 -0
  47. package/lib/build/less/components/list-group.less +48 -0
  48. package/lib/build/less/components/list-item-group.less +17 -0
  49. package/lib/build/less/components/modal.less +340 -0
  50. package/lib/build/less/components/notice.less +171 -0
  51. package/lib/build/less/components/pagination.less +41 -0
  52. package/lib/build/less/components/popover.less +99 -0
  53. package/lib/build/less/components/presence.less +60 -0
  54. package/lib/build/less/components/radio-checkbox.less +278 -0
  55. package/lib/build/less/components/root-layout.less +125 -0
  56. package/lib/build/less/components/selects.less +152 -0
  57. package/lib/build/less/components/skeleton.less +101 -0
  58. package/lib/build/less/components/stack.less +129 -0
  59. package/lib/build/less/components/tab-panel.less +15 -0
  60. package/lib/build/less/components/table.less +118 -0
  61. package/lib/build/less/components/tabs.less +219 -0
  62. package/lib/build/less/components/toast.less +120 -0
  63. package/lib/build/less/components/toggle.less +173 -0
  64. package/lib/build/less/components/tooltip.less +267 -0
  65. package/lib/build/less/dialtone-globals.less +45 -0
  66. package/lib/build/less/dialtone-reset.less +362 -0
  67. package/lib/build/less/dialtone-variables.less +16 -0
  68. package/lib/build/less/dialtone.less +71 -0
  69. package/lib/build/less/themes/default.less +83 -0
  70. package/lib/build/less/themes/example.less +89 -0
  71. package/lib/build/less/utilities/backgrounds.less +139 -0
  72. package/lib/build/less/utilities/borders.less +196 -0
  73. package/lib/build/less/utilities/colors.less +122 -0
  74. package/lib/build/less/utilities/effects.less +210 -0
  75. package/lib/build/less/utilities/flex.less +227 -0
  76. package/lib/build/less/utilities/grid.less +244 -0
  77. package/lib/build/less/utilities/interactivity.less +69 -0
  78. package/lib/build/less/utilities/layout.less +146 -0
  79. package/lib/build/less/utilities/lint-staged.config.cjs +5 -0
  80. package/lib/build/less/utilities/sizing.less +152 -0
  81. package/lib/build/less/utilities/spacing.less +107 -0
  82. package/lib/build/less/utilities/typography.less +300 -0
  83. package/lib/build/less/variables/layout.less +19 -0
  84. package/lib/build/less/variables/sizes.less +64 -0
  85. package/lib/build/less/variables/typography.less +46 -0
  86. package/lib/build/less/variables/visual-styles.less +77 -0
  87. package/lib/build/svg/spot/blank-space.svg +35 -0
  88. package/lib/build/svg/spot/browser-list-callout.svg +27 -0
  89. package/lib/build/svg/spot/browser-table-graph.svg +37 -0
  90. package/lib/build/svg/spot/female-laptop-typing.svg +21 -0
  91. package/lib/build/svg/spot/file-upload.svg +50 -0
  92. package/lib/build/svg/spot/male-laptop-typing.svg +24 -0
  93. package/lib/build/svg/spot/mind.svg +58 -0
  94. package/lib/build/svg/spot/publish.svg +54 -0
  95. package/lib/build/svg/spot/vector-vortex.svg +53 -0
  96. package/lib/build/svg/spot/wireless-screenshare.svg +30 -0
  97. package/lib/dist/css/dialtone.css +18711 -0
  98. package/lib/dist/css/dialtone.min.css +1 -0
  99. package/lib/dist/fonts/Archivo-Bold.woff2 +0 -0
  100. package/lib/dist/fonts/Archivo-Regular.woff2 +0 -0
  101. package/lib/dist/fonts/Archivo-SemiBold.woff2 +0 -0
  102. package/lib/dist/fonts/ArchivoExpanded-SemiBold.woff2 +0 -0
  103. package/lib/dist/fonts/ArchivoSemiExpanded-Medium.woff2 +0 -0
  104. package/lib/dist/fonts/ArchivoSemiExpanded-SemiBold.woff2 +0 -0
  105. package/lib/dist/js/dialtone_health_check/deprecated_icons.cjs +105 -0
  106. package/lib/dist/js/dialtone_health_check/index.cjs +82 -0
  107. package/lib/dist/js/dialtone_health_check/non_dialtone_properties.cjs +44 -0
  108. package/lib/dist/js/dialtone_migration_helper/configs/box-shadows.mjs +19 -0
  109. package/lib/dist/js/dialtone_migration_helper/configs/colors.mjs +69 -0
  110. package/lib/dist/js/dialtone_migration_helper/configs/fonts.mjs +49 -0
  111. package/lib/dist/js/dialtone_migration_helper/configs/size-and-space.mjs +124 -0
  112. package/lib/dist/js/dialtone_migration_helper/helpers.mjs +212 -0
  113. package/lib/dist/js/dialtone_migration_helper/index.mjs +135 -0
  114. package/lib/dist/svg/spot/blank-space.svg +1 -0
  115. package/lib/dist/svg/spot/browser-list-callout.svg +1 -0
  116. package/lib/dist/svg/spot/browser-table-graph.svg +1 -0
  117. package/lib/dist/svg/spot/female-laptop-typing.svg +1 -0
  118. package/lib/dist/svg/spot/file-upload.svg +1 -0
  119. package/lib/dist/svg/spot/male-laptop-typing.svg +1 -0
  120. package/lib/dist/svg/spot/mind.svg +1 -0
  121. package/lib/dist/svg/spot/publish.svg +1 -0
  122. package/lib/dist/svg/spot/vector-vortex.svg +1 -0
  123. package/lib/dist/svg/spot/wireless-screenshare.svg +1 -0
  124. package/lib/dist/vue/spot/SpotBlankSpace.vue +3 -0
  125. package/lib/dist/vue/spot/SpotBrowserListCallout.vue +3 -0
  126. package/lib/dist/vue/spot/SpotBrowserTableGraph.vue +3 -0
  127. package/lib/dist/vue/spot/SpotFemaleLaptopTyping.vue +3 -0
  128. package/lib/dist/vue/spot/SpotFileUpload.vue +3 -0
  129. package/lib/dist/vue/spot/SpotMaleLaptopTyping.vue +3 -0
  130. package/lib/dist/vue/spot/SpotMind.vue +3 -0
  131. package/lib/dist/vue/spot/SpotPublish.vue +3 -0
  132. package/lib/dist/vue/spot/SpotVectorVortex.vue +3 -0
  133. package/lib/dist/vue/spot/SpotWirelessScreenshare.vue +3 -0
  134. package/package.json +115 -0
package/LICENSE.md ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2022 Dialpad
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,64 @@
1
+ # Dialtone
2
+
3
+ This is the home for Dialtone, Dialpad's design system. It includes the resources needed to create consistent,
4
+ predictable interfaces that conform to Dialpad’s design principles, language, styles, and best practices.
5
+
6
+ ## Install Dialtone
7
+
8
+ ### Install it via NPM:
9
+
10
+ ```shell
11
+ npm install @dialpad/dialtone
12
+ ```
13
+
14
+ ### Import dialtone:
15
+
16
+ - CSS/LESS:
17
+
18
+ ```less
19
+ @import "node_modules/@dialpad/dialtone-css/lib/dist/css/dialtone.min.css";
20
+ ```
21
+
22
+ - Javascript:
23
+
24
+ ```js
25
+ import '@dialpad/dialtone-css/lib/dist/css/dialtone.min.css';
26
+ ```
27
+
28
+ ### Add dialtone's theme class to the `<body>`
29
+
30
+ - Light mode
31
+
32
+ ```html
33
+
34
+ <body class="dialtone-theme-light">...</body>
35
+ ```
36
+
37
+ - Dark mode
38
+
39
+ ```html
40
+
41
+ <body class="dialtone-theme-dark">...</body>
42
+ ```
43
+
44
+ This will define the Dialtone CSS variables for your desired theme.
45
+ It is required to do this for Dialtone to function.
46
+
47
+ ## Building Dialtone locally
48
+
49
+ To build Dialtone locally, visit
50
+ our [installation instructions](https://dialtone.dialpad.design/guides/getting-started/#build-dialtone-locally).
51
+
52
+ ## Contributing
53
+
54
+ If you're interested in contributing to Dialtone, please read our [contributing docs](.github/CONTRIBUTING.md) **before
55
+ submitting a pull request**.
56
+
57
+ ## Requesting features / reporting bugs
58
+
59
+ Requesting a feature or reporting a bug? Please do so at the below links:
60
+
61
+ - [Request Feature](https://dialpad.atlassian.net/secure/CreateIssue.jspa?issuetype=10975&pid=12508)
62
+ - [Report Bug](https://dialpad.atlassian.net/secure/CreateIssue.jspa?issuetype=1&pid=12508)
63
+
64
+ Please also feel free to contact us via the #dialtone Dialpad channel with any questions.
package/lib/build/js/dialtone_health_check/deprecated_icons.cjs ADDED
@@ -0,0 +1,105 @@
1
+ /* eslint-disable complexity */
2
+ const fs = require('fs');
3
+ const iconRegex = /.*@dialpad\/dialtone\/(vue\/.*|.+\.svg)/gim;
4
+ const brandIconsList = [
5
+ 'IconAirtable',
6
+ 'IconAmex',
7
+ 'IconAppStoreBadge',
8
+ 'IconApple',
9
+ 'IconAsana',
10
+ 'IconBrandDialpadMeetings',
11
+ 'IconBrandDialpad',
12
+ 'IconBullhorn',
13
+ 'IconClockify',
14
+ 'IconCopperCrm',
15
+ 'IconDialpadAi',
16
+ 'IconDinersClub',
17
+ 'IconDiscover',
18
+ 'IconEvernote',
19
+ 'IconFacebook',
20
+ 'IconFreshsalesCrm',
21
+ 'IconFront',
22
+ 'IconGmail',
23
+ 'IconGoogleBusinessMessaging',
24
+ 'IconGoogleCalendar',
25
+ 'IconGoogleDocs',
26
+ 'IconGoogleDrive',
27
+ 'IconGoogleGlyph',
28
+ 'IconGreenhouse',
29
+ 'IconHighfive',
30
+ 'IconHubspot',
31
+ 'IconInstagram',
32
+ 'IconIntercom',
33
+ 'IconJcb',
34
+ 'IconJiraServiceDesk',
35
+ 'IconLineMessenger',
36
+ 'IconLinkedin',
37
+ 'IconMaestro',
38
+ 'IconMastercard',
39
+ 'IconMessenger',
40
+ 'IconMicrosoftDynamics365',
41
+ 'IconMicrosoftTeams',
42
+ 'IconMicrosoft',
43
+ 'IconMiro',
44
+ 'IconMondayCom',
45
+ 'IconOffice365',
46
+ 'IconPipedrive',
47
+ 'IconPlayStoreBadge',
48
+ 'IconSalesforceGlyph',
49
+ 'IconSalesforceLogo',
50
+ 'IconServicenow',
51
+ 'IconSlack',
52
+ 'IconSnapchat',
53
+ 'IconTelegram',
54
+ 'IconTiktok',
55
+ 'IconToggl',
56
+ 'IconTwitter',
57
+ 'IconUnionPay',
58
+ 'IconViber',
59
+ 'IconVisa',
60
+ 'IconWeChat',
61
+ 'IconWhatsapp',
62
+ 'IconZendesk',
63
+ 'IconZohoCrm',
64
+ 'IconZohoDesk',
65
+ 'IconZoho',
66
+ 'IconZoom',
67
+ ];
68
+ let totalIconsCount = 0;
69
+
70
+ function isBrandIcon (source) {
71
+ const iconName = source.split('/').pop().slice(0, -2);
72
+ return brandIconsList.includes(iconName);
73
+ }
74
+ const main = (files, noLineNumbers) => {
75
+ try {
76
+ for (const file of files) {
77
+ const data = fs.readFileSync(file, 'utf8');
78
+ const lines = data.split('\n');
79
+ let iconCount = 0;
80
+
81
+ for (const [lineNumber, line] of lines.entries()) {
82
+ const iconMatch = iconRegex.exec(line);
83
+ // If import doesn't match or is a brand or spot icon, continue
84
+ if (!iconMatch ||
85
+ iconMatch.input.includes('/brand/') ||
86
+ iconMatch.input.includes('/spot/') ||
87
+ isBrandIcon(iconMatch.input)) continue;
88
+
89
+ if (!noLineNumbers) {
90
+ console.log(`\tdeprecated icon usage found on line ${lineNumber + 1}: ${iconMatch.input}`);
91
+ }
92
+ iconCount++;
93
+ totalIconsCount++;
94
+ }
95
+ if (iconCount > 0) {
96
+ console.log(`${file}: ${iconCount} Deprecated icons found`);
97
+ }
98
+ }
99
+ console.log(`Found ${totalIconsCount} total deprecated icons usage in this directory.`);
100
+ } catch (err) {
101
+ console.error(err);
102
+ }
103
+ };
104
+
105
+ module.exports = main;
package/lib/build/js/dialtone_health_check/index.cjs ADDED
@@ -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);
package/lib/build/js/dialtone_health_check/non_dialtone_properties.cjs ADDED
@@ -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;
package/lib/build/js/dialtone_migration_helper/configs/box-shadows.mjs ADDED
@@ -0,0 +1,19 @@
1
+ export default {
2
+ description:
3
+ 'Updates dialtone 7 variables to dialtone 8 design tokens.\n' +
4
+ '- Replaces var(--bs-{kind}) with var(--dt-shadow-{kind})\n\t' +
5
+ 'eg. var(--bs-sm) with var(--dt-shadow-small)\n' +
6
+ '- Replaces @bs-{kind} with var(--dt-shadow-{kind})\n\t' +
7
+ 'eg. @bs-card with var(--dt-shadow-card)\n',
8
+ patterns: ['**/*.{css,less,scss,sass,styl,html,vue,md}'],
9
+ expressions: [
10
+ // CSS variables
11
+ { from: /@bs-sm|var\(--bs-sm\)/gi, to: 'var(--dt-shadow-small)' },
12
+ { from: /@bs-md|var\(--bs-md\)/gi, to: 'var(--dt-shadow-medium)' },
13
+ { from: /@bs-lg|var\(--bs-lg\)/gi, to: 'var(--dt-shadow-large)' },
14
+ { from: /@bs-xl|var\(--bs-xl\)/gi, to: 'var(--dt-shadow-extra-large)' },
15
+ { from: /@bs-card|var\(--bs-card\)/gi, to: 'var(--dt-shadow-card)' },
16
+ { from: /@bs-focus-ring|var\(--bs-focus-ring\)/gi, to: 'var(--dt-shadow-focus)' },
17
+ { from: /@bs-focus-ring-inset|var\(--bs-focus-ring-inset\)/gi, to: 'var(--dt-shadow-focus-inset)' },
18
+ ],
19
+ };
package/lib/build/js/dialtone_migration_helper/configs/colors.mjs ADDED
@@ -0,0 +1,69 @@
1
+ export default {
2
+ description:
3
+ 'Updates dialtone 7 variables to dialtone 8 design tokens.\n' +
4
+ '- Replaces var(--{color}-{stop}) with var(--dt-color-{color}-{stop})\n\t' +
5
+ 'eg. var(--black-200) with var(--dt-color-black-200)\n' +
6
+ '- Replaces @{color}-{stop} with var(--dt-color-{color}-{stop})\n\t' +
7
+ 'eg. @red-100 with var(--dt-color-red-100)\n' +
8
+ '- Replaces var(--fc-{kind}) with var(--dt-color-foreground-{kind})\n\t' +
9
+ 'eg. var(--fc-success-inverted) with var(--dt-color-foreground-success-inverted)\n',
10
+ patterns: ['**/*.{css,less,scss,sass,styl,html,vue,md}'],
11
+ expressions: [
12
+ // ------------------------------------------------------------ //
13
+ // Colors //
14
+ // ------------------------------------------------------------ //
15
+ // LESS variables
16
+ {
17
+ from: /@(black|purple|magenta|gold|green|red|blue|tan)(-[1-9]00)/g,
18
+ to: 'var(--dt-color-$1$2)',
19
+ },
20
+ // Neutral LESS variables
21
+ {
22
+ from: /@(white|black)/g,
23
+ to: 'var(--dt-color-neutral-$1)',
24
+ },
25
+ // CSS variables
26
+ {
27
+ from: /var\(--(black|purple|orange|magenta|gold|green|red|blue|tan)(-[1-9]00)(-(h|s|l|hsl))?\)/g,
28
+ to: 'var(--dt-color-$1$2$3)',
29
+ },
30
+ // Neutral CSS variables
31
+ {
32
+ from: /var\(--(white|black)(-(h|s|l|hsl))?\)/g,
33
+ to: 'var(--dt-color-neutral-$1$2)',
34
+ },
35
+ // Background colors
36
+ {
37
+ // eslint-disable-next-line max-len
38
+ from: /var\(--bgc-(primary|secondary|moderate|bold|strong|contrast|critical|success|warning|info)(-(subtle|opaque|subtle-opaque|strong))?\)/g,
39
+ to: 'var(--dt-color-surface-$1$2)',
40
+ },
41
+ // Special Background color cases
42
+ {
43
+ // eslint-disable-next-line max-len
44
+ from: /var\(--bgc-(error|danger)(-(subtle|opaque|subtle-opaque|strong))?\)/g,
45
+ to: 'var(--dt-color-surface-critical$2)',
46
+ },
47
+ // Border colors
48
+ {
49
+ // eslint-disable-next-line max-len
50
+ from: /var\(--bc-(default|subtle|moderate|bold|focus|critical|success|warning|brand|ai|accent)(-(inverted|subtle|strong|subtle-inverted|strong-inverted))?\)/g,
51
+ to: 'var(--dt-color-border-$1$2)',
52
+ },
53
+ // Font colors
54
+ {
55
+ // eslint-disable-next-line max-len
56
+ from: /var\(--fc-(primary|secondary|tertiary|muted|placeholder|disabled|critical|success|warning)(-(strong|inverted|strong-inverted))?\)/g,
57
+ to: 'var(--dt-color-foreground-$1$2)',
58
+ },
59
+ // Special Font color cases
60
+ {
61
+ from: /var\(--fc-(error|danger)(-(strong|inverted|strong-inverted))?\)/g,
62
+ to: 'var(--dt-color-foreground-critical$2)',
63
+ },
64
+ {
65
+ from: /d-(fc|bc)-white/g,
66
+ to: 'd-$1-neutral-white',
67
+ },
68
+ ],
69
+ };
package/lib/build/js/dialtone_migration_helper/configs/fonts.mjs ADDED
@@ -0,0 +1,49 @@
1
+ export default {
2
+ description:
3
+ 'Updates dialtone 7 variables to dialtone 8 design tokens.\n' +
4
+ '- Replaces var(--fs-{stop}) with var(--dt-font-size-{stop})\n\t' +
5
+ 'eg. var(--fs-200) with var(--dt-font-size-200)\n' +
6
+ '- Replaces @fs-{stop} with var(--dt-font-size-{stop})\n\t' +
7
+ 'eg. @fs-100-tv with var(--dt-font-size-100-tv)\n' +
8
+ '- Replaces var(--fw-{kind}) with var(--dt-font-weight-{kind})\n\t' +
9
+ 'eg. var(--fw-medium) with var(--dt-font-weight-medium)\n' +
10
+ '- Replaces @fw-{kind} with var(--dt-font-weight-{kind})\n\t' +
11
+ 'eg. @fw-semibold with var(--dt-font-weight-semi-bold)\n' +
12
+ '- Replaces var(--lh-{stop}) with var(--dt-font-line-height-{stop})\n\t' +
13
+ 'eg. var(--lh-200) with var(--dt-font-line-height-200)\n' +
14
+ '- Replaces @lh-{stop} with var(--dt-font-line-height-{stop})\n\t' +
15
+ 'eg. @lh-100 with var(--dt-font-line-height-100)\n' +
16
+ '- Replaces var(--ff-{kind}) with var(--dt-font-family-{kind})\n\t' +
17
+ 'eg. var(--ff-mono) with var(--dt-font-family-mono)',
18
+ patterns: ['**/*.{css,less,scss,sass,styl,html,vue,md,json}'],
19
+ expressions: [
20
+ // ------------------------------------------------------------ //
21
+ // Fonts //
22
+ // ------------------------------------------------------------ //
23
+ // Size variables
24
+ {
25
+ from: /@fs(-[0-9]+)(-(mobile|tc8|tv))?|var\(--fs(-[0-9]+)(-(mobile|tc8|tv))?\)/g,
26
+ to: 'var(--dt-font-size$1$2$4$5)',
27
+ },
28
+ // Weight variables
29
+ {
30
+ from: /@fw-(normal|medium|bold)|var\(--fw-(normal|medium|bold)\)/g,
31
+ to: 'var(--dt-font-weight-$1$2)',
32
+ },
33
+ // Special weight case
34
+ {
35
+ from: /@fw-semibold|var\(--fw-semibold\)/g,
36
+ to: 'var(--dt-font-weight-semi-bold)',
37
+ },
38
+ // Line heights
39
+ {
40
+ from: /@lh(-[0-9]+)|var\(--lh(-[0-9]+)\)/g,
41
+ to: 'var(--dt-font-line-height$1$2)',
42
+ },
43
+ // Font family
44
+ {
45
+ from: /var\(--ff-(mono)\)/g,
46
+ to: 'var(--dt-font-family-$1)',
47
+ },
48
+ ],
49
+ };
package/lib/build/js/dialtone_migration_helper/configs/size-and-space.mjs ADDED
@@ -0,0 +1,124 @@
1
+ export default {
2
+ description:
3
+ 'Updates dialtone 7 variables to dialtone 8 design tokens.\n' +
4
+ '- Replaces var(--{size}-{stop}) with var(--dt-size-{stop})\n\t' +
5
+ 'eg. var(--size-200) with var(--dt-size-200)\n' +
6
+ '- Replaces @{size}{stop} with var(--dt-size-{stop})\n\t' +
7
+ 'eg. @size4 with var(--dt-size-300)\n' +
8
+ '- Replaces @icon{size} with var(--dt-icon-size-{stop})\n\t' +
9
+ 'eg. @icon12 with var(--dt-icon-size-100)\n' +
10
+ '- Replaces var(--su{stop}) with var(--dt-size-{stop})\n\t' +
11
+ 'eg. var(--su0) with var(--dt-size-0)\n' +
12
+ '- Replaces @su{stop} with var(--dt-size-{stop})\n\t' +
13
+ 'eg. @su8 with var(--dt-size-400)\n' +
14
+ '- Replaces var(--sun{stop}) with var(--dt-size-{stop}-negative)\n\t' +
15
+ 'eg. var(--sun1) with var(--dt-size-100-negative)\n' +
16
+ '- Replaces var(--br{stop}) with var(--dt-size-radius-{stop})\n\t' +
17
+ 'eg. var(--br4) with var(--dt-size-radius-300)\n' +
18
+ '- Replaces @br{stop} with var(--dt-size-radius-{stop})\n\t' +
19
+ 'eg. @br-pill with var(--dt-size-radius-pill)\n',
20
+ patterns: ['**/*.{css,less,scss,sass,styl,html,vue,md}'],
21
+ expressions: [
22
+ // ------------------------------------------------------------ //
23
+ // Size and Space //
24
+ // ------------------------------------------------------------ //
25
+ {
26
+ from: /var\(--(size|space)(-[0-9]+)(-negative)?\)/gi,
27
+ to: 'var(--dt-$1$2$3)',
28
+ },
29
+
30
+ // Size LESS variables
31
+ { from: /@size0\b|var\(--size0\)/g, to: 'var(--dt-size-0)' },
32
+ { from: /@size1\b|var\(--size1\)/g, to: 'var(--dt-size-100)' },
33
+ { from: /@size2\b|var\(--size2\)/g, to: 'var(--dt-size-200)' },
34
+ { from: /@size4\b|var\(--size4\)/g, to: 'var(--dt-size-300)' },
35
+ { from: /@size6\b|var\(--size6\)/g, to: 'var(--dt-size-350)' },
36
+ { from: /@size8\b|var\(--size8\)/g, to: 'var(--dt-size-400)' },
37
+ { from: /@size12\b|var\(--size12\)/g, to: 'var(--dt-size-450)' },
38
+ { from: /@size16\b|var\(--size16\)/g, to: 'var(--dt-size-500)' },
39
+ { from: /@size20\b|var\(--size20\)/g, to: 'var(--dt-size-525)' },
40
+ { from: /@size24\b|var\(--size24\)/g, to: 'var(--dt-size-550)' },
41
+ { from: /@size32\b|var\(--size32\)/g, to: 'var(--dt-size-600)' },
42
+ { from: /@size42\b|var\(--size42\)/g, to: 'var(--dt-size-625)' },
43
+ { from: /@size48\b|var\(--size48\)/g, to: 'var(--dt-size-650)' },
44
+ { from: /@size64\b|var\(--size64\)/g, to: 'var(--dt-size-700)' },
45
+ { from: /@size72\b|var\(--size72\)/g, to: 'var(--dt-size-720)' },
46
+ { from: /@size84\b|var\(--size84\)/g, to: 'var(--dt-size-730)' },
47
+ { from: /@size96\b|var\(--size96\)/g, to: 'var(--dt-size-750)' },
48
+ { from: /@size102\b|var\(--size102\)/g, to: 'var(--dt-size-760)' },
49
+ { from: /@size114\b|var\(--size114\)/g, to: 'var(--dt-size-775)' },
50
+ { from: /@size128\b|var\(--size128\)/g, to: 'var(--dt-size-800)' },
51
+ { from: /@size164\b|var\(--size164\)/g, to: 'var(--dt-size-825)' },
52
+ { from: /@size216\b|var\(--size216\)/g, to: 'var(--dt-size-875)' },
53
+ { from: /@size264\b|var\(--size264\)/g, to: 'var(--dt-size-905)' },
54
+ { from: /@size332\b|var\(--size332\)/g, to: 'var(--dt-size-925)' },
55
+ { from: /@size464\b|var\(--size464\)/g, to: 'var(--dt-size-975)' },
56
+ { from: /@size512\b|var\(--size512\)/g, to: 'var(--dt-size-1000)' },
57
+ { from: /@size628\b|var\(--size628\)/g, to: 'var(--dt-size-1020)' },
58
+ { from: /@size764\b|var\(--size764\)/g, to: 'var(--dt-size-1040)' },
59
+ { from: /@size828\b|var\(--size828\)/g, to: 'var(--dt-size-1060)' },
60
+ { from: /@size912\b|var\(--size912\)/g, to: 'var(--dt-size-1080)' },
61
+ { from: /@size1024\b|var\(--size1024\)/g, to: 'var(--dt-size-1100)' },
62
+ { from: /@size1140\b|var\(--size1140\)/g, to: 'var(--dt-size-1115)' },
63
+ { from: /@size1268\b|var\(--size1268\)/g, to: 'var(--dt-size-1120)' },
64
+ { from: /@size1340\b|var\(--size1340\)/g, to: 'var(--dt-size-1130)' },
65
+
66
+ // Icon variables
67
+ { from: /@icon12\b|var\(--icon12\)/g, to: 'var(--dt-icon-size-100)' },
68
+ { from: /@icon14\b|var\(--icon14\)/g, to: 'var(--dt-icon-size-200)' },
69
+ { from: /@icon16\b|var\(--icon16\)/g, to: 'var(--dt-size-500)' },
70
+ { from: /@icon18\b|var\(--icon18\)/g, to: 'var(--dt-icon-size-300)' },
71
+ { from: /@icon20\b|var\(--icon20\)/g, to: 'var(--dt-icon-size-400)' },
72
+ { from: /@icon24\b|var\(--icon24\)/g, to: 'var(--dt-icon-size-500)' },
73
+ { from: /@icon32\b|var\(--icon32\)/g, to: 'var(--dt-icon-size-600)' },
74
+ { from: /@icon48\b|var\(--icon48\)/g, to: 'var(--dt-size-650)' },
75
+ { from: /@icon64\b|var\(--icon64\)/g, to: 'var(--dt-size-700)' },
76
+ // Variable prefixed with negative, must go before positive spacing
77
+ { from: /-@su1\b|-var\(--su1\)|[^-]var\(--sun1\)/g, to: 'var(--dt-space-100-negative)' },
78
+ { from: /-@su2\b|-var\(--su2\)|[^-]var\(--sun2\)/g, to: 'var(--dt-space-200-negative)' },
79
+ { from: /-@su4\b|-var\(--su4\)|[^-]var\(--sun4\)/g, to: 'var(--dt-space-300-negative)' },
80
+ { from: /-@su6\b|-var\(--su6\)|[^-]var\(--sun6\)/g, to: 'var(--dt-space-350-negative)' },
81
+ { from: /-@su8\b|-var\(--su8\)|[^-]var\(--sun8\)/g, to: 'var(--dt-space-400-negative)' },
82
+ { from: /-@su12\b|-var\(--su12\)|[^-]var\(--sun12\)/g, to: 'var(--dt-space-450-negative)' },
83
+ { from: /-@su16\b|-var\(--su16\)|[^-]var\(--sun16\)/g, to: 'var(--dt-space-500-negative)' },
84
+ { from: /-@su24\b|-var\(--su24\)|[^-]var\(--sun24\)/g, to: 'var(--dt-space-550-negative)' },
85
+ { from: /-@su32\b|-var\(--su32\)|[^-]var\(--sun32\)/g, to: 'var(--dt-space-600-negative)' },
86
+ { from: /-@su48\b|-var\(--su48\)|[^-]var\(--sun48\)/g, to: 'var(--dt-space-650-negative)' },
87
+ { from: /-@su64\b|-var\(--su64\)|[^-]var\(--sun64\)/g, to: 'var(--dt-space-700-negative)' },
88
+ { from: /-@su72\b|-var\(--su72\)|[^-]var\(--sun72\)/g, to: 'var(--dt-space-720-negative)' },
89
+ { from: /-@su84\b|-var\(--su84\)|[^-]var\(--sun84\)/g, to: 'var(--dt-space-730-negative)' },
90
+ { from: /-@su96\b|-var\(--su96\)|[^-]var\(--sun96\)/g, to: 'var(--dt-space-750-negative)' },
91
+ { from: /-@su102\b|-var\(--su102\)|[^-]var\(--sun102\)/g, to: 'var(--dt-space-760-negative)' },
92
+ { from: /-@su114\b|-var\(--su114\)|[^-]var\(--sun114\)/g, to: 'var(--dt-space-775-negative)' },
93
+ { from: /-@su128\b|-var\(--su128\)|[^-]var\(--sun128\)/g, to: 'var(--dt-space-800-negative)' },
94
+ // Positive spacing
95
+ { from: /@su0\b|var\(--su0\)/g, to: 'var(--dt-space-0)' },
96
+ { from: /@su1\b|var\(--su1\)/g, to: 'var(--dt-space-100)' },
97
+ { from: /@su2\b|var\(--su2\)/g, to: 'var(--dt-space-200)' },
98
+ { from: /@su4\b|var\(--su4\)/g, to: 'var(--dt-space-300)' },
99
+ { from: /@su6\b|var\(--su6\)/g, to: 'var(--dt-space-350)' },
100
+ { from: /@su8\b|var\(--su8\)/g, to: 'var(--dt-space-400)' },
101
+ { from: /@su12\b|var\(--su12\)/g, to: 'var(--dt-space-450)' },
102
+ { from: /@su16\b|var\(--su16\)/g, to: 'var(--dt-space-500)' },
103
+ { from: /@su24\b|var\(--su24\)/g, to: 'var(--dt-space-550)' },
104
+ { from: /@su32\b|var\(--su32\)/g, to: 'var(--dt-space-600)' },
105
+ { from: /@su48\b|var\(--su48\)/g, to: 'var(--dt-space-650)' },
106
+ { from: /@su64\b|var\(--su64\)/g, to: 'var(--dt-space-700)' },
107
+ { from: /@su72\b|var\(--su72\)/g, to: 'var(--dt-space-720)' },
108
+ { from: /@su84\b|var\(--su84\)/g, to: 'var(--dt-space-730)' },
109
+ { from: /@su96\b|var\(--su96\)/g, to: 'var(--dt-space-750)' },
110
+ { from: /@su102\b|var\(--su102\)/g, to: 'var(--dt-space-760)' },
111
+ { from: /@su114\b|var\(--su114\)/g, to: 'var(--dt-space-775)' },
112
+ { from: /@su128\b|var\(--su128\)/g, to: 'var(--dt-space-800)' },
113
+ // Border radius
114
+ { from: /@br-(pill|circle)|var\(--br-(pill|circle)\)/g, to: 'var(--dt-size-radius-$1$2)' },
115
+ { from: /@br0|var\(--br0\)/g, to: 'var(--dt-size-radius-0)' },
116
+ { from: /@br2\b|var\(--br2\)/g, to: 'var(--dt-size-radius-200)' },
117
+ { from: /@br4|var\(--br4\)/g, to: 'var(--dt-size-radius-300)' },
118
+ { from: /@br8|var\(--br8\)/g, to: 'var(--dt-size-radius-400)' },
119
+ { from: /@br12|var\(--br12\)/g, to: 'var(--dt-size-450)' },
120
+ { from: /@br16|var\(--br16\)/g, to: 'var(--dt-size-radius-500)' },
121
+ { from: /@br24|var\(--br24\)/g, to: 'var(--dt-size-550)' },
122
+ { from: /@br32|var\(--br32\)/g, to: 'var(--dt-size-radius-600)' },
123
+ ],
124
+ };