Add Primitives v8 colors (#529)

* move over from old pr

* remove old files

* replace decorative with muted

* remove decorative

* fix high contrast

* lukas' tests saving the day

* Create .changeset/cold-houses-swim.md

* use correct alpha for muted bg in dark

* fix dark alpha

* undo change to css build

.changeset/cold-houses-swim.md

@@ -0,0 +1,5 @@
+---
+"@primer/primitives": patch
+---
+
+Add Primitives v8 colors (private dist for testing)

docs/storybook/.storybook/preview.js

@@ -127,7 +127,7 @@ const tempTheme = deepmerge(theme, {
           borderHover: 'var(--underlineNav-borderColor-hover)',
         },
         actionListItem: {
-          inlineDivider: 'var(--borderColor-decorative)',
+          inlineDivider: 'var(--borderColor-muted)',
           default: {
             hoverBg: 'var(--control-transparent-bgColor-hover)',
             hoverBorder: 'var(--control-transparent-borderColor-hover)',

docs/storybook/stories/Color/Functional/Border.stories.tsx

@@ -8,13 +8,7 @@ export default {
   },
 }
 
-const borderColors = [
-  'borderColor-default',
-  'borderColor-muted',
-  'borderColor-decorative',
-  'borderColor-emphasis',
-  'borderColor-disabled',
-]
+const borderColors = ['borderColor-default', 'borderColor-muted', 'borderColor-emphasis', 'borderColor-disabled']
 
 export const Border = () => {
   return (

docs/storybook/stories/Demos/BorderDemo.stories.tsx

@@ -52,7 +52,7 @@ export const Borders: ComponentStory<typeof ColorPreview> = () => {
                 <ActionList.Item variant="danger">Danger</ActionList.Item>
               </ActionList>
             </div>
-            <CSSTokenSwatch color="borderColor-decorative" />
+            <CSSTokenSwatch color="borderColor-muted" />
           </div>
           <div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
             <div className="ActionList alt" style={{display: 'flex', gap: '1rem'}}>

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

@@ -6,7 +6,7 @@
   base: {
     color: {
       black: {
-        $value: '#1b1f24',
+        $value: '#1f2328',
         $type: 'color',
       },
       transparent: {

src/tokens/functional/border/dark.json5

@@ -2,7 +2,7 @@
   outline: {
     focus: {
       $value: {
-        color: '{color.focus}',
+        color: '{focus.outlineColor}',
         style: 'solid',
         width: '1px',
       },

src/tokens/functional/border/light.json5

@@ -1,8 +1,8 @@
 {
-  outline: {
-    focus: {
+  focus: {
+    outline: {
       $value: {
-        color: '{color.focus}',
+        color: '{focus.outlineColor}',
         style: 'solid',
         width: '1px',
       },

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

@@ -0,0 +1,242 @@
+{
+  topicTag: {
+    borderColor: {
+      $value: '{base.color.transparent}',
+      $type: 'color',
+    },
+  },
+  highlight: {
+    neutral: {
+      bgColor: {
+        $value: '{base.color.yellow.3}',
+        $type: 'color',
+        alpha: 0.4,
+      },
+    },
+  },
+  page: {
+    header: {
+      bgColor: {
+        $value: '{bgColor.default}',
+        $type: 'color',
+      },
+    },
+  },
+  diffBlob: {
+    addition: {
+      fgColor: {
+        text: {
+          $value: '{fgColor.default}',
+          $type: 'color',
+        },
+        num: {
+          $value: '{fgColor.default}',
+          $type: 'color',
+        },
+      },
+      bgColor: {
+        num: {
+          $value: '{base.color.green.3}',
+          $type: 'color',
+          alpha: 0.3,
+        },
+        line: {
+          $value: '{base.color.green.4}',
+          $type: 'color',
+          alpha: 0.15,
+          mix: null,
+        },
+        word: {
+          $value: '{base.color.green.4}',
+          $type: 'color',
+          alpha: 0.4,
+        },
+      },
+    },
+    deletion: {
+      fgColor: {
+        text: {
+          $value: '{fgColor.default}',
+          $type: 'color',
+        },
+        num: {
+          $value: '{fgColor.default}',
+          $type: 'color',
+        },
+      },
+      bgColor: {
+        num: {
+          $value: '{base.color.red.4}',
+          $type: 'color',
+          alpha: 0.3,
+        },
+        line: {
+          $value: '{base.color.red.4}',
+          $type: 'color',
+          alpha: 0.15,
+          mix: null,
+        },
+        word: {
+          $value: '{base.color.red.4}',
+          $type: 'color',
+          alpha: 0.4,
+        },
+      },
+    },
+    hunk: {
+      bgColor: {
+        num: {
+          $value: '{borderColor.accent.muted}',
+          $type: 'color',
+        },
+      },
+    },
+    expander: {
+      iconColor: {
+        $value: '{fgColor.muted}',
+        $type: 'color',
+      },
+    },
+  },
+  diffStat: {
+    addition: {
+      bgColor: {
+        $value: '{bgColor.success.emphasis}',
+        $type: 'color',
+      },
+    },
+  },
+  codeMirror: {
+    fgColor: {
+      $value: '{fgColor.default}',
+      $type: 'color',
+    },
+    bgColor: {
+      $value: '{bgColor.default}',
+      $type: 'color',
+    },
+    gutters: {
+      bgColor: {
+        $value: '{bgColor.default}',
+        $type: 'color',
+      },
+    },
+    gutterMarker: {
+      fgColor: {
+        default: {
+          $value: '{bgColor.default}',
+          $type: 'color',
+        },
+        muted: {
+          $value: '{fgColor.muted}',
+          $type: 'color',
+        },
+      },
+    },
+    lineNumber: {
+      fgColor: {
+        $value: '{fgColor.muted}',
+        $type: 'color',
+      },
+    },
+    cursor: {
+      fgColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+      },
+    },
+    selection: {
+      bgColor: {
+        $value: '{borderColor.accent.muted}',
+        $type: 'color',
+      },
+    },
+    activeline: {
+      bgColor: {
+        $value: '{bgColor.neutral.muted}',
+        $type: 'color',
+      },
+    },
+    matchingBracket: {
+      fgColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+      },
+    },
+    lines: {
+      bgColor: {
+        $value: '{bgColor.default}',
+        $type: 'color',
+      },
+    },
+    syntax: {
+      fgColor: {
+        comment: {
+          $value: '{base.color.gray.3}',
+          $type: 'color',
+        },
+        constant: {
+          $value: '{base.color.blue.2}',
+          $type: 'color',
+        },
+        entity: {
+          $value: '{base.color.purple.2}',
+          $type: 'color',
+        },
+        keyword: {
+          $value: '{base.color.red.3}',
+          $type: 'color',
+        },
+        storage: {
+          $value: '{base.color.red.3}',
+          $type: 'color',
+        },
+        string: {
+          $value: '{base.color.blue.1}',
+          $type: 'color',
+        },
+        support: {
+          $value: '{base.color.blue.2}',
+          $type: 'color',
+        },
+        variable: {
+          $value: '{base.color.orange.2}',
+          $type: 'color',
+        },
+      },
+    },
+  },
+  header: {
+    fgColor: {
+      default: {
+        $value: '{fgColor.onEmphasis}',
+        $type: 'color',
+        alpha: 0.7,
+      },
+      logo: {
+        $value: '{fgColor.onEmphasis}',
+        $type: 'color',
+      },
+    },
+    bgColor: {
+      $value: '{base.color.gray.9}',
+      $type: 'color',
+    },
+    borderColor: {
+      divider: {
+        $value: '{base.color.gray.3}',
+        $type: 'color',
+      },
+    },
+  },
+  headerSearch: {
+    bgColor: {
+      $value: '{base.color.gray.9}',
+      $type: 'color',
+    },
+    borderColor: {
+      $value: '{base.color.gray.6}',
+      $type: 'color',
+    },
+  },
+}