Merge pull request #1836 from system-ui/develop

Merge develop to stable for v0.9.2

.eslintrc.js

@@ -11,5 +11,6 @@ module.exports = {
   rules: {
     'no-use-before-define': 'off',
     'react/react-in-jsx-scope': 'off',
+    '@typescript-eslint/no-redeclare': 'off',
   },
 }

.github/dependabot.yml

@@ -1,96 +1,98 @@
+# see https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/
 version: 2
 updates:
-- package-ecosystem: npm
-  directory: "/"
-  schedule:
-    interval: weekly
-  open-pull-requests-limit: 10
-  ignore:
-  - dependency-name: babel-preset-gatsby
-    versions:
-    - ">= 0.11.a, < 0.12"
-  - dependency-name: gatsby-plugin-catch-links
-    versions:
-    - ">= 2.10.a, < 2.11"
-  - dependency-name: gatsby-plugin-catch-links
-    versions:
-    - ">= 2.9.a, < 2.10"
-  - dependency-name: gatsby-plugin-mdx
-    versions:
-    - "> 1.10.0, < 1.11"
-  - dependency-name: gatsby-plugin-mdx
-    versions:
-    - ">= 1.9.a, < 1.10"
-  - dependency-name: gatsby-plugin-react-helmet
-    versions:
-    - ">= 3.10.a, < 3.11"
-  - dependency-name: gatsby-plugin-react-helmet
-    versions:
-    - ">= 3.7.a, < 3.8"
-  - dependency-name: gatsby-plugin-react-helmet
-    versions:
-    - ">= 3.9.a, < 3.10"
-  - dependency-name: gatsby-plugin-react-helmet
-    versions:
-    - ">= 4.0.a, < 4.1"
-  - dependency-name: gatsby-plugin-react-helmet
-    versions:
-    - ">= 4.a, < 5"
-  - dependency-name: gatsby-source-filesystem
-    versions:
-    - ">= 2.10.a, < 2.11"
-  - dependency-name: gatsby-source-filesystem
-    versions:
-    - "> 2.11.0, < 2.12"
-  - dependency-name: gatsby-source-filesystem
-    versions:
-    - ">= 3.a, < 4"
-  - dependency-name: tailwindcss
-    versions:
-    - ">= 2.a, < 3"
-  - dependency-name: babel-preset-gatsby
-    versions:
-    - 0.12.2
-    - 1.0.0
-    - 1.1.0
-    - 1.3.0
-  - dependency-name: "@testing-library/react"
-    versions:
-    - 11.2.6
-  - dependency-name: "@babel/plugin-transform-runtime"
-    versions:
-    - 7.12.15
-  - dependency-name: gatsby-plugin-catch-links
-    versions:
-    - 3.0.0
-    - 3.1.0
-  - dependency-name: ts-jest
-    versions:
-    - 26.5.4
-  - dependency-name: gatsby
-    versions:
-    - 3.1.1
-  - dependency-name: type-fest
-    versions:
-    - 1.0.0
-  - dependency-name: reakit
-    versions:
-    - 1.3.6
-  - dependency-name: "@auto-it/conventional-commits"
-    versions:
-    - 10.21.0
-  - dependency-name: lerna
-    versions:
-    - 4.0.0
-  - dependency-name: "@auto-it/first-time-contributor"
-    versions:
-    - 10.21.0
-  - dependency-name: prism-react-renderer
-    versions:
-    - 1.2.0
-  - dependency-name: "@types/react-dom"
-    versions:
-    - 17.0.2
-  - dependency-name: gatsby-plugin-mdx
-    versions:
-    - 2.0.0
+  - package-ecosystem: npm
+    directory: '/'
+    schedule:
+      interval: monthly
+    open-pull-requests-limit: 10
+    ignore:
+      - dependency-name: '@codechecks/client'
+      - dependency-name: '*'
+        update-types: ['version-update:semver-patch']
+      - dependency-name: 'gatsby-plugin-mdx' # pinned to 2.4
+      - dependency-name: babel-preset-gatsby
+        versions:
+          - '>= 0.11.a, < 0.12'
+      - dependency-name: gatsby-plugin-catch-links
+        versions:
+          - '>= 2.10.a, < 2.11'
+      - dependency-name: gatsby-plugin-catch-links
+        versions:
+          - '>= 2.9.a, < 2.10'
+      - dependency-name: gatsby-plugin-mdx
+        versions:
+          - '> 1.10.0, < 1.11'
+      - dependency-name: gatsby-plugin-mdx
+        versions:
+          - '>= 1.9.a, < 1.10'
+      - dependency-name: gatsby-plugin-react-helmet
+        versions:
+          - '>= 3.10.a, < 3.11'
+      - dependency-name: gatsby-plugin-react-helmet
+        versions:
+          - '>= 3.7.a, < 3.8'
+      - dependency-name: gatsby-plugin-react-helmet
+        versions:
+          - '>= 3.9.a, < 3.10'
+      - dependency-name: gatsby-plugin-react-helmet
+        versions:
+          - '>= 4.0.a, < 4.1'
+      - dependency-name: gatsby-plugin-react-helmet
+        versions:
+          - '>= 4.a, < 5'
+      - dependency-name: gatsby-source-filesystem
+        versions:
+          - '>= 2.10.a, < 2.11'
+      - dependency-name: gatsby-source-filesystem
+        versions:
+          - '> 2.11.0, < 2.12'
+      - dependency-name: gatsby-source-filesystem
+        versions:
+          - '>= 3.a, < 4'
+      - dependency-name: tailwindcss
+        versions:
+          - '>= 2.a, < 3'
+      - dependency-name: babel-preset-gatsby
+        versions:
+          - 0.12.2
+          - 1.0.0
+          - 1.1.0
+          - 1.3.0
+      - dependency-name: '@testing-library/react'
+        versions:
+          - 11.2.6
+      - dependency-name: '@babel/plugin-transform-runtime'
+        versions:
+          - 7.12.15
+      - dependency-name: gatsby-plugin-catch-links
+        versions:
+          - 3.0.0
+          - 3.1.0
+      - dependency-name: ts-jest
+        versions:
+          - 26.5.4
+      - dependency-name: gatsby
+        versions:
+          - 3.1.1
+      - dependency-name: type-fest
+        versions:
+          - 1.0.0
+      - dependency-name: reakit
+        versions:
+          - 1.3.6
+      - dependency-name: '@auto-it/conventional-commits'
+        versions:
+          - 10.21.0
+      - dependency-name: lerna
+        versions:
+          - 4.0.0
+      - dependency-name: '@auto-it/first-time-contributor'
+        versions:
+          - 10.21.0
+      - dependency-name: prism-react-renderer
+        versions:
+          - 1.2.0
+      - dependency-name: '@types/react-dom'
+        versions:
+          - 17.0.2

packages/color-modes/src/index.tsx

@@ -146,7 +146,7 @@ export function useColorMode<T extends string = string>(): [
   }
 
   // We're allowing the user to specify a narrower type for its color mode name.
-  return ([colorMode, setColorMode] as unknown) as [
+  return [colorMode, setColorMode] as unknown as [
     T,
     Dispatch<SetStateAction<T>>
   ]

packages/color/test/index.tsx

@@ -6,8 +6,6 @@ import { ThemeProvider } from '@theme-ui/theme-provider'
 import { render } from '@theme-ui/test-utils'
 import { matchers } from '@emotion/jest'
 
-expect.extend(matchers)
-
 import {
   darken,
   lighten,
@@ -27,6 +25,8 @@ import {
   grayscale,
 } from '../src'
 
+expect.extend(matchers)
+
 const theme = {
   colors: {
     primary: '#0cf',

packages/components/src/Input.js

@@ -1,26 +1,52 @@
 import React from 'react'
 import Box from './Box'
 
-export const Input = React.forwardRef(function Input(props, ref) {
+import { get } from '@theme-ui/css'
+
+/** @type {import('theme-ui').ThemeUIStyleObject} */
+const autofillStyles = {
+  boxShadow: 'inset 0 0 0 1000px var(--theme-ui-input-autofill-bg)',
+  fontSize: 'inherit',
+  ':first-line': {
+    fontSize: '1rem',
+  },
+}
+
+/** @type {import('theme-ui').ThemeUIStyleObject} */
+const defaultInputStyles = {
+  display: 'block',
+  width: '100%',
+  p: 2,
+  appearance: 'none',
+  fontSize: 'inherit',
+  lineHeight: 'inherit',
+  border: '1px solid',
+  borderRadius: 4,
+  color: 'inherit',
+  bg: 'transparent',
+
+  ':autofill, :autofill:hover, :autofill:focus': autofillStyles,
+  ':-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus':
+    autofillStyles,
+}
+
+export const Input = React.forwardRef(function Input(
+  { sx, autofillBackgroundColor = 'background', ...rest },
+  ref
+) {
   return (
     <Box
       ref={ref}
       as="input"
       variant="input"
-      {...props}
-      __themeKey="forms"
-      __css={{
-        display: 'block',
-        width: '100%',
-        p: 2,
-        appearance: 'none',
-        fontSize: 'inherit',
-        lineHeight: 'inherit',
-        border: '1px solid',
-        borderRadius: 4,
-        color: 'inherit',
-        bg: 'transparent',
+      sx={{
+        '--theme-ui-input-autofill-bg': (theme) =>
+          get(theme.colors, autofillBackgroundColor, null),
+        ...sx,
       }}
+      {...rest}
+      __themeKey="forms"
+      __css={defaultInputStyles}
     />
   )
 })