add colors from new palette

Author: John Earle

README.md

@@ -6,63 +6,56 @@ Winter '21 version of the Salesforce Lightning Design System
 
 ## About Sketch Assistants
 
-First time using a Sketch Assistant? Read Sketch's help documentation [here](https://www.sketch.com/docs/assistants/). 
+First time using a Sketch Assistant?
+[Read Sketch's help documentation](https://www.sketch.com/docs/assistants/).
 
 ## Versions
 
 Make sure you are validating against the correct SLDS release.
 
-| Linter Version | SLDS Release | URL (Copy and paste in browser to download.)                                                                                                      |
-| -------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 1.0.5          | Winter '21   | sketch://add-assistant?url=<br/>h<span>tt</span>ps://registry.npmjs.org/lightning-design-system-linter/-/lightning-design-system-linter-1.0.5.tgz |
+| Linter Version | SLDS Release    | URL (Copy and paste in browser to download.)                                                                                                      |
+| -------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 1.0.5          | Winter '21 Only | sketch://add-assistant?url=<br/>h<span>tt</span>ps://registry.npmjs.org/lightning-design-system-linter/-/lightning-design-system-linter-1.0.5.tgz |
 
 ## Linter Rules
 
 <h3 id='lightning-design-system-linter/fill-color'>Fill Color</h3>
 
 Fill colors should match SLDS background or generic color token values.
 
-- See available **background color** tokens
-  [here](https://www.lightningdesignsystem.com/design-tokens/#category-background-color).
-- See available **generic color** tokens
-  [here](https://www.lightningdesignsystem.com/design-tokens/#category-color).
+- [See available **background color** tokens.](https://www.lightningdesignsystem.com/design-tokens/#category-background-color)
+- [See available **generic color** tokens.](https://www.lightningdesignsystem.com/design-tokens/#category-color)
 
 ---
 
 <h3 id='lightning-design-system-linter/border-color'>Border Color</h3>
 
 Border colors should match SLDS border or generic color token values.
 
-- See available **border color** tokens
-  [here](https://www.lightningdesignsystem.com/design-tokens/#category-border-color).
-- See available **generic color** tokens
-  [here](https://www.lightningdesignsystem.com/design-tokens/#category-color).
+- [See available **border color** tokens.](https://www.lightningdesignsystem.com/design-tokens/#category-border-color)
+- [See available **generic color** tokens.](https://www.lightningdesignsystem.com/design-tokens/#category-color)
 
 ---
 
 <h3 id='lightning-design-system-linter/text-color'>Text Color</h3>
 
 Text colors should match SLDS text or generic color token values.
 
-- See available **text color** tokens
-  [here](https://www.lightningdesignsystem.com/design-tokens/#category-text-color).
-- See available **generic color** tokens
-  [here](https://www.lightningdesignsystem.com/design-tokens/#category-color).
+- [See available **text color** tokens.](https://www.lightningdesignsystem.com/design-tokens/#category-text-color)
+- [See available **generic color** tokens.](https://www.lightningdesignsystem.com/design-tokens/#category-color)
 
 ---
 
 <h3 id='lightning-design-system-linter/text-size'>Text Size</h3>
 
 Text sizes should match SLDS font size token values.
 
-- See available **font size** tokens
-  [here](https://www.lightningdesignsystem.com/design-tokens/#category-font-size).
+- [See available **font size** tokens.](https://www.lightningdesignsystem.com/design-tokens/#category-font-size)
 
 ---
 
 <h3 id='lightning-design-system-linter/font'>Font Family</h3>
 
 All text should use the Salesforce Sans font family.
 
-- Download Salesforce Sans from
-  [Github](https://github.com/salesforce-ux/design-system/tree/master/assets/fonts).
+- [Download Salesforce Sans from Github.](https://github.com/salesforce-ux/design-system/tree/master/assets/fonts)

package-lock.json

@@ -1,13 +1,13 @@
 {
   "name": "lightning-design-system-linter",
   "homepage": "https://github.com/salesforce-ux/lightning-design-system-linter",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "sketch": "dist/sketch.js",
   "license": "MIT",
   "sketch-assistant": {
     "title": "Lightning Design System Linter",
-    "description": "[Winter '21 release]\nA Sketch Assistant for the Salesforce Lightning Design System.",
+    "description": "A Sketch Assistant for the Salesforce Lightning Design System.",
     "icon": "https://user-images.githubusercontent.com/7698220/91777276-456a9c00-eba4-11ea-92bd-e2b1315ab270.png"
   },
   "author": {
@@ -46,6 +46,8 @@
     "webpack-cli": "3.3.12"
   },
   "dependencies": {
-    "@sketch-hq/sketch-assistant-types": "6.0.0"
+    "@sketch-hq/sketch-assistant-types": "6.0.0",
+    "@types/parse-color": "^1.0.0",
+    "parse-color": "^1.0.0"
   }
 }

package.json

@@ -6,20 +6,25 @@ import * as primitiveTokens from '../design-tokens/primitive.json'
 import * as actionIconTokens from '../design-tokens/bg-actions.json'
 import * as standardIconTokens from '../design-tokens/bg-standard.json'
 import * as customIconTokens from '../design-tokens/bg-custom.json'
+import * as newPaletteValues from '../design-tokens/new-palette.json'
 
 import Assistant from '..'
 
+const newPaletteLength = Object.keys(newPaletteValues).length - 1
+
 test('border-color', async () => {
   const { violations, ruleErrors } = await testAssistant(
     resolve(__dirname, './test.sketch'),
     Assistant,
   )
-  const borderColorViolations = violations.find(
+  const borderColorViolations = violations.filter(
     (v) => v.ruleName === 'lightning-design-system-linter/border-color',
-  )?.objects
+  )
 
   expect(borderColorViolations?.length).toBe(1)
-  expect(borderColorViolations ? borderColorViolations[0].name : null).toBe('Bad Rectangle')
+  expect(borderColorViolations ? borderColorViolations[0].objects[0].name : null).toBe(
+    'Bad Rectangle',
+  )
   expect(ruleErrors).toHaveLength(0)
 })
 
@@ -28,12 +33,13 @@ test('fill-color', async () => {
     resolve(__dirname, './test.sketch'),
     Assistant,
   )
-  const fillColorViolations = violations.find(
+
+  const fillColorViolations = violations.filter(
     (v) => v.ruleName === 'lightning-design-system-linter/fill-color',
-  )?.objects
+  )
 
   expect(fillColorViolations?.length).toBe(1)
-  expect(fillColorViolations ? fillColorViolations[0].name : null).toBe('Bad Rectangle')
+  expect(fillColorViolations ? fillColorViolations[0].objects[0].name : null).toBe('Bad Rectangle')
   expect(ruleErrors).toHaveLength(0)
 })
 
@@ -42,12 +48,13 @@ test('text-color', async () => {
     resolve(__dirname, './test.sketch'),
     Assistant,
   )
-  const textColorViolations = violations.find(
+  const textColorViolations = violations.filter(
     (v) => v.ruleName === 'lightning-design-system-linter/text-color',
-  )?.objects
+  )
 
   expect(textColorViolations?.length).toBe(1)
-  expect(textColorViolations ? textColorViolations[0].name : null).toBe('Bad Text')
+
+  expect(textColorViolations ? textColorViolations[0].objects[0].name : null).toBe('Bad Text')
   expect(ruleErrors).toHaveLength(0)
 })
 
@@ -56,12 +63,12 @@ test('text-font', async () => {
     resolve(__dirname, './test.sketch'),
     Assistant,
   )
-  const fontFamilyViolations = violations.find(
+  const fontFamilyViolations = violations.filter(
     (v) => v.ruleName === 'lightning-design-system-linter/font',
-  )?.objects
+  )
 
   expect(fontFamilyViolations?.length).toBe(1)
-  expect(fontFamilyViolations ? fontFamilyViolations[0].name : null).toBe('Bad Text')
+  expect(fontFamilyViolations ? fontFamilyViolations[0].objects[0].name : null).toBe('Bad Text')
   expect(ruleErrors).toHaveLength(0)
 })
 
@@ -70,12 +77,12 @@ test('text-size', async () => {
     resolve(__dirname, './test.sketch'),
     Assistant,
   )
-  const fontSizeViolations = violations.find(
+  const fontSizeViolations = violations.filter(
     (v) => v.ruleName === 'lightning-design-system-linter/text-size',
-  )?.objects
+  )
 
   expect(fontSizeViolations?.length).toBe(1)
-  expect(fontSizeViolations ? fontSizeViolations[0].name : null).toBe('Bad Text')
+  expect(fontSizeViolations ? fontSizeViolations[0].objects[0].name : null).toBe('Bad Text')
   expect(ruleErrors).toHaveLength(0)
 })
 
@@ -86,21 +93,22 @@ test('getBackgroundColors', async () => {
     .concat(standardIconTokens.properties)
     .concat(customIconTokens.properties)
 
-  expect(getBackgroundColors()).toHaveLength(tokens.length)
+  expect(getBackgroundColors()).toHaveLength(tokens.length + newPaletteLength)
 })
 
 test('getBorderColors', async () => {
   const tokens = primitiveTokens.properties.filter(
     (p) => p.category === 'border-color' || p.category === 'color',
   )
-  expect(getBorderColors()).toHaveLength(tokens.length)
+  expect(getBorderColors()).toHaveLength(tokens.length + newPaletteLength)
 })
 
 test('getTextColors', async () => {
   const tokens = primitiveTokens.properties.filter(
     (p) => p.category === 'text-color' || p.category === 'color',
   )
-  expect(getTextColors()).toHaveLength(tokens.length)
+
+  expect(getTextColors()).toHaveLength(tokens.length + newPaletteLength)
 })
 
 test('getFontSizes', async () => {