@primer/primitives 10.1.0-rc.f1589f93 → 10.1.0

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

@@ -398,7 +398,7 @@
           },
         },
         hover: {
-          $value: '{bgColor.accent.emphasis}',
+          $value: '#0860ca',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -407,13 +407,9 @@
               scopes: ['bgColor'],
             },
           },
-          mix: {
-            color: '{base.color.blue.7}',
-            weight: 0.2,
-          },
         },
         active: {
-          $value: '{bgColor.accent.emphasis}',
+          $value: '#0757ba',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -422,10 +418,6 @@
               scopes: ['bgColor'],
             },
           },
-          mix: {
-            color: '{base.color.blue.7}',
-            weight: 0.4,
-          },
         },
         disabled: {
           $value: '{fgColor.disabled}',
@@ -881,7 +873,7 @@
           },
         },
         hover: {
-          $value: '{bgColor.success.emphasis}',
+          $value: '#1c8139',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -890,13 +882,9 @@
               scopes: ['bgColor'],
             },
           },
-          mix: {
-            color: '{base.color.green.6}',
-            weight: 0.2,
-          },
         },
         active: {
-          $value: '{bgColor.success.emphasis}',
+          $value: '#197935',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -905,13 +893,9 @@
               scopes: ['bgColor'],
             },
           },
-          mix: {
-            color: '{base.color.green.6}',
-            weight: 0.4,
-          },
         },
         disabled: {
-          $value: '{base.color.green.4}',
+          $value: '#95d8a6',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -920,10 +904,6 @@
               scopes: ['bgColor'],
             },
           },
-          mix: {
-            color: '{base.color.green.0}',
-            weight: 0.6,
-          },
         },
       },
       borderColor: {
@@ -1091,7 +1071,7 @@
           },
         },
         disabled: {
-          $value: '{control.transparent.bgColor.disabled}',
+          $value: '{base.color.transparent}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1126,7 +1106,7 @@
           },
         },
         disabled: {
-          $value: '{control.borderColor.disabled}',
+          $value: '{base.color.transparent}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1210,7 +1190,7 @@
           },
         },
         active: {
-          $value: '{bgColor.accent.emphasis}',
+          $value: '#0757ba',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1219,10 +1199,6 @@
               scopes: ['bgColor'],
             },
           },
-          mix: {
-            color: '{base.color.blue.7}',
-            weight: 0.4,
-          },
         },
         disabled: {
           $value: '{control.bgColor.disabled}',
@@ -1357,7 +1333,7 @@
           },
         },
         active: {
-          $value: '{base.color.red.6}',
+          $value: '#8b0820',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1366,10 +1342,6 @@
               scopes: ['bgColor'],
             },
           },
-          mix: {
-            color: '{base.color.red.8}',
-            weight: 0.4,
-          },
         },
         disabled: {
           $value: '{control.bgColor.disabled}',
@@ -1621,7 +1593,7 @@
       },
       fgColor: {
         rest: {
-          $value: '{base.color.red.5}',
+          $value: '#c21c2c',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1630,10 +1602,6 @@
               scopes: ['fgColor'],
             },
           },
-          mix: {
-            color: '{base.color.red.6}',
-            weight: 0.3,
-          },
         },
         hover: {
           $value: '{base.color.neutral.0}',
@@ -1676,7 +1644,7 @@
           },
         },
         hover: {
-          $value: '{reactionButton.selected.bgColor.rest}',
+          $value: '#caecff',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1685,10 +1653,6 @@
               scopes: ['bgColor'],
             },
           },
-          mix: {
-            color: '{base.color.blue.2}',
-            weight: 0.2,
-          },
         },
       },
       fgColor: {

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

@@ -182,7 +182,7 @@
       },
     },
     danger: {
-      $value: '{base.color.red.5}',
+      $value: '#d1242f',
       $type: 'color',
       $extensions: {
         'org.primer.figma': {
@@ -194,10 +194,6 @@
           },
         },
       },
-      mix: {
-        color: '{base.color.red.4}',
-        weight: 0.05,
-      },
     },
     closed: {
       $value: '{fgColor.danger}',
@@ -442,7 +438,7 @@
         },
       },
       emphasis: {
-        $value: '{base.color.green.4}',
+        $value: '#1f883d',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -454,10 +450,6 @@
             },
           },
         },
-        mix: {
-          color: '{base.color.green.5}',
-          weight: 0.75,
-        },
       },
     },
     open: {

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

@@ -0,0 +1,115 @@
+{
+  boxShadow: {
+    thin: {
+      $value: 'inset 0 0 0 {borderWidth.thin}',
+      $description: 'Thin shadow for borders',
+      $type: 'string',
+    },
+    thick: {
+      $value: 'inset 0 0 0 {borderWidth.thick}',
+      $type: 'string',
+    },
+    thicker: {
+      $value: 'inset 0 0 0 {borderWidth.thicker}',
+      $type: 'string',
+    },
+  },
+  borderWidth: {
+    default: {
+      $value: '{borderWidth.thin}',
+      $type: 'dimension',
+    },
+    thin: {
+      $value: '1px',
+      $type: 'dimension',
+    },
+    thick: {
+      $value: '2px',
+      $type: 'dimension',
+    },
+    thicker: {
+      $value: '4px',
+      $type: 'dimension',
+    },
+  },
+  borderRadius: {
+    small: {
+      $value: '3px',
+      $type: 'dimension',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'functional/size',
+          scopes: ['radius'],
+          codeSyntax: {
+            web: 'var(--borderRadius-small) /* utility class: .rounded-1 */',
+          },
+        },
+      },
+    },
+    medium: {
+      $value: '6px',
+      $type: 'dimension',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'functional/size',
+          scopes: ['radius'],
+          codeSyntax: {
+            web: 'var(--borderRadius-medium) /* utility class: .rounded-2 */',
+          },
+        },
+      },
+    },
+    large: {
+      $value: '12px',
+      $type: 'dimension',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'functional/size',
+          scopes: ['radius'],
+          codeSyntax: {
+            web: 'var(--borderRadius-large) /* utility class: .rounded-3 */',
+          },
+        },
+      },
+    },
+    full: {
+      $value: '9999px',
+      $type: 'dimension',
+      $description: 'Use this border radius for pill shaped elements',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'functional/size',
+          scopes: ['radius'],
+          codeSyntax: {
+            web: 'var(--borderRadius-full) /* utility class: .circle */',
+          },
+        },
+      },
+    },
+    default: {
+      $value: '{borderRadius.medium}',
+      $type: 'dimension',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'functional/size',
+          scopes: ['radius'],
+          codeSyntax: {
+            web: 'var(--borderRadius-default) /* utility class: .rounded-2 */',
+          },
+        },
+      },
+    },
+  },
+  outline: {
+    focus: {
+      offset: {
+        $value: '-2px',
+        $type: 'dimension',
+      },
+      width: {
+        $value: '2px',
+        $type: 'dimension',
+      },
+    },
+  },
+}