Added example linting functions

src/app/styles/ui.css

@@ -261,6 +261,11 @@ body {
   flex: 1;
 }
 
+.error-count {
+  min-width: none;
+  min-height: none;
+}
+
 .error-count.success {
   right: 16px;
   background: #55db9e;

src/plugin/controller.ts

@@ -3,7 +3,9 @@ import {
   checkEffects,
   checkFills,
   checkStrokes,
-  checkType
+  checkType,
+  customCheckTextFills
+  // customCheckTextFills,
 } from "./lintingFunctions";
 
 figma.showUI(__html__, { width: 360, height: 580 });
@@ -359,6 +361,10 @@ figma.ui.onmessage = msg => {
 
     checkType(node, errors);
     checkFills(node, errors);
+
+    // We could also comment out checkFills and use a custom function instead
+    // Take a look at line 122 in lintingFunction.ts for an example.
+    // customCheckTextFills(node, errors);
     checkEffects(node, errors);
     checkStrokes(node, errors);
 

src/plugin/lintingFunctions.ts

@@ -117,6 +117,58 @@ export function checkRadius(node, errors, radiusValues) {
   }
 }
 
+// Custom Lint rule that isn't being used yet!
+// that ensures our text fills aren't design tokens/styles meant for backgrounds.
+export function customCheckTextFills(node, errors) {
+  // Here we create an array of style keys (https://www.figma.com/plugin-docs/api/PaintStyle/#key)
+  // that we want to make sure our text layers aren't using.
+
+  const fillsToCheck = [
+    "4b93d40f61be15e255e87948a715521c3ae957e6"
+    // To collect style keys, use a plugin like Inspector, or use console commands like figma.getLocalPaintStyles();
+    // in your design system file.
+  ];
+
+  let nodeFillStyle = node.fillStyleId;
+
+  // If there are multiple text styles on a single text layer, we can't lint it
+  // we can return an error instead.
+  if (typeof nodeFillStyle === "symbol") {
+    return errors.push(
+      createErrorObject(
+        node, // Node object we use to reference the error (id, layer name, etc)
+        "fill", // Type of error (fill, text, effect, etc)
+        "Mixing two styles together", // Message we show to the user
+        "Multiple Styles" // Normally we return a hex value here
+      )
+    );
+  }
+
+  // We strip the additional style key characters so we can check
+  // to see if the fill is being used incorrectly.
+  nodeFillStyle = nodeFillStyle.replace("S:", "");
+  nodeFillStyle = nodeFillStyle.split(",")[0];
+
+  // If the node (layer) has a fill style, then check to see if there's an error.
+  if (nodeFillStyle !== "") {
+    // If we find the layer has a fillStyle that matches in the array create an error.
+    if (fillsToCheck.includes(nodeFillStyle)) {
+      return errors.push(
+        createErrorObject(
+          node, // Node object we use to reference the error (id, layer name, etc)
+          "fill", // Type of error (fill, text, effect, etc)
+          "Incorrect text color use", // Message we show to the user
+          "Using a background color on a text layer" // Determines the fill, so we can show a hex value.
+        )
+      );
+    }
+    // If there is no fillStyle on this layer,
+    // check to see why with our default linting function for fills.
+  } else {
+    checkFills(node, errors);
+  }
+}
+
 // Check for effects like shadows, blurs etc.
 export function checkEffects(node, errors) {
   if (node.effects.length) {