Update new-color-css-vars to exclude scale colors (#382)

* fix test to exclude things

* Create funny-kings-allow.md

.changeset/funny-kings-allow.md

@@ -0,0 +1,5 @@
+---
+"@primer/stylelint-config": patch
+---
+
+Update `new-color-css-vars` to exclude scale colors

plugins/lib/new-color-css-vars-map.json

@@ -0,0 +1,279 @@
+[
+  "--topicTag-borderColor",
+  "--highlight-neutral-bgColor",
+  "--page-header-bgColor",
+  "--diffBlob-addition-fgColor-text",
+  "--diffBlob-addition-fgColor-num",
+  "--diffBlob-addition-bgColor-num",
+  "--diffBlob-addition-bgColor-line",
+  "--diffBlob-addition-bgColor-word",
+  "--diffBlob-deletion-fgColor-text",
+  "--diffBlob-deletion-fgColor-num",
+  "--diffBlob-deletion-bgColor-num",
+  "--diffBlob-deletion-bgColor-line",
+  "--diffBlob-deletion-bgColor-word",
+  "--diffBlob-hunk-bgColor-num",
+  "--diffBlob-expander-iconColor",
+  "--codeMirror-fgColor",
+  "--codeMirror-bgColor",
+  "--codeMirror-gutters-bgColor",
+  "--codeMirror-gutterMarker-fgColor-default",
+  "--codeMirror-gutterMarker-fgColor-muted",
+  "--codeMirror-lineNumber-fgColor",
+  "--codeMirror-cursor-fgColor",
+  "--codeMirror-selection-bgColor",
+  "--codeMirror-activeline-bgColor",
+  "--codeMirror-matchingBracket-fgColor",
+  "--codeMirror-lines-bgColor",
+  "--codeMirror-syntax-fgColor-comment",
+  "--codeMirror-syntax-fgColor-constant",
+  "--codeMirror-syntax-fgColor-entity",
+  "--codeMirror-syntax-fgColor-keyword",
+  "--codeMirror-syntax-fgColor-storage",
+  "--codeMirror-syntax-fgColor-string",
+  "--codeMirror-syntax-fgColor-support",
+  "--codeMirror-syntax-fgColor-variable",
+  "--header-fgColor-default",
+  "--header-fgColor-logo",
+  "--header-bgColor",
+  "--header-borderColor-divider",
+  "--headerSearch-bgColor",
+  "--headerSearch-borderColor",
+  "--avatar-bgColor",
+  "--avatar-borderColor",
+  "--avatar-shadow",
+  "--avatarStack-fade-bgColor-default",
+  "--avatarStack-fade-bgColor-muted",
+  "--control-bgColor-rest",
+  "--control-bgColor-hover",
+  "--control-bgColor-active",
+  "--control-bgColor-disabled",
+  "--control-bgColor-selected",
+  "--control-fgColor-rest",
+  "--control-fgColor-placeholder",
+  "--control-fgColor-disabled",
+  "--control-borderColor-rest",
+  "--control-borderColor-emphasis",
+  "--control-borderColor-disabled",
+  "--control-borderColor-selected",
+  "--control-borderColor-success",
+  "--control-borderColor-danger",
+  "--control-borderColor-warning",
+  "--control-iconColor-rest",
+  "--control-transparent-bgColor-rest",
+  "--control-transparent-bgColor-hover",
+  "--control-transparent-bgColor-active",
+  "--control-transparent-bgColor-disabled",
+  "--control-transparent-bgColor-selected",
+  "--control-transparent-borderColor-rest",
+  "--control-transparent-borderColor-hover",
+  "--control-transparent-borderColor-active",
+  "--control-danger-fgColor-rest",
+  "--control-danger-fgColor-hover",
+  "--control-danger-bgColor-hover",
+  "--control-danger-bgColor-active",
+  "--control-checked-bgColor-rest",
+  "--control-checked-bgColor-hover",
+  "--control-checked-bgColor-active",
+  "--control-checked-bgColor-disabled",
+  "--control-checked-fgColor-rest",
+  "--control-checked-fgColor-disabled",
+  "--control-checked-borderColor-rest",
+  "--control-checked-borderColor-hover",
+  "--control-checked-borderColor-active",
+  "--control-checked-borderColor-disabled",
+  "--controlTrack-bgColor-rest",
+  "--controlTrack-bgColor-hover",
+  "--controlTrack-bgColor-active",
+  "--controlTrack-bgColor-disabled",
+  "--controlTrack-fgColor-rest",
+  "--controlTrack-fgColor-disabled",
+  "--controlTrack-borderColor-rest",
+  "--controlTrack-borderColor-disabled",
+  "--controlKnob-bgColor-rest",
+  "--controlKnob-bgColor-disabled",
+  "--controlKnob-bgColor-checked",
+  "--controlKnob-borderColor-rest",
+  "--controlKnob-borderColor-disabled",
+  "--controlKnob-borderColor-checked",
+  "--counter-borderColor",
+  "--button-default-fgColor-rest",
+  "--button-default-bgColor-rest",
+  "--button-default-bgColor-hover",
+  "--button-default-bgColor-active",
+  "--button-default-bgColor-selected",
+  "--button-default-bgColor-disabled",
+  "--button-default-borderColor-rest",
+  "--button-default-borderColor-hover",
+  "--button-default-borderColor-active",
+  "--button-default-borderColor-disabled",
+  "--button-default-shadow-resting",
+  "--button-primary-fgColor-rest",
+  "--button-primary-fgColor-disabled",
+  "--button-primary-iconColor-rest",
+  "--button-primary-bgColor-rest",
+  "--button-primary-bgColor-hover",
+  "--button-primary-bgColor-active",
+  "--button-primary-bgColor-disabled",
+  "--button-primary-borderColor-rest",
+  "--button-primary-borderColor-hover",
+  "--button-primary-borderColor-active",
+  "--button-primary-borderColor-disabled",
+  "--button-primary-shadow-selected",
+  "--button-invisible-fgColor-rest",
+  "--button-invisible-fgColor-hover",
+  "--button-invisible-fgColor-disabled",
+  "--button-invisible-iconColor-rest",
+  "--button-invisible-iconColor-hover",
+  "--button-invisible-iconColor-disabled",
+  "--button-invisible-bgColor-rest",
+  "--button-invisible-bgColor-hover",
+  "--button-invisible-bgColor-active",
+  "--button-invisible-bgColor-disabled",
+  "--button-invisible-borderColor-rest",
+  "--button-invisible-borderColor-hover",
+  "--button-invisible-borderColor-disabled",
+  "--button-outline-fgColor-rest",
+  "--button-outline-fgColor-hover",
+  "--button-outline-fgColor-active",
+  "--button-outline-fgColor-disabled",
+  "--button-outline-bgColor-rest",
+  "--button-outline-bgColor-hover",
+  "--button-outline-bgColor-active",
+  "--button-outline-bgColor-disabled",
+  "--button-outline-borderColor-hover",
+  "--button-outline-borderColor-selected",
+  "--button-outline-shadow-selected",
+  "--button-danger-fgColor-rest",
+  "--button-danger-fgColor-hover",
+  "--button-danger-fgColor-active",
+  "--button-danger-fgColor-disabled",
+  "--button-danger-iconColor-rest",
+  "--button-danger-iconColor-hover",
+  "--button-danger-bgColor-rest",
+  "--button-danger-bgColor-hover",
+  "--button-danger-bgColor-active",
+  "--button-danger-bgColor-disabled",
+  "--button-danger-borderColor-rest",
+  "--button-danger-borderColor-hover",
+  "--button-danger-borderColor-active",
+  "--button-danger-shadow-selected",
+  "--button-inactive-fgColor-rest",
+  "--button-inactive-bgColor-rest",
+  "--buttonCounter-default-bgColor-rest",
+  "--buttonCounter-invisible-bgColor-rest",
+  "--buttonCounter-primary-bgColor-rest",
+  "--buttonCounter-outline-bgColor-rest",
+  "--buttonCounter-outline-bgColor-hover",
+  "--buttonCounter-outline-bgColor-disabled",
+  "--buttonCounter-outline-fgColor-rest",
+  "--buttonCounter-outline-fgColor-hover",
+  "--buttonCounter-outline-fgColor-disabled",
+  "--buttonCounter-danger-bgColor-hover",
+  "--buttonCounter-danger-bgColor-disabled",
+  "--buttonCounter-danger-bgColor-rest",
+  "--buttonCounter-danger-fgColor-rest",
+  "--buttonCounter-danger-fgColor-hover",
+  "--buttonCounter-danger-fgColor-disabled",
+  "--focus-outlineColor",
+  "--menu-bgColor-active",
+  "--overlay-bgColor",
+  "--overlay-backdrop-bgColor",
+  "--selectMenu-borderColor",
+  "--selectMenu-bgColor-active",
+  "--sideNav-bgColor-selected",
+  "--skeletonLoader-bgColor",
+  "--timelineBadge-bgColor",
+  "--treeViewItem-leadingVisual-iconColor-rest",
+  "--underlineNav-borderColor-active",
+  "--underlineNav-borderColor-hover",
+  "--underlineNav-iconColor-rest",
+  "--fgColor-default",
+  "--fgColor-muted",
+  "--fgColor-onEmphasis",
+  "--fgColor-onInverse",
+  "--fgColor-disabled",
+  "--fgColor-link",
+  "--fgColor-link-onInverse",
+  "--fgColor-neutral",
+  "--fgColor-neutral-onInverse",
+  "--fgColor-accent",
+  "--fgColor-accent-onInverse",
+  "--fgColor-success",
+  "--fgColor-success-onInverse",
+  "--fgColor-attention",
+  "--fgColor-attention-onInverse",
+  "--fgColor-severe",
+  "--fgColor-severe-onInverse",
+  "--fgColor-danger",
+  "--fgColor-danger-onInverse",
+  "--fgColor-open",
+  "--fgColor-open-onInverse",
+  "--fgColor-closed",
+  "--fgColor-closed-onInverse",
+  "--fgColor-done",
+  "--fgColor-done-onInverse",
+  "--fgColor-sponsors",
+  "--fgColor-sponsors-onInverse",
+  "--bgColor-default",
+  "--bgColor-muted",
+  "--bgColor-inset",
+  "--bgColor-emphasis",
+  "--bgColor-inverse",
+  "--bgColor-disabled",
+  "--bgColor-transparent",
+  "--bgColor-neutral-muted",
+  "--bgColor-neutral-emphasis",
+  "--bgColor-accent-muted",
+  "--bgColor-accent-emphasis",
+  "--bgColor-success-muted",
+  "--bgColor-success-emphasis",
+  "--bgColor-attention-muted",
+  "--bgColor-attention-emphasis",
+  "--bgColor-severe-muted",
+  "--bgColor-severe-emphasis",
+  "--bgColor-danger-muted",
+  "--bgColor-danger-emphasis",
+  "--bgColor-open-muted",
+  "--bgColor-open-emphasis",
+  "--bgColor-closed-muted",
+  "--bgColor-closed-emphasis",
+  "--bgColor-done-muted",
+  "--bgColor-done-emphasis",
+  "--bgColor-sponsors-muted",
+  "--bgColor-sponsors-emphasis",
+  "--borderColor-default",
+  "--borderColor-muted",
+  "--borderColor-emphasis",
+  "--borderColor-disabled",
+  "--borderColor-transparent",
+  "--borderColor-neutral-muted",
+  "--borderColor-neutral-emphasis",
+  "--borderColor-accent-muted",
+  "--borderColor-accent-emphasis",
+  "--borderColor-success-muted",
+  "--borderColor-success-emphasis",
+  "--borderColor-attention-muted",
+  "--borderColor-attention-emphasis",
+  "--borderColor-severe-muted",
+  "--borderColor-severe-emphasis",
+  "--borderColor-danger-muted",
+  "--borderColor-danger-emphasis",
+  "--borderColor-open-muted",
+  "--borderColor-open-emphasis",
+  "--borderColor-closed-muted",
+  "--borderColor-closed-emphasis",
+  "--borderColor-done-muted",
+  "--borderColor-done-emphasis",
+  "--borderColor-sponsors-muted",
+  "--borderColor-sponsors-emphasis",
+  "--shadow-inset",
+  "--shadow-resting-xsmall",
+  "--shadow-resting-small",
+  "--shadow-resting-medium",
+  "--shadow-floating-small",
+  "--shadow-floating-medium",
+  "--shadow-floating-large",
+  "--shadow-floating-xlarge",
+  "--outline-focus"
+]

plugins/new-color-vars-have-fallback.js

@@ -6,38 +6,25 @@ const messages = stylelint.utils.ruleMessages(ruleName, {
     `Expected a fallback value for CSS variable ${variable}. New color variables fallbacks, check primer.style/primitives to find the correct value`,
 })
 
-const fs = require('fs')
-const path = require('path')
-
-const jsonFilePath = 'node_modules/@primer/primitives/tokens-next-private/docs/functional/themes/light.json'
-let jsonContent
-
-try {
-  const fileContent = fs.readFileSync(path.resolve(jsonFilePath), 'utf8')
-  jsonContent = JSON.parse(fileContent)
-  // console.log('JSON content:', jsonContent) // Log to see the content
-} catch (error) {
-  // eslint-disable-next-line no-console
-  console.error('Error reading JSON file:', error)
-}
-
 module.exports = stylelint.createPlugin(ruleName, enabled => {
+  const variables = require('./lib/new-color-css-vars-map.json')
+
   if (!enabled) {
     return noop
   }
 
   return (root, result) => {
-    root.walkDecls(decl => {
-      for (const key of Object.keys(jsonContent)) {
-        if (decl.value.includes(`var(--${key})`)) {
+    root.walkDecls(node => {
+      for (const variable of variables) {
+        if (node.value.includes(`var(${variable})`)) {
           // Check if the declaration uses a CSS variable from the JSON
-          const match = decl.value.match(/var\(--\w+,(.*)\)/)
+          const match = node.value.match(new RegExp(`var\\(${variable},(.*)\\)`))
           if (!match || match[1].trim() === '') {
             stylelint.utils.report({
               ruleName,
               result,
-              node: decl,
-              message: messages.expectedFallback(`--${key}`),
+              node,
+              message: messages.expectedFallback(variable),
             })
           }
         }