@primer/primitives 7.17.0-rc.34cd1021 → 7.17.0-rc.39874fc0

package/src/tokens/functional/color/light/syntax-light.json5

@@ -2,7 +2,7 @@
   color: {
     ansi: {
       black: {
-        $value: '{base.color.neutral.9}',
+        $value: '{base.color.gray.9}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -13,7 +13,7 @@
         },
       },
       'black-bright': {
-        $value: '{base.color.neutral.6}',
+        $value: '{base.color.gray.6}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -24,7 +24,7 @@
         },
       },
       white: {
-        $value: '{base.color.neutral.5}',
+        $value: '{base.color.gray.5}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -35,7 +35,7 @@
         },
       },
       'white-bright': {
-        $value: '{base.color.neutral.4}',
+        $value: '{base.color.gray.4}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -46,7 +46,7 @@
         },
       },
       gray: {
-        $value: '{base.color.neutral.5}',
+        $value: '{base.color.gray.5}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -192,7 +192,7 @@
     prettylights: {
       syntax: {
         comment: {
-          $value: '{base.color.neutral.6}',
+          $value: '{base.color.gray.6}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -238,7 +238,7 @@
         storage: {
           modifier: {
             import: {
-              $value: '{base.color.neutral.9}',
+              $value: '{base.color.gray.9}',
               $type: 'color',
               $extensions: {
                 'org.primer.figma': {
@@ -307,7 +307,7 @@
             },
           },
           angle: {
-            $value: '{base.color.neutral.6}',
+            $value: '{base.color.gray.6}',
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -321,7 +321,7 @@
         invalid: {
           illegal: {
             text: {
-              $value: '{base.color.neutral.0}',
+              $value: '{base.color.gray.0}',
               $type: 'color',
               $extensions: {
                 'org.primer.figma': {
@@ -347,7 +347,7 @@
         carriage: {
           return: {
             text: {
-              $value: '{base.color.neutral.0}',
+              $value: '{base.color.gray.0}',
               $type: 'color',
               $extensions: {
                 'org.primer.figma': {
@@ -405,7 +405,7 @@
             },
           },
           italic: {
-            $value: '{base.color.neutral.9}',
+            $value: '{base.color.gray.9}',
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -416,7 +416,7 @@
             },
           },
           bold: {
-            $value: '{base.color.neutral.9}',
+            $value: '{base.color.gray.9}',
             $type: 'color',
             $extensions: {
               'org.primer.figma': {
@@ -500,7 +500,7 @@
           },
           ignored: {
             text: {
-              $value: '{base.color.neutral.1}',
+              $value: '{base.color.gray.1}',
               $type: 'color',
               $extensions: {
                 'org.primer.figma': {
@@ -541,7 +541,7 @@
         sublimelinter: {
           gutter: {
             mark: {
-              $value: '{base.color.neutral.4}',
+              $value: '{base.color.gray.4}',
               $type: 'color',
               $extensions: {
                 'org.primer.figma': {

package/src/tokens/functional/shadow/dark.json5

@@ -3,7 +3,7 @@
     shadow: {
       $value: [
         {
-          color: '{base.color.neutral.9}',
+          color: '{base.color.gray.9}',
           alpha: 1,
           offsetX: '0px',
           offsetY: '0px',

package/src/tokens/functional/shadow/light.json5

@@ -187,7 +187,7 @@
       medium: {
         $value: [
           {
-            color: '{base.color.neutral.7}',
+            color: '{base.color.gray.7}',
             alpha: 0.12,
             offsetX: '0px',
             offsetY: '3px',
@@ -217,7 +217,7 @@
             spread: '1px',
           },
           {
-            color: '{base.color.neutral.7}',
+            color: '{base.color.gray.7}',
             alpha: 0.04,
             offsetX: '0px',
             offsetY: '6px',
@@ -225,7 +225,7 @@
             spread: '-3px',
           },
           {
-            color: '{base.color.neutral.7}',
+            color: '{base.color.gray.7}',
             alpha: 0.12,
             offsetX: '0px',
             offsetY: '6px',
@@ -253,7 +253,7 @@
             spread: '1px',
           },
           {
-            color: '{base.color.neutral.7}',
+            color: '{base.color.gray.7}',
             alpha: 0.08,
             offsetX: '0px',
             offsetY: '8px',
@@ -261,7 +261,7 @@
             spread: '-4px',
           },
           {
-            color: '{base.color.neutral.7}',
+            color: '{base.color.gray.7}',
             alpha: 0.08,
             offsetX: '0px',
             offsetY: '4px',
@@ -269,7 +269,7 @@
             spread: '-4px',
           },
           {
-            color: '{base.color.neutral.7}',
+            color: '{base.color.gray.7}',
             alpha: 0.08,
             offsetX: '0px',
             offsetY: '24px',
@@ -277,7 +277,7 @@
             spread: '-12px',
           },
           {
-            color: '{base.color.neutral.7}',
+            color: '{base.color.gray.7}',
             alpha: 0.08,
             offsetX: '0px',
             offsetY: '48px',
@@ -305,7 +305,7 @@
             spread: '1px',
           },
           {
-            color: '{base.color.neutral.7}',
+            color: '{base.color.gray.7}',
             alpha: 0.24,
             offsetX: '0px',
             offsetY: '40px',
@@ -333,7 +333,7 @@
             spread: '1px',
           },
           {
-            color: '{base.color.neutral.7}',
+            color: '{base.color.gray.7}',
             alpha: 0.32,
             offsetX: '0px',
             offsetY: '56px',
@@ -353,7 +353,7 @@
       legacy: {
         $value: [
           {
-            color: '{base.color.neutral.7}',
+            color: '{base.color.gray.7}',
             alpha: 0.04,
             offsetX: '0px',
             offsetY: '6px',
@@ -361,7 +361,7 @@
             spread: '-3px',
           },
           {
-            color: '{base.color.neutral.7}',
+            color: '{base.color.gray.7}',
             alpha: 0.12,
             offsetX: '0px',
             offsetY: '6px',

package/src/tokens/functional/typography/typography.json

@@ -2,83 +2,34 @@
   "fontStack": {
     "system": {
       "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
-      "$type": "fontFamily",
-      "$extensions": {
-        "org.primer.figma": {
-          "collection": "typography",
-          "scopes": ["all"]
-        }
-      }
+      "$type": "fontFamily"
     },
     "sansSerif": {
       "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
-      "$type": "fontFamily",
-      "$extensions": {
-        "org.primer.figma": {
-          "collection": "typography",
-          "scopes": ["all"]
-        }
-      }
+      "$type": "fontFamily"
     },
     "monospace": {
       "$value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
-      "$type": "fontFamily",
-      "$extensions": {
-        "org.primer.figma": {
-          "collection": "typography",
-          "scopes": ["all"]
-        }
-      }
+      "$type": "fontFamily"
     }
   },
   "text": {
     "display": {
       "lineBoxHeight": {
-        "$value": 1.4,
-        "$type": "number",
-        "$extensions": {
-          "org.primer.data": {
-            "fontSize": 40
-          },
-          "org.primer.figma": {
-            "collection": "typography",
-            "scopes": ["all"],
-            "fontSizeInPx": 40
-          }
-        }
+        "$value": "56px",
+        "$type": "dimension"
       },
       "size": {
         "$value": "40px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "typography",
-            "scopes": ["all"]
-          }
-        }
+        "$type": "dimension"
       },
       "lineHeight": {
         "$value": 1.4,
-        "$type": "number",
-        "$extensions": {
-          "org.primer.data": {
-            "fontSize": 40
-          },
-          "org.primer.figma": {
-            "collection": "typography",
-            "scopes": ["all"]
-          }
-        }
+        "$type": "number"
       },
       "weight": {
         "$value": "{base.text.weight.medium}",
-        "$type": "fontWeight",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "typography",
-            "scopes": ["all"]
-          }
-        }
+        "$type": "fontWeight"
       },
       "shorthand": {
         "$value": {
@@ -95,106 +46,43 @@
       "size": {
         "large": {
           "$value": "32px",
-          "$type": "dimension",
-          "$extensions": {
-            "org.primer.figma": {
-              "collection": "typography",
-              "scopes": ["all"]
-            }
-          }
+          "$type": "dimension"
         },
         "medium": {
           "$value": "20px",
-          "$type": "dimension",
-          "$extensions": {
-            "org.primer.figma": {
-              "collection": "typography",
-              "scopes": ["all"]
-            }
-          }
+          "$type": "dimension"
         },
         "small": {
           "$value": "16px",
-          "$type": "dimension",
-          "$extensions": {
-            "org.primer.figma": {
-              "collection": "typography",
-              "scopes": ["all"]
-            }
-          }
+          "$type": "dimension"
         }
       },
       "lineHeight": {
         "large": {
           "$value": 1.5,
-          "$type": "number",
-          "$extensions": {
-            "org.primer.data": {
-              "fontSize": 32
-            },
-            "org.primer.figma": {
-              "collection": "typography",
-              "scopes": ["all"]
-            }
-          }
+          "$type": "number"
         },
         "medium": {
           "$value": 1.6,
-          "$type": "number",
-          "$extensions": {
-            "org.primer.data": {
-              "fontSize": 20
-            },
-            "org.primer.figma": {
-              "collection": "typography",
-              "scopes": ["all"]
-            }
-          }
+          "$type": "number"
         },
         "small": {
           "$value": 1.5,
-          "$type": "number",
-          "$extensions": {
-            "org.primer.data": {
-              "fontSize": 16
-            },
-            "org.primer.figma": {
-              "collection": "typography",
-              "scopes": ["all"]
-            }
-          }
+          "$type": "number"
         }
       },
       "weight": {
         "large": {
           "$value": "{base.text.weight.semibold}",
-          "$type": "fontWeight",
-          "$extensions": {
-            "org.primer.figma": {
-              "collection": "typography",
-              "scopes": ["all"]
-            }
-          }
+          "$type": "fontWeight"
         },
         "medium": {
           "$value": "{base.text.weight.semibold}",
-          "$type": "fontWeight",
-          "$extensions": {
-            "org.primer.figma": {
-              "collection": "typography",
-              "scopes": ["all"]
-            }
-          }
+          "$type": "fontWeight"
         },
         "small": {
           "$value": "{base.text.weight.semibold}",
-          "$type": "fontWeight",
-          "$extensions": {
-            "org.primer.figma": {
-              "collection": "typography",
-              "scopes": ["all"]
-            }
-          }
+          "$type": "fontWeight"
         }
       },
       "shorthand": {
@@ -233,33 +121,15 @@
     "subtitle": {
       "size": {
         "$value": "20px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "typography",
-            "scopes": ["all"]
-          }
-        }
+        "$type": "dimension"
       },
       "lineHeight": {
         "$value": 1.6,
-        "$type": "number",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "typography",
-            "scopes": ["all"]
-          }
-        }
+        "$type": "number"
       },
       "weight": {
         "$value": "{base.text.weight.normal}",
-        "$type": "fontWeight",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "typography",
-            "scopes": ["all"]
-          }
-        }
+        "$type": "fontWeight"
       },
       "shorthand": {
         "$value": {
@@ -276,74 +146,29 @@
       "size": {
         "large": {
           "$value": "16px",
-          "$type": "dimension",
-          "$extensions": {
-            "org.primer.figma": {
-              "collection": "typography",
-              "scopes": ["all"]
-            }
-          }
+          "$type": "dimension"
         },
         "medium": {
           "$value": "14px",
-          "$type": "dimension",
-          "$extensions": {
-            "org.primer.figma": {
-              "collection": "typography",
-              "scopes": ["all"]
-            }
-          }
+          "$type": "dimension"
         },
         "small": {
           "$value": "12px",
-          "$type": "dimension",
-          "$extensions": {
-            "org.primer.figma": {
-              "collection": "typography",
-              "scopes": ["all"]
-            }
-          }
+          "$type": "dimension"
         }
       },
       "lineHeight": {
         "large": {
           "$value": 1.5,
-          "$type": "number",
-          "$extensions": {
-            "org.primer.data": {
-              "fontSize": 16
-            },
-            "org.primer.figma": {
-              "collection": "typography",
-              "scopes": ["all"]
-            }
-          }
+          "$type": "number"
         },
         "medium": {
           "$value": 1.4285,
-          "$type": "number",
-          "$extensions": {
-            "org.primer.data": {
-              "fontSize": 14
-            },
-            "org.primer.figma": {
-              "collection": "typography",
-              "scopes": ["all"]
-            }
-          }
+          "$type": "number"
         },
         "small": {
           "$value": 1.6666,
-          "$type": "number",
-          "$extensions": {
-            "org.primer.data": {
-              "fontSize": 12
-            },
-            "org.primer.figma": {
-              "collection": "typography",
-              "scopes": ["all"]
-            }
-          }
+          "$type": "number"
         }
       },
       "weight": {
@@ -386,36 +211,15 @@
     "caption": {
       "size": {
         "$value": "12px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "typography",
-            "scopes": ["all"]
-          }
-        }
+        "$type": "dimension"
       },
       "lineHeight": {
         "$value": 1.3333,
-        "$type": "number",
-        "$extensions": {
-          "org.primer.data": {
-            "fontSize": 12
-          },
-          "org.primer.figma": {
-            "collection": "typography",
-            "scopes": ["all"]
-          }
-        }
+        "$type": "number"
       },
       "weight": {
         "$value": "{base.text.weight.normal}",
-        "$type": "fontWeight",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "typography",
-            "scopes": ["all"]
-          }
-        }
+        "$type": "fontWeight"
       },
       "shorthand": {
         "$value": {
@@ -431,36 +235,15 @@
     "codeBlock": {
       "size": {
         "$value": "13px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "typography",
-            "scopes": ["all"]
-          }
-        }
+        "$type": "dimension"
       },
       "lineHeight": {
         "$value": 1.5385,
-        "$type": "number",
-        "$extensions": {
-          "org.primer.data": {
-            "fontSize": 13
-          },
-          "org.primer.figma": {
-            "collection": "typography",
-            "scopes": ["all"]
-          }
-        }
+        "$type": "number"
       },
       "weight": {
         "$value": "{base.text.weight.normal}",
-        "$type": "fontWeight",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "typography",
-            "scopes": ["all"]
-          }
-        }
+        "$type": "fontWeight"
       },
       "shorthand": {
         "$value": {
@@ -476,23 +259,11 @@
     "codeInline": {
       "size": {
         "$value": "0.9285em",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "typography",
-            "scopes": ["all"]
-          }
-        }
+        "$type": "dimension"
       },
       "weight": {
         "$value": "{base.text.weight.normal}",
-        "$type": "fontWeight",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "typography",
-            "scopes": ["all"]
-          }
-        }
+        "$type": "fontWeight"
       },
       "shorthand": {
         "$value": {

package/src/transformers/fontFamilyToCss.ts

@@ -1,7 +1,8 @@
 import type StyleDictionary from 'style-dictionary'
 import {isFontFamily} from '../filters'
 import {getTokenValue} from './utilities/getTokenValue'
-import {hasSpaceInString} from './utilities/hasSpaceInString'
+
+const hasSpaceInName = (string: string) => /\s/g.test(string)
 /**
  * takes a value and returns it if its a string or concats strings in an array quoting strings with spaces
  * @param value
@@ -17,7 +18,7 @@ export const parseFontFamily = (value: unknown): string => {
         if (typeof string !== 'string') {
           throw new Error(`Invalid value in array ${string}, must be a string`)
         }
-        return hasSpaceInString(string) ? `'${string}'` : string
+        return hasSpaceInName(string) ? `'${string}'` : string
       })
       .join(', ')
   }
@@ -27,7 +28,7 @@ export const parseFontFamily = (value: unknown): string => {
  * @description converts fontFamily tokens value to string
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `fontFamily`
- * @transformer returns a string
+ * @transformer returns a number
  */
 export const fontFamilyToCss: StyleDictionary.Transform = {
   type: `value`,