Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scope some borders to also effectColor #1196

Merged
merged 1 commit into from
Mar 20, 2025

Conversation

lukasoppermann
Copy link
Contributor

Summary

This allows to use some border colors as shadows in Figma, needed for specific workarounds.

@lukasoppermann lukasoppermann added the skip changeset Apply to PRs that should not result in a version bump. label Mar 20, 2025
@lukasoppermann lukasoppermann self-assigned this Mar 20, 2025
@lukasoppermann lukasoppermann requested review from a team as code owners March 20, 2025 12:14
@lukasoppermann lukasoppermann requested a review from jonrohan March 20, 2025 12:14
Copy link
Contributor

Design Token Diff (StyleLint)

/styleLint/functional/themes/dark-colorblind.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-colorblind.json	2025-03-20 12:15:49.905760086 +0000
@@ -2227,7 +2227,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
       }
@@ -2242,7 +2242,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
         }
@@ -2261,7 +2261,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
       }
@@ -2294,7 +2294,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
         }
@@ -2741,7 +2741,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-default) /* utility class: .color-border-default */"
       }
@@ -2762,7 +2762,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-default) /* utility class: .color-border-default */"
         }
@@ -2781,7 +2781,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "dark-dimmed": {
@@ -2810,7 +2810,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "dark-dimmed": {
@@ -2947,7 +2947,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "light-high-contrast": "#3d444d",
@@ -2963,7 +2963,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": "{borderColor.default}",
@@ -2983,7 +2983,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
       }
@@ -3022,7 +3022,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
         }
@@ -3677,7 +3677,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "light-high-contrast": {
@@ -3706,7 +3706,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": {
@@ -3739,7 +3739,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     }
   },
   "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3751,7 +3751,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       }
     }
   },

/styleLint/functional/themes/dark-dimmed.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-dimmed.json	2025-03-20 12:15:46.675749990 +0000
@@ -2223,7 +2223,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
       }
@@ -2238,7 +2238,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
         }
@@ -2257,7 +2257,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
       }
@@ -2290,7 +2290,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
         }
@@ -2735,7 +2735,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-default) /* utility class: .color-border-default */"
       }
@@ -2756,7 +2756,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-default) /* utility class: .color-border-default */"
         }
@@ -2775,7 +2775,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "dark-dimmed": {
@@ -2804,7 +2804,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "dark-dimmed": {
@@ -2941,7 +2941,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "light-high-contrast": "#3d444d",
@@ -2957,7 +2957,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": "{borderColor.default}",
@@ -2977,7 +2977,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
       }
@@ -3016,7 +3016,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
         }
@@ -3671,7 +3671,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "light-high-contrast": {
@@ -3700,7 +3700,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": {
@@ -3733,7 +3733,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     }
   },
   "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3745,7 +3745,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       }
     }
   },

/styleLint/functional/themes/dark-high-contrast.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-high-contrast.json	2025-03-20 12:15:51.464762946 +0000
@@ -2223,7 +2223,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
       }
@@ -2238,7 +2238,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
         }
@@ -2257,7 +2257,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
       }
@@ -2290,7 +2290,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
         }
@@ -2735,7 +2735,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-default) /* utility class: .color-border-default */"
       }
@@ -2756,7 +2756,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-default) /* utility class: .color-border-default */"
         }
@@ -2775,7 +2775,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "dark-dimmed": {
@@ -2804,7 +2804,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "dark-dimmed": {
@@ -2941,7 +2941,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "light-high-contrast": "#b7bdc8",
@@ -2957,7 +2957,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": "{borderColor.default}",
@@ -2977,7 +2977,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
       }
@@ -3016,7 +3016,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
         }
@@ -3669,7 +3669,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "light-high-contrast": {
@@ -3698,7 +3698,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": {
@@ -3731,7 +3731,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     }
   },
   "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3743,7 +3743,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       }
     }
   },

/styleLint/functional/themes/dark-tritanopia.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-tritanopia.json	2025-03-20 12:15:48.221751400 +0000
@@ -2227,7 +2227,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
       }
@@ -2242,7 +2242,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
         }
@@ -2261,7 +2261,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
       }
@@ -2294,7 +2294,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
         }
@@ -2741,7 +2741,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-default) /* utility class: .color-border-default */"
       }
@@ -2762,7 +2762,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-default) /* utility class: .color-border-default */"
         }
@@ -2781,7 +2781,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "dark-dimmed": {
@@ -2810,7 +2810,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "dark-dimmed": {
@@ -2947,7 +2947,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "light-high-contrast": "#3d444d",
@@ -2963,7 +2963,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": "{borderColor.default}",
@@ -2983,7 +2983,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
       }
@@ -3022,7 +3022,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
         }
@@ -3677,7 +3677,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "light-high-contrast": {
@@ -3706,7 +3706,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": {
@@ -3739,7 +3739,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     }
   },
   "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3751,7 +3751,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       }
     }
   },

/styleLint/functional/themes/dark.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark.json	2025-03-20 12:15:45.007752676 +0000
@@ -2223,7 +2223,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
       }
@@ -2238,7 +2238,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
         }
@@ -2257,7 +2257,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
       }
@@ -2290,7 +2290,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
         }
@@ -2735,7 +2735,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-default) /* utility class: .color-border-default */"
       }
@@ -2756,7 +2756,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-default) /* utility class: .color-border-default */"
         }
@@ -2775,7 +2775,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "dark-dimmed": {
@@ -2804,7 +2804,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "dark-dimmed": {
@@ -2941,7 +2941,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "light-high-contrast": "#3d444d",
@@ -2957,7 +2957,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": "{borderColor.default}",
@@ -2977,7 +2977,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
       }
@@ -3016,7 +3016,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
         }
@@ -3669,7 +3669,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "light-high-contrast": {
@@ -3698,7 +3698,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": {
@@ -3731,7 +3731,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     }
   },
   "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3743,7 +3743,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       }
     }
   },

/styleLint/functional/themes/light-colorblind.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-colorblind.json	2025-03-20 12:15:41.746757926 +0000
@@ -2207,7 +2207,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
       }
@@ -2222,7 +2222,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
         }
@@ -2241,7 +2241,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
       }
@@ -2274,7 +2274,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
         }
@@ -2721,7 +2721,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-default) /* utility class: .color-border-default */"
       }
@@ -2742,7 +2742,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-default) /* utility class: .color-border-default */"
         }
@@ -2761,7 +2761,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "dark-dimmed": {
@@ -2790,7 +2790,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "dark-dimmed": {
@@ -2927,7 +2927,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "light-high-contrast": "#d1d9e0",
@@ -2943,7 +2943,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": "{borderColor.default}",
@@ -2963,7 +2963,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
       }
@@ -3002,7 +3002,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
         }
@@ -3657,7 +3657,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "light-high-contrast": {
@@ -3686,7 +3686,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": {
@@ -3719,7 +3719,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     }
   },
   "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3731,7 +3731,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       }
     }
   },

/styleLint/functional/themes/light-high-contrast.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-high-contrast.json	2025-03-20 12:15:43.395755271 +0000
@@ -2207,7 +2207,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
       }
@@ -2222,7 +2222,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
         }
@@ -2241,7 +2241,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
       }
@@ -2274,7 +2274,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
         }
@@ -2719,7 +2719,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-default) /* utility class: .color-border-default */"
       }
@@ -2740,7 +2740,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-default) /* utility class: .color-border-default */"
         }
@@ -2759,7 +2759,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "dark-dimmed": {
@@ -2788,7 +2788,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "dark-dimmed": {
@@ -2925,7 +2925,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "light-high-contrast": "#454c54",
@@ -2941,7 +2941,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": "{borderColor.default}",
@@ -2961,7 +2961,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
       }
@@ -3000,7 +3000,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
         }
@@ -3653,7 +3653,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "light-high-contrast": {
@@ -3682,7 +3682,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": {
@@ -3715,7 +3715,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     }
   },
   "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3727,7 +3727,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       }
     }
   },

/styleLint/functional/themes/light-tritanopia.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-tritanopia.json	2025-03-20 12:15:40.209760401 +0000
@@ -2207,7 +2207,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
       }
@@ -2222,7 +2222,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
         }
@@ -2241,7 +2241,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
       }
@@ -2274,7 +2274,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
         }
@@ -2721,7 +2721,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-default) /* utility class: .color-border-default */"
       }
@@ -2742,7 +2742,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-default) /* utility class: .color-border-default */"
         }
@@ -2761,7 +2761,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "dark-dimmed": {
@@ -2790,7 +2790,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "dark-dimmed": {
@@ -2927,7 +2927,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "light-high-contrast": "#d1d9e0",
@@ -2943,7 +2943,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": "{borderColor.default}",
@@ -2963,7 +2963,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
       }
@@ -3002,7 +3002,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
         }
@@ -3657,7 +3657,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "light-high-contrast": {
@@ -3686,7 +3686,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": {
@@ -3719,7 +3719,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     }
   },
   "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3731,7 +3731,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       }
     }
   },

/styleLint/functional/themes/light.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light.json	2025-03-20 12:15:38.580763587 +0000
@@ -2207,7 +2207,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
       }
@@ -2222,7 +2222,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
         }
@@ -2241,7 +2241,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
       }
@@ -2274,7 +2274,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
         }
@@ -2719,7 +2719,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-default) /* utility class: .color-border-default */"
       }
@@ -2740,7 +2740,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-default) /* utility class: .color-border-default */"
         }
@@ -2759,7 +2759,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "dark-dimmed": {
@@ -2788,7 +2788,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "dark-dimmed": {
@@ -2925,7 +2925,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "light-high-contrast": "#d1d9e0",
@@ -2941,7 +2941,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": "{borderColor.default}",
@@ -2961,7 +2961,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
       "codeSyntax": {
         "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
       }
@@ -3000,7 +3000,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
         }
@@ -3653,7 +3653,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     },
     "org.primer.overrides": {
       "light-high-contrast": {
@@ -3682,7 +3682,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": {
@@ -3715,7 +3715,7 @@
     "org.primer.figma": {
       "collection": "mode",
       "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
     }
   },
   "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3727,7 +3727,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
       }
     }
   },

Copy link
Contributor

Design Token Diff (Figma)

/figma/themes/dark-colorblind.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-colorblind.json	2025-03-20 12:15:58.632751617 +0000
@@ -6315,7 +6315,7 @@
   "collection": "mode",
   "mode": "dark protanopia deuteranopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-default) /* utility class: .color-border-default */"
   }
@@ -6335,7 +6335,7 @@
   "collection": "mode",
   "mode": "dark protanopia deuteranopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
   }
@@ -6354,7 +6354,7 @@
   "collection": "mode",
   "mode": "dark protanopia deuteranopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/disabled",
@@ -6371,7 +6371,7 @@
   "collection": "mode",
   "mode": "dark protanopia deuteranopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/transparent",
@@ -6387,7 +6387,7 @@
   "collection": "mode",
   "mode": "dark protanopia deuteranopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/translucent",
@@ -6404,7 +6404,7 @@
   "collection": "mode",
   "mode": "dark protanopia deuteranopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/neutral-muted",
@@ -6453,7 +6453,7 @@
   "collection": "mode",
   "mode": "dark protanopia deuteranopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
   }
@@ -6472,7 +6472,7 @@
   "collection": "mode",
   "mode": "dark protanopia deuteranopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
   }

/figma/themes/dark-dimmed.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-dimmed.json	2025-03-20 12:15:57.730752389 +0000
@@ -6307,7 +6307,7 @@
   "collection": "mode",
   "mode": "dark dimmed",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-default) /* utility class: .color-border-default */"
   }
@@ -6327,7 +6327,7 @@
   "collection": "mode",
   "mode": "dark dimmed",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
   }
@@ -6346,7 +6346,7 @@
   "collection": "mode",
   "mode": "dark dimmed",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/disabled",
@@ -6363,7 +6363,7 @@
   "collection": "mode",
   "mode": "dark dimmed",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/transparent",
@@ -6379,7 +6379,7 @@
   "collection": "mode",
   "mode": "dark dimmed",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/translucent",
@@ -6396,7 +6396,7 @@
   "collection": "mode",
   "mode": "dark dimmed",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/neutral-muted",
@@ -6446,7 +6446,7 @@
   "collection": "mode",
   "mode": "dark dimmed",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
   }
@@ -6465,7 +6465,7 @@
   "collection": "mode",
   "mode": "dark dimmed",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
   }

/figma/themes/dark-high-contrast.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-high-contrast.json	2025-03-20 12:15:59.124751196 +0000
@@ -6322,7 +6322,7 @@
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-default) /* utility class: .color-border-default */"
   }
@@ -6342,7 +6342,7 @@
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
   }
@@ -6361,7 +6361,7 @@
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/disabled",
@@ -6378,7 +6378,7 @@
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/transparent",
@@ -6394,7 +6394,7 @@
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/translucent",
@@ -6411,7 +6411,7 @@
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/neutral-muted",
@@ -6460,7 +6460,7 @@
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
   }
@@ -6479,7 +6479,7 @@
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
   }

/figma/themes/dark-tritanopia.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-tritanopia.json	2025-03-20 12:15:58.183752001 +0000
@@ -6308,7 +6308,7 @@
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-default) /* utility class: .color-border-default */"
   }
@@ -6328,7 +6328,7 @@
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
   }
@@ -6347,7 +6347,7 @@
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/disabled",
@@ -6364,7 +6364,7 @@
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/transparent",
@@ -6380,7 +6380,7 @@
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/translucent",
@@ -6397,7 +6397,7 @@
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/neutral-muted",
@@ -6446,7 +6446,7 @@
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
   }
@@ -6465,7 +6465,7 @@
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
   }

/figma/themes/dark.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark.json	2025-03-20 12:15:57.274752779 +0000
@@ -1508,7 +1508,7 @@
   "collection": "mode",
   "mode": "dark",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-default) /* utility class: .color-border-default */"
   }
@@ -1528,7 +1528,7 @@
   "collection": "mode",
   "mode": "dark",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
   }
@@ -1547,7 +1547,7 @@
   "collection": "mode",
   "mode": "dark",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/disabled",
@@ -1564,7 +1564,7 @@
   "collection": "mode",
   "mode": "dark",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/transparent",
@@ -1580,7 +1580,7 @@
   "collection": "mode",
   "mode": "dark",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/translucent",
@@ -1597,7 +1597,7 @@
   "collection": "mode",
   "mode": "dark",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/neutral-muted",
@@ -1646,7 +1646,7 @@
   "collection": "mode",
   "mode": "dark",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
   }
@@ -1665,7 +1665,7 @@
   "collection": "mode",
   "mode": "dark",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
   }

/figma/themes/light-colorblind.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/light-colorblind.json	2025-03-20 12:15:56.344753575 +0000
@@ -6295,7 +6295,7 @@
   "collection": "mode",
   "mode": "light protanopia deuteranopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-default) /* utility class: .color-border-default */"
   }
@@ -6315,7 +6315,7 @@
   "collection": "mode",
   "mode": "light protanopia deuteranopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
   }
@@ -6334,7 +6334,7 @@
   "collection": "mode",
   "mode": "light protanopia deuteranopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/disabled",
@@ -6351,7 +6351,7 @@
   "collection": "mode",
   "mode": "light protanopia deuteranopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/transparent",
@@ -6367,7 +6367,7 @@
   "collection": "mode",
   "mode": "light protanopia deuteranopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/translucent",
@@ -6384,7 +6384,7 @@
   "collection": "mode",
   "mode": "light protanopia deuteranopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/neutral-muted",
@@ -6433,7 +6433,7 @@
   "collection": "mode",
   "mode": "light protanopia deuteranopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
   }
@@ -6452,7 +6452,7 @@
   "collection": "mode",
   "mode": "light protanopia deuteranopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
   }

/figma/themes/light-high-contrast.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/light-high-contrast.json	2025-03-20 12:15:56.811753175 +0000
@@ -6296,7 +6296,7 @@
   "collection": "mode",
   "mode": "light high contrast",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-default) /* utility class: .color-border-default */"
   }
@@ -6316,7 +6316,7 @@
   "collection": "mode",
   "mode": "light high contrast",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
   }
@@ -6335,7 +6335,7 @@
   "collection": "mode",
   "mode": "light high contrast",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/disabled",
@@ -6352,7 +6352,7 @@
   "collection": "mode",
   "mode": "light high contrast",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/transparent",
@@ -6368,7 +6368,7 @@
   "collection": "mode",
   "mode": "light high contrast",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/translucent",
@@ -6385,7 +6385,7 @@
   "collection": "mode",
   "mode": "light high contrast",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/neutral-muted",
@@ -6434,7 +6434,7 @@
   "collection": "mode",
   "mode": "light high contrast",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
   }
@@ -6453,7 +6453,7 @@
   "collection": "mode",
   "mode": "light high contrast",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
   }

/figma/themes/light-tritanopia.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/light-tritanopia.json	2025-03-20 12:15:55.906753949 +0000
@@ -6295,7 +6295,7 @@
   "collection": "mode",
   "mode": "light tritanopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-default) /* utility class: .color-border-default */"
   }
@@ -6315,7 +6315,7 @@
   "collection": "mode",
   "mode": "light tritanopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
   }
@@ -6334,7 +6334,7 @@
   "collection": "mode",
   "mode": "light tritanopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/disabled",
@@ -6351,7 +6351,7 @@
   "collection": "mode",
   "mode": "light tritanopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/transparent",
@@ -6367,7 +6367,7 @@
   "collection": "mode",
   "mode": "light tritanopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/translucent",
@@ -6384,7 +6384,7 @@
   "collection": "mode",
   "mode": "light tritanopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/neutral-muted",
@@ -6433,7 +6433,7 @@
   "collection": "mode",
   "mode": "light tritanopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
   }
@@ -6452,7 +6452,7 @@
   "collection": "mode",
   "mode": "light tritanopia",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
   }

/figma/themes/light.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/light.json	2025-03-20 12:15:55.396754707 +0000
@@ -6294,7 +6294,7 @@
   "collection": "mode",
   "mode": "light",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-default) /* utility class: .color-border-default */"
   }
@@ -6314,7 +6314,7 @@
   "collection": "mode",
   "mode": "light",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
   }
@@ -6333,7 +6333,7 @@
   "collection": "mode",
   "mode": "light",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/disabled",
@@ -6350,7 +6350,7 @@
   "collection": "mode",
   "mode": "light",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/transparent",
@@ -6366,7 +6366,7 @@
   "collection": "mode",
   "mode": "light",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/translucent",
@@ -6383,7 +6383,7 @@
   "collection": "mode",
   "mode": "light",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
 },
 {
   "name": "borderColor/neutral-muted",
@@ -6432,7 +6432,7 @@
   "collection": "mode",
   "mode": "light",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
   }
@@ -6451,7 +6451,7 @@
   "collection": "mode",
   "mode": "light",
   "group": "semantic",
-    "scopes": ["STROKE_COLOR"],
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
   "codeSyntax": {
     "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
   }

@github-actions github-actions bot temporarily deployed to Preview (Storybook) March 20, 2025 12:17 Inactive
@lukasoppermann lukasoppermann merged commit 4dfb1d3 into main Mar 20, 2025
31 checks passed
@lukasoppermann lukasoppermann deleted the @lukasoppermann-figma-border-as-shadow branch March 20, 2025 12:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
skip changeset Apply to PRs that should not result in a version bump.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant