@dialpad/dialtone 7.25.1 → 8.0.0-version8.2

package/lib/dist/js/dialtone_migration_helper/configs/box-shadows.mjs

@@ -0,0 +1,17 @@
+export default {
+  description:
+    'Updates dialtone 7 variables to dialtone 8 design tokens.\n' +
+    '- Replaces var(--bs-{kind}) with var(--dt-shadow-{kind})\n\t' +
+    'eg. var(--bs-sm) with var(--dt-shadow-small)\n',
+  patterns: ['**/*.{css,less,scss,sass,styl,html,vue,md}'],
+  expressions: [
+    // CSS variables
+    { from: /var\(--bs-sm\)/gi, to: 'var(--dt-shadow-small)' },
+    { from: /var\(--bs-md\)/gi, to: 'var(--dt-shadow-medium)' },
+    { from: /var\(--bs-lg\)/gi, to: 'var(--dt-shadow-large)' },
+    { from: /var\(--bs-xl\)/gi, to: 'var(--dt-shadow-extra-large)' },
+    { from: /var\(--bs-card\)/gi, to: 'var(--dt-shadow-card)' },
+    { from: /var\(--bs-focus-ring\)/gi, to: 'var(--dt-shadow-focus)' },
+    { from: /var\(--bs-focus-ring-inset\)/gi, to: 'var(--dt-shadow-focus-inset)' },
+  ],
+};

package/lib/dist/js/dialtone_migration_helper/configs/colors.mjs

@@ -0,0 +1,63 @@
+export default {
+  description:
+    'Updates dialtone 7 variables to dialtone 8 design tokens.\n' +
+    '- Replaces var(--{color}-{stop}) with var(--dt-color-{color}-{stop})\n\t' +
+    'eg. var(--black-200) with var(--dt-color-black-200)\n' +
+    '- Replaces var(--fc-{kind}) with var(--dt-color-foreground-{kind})\n\t' +
+    'eg. var(--fc-success-inverted) with var(--dt-color-foreground-success-inverted)\n',
+  patterns: ['**/*.{css,less,scss,sass,styl,html,vue,md}'],
+  expressions: [
+    // ------------------------------------------------------------ //
+    //                            Colors                            //
+    // ------------------------------------------------------------ //
+    // LESS variables
+    {
+      from: /@(black|purple|orange|magenta|gold|green|red|blue|tan)(-[1-9]00)/gi,
+      to: '@dt-color-$1$2',
+    },
+    // Neutral LESS variables
+    {
+      from: /@(white|black)/gi,
+      to: '@dt-color-neutral-$1',
+    },
+    // CSS variables
+    {
+      from: /var\(--(black|purple|orange|magenta|gold|green|red|blue|tan)(-[1-9]00)(-(h|s|l|hsl))?\)/gi,
+      to: 'var(--dt-color-$1$2$3)',
+    },
+    // Neutral CSS variables
+    {
+      from: /var\(--(white|black)(-(h|s|l|hsl))?\)/gi,
+      to: 'var(--dt-color-neutral-$1$2)',
+    },
+    // Background colors
+    {
+      // eslint-disable-next-line max-len
+      from: /var\(--bgc-(primary|secondary|moderate|bold|strong|contrast|critical|success|warning|info)(-(subtle|opaque|subtle-opaque|strong))?\)/gi,
+      to: 'var(--dt-color-surface-$1$2)',
+    },
+    // Special Background color cases
+    {
+      // eslint-disable-next-line max-len
+      from: /var\(--bgc-(error|danger)(-(subtle|opaque|subtle-opaque|strong))?\)/gi,
+      to: 'var(--dt-color-surface-critical$2)',
+    },
+    // Border colors
+    {
+      // eslint-disable-next-line max-len
+      from: /var\(--bc-(default|subtle|moderate|bold|focus|critical|success|warning|brand|ai|accent)(-(inverted|subtle|strong|subtle-inverted|strong-inverted))?\)/gi,
+      to: 'var(--dt-color-border-$1$2)',
+    },
+    // Font colors
+    {
+      // eslint-disable-next-line max-len
+      from: /var\(--fc-(primary|secondary|tertiary|muted|placeholder|disabled|critical|success|warning)(-(strong|inverted|strong-inverted))?\)/gi,
+      to: 'var(--dt-color-foreground-$1$2)',
+    },
+    // Special Font color cases
+    {
+      from: /var\(--fc-(error|danger)(-(strong|inverted|strong-inverted))?\)/gi,
+      to: 'var(--dt-color-foreground-critical$2)',
+    },
+  ],
+};

package/lib/dist/js/dialtone_migration_helper/configs/fonts.mjs

@@ -0,0 +1,38 @@
+export default {
+  description:
+    'Updates dialtone 7 variables to dialtone 8 design tokens.\n' +
+    '- Replaces var(--fs-{stop}) with var(--dt-font-size-{stop})\n\t' +
+    'eg. var(--fs-200) with var(--dt-font-size-200)\n' +
+    '- Replaces var(--fw-{kind}) with var(--dt-font-weight-{kind})\n\t' +
+    'eg. var(--fw-medium) with var(--dt-font-weight-medium)\n' +
+    '- Replaces var(--lh-{stop}) with var(--dt-font-line-height-{stop})\n\t' +
+    'eg. var(--lh-200) with var(--dt-font-line-height-200)\n' +
+  '- Replaces var(--ff-{kind}) with var(--dt-font-family-{kind})\n\t' +
+    'eg. var(--ff-mono) with var(--dt-font-family-mono)',
+  patterns: ['**/*.{css,less,scss,sass,styl,html,vue,md,json}'],
+  expressions: [
+    // ------------------------------------------------------------ //
+    //                            Fonts                             //
+    // ------------------------------------------------------------ //
+    // Size variables
+    {
+      from: /var\(--fs(-[0-9]+)(-(mobile|tc8|tv))?\)/g,
+      to: 'var(--dt-font-size$1$2)',
+    },
+    // Weight variables
+    {
+      from: /var\(--fw-(normal|medium|bold)\)/g,
+      to: 'var(--dt-font-weight-$1)',
+    },
+    // Special weight case
+    {
+      from: /var\(--fw-semibold\)/g,
+      to: 'var(--dt-font-weight-semi-bold)',
+    },
+    // Font family
+    {
+      from: /var\(--ff-(mono)\)/g,
+      to: 'var(--dt-font-family-$1)',
+    },
+  ],
+};

package/lib/dist/js/dialtone_migration_helper/configs/size-and-space.mjs

@@ -0,0 +1,77 @@
+export default {
+  description:
+    'Updates dialtone 7 variables to dialtone 8 design tokens.\n' +
+    '- Replaces var(--{size}-{stop}) with var(--dt-size-{stop})\n\t' +
+    'eg. var(--size-200) with var(--dt-size-200)\n' +
+  '- Replaces var(--su{stop}) with var(--dt-size-{stop})\n\t' +
+    'eg. var(--su0) with var(--dt-size-0)\n' +
+  '- Replaces var(--sun{stop}) with var(--dt-size-{stop}-negative)\n\t' +
+    'eg. var(--sun1) with var(--dt-size-100-negative)\n',
+  patterns: ['**/*.{css,less,scss,sass,styl,html,vue,md}'],
+  expressions: [
+    // ------------------------------------------------------------ //
+    //                        Size and Space                        //
+    // ------------------------------------------------------------ //
+    {
+      from: /var\(--(size|space)(-[0-9]+)(-negative)?\)/gi,
+      to: 'var(--dt-$1$2$3)',
+    },
+    // Icon variables
+    { from: /@icon12/g, to: 'var(--dt-icon-size-100)' },
+    { from: /@icon14/g, to: 'var(--dt-icon-size-200)' },
+    { from: /@icon16/g, to: 'var(--dt-size-500)' },
+    { from: /@icon18/g, to: 'var(--dt-icon-size-300)' },
+    { from: /@icon20/g, to: 'var(--dt-icon-size-400)' },
+    { from: /@icon24/g, to: 'var(--dt-icon-size-500)' },
+    { from: /@icon32/g, to: 'var(--dt-icon-size-600)' },
+    { from: /@icon48/g, to: 'var(--dt-size-650)' },
+    { from: /@icon64/g, to: 'var(--dt-size-700)' },
+    // Positive spacing variables
+    { from: /var\(--su0\)/g, to: 'var(--dt-size-0)' },
+    { from: /var\(--su1\)/g, to: 'var(--dt-size-100)' },
+    { from: /var\(--su2\)/g, to: 'var(--dt-size-200)' },
+    { from: /var\(--su4\)/g, to: 'var(--dt-size-300)' },
+    { from: /var\(--su6\)/g, to: 'var(--dt-size-350)' },
+    { from: /var\(--su8\)/g, to: 'var(--dt-size-400)' },
+    { from: /var\(--su12\)/g, to: 'var(--dt-size-450)' },
+    { from: /var\(--su16\)/g, to: 'var(--dt-size-500)' },
+    { from: /var\(--su24\)/g, to: 'var(--dt-size-550)' },
+    { from: /var\(--su32\)/g, to: 'var(--dt-size-600)' },
+    { from: /var\(--su48\)/g, to: 'var(--dt-size-650)' },
+    { from: /var\(--su64\)/g, to: 'var(--dt-size-700)' },
+    { from: /var\(--su72\)/g, to: 'var(--dt-size-720)' },
+    { from: /var\(--su84\)/g, to: 'var(--dt-size-730)' },
+    { from: /var\(--su96\)/g, to: 'var(--dt-size-750)' },
+    { from: /var\(--su102\)/g, to: 'var(--dt-size-760)' },
+    { from: /var\(--su114\)/g, to: 'var(--dt-size-775)' },
+    { from: /var\(--su128\)/g, to: 'var(--dt-size-800)' },
+    // Negative spacing variables
+    { from: /var\(--sun1\)/g, to: 'var(--dt-size-100-negative)' },
+    { from: /var\(--sun2\)/g, to: 'var(--dt-size-200-negative)' },
+    { from: /var\(--sun4\)/g, to: 'var(--dt-size-300-negative)' },
+    { from: /var\(--sun6\)/g, to: 'var(--dt-size-350-negative)' },
+    { from: /var\(--sun8\)/g, to: 'var(--dt-size-400-negative)' },
+    { from: /var\(--sun12\)/g, to: 'var(--dt-size-450-negative)' },
+    { from: /var\(--sun16\)/g, to: 'var(--dt-size-500-negative)' },
+    { from: /var\(--sun24\)/g, to: 'var(--dt-size-550-negative)' },
+    { from: /var\(--sun32\)/g, to: 'var(--dt-size-600-negative)' },
+    { from: /var\(--sun48\)/g, to: 'var(--dt-size-650-negative)' },
+    { from: /var\(--sun64\)/g, to: 'var(--dt-size-700-negative)' },
+    { from: /var\(--sun72\)/g, to: 'var(--dt-size-720-negative)' },
+    { from: /var\(--sun84\)/g, to: 'var(--dt-size-730-negative)' },
+    { from: /var\(--sun96\)/g, to: 'var(--dt-size-750-negative)' },
+    { from: /var\(--sun102\)/g, to: 'var(--dt-size-760-negative)' },
+    { from: /var\(--sun114\)/g, to: 'var(--dt-size-775-negative)' },
+    { from: /var\(--sun128\)/g, to: 'var(--dt-size-800-negative)' },
+    // Border radius
+    { from: /var\(--br-(pill|circle)\)/g, to: 'var(--dt-size-radius-$1)' },
+    { from: /var\(--br0\)/g, to: 'var(--dt-size-radius-0)' },
+    { from: /var\(--br2\)/g, to: 'var(--dt-size-radius-200)' },
+    { from: /var\(--br4\)/g, to: 'var(--dt-size-radius-300)' },
+    { from: /var\(--br8\)/g, to: 'var(--dt-size-radius-400)' },
+    { from: /var\(--br12\)/g, to: 'var(--dt-size-450)' },
+    { from: /var\(--br16\)/g, to: 'var(--dt-size-radius-500)' },
+    { from: /var\(--br24\)/g, to: 'var(--dt-size-550)' },
+    { from: /var\(--br32\)/g, to: 'var(--dt-size-radius-600)' },
+  ],
+};

package/lib/dist/js/dialtone_migration_helper/index.mjs

@@ -76,7 +76,7 @@ import yargs from 'yargs';
   configData.globbyConfig.cwd = configData.globbyConfig.cwd || cwd;
   // push ignore list to configuration array
   if (argv.ignore) {
-    configData.globbyConfig.ignore.push(...argv.ignore);
+    configData.globbyConfig.ignore = argv.ignore;
   }
 
   // run glob search with configData.patterns

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/dialtone",
-  "version": "7.25.1",
+  "version": "8.0.0-version8.2",
   "description": "Dialpad's design system",
   "keywords": [
     "Dialpad",
@@ -61,7 +61,8 @@
     "release": "semantic-release --no-ci --extends ./release-local.config.js",
     "start": "gulp watch",
     "stylelint": "npx stylelint 'lib/build/less/**/*.{less,css}'",
-    "build:icons": "gulp icons"
+    "build:icons": "gulp icons",
+    "test:postcss-generator-plugin": "jest --coverage && eslint ."
   },
   "unpkg": "dist/css/dialtone.min.css",
   "browserslist": [
@@ -76,15 +77,16 @@
   },
   "dependencies": {
     "docopt": "^0.6.2",
-    "precss": "^4.0.0"
+    "precss": "^4.0.0",
+    "tinycolor2": "^1.6.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",
     "@dialpad/conventional-changelog-angular": "^1.1.1",
     "@dialpad/dialtone-combinator": "^0.3.1",
-    "@dialpad/dialtone-tokens": "^1.9.0",
-    "@dialpad/dialtone-vue": "^3.61.3",
+    "@dialpad/dialtone-tokens": "^1.15.0",
+    "@dialpad/dialtone-vue": "^3.64.1",
     "@dialpad/postcss-responsive-variations": "^1.1.5",
     "@dialpad/semantic-release-changelog-json": "^1.0.0",
     "@docsearch/js": "^3.3.2",
@@ -109,6 +111,7 @@
     "eslint-config-semistandard": "^17.0.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest": "^25.2.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^9.9.0",
@@ -123,6 +126,7 @@
     "gulp-sourcemaps": "^3.0.0",
     "gulp-svgmin": "^4.1.0",
     "husky": "^8.0.3",
+    "jest": "^29.5.0",
     "lesshint": "^6.3.7",
     "lint-staged": "^13.1.0",
     "markdownlint": "^0.27.0",
@@ -130,7 +134,6 @@
     "npm-run-all": "^4.1.5",
     "oslllo-svg-fixer": "^2.2.0",
     "path": "^0.12.7",
-    "postcss-focus-visible": "^7.1.0",
     "postcss-less": "^6.0.0",
     "postcss-sorting": "^7.0.1",
     "semantic-release": "^19.0.5",
@@ -141,6 +144,7 @@
     "stylelint-less": "^1.0.6",
     "stylelint-no-px": "^1.0.1",
     "through2": "^4.0.2",
+    "tinycolor2": "^1.6.0",
     "vuepress": "2.0.0-beta.60",
     "vuepress-plugin-seo2": "^2.0.0-beta.124",
     "vuepress-plugin-sitemap2": "2.0.0-beta.174",
@@ -153,5 +157,12 @@
     "chalk": "^5.2.0",
     "globby": "^13.1.4",
     "inquirer": "^9.1.5"
+  },
+  "jest": {
+    "coverageThreshold": {
+      "global": {
+        "statements": 100
+      }
+    }
   }
 }

package/lib/build/js/dialtone_migration_helper/configs/tokens-migration.mjs

@@ -1,13 +0,0 @@
-export default {
-  description:
-    'Updates dialtone 7 variables to dialtone 8 design tokens.\n' +
-    '- Replaces var(--{color}-{stop}) with var(--dt-color-{color}-{stop})\n\t' +
-    'eg. var(--black-200) with var(--dt-color-black-200)',
-  patterns: ['**/*.{css,less,scss,sass,styl,html,vue}'],
-  expressions: [
-    {
-      from: /var\(--(white|black|purple|orange|magenta|gold|green|red|blue|tan)(-[1-9]00)?\)/gi,
-      to: 'var(--dt-color-$1$2)',
-    },
-  ],
-};