@primer/primitives 9.0.0-rc.fa8264ac → 9.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "9.0.0-rc.fa8264ac",
+  "version": "9.0.0",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "engines": {
     "node": ">=18.18.0 <18.19.0"

package/src/schemas/colorToken.ts

@@ -42,7 +42,7 @@ export const colorToken = baseToken
             'light tritanopia',
             'dark tritanopia',
           ]).optional(),
-          scopes: scopes(['all', 'bgColor', 'fgColor', 'borderColor']).optional(),
+          scopes: scopes(['all', 'bgColor', 'fgColor', 'borderColor', 'effectColor']).optional(),
         }),
       })
       .optional(),

package/src/schemas/dimensionToken.ts

@@ -20,6 +20,7 @@ export const dimensionToken = baseToken
             'gap',
             'radius',
             'borderColor',
+            'effectFloat',
             'fontSize',
             'letterSpacing',
             'lineHeight',

package/src/schemas/scopes.ts

@@ -2,33 +2,17 @@ import {z} from 'zod'
 import {joinFriendly} from '../utilities/joinFriendly'
 import {schemaErrorMessage} from '../utilities/schemaErrorMessage'
 
-export type ValidScope =
-  | 'all'
-  | 'bgColor'
-  | 'fgColor'
-  | 'borderColor'
-  | 'size'
-  | 'gap'
-  | 'radius'
-  | 'effectColor'
-  | 'opacity'
-  | 'fontFamily'
-  | 'fontStyle'
-  | 'fontWeight'
-  | 'fontSize'
-  | 'lineHeight'
-  | 'letterSpacing'
-  | 'paragraphSpacing'
-  | 'paragraphIndent'
-const validScopes: ValidScope[] = [
+const validScopes = [
   'all',
   'bgColor',
   'fgColor',
   'borderColor',
+  'borderWidth',
   'size',
   'gap',
   'radius',
   'effectColor',
+  'effectFloat',
   'opacity',
   'fontFamily',
   'fontStyle',
@@ -38,14 +22,19 @@ const validScopes: ValidScope[] = [
   'letterSpacing',
   'paragraphSpacing',
   'paragraphIndent',
-]
+] as const
+
+export type ValidScope = (typeof validScopes)[number]
 
 export const scopes = (scopeSubset?: ValidScope[]) => {
   const scopeArray = scopeSubset ?? validScopes
   return z.array(z.string()).refine(
     value => value.every(item => scopeArray.includes(item as ValidScope)),
     value => ({
-      message: schemaErrorMessage(`Invalid scope: "${value}"`, `Valid scopes are: ${joinFriendly(scopeArray)}`),
+      message: schemaErrorMessage(
+        `Invalid scope: "${value}"`,
+        `Valid scopes are: ${joinFriendly(scopeArray as string[])}`,
+      ),
     }),
   )
 }

package/src/tokens/base/color/dark/dark.dimmed.json5

@@ -13,16 +13,6 @@
             collection: 'base/color/dark-dimmed',
           },
         },
-        $extensions: {
-          'org.primer.figma': {
-            collection: 'base/color/dark-dimmed',
-          },
-        },
-        $extensions: {
-          'org.primer.figma': {
-            collection: 'base/color/dark-dimmed',
-          },
-        },
       },
       white: {
         $value: '#cdd9e5',
@@ -32,16 +22,6 @@
             collection: 'base/color/dark-dimmed',
           },
         },
-        $extensions: {
-          'org.primer.figma': {
-            collection: 'base/color/dark-dimmed',
-          },
-        },
-        $extensions: {
-          'org.primer.figma': {
-            collection: 'base/color/dark-dimmed',
-          },
-        },
       },
       blue: {
         '0': {

package/src/tokens/base/color/dark/dark.json5

@@ -44,7 +44,7 @@
       },
       neutral: {
         '0': {
-          $value: '#0D1117',
+          $value: '{base.color.black}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -53,7 +53,7 @@
           },
         },
         '1': {
-          $value: '#151B23',
+          $value: '#0D1117',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -62,7 +62,7 @@
           },
         },
         '2': {
-          $value: '#212830',
+          $value: '#151B23',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -71,7 +71,7 @@
           },
         },
         '3': {
-          $value: '#262C36',
+          $value: '#212830',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -80,7 +80,7 @@
           },
         },
         '4': {
-          $value: '#2A313C',
+          $value: '#262C36',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -89,7 +89,7 @@
           },
         },
         '5': {
-          $value: '#2F3742',
+          $value: '#2A313C',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -98,7 +98,7 @@
           },
         },
         '6': {
-          $value: '#3D444D',
+          $value: '#2F3742',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -107,7 +107,7 @@
           },
         },
         '7': {
-          $value: '#656C76',
+          $value: '#3D444D',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -116,7 +116,7 @@
           },
         },
         '8': {
-          $value: '#9198A1',
+          $value: '#656C76',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -125,7 +125,7 @@
           },
         },
         '9': {
-          $value: '#B7BDC8',
+          $value: '#9198A1',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -134,7 +134,7 @@
           },
         },
         '10': {
-          $value: '#D1D7E0',
+          $value: '#B7BDC8',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -143,6 +143,15 @@
           },
         },
         '11': {
+          $value: '#D1D7E0',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'base/color/dark',
+            },
+          },
+        },
+        '12': {
           $value: '#F0F6FC',
           $type: 'color',
           $extensions: {
@@ -151,6 +160,15 @@
             },
           },
         },
+        '13': {
+          $value: '{base.color.white}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'base/color/dark',
+            },
+          },
+        },
       },
       blue: {
         '0': {

package/src/tokens/base/color/light/light.json5

@@ -44,7 +44,7 @@
       },
       neutral: {
         '0': {
-          $value: '#F6F8FA',
+          $value: '{base.color.white}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -53,7 +53,7 @@
           },
         },
         '1': {
-          $value: '#EFF2F5',
+          $value: '#F6F8FA',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -62,7 +62,7 @@
           },
         },
         '2': {
-          $value: '#E6EAEF',
+          $value: '#EFF2F5',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -71,7 +71,7 @@
           },
         },
         '3': {
-          $value: '#E0E6EB',
+          $value: '#E6EAEF',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -80,7 +80,7 @@
           },
         },
         '4': {
-          $value: '#DAE0E7',
+          $value: '#E0E6EB',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -89,7 +89,7 @@
           },
         },
         '5': {
-          $value: '#D1D9E0',
+          $value: '#DAE0E7',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -98,7 +98,7 @@
           },
         },
         '6': {
-          $value: '#C8D1DA',
+          $value: '#D1D9E0',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -107,7 +107,7 @@
           },
         },
         '7': {
-          $value: '#818B98',
+          $value: '#C8D1DA',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -116,7 +116,7 @@
           },
         },
         '8': {
-          $value: '#59636E',
+          $value: '#818B98',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -125,7 +125,7 @@
           },
         },
         '9': {
-          $value: '#454C54',
+          $value: '#59636E',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -134,7 +134,7 @@
           },
         },
         '10': {
-          $value: '#393F46',
+          $value: '#454C54',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -143,6 +143,15 @@
           },
         },
         '11': {
+          $value: '#393F46',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'base/color/light',
+            },
+          },
+        },
+        '12': {
           $value: '#25292E',
           $type: 'color',
           $extensions: {
@@ -151,6 +160,15 @@
             },
           },
         },
+        '13': {
+          $value: '{base.color.black}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'base/color/light',
+            },
+          },
+        },
       },
       blue: {
         '0': {

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

@@ -372,7 +372,7 @@
     syntax: {
       fgColor: {
         comment: {
-          $value: '{base.color.neutral.7}',
+          $value: '{base.color.neutral.8}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -499,7 +499,7 @@
       },
     },
     bgColor: {
-      $value: '{base.color.neutral.9}',
+      $value: '{base.color.neutral.10}',
       $type: 'color',
       $extensions: {
         'org.primer.figma': {
@@ -512,7 +512,7 @@
     },
     borderColor: {
       divider: {
-        $value: '{base.color.neutral.3}',
+        $value: '{base.color.neutral.4}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -527,7 +527,7 @@
   },
   headerSearch: {
     bgColor: {
-      $value: '{base.color.neutral.9}',
+      $value: '{base.color.neutral.10}',
       $type: 'color',
       $extensions: {
         'org.primer.figma': {
@@ -539,7 +539,7 @@
       },
     },
     borderColor: {
-      $value: '{base.color.neutral.6}',
+      $value: '{base.color.neutral.7}',
       $type: 'color',
       $extensions: {
         'org.primer.figma': {

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

@@ -6,39 +6,39 @@
 {
   bgColor: {
     default: {
-      $value: '{base.color.neutral.2}',
+      $value: '{base.color.neutral.3}',
       $type: 'color',
     },
     muted: {
-      $value: '{base.color.neutral.3}',
+      $value: '{base.color.neutral.4}',
       $type: 'color',
     },
     inset: {
-      $value: '{base.color.neutral.1}',
+      $value: '{base.color.neutral.2}',
       $type: 'color',
     },
     disabled: {
-      $value: '{base.color.neutral.4}',
+      $value: '{base.color.neutral.5}',
       $type: 'color',
     },
     neutral: {
       emphasis: {
-        $value: '{base.color.neutral.7}',
+        $value: '{base.color.neutral.8}',
         $type: 'color',
       },
     },
   },
   fgColor: {
     default: {
-      $value: '{base.color.neutral.10}',
+      $value: '{base.color.neutral.11}',
       $type: 'color',
     },
     onEmphasis: {
-      $value: '{base.color.neutral.11}',
+      $value: '{base.color.neutral.12}',
       $type: 'color',
     },
     disabled: {
-      $value: '{base.color.neutral.7}',
+      $value: '{base.color.neutral.8}',
       $type: 'color',
       alpha: 1,
     },
@@ -46,15 +46,15 @@
   control: {
     bgColor: {
       rest: {
-        $value: '{base.color.neutral.4}',
+        $value: '{base.color.neutral.5}',
         $type: 'color',
       },
       hover: {
-        $value: '{base.color.neutral.5}',
+        $value: '{base.color.neutral.6}',
         $type: 'color',
       },
       active: {
-        $value: '{base.color.neutral.6}',
+        $value: '{base.color.neutral.7}',
         $type: 'color',
       },
     },
@@ -67,17 +67,17 @@
     transparent: {
       bgColor: {
         hover: {
-          $value: '{base.color.neutral.7}',
+          $value: '{base.color.neutral.8}',
           $type: 'color',
           alpha: 0.15,
         },
         active: {
-          $value: '{base.color.neutral.7}',
+          $value: '{base.color.neutral.8}',
           $type: 'color',
           alpha: 0.2,
         },
         selected: {
-          $value: '{base.color.neutral.7}',
+          $value: '{base.color.neutral.8}',
           $type: 'color',
           alpha: 0.1,
         },
@@ -87,15 +87,15 @@
   controlTrack: {
     bgColor: {
       rest: {
-        $value: '{base.color.neutral.4}',
+        $value: '{base.color.neutral.5}',
         $type: 'color',
       },
       hover: {
-        $value: '{base.color.neutral.5}',
+        $value: '{base.color.neutral.6}',
         $type: 'color',
       },
       active: {
-        $value: '{base.color.neutral.6}',
+        $value: '{base.color.neutral.7}',
         $type: 'color',
       },
     },
@@ -127,13 +127,13 @@
   overlay: {
     backdrop: {
       bgColor: {
-        $value: '{base.color.neutral.3}',
+        $value: '{base.color.neutral.4}',
         $type: 'color',
         alpha: 0.4,
       },
     },
     bgColor: {
-      $value: '{base.color.neutral.4}',
+      $value: '{base.color.neutral.5}',
       $type: 'color',
     },
   },
@@ -165,29 +165,29 @@
     invisible: {
       iconColor: {
         rest: {
-          $value: '{base.color.neutral.9}',
+          $value: '{base.color.neutral.10}',
           $type: 'color',
         },
         hover: {
-          $value: '{base.color.neutral.9}',
+          $value: '{base.color.neutral.10}',
           $type: 'color',
         },
       },
     },
     inactive: {
       bgColor: {
-        $value: '{base.color.neutral.4}',
+        $value: '{base.color.neutral.5}',
         $type: 'color',
       },
       fgColor: {
-        $value: '{base.color.neutral.7}',
+        $value: '{base.color.neutral.8}',
         $type: 'color',
       },
     },
   },
   timelineBadge: {
     bgColor: {
-      $value: '{base.color.neutral.3}',
+      $value: '{base.color.neutral.4}',
       $type: 'color',
     },
   },