@primer/primitives 7.17.0-rc.d7413369 → 7.17.1

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

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

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

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

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

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

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

@@ -34,20 +34,51 @@
   "text": {
     "display": {
       "lineBoxHeight": {
-        "$value": "56px",
-        "$type": "dimension"
+        "$value": 1.4,
+        "$type": "number",
+        "$extensions": {
+          "org.primer.data": {
+            "fontSize": 40
+          },
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"],
+            "fontSizeInPx": 40
+          }
+        }
       },
       "size": {
         "$value": "40px",
-        "$type": "dimension"
+        "$type": "dimension",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "lineHeight": {
         "$value": 1.4,
-        "$type": "number"
+        "$type": "number",
+        "$extensions": {
+          "org.primer.data": {
+            "fontSize": 40
+          },
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "weight": {
         "$value": "{base.text.weight.medium}",
-        "$type": "fontWeight"
+        "$type": "fontWeight",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "shorthand": {
         "$value": {
@@ -64,43 +95,106 @@
       "size": {
         "large": {
           "$value": "32px",
-          "$type": "dimension"
+          "$type": "dimension",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "medium": {
           "$value": "20px",
-          "$type": "dimension"
+          "$type": "dimension",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "small": {
           "$value": "16px",
-          "$type": "dimension"
+          "$type": "dimension",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         }
       },
       "lineHeight": {
         "large": {
           "$value": 1.5,
-          "$type": "number"
+          "$type": "number",
+          "$extensions": {
+            "org.primer.data": {
+              "fontSize": 32
+            },
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "medium": {
           "$value": 1.6,
-          "$type": "number"
+          "$type": "number",
+          "$extensions": {
+            "org.primer.data": {
+              "fontSize": 20
+            },
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "small": {
           "$value": 1.5,
-          "$type": "number"
+          "$type": "number",
+          "$extensions": {
+            "org.primer.data": {
+              "fontSize": 16
+            },
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         }
       },
       "weight": {
         "large": {
           "$value": "{base.text.weight.semibold}",
-          "$type": "fontWeight"
+          "$type": "fontWeight",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "medium": {
           "$value": "{base.text.weight.semibold}",
-          "$type": "fontWeight"
+          "$type": "fontWeight",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "small": {
           "$value": "{base.text.weight.semibold}",
-          "$type": "fontWeight"
+          "$type": "fontWeight",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         }
       },
       "shorthand": {
@@ -139,15 +233,33 @@
     "subtitle": {
       "size": {
         "$value": "20px",
-        "$type": "dimension"
+        "$type": "dimension",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "lineHeight": {
         "$value": 1.6,
-        "$type": "number"
+        "$type": "number",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "weight": {
         "$value": "{base.text.weight.normal}",
-        "$type": "fontWeight"
+        "$type": "fontWeight",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "shorthand": {
         "$value": {
@@ -164,29 +276,74 @@
       "size": {
         "large": {
           "$value": "16px",
-          "$type": "dimension"
+          "$type": "dimension",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "medium": {
           "$value": "14px",
-          "$type": "dimension"
+          "$type": "dimension",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "small": {
           "$value": "12px",
-          "$type": "dimension"
+          "$type": "dimension",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         }
       },
       "lineHeight": {
         "large": {
           "$value": 1.5,
-          "$type": "number"
+          "$type": "number",
+          "$extensions": {
+            "org.primer.data": {
+              "fontSize": 16
+            },
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "medium": {
           "$value": 1.4285,
-          "$type": "number"
+          "$type": "number",
+          "$extensions": {
+            "org.primer.data": {
+              "fontSize": 14
+            },
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "small": {
           "$value": 1.6666,
-          "$type": "number"
+          "$type": "number",
+          "$extensions": {
+            "org.primer.data": {
+              "fontSize": 12
+            },
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         }
       },
       "weight": {
@@ -229,15 +386,36 @@
     "caption": {
       "size": {
         "$value": "12px",
-        "$type": "dimension"
+        "$type": "dimension",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "lineHeight": {
         "$value": 1.3333,
-        "$type": "number"
+        "$type": "number",
+        "$extensions": {
+          "org.primer.data": {
+            "fontSize": 12
+          },
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "weight": {
         "$value": "{base.text.weight.normal}",
-        "$type": "fontWeight"
+        "$type": "fontWeight",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "shorthand": {
         "$value": {
@@ -253,15 +431,36 @@
     "codeBlock": {
       "size": {
         "$value": "13px",
-        "$type": "dimension"
+        "$type": "dimension",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "lineHeight": {
         "$value": 1.5385,
-        "$type": "number"
+        "$type": "number",
+        "$extensions": {
+          "org.primer.data": {
+            "fontSize": 13
+          },
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "weight": {
         "$value": "{base.text.weight.normal}",
-        "$type": "fontWeight"
+        "$type": "fontWeight",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "shorthand": {
         "$value": {
@@ -277,11 +476,23 @@
     "codeInline": {
       "size": {
         "$value": "0.9285em",
-        "$type": "dimension"
+        "$type": "dimension",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "weight": {
         "$value": "{base.text.weight.normal}",
-        "$type": "fontWeight"
+        "$type": "fontWeight",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "shorthand": {
         "$value": {

package/src/transformers/floatToPixel.ts

@@ -0,0 +1,33 @@
+import type StyleDictionary from 'style-dictionary'
+import {isNumber} from '../filters'
+/**
+ * takes a value and returns it if its a px string if it is a float and the token has a fontSize value in extensions['org.primer.data']
+ * @param value
+ * @returns string
+ */
+export const convertFloatToPixel = (token: StyleDictionary.TransformedToken) => {
+  // short circut if value is not a number
+  if (
+    typeof token.value !== 'number' ||
+    !token.$extensions?.['org.primer.data']?.fontSize ||
+    typeof token.$extensions?.['org.primer.data']?.fontSize !== 'number'
+  ) {
+    return token.value
+  }
+  // convert value
+  const convertedValue = token.$extensions?.['org.primer.data']?.fontSize * token.value
+  // return converted value
+  return convertedValue === 0 ? 0 : `${Math.round(convertedValue)}px`
+}
+/**
+ * @description converts a float value to a pixel value based on the provided fontSize on the tokersn extension
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `isNumber`
+ * @transformer returns a pixel string
+ */
+export const floatToPixel: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: isNumber,
+  transformer: (token: StyleDictionary.TransformedToken): string => convertFloatToPixel(token),
+}

package/src/transformers/index.ts

@@ -4,6 +4,7 @@ export {colorToHexAlpha} from './colorToHexAlpha'
 export {colorToHexMix} from './colorToHexMix'
 export {colorToRgbAlpha} from './colorToRgbAlpha'
 export {colorToRgbaFloat} from './colorToRgbaFloat'
+export {floatToPixel} from './floatToPixel'
 export {dimensionToRem} from './dimensionToRem'
 export {dimensionToRemPxArray} from './dimensionToRemPxArray'
 export {dimensionToPixelUnitless} from './dimensionToPixelUnitless'