@primer/primitives 9.1.2 → 10.0.0-rc.1bc5b670

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

@@ -46,79 +46,191 @@
     },
   },
   diffBlob: {
-    addition: {
+    additionLine: {
       fgColor: {
-        text: {
-          $value: '{fgColor.default}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              mode: 'light',
-              group: 'component',
-              scopes: ['fgColor'],
-            },
+        $value: '{fgColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component',
+            scopes: ['fgColor'],
           },
         },
-        num: {
-          $value: '{fgColor.default}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              mode: 'light',
-              group: 'component',
-              scopes: ['fgColor'],
-            },
+      },
+      bgColor: {
+        $value: '{bgColor.success.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+    },
+    additionWord: {
+      fgColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component',
+            scopes: ['fgColor'],
           },
         },
       },
       bgColor: {
-        num: {
-          $value: '{base.color.green.1}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              mode: 'light',
-              group: 'component',
-              scopes: ['bgColor'],
-            },
+        $value: '{base.color.green.1}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component',
+            scopes: ['bgColor'],
           },
-          mix: {
-            color: '{base.color.green.0}',
-            weight: 0.8,
+        },
+      },
+    },
+    additionNum: {
+      fgColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component',
+            scopes: ['fgColor'],
           },
         },
-        line: {
-          $value: '{base.color.green.0}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              mode: 'light',
-              group: 'component',
-              scopes: ['bgColor'],
-            },
+      },
+      bgColor: {
+        $value: '{base.color.green.1}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component',
+            scopes: ['bgColor'],
           },
         },
-        word: {
-          $value: '{base.color.green.1}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              mode: 'light',
-              group: 'component',
-              scopes: ['bgColor'],
-            },
+      },
+    },
+    deletionLine: {
+      fgColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+      bgColor: {
+        $value: '{bgColor.danger.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+    },
+    deletionWord: {
+      fgColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+      bgColor: {
+        $value: '{base.color.red.1}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component',
+            scopes: ['bgColor'],
           },
         },
       },
     },
-    deletion: {
+    deletionNum: {
       fgColor: {
-        text: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+      bgColor: {
+        $value: '{base.color.red.1}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+    },
+    hunkLine: {
+      bgColor: {
+        $value: '{bgColor.accent.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+      fgColor: {
+        $value: '{fgColor.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+    },
+    hunkNum: {
+      fgColor: {
+        rest: {
           $value: '{fgColor.default}',
           $type: 'color',
           $extensions: {
@@ -130,8 +242,8 @@
             },
           },
         },
-        num: {
-          $value: '{fgColor.default}',
+        hover: {
+          $value: '{fgColor.onEmphasis}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -144,8 +256,8 @@
         },
       },
       bgColor: {
-        num: {
-          $value: '{base.color.red.1}',
+        rest: {
+          $value: '{base.color.blue.1}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -156,8 +268,8 @@
             },
           },
         },
-        line: {
-          $value: '{base.color.red.0}',
+        hover: {
+          $value: '{bgColor.accent.emphasis}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -168,35 +280,33 @@
             },
           },
         },
-        word: {
-          $value: '{base.color.red.3}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              mode: 'light',
-              group: 'component',
-              scopes: ['bgColor'],
-            },
+      },
+    },
+    emptyNum: {
+      bgColor: {
+        $value: '{bgColor.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component',
+            scopes: ['bgColor'],
           },
-          alpha: 0.4,
         },
       },
     },
-    hunk: {
+    emptyLine: {
       bgColor: {
-        num: {
-          $value: '{base.color.blue.3}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              mode: 'light',
-              group: 'component',
-              scopes: ['bgColor'],
-            },
+        $value: '{bgColor.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component',
+            scopes: ['bgColor'],
           },
-          alpha: 0.4,
         },
       },
     },

package/src/tokens/functional/color/light/data-vis-light.json5

@@ -2,7 +2,7 @@
   data: {
     blue: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.blue.5}',
           $type: 'color',
           $extensions: {
@@ -10,7 +10,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },
@@ -30,7 +30,7 @@
     },
     auburn: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.auburn.5}',
           $type: 'color',
           $extensions: {
@@ -38,7 +38,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },
@@ -58,7 +58,7 @@
     },
     orange: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.orange.4}',
           $type: 'color',
           $extensions: {
@@ -66,7 +66,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },
@@ -86,7 +86,7 @@
     },
     yellow: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.yellow.4}',
           $type: 'color',
           $extensions: {
@@ -94,7 +94,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },
@@ -114,7 +114,7 @@
     },
     green: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.green.4}',
           $type: 'color',
           $extensions: {
@@ -122,7 +122,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },
@@ -142,7 +142,7 @@
     },
     teal: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.teal.4}',
           $type: 'color',
           $extensions: {
@@ -150,7 +150,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },
@@ -170,7 +170,7 @@
     },
     purple: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.purple.5}',
           $type: 'color',
           $extensions: {
@@ -178,7 +178,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },
@@ -198,7 +198,7 @@
     },
     pink: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.pink.5}',
           $type: 'color',
           $extensions: {
@@ -206,7 +206,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },
@@ -226,7 +226,7 @@
     },
     red: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.red.5}',
           $type: 'color',
           $extensions: {
@@ -234,7 +234,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },
@@ -254,7 +254,7 @@
     },
     gray: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.gray.4}',
           $type: 'color',
           $extensions: {
@@ -262,7 +262,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },

package/src/tokens/functional/color/light/overrides/light.high-contrast.json5

@@ -396,8 +396,8 @@
           $value: '{base.color.neutral.11}',
           $type: 'color',
         },
-      }
-    }
+      },
+    },
   },
   buttonCounter: {
     default: {
@@ -410,45 +410,45 @@
     },
   },
   diffBlob: {
-    addition: {
+    additionWord: {
       fgColor: {
-        text: {
-          $value: '{fgColor.onEmphasis}',
-          $type: 'color',
-        },
+        $value: '{fgColor.onEmphasis}',
+        $type: 'color',
       },
       bgColor: {
-        word: {
-          $value: '{base.color.green.4}',
-          $type: 'color',
-        },
+        $value: '{base.color.green.5}',
+        $type: 'color',
+        mix: null,
+        alpha: 1,
       },
     },
-    deletion: {
+    deletionWord: {
       fgColor: {
-        text: {
-          $value: '{fgColor.onEmphasis}',
-          $type: 'color',
-        },
+        $value: '{fgColor.onEmphasis}',
+        $type: 'color',
       },
       bgColor: {
-        word: {
-          $value: '{base.color.red.5}',
-          $type: 'color',
-          mix: null,
-          alpha: 1,
-        },
+        $value: '{base.color.red.5}',
+        $type: 'color',
+        mix: null,
+        alpha: 1,
       },
     },
-    hunk: {
+    hunkNum: {
       bgColor: {
-        num: {
+        rest: {
           $value: '{base.color.blue.1}',
           $type: 'color',
           alpha: 1,
         },
       },
     },
+    expander: {
+      iconColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+      },
+    },
   },
   header: {
     borderColor: {
@@ -822,5 +822,5 @@
       $type: 'color',
       alpha: 1,
     },
-  }
+  },
 }