Fixing the primer/colors and primer/borders rules (#111)

* Fixing the primer/colors and primer/borders rules * Updating the tests * Create quiet-mugs-turn.md * Fixing error links
primer · Sep 8, 2021 · 3a4654b · 3a4654b
1 parent 027106f
commit 3a4654b
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 17 deletions.
diff --git a/.changeset/quiet-mugs-turn.md b/.changeset/quiet-mugs-turn.md
@@ -0,0 +1,5 @@
+---
+"stylelint-config-primer": patch
+---
+
+Fixing the primer/colors and primer/borders rules
diff --git a/__tests__/borders.js b/__tests__/borders.js
@@ -88,6 +88,7 @@ describe(ruleName, () => {
           .y { border-color: var(--color-btn-border-hover); }
           .z { border-color: var(--color-diff-deletion-border); }
           .a { border-color: var(--color-border); }
+          .a { border-color: var(--color-accent); }
         `,
         config: configWithOptions(true)
       })

diff --git a/__tests__/colors.js b/__tests__/colors.js
@@ -22,7 +22,7 @@ describe(ruleName, () => {
         expect(data).toHaveErrored()
         expect(data).toHaveWarningsLength(1)
         expect(data).toHaveWarnings([
-          `Please use a text color variable instead of "#f00". See https://primer.style/css/utilities/colors. (${ruleName})`
+          `Please use a text color variable instead of "#f00". See https://primer.style/primitives/colors. (${ruleName})`
         ])
       })
   })
@@ -84,7 +84,7 @@ describe(ruleName, () => {
         expect(data).toHaveErrored()
         expect(data).toHaveWarningsLength(1)
         expect(data).toHaveWarnings([
-          `Please use a background color variable instead of "$red". See https://primer.style/css/utilities/colors. (${ruleName})`
+          `Please use a background color variable instead of "$red". See https://primer.style/primitives/colors. (${ruleName})`
         ])
       })
   })
@@ -109,6 +109,7 @@ describe(ruleName, () => {
         .y { background-color: var(--color-btn-bg-hover); }
         .z { background-color: var(--color-diff-deletion-bg); }
         .a { background-color: var(--color-bg); }
+        .a { background-color: var(--color-accent); }
       `,
         config: configWithOptions(true)
       })
@@ -125,7 +126,8 @@ describe(ruleName, () => {
           .x { color: var(--color-text-primary); }
           .y { color: var(--color-btn-text-hover); }
           .z { color: var(--color-diff-deletion-text); }
-          .a { color: var(--color-text); }
+          .a { color: var(--color-fg); }
+          .a { color: var(--color-accent); }
         `,
         config: configWithOptions(true)
       })
@@ -145,7 +147,7 @@ describe(ruleName, () => {
         expect(data).toHaveErrored()
         expect(data).toHaveWarningsLength(1)
         expect(data).toHaveWarnings([
-          `Please use a background color variable instead of "red". See https://primer.style/css/utilities/colors. (${ruleName})`
+          `Please use a background color variable instead of "red". See https://primer.style/primitives/colors. (${ruleName})`
         ])
       })
   })
@@ -218,7 +220,7 @@ describe(ruleName, () => {
         expect(data).toHaveErrored()
         expect(data).toHaveWarningsLength(1)
         expect(data).toHaveWarnings([
-          `Please use a text color variable instead of "#f00". See https://primer.style/css/utilities/colors. (${ruleName})`
+          `Please use a text color variable instead of "#f00". See https://primer.style/primitives/colors. (${ruleName})`
         ])
       })
   })
@@ -239,7 +241,7 @@ describe(ruleName, () => {
         expect(data).toHaveErrored()
         expect(data).toHaveWarningsLength(1)
         expect(data).toHaveWarnings([
-          `Please use a text color variable instead of "#f00". See https://primer.style/css/utilities/colors. (${ruleName})`
+          `Please use a text color variable instead of "#f00". See https://primer.style/primitives/colors. (${ruleName})`
         ])
       })
   })

diff --git a/plugins/borders.js b/plugins/borders.js
@@ -32,7 +32,8 @@ module.exports = createVariableRule(
         'transparent',
         'currentColor',
         // Match variables in any of the following formats: --color-border-*, --color-*-border-*, --color-*-border
-        /var\(--color-(.+-)*border(-.+)*\)/
+        /var\(--color-(.+-)*border(-.+)*\)/,
+        /var\(--color-[^)]+\)/
       ],
       replacements: {
         '$border-gray': '$border-color'

diff --git a/plugins/colors.js b/plugins/colors.js
@@ -4,7 +4,8 @@ const bgVars = [
   '$bg-*',
   '$tooltip-background-color',
   // Match variables in any of the following formats: --color-bg-*, --color-*-bg-*, --color-*-bg
-  /var\(--color-(.+-)*bg(-.+)*\)/
+  /var\(--color-(.+-)*bg(-.+)*\)/,
+  /var\(--color-[^)]+\)/
 ]
 
 module.exports = createVariableRule(
@@ -26,15 +27,11 @@ module.exports = createVariableRule(
         '$tooltip-text-color',
         'inherit',
         // Match variables in any of the following formats: --color-text-*, --color-*-text-*, --color-*-text
-        /var\(--color-(.+-)*text(-.+)*\)/
-      ],
-      replacements: {
-        '#fff': '$text-white',
-        white: '$text-white',
-        '#000': '$text-gray-dark',
-        black: '$black'
-      }
+        /var\(--color-(.+-)*text(-.+)*\)/,
+        /var\(--color-(.+-)*fg(-.+)*\)/,
+        /var\(--color-[^)]+\)/
+      ]
     }
   },
-  'https://primer.style/css/utilities/colors'
+  'https://primer.style/primitives/colors'
 )