diff --git a/package-lock.json b/package-lock.json index cb18c7a123e..526fb643538 100644 --- a/package-lock.json +++ b/package-lock.json @@ -75,7 +75,7 @@ "react-dom": "^18.3.1" }, "devDependencies": { - "@primer/react": "38.0.0-rc.1", + "@primer/react": "38.0.0-rc.2", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.3", @@ -88,7 +88,7 @@ "name": "example-nextjs", "version": "0.0.0", "dependencies": { - "@primer/react": "38.0.0-rc.1", + "@primer/react": "38.0.0-rc.2", "next": "^15.2.3", "react": "18.3.1", "react-dom": "18.3.1", @@ -104,7 +104,7 @@ "version": "0.0.0", "dependencies": { "@primer/octicons-react": "^19.14.0", - "@primer/react": "38.0.0-rc.1", + "@primer/react": "38.0.0-rc.2", "clsx": "^2.1.1", "next": "^15.2.3", "react": "18.3.1", @@ -8209,12 +8209,16 @@ } }, "node_modules/@types/hoist-non-react-statics": { - "version": "3.3.5", + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz", + "integrity": "sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==", "dev": true, "license": "MIT", "dependencies": { - "@types/react": "*", "hoist-non-react-statics": "^3.3.0" + }, + "peerDependencies": { + "@types/react": "*" } }, "node_modules/@types/is-empty": { @@ -8366,6 +8370,8 @@ }, "node_modules/@types/styled-components": { "version": "5.1.34", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz", + "integrity": "sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==", "dev": true, "license": "MIT", "dependencies": { @@ -23935,6 +23941,41 @@ "version": "2.8.1", "license": "0BSD" }, + "node_modules/tsx": { + "version": "4.20.3", + "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.20.3.tgz", + "integrity": "sha512-qjbnuR9Tr+FJOMBqJCW5ehvIo/buZq7vH7qD7JziU98h6l3qGy0a/yPFjwO+y0/T7GFpNgNAvEcPPVfyT8rrPQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "esbuild": "~0.25.0", + "get-tsconfig": "^4.7.5" + }, + "bin": { + "tsx": "dist/cli.mjs" + }, + "engines": { + "node": ">=18.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + } + }, + "node_modules/tsx/node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/tunnel": { "version": "0.0.6", "dev": true, @@ -26008,7 +26049,7 @@ }, "packages/react": { "name": "@primer/react", - "version": "38.0.0-rc.1", + "version": "38.0.0-rc.2", "license": "MIT", "dependencies": { "@github/mini-throttle": "^2.1.1", @@ -26020,12 +26061,6 @@ "@primer/live-region-element": "^0.7.1", "@primer/octicons-react": "^19.13.0", "@primer/primitives": "10.x || 11.x", - "@styled-system/css": "^5.1.5", - "@styled-system/props": "^5.1.5", - "@styled-system/theme-get": "^5.1.2", - "@types/styled-system": "^5.1.23", - "@types/styled-system__css": "^5.0.16", - "@types/styled-system__theme-get": "^5.0.1", "clsx": "^2.1.1", "color2k": "^2.0.3", "deepmerge": "^4.3.1", @@ -26035,8 +26070,7 @@ "lodash.isempty": "^4.4.0", "lodash.isobject": "^3.0.2", "react-compiler-runtime": "^19.1.0-rc.2", - "react-intersection-observer": "^9.16.0", - "styled-system": "^5.1.5" + "react-intersection-observer": "^9.16.0" }, "devDependencies": { "@actions/core": "1.11.1", @@ -26077,7 +26111,6 @@ "@types/react-dom": "18.3.1", "@types/react-is": "18.3.1", "@types/react-test-renderer": "18.3.1", - "@types/styled-components": "^5.1.26", "@vitejs/plugin-react": "^4.3.3", "afterframe": "^1.0.2", "ajv": "8.16.0", @@ -26088,7 +26121,6 @@ "babel-plugin-macros": "3.1.0", "babel-plugin-open-source": "1.3.4", "babel-plugin-react-compiler": "^19.1.0-rc.3", - "babel-plugin-styled-components": "2.1.4", "babel-plugin-transform-replace-expressions": "0.2.0", "babel-polyfill": "6.26.0", "chalk": "^5.4.1", @@ -26122,7 +26154,6 @@ "rollup-plugin-postcss": "4.0.2", "rollup-plugin-visualizer": "6.0.3", "storybook": "^9.1.5", - "styled-components": "5.3.11", "terser": "5.36.0", "ts-toolbelt": "9.6.0", "tsx": "4.20.3", @@ -26142,11 +26173,9 @@ "@types/react": "18.x || 19.x", "@types/react-dom": "18.x || 19.x", "@types/react-is": "18.x || 19.x", - "@types/styled-components": "^5.1.11", "react": "18.x || 19.x", "react-dom": "18.x || 19.x", - "react-is": "18.x || 19.x", - "styled-components": "5.x" + "react-is": "18.x || 19.x" }, "peerDependenciesMeta": { "@types/react": { @@ -26157,9 +26186,6 @@ }, "@types/react-is": { "optional": true - }, - "@types/styled-components": { - "optional": true } } }, @@ -26208,18 +26234,6 @@ "url": "https://dotenvx.com" } }, - "packages/react/node_modules/fsevents": { - "version": "2.3.3", - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, "packages/react/node_modules/is-alphabetical": { "version": "2.0.1", "dev": true, @@ -26428,24 +26442,6 @@ "node": ">=6" } }, - "packages/react/node_modules/tsx": { - "version": "4.20.3", - "dev": true, - "license": "MIT", - "dependencies": { - "esbuild": "~0.25.0", - "get-tsconfig": "^4.7.5" - }, - "bin": { - "tsx": "dist/cli.mjs" - }, - "engines": { - "node": ">=18.0.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.3" - } - }, "packages/react/node_modules/typescript-plugin-css-modules": { "version": "5.2.0", "dev": true, @@ -26581,15 +26577,26 @@ }, "packages/styled-react": { "name": "@primer/styled-react", - "version": "1.0.0-rc.1", + "version": "1.0.0-rc.2", + "dependencies": { + "@styled-system/css": "^5.1.5", + "@styled-system/props": "^5.1.5", + "@styled-system/theme-get": "^5.1.2", + "@types/styled-system": "^5.1.23", + "@types/styled-system__css": "^5.0.16", + "@types/styled-system__theme-get": "^5.0.1", + "styled-system": "^5.1.5" + }, "devDependencies": { "@babel/preset-react": "^7.27.1", "@babel/preset-typescript": "^7.27.1", - "@primer/react": "^38.0.0-rc.1", + "@primer/react": "^38.0.0-rc.2", "@rollup/plugin-babel": "^6.0.4", "@types/react": "18.3.11", "@types/react-dom": "18.3.1", + "@types/styled-components": "^5.1.11", "@vitejs/plugin-react": "^4.3.3", + "babel-plugin-styled-components": "2.1.4", "publint": "^0.3.12", "react": "18.3.1", "react-dom": "18.3.1", @@ -26597,10 +26604,11 @@ "rollup": "4.50.1", "rollup-plugin-typescript2": "^0.36.0", "styled-components": "5.3.11", + "tsx": "4.20.3", "typescript": "^5.9.2" }, "peerDependencies": { - "@primer/react": "38.0.0-rc.1", + "@primer/react": "38.0.0-rc.2", "@types/react": "18.x || 19.x", "@types/react-dom": "18.x || 19.x", "@types/react-is": "18.x || 19.x", diff --git a/packages/react/babel.config.js b/packages/react/babel.config.js index 52353c3bc26..752d0c505b6 100644 --- a/packages/react/babel.config.js +++ b/packages/react/babel.config.js @@ -16,7 +16,6 @@ const sharedPlugins = [ 'macros', 'dev-expression', 'add-react-displayname', - 'babel-plugin-styled-components', '@babel/plugin-proposal-nullish-coalescing-operator', '@babel/plugin-proposal-optional-chaining', ] diff --git a/packages/react/package.json b/packages/react/package.json index 726e36710c9..4fb30e4b2c8 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -46,7 +46,6 @@ "build:docs:preview": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview", "build:components.json": "tsx script/components-json/build.ts", "build:hooks.json": "tsx script/hooks-json/build.ts", - "build:precompile-color-schemes": "tsx script/precompile-color-schemes.ts", "storybook": "storybook", "type-check": "tsc --noEmit", "type-css-modules": "tcm -p src/**/*.module.css" @@ -91,12 +90,6 @@ "@primer/live-region-element": "^0.7.1", "@primer/octicons-react": "^19.13.0", "@primer/primitives": "10.x || 11.x", - "@styled-system/css": "^5.1.5", - "@styled-system/props": "^5.1.5", - "@styled-system/theme-get": "^5.1.2", - "@types/styled-system": "^5.1.23", - "@types/styled-system__css": "^5.0.16", - "@types/styled-system__theme-get": "^5.0.1", "clsx": "^2.1.1", "color2k": "^2.0.3", "deepmerge": "^4.3.1", @@ -106,8 +99,7 @@ "lodash.isempty": "^4.4.0", "lodash.isobject": "^3.0.2", "react-compiler-runtime": "^19.1.0-rc.2", - "react-intersection-observer": "^9.16.0", - "styled-system": "^5.1.5" + "react-intersection-observer": "^9.16.0" }, "devDependencies": { "@actions/core": "1.11.1", @@ -148,7 +140,6 @@ "@types/react-dom": "18.3.1", "@types/react-is": "18.3.1", "@types/react-test-renderer": "18.3.1", - "@types/styled-components": "^5.1.26", "@vitejs/plugin-react": "^4.3.3", "afterframe": "^1.0.2", "ajv": "8.16.0", @@ -159,7 +150,6 @@ "babel-plugin-macros": "3.1.0", "babel-plugin-open-source": "1.3.4", "babel-plugin-react-compiler": "^19.1.0-rc.3", - "babel-plugin-styled-components": "2.1.4", "babel-plugin-transform-replace-expressions": "0.2.0", "babel-polyfill": "6.26.0", "chalk": "^5.4.1", @@ -193,7 +183,6 @@ "rollup-plugin-postcss": "4.0.2", "rollup-plugin-visualizer": "6.0.3", "storybook": "^9.1.5", - "styled-components": "5.3.11", "terser": "5.36.0", "ts-toolbelt": "9.6.0", "tsx": "4.20.3", @@ -209,11 +198,9 @@ "@types/react": "18.x || 19.x", "@types/react-dom": "18.x || 19.x", "@types/react-is": "18.x || 19.x", - "@types/styled-components": "^5.1.11", "react": "18.x || 19.x", "react-dom": "18.x || 19.x", - "react-is": "18.x || 19.x", - "styled-components": "5.x" + "react-is": "18.x || 19.x" }, "peerDependenciesMeta": { "@types/react": { @@ -224,9 +211,6 @@ }, "@types/react-is": { "optional": true - }, - "@types/styled-components": { - "optional": true } } } diff --git a/packages/react/script/build b/packages/react/script/build index 174f419dd39..66c9b1d78e5 100755 --- a/packages/react/script/build +++ b/packages/react/script/build @@ -5,9 +5,6 @@ set -e # Clean up npm run clean -# Generate color schemes -npm run build:precompile-color-schemes - # Generate types for CSS Modules npm run type-css-modules diff --git a/packages/react/src/Box/Box.docs.json b/packages/react/src/Box/Box.docs.json deleted file mode 100644 index bdb720ce527..00000000000 --- a/packages/react/src/Box/Box.docs.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "id": "box", - "name": "Box", - "status": "deprecated", - "a11yReviewed": "2025-01-08", - "stories": [], - "importPath": "@primer/react", - "props": [ - { - "name": "ref", - "type": "React.RefObject" - }, - { - "name": "as", - "type": "React.ElementType", - "defaultValue": "\"div\"" - }, - { - "name": "sx", - "type": "SystemStyleObject", - "deprecated": true - } - ], - "subcomponents": [] -} diff --git a/packages/react/src/Box/Box.features.stories.tsx b/packages/react/src/Box/Box.features.stories.tsx deleted file mode 100644 index c1e7f6aa4b3..00000000000 --- a/packages/react/src/Box/Box.features.stories.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import type {Meta} from '@storybook/react-vite' -import Box from './Box' - -export default { - title: 'Deprecated/Components/Box/Features', - component: Box, -} as Meta - -export const Border = () => ( - Box with border -) - -export const BorderBottom = () => ( - - Box with bottom border - -) - -export const Flexbox = () => ( - - 1 - 2 - 3 - -) - -export const Grid = () => ( - - 1 - 2 - 3 - -) diff --git a/packages/react/src/Box/Box.stories.tsx b/packages/react/src/Box/Box.stories.tsx deleted file mode 100644 index 69d862ca616..00000000000 --- a/packages/react/src/Box/Box.stories.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import type {Meta, StoryFn} from '@storybook/react-vite' -import Box from './Box' - -export default { - title: 'Deprecated/Components/Box', - component: Box, -} as Meta - -export const Default = () => Default Box - -export const Playground: StoryFn = args => Playground - -Playground.args = { - as: 'div', - sx: { - borderWidth: 1, - borderStyle: 'solid', - borderColor: 'border.default', - p: 3, - }, -} - -Playground.argTypes = { - forwardedAs: { - controls: false, - table: { - disable: true, - }, - }, - ref: { - controls: false, - table: { - disable: true, - }, - }, - theme: { - controls: false, - table: { - disable: true, - }, - }, -} diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 9578768eee8..c2f9cfa84b6 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -1,15 +1,11 @@ 'use client' -export {default as theme} from './theme' -export {get as themeGet} from './constants' export {default as BaseStyles} from './BaseStyles' export type {BaseStylesProps} from './BaseStyles' export {default as ThemeProvider, useTheme, useColorSchemeVar} from './ThemeProvider' export type {ThemeProviderProps} from './ThemeProvider' // Layout -export {default as Box} from './Box' -export type {BoxProps} from './Box' export * from './Button' export {PageLayout} from './PageLayout' export type { @@ -210,8 +206,5 @@ export type {StackProps, StackItemProps} from './Stack' export {PageHeader} from './PageHeader' export type {PageHeaderProps} from './PageHeader' -export {default as sx, merge} from './sx' -export type {BetterCssProperties, BetterSystemStyleObject, SxProp} from './sx' - export {SkeletonBox} from './Skeleton' export type {SkeletonBoxProps} from './Skeleton' diff --git a/packages/react/src/internal/components/BoxWithFallback.tsx b/packages/react/src/internal/components/BoxWithFallback.tsx deleted file mode 100644 index 17e9e716c04..00000000000 --- a/packages/react/src/internal/components/BoxWithFallback.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' -import Box from '../../Box' -import {defaultSxProp} from '../../utils/defaultSxProp' -import type {StyledComponent} from 'styled-components' -import {includesSystemProps} from '../../utils/includeSystemProps' - -const BoxWithFallback = React.forwardRef(function BoxWithFallback( - {as: BaseComponent = 'div', sx = defaultSxProp, ...rest}, - ref, -) { - if (sx !== defaultSxProp || includesSystemProps(rest)) { - return - } - return - // eslint-disable-next-line @typescript-eslint/no-explicit-any -}) as StyledComponent<'div', any, React.ComponentPropsWithoutRef, never> - -export {BoxWithFallback} diff --git a/packages/react/src/sx.ts b/packages/react/src/sx.ts deleted file mode 100644 index 03ddc1985a9..00000000000 --- a/packages/react/src/sx.ts +++ /dev/null @@ -1,41 +0,0 @@ -import type {SystemCssProperties, SystemStyleObject} from '@styled-system/css' -import css from '@styled-system/css' -import type {ThemeColorPaths, ThemeShadowPaths} from './theme' -import type {ColorProps, BorderColorProps, ShadowProps} from 'styled-system' -import merge from 'deepmerge' - -export type BetterCssProperties = { - [K in keyof SystemCssProperties]: K extends keyof ColorProps - ? ThemeColorPaths | SystemCssProperties[K] - : K extends keyof BorderColorProps - ? ThemeColorPaths | SystemCssProperties[K] - : K extends keyof ShadowProps - ? ThemeShadowPaths | SystemCssProperties[K] - : SystemCssProperties[K] -} - -// Support CSS custom properties in the `sx` prop -export type CSSCustomProperties = { - [key: `--${string}`]: string | number -} - -type CSSSelectorObject = { - [cssSelector: string]: SystemStyleObject | CSSCustomProperties -} - -export type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject | CSSCustomProperties | CSSSelectorObject - -export interface SxProp { - /** - * @deprecated The `sx` prop is deprecated. Replace with a `div` or - * appropriate HTML element instead, with a CSS class for styling. - * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md - * */ - sx?: BetterSystemStyleObject -} - -const sx = (props: SxProp) => css(props.sx) - -export default sx - -export {merge} diff --git a/packages/styled-react/package.json b/packages/styled-react/package.json index 32e6ced69f7..534fb209987 100644 --- a/packages/styled-react/package.json +++ b/packages/styled-react/package.json @@ -22,10 +22,20 @@ ], "scripts": { "build": "script/build", + "build:precompile-color-schemes": "tsx script/precompile-color-schemes.ts", "clean": "rimraf dist", "lint:npm": "publint --types", "type-check": "tsc --noEmit" }, + "dependencies": { + "@styled-system/css": "^5.1.5", + "@styled-system/props": "^5.1.5", + "@styled-system/theme-get": "^5.1.2", + "@types/styled-system": "^5.1.23", + "@types/styled-system__css": "^5.0.16", + "@types/styled-system__theme-get": "^5.0.1", + "styled-system": "^5.1.5" + }, "devDependencies": { "@babel/preset-react": "^7.27.1", "@babel/preset-typescript": "^7.27.1", @@ -33,7 +43,9 @@ "@rollup/plugin-babel": "^6.0.4", "@types/react": "18.3.11", "@types/react-dom": "18.3.1", + "@types/styled-components": "^5.1.11", "@vitejs/plugin-react": "^4.3.3", + "babel-plugin-styled-components": "2.1.4", "publint": "^0.3.12", "react": "18.3.1", "react-dom": "18.3.1", @@ -41,6 +53,7 @@ "rollup": "4.50.1", "rollup-plugin-typescript2": "^0.36.0", "styled-components": "5.3.11", + "tsx": "4.20.3", "typescript": "^5.9.2" }, "peerDependencies": { diff --git a/packages/styled-react/rollup.config.js b/packages/styled-react/rollup.config.js index 3d8bd571154..17ae2f6c997 100644 --- a/packages/styled-react/rollup.config.js +++ b/packages/styled-react/rollup.config.js @@ -22,6 +22,7 @@ export default defineConfig({ }), babel({ presets: ['@babel/preset-typescript', '@babel/preset-react'], + plugins: ['babel-plugin-styled-components'], extensions: ['.ts', '.tsx'], babelHelpers: 'bundled', }), diff --git a/packages/styled-react/script/build b/packages/styled-react/script/build index b2981e2b226..06f1ee35460 100755 --- a/packages/styled-react/script/build +++ b/packages/styled-react/script/build @@ -1,3 +1,6 @@ #!/bin/bash +# Generate color schemes +npm run build:precompile-color-schemes + npx rollup -c diff --git a/packages/react/script/precompile-color-schemes.ts b/packages/styled-react/script/precompile-color-schemes.ts similarity index 87% rename from packages/react/script/precompile-color-schemes.ts rename to packages/styled-react/script/precompile-color-schemes.ts index 103b765bc9d..ada7daa2511 100644 --- a/packages/react/script/precompile-color-schemes.ts +++ b/packages/styled-react/script/precompile-color-schemes.ts @@ -25,4 +25,4 @@ const colors = ${JSON.stringify(colorSchemes, null, 2)} export const colorSchemes: Record = colors as Record ` -fs.writeFileSync(path.join(__dirname, '../src/legacy-theme/ts/color-schemes.ts'), colorSchemeFileContent) +fs.writeFileSync(path.join(import.meta.dirname, '../src/legacy-theme/ts/color-schemes.ts'), colorSchemeFileContent) diff --git a/packages/react/src/Box/Box.test.tsx b/packages/styled-react/src/components/Box/Box.test.tsx similarity index 100% rename from packages/react/src/Box/Box.test.tsx rename to packages/styled-react/src/components/Box/Box.test.tsx diff --git a/packages/react/src/Box/Box.tsx b/packages/styled-react/src/components/Box/Box.tsx similarity index 74% rename from packages/react/src/Box/Box.tsx rename to packages/styled-react/src/components/Box/Box.tsx index f806c7abe71..8a208fa4371 100644 --- a/packages/react/src/Box/Box.tsx +++ b/packages/styled-react/src/components/Box/Box.tsx @@ -12,9 +12,18 @@ import type { TypographyProps, } from 'styled-system' import {background, border, color, flexbox, grid, layout, position, shadow, space, typography} from 'styled-system' -import type {SxProp} from '../sx' -import sx from '../sx' -import type {ComponentProps} from '../utils/types' +import type {SxProp} from '../../sx' +import sx from '../../sx' + +/** + * Extract a component's props + * + * Source: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase#wrappingmirroring-a-component + * + * @example ComponentProps + */ +type ComponentProps = + T extends React.ComponentType> ? (Props extends object ? Props : never) : never type StyledBoxProps = SxProp & SpaceProps & diff --git a/packages/react/src/Box/index.ts b/packages/styled-react/src/components/Box/index.ts similarity index 100% rename from packages/react/src/Box/index.ts rename to packages/styled-react/src/components/Box/index.ts diff --git a/packages/react/src/constants.ts b/packages/styled-react/src/constants.ts similarity index 100% rename from packages/react/src/constants.ts rename to packages/styled-react/src/constants.ts diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index 6bb625118f4..950b539a24e 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -1,10 +1,6 @@ import type React from 'react' import {forwardRef, type PropsWithChildren} from 'react' import { - type BetterSystemStyleObject, - Box, - type BoxProps, - type SxProp, StateLabel as PrimerStateLabel, type StateLabelProps as PrimerStateLabelProps, SubNav as PrimerSubNav, @@ -32,8 +28,12 @@ import type { TypographyProps, } from 'styled-system' import {Autocomplete} from './components/Autocomplete' +import Box from './components/Box' +import type {BoxProps} from './components/Box' import {Select} from './components/Select' import {TextInput} from './components/TextInput' +import sx from './sx' +import type {BetterSystemStyleObject, SxProp} from './sx' type StyledProps = SxProp & SpaceProps & @@ -106,8 +106,10 @@ const Textarea: React.ForwardRefExoticComponent }) -export {Autocomplete, SegmentedControl, Select, StateLabel, SubNav, TextInput, Textarea, ToggleSwitch} +export {Autocomplete, Box, SegmentedControl, Select, StateLabel, SubNav, TextInput, Textarea, ToggleSwitch, sx} +export type {BoxProps} +export {get as themeGet} from './constants' export { ActionList, ActionMenu, @@ -143,16 +145,11 @@ export { Truncate, UnderlineNav, - // styled-components components or types - Box, - sx, - // theming depends on styled-components ThemeProvider, merge, theme, - themeGet, useColorSchemeVar, useTheme, } from '@primer/react' -export type {BoxProps, SxProp, BetterSystemStyleObject} +export type {SxProp, BetterSystemStyleObject} diff --git a/packages/react/src/legacy-theme/README.md b/packages/styled-react/src/legacy-theme/README.md similarity index 100% rename from packages/react/src/legacy-theme/README.md rename to packages/styled-react/src/legacy-theme/README.md diff --git a/packages/react/src/legacy-theme/ts/color-schemes.ts b/packages/styled-react/src/legacy-theme/ts/color-schemes.ts similarity index 100% rename from packages/react/src/legacy-theme/ts/color-schemes.ts rename to packages/styled-react/src/legacy-theme/ts/color-schemes.ts diff --git a/packages/react/src/legacy-theme/ts/colors/dark.ts b/packages/styled-react/src/legacy-theme/ts/colors/dark.ts similarity index 100% rename from packages/react/src/legacy-theme/ts/colors/dark.ts rename to packages/styled-react/src/legacy-theme/ts/colors/dark.ts diff --git a/packages/react/src/legacy-theme/ts/colors/dark_colorblind.ts b/packages/styled-react/src/legacy-theme/ts/colors/dark_colorblind.ts similarity index 100% rename from packages/react/src/legacy-theme/ts/colors/dark_colorblind.ts rename to packages/styled-react/src/legacy-theme/ts/colors/dark_colorblind.ts diff --git a/packages/react/src/legacy-theme/ts/colors/dark_dimmed.ts b/packages/styled-react/src/legacy-theme/ts/colors/dark_dimmed.ts similarity index 100% rename from packages/react/src/legacy-theme/ts/colors/dark_dimmed.ts rename to packages/styled-react/src/legacy-theme/ts/colors/dark_dimmed.ts diff --git a/packages/react/src/legacy-theme/ts/colors/dark_high_contrast.ts b/packages/styled-react/src/legacy-theme/ts/colors/dark_high_contrast.ts similarity index 100% rename from packages/react/src/legacy-theme/ts/colors/dark_high_contrast.ts rename to packages/styled-react/src/legacy-theme/ts/colors/dark_high_contrast.ts diff --git a/packages/react/src/legacy-theme/ts/colors/dark_tritanopia.ts b/packages/styled-react/src/legacy-theme/ts/colors/dark_tritanopia.ts similarity index 100% rename from packages/react/src/legacy-theme/ts/colors/dark_tritanopia.ts rename to packages/styled-react/src/legacy-theme/ts/colors/dark_tritanopia.ts diff --git a/packages/react/src/legacy-theme/ts/colors/index.ts b/packages/styled-react/src/legacy-theme/ts/colors/index.ts similarity index 100% rename from packages/react/src/legacy-theme/ts/colors/index.ts rename to packages/styled-react/src/legacy-theme/ts/colors/index.ts diff --git a/packages/react/src/legacy-theme/ts/colors/light.ts b/packages/styled-react/src/legacy-theme/ts/colors/light.ts similarity index 100% rename from packages/react/src/legacy-theme/ts/colors/light.ts rename to packages/styled-react/src/legacy-theme/ts/colors/light.ts diff --git a/packages/react/src/legacy-theme/ts/colors/light_colorblind.ts b/packages/styled-react/src/legacy-theme/ts/colors/light_colorblind.ts similarity index 100% rename from packages/react/src/legacy-theme/ts/colors/light_colorblind.ts rename to packages/styled-react/src/legacy-theme/ts/colors/light_colorblind.ts diff --git a/packages/react/src/legacy-theme/ts/colors/light_high_contrast.ts b/packages/styled-react/src/legacy-theme/ts/colors/light_high_contrast.ts similarity index 100% rename from packages/react/src/legacy-theme/ts/colors/light_high_contrast.ts rename to packages/styled-react/src/legacy-theme/ts/colors/light_high_contrast.ts diff --git a/packages/react/src/legacy-theme/ts/colors/light_tritanopia.ts b/packages/styled-react/src/legacy-theme/ts/colors/light_tritanopia.ts similarity index 100% rename from packages/react/src/legacy-theme/ts/colors/light_tritanopia.ts rename to packages/styled-react/src/legacy-theme/ts/colors/light_tritanopia.ts diff --git a/packages/react/src/legacy-theme/ts/index.ts b/packages/styled-react/src/legacy-theme/ts/index.ts similarity index 100% rename from packages/react/src/legacy-theme/ts/index.ts rename to packages/styled-react/src/legacy-theme/ts/index.ts diff --git a/packages/styled-react/src/sx.ts b/packages/styled-react/src/sx.ts index e3ff0277f10..03ddc1985a9 100644 --- a/packages/styled-react/src/sx.ts +++ b/packages/styled-react/src/sx.ts @@ -1,8 +1,41 @@ +import type {SystemCssProperties, SystemStyleObject} from '@styled-system/css' import css from '@styled-system/css' -import type {SxProp} from '@primer/react' +import type {ThemeColorPaths, ThemeShadowPaths} from './theme' +import type {ColorProps, BorderColorProps, ShadowProps} from 'styled-system' +import merge from 'deepmerge' -export const sx = (props: SxProp) => { - return css(props.sx) +export type BetterCssProperties = { + [K in keyof SystemCssProperties]: K extends keyof ColorProps + ? ThemeColorPaths | SystemCssProperties[K] + : K extends keyof BorderColorProps + ? ThemeColorPaths | SystemCssProperties[K] + : K extends keyof ShadowProps + ? ThemeShadowPaths | SystemCssProperties[K] + : SystemCssProperties[K] } -export type {SxProp} +// Support CSS custom properties in the `sx` prop +export type CSSCustomProperties = { + [key: `--${string}`]: string | number +} + +type CSSSelectorObject = { + [cssSelector: string]: SystemStyleObject | CSSCustomProperties +} + +export type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject | CSSCustomProperties | CSSSelectorObject + +export interface SxProp { + /** + * @deprecated The `sx` prop is deprecated. Replace with a `div` or + * appropriate HTML element instead, with a CSS class for styling. + * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md + * */ + sx?: BetterSystemStyleObject +} + +const sx = (props: SxProp) => css(props.sx) + +export default sx + +export {merge} diff --git a/packages/react/src/theme.ts b/packages/styled-react/src/theme.ts similarity index 88% rename from packages/react/src/theme.ts rename to packages/styled-react/src/theme.ts index a1ad8cf5ec2..468c7d1a3ee 100644 --- a/packages/react/src/theme.ts +++ b/packages/styled-react/src/theme.ts @@ -1,7 +1,14 @@ -import type {KeyPaths} from './utils/types/KeyPaths' -import {fontStack} from './utils/theme' import {colorSchemes} from './legacy-theme/ts/color-schemes' +// Produces a union of dot-delimited keypaths to the string values in a nested object: +type KeyPaths = { + [K in keyof O]: K extends string ? (O[K] extends Record ? `${K}.${KeyPaths}` : `${K}`) : never +}[keyof O] + +function fontStack(fonts: Array): string { + return fonts.map(font => (font.includes(' ') ? `"${font}"` : font)).join(', ') +} + const animation = { easeOutCubic: 'cubic-bezier(0.33, 1, 0.68, 1)', } diff --git a/packages/react/src/utils/theme.ts b/packages/styled-react/src/utils/theme.ts similarity index 100% rename from packages/react/src/utils/theme.ts rename to packages/styled-react/src/utils/theme.ts