Add functional transparent tokens (#659)

* add functional transparent tokens

* Create tall-bananas-float.md

Author: langermank

.changeset/tall-bananas-float.md

@@ -0,0 +1,5 @@
+---
+"@primer/primitives": patch
+---
+
+Add functional transparent tokens

docs/storybook/stories/Color/Functional/Background.stories.tsx

@@ -9,7 +9,7 @@ export default {
   },
 }
 
-const bgColors = ['bgColor-default', 'bgColor-muted', 'bgColor-disabled', 'bgColor-emphasis']
+const bgColors = ['bgColor-default', 'bgColor-muted', 'bgColor-disabled', 'bgColor-emphasis', 'bgColor-transparent']
 
 export const Background = () => {
   return (

docs/storybook/stories/Color/Functional/Border.stories.tsx

@@ -9,7 +9,13 @@ export default {
   },
 }
 
-const borderColors = ['borderColor-default', 'borderColor-muted', 'borderColor-emphasis', 'borderColor-disabled']
+const borderColors = [
+  'borderColor-default',
+  'borderColor-muted',
+  'borderColor-emphasis',
+  'borderColor-disabled',
+  'borderColor-transparent',
+]
 
 export const Border = () => {
   return (

docs/storybook/stories/Migration/v8/DeprecatedPatternTokensMap.json

@@ -244,7 +244,7 @@
     "color": "control-checked-fgColor-disabled"
   },
   "color-switch-track-checked-border": {
-    "border": "transparent"
+    "border": "borderColor-transparent"
   },
   "color-switch-knob-bg": {
     "background": "controlKnob-bgColor-rest"

docs/storybook/stories/Migration/v8/DeprecatedPrimitiveTokensMap.json

@@ -1,5 +1,7 @@
 {
-  "color-canvas-default-transparent": {},
+  "color-canvas-default-transparent": {
+    "background": "bgColor-transparent"
+  },
   "color-fg-default": {
     "color": "fgColor-default"
   },

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

@@ -88,6 +88,10 @@
       $value: '{base.color.gray.5}',
       $type: 'color',
     },
+    transparent: {
+      $value: '{base.color.transparent}',
+      $type: 'color',
+    },
     neutral: {
       muted: {
         $value: '{base.color.gray.4}',
@@ -217,6 +221,10 @@
       $value: '{borderColor.default}',
       $type: 'color',
     },
+    transparent: {
+      $value: '{base.color.transparent}',
+      $type: 'color',
+    },
     neutral: {
       muted: {
         $value: '{base.color.gray.4}',

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

@@ -84,6 +84,10 @@
       $value: '{base.color.gray.0}',
       $type: 'color',
     },
+    transparent: {
+      $value: '{base.color.transparent}',
+      $type: 'color',
+    },
     neutral: {
       muted: {
         $value: '{base.color.gray.1}',
@@ -208,6 +212,10 @@
       $value: '{borderColor.default}',
       $type: 'color',
     },
+    transparent: {
+      $value: '{base.color.transparent}',
+      $type: 'color',
+    },
     neutral: {
       muted: {
         $value: '{base.color.gray.3}',