@dialpad/dialtone 6.36.0 → 6.37.0

package/lib/build/js/dialtone_health_check.js

@@ -0,0 +1,101 @@
+#!/usr/bin/env node
+
+/* Will search the files in the provided directory for any properties that are not set to dialtone values.
+   It does this by simply checking whether the property is set to a less @variable or CSS var such as var(--val).
+   It does not compare to an actual list of dialtone token values so it is not perfect, and sometimes gives false
+   positives. This will however give a pretty good idea of where dialtone values aren't being used that should.
+
+   Searches some key properties by default as shown in the defaultSearch array below. You are however not limited to
+   this, you can make this application search any css property you wish. See the below options or run this application
+   with the -h switch for more details. */
+
+const path = require('path');
+const fs = require('fs');
+const { docopt } = require('docopt');
+const { exit } = require('process');
+
+const doc = `
+Usage:
+  ./dialtone_health_check <path> [options]
+
+Options:
+  <path>                    The directory to recursively search all files in.
+  -h --help                 Show this screen.
+  -p --property=<property>  CSS Property to search. Default properties if this is not set:
+                            color,background-color,border-color,font-family
+  --ext=<ext>               Filter by file extension. comma separate to filter multiple. ex: js,vue
+  --no-line-numbers         Only output files and their total count, do not output individual instances and their line
+                            number.
+`;
+
+const options = docopt(doc);
+
+const defaultSearch = [
+  'color',
+  'background-color',
+  'border-color',
+  'font-family',
+];
+
+const extensionFilters = options['--ext']?.split(',') ?? [''];
+let properties = options['--property']?.split(',');
+if (!properties) properties = defaultSearch;
+
+function fromDir (startPath, fileExtension) {
+  if (!fs.existsSync(startPath)) {
+    console.error('Directory not found');
+    exit(1);
+  }
+
+  const results = [];
+  const files = fs.readdirSync(startPath);
+  for (let i = 0; i < files.length; i++) {
+    const filename = path.join(startPath, files[i]);
+    const stat = fs.lstatSync(filename);
+    if (stat.isDirectory()) {
+      results.push(...fromDir(filename, fileExtension)); // recurse
+    } else if (filename.endsWith(fileExtension)) {
+      results.push(filename);
+    }
+  }
+  return results;
+}
+const files = [];
+extensionFilters.forEach(extension => {
+  files.push(...fromDir(options['<path>'], extension));
+});
+if (files.length <= 0) { console.error('No files found in directory'); exit(1); }
+
+const regex = properties.map(property => {
+  return new RegExp(`^\\s*${property}:\\s(?:(?!var\\(--))(?:(?!@)).*`, 'gm');
+});
+
+let totalCount = 0;
+
+try {
+  for (const file of files) {
+    const data = fs.readFileSync(file, 'utf8');
+    const lines = data.split('\n');
+    let match;
+    let matchCount = 0;
+    for (const [lineNumber, line] of lines.entries()) {
+      regex.forEach(re => {
+        // eslint-disable-next-line no-cond-assign
+        while (match = re.exec(line)) {
+          if (!options['--no-line-numbers']) {
+            console.log(`\tnon-dialtone property found on line ${lineNumber}: ${match}`);
+          }
+          matchCount++;
+          totalCount++;
+        }
+      });
+    }
+    if (matchCount > 0) {
+      console.log(`${file}: ${matchCount}`);
+    }
+  }
+  console.log(`Found ${totalCount} total ${properties.join(', ')} \
+   CSS properties that are not dialtone in this directory.`);
+} catch (err) {
+  console.error(err);
+}

package/lib/build/less/components/card.less

@@ -22,13 +22,7 @@
 .d-card {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  //  Component CSS Vars
-  //  ------------------------------------------------------------------------
-  width: 100%;
-  max-width: var(--size264);
-  max-height: 100%;
+  justify-content: center;
   background: var(--white);
   border-radius: var(--su4);
   box-shadow: var(--bs-card);
@@ -45,17 +39,12 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  width: 100%;
   padding: var(--su8) var(--su8) 0 var(--su16);
-  color: var(--black-400);
-  font-weight: var(--fw-semibold);
-  font-size: var(--fs16);
 }
 
 //  $$  CONTENT
 //  ----------------------------------------------------------------------------
 .d-card__content {
-  max-width: 100%;
   padding: var(--su16);
   overflow-y: auto;
 }
@@ -64,7 +53,6 @@
 //  ----------------------------------------------------------------------------
 .d-card__footer {
   display: flex;
-  flex-direction: row-reverse;
   align-items: center;
   padding: var(--su8);
 }

package/lib/build/less/themes/default.less

@@ -34,6 +34,7 @@
 
 
 @theme-vars: {
+
     primary-color-h:                                  var(--purple-500-h);
     primary-color-s:                                  var(--purple-500-s);
     primary-color-l:                                  var(--purple-500-l);
@@ -41,6 +42,11 @@
     primary-color:                                    hsl(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l));
     primary-color-hover:                              hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) - 10%));
 
+    nav-background-color-h:                           var(--purple-800-h);
+    nav-background-color-s:                           var(--purple-800-s);
+    nav-background-color-l:                           var(--purple-800-l);
+    nav-background-color:                             hsl(var(--nav-background-color-h) var(--nav-background-color-s) var(--nav-background-color-l));
+
     topbar-height:                                    var(--su64);
 
     base--font-size:                                  var(--fs16);
@@ -94,6 +100,7 @@
 .d-theme-presence-busy { background-color: var(--theme-presence-color-background-busy) !important; }
 .d-theme-mention { background-color: var(--theme-mention-color-background) !important; }
 
+
 //  ============================================================================
 //  $   OUTPUT VARIABLES
 //  ============================================================================

package/lib/dist/css/dialtone.css

@@ -1060,11 +1060,7 @@ body {
 .d-card {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-  max-width: var(--size264);
-  max-height: 100%;
+  justify-content: center;
   background: var(--white);
   border-radius: var(--su4);
   box-shadow: var(--bs-card);
@@ -1074,20 +1070,14 @@ body {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  width: 100%;
   padding: var(--su8) var(--su8) 0 var(--su16);
-  color: var(--black-400);
-  font-weight: var(--fw-semibold);
-  font-size: var(--fs16);
 }
 .d-card__content {
-  max-width: 100%;
   padding: var(--su16);
   overflow-y: auto;
 }
 .d-card__footer {
   display: flex;
-  flex-direction: row-reverse;
   align-items: center;
   padding: var(--su8);
 }
@@ -20509,6 +20499,10 @@ body {
   --primary-color-hsl: var(--primary-color-h) var(--primary-color-s) var(--primary-color-l);
   --primary-color: hsl(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l));
   --primary-color-hover: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) - 10%));
+  --nav-background-color-h: var(--purple-800-h);
+  --nav-background-color-s: var(--purple-800-s);
+  --nav-background-color-l: var(--purple-800-l);
+  --nav-background-color: hsl(var(--nav-background-color-h) var(--nav-background-color-s) var(--nav-background-color-l));
   --topbar-height: var(--su64);
   --base--font-size: var(--fs16);
   --base--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';