@primer/primitives 10.1.0-rc.f1589f93 → 10.1.0

package/src/tokens/functional/border/border.json5

@@ -0,0 +1,236 @@
+{
+  focus: {
+    outline: {
+      $value: {
+        color: '{focus.outlineColor}',
+        style: 'solid',
+        width: '2px',
+      },
+      $type: 'border',
+    },
+  },
+  border: {
+    default: {
+      $value: {
+        color: '{borderColor.default}',
+        style: 'solid',
+        width: '{borderWidth.default}',
+      },
+      $type: 'border',
+    },
+    muted: {
+      $value: {
+        color: '{borderColor.muted}',
+        style: 'solid',
+        width: '{borderWidth.default}',
+      },
+      $type: 'border',
+    },
+    emphasis: {
+      $value: {
+        color: '{borderColor.emphasis}',
+        style: 'solid',
+        width: '{borderWidth.default}',
+      },
+      $type: 'border',
+    },
+    disabled: {
+      $value: {
+        color: '{borderColor.disabled}',
+        style: 'solid',
+        width: '{borderWidth.default}',
+      },
+      $type: 'border',
+    },
+    transparent: {
+      $value: {
+        color: '{borderColor.transparent}',
+        style: 'solid',
+        width: '{borderWidth.default}',
+      },
+      $type: 'border',
+    },
+    neutral: {
+      emphasis: {
+        $value: {
+          color: '{borderColor.neutral.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.neutral.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
+    accent: {
+      emphasis: {
+        $value: {
+          color: '{borderColor.accent.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.accent.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
+    success: {
+      emphasis: {
+        $value: {
+          color: '{borderColor.success.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.success.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
+    open: {
+      emphasis: {
+        $value: '{border.success.emphasis}',
+        $type: 'border',
+      },
+      muted: {
+        $value: '{border.success.muted}',
+        $type: 'border',
+      },
+    },
+    danger: {
+      emphasis: {
+        $value: {
+          color: '{borderColor.danger.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.danger.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
+    closed: {
+      emphasis: {
+        $value: '{border.danger.emphasis}',
+        $type: 'border',
+      },
+      muted: {
+        $value: '{border.danger.muted}',
+        $type: 'border',
+      },
+    },
+    attention: {
+      emphasis: {
+        $value: {
+          color: '{borderColor.attention.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.attention.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
+    severe: {
+      emphasis: {
+        $value: {
+          color: '{borderColor.severe.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.severe.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
+    done: {
+      emphasis: {
+        $value: {
+          color: '{borderColor.done.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.done.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
+    upsell: {
+      emphasis: {
+        $value: {
+          color: '{borderColor.upsell.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.upsell.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
+    sponsors: {
+      emphasis: {
+        $value: {
+          color: '{borderColor.sponsors.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.sponsors.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
+  },
+}

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

@@ -72,7 +72,6 @@
           },
         },
         alpha: 0.15,
-        mix: null,
       },
     },
     additionWord: {
@@ -153,7 +152,6 @@
             scopes: ['bgColor'],
           },
         },
-        mix: null,
       },
     },
     deletionWord: {

package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5

@@ -42,6 +42,33 @@
       $type: 'color',
       alpha: 1,
     },
+    accent: {
+      $value: '#478be6',
+      $type: 'color',
+    },
+  },
+  borderColor: {
+    default: {
+      $value: '{base.color.neutral.7}',
+      $type: 'color',
+    },
+    muted: {
+      $value: '{base.color.neutral.7}',
+      $type: 'color',
+      alpha: 0.7,
+    },
+    disabled: {
+      $value: '{base.color.neutral.8}',
+      $type: 'color',
+      alpha: 0.1,
+    },
+    neutral: {
+      muted: {
+        $value: '{base.color.neutral.7}',
+        $type: 'color',
+        alpha: 0.7,
+      },
+    },
   },
   control: {
     bgColor: {
@@ -60,9 +87,14 @@
     },
     borderColor: {
       rest: {
-        $value: '{borderColor.default}',
+        $value: '#3d444d',
         $type: 'color',
       },
+      disabled: {
+        $value: '{base.color.neutral.8}',
+        $type: 'color',
+        alpha: 0.1,
+      },
     },
     transparent: {
       bgColor: {
@@ -83,6 +115,28 @@
         },
       },
     },
+    checked: {
+      bgColor: {
+        hover: {
+          $value: '#3876d3',
+          $type: 'color',
+        },
+        active: {
+          $value: '#3f7fdb',
+          $type: 'color',
+        },
+      },
+      borderColor: {
+        hover: {
+          $value: '#3876d3',
+          $type: 'color',
+        },
+        active: {
+          $value: '#3f7fdb',
+          $type: 'color',
+        },
+      },
+    },
   },
   controlTrack: {
     bgColor: {
@@ -99,6 +153,12 @@
         $type: 'color',
       },
     },
+    borderColor: {
+      rest: {
+        $value: '{base.color.neutral.7}',
+        $type: 'color',
+      },
+    },
   },
   controlKnob: {
     bgColor: {
@@ -128,17 +188,32 @@
       $value: '{base.color.neutral.5}',
       $type: 'color',
     },
+    borderColor: {
+      $value: '{base.color.neutral.7}',
+      $type: 'color',
+      alpha: 0.7,
+    },
   },
   button: {
     primary: {
       bgColor: {
+        hover: {
+          $value: '#3b8640',
+          $type: 'color',
+        },
+        active: {
+          $value: '#428f46',
+          $type: 'color',
+        },
         disabled: {
-          $value: '{base.color.green.4}',
+          $value: '#50a254',
+          $type: 'color',
+        },
+      },
+      borderColor: {
+        disabled: {
+          $value: '#50a254',
           $type: 'color',
-          mix: {
-            color: '{base.color.green.3}',
-            weight: 0.6,
-          },
         },
       },
       fgColor: {
@@ -176,6 +251,34 @@
         $type: 'color',
       },
     },
+    outline: {
+      fgColor: {
+        disabled: {
+          $value: '#478be680',
+          $type: 'color',
+        },
+      },
+    },
+    danger: {
+      bgColor: {
+        active: {
+          $value: '#c33d38',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '#ea5c53',
+          $type: 'color',
+        },
+      },
+      iconColor: {
+        rest: {
+          $value: '#ea5c53',
+          $type: 'color',
+        },
+      },
+    },
   },
   timelineBadge: {
     bgColor: {
@@ -183,4 +286,15 @@
       $type: 'color',
     },
   },
+  reactionButton: {
+    selected: {
+      bgColor: {
+        hover: {
+          $value: '#4285e5',
+          $type: 'color',
+          alpha: 0.36,
+        },
+      },
+    },
+  },
 }

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

@@ -22,20 +22,12 @@
       $type: 'color',
     },
     accent: {
-      $value: '{base.color.blue.3}',
+      $value: '#74B9FF',
       $type: 'color',
-      mix: {
-        color: '{base.color.blue.2}',
-        weight: 0.08,
-      },
     },
     success: {
-      $value: '{base.color.green.3}',
+      $value: '#2BD853',
       $type: 'color',
-      mix: {
-        color: '{base.color.green.2}',
-        weight: 0.08,
-      },
     },
     danger: {
       $value: '{base.color.red.3}',
@@ -46,20 +38,12 @@
       $type: 'color',
     },
     done: {
-      $value: '{base.color.purple.3}',
+      $value: '#D3ABFF',
       $type: 'color',
-      mix: {
-        color: '{base.color.purple.2}',
-        weight: 0.5,
-      },
     },
     sponsors: {
-      $value: '{base.color.pink.3}',
+      $value: '#FF90C8',
       $type: 'color',
-      mix: {
-        color: '{base.color.pink.2}',
-        weight: 0.08,
-      },
     },
   },
   bgColor: {
@@ -288,7 +272,6 @@
       emphasis: {
         $value: '{borderColor.emphasis}',
         $type: 'color',
-        mix: null,
       },
     },
     transparent: {
@@ -327,17 +310,23 @@
           $type: 'color',
         },
         active: {
-          $value: '{bgColor.danger.emphasis}',
+          $value: '#c51120',
           $type: 'color',
           alpha: 1,
-          mix: {
-            color: '{base.color.red.7}',
-            weight: 0.4,
-          },
         },
       },
     },
     checked: {
+      bgColor: {
+        hover: {
+          $value: '#2b64c1',
+          $type: 'color',
+        },
+        active: {
+          $value: '#3c79d0',
+          $type: 'color',
+        },
+      },
       borderColor: {
         rest: {
           $value: '{base.color.blue.2}',
@@ -384,6 +373,20 @@
   },
   button: {
     primary: {
+      bgColor: {
+        hover: {
+          $value: '#08792b',
+          $type: 'color',
+        },
+        active: {
+          $value: '#109135',
+          $type: 'color',
+        },
+        disabled: {
+          $value: '#048f2f',
+          $type: 'color',
+        },
+      },
       borderColor: {
         rest: {
           $value: '{base.color.green.2}',
@@ -423,13 +426,11 @@
           $value: '{base.color.neutral.2}',
           $type: 'color',
           alpha: null,
-          mix: null,
         },
         active: {
           $value: '{base.color.neutral.3}',
           $type: 'color',
           alpha: null,
-          mix: null,
         },
       },
     },
@@ -468,7 +469,12 @@
         active: {
           $value: '{bgColor.danger.emphasis}',
           $type: 'color',
-          mix: null,
+        },
+      },
+      iconColor: {
+        rest: {
+          $value: '#ffb1af',
+          $type: 'color',
         },
       },
     },
@@ -945,6 +951,17 @@
       $type: 'color',
     },
   },
+  reactionButton: {
+    selected: {
+      bgColor: {
+        hover: {
+          $value: '#5dadff',
+          $type: 'color',
+          alpha: 0.36,
+        },
+      },
+    },
+  },
   skeletonLoader: {
     bgColor: {
       $value: '{base.color.neutral.5}',

package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5

@@ -146,25 +146,22 @@
     primary: {
       bgColor: {
         hover: {
-          $value: '{bgColor.success.emphasis}',
+          $value: '#2a7aef',
           $type: 'color',
-          mix: {
-            color: '{base.color.blue.3}',
-            weight: 0.2,
-          },
         },
         active: {
-          $value: '{bgColor.success.emphasis}',
+          $value: '#3685f3',
           $type: 'color',
-          mix: {
-            color: '{base.color.blue.3}',
-            weight: 0.4,
-          },
         },
         disabled: {
           $value: '{base.color.blue.6}',
           $type: 'color',
-          mix: null,
+        },
+      },
+      borderColor: {
+        disabled: {
+          $value: '#1158c7',
+          $type: 'color',
         },
       },
     },
@@ -181,12 +178,14 @@
           $type: 'color',
         },
         active: {
-          $value: '{base.color.orange.6}',
+          $value: '#b5531d',
+          $type: 'color',
+        },
+      },
+      iconColor: {
+        rest: {
+          $value: '#f0883e',
           $type: 'color',
-          mix: {
-            color: '{base.color.orange.4}',
-            weight: 0.4,
-          },
         },
       },
     },
@@ -218,7 +217,6 @@
         $value: '{base.color.orange.4}',
         $type: 'color',
         alpha: 0.15,
-        mix: null,
       },
     },
     deletionWord: {
@@ -233,7 +231,6 @@
         rest: {
           $value: '{base.color.neutral.6}',
           $type: 'color',
-          mix: null,
           $extensions: {
             alpha: 1,
           },
@@ -241,7 +238,6 @@
         hover: {
           $value: '{base.color.neutral.8}',
           $type: 'color',
-          mix: null,
           $extensions: {
             alpha: 1,
           },
@@ -252,7 +248,6 @@
       bgColor: {
         $value: '{base.color.neutral.3}',
         $type: 'color',
-        mix: null,
         $extensions: {
           alpha: 1,
         },