@dialpad/dialtone 7.0.0-beta.2 → 7.0.0-beta.4

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/avatar.less

@@ -96,24 +96,24 @@
       --avatar--bgc: var(--orange-200);
   }
 
-  &.d-avatar--pink-600 {
+  &.d-avatar--magenta-400 {
       --avatar--fc: var(--white);
-      --avatar--bgc: var(--pink-600);
+      --avatar--bgc: var(--magenta-400);
   }
 
-  &.d-avatar--pink-500 {
+  &.d-avatar--magenta-300 {
       --avatar--fc: var(--white);
-      --avatar--bgc: var(--pink-500);
+      --avatar--bgc: var(--magenta-300);
   }
 
-  &.d-avatar--pink-400 {
-      --avatar--fc: var(--pink-700);
-      --avatar--bgc: var(--pink-400);
+  &.d-avatar--magenta-200 {
+      --avatar--fc: var(--magenta-500);
+      --avatar--bgc: var(--magenta-200);
   }
 
-  &.d-avatar--pink-300 {
-      --avatar--fc: var(--pink-700);
-      --avatar--bgc: var(--pink-300);
+  &.d-avatar--magenta-100 {
+      --avatar--fc: var(--magenta-500);
+      --avatar--bgc: var(--magenta-100);
   }
 
   &.d-avatar--yellow-500 {
@@ -154,15 +154,15 @@
   //  --  SIZES
   //  ------------------------------------------------------------------------
   &.d-avatar--sm {
-    font-size: var(--fs12);
+    font-size: var(--fs-100);
   }
 
   &.d-avatar--md {
-    font-size: var(--fs16);
+    font-size: var(--fs-200);
   }
 
   &.d-avatar--lg {
-    font-size: var(--fs24);
+    font-size: var(--fs-300);
   }
 }
 

package/lib/build/less/components/badge.less

@@ -16,14 +16,14 @@
 .d-badge {
   //  Component CSS Vars
   --badge--fc: var(--fc-dark);
-  --badge--bgc: var(--black-050);
+  --badge--bgc: var(--black-200);
 
   display: inline-block;
   min-width: calc(var(--su6) + var(--su1));
   padding: calc(var(--su6) / 4) var(--su6);
   color: var(--badge--fc);
   font-weight: bold;
-  font-size: var(--fs10);
+  font-size: var(--fs-100);
   line-height: var(--lh6);
   text-align: center;
   text-transform: uppercase;
@@ -66,22 +66,22 @@
   --badge--bgc: var(--orange-400);
 }
 
-.d-badge--pink-300 {
-  --badge--bgc: var(--pink-300);
+.d-badge--magenta-100 {
+  --badge--bgc: var(--magenta-100);
 }
 
-.d-badge--pink-500 {
-  --badge--bgc: var(--pink-500);
+.d-badge--magenta-300 {
+  --badge--bgc: var(--magenta-300);
 }
 
-.d-badge--pink-600 {
+.d-badge--magenta-400 {
   --badge--fc: var(--white);
-  --badge--bgc: var(--pink-600);
+  --badge--bgc: var(--magenta-400);
 }
 
-.d-badge--pink-700 {
+.d-badge--magenta-500 {
   --badge--fc: var(--white);
-  --badge--bgc: var(--pink-700);
+  --badge--bgc: var(--magenta-500);
 }
 
 .d-badge--yellow-300 {
@@ -92,7 +92,7 @@
   --badge--bgc: var(--green-400);
 }
 
-.d-badge--red-500 {
+.d-badge--red-300 {
   --badge--fc: var(--white);
-  --badge--bgc: var(--red-500);
+  --badge--bgc: var(--red-300);
 }

package/lib/build/less/components/banner.less

@@ -15,7 +15,7 @@
 .d-banner {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --banner--bgc: var(--black-025);
+    --banner--bgc: var(--black-100);
     --banner--fc: var(--fc-dark);
 
     position: fixed;
@@ -28,7 +28,7 @@
     width: 100%;
     min-height: var(--su48);
     color: var(--banner--fc);
-    font-size: var(--fs14);
+    font-size: var(--fs-200);
     line-height: var(--lh6);
     background-color: var(--banner--bgc);
     border-radius: 0;
@@ -86,17 +86,17 @@
 //  ----------------------------------------------------------------------------
 .d-banner.d-banner--important {
     --banner--bgc: var(--black-800);
-    --banner--fc: var(--black-025);
+    --banner--fc: var(--black-100);
 }
 
 //  $$  ERROR
 //  ----------------------------------------------------------------------------
 .d-banner--error {
     --banner--bgc: var(--red-100);
-    --banner--fc: var(--red-700);
+    --banner--fc: var(--red-500);
 
     &.d-banner--important {
-        --banner--bgc: var(--red-500);
+        --banner--bgc: var(--red-300);
         --banner--fc: var(--white);
     }
 }
@@ -116,11 +116,11 @@
 //  ----------------------------------------------------------------------------
 .d-banner--success {
     --banner--bgc: var(--green-100);
-    --banner--fc: var(--green-700);
+    --banner--fc: var(--green-500);
 
     &.d-banner--important {
-        --banner--bgc: var(--green-300);
-        --banner--fc: var(--green-700);
+        --banner--bgc: var(--green-200);
+        --banner--fc: var(--green-500);
     }
 }
 

package/lib/build/less/components/breadcrumbs.less

@@ -20,7 +20,7 @@
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    font-size: var(--fs14);
+    font-size: var(--fs-200);
     line-height: var(--lh6);
     list-style: none;
 }

package/lib/build/less/components/button.less

@@ -20,7 +20,7 @@
 .d-btn {
     //  Component specific CSS Vars
     //  ------------------------------------------------------------------------
-    --button--fc: var(--primary-color);
+    --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
     --button--bgc: transparent;
     --button--bc: transparent;
     --button--br: var(--base--corner-radius);
@@ -32,7 +32,7 @@
     box-sizing: border-box;
     padding: calc(var(--su8) - var(--su1));  // Subtract border
     color: var(--button--fc);
-    font-size: var(--fs16);
+    font-size: var(--fs-200);
     font-family: inherit;
     line-height: var(--lh4);
     text-transform: inherit;
@@ -52,15 +52,15 @@
     //  --  STATES
     //  ------------------------------------------------------------------------
     &:hover {
-        --button--fc: var(--primary-color-hover);
-        --button--bgc: hsla(var(--primary-color-hsl) ~' / ' 3%);
+        --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+        --button--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) ~' / ' 3%);
     }
 
     &:active,
     &.d-btn--active,
     &.d-btn--active:active {
-        --button--fc: var(--primary-color-hover);
-        --button--bgc: hsla(var(--primary-color-hsl) ~' / ' 9%);
+        --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+        --button--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) ~' / ' 9%);
     }
 
 
@@ -70,8 +70,8 @@
     }
 
     &[disabled] {
-        color: var(--black-400);
-        background-color: var(--black-100);
+        color: var(--black-500);
+        background-color: var(--black-400);
         border-color: transparent;
         cursor: not-allowed;
         transition: none;
@@ -90,7 +90,7 @@
 //  ----------------------------------------------------------------------------
 .d-btn--xs {
     padding: calc(var(--su6) - var(--su1)) calc(var(--su8) - var(--su1));  // Subtract border
-    font-size: var(--fs12);
+    font-size: var(--fs-100);
 
     .d-btn__icon .d-svg {
         width: @icon12;
@@ -102,7 +102,7 @@
 //  ----------------------------------------------------------------------------
 .d-btn--sm {
     padding: calc(var(--su6) - var(--su1)) calc(var(--su8) - var(--su1));  // Subtract border
-    font-size: var(--fs14);
+    font-size: var(--fs-200);
     line-height: var(--lh6);
 
     .d-btn__icon .d-svg {
@@ -115,7 +115,7 @@
 //  ----------------------------------------------------------------------------
 .d-btn--lg {
     padding: calc(var(--su12) - var(--su1)) calc(var(--su16) - var(--su1)); // Subtract border
-    font-size: var(--fs20);
+    font-size: var(--fs-300);
 
     .d-btn__icon .d-svg {
         width: @icon20;
@@ -127,7 +127,7 @@
 //  ----------------------------------------------------------------------------
 .d-btn--xl {
     padding: calc(var(--su12) - var(--su1)) calc(var(--su16) - var(--su1)); // Subtract border
-    font-size: var(--fs24);
+    font-size: var(--fs-300);
     line-height: var(--lh8);
 
     .d-btn__icon .d-svg {
@@ -276,25 +276,25 @@
 //  $$  OUTLINED BUTTON
 //  ----------------------------------------------------------------------------
 .d-btn--outlined {
-    --button--bc: var(--primary-color);
+    --button--bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
 }
 
 //  $$  PRIMARY BUTTON
 //  ----------------------------------------------------------------------------
 .d-btn--primary {
     --button--fc: var(--white);
-    --button--bgc: var(--primary-color);
+    --button--bgc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
 
     &:hover {
       --button--fc: var(--white);
-      --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 65%);
+      --button--bgc: hsl(var(--purple-400-h), var(--purple-400-s), 65%);
     }
 
     &:active,
     &.d-btn--active,
     &.d-btn--active:active {
       --button--fc: var(--white);
-      --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 42%);
+      --button--bgc: hsl(var(--purple-400-h), var(--purple-400-s), 42%);
     }
 }
 
@@ -320,7 +320,7 @@
     }
 
     &.d-btn--outlined {
-        --button--bc: var(--black-500);
+        --button--bc: var(--black-600);
     }
 }
 
@@ -355,14 +355,14 @@
 
         &:hover {
             --button--fc: var(--white);
-            --button--bgc: hsl(var(--red-500-h), var(--red-500-s), 40%);
+            --button--bgc: hsl(var(--red-300-h), var(--red-300-s), 40%);
         }
 
         &:active,
         &.d-btn--active,
         &.d-btn--active:active {
             --button--fc: var(--white);
-            --button--bgc: hsl(var(--red-500-h), var(--red-500-s), 27%);
+            --button--bgc: hsl(var(--red-300-h), var(--red-300-s), 27%);
         }
     }
 }
@@ -397,18 +397,18 @@
 
     //  --  PRIMARY
     &.d-btn--primary {
-        --button--fc: var(--primary-color);
+        --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
         --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 100%);
 
         &:hover {
-            --button--fc: var(--primary-color-hover);
+            --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
             --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 94%);
         }
 
         &:active,
         &.d-btn--active,
         &.d-btn--active:active {
-            --button--fc: var(--primary-color-hover);
+            --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
             --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 91%);
         }
     }
@@ -433,8 +433,8 @@
 //  $$  DISABLED STATE
 //  ----------------------------------------------------------------------------
 .d-btn--disabled {
-    color: var(--black-400);
-    background-color: var(--black-100);
+    color: var(--black-500);
+    background-color: var(--black-400);
     border-color: transparent;
     cursor: not-allowed;
     transition: none;

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

@@ -0,0 +1,58 @@
+//@import (reference) '../utilities/spacing.less';
+
+//
+//  DIALTONE
+//  COMPONENTS: CARD
+//
+//  These are card classes for Dialpad's design system Dialtone.
+//  For further documentation of these and other classes,
+//  visit https://dialpad.design/components/card
+//
+//  TABLE OF CONTENTS
+//  • BASE STYLE
+//  • HEADER
+//  • CONTENT
+//  • FOOTER
+//
+//  ============================================================================
+//  $   BASE STYLE
+//  ============================================================================
+//  $$  WRAPPER
+//  ----------------------------------------------------------------------------
+.d-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: var(--white);
+  border-radius: var(--su4);
+  box-shadow: var(--bs-card);
+}
+
+
+//  ============================================================================
+//  $   CARD AREAS
+//  ----------------------------------------------------------------------------
+//  $$  HEADER
+//  ----------------------------------------------------------------------------
+.d-card__header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--su8) var(--su8) 0 var(--su16);
+}
+
+//  $$  CONTENT
+//  ----------------------------------------------------------------------------
+.d-card__content {
+  padding: var(--su16);
+  overflow-y: auto;
+}
+
+//  $$  FOOTER
+//  ----------------------------------------------------------------------------
+.d-card__footer {
+  display: flex;
+  align-items: center;
+  padding: var(--su8);
+}

package/lib/build/less/components/chip.less

@@ -23,7 +23,7 @@
 .d-chip__label {
   //  Component CSS Vars
   --chip--fc: var(--fc-dark);
-  --chip--bgc: var(--black-050);
+  --chip--bgc: var(--black-200);
   --chip--br: var(--su102);
 
   display: inline-flex;
@@ -32,7 +32,7 @@
   box-sizing: border-box;
   padding: var(--su4) var(--su8);
   color: var(--chip--fc);
-  font-size: var(--fs16);
+  font-size: var(--fs-200);
   font-family: inherit;
   line-height: var(--lh4);
   background-color: var(--chip--bgc);
@@ -60,13 +60,13 @@
     cursor: pointer;
 
     &:hover {
-      --chip--bgc: var(--black-075);
+      --chip--bgc: var(--black-300);
 
       text-decoration: none;
     }
 
     &:active {
-      --chip--bgc: var(--black-100);
+      --chip--bgc: var(--black-400);
     }
 
     &:focus-visible {
@@ -123,7 +123,7 @@
 }
 
 .d-chip__label--active {
-  background-color: var(--black-100);
+  background-color: var(--black-400);
 }
 
 //  ============================================================================
@@ -133,7 +133,7 @@
 //  ----------------------------------------------------------------------------
 .d-chip__label--xs {
   padding: var(--su2) var(--su6);
-  font-size: var(--fs12);
+  font-size: var(--fs-100);
 
 
 
@@ -178,7 +178,7 @@
 //  ----------------------------------------------------------------------------
 .d-chip__label--sm {
   padding: var(--su2) var(--su8);
-  font-size: var(--fs16);
+  font-size: var(--fs-200);
 
   .d-svg {
     width: @icon16;

package/lib/build/less/components/forms.less

@@ -39,7 +39,7 @@ fieldset {
   margin-bottom: var(--su6);
   color: currentColor;
   font-weight: @fw-bold;
-  font-size: var(--fs16);
+  font-size: var(--fs-200);
   font-family: inherit;
   line-height: var(--lh4);
   word-break: break-word;
@@ -52,22 +52,22 @@ fieldset {
 //  $$  SIZES
 //  ----------------------------------------------------------------------------
 .d-label--xs {
-  font-size: var(--fs12);
+  font-size: var(--fs-100);
   line-height: var(--lh4);
 }
 
 .d-label--sm {
-  font-size: var(--fs14);
+  font-size: var(--fs-200);
   line-height: var(--lh2);
 }
 
 .d-label--lg {
-  font-size: var(--fs18);
+  font-size: var(--fs-200);
   line-height: var(--lh2);
 }
 
 .d-label--xl {
-  font-size: var(--fs20);
+  font-size: var(--fs-300);
   line-height: var(--lh4);
 }
 
@@ -79,8 +79,8 @@ fieldset {
   display: flex;
   box-sizing: border-box;
   margin-bottom: var(--su6);
-  color: var(--black-500);
-  font-size: var(--fs12);
+  color: var(--black-600);
+  font-size: var(--fs-100);
   font-family: inherit;
   line-height: var(--lh4);
   fill: currentColor;
@@ -93,12 +93,12 @@ fieldset {
 //  $$  SIZES
 //  ----------------------------------------------------------------------------
 .d-description--lg {
-  font-size: var(--fs14);
+  font-size: var(--fs-200);
   line-height: var(--lh6);
 }
 
 .d-description--xl {
-  font-size: var(--fs16);
+  font-size: var(--fs-200);
   line-height: var(--lh6);
 }
 
@@ -113,7 +113,7 @@ fieldset {
   margin-top: var(--su6);
   color: var(--validation--fc);
   font-weight: inherit;
-  font-size: var(--fs12);
+  font-size: var(--fs-100);
   font-family: inherit;
   line-height: var(--lh4);
 

package/lib/build/less/components/input.less

@@ -33,8 +33,8 @@
 .d-textarea {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --input--focus-bc: var(--primary-color);
-    --input--bc: var(--black-500);
+    --input--focus-bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
+    --input--bc: var(--black-600);
     --input--bgc: var(--white);
     --input--fc: var(--black-800);
 
@@ -47,7 +47,7 @@
     padding: 0.7rem var(--su8);
     color: var(--input--fc);
     font-weight: inherit;
-    font-size: var(--fs16);
+    font-size: var(--fs-200);
     font-family: inherit;
     line-height: var(--lh4);
     background-color: var(--input--bgc);
@@ -69,7 +69,7 @@
 
     //  --  Placeholder copy
     &::placeholder {
-        color: var(--black-300);
+        color: var(--black-500);
     }
     //  --  Remove input EDGE additions
     &::-ms-clear {
@@ -85,9 +85,9 @@
     //  --  DISABLED / READ-ONLY
     &[disabled],
     &[read-only] {
-        --input--bc: var(--black-200) !important;
-        --input--bgc: var(--black-075);
-        --input--fc: var(--black-400);
+        --input--bc: var(--black-400) !important;
+        --input--bgc: var(--black-300);
+        --input--fc: var(--black-500);
 
         &:focus {
             box-shadow: none !important;
@@ -95,7 +95,7 @@
 
         //  --  Placeholder copy
         &::placeholder {
-            color: var(--black-400);
+            color: var(--black-500);
         }
     }
     //  --  DISABLED