feat: DLT-1890 vscode-plugin: utility class autocompletion and hover

.vscode/settings.json

@@ -47,7 +47,7 @@
   "editor.formatOnSaveMode": "modifications",
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[json]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "vscode.json-language-features"
   },
   "[markdown]": {
     "editor.rulers": [],

packages/dialtone-css/gulpfile.cjs

@@ -17,6 +17,7 @@ const settings = {
   sync: true, // Turn on/off sync tasks
   build: true, // Turn on/off build tasks
   watch: true, // Turn on/off watch tasks
+  documentation: true, // Turn on/off documentation generation
 };
 
 //  ================================================================================
@@ -54,6 +55,8 @@ const del = require('del');
 const rename = require('gulp-rename');
 const cache = require('gulp-cached');
 const through2 = require('through2');
+const path = require('path');
+const fs = require('fs');
 
 //  @@ STYLES
 const postCSS = settings.styles ? require('gulp-postcss') : null;
@@ -64,11 +67,11 @@ const postCSSResponsify = settings.styles
   ? require('@dialpad/postcss-responsive-variations')({ breakpoints, classes })
   : null;
 const postCSSDialtoneGenerator = settings.styles ? require('./postcss/dialtone-generators.cjs') : null;
+const postCSSDialtoneDocs = settings.documentation ? require('./postcss/dialtone-docs.cjs') : null;
 const sourcemaps = settings.styles ? require('gulp-sourcemaps') : null;
 const autoprefixer = settings.styles ? require('autoprefixer') : null;
 
 //  @@ SVGS
-const path = settings.svgs ? require('path') : null;
 const svgmin = settings.svgs ? require('gulp-svgmin') : null;
 const replace = settings.svgs ? require('gulp-replace') : null;
 const svgStrokeToFill = settings.svgs ? require('./svg-stroke-to-fill.cjs') : null;
@@ -94,13 +97,9 @@ const categories = [
 //     Where everything is in this project
 //  ================================================================================
 const paths = {
-  clean: {
-    libCss: './lib/dist/*.css',
-    libSvg: './lib/dist/svg/**/*',
-    libVueIcons: './lib/dist/vue/**/*',
-    libFonts: './dist/fonts/**/*',
-    libJS: './lib/dist/js/**/*.{mjs,js,cjs}',
-  },
+  clean: [
+    './lib/dist',
+  ],
   scripts: {
     input: './lib/build/js/**/*',
     output: './lib/dist/js/',
@@ -179,11 +178,9 @@ const cleanUp = () => {
   // Make sure the feature is active before running
   if (!settings.clean) return;
 
-  const items = Object.values(paths.clean);
-
   // Clean dist folders
   return Promise.all([
-    del.sync(items),
+    del.sync(paths.clean),
   ]);
 };
 
@@ -218,8 +215,7 @@ const libStyles = function (done) {
   return src(paths.styles.inputLib)
     .pipe(less({ paths: ['./node_modules'] })) // compile less to css
     .pipe(replace('../fonts/', './fonts/'))
-    .pipe(postCSS([postCSSDialtoneGenerator, postCSSResponsify]))
-    .pipe(postCSS([autoprefixer()]))
+    .pipe(postCSS([postCSSDialtoneGenerator, postCSSResponsify, autoprefixer()]))
     .pipe(dest(paths.styles.outputLib))
     .pipe(postCSS([postCSSNano]))
     .pipe(rename({ suffix: '.min' }))
@@ -234,8 +230,7 @@ const libStylesDev = function (done) {
   return src(paths.styles.inputLib)
     .pipe(sourcemaps.init())
     .pipe(less({ paths: ['./node_modules'] })) // compile less to css
-    .pipe(postCSS([postCSSDialtoneGenerator, postCSSResponsify]))
-    .pipe(postCSS([autoprefixer()]))
+    .pipe(postCSS([postCSSDialtoneGenerator, postCSSResponsify, autoprefixer()]))
     .pipe(sourcemaps.mapSources(function (sourcePath) {
       if (sourcePath === '<no source>') return sourcePath;
       return '../../build/less/' + sourcePath;
@@ -397,6 +392,64 @@ const buildNewSVGIcons = function (done) {
     .pipe(dest(paths.version7.outputVue));
 };
 
+//  ================================================================================
+//  @@  BUILD DOCS
+//      Process files and generate documentation
+//  ================================================================================
+const libDocs = function (done) {
+  //  Make sure this feature is activated before running
+  if (!settings.documentation) return done();
+
+  //  Generate documentation
+  return src('./lib/dist/dialtone-default-theme.css')
+    .pipe(postCSS([postCSSDialtoneDocs]));
+};
+
+/**
+ * Process base-light and dp-light themes from Dialtone Tokens doc.json file.
+ * Extracts CSS Variables primitive value and description.
+ * @returns {{Token: { value: String, description: String }}}
+ */
+const tokenDocs = function (done) {
+  if (!settings.documentation) return done();
+
+  const docs = {};
+
+  const rawTokensDocumentation = require(path.resolve(__dirname, './node_modules/@dialpad/dialtone-tokens/dist/doc.json'));
+  const CSSVarRegex = /var\(([^)]+)\)/g;
+
+  Object.values({ ...rawTokensDocumentation['base-light'], ...rawTokensDocumentation['dp-light'] })
+    .forEach(DocEntry => {
+      const CSSVarEntry = DocEntry['css/variables'];
+      const token = CSSVarEntry.name.replace(CSSVarRegex, '$1');
+      const description = CSSVarEntry.description;
+      let value = CSSVarEntry.value;
+
+      if (!CSSVarRegex.test(value)) {
+        docs[token] = { value, description };
+        return;
+      }
+
+      value = value.replace(CSSVarRegex, (match) => {
+        const tokenName = match.replace(CSSVarRegex, '$1');
+        const tokenValue = docs[tokenName];
+
+        if (!tokenValue) {
+          console.warn('Missing token value: ', tokenName);
+          return match;
+        }
+
+        return tokenValue.value;
+      });
+
+      docs[token] = { value, description };
+    });
+
+  fs.writeFileSync(path.resolve(__dirname, './lib/dist/tokens-docs.json'), JSON.stringify(docs), 'utf-8');
+
+  return done();
+};
+
 //  ================================================================================
 //  @   EXPORT TASKS
 //  ================================================================================
@@ -418,6 +471,8 @@ exports.default = series(
   exports.svg,
   tokens,
   libStyles,
+  tokenDocs,
+  libDocs,
   libScripts,
 );
 

packages/dialtone-css/lib/build/less/components/radio-checkbox.less

@@ -187,35 +187,35 @@
         &:checked {
             --check-radio-color-background: var(--check-radio-color-background-checked);
 
-            background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='%23fff'/%3E%3C/svg%3E");
+            background-image: url("data:image/svg+xml,<svg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='%23fff'/></svg>");
 
             //  Disabled
             &[disabled] {
                 --check-radio-color-background: var(--check-radio-color-background-disabled);
 
-                background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
+                background-image: url("data:image/svg+xml,<svg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/></svg>");
             }
         }
 
         &--disabled:checked {
             --check-radio-color-background: var(--check-radio-color-background-disabled);
             --check-radio-color-border: var(--check-radio-color-border-disabled);
 
-            background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
+            background-image: url("data:image/svg+xml,<svg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/></svg>");
         }
 
         &--indeterminate,
         &:indeterminate {
             --check-radio-color-background: var(--check-radio-color-background-checked);
             --check-radio-color-border: var(--check-radio-color-border-checked);
 
-            background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='%23fff'/%3E%3C/svg%3E");
+            background-image: url("data:image/svg+xml,<svg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M19 13H5v-2h14v2z' fill='%23fff'/></svg>");
 
             &[disabled] {
                 --check-radio-color-background: var(--check-radio-color-background-disabled);
                 --check-radio-color-border: var(--check-radio-color-border-disabled);
 
-                background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
+                background-image: url("data:image/svg+xml,<svg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/></svg>");
             }
         }
 
@@ -224,7 +224,7 @@
             --check-radio-color-background: var(--check-radio-color-background-disabled);
             --check-radio-color-border: var(--check-radio-color-border-disabled);
 
-            background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
+            background-image: url("data:image/svg+xml,<svg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/></svg>");
         }
 
         //  Disabled

packages/dialtone-css/lib/build/less/variables/visual-styles.less

@@ -20,6 +20,7 @@
    ttf-out:         cubic-bezier(0.23, 1, 0.32, 1);
    ttf-out-quint:   cubic-bezier(0.22, 1, 0.36, 1);
    td0:             0s;
+   td25:            25ms;
    td50:            50ms;
    td100:           100ms;
    td150:           150ms;

packages/dialtone-css/package.json

@@ -71,35 +71,25 @@
   "devDependencies": {
     "@dialpad/dialtone-tokens": "workspace:*",
     "@dialpad/postcss-responsive-variations": "workspace:*",
-    "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-service": "~5.0.8",
     "autoprefixer": "^10.4.14",
-    "child_process": "^1.0.2",
     "cssnano": "^6.0.1",
     "del": "^6.1.1",
     "gulp-cached": "^1.1.1",
-    "gulp-concat": "^2.6.1",
     "gulp-less": "^5.0.0",
     "gulp-postcss": "^9.0.1",
     "gulp-rename": "^2.0.0",
     "gulp-replace": "^1.1.4",
     "gulp-sourcemaps": "^3.0.0",
     "gulp-svgmin": "^4.1.0",
     "less": "^4.2.0",
-    "npm-run-all": "^4.1.5",
     "oslllo-svg-fixer": "^2.2.0",
-    "path": "^0.12.7",
-    "postcss-less": "^6.0.0",
-    "postcss-sorting": "^8.0.2",
-    "precss": "^4.0.0",
-    "semantic-release": "^21.0.6",
-    "through2": "^4.0.2",
-    "yargs": "^17.7.2"
+    "through2": "^4.0.2"
   },
   "peerDependencies": {
     "chalk": "^5.2.0",
     "globby": "^13.1.4",
-    "inquirer": "^9.1.5"
+    "inquirer": "^9.1.5",
+    "yargs": "^17.7.2"
   },
   "nx": {
     "includedScripts": [

packages/dialtone-css/postcss/constants.cjs

@@ -6,7 +6,9 @@
  * This data shouldn't duplicate values under `/docs/_data/` folder
  */
 
+// @TODO: Move HSLA_EXCLUDED_COLORS to common/utils to share and sync it with dialtone-tokens/postcss/common.js
 module.exports = {
+  HSLA_EXCLUDED_COLORS: ['--dt-color-gradient-magenta-purple', '--dt-badge-color-background-ai', '--dt-color-border-ai'],
   OPACITIES: [
     100,
     99,
@@ -134,11 +136,7 @@ module.exports = {
       'Red',
       'Tan',
     ].join('|'),
-    HOVER_FOCUS_PREFIXES: [
-      'h',
-      'f',
-      'fv',
-    ].join('|'),
+    HOVER_FOCUS_PREFIXES: /\.(h|f|v)\\:/g,
     BACKGROUND_GRADIENTS: [
       'none',
       'unset',
@@ -198,6 +196,9 @@ module.exports = {
       'brand',
       'ai',
       'accent',
+      'transparent',
+      'current',
+      'unset',
     ].join('|'),
     BORDER_COLOR_VARIATIONS: [
       'inverted',
@@ -222,16 +223,7 @@ module.exports = {
       'underline',
       'unset',
     ].join('|'),
-    OPACITY_VARIATIONS: [
-      '0',
-      '10',
-      '25',
-      '50',
-      '75',
-      '90',
-      '95',
-      '99',
-    ].join('|'),
+    OPACITY_VARIATIONS: '\\d{1,3}',
   },
   WIDTH_HEIGHTS: {
     0: '0',