@primer/components 29.0.0-rc.ae627848 → 29.1.0-rc.4e9b967e

package/.eslintrc.json

@@ -11,7 +11,8 @@
     "plugin:react-hooks/recommended",
     "plugin:prettier/recommended",
     "plugin:github/recommended",
-    "plugin:github/browser"
+    "plugin:github/browser",
+    "plugin:primer-react/recommended"
   ],
   "ignorePatterns": [
     "node_modules",

package/.storybook/preview.js

@@ -1,4 +1,62 @@
 import {addons} from '@storybook/addons'
+import {ThemeProvider, themeGet, theme} from '../src'
+import {createGlobalStyle} from 'styled-components'
+
+// set global theme styles for each story
+const GlobalStyle = createGlobalStyle`
+  body {
+    background-color: ${themeGet('colors.bg.primary')};
+    color: ${themeGet('colors.text.primary')};
+  }
+`
+export const globalTypes = {
+  colorMode: {
+    name: 'Color mode',
+    description: 'Color mode (day, night, auto)',
+    defaultValue: 'day',
+    toolbar: {
+      icon: 'paintbrush',
+      // array of colorMode items
+      items: ['day', 'night', 'auto'],
+      showName: true
+    }
+  },
+  dayScheme: {
+    name: 'Day color scheme',
+    description: 'Day color scheme',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'circlehollow',
+      items: Object.keys(theme.colorSchemes),
+      showName: true
+    }
+  },
+  nightScheme: {
+    name: 'Night color scheme',
+    description: 'Night color scheme',
+    defaultValue: 'dark',
+    toolbar: {
+      icon: 'circle',
+      items: Object.keys(theme.colorSchemes),
+      showName: true
+    }
+  }
+}
+
+// context.globals.X references items in globalTypes
+const withThemeProvider = (Story, context) => {
+  return (
+    <ThemeProvider
+      colorMode={context.globals.colorMode}
+      dayScheme={context.globals.dayScheme}
+      nightScheme={context.globals.nightScheme}
+    >
+      <GlobalStyle />
+      <Story {...context} />
+    </ThemeProvider>
+  )
+}
+export const decorators = [withThemeProvider]
 
 addons.setConfig({
   // Some stories may set up keyboard event handlers, which can can be interfered

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @primer/components
 
+## 29.1.0
+
+### Minor Changes
+
+- [#1412](https://github.com/primer/react/pull/1412) [`627cd3e9`](https://github.com/primer/react/commit/627cd3e95614ab4347e5acf456dd23588196ec87) Thanks [@colebemis](https://github.com/colebemis)! - Add `dark_high_contrast` color scheme
+
+* [#1412](https://github.com/primer/react/pull/1412) [`627cd3e9`](https://github.com/primer/react/commit/627cd3e95614ab4347e5acf456dd23588196ec87) Thanks [@colebemis](https://github.com/colebemis)! - Add new [functional color variables](https://primer.style/primitives/colors) to the theme object.
+
+  **Tip:** Install [`eslint-plugin-primer-react`](https://primer.style/react/linting) to ensure that you're not using any deprecated color variables.
+
 ## 29.0.0
 
 ### Major Changes
@@ -12,7 +22,9 @@
 
 ### Patch Changes
 
-- [#1403](https://github.com/primer/react/pull/1403) [`65cab2cc`](https://github.com/primer/react/commit/65cab2ccd5eae3dcc5d75cbd1a1fd78a6f78abf7) Thanks [@mathiasbosman](https://github.com/mathiasbosman)! - Fix the Timeline.Item layout
+- [#1424](https://github.com/primer/react/pull/1424) [`7cf8d8b8`](https://github.com/primer/react/commit/7cf8d8b82a6387b1143c06e090cde8f87b4f3a33) Thanks [@jfuchs](https://github.com/jfuchs)! - Removed irregular styling on Timeline
+
+* [#1403](https://github.com/primer/react/pull/1403) [`65cab2cc`](https://github.com/primer/react/commit/65cab2ccd5eae3dcc5d75cbd1a1fd78a6f78abf7) Thanks [@mathiasbosman](https://github.com/mathiasbosman)! - Fix the Timeline.Item layout
 
 ## 28.5.0