Update invisible disabled state colors (#1121)

* update disabled colors

* Create young-geckos-bathe.md

Author: langermank

.changeset/young-geckos-bathe.md

@@ -0,0 +1,5 @@
+---
+"@primer/primitives": patch
+---
+
+Make `invisible` button disabled state background and border transparent

docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx

@@ -778,3 +778,56 @@ export const Tooltip = () => {
     </Table.Container>
   )
 }
+
+export const Treeview = () => {
+  const data = getTokensByName(colorTokens, 'treeViewItem').map(token => {
+    return {
+      id: token.name,
+      ...token,
+    }
+  })
+  return (
+    <Table.Container>
+      <h1 className="sr-only" id="treeViewItem">
+        Tooltip
+      </h1>
+      <DataTable
+        aria-labelledby="treeViewItem"
+        data={data}
+        columns={[
+          {
+            header: 'Sample',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return (
+                <ColorTokenSwatch
+                  bgColor={row.name.includes('bgColor') || row.name.includes('iconColor') ? row.name : undefined}
+                  textColor={row.name.includes('fgColor') ? row.name : undefined}
+                  shadowColor={row.name.includes('shadow') ? row.name : undefined}
+                  borderColor={row.name.includes('borderColor') ? row.name : undefined}
+                />
+              )
+            },
+          },
+          {
+            header: 'Token',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return <InlineCode value={row.name} copyClipboard cssVar />
+            },
+          },
+          {
+            header: 'Output value',
+            field: 'value',
+            rowHeader: true,
+            renderCell: row => {
+              return <p>{row.value}</p>
+            },
+          },
+        ]}
+      />
+    </Table.Container>
+  )
+}

src/tokens/functional/color/dark/patterns-dark.json5

@@ -1078,7 +1078,7 @@
           },
         },
         disabled: {
-          $value: '{control.transparent.bgColor.disabled}',
+          $value: '{base.color.transparent}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1113,7 +1113,7 @@
           },
         },
         disabled: {
-          $value: '{control.borderColor.disabled}',
+          $value: '{base.color.transparent}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {

src/tokens/functional/color/light/patterns-light.json5

@@ -1071,7 +1071,7 @@
           },
         },
         disabled: {
-          $value: '{control.transparent.bgColor.disabled}',
+          $value: '{base.color.transparent}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1106,7 +1106,7 @@
           },
         },
         disabled: {
-          $value: '{control.borderColor.disabled}',
+          $value: '{base.color.transparent}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {