move timelineBadge and reactionButton tokens to component files (#1141)

primer · Dec 19, 2024 · 1433b8b · 1433b8b
1 parent f8451ca
commit 1433b8b
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 170 deletions.
diff --git a/src/tokens/component/reactionButton.json5 b/src/tokens/component/reactionButton.json5
@@ -0,0 +1,78 @@
+{
+  reactionButton: {
+    selected: {
+      bgColor: {
+        rest: {
+          $value: '{base.color.blue.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+            'org.primer.overrides': {
+              dark: {
+                $value: '{base.color.blue.4}',
+                alpha: 0.2,
+              },
+            },
+          },
+        },
+        hover: {
+          $value: '#caecff',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+            'org.primer.overrides': {
+              dark: {
+                $value: '#3a8cfd',
+                alpha: 0.36,
+              },
+              'dark-dimmed': {
+                $value: '#4285e5',
+                alpha: 0.36,
+              },
+              'light-high-contrast': '#c7e9ff',
+              'dark-high-contrast': {
+                $value: '#5dadff',
+                alpha: 0.36,
+              },
+            },
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{fgColor.link}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['fgColor'],
+            },
+          },
+        },
+        hover: {
+          $value: '{base.color.blue.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['fgColor'],
+            },
+            'org.primer.overrides': {
+              dark: '{base.color.blue.2}',
+            },
+          },
+        },
+      },
+    },
+  },
+}
diff --git a/src/tokens/component/timelineBadge.json5 b/src/tokens/component/timelineBadge.json5
@@ -0,0 +1,19 @@
+{
+  timelineBadge: {
+    bgColor: {
+      $value: '{bgColor.muted}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'component (internal)',
+          scopes: ['bgColor'],
+        },
+        'org.primer.overrides': {
+          dark: '{base.color.neutral.3}',
+          'dark-dimmed': '{base.color.neutral.4}',
+        },
+      },
+    },
+  },
+}
diff --git a/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 b/src/tokens/functional/color/dark/overrides/dark.dimmed.json5
@@ -280,21 +280,4 @@
       },
     },
   },
-  timelineBadge: {
-    bgColor: {
-      $value: '{base.color.neutral.4}',
-      $type: 'color',
-    },
-  },
-  reactionButton: {
-    selected: {
-      bgColor: {
-        hover: {
-          $value: '#4285e5',
-          $type: 'color',
-          alpha: 0.36,
-        },
-      },
-    },
-  },
 }
diff --git a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5
@@ -885,17 +885,6 @@
       $type: 'color',
     },
   },
-  reactionButton: {
-    selected: {
-      bgColor: {
-        hover: {
-          $value: '#5dadff',
-          $type: 'color',
-          alpha: 0.36,
-        },
-      },
-    },
-  },
   skeletonLoader: {
     bgColor: {
       $value: '{base.color.neutral.5}',

diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5
@@ -1636,60 +1636,6 @@
       },
     },
   },
-  reactionButton: {
-    selected: {
-      bgColor: {
-        rest: {
-          $value: '{base.color.blue.4}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-          alpha: 0.2,
-        },
-        hover: {
-          $value: '#3a8cfd',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-          alpha: 0.36,
-        },
-      },
-      fgColor: {
-        rest: {
-          $value: '{fgColor.link}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['fgColor'],
-            },
-          },
-        },
-        hover: {
-          $value: '{base.color.blue.2}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['fgColor'],
-            },
-          },
-        },
-      },
-    },
-  },
   focus: {
     outlineColor: {
       $value: '{borderColor.accent.emphasis}',
@@ -1886,19 +1832,6 @@
       alpha: 0.2,
     },
   },
-  timelineBadge: {
-    bgColor: {
-      $value: '{base.color.neutral.3}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'component (internal)',
-          scopes: ['bgColor'],
-        },
-      },
-    },
-  },
   treeViewItem: {
     leadingVisual: {
       iconColor: {

diff --git a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 b/src/tokens/functional/color/light/overrides/light.high-contrast.json5
@@ -813,14 +813,4 @@
       alpha: 1,
     },
   },
-  reactionButton: {
-    selected: {
-      bgColor: {
-        hover: {
-          $value: '#c7e9ff',
-          $type: 'color',
-        },
-      },
-    },
-  },
 }
diff --git a/src/tokens/functional/color/light/patterns-light.json5 b/src/tokens/functional/color/light/patterns-light.json5
@@ -1629,58 +1629,7 @@
       },
     },
   },
-  reactionButton: {
-    selected: {
-      bgColor: {
-        rest: {
-          $value: '{base.color.blue.0}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-        },
-        hover: {
-          $value: '#caecff',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-        },
-      },
-      fgColor: {
-        rest: {
-          $value: '{fgColor.link}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['fgColor'],
-            },
-          },
-        },
-        hover: {
-          $value: '{base.color.blue.6}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['fgColor'],
-            },
-          },
-        },
-      },
-    },
-  },
+
   focus: {
     outlineColor: {
       $value: '{borderColor.accent.emphasis}',
@@ -1877,19 +1826,6 @@
       alpha: 0.1,
     },
   },
-  timelineBadge: {
-    bgColor: {
-      $value: '{bgColor.muted}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'component (internal)',
-          scopes: ['bgColor'],
-        },
-      },
-    },
-  },
   treeViewItem: {
     leadingVisual: {
       iconColor: {