Upgrade to @primer/[email protected] and @primer/[email protected] (#2634)

* Upgrade primer/primitives to latest

* Change theme imports

* Remove empty css imports

* upgrade

* Replacing $spacing variables

* Replace a few direct values

* Fix stylelint add disables script

* Add stylelint disables to exisiting files

* Fix ci run

* Create young-foxes-battle.md

* Updates from suggestions

* Fix theme in storybook

Author: jonrohan

.changeset/young-foxes-battle.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Upgrade to @primer/primtives@8.2.0 and @primer/stylelint-config@13.0.0-rc 

.github/workflows/ci.yml

@@ -16,9 +16,7 @@ jobs:
       - run: npm ci
       - run: npm run dist
       - name: Lint source files
-        run: npx stylelint --fix
-      - name: Look for unused stylelint:disable lines
-        run: npm run stylelint -- --report-needless-disables
+        run: npm run stylelint:fix
       - name: Push up any fixes
         if: ${{ github.event_name == 'pull_request' }}
         uses: stefanzweifel/git-auto-commit-action@v5

docs/.storybook/preview.js

@@ -70,15 +70,12 @@ export const decorators = [
     const {parameters} = context
     const defaultStoryType = 'banner'
     const storyType = parameters.storyType || defaultStoryType
-    document.body.setAttribute('data-color-mode', context.globals.theme.startsWith('light') ? 'light' : 'dark')
-    document.body.setAttribute(
-      'data-light-theme',
-      context.globals.theme.startsWith('light') ? context.globals.theme : undefined,
-    )
-    document.body.setAttribute(
-      'data-dark-theme',
-      context.globals.theme.startsWith('dark') ? context.globals.theme : undefined,
-    )
+    const colorMode = context.globals.theme === '' ? 'light' : (context.globals.theme.startsWith('light') ? 'light' : 'dark')
+    const lightTheme = context.globals.theme === '' ? 'light' : (colorMode === 'light' ? context.globals.theme : undefined)
+    const darkTheme = context.globals.theme === '' ? 'dark' : (colorMode === 'dark' ? context.globals.theme : undefined)
+    document.body.setAttribute('data-color-mode', colorMode)
+    document.body.setAttribute('data-light-theme', lightTheme)
+    document.body.setAttribute('data-dark-theme', darkTheme)
     return (
       <>
         {context.globals.theme === 'all' ? (