Merge pull request #2104 from snyk/feat/centralize-colors

feat: central colors/icons theme

scripts/check-dependencies.ts

@@ -3,6 +3,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 import * as glob from 'glob';
 import { config } from '../check-dependencies.config';
+import { icon } from '../src/lib/theme';
 
 const checkDependencies = async () => {
   let exitCode = 0;
@@ -55,7 +56,7 @@ const checkDependencies = async () => {
           }
         }
       } else {
-        console.log('\n ✓ No problems found.');
+        console.log(`\n ${icon.VALID} No problems found.`);
       }
 
       console.log();

src/cli/commands/fix/index.ts

@@ -19,6 +19,7 @@ import { validateFixCommandIsSupported } from './validate-fix-command-is-support
 import { Options, TestOptions } from '../../../lib/types';
 import { getDisplayPath } from './get-display-path';
 import chalk from 'chalk';
+import { icon, color } from '../../../lib/theme';
 
 const debug = Debug('snyk-fix');
 const snykFixFeatureFlag = 'cliSnykFix';
@@ -135,16 +136,16 @@ async function runSnykTestLegacy(
       results.push(...newRes);
       stdOutSpinner.stopAndPersist({
         text: spinnerMessage,
-        symbol: '\n►',
+        symbol: `\n${icon.RUN}`,
       });
     } catch (error) {
       const testError = formatTestError(error);
       const userMessage =
-        chalk.red(`Failed! ${testError.message}.`) +
+        color.status.error(`Failed! ${testError.message}.`) +
         `\n  Tip: run \`snyk test ${displayPath} -d\` for more information.`;
       stdOutSpinner.stopAndPersist({
         text: spinnerMessage,
-        symbol: '\n►',
+        symbol: `\n${icon.RUN}`,
       });
       stdErrSpinner.stopAndPersist({
         text: userMessage,

src/cli/commands/protect/prompts.ts

@@ -19,8 +19,9 @@ import { parsePackageString as moduleToObject } from 'snyk-module';
 import * as config from '../../../lib/config';
 import * as snykPolicy from 'snyk-policy';
 import chalk from 'chalk';
+import { icon, color } from '../../../lib/theme';
 import { AnnotatedIssue, SEVERITY } from '../../../lib/snyk-test/legacy';
-import { getLegacySeveritiesColour } from '../../../lib/snyk-test/common';
+import { colorTextBySeverity } from '../../../lib/snyk-test/common';
 import { titleCaseText } from '../../../lib/formatters/legacy-format-issue';
 
 const debug = debugModule('snyk');
@@ -47,8 +48,7 @@ function sort(prop) {
 
 function createSeverityBasedIssueHeading(msg: string, severity: SEVERITY) {
   // Example: ✗ Medium severity vulnerability found in xmldom
-  const severityColor = getLegacySeveritiesColour(severity);
-  return severityColor.colorFunc(msg);
+  return colorTextBySeverity(severity, msg);
 }
 
 function sortUpgradePrompts(a, b) {
@@ -618,7 +618,7 @@ function generatePrompt(
       const joiningText = group.patch ? 'in' : 'via';
       const issues = vuln.type === 'license' ? 'issues' : 'vulnerabilities';
       messageIntro = fmt(
-        '✗ %s %s %s introduced %s %s',
+        `${icon.ISSUE} %s %s %s introduced %s %s`,
         group.count,
         `${severity}${originalSeverityStr}`,
         issues,
@@ -632,7 +632,7 @@ function generatePrompt(
     } else {
       infoLink += chalk.underline('/vuln/' + vuln.id);
       messageIntro = fmt(
-        '✗ %s severity %s found in %s, introduced via',
+        `${icon.ISSUE} %s severity %s found in %s, introduced via`,
         `${severity}${originalSeverityStr}`,
         vuln.type === 'license' ? 'issue' : 'vuln',
         vulnIn,
@@ -761,7 +761,7 @@ function generatePrompt(
         toPackageVersion,
       );
       let lead = '';
-      const breaking = chalk.red('potentially breaking change');
+      const breaking = color.status.error('potentially breaking change');
       if (diff === 'major') {
         lead = ' (' + breaking + ', ';
       } else {

src/cli/commands/protect/wizard.ts

@@ -39,6 +39,7 @@ import { ModuleInfo as moduleInfo } from '../../../lib/module-info';
 import { MisconfiguredAuthInCI } from '../../../lib/errors/misconfigured-auth-in-ci-error';
 import { MissingTargetFileError } from '../../../lib/errors/missing-targetfile-error';
 import * as pm from '../../../lib/package-managers';
+import { icon, color } from '../../../lib/theme';
 import {
   Options,
   MonitorMeta,
@@ -192,9 +193,8 @@ async function processWizardFlow(options) {
           );
         } else {
           console.log(
-            chalk.green(
-              '✓ Tested %s dependencies for known ' +
-                'vulnerabilities, no vulnerable paths found.',
+            color.status.success(
+              `${icon.VALID} Tested %s dependencies for known vulnerabilities, no vulnerable paths found.`,
             ),
             res.dependencyCount,
           );

src/cli/commands/test/validate-test-options.ts

@@ -1,5 +1,4 @@
-import chalk from 'chalk';
-
+import { color } from '../../../lib/theme';
 import { TestOptions, Options } from '../../../lib/types';
 import { FAIL_ON, FailOn, SEVERITIES } from '../../../lib/snyk-test/common';
 import { FailOnError } from '../../../lib/errors/fail-on-error.ts';
@@ -14,7 +13,7 @@ export function validateTestOptions(options: TestOptions & Options) {
 
   if (options.failOn && !validateFailOn(options.failOn)) {
     const error = new FailOnError();
-    throw chalk.red.bold(error.message);
+    throw color.status.error(error.message);
   }
 }
 

src/lib/formatters/iac-output.ts

@@ -1,4 +1,5 @@
 import chalk from 'chalk';
+import { icon } from '../theme';
 import * as Debug from 'debug';
 import * as pathLib from 'path';
 import { pathToFileURL } from 'url';
@@ -12,7 +13,7 @@ import { printPath } from './remediation-based-format-issues';
 import { titleCaseText } from './legacy-format-issue';
 import * as sarif from 'sarif';
 import { SEVERITY } from '../../lib/snyk-test/legacy';
-import { getSeveritiesColour } from '../../lib/snyk-test/common';
+import { colorTextBySeverity } from '../../lib/snyk-test/common';
 import { IacFileInDirectory } from '../../lib/types';
 import { isLocalFolder } from '../../lib/detect';
 import { getSeverityValue } from './get-severity-value';
@@ -33,11 +34,10 @@ function formatIacIssue(
     introducedBy = `\n    introduced by ${pathStr}`;
   }
 
-  const severityColor = getSeveritiesColour(issue.severity);
-
   return (
-    severityColor.colorFunc(
-      `  ✗ ${chalk.bold(issue.title)}${newBadge} [${titleCaseText(
+    colorTextBySeverity(
+      issue.severity,
+      `  ${icon.ISSUE} ${chalk.bold(issue.title)}${newBadge} [${titleCaseText(
         issue.severity,
       )} Severity]`,
     ) +

src/lib/formatters/legacy-format-issue.ts

@@ -18,7 +18,7 @@ import {
 } from '../../lib/snyk-test/legacy';
 import { formatLegalInstructions } from './legal-license-instructions';
 import { getReachabilityText } from './format-reachability';
-import { getLegacySeveritiesColour } from '../../lib/snyk-test/common';
+import { colorTextBySeverity } from '../../lib/snyk-test/common';
 import { PATH_SEPARATOR } from '../constants';
 
 export function formatIssues(
@@ -97,15 +97,15 @@ function createSeverityBasedIssueHeading({
 }: CreateSeverityBasedIssueHeading) {
   // Example: ✗ Medium severity vulnerability found in xmldom
   const vulnTypeText = type === 'license' ? 'issue' : 'vulnerability';
-  const severityColor = getLegacySeveritiesColour(severity);
 
   let originalSeverityStr = '';
   if (originalSeverity && originalSeverity !== severity) {
     originalSeverityStr = ` (originally ${titleCaseText(originalSeverity)})`;
   }
 
   return (
-    severityColor.colorFunc(
+    colorTextBySeverity(
+      severity,
       '✗ ' +
         titleCaseText(severity) +
         ` severity${originalSeverityStr} ` +

src/lib/formatters/remediation-based-format-issues.ts

@@ -1,4 +1,5 @@
 import chalk from 'chalk';
+import { icon } from '../theme';
 import * as config from '../../lib/config';
 import { TestOptions } from '../../lib/types';
 import {
@@ -14,7 +15,7 @@ import {
   SEVERITY,
   UpgradeRemediation,
 } from '../../lib/snyk-test/legacy';
-import { getSeveritiesColour } from '../../lib/snyk-test/common';
+import { colorTextBySeverity } from '../../lib/snyk-test/common';
 import { formatLegalInstructions } from './legal-license-instructions';
 import {
   formatReachability,
@@ -434,8 +435,6 @@ export function formatIssue(
   reachability?: REACHABILITY,
   sampleReachablePaths?: SampleReachablePaths,
 ): string {
-  const severityColor = getSeveritiesColour(severity);
-
   const newBadge = isNew ? ' (new)' : '';
   const name = vulnerableModule ? ` in ${chalk.bold(vulnerableModule)}` : '';
   let legalLicenseInstructionsText;
@@ -488,8 +487,9 @@ export function formatIssue(
   }
 
   return (
-    severityColor.colorFunc(
-      `  ✗ ${chalk.bold(title)}${newBadge} [${titleCaseText(
+    colorTextBySeverity(
+      severity,
+      `  ${icon.ISSUE} ${chalk.bold(title)}${newBadge} [${titleCaseText(
         severity,
       )} Severity${originalSeverityStr}]`,
     ) +

src/lib/formatters/test/display-result.ts

@@ -1,6 +1,6 @@
 import * as pathLib from 'path';
 import chalk from 'chalk';
-
+import { icon, color } from '../../theme';
 import { isCI } from '../../../lib/is-ci';
 import {
   Options,
@@ -75,7 +75,9 @@ export function displayResult(
     const vulnPathsText = options.showVulnPaths
       ? 'no vulnerable paths found.'
       : 'none were found.';
-    const summaryOKText = chalk.green(`✓ ${testedInfoText}, ${vulnPathsText}`);
+    const summaryOKText = color.status.success(
+      `${icon.VALID} ${testedInfoText}, ${vulnPathsText}`,
+    );
     const nextStepsText = localPackageTest
       ? '\n\nNext steps:' +
         '\n- Run `snyk monitor` to be notified ' +

src/lib/plugins/get-deps-from-plugin.ts

@@ -1,6 +1,7 @@
 import * as debugModule from 'debug';
 import * as pathLib from 'path';
 import chalk from 'chalk';
+import { icon } from '../theme';
 import { legacyPlugin as pluginApi } from '@snyk/cli-interface';
 import { find } from '../find-files';
 import { Options, TestOptions, MonitorOptions } from '../types';
@@ -148,7 +149,7 @@ export function warnSomeGradleManifestsNotScanned(
         ',\n',
       )}`,
     );
-    return `✗ ${diff.length}/${detectedGradleFiles.length} detected Gradle manifests did not return dependencies. They may have errored or were not included as part of a multi-project build. You may need to scan them individually with --file=path/to/file. Run with \`-d\` for more info.`;
+    return `${icon.ISSUE} ${diff.length}/${detectedGradleFiles.length} detected Gradle manifests did not return dependencies. They may have errored or were not included as part of a multi-project build. You may need to scan them individually with --file=path/to/file. Run with \`-d\` for more info.`;
   }
   return null;
 }

src/lib/plugins/get-multi-plugin-result.ts

@@ -2,6 +2,7 @@ const cloneDeep = require('lodash.clonedeep');
 import * as path from 'path';
 import * as cliInterface from '@snyk/cli-interface';
 import chalk from 'chalk';
+import { icon } from '../theme';
 import * as debugModule from 'debug';
 
 import { TestOptions, Options, MonitorOptions } from '../types';
@@ -86,7 +87,7 @@ export async function getMultiPluginResult(
       });
       debug(
         chalk.bold.red(
-          `\n✗ Failed to get dependencies for ${targetFile}\nERROR: ${err.message}\n`,
+          `\n${icon.ISSUE} Failed to get dependencies for ${targetFile}\nERROR: ${err.message}\n`,
         ),
       );
     }

src/lib/plugins/sast/format/output-format.ts

@@ -1,7 +1,8 @@
 import * as Sarif from 'sarif';
 import * as Debug from 'debug';
 import chalk from 'chalk';
-import { getLegacySeveritiesColour, SEVERITY } from '../../../snyk-test/common';
+import { icon, color } from '../../../theme';
+import { colorTextBySeverity, SEVERITY } from '../../../snyk-test/common';
 import { rightPadWithSpaces } from '../../../right-pad';
 import { Options } from '../../../types';
 
@@ -26,7 +27,7 @@ export function getCodeDisplayedOutput(
 
   const issuesText =
     issues.low.join('') + issues.medium.join('') + issues.high.join('');
-  const summaryOKText = chalk.green('✔ Test completed');
+  const summaryOKText = color.status.success(`${icon.VALID} Test completed`);
   const codeIssueSummary = getCodeIssuesSummary(issues);
 
   return (
@@ -43,19 +44,13 @@ export function getCodeDisplayedOutput(
 
 function getCodeIssuesSummary(issues: { [index: string]: string[] }): string {
   const lowSeverityText = issues.low.length
-    ? getLegacySeveritiesColour(SEVERITY.LOW).colorFunc(
-        ` ${issues.low.length} [Low] `,
-      )
+    ? colorTextBySeverity(SEVERITY.LOW, ` ${issues.low.length} [Low] `)
     : '';
   const mediumSeverityText = issues.medium.length
-    ? getLegacySeveritiesColour(SEVERITY.MEDIUM).colorFunc(
-        ` ${issues.medium.length} [Medium] `,
-      )
+    ? colorTextBySeverity(SEVERITY.MEDIUM, ` ${issues.medium.length} [Medium] `)
     : '';
   const highSeverityText = issues.high.length
-    ? getLegacySeveritiesColour(SEVERITY.HIGH).colorFunc(
-        `${issues.high.length} [High] `,
-      )
+    ? colorTextBySeverity(SEVERITY.HIGH, `${issues.high.length} [High] `)
     : '';
 
   const codeIssueCount =
@@ -65,7 +60,9 @@ function getCodeIssuesSummary(issues: { [index: string]: string[] }): string {
   } found`;
   const issuesBySeverityText =
     highSeverityText + mediumSeverityText + lowSeverityText;
-  const vulnPathsText = chalk.green('✔ Awesome! No issues were found.');
+  const vulnPathsText = color.status.success(
+    `${icon.VALID} Awesome! No issues were found.`,
+  );
 
   return codeIssueCount > 0
     ? codeIssueFound + '\n' + issuesBySeverityText
@@ -93,9 +90,10 @@ function getIssues(
         }
         const ruleName =
           rulesMap[ruleId].shortDescription?.text || rulesMap[ruleId].name;
-        const ruleIdSeverityText = getLegacySeveritiesColour(
-          severity.toLowerCase(),
-        ).colorFunc(` ✗ [${severity}] ${ruleName}`);
+        const ruleIdSeverityText = colorTextBySeverity(
+          severity,
+          ` ${icon.ISSUE} [${severity}] ${ruleName}`,
+        );
         const artifactLocationUri = location.artifactLocation.uri;
         const startLine = location.region.startLine;
         const text = res.message.text;