Merge branch 'main' into deyarnify

CHANGELOG.md

@@ -1,5 +1,39 @@
 # @primer/css
 
+## 21.0.7
+
+### Patch Changes
+
+- [#2472](https://github.com/primer/css/pull/2472) [`3ee117e1`](https://github.com/primer/css/commit/3ee117e1bd67675a5bdc2739bbe4d05f4e297c30) Thanks [@simurai](https://github.com/simurai)! - Add `::selection` to `color-mode-theme()` mixin
+
+## 21.0.6
+
+### Patch Changes
+
+- [#2470](https://github.com/primer/css/pull/2470) [`03e1a26c`](https://github.com/primer/css/commit/03e1a26c0d4fcc85450998f0f1f8120a1db48acc) Thanks [@langermank](https://github.com/langermank)! - Revert #2461 default selection color
+
+## 21.0.5
+
+### Patch Changes
+
+- [#2468](https://github.com/primer/css/pull/2468) [`c6d5d1df`](https://github.com/primer/css/commit/c6d5d1dfd3eafe44197ddc262f605dc5373437ac) Thanks [@keithamus](https://github.com/keithamus)! - Fix bug with `color-mode` mixin not applying correctly due to `::selection`
+
+## 21.0.4
+
+### Patch Changes
+
+- [#2466](https://github.com/primer/css/pull/2466) [`92047014`](https://github.com/primer/css/commit/9204701416b547255a1ebaeb2bd8a20056ffb8d4) Thanks [@langermank](https://github.com/langermank)! - Use `@primer/primitives` v8 colors with fallbacks
+
+## 21.0.3
+
+### Patch Changes
+
+- [#2461](https://github.com/primer/css/pull/2461) [`abc89659`](https://github.com/primer/css/commit/abc8965913313bbb969db9e1148fb5add9327ec9) Thanks [@langermank](https://github.com/langermank)! - Add default `::selection` color
+
+- [#2410](https://github.com/primer/css/pull/2410) [`344224fc`](https://github.com/primer/css/commit/344224fccdef2f3a37ed931c512e400b47301ea2) Thanks [@dylanatsmith](https://github.com/dylanatsmith)! - Add width utility to limit line length for readability
+
+- [#2457](https://github.com/primer/css/pull/2457) [`352ed7b7`](https://github.com/primer/css/commit/352ed7b75585c686c996a5e7c2c29e20e41d0672) Thanks [@langermank](https://github.com/langermank)! - Add new PostCSS fallback config
+
 ## 21.0.2
 
 ### Patch Changes

docs/.babelrc

@@ -1,6 +1,14 @@
 {
+  "sourceType": "unambiguous",
   "presets": [
-    "babel-preset-gatsby",
-    "@babel/preset-react"
+    "@babel/preset-react",
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ]
   ]
 }

docs/.eslintrc.json

@@ -1,13 +1,17 @@
 {
   "extends": [
     "plugin:react/recommended",
-    "plugin:jsx-a11y/recommended"
+    "plugin:jsx-a11y/recommended",
+    "plugin:storybook/recommended"
   ],
   "rules": {
     "import/no-namespace": 0,
-    "no-unused-vars": ["error", {
-      "ignoreRestSiblings": true
-    }]
+    "no-unused-vars": [
+      "error",
+      {
+        "ignoreRestSiblings": true
+      }
+    ]
   },
   "settings": {
     "react": {

docs/.storybook/main.js

@@ -1,17 +1,29 @@
-module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    '@storybook/addon-a11y',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/preset-scss',
-    '@whitespace/storybook-addon-html',
-    'storybook-addon-designs',
-    'storybook-color-picker',
-    'storybook-addon-variants/preset.js'
+    '@storybook/addon-interactions',
+    'storybook-addon-pseudo-states',
+    '@storybook/addon-storysource',
+    '@geometricpanda/storybook-addon-badges',
+    {
+      name: '@storybook/addon-styling',
+      options: {
+        sass: {
+          implementation: require('sass'),
+        },
+      },
+    },
   ],
-  framework: '@storybook/react',
-  core: {
-    builder: 'webpack5'
-  }
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../stories/static'],
 }
+export default config

docs/.storybook/manager.js

@@ -0,0 +1,6 @@
+import {addons} from '@storybook/manager-api'
+import theme from './theme'
+
+addons.setConfig({
+  theme: theme,
+})

docs/.storybook/preview-head.html

@@ -1,33 +1 @@
-<style>
-  .story-wrap {
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
-      Helvetica Neue, sans-serif;
-    color: var(--color-fg-default);
-    background-color: var(--color-canvas-default);
-    height: 100vh;
-  }
-
-  .theme-wrap {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    height: 100vh;
-  }
-
-  .theme-wrap .story-wrap {
-    padding: 1rem;
-    height: unset;
-  }
-
-  .sb-main-padded .theme-wrap {
-    margin: -1rem;
-  }
-
-  .sb-main-fullscreen .theme-wrap .story-wrap {
-    padding: 0;
-  }
-
-  .sb-main-padded div:not(.theme-wrap) > [data-dark-theme] {
-    margin: -1rem;
-    padding: 1rem;
-  }
-</style>
+<link href="https://unpkg.com/@github/details-dialog-element/dist/index.css" rel="stylesheet" />

docs/.storybook/preview.css

@@ -0,0 +1,9 @@
+@import '@primer/primitives/tokens-next-private/css/base/size/size.css';
+@import '@primer/primitives/tokens-next-private/css/base/typography/typography.css';
+@import '@primer/primitives/tokens-next-private/css/functional/size/border.css';
+@import '@primer/primitives/tokens-next-private/css/functional/size/breakpoints.css';
+@import '@primer/primitives/tokens-next-private/css/functional/size/size-coarse.css';
+@import '@primer/primitives/tokens-next-private/css/functional/size/size-fine.css';
+@import '@primer/primitives/tokens-next-private/css/functional/size/size.css';
+@import '@primer/primitives/tokens-next-private/css/functional/size/viewport.css';
+@import '@primer/primitives/tokens-next-private/css/functional/typography/typography.css';