diff --git a/.eslintrc.js b/.eslintrc.js index b813d1fe6..e4861d7c1 100644 --- a/.eslintrc.js +++ b/.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', }, } diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 24d4a0706..ecf9a4892 100644 --- a/.github/dependabot.yml +++ b/.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 diff --git a/dependabot.yml b/dependabot.yml deleted file mode 100644 index f38eefc05..000000000 --- a/dependabot.yml +++ /dev/null @@ -1,9 +0,0 @@ -# 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: "monthly" - ignore: - - dependency-name: "@codechecks/client" diff --git a/packages/color-modes/src/index.tsx b/packages/color-modes/src/index.tsx index 9f17e8c85..ad3a84771 100644 --- a/packages/color-modes/src/index.tsx +++ b/packages/color-modes/src/index.tsx @@ -146,7 +146,7 @@ export function useColorMode(): [ } // 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> ] diff --git a/packages/color/test/index.tsx b/packages/color/test/index.tsx index b973cf3ae..0c727b5eb 100644 --- a/packages/color/test/index.tsx +++ b/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', diff --git a/packages/components/src/Input.js b/packages/components/src/Input.js index 3f17a0553..9132990c7 100644 --- a/packages/components/src/Input.js +++ b/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 ( + get(theme.colors, autofillBackgroundColor, null), + ...sx, }} + {...rest} + __themeKey="forms" + __css={defaultInputStyles} /> ) }) diff --git a/packages/components/test/__snapshots__/index.js.snap b/packages/components/test/__snapshots__/index.js.snap index 085cdb65c..5dc4c641e 100644 --- a/packages/components/test/__snapshots__/index.js.snap +++ b/packages/components/test/__snapshots__/index.js.snap @@ -617,6 +617,32 @@ exports[`Field renders 1`] = ` background-color: transparent; } +.emotion-2:autofill, +.emotion-2:autofill:hover, +.emotion-2:autofill:focus { + box-shadow: inset 0 0 0 1000px var(--theme-ui-input-autofill-bg); + font-size: inherit; +} + +.emotion-2:autofill:first-line, +.emotion-2:autofill:hover:first-line, +.emotion-2:autofill:focus:first-line { + font-size: 1rem; +} + +.emotion-2:-webkit-autofill, +.emotion-2:-webkit-autofill:hover, +.emotion-2:-webkit-autofill:focus { + box-shadow: inset 0 0 0 1000px var(--theme-ui-input-autofill-bg); + font-size: inherit; +} + +.emotion-2:-webkit-autofill:first-line, +.emotion-2:-webkit-autofill:hover:first-line, +.emotion-2:-webkit-autofill:focus:first-line { + font-size: 1rem; +} +
@@ -666,6 +692,32 @@ exports[`Field renders with id prop 1`] = ` background-color: transparent; } +.emotion-2:autofill, +.emotion-2:autofill:hover, +.emotion-2:autofill:focus { + box-shadow: inset 0 0 0 1000px var(--theme-ui-input-autofill-bg); + font-size: inherit; +} + +.emotion-2:autofill:first-line, +.emotion-2:autofill:hover:first-line, +.emotion-2:autofill:focus:first-line { + font-size: 1rem; +} + +.emotion-2:-webkit-autofill, +.emotion-2:-webkit-autofill:hover, +.emotion-2:-webkit-autofill:focus { + box-shadow: inset 0 0 0 1000px var(--theme-ui-input-autofill-bg); + font-size: inherit; +} + +.emotion-2:-webkit-autofill:first-line, +.emotion-2:-webkit-autofill:hover:first-line, +.emotion-2:-webkit-autofill:focus:first-line { + font-size: 1rem; +} +
@@ -947,6 +999,32 @@ exports[`Input renders 1`] = ` background-color: transparent; } +.emotion-0:autofill, +.emotion-0:autofill:hover, +.emotion-0:autofill:focus { + box-shadow: inset 0 0 0 1000px var(--theme-ui-input-autofill-bg); + font-size: inherit; +} + +.emotion-0:autofill:first-line, +.emotion-0:autofill:hover:first-line, +.emotion-0:autofill:focus:first-line { + font-size: 1rem; +} + +.emotion-0:-webkit-autofill, +.emotion-0:-webkit-autofill:hover, +.emotion-0:-webkit-autofill:focus { + box-shadow: inset 0 0 0 1000px var(--theme-ui-input-autofill-bg); + font-size: inherit; +} + +.emotion-0:-webkit-autofill:first-line, +.emotion-0:-webkit-autofill:hover:first-line, +.emotion-0:-webkit-autofill:focus:first-line { + font-size: 1rem; +} + diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts index 4bac57070..05de7208a 100644 --- a/packages/css/src/types.ts +++ b/packages/css/src/types.ts @@ -491,7 +491,13 @@ export interface ThemeDerivedStyles { (theme: Theme): ThemeUICSSObject } -export type Label = { +export interface Label { + /** + * String appended to generated class name. + * @see https://emotion.sh/docs/labels + * + * You can style HTML