@primer/primitives 11.4.1-rc.edbe0e39 → 11.5.0-rc.14eaeb12

package/src/tokens/component/button.json5

@@ -19,6 +19,19 @@
               }
             }
           }
+        },
+        disabled: {
+          '$value': '{control.fgColor.disabled}',
+          '$type': 'color',
+          '$extensions': {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: [
+                'fgColor'
+              ]
+            }
+          }
         }
       },
       bgColor: {
@@ -234,10 +247,18 @@
                 '$value': '{fgColor.white}'
               },
               'dark-dimmed': {
-                '$value': '#ffffff'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [0, 0, 100],
+                  hex: '#ffffff',
+                }
               },
               'dark-dimmed-high-contrast': {
-                '$value': '#ffffff'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [0, 0, 100],
+                  hex: '#ffffff',
+                }
               }
             }
           }
@@ -284,13 +305,34 @@
                 '$value': '{fgColor.white}'
               },
               'dark-dimmed': {
-                '$value': '#ffffff'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [0, 0, 100],
+                  hex: '#ffffff',
+                }
               },
               'dark-dimmed-high-contrast': {
-                '$value': '#ffffff'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [0, 0, 100],
+                  hex: '#ffffff',
+                }
               }
             }
           }
+        },
+        disabled: {
+          '$value': '{button.primary.fgColor.disabled}',
+          '$type': 'color',
+          '$extensions': {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: [
+                'fgColor'
+              ]
+            }
+          }
         }
       },
       bgColor: {
@@ -316,7 +358,11 @@
           }
         },
         hover: {
-          '$value': '#1c8139',
+          '$value': {
+            colorSpace: 'hsl',
+            components: [137.2, 64.3, 30.8],
+            hex: '#1c8139',
+          },
           '$type': 'color',
           '$extensions': {
             'org.primer.figma': {
@@ -328,49 +374,101 @@
             },
             'org.primer.overrides': {
               dark: {
-                '$value': '#29903B'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [130.5, 55.7, 36.3],
+                  hex: '#29903B',
+                }
               },
               'dark-dimmed': {
-                '$value': '#3b8640'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [124, 38.9, 37.8],
+                  hex: '#3b8640',
+                }
               },
               'dark-dimmed-high-contrast': {
                 '$value': '{base.color.green.6}'
               },
               'dark-tritanopia': {
-                '$value': '#2a7aef'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [215.6, 86, 55.1],
+                  hex: '#2a7aef',
+                }
               },
               'dark-tritanopia-high-contrast': {
-                '$value': '#2a7aef'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [215.6, 86, 55.1],
+                  hex: '#2a7aef',
+                }
               },
               'dark-protanopia-deuteranopia': {
-                '$value': '#2a7aef'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [215.6, 86, 55.1],
+                  hex: '#2a7aef',
+                }
               },
               'dark-protanopia-deuteranopia-high-contrast': {
-                '$value': '#2a7aef'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [215.6, 86, 55.1],
+                  hex: '#2a7aef',
+                }
               },
               'dark-high-contrast': {
-                '$value': '#08792b'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [138.6, 87.6, 25.3],
+                  hex: '#08792b',
+                }
               },
               'light-tritanopia': {
-                '$value': '#0864d1'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [212.5, 92.6, 42.5],
+                  hex: '#0864d1',
+                }
               },
               'light-tritanopia-high-contrast': {
-                '$value': '#0864d1'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [212.5, 92.6, 42.5],
+                  hex: '#0864d1',
+                }
               },
               'light-protanopia-deuteranopia': {
-                '$value': '#0864d1'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [212.5, 92.6, 42.5],
+                  hex: '#0864d1',
+                }
               },
               'light-protanopia-deuteranopia-high-contrast': {
-                '$value': '#0864d1'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [212.5, 92.6, 42.5],
+                  hex: '#0864d1',
+                }
               },
               'light-high-contrast': {
-                '$value': '#04571e'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [138.8, 91.2, 17.8],
+                  hex: '#04571e',
+                }
               }
             }
           }
         },
         active: {
-          '$value': '#197935',
+          '$value': {
+            colorSpace: 'hsl',
+            components: [137.5, 65.8, 28.6],
+            hex: '#197935',
+          },
           '$type': 'color',
           '$extensions': {
             'org.primer.figma': {
@@ -382,49 +480,101 @@
             },
             'org.primer.overrides': {
               dark: {
-                '$value': '#2E9A40'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [130, 54, 39.2],
+                  hex: '#2E9A40',
+                }
               },
               'dark-dimmed': {
-                '$value': '#428f46'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [123.1, 36.8, 41],
+                  hex: '#428f46',
+                }
               },
               'dark-dimmed-high-contrast': {
                 '$value': '{base.color.green.5}'
               },
               'dark-tritanopia': {
-                '$value': '#3685f3'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [214.9, 88.7, 58.2],
+                  hex: '#3685f3',
+                }
               },
               'dark-tritanopia-high-contrast': {
-                '$value': '#3685f3'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [214.9, 88.7, 58.2],
+                  hex: '#3685f3',
+                }
               },
               'dark-protanopia-deuteranopia': {
-                '$value': '#3685f3'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [214.9, 88.7, 58.2],
+                  hex: '#3685f3',
+                }
               },
               'dark-protanopia-deuteranopia-high-contrast': {
-                '$value': '#3685f3'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [214.9, 88.7, 58.2],
+                  hex: '#3685f3',
+                }
               },
               'dark-high-contrast': {
-                '$value': '#109135'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [137.2, 80.1, 31.6],
+                  hex: '#109135',
+                }
               },
               'light-tritanopia': {
-                '$value': '#075fc8'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [212.6, 93.2, 40.6],
+                  hex: '#075fc8',
+                }
               },
               'light-tritanopia-high-contrast': {
-                '$value': '#075fc8'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [212.6, 93.2, 40.6],
+                  hex: '#075fc8',
+                }
               },
               'light-protanopia-deuteranopia': {
-                '$value': '#075fc8'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [212.6, 93.2, 40.6],
+                  hex: '#075fc8',
+                }
               },
               'light-protanopia-deuteranopia-high-contrast': {
-                '$value': '#075fc8'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [212.6, 93.2, 40.6],
+                  hex: '#075fc8',
+                }
               },
               'light-high-contrast': {
-                '$value': '#03501b'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [138.7, 92.8, 16.3],
+                  hex: '#03501b',
+                }
               }
             }
           }
         },
         disabled: {
-          '$value': '#95d8a6',
+          '$value': {
+            colorSpace: 'hsl',
+            components: [135.2, 46.2, 71.6],
+            hex: '#95d8a6',
+          },
           '$type': 'color',
           '$extensions': {
             'org.primer.figma': {
@@ -436,16 +586,32 @@
             },
             'org.primer.overrides': {
               dark: {
-                '$value': '#105823'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [135.8, 69.2, 20.4],
+                  hex: '#105823',
+                }
               },
               'dark-dimmed': {
-                '$value': '#105823'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [135.8, 69.2, 20.4],
+                  hex: '#105823',
+                }
               },
               'dark-tritanopia': {
-                '$value': '#5fabfe'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [211.3, 98.8, 68.4],
+                  hex: '#5fabfe',
+                }
               },
               'dark-tritanopia-high-contrast': {
-                '$value': '#5fabfe'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [211.3, 98.8, 68.4],
+                  hex: '#5fabfe',
+                }
               },
               'dark-protanopia-deuteranopia': {
                 '$value': '{base.color.blue.6}'
@@ -454,22 +620,46 @@
                 '$value': '{base.color.blue.6}'
               },
               'dark-high-contrast': {
-                '$value': '#048f2f'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [138.6, 94.6, 28.8],
+                  hex: '#048f2f',
+                }
               },
               'light-tritanopia': {
-                '$value': '#92caff'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [209.2, 100, 78.6],
+                  hex: '#92caff',
+                }
               },
               'light-tritanopia-high-contrast': {
-                '$value': '#92caff'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [209.2, 100, 78.6],
+                  hex: '#92caff',
+                }
               },
               'light-protanopia-deuteranopia': {
-                '$value': '#92caff'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [209.2, 100, 78.6],
+                  hex: '#92caff',
+                }
               },
               'light-protanopia-deuteranopia-high-contrast': {
-                '$value': '#92caff'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [209.2, 100, 78.6],
+                  hex: '#92caff',
+                }
               },
               'light-high-contrast': {
-                '$value': '#85cb97'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [135.4, 40.2, 65.9],
+                  hex: '#85cb97',
+                }
               }
             }
           }
@@ -558,29 +748,57 @@
             },
             'org.primer.overrides': {
               dark: {
-                '$value': '#105823'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [135.8, 69.2, 20.4],
+                  hex: '#105823',
+                }
               },
               'dark-dimmed': {
-                '$value': '#105823'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [135.8, 69.2, 20.4],
+                  hex: '#105823',
+                }
               },
               'dark-tritanopia': {
-                '$value': '#5fabfe'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [211.3, 98.8, 68.4],
+                  hex: '#5fabfe',
+                }
               },
               'dark-tritanopia-high-contrast': {
-                '$value': '#5fabfe'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [211.3, 98.8, 68.4],
+                  hex: '#5fabfe',
+                }
               },
               'dark-protanopia-deuteranopia': {
-                '$value': '#1158c7'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [216.6, 84.3, 42.4],
+                  hex: '#1158c7',
+                }
               },
               'dark-protanopia-deuteranopia-high-contrast': {
-                '$value': '#1158c7'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [216.6, 84.3, 42.4],
+                  hex: '#1158c7',
+                }
               },
               'dark-high-contrast': {
                 '$value': '{base.color.green.2}',
                 alpha: 0.4
               },
               'light-high-contrast': {
-                '$value': '#85cb97'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [135.4, 40.2, 65.9],
+                  hex: '#85cb97',
+                }
               }
             }
           }
@@ -1105,7 +1323,12 @@
                 alpha: 0.5
               },
               'dark-dimmed': {
-                '$value': '#478be680'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [214.3, 76.1, 59],
+                  hex: '#478be6',
+                },
+                alpha: 0.502,
               }
             }
           },
@@ -1147,13 +1370,21 @@
                 '$value': '{control.bgColor.hover}'
               },
               'dark-tritanopia': {
-                '$value': '#262c36'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [217.5, 17.4, 18],
+                  hex: '#262c36',
+                }
               }
             }
           }
         },
         active: {
-          '$value': '#0757ba',
+          '$value': {
+            colorSpace: 'hsl',
+            components: [213.2, 92.7, 37.8],
+            hex: '#0757ba',
+          },
           '$type': 'color',
           '$extensions': {
             'org.primer.figma': {
@@ -1168,19 +1399,39 @@
                 '$value': '{base.color.blue.7}'
               },
               'dark-tritanopia': {
-                '$value': '#0d419d'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [218.3, 84.7, 33.3],
+                  hex: '#0d419d',
+                }
               },
               'dark-tritanopia-high-contrast': {
-                '$value': '#0d419d'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [218.3, 84.7, 33.3],
+                  hex: '#0d419d',
+                }
               },
               'light-high-contrast': {
-                '$value': '#033f9d'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [216.6, 96.3, 31.4],
+                  hex: '#033f9d',
+                }
               },
               'light-tritanopia-high-contrast': {
-                '$value': '#033f9d'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [216.6, 96.3, 31.4],
+                  hex: '#033f9d',
+                }
               },
               'light-protanopia-deuteranopia-high-contrast': {
-                '$value': '#033f9d'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [216.6, 96.3, 31.4],
+                  hex: '#033f9d',
+                }
               }
             }
           }
@@ -1201,7 +1452,11 @@
                 '$value': '{control.bgColor.disabled}'
               },
               'dark-tritanopia': {
-                '$value': '#212830'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [212, 18.5, 15.9],
+                  hex: '#212830',
+                }
               }
             }
           }
@@ -1326,10 +1581,18 @@
             },
             'org.primer.overrides': {
               dark: {
-                '$value': '#FA5E55'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [3.3, 94.3, 65.7],
+                  hex: '#FA5E55',
+                }
               },
               'dark-dimmed': {
-                '$value': '#ea5c53'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [3.6, 78.2, 62.2],
+                  hex: '#ea5c53',
+                }
               },
               'dark-dimmed-high-contrast': {
                 '$value': '{base.color.red.1}'
@@ -1365,10 +1628,18 @@
                 '$value': '{base.color.neutral.13}'
               },
               'dark-dimmed-high-contrast': {
-                '$value': '#ffffff'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [0, 0, 100],
+                  hex: '#ffffff',
+                }
               },
               'dark-dimmed': {
-                '$value': '#ffffff'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [0, 0, 100],
+                  hex: '#ffffff',
+                }
               }
             }
           }
@@ -1389,10 +1660,18 @@
                 '$value': '{base.color.neutral.13}'
               },
               'dark-dimmed-high-contrast': {
-                '$value': '#ffffff'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [0, 0, 100],
+                  hex: '#ffffff',
+                }
               },
               'dark-dimmed': {
-                '$value': '#ffffff'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [0, 0, 100],
+                  hex: '#ffffff',
+                }
               }
             }
           }
@@ -1448,10 +1727,27 @@
                 '$value': '{base.color.neutral.13}'
               },
               'dark-dimmed-high-contrast': {
-                '$value': '#ffffff'
+                '$value': {
+                  colorSpace: 'hsl',
+                  components: [0, 0, 100],
+                  hex: '#ffffff',
+                }
               }
             }
           }
+        },
+        disabled: {
+          '$value': '{button.danger.fgColor.disabled}',
+          '$type': 'color',
+          '$extensions': {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: [
+                'fgColor'
+              ]
+            }
+          }
         }
       },
       bgColor: {
@@ -1743,6 +2039,7 @@
       }
     },
     inactive: {
+      $description: 'Single-state button variant for non-interactive/inactive buttons (e.g. unselected segmented control tabs). Does not have rest/hover/active/disabled interaction states — "inactive" is the state.',
       fgColor: {
         '$value': '{base.color.neutral.9}',
         '$type': 'color',
@@ -1811,6 +2108,7 @@
       }
     },
     star: {
+      $description: 'Star icon color for the starred/filled state of the star button. Single-state token — does not have rest/hover/active/disabled interaction states.',
       iconColor: {
         '$value': '{base.color.yellow.2}',
         '$type': 'color',
@@ -2126,7 +2424,11 @@
       },
       fgColor: {
         rest: {
-          '$value': '#c21c2c',
+          '$value': {
+            colorSpace: 'hsl',
+            components: [354.2, 74.8, 43.5],
+            hex: '#c21c2c',
+          },
           '$type': 'color',
           '$extensions': {
             'org.primer.figma': {
@@ -2739,6 +3041,7 @@
       }
     },
     inactive: {
+      $description: 'Keybinding hint colors for inactive button state. Single-state — does not have rest/hover/active/disabled interaction states.',
       bgColor: {
         '$value': '{base.color.neutral.2}',
         '$type': 'color',