@primer/primitives 8.2.4-rc.67dddfb7 → 8.2.4-rc.8aeeb948

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "8.2.4-rc.67dddfb7",
+  "version": "8.2.4-rc.8aeeb948",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",

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

@@ -19,40 +19,8 @@
       $value: '{base.color.neutral.4}',
       $type: 'color',
     },
-    accent: {
-      $value: '{base.color.blue.3}',
-      $type: 'color',
-      mix: {
-        color: '{base.color.blue.2}',
-        weight: 0.05,
-      },
-    },
-    danger: {
-      $value: '{base.color.red.3}',
-      $type: 'color',
-    },
-    severe: {
-      $value: '{base.color.orange.3}',
-      $type: 'color',
-    },
-    done: {
-      $value: '{base.color.purple.3}',
-      $type: 'color',
-    },
-    sponsors: {
-      $value: '{base.color.pink.3}',
-      $type: 'color',
-    },
   },
   bgColor: {
-    muted: {
-      $value: '{base.color.neutral.9}',
-      $type: 'color',
-      mix: {
-        color: '{base.color.neutral.8}',
-        weight: 0.5,
-      },
-    },
     emphasis: {
       $value: '{base.color.white}',
       $type: 'color',
@@ -63,62 +31,6 @@
         $type: 'color',
       },
     },
-    accent: {
-      muted: {
-        $value: '{base.color.blue.5}',
-        $type: 'color',
-        alpha: 0.1,
-      },
-    },
-    success: {
-      muted: {
-        $value: '{base.color.green.4}',
-        $type: 'color',
-        alpha: 0.14,
-      },
-    },
-    open: {
-      muted: {
-        $value: '{bgColor.success.muted}',
-        $type: 'color',
-        alpha: 0.14,
-      },
-    },
-    danger: {
-      muted: {
-        $value: '{base.color.red.4}',
-        $type: 'color',
-        alpha: 0.09,
-      },
-    },
-    closed: {
-      muted: {
-        $value: '{bgColor.danger.muted}',
-        $type: 'color',
-        alpha: 0.09,
-      },
-    },
-    severe: {
-      muted: {
-        $value: '{base.color.orange.4}',
-        $type: 'color',
-        alpha: 0.088,
-      },
-    },
-    done: {
-      muted: {
-        $value: '{base.color.purple.5}',
-        $type: 'color',
-        alpha: 0.09,
-      },
-    },
-    sponsors: {
-      muted: {
-        $value: '{base.color.pink.5}',
-        $type: 'color',
-        alpha: 0.09,
-      },
-    },
   },
   borderColor: {
     default: {
@@ -135,10 +47,6 @@
       $type: 'color',
       alpha: 1,
     },
-    emphasis: {
-      $value: '{base.color.neutral.4}',
-      $type: 'color',
-    },
     neutral: {
       muted: {
         $value: '{base.color.neutral.4}',
@@ -222,24 +130,10 @@
     },
   },
   control: {
-    fgColor: {
-      placeholder: {
-        $value: '{base.color.neutral.2}',
-        $type: 'color',
-        mix: {
-          color: '{base.color.neutral.1}',
-          weight: 0.5,
-        },
-      },
-    },
     bgColor: {
-      active: {
-        $value: '{base.color.neutral.7}',
+      selected: {
+        $value: '{base.color.neutral.6}',
         $type: 'color',
-        mix: {
-          color: '{base.color.neutral.8}',
-          weight: 0.2,
-        },
       },
     },
     borderColor: {

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

@@ -14,38 +14,14 @@
       $value: '{base.color.neutral.5}',
       $type: 'color',
     },
-    success: {
-      $value: '{base.color.green.6}',
-      $type: 'color',
-    },
     danger: {
       $value: '{base.color.red.6}',
       $type: 'color',
     },
-    attention: {
-      $value: '{base.color.yellow.6}',
-      $type: 'color',
-    },
-    severe: {
-      $value: '{base.color.orange.6}',
-      $type: 'color',
-    },
-    done: {
-      $value: '{base.color.purple.6}',
-      $type: 'color',
-    },
     accent: {
       $value: '{base.color.blue.6}',
       $type: 'color',
     },
-    accent: {
-      $value: '{base.color.blue.6}',
-      $type: 'color',
-    },
-    sponsors: {
-      $value: '{base.color.pink.6}',
-      $type: 'color',
-    },
   },
   bgColor: {
     muted: {
@@ -62,11 +38,6 @@
         $type: 'color',
         alpha: 1,
       },
-      emphasis: {
-        $value: '{base.color.neutral.6}',
-        $type: 'color',
-        alpha: 1,
-      },
     },
     disabled: {
       $value: '{base.color.neutral.2}',
@@ -126,13 +97,6 @@
         $type: 'color',
       },
     },
-    open: {
-      muted: {
-        $value: '{borderColor.success.muted}',
-        $type: 'color',
-        alpha: 1,
-      },
-    },
     attention: {
       muted: {
         $value: '{base.color.yellow.3}',
@@ -194,16 +158,6 @@
     },
   },
   control: {
-    fgColor: {
-      placeholder: {
-        $value: '{base.color.neutral.6}',
-        $type: 'color',
-        mix: {
-          color: '{base.color.neutral.7}',
-          weight: 0.2,
-        },
-      },
-    },
     bgColor: {
       rest: {
         $value: '{base.color.neutral.1}',

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

@@ -33,9 +33,12 @@
         $type: 'color',
       },
       emphasis: {
-        $value: '{base.color.blue.5}',
+        $value: '{base.color.blue.4}',
         $type: 'color',
-        mix: null
+        mix: {
+          color: '{base.color.blue.5}',
+          weight: 0.75,
+        },
       },
     },
     open: {
@@ -101,7 +104,7 @@
         alpha: 0.4,
       },
       emphasis: {
-        $value: '{base.color.blue.5}',
+        $value: '{base.color.blue.4}',
         $type: 'color',
       },
     },

package/src/tokens/functional/color/light/overrides/light.tritanopia.json5

@@ -29,9 +29,12 @@
         $type: 'color',
       },
       emphasis: {
-        $value: '{base.color.blue.5}',
+        $value: '{base.color.blue.4}',
         $type: 'color',
-        mix: null
+        mix: {
+          color: '{base.color.blue.5}',
+          weight: 0.75,
+        },
       },
     },
     open: {
@@ -73,7 +76,7 @@
         alpha: 0.4,
       },
       emphasis: {
-        $value: '{base.color.blue.5}',
+        $value: '{base.color.blue.4}',
         $type: 'color',
       },
     },

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

@@ -142,21 +142,6 @@
         },
       },
     },
-    open: {
-      $value: '{fgColor.success}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          mode: 'light',
-          group: 'semantic',
-          scopes: ['fgColor'],
-          codeSyntax: {
-            web: 'var(--fgColor-open) /* utility class: .color-fg-open */',
-          },
-        },
-      },
-    },
     attention: {
       $value: '{base.color.yellow.5}',
       $type: 'color',
@@ -206,6 +191,21 @@
         weight: 0.05,
       },
     },
+    open: {
+      $value: '{fgColor.success}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'light',
+          group: 'semantic',
+          scopes: ['fgColor'],
+          codeSyntax: {
+            web: 'var(--fgColor-open) /* utility class: .color-fg-open */',
+          },
+        },
+      },
+    },
     closed: {
       $value: '{fgColor.danger}',
       $type: 'color',
@@ -237,7 +237,7 @@
       },
     },
     upsell: {
-      $value: '{fgColor.done}',
+      $value: '{base.color.purple.5}',
       $type: 'color',
       $extensions: {
         'org.primer.figma': {
@@ -487,9 +487,9 @@
         },
       },
     },
-    open: {
+    attention: {
       muted: {
-        $value: '{bgColor.success.muted}',
+        $value: '{base.color.yellow.0}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -498,13 +498,13 @@
             group: 'semantic',
             scopes: ['bgColor'],
             codeSyntax: {
-              web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
+              web: 'var(--bgColor-attention-muted) /* utility class: .color-bg-attention */',
             },
           },
         },
       },
       emphasis: {
-        $value: '{bgColor.success.emphasis}',
+        $value: '{base.color.yellow.5}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -513,15 +513,15 @@
             group: 'semantic',
             scopes: ['bgColor'],
             codeSyntax: {
-              web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
+              web: 'var(--bgColor-attention-emphasis) /* utility class: .color-bg-attention-emphasis */',
             },
           },
         },
       },
     },
-    attention: {
+    severe: {
       muted: {
-        $value: '{base.color.yellow.0}',
+        $value: '{base.color.orange.0}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -530,13 +530,13 @@
             group: 'semantic',
             scopes: ['bgColor'],
             codeSyntax: {
-              web: 'var(--bgColor-attention-muted) /* utility class: .color-bg-attention */',
+              web: 'var(--bgColor-severe-muted) /* utility class: .color-bg-severe */',
             },
           },
         },
       },
       emphasis: {
-        $value: '{base.color.yellow.5}',
+        $value: '{base.color.orange.5}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -545,15 +545,15 @@
             group: 'semantic',
             scopes: ['bgColor'],
             codeSyntax: {
-              web: 'var(--bgColor-attention-emphasis) /* utility class: .color-bg-attention-emphasis */',
+              web: 'var(--bgColor-severe-emphasis) /* utility class: .color-bg-severe-emphasis */',
             },
           },
         },
       },
     },
-    severe: {
+    danger: {
       muted: {
-        $value: '{base.color.orange.0}',
+        $value: '{base.color.red.0}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -562,13 +562,13 @@
             group: 'semantic',
             scopes: ['bgColor'],
             codeSyntax: {
-              web: 'var(--bgColor-severe-muted) /* utility class: .color-bg-severe */',
+              web: 'var(--bgColor-danger-muted) /* utility class: .color-bg-danger */',
             },
           },
         },
       },
       emphasis: {
-        $value: '{base.color.orange.5}',
+        $value: '{base.color.red.5}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -577,15 +577,15 @@
             group: 'semantic',
             scopes: ['bgColor'],
             codeSyntax: {
-              web: 'var(--bgColor-severe-emphasis) /* utility class: .color-bg-severe-emphasis */',
+              web: 'var(--bgColor-danger-emphasis) /* utility class: .color-bg-danger-emphasis */',
             },
           },
         },
       },
     },
-    danger: {
+    open: {
       muted: {
-        $value: '{base.color.red.0}',
+        $value: '{bgColor.success.muted}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -594,13 +594,13 @@
             group: 'semantic',
             scopes: ['bgColor'],
             codeSyntax: {
-              web: 'var(--bgColor-danger-muted) /* utility class: .color-bg-danger */',
+              web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
             },
           },
         },
       },
       emphasis: {
-        $value: '{base.color.red.5}',
+        $value: '{bgColor.success.emphasis}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -609,7 +609,7 @@
             group: 'semantic',
             scopes: ['bgColor'],
             codeSyntax: {
-              web: 'var(--bgColor-danger-emphasis) /* utility class: .color-bg-danger-emphasis */',
+              web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
             },
           },
         },
@@ -617,7 +617,7 @@
     },
     closed: {
       muted: {
-        $value: '{bgColor.danger.muted}',
+        $value: '{base.color.red.0}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -632,7 +632,7 @@
         },
       },
       emphasis: {
-        $value: '{bgColor.danger.emphasis}',
+        $value: '{base.color.red.5}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -681,7 +681,7 @@
     },
     upsell: {
       muted: {
-        $value: '{bgColor.done.muted}',
+        $value: '{base.color.purple.0}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -696,7 +696,7 @@
         },
       },
       emphasis: {
-        $value: '{bgColor.done.emphasis}',
+        $value: '{base.color.purple.5}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -918,9 +918,9 @@
         },
       },
     },
-    open: {
+    attention: {
       muted: {
-        $value: '{borderColor.success.muted}',
+        $value: '{base.color.yellow.3}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -929,14 +929,14 @@
             group: 'semantic',
             scopes: ['borderColor'],
             codeSyntax: {
-              web: 'var(--borderColor-open-muted) /* utility class: .color-border-open */',
+              web: 'var(--borderColor-attention-muted) /* utility class: .color-border-attention */',
             },
           },
         },
         alpha: 0.4,
       },
       emphasis: {
-        $value: '{borderColor.success.emphasis}',
+        $value: '{base.color.yellow.4}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -945,15 +945,15 @@
             group: 'semantic',
             scopes: ['borderColor'],
             codeSyntax: {
-              web: 'var(--borderColor-open-emphasis) /* utility class: .color-border-open-emphasis */',
+              web: 'var(--borderColor-attention-emphasis) /* utility class: .color-border-attention-emphasis */',
             },
           },
         },
       },
     },
-    attention: {
+    severe: {
       muted: {
-        $value: '{base.color.yellow.3}',
+        $value: '{base.color.orange.3}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -962,14 +962,14 @@
             group: 'semantic',
             scopes: ['borderColor'],
             codeSyntax: {
-              web: 'var(--borderColor-attention-muted) /* utility class: .color-border-attention */',
+              web: 'var(--borderColor-severe-muted) /* utility class: .color-border-severe */',
             },
           },
         },
         alpha: 0.4,
       },
       emphasis: {
-        $value: '{base.color.yellow.4}',
+        $value: '{base.color.orange.5}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -978,15 +978,15 @@
             group: 'semantic',
             scopes: ['borderColor'],
             codeSyntax: {
-              web: 'var(--borderColor-attention-emphasis) /* utility class: .color-border-attention-emphasis */',
+              web: 'var(--borderColor-severe-emphasis) /* utility class: .color-border-severe-emphasis */',
             },
           },
         },
       },
     },
-    severe: {
+    danger: {
       muted: {
-        $value: '{base.color.orange.3}',
+        $value: '{base.color.red.3}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -995,14 +995,14 @@
             group: 'semantic',
             scopes: ['borderColor'],
             codeSyntax: {
-              web: 'var(--borderColor-severe-muted) /* utility class: .color-border-severe */',
+              web: 'var(--borderColor-danger-muted) /* utility class: .color-border-danger */',
             },
           },
         },
         alpha: 0.4,
       },
       emphasis: {
-        $value: '{base.color.orange.5}',
+        $value: '{base.color.red.5}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -1011,15 +1011,15 @@
             group: 'semantic',
             scopes: ['borderColor'],
             codeSyntax: {
-              web: 'var(--borderColor-severe-emphasis) /* utility class: .color-border-severe-emphasis */',
+              web: 'var(--borderColor-danger-emphasis) /* utility class: .color-border-danger-emphasis */',
             },
           },
         },
       },
     },
-    danger: {
+    open: {
       muted: {
-        $value: '{base.color.red.3}',
+        $value: '{borderColor.success.muted}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -1028,14 +1028,13 @@
             group: 'semantic',
             scopes: ['borderColor'],
             codeSyntax: {
-              web: 'var(--borderColor-danger-muted) /* utility class: .color-border-danger */',
+              web: 'var(--borderColor-open-muted) /* utility class: .color-border-open */',
             },
           },
         },
-        alpha: 0.4,
       },
       emphasis: {
-        $value: '{base.color.red.5}',
+        $value: '{borderColor.success.emphasis}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -1044,7 +1043,7 @@
             group: 'semantic',
             scopes: ['borderColor'],
             codeSyntax: {
-              web: 'var(--borderColor-danger-emphasis) /* utility class: .color-border-danger-emphasis */',
+              web: 'var(--borderColor-open-emphasis) /* utility class: .color-border-open-emphasis */',
             },
           },
         },
@@ -1118,7 +1117,7 @@
     },
     upsell: {
       muted: {
-        $value: '{borderColor.done.muted}',
+        $value: '{base.color.purple.3}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -1134,7 +1133,7 @@
         alpha: 0.4,
       },
       emphasis: {
-        $value: '{borderColor.done.emphasis}',
+        $value: '{base.color.purple.5}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {