Fix ESM build dropping form-control color tokens

The `--brand-control-*` color tokens only reached CSS through a shared
side-effect import in the forms barrel (`src/forms/index.ts`), which the
ESM build's tree-shaking dropped. As a result, consumers importing from
`@primer/react-brand/esm` without the global `lib/css/main.css` lost all
form-control borders and boxes (checkboxes and radios rendered invisible).

Co-locate the control `colors-with-modes.css` import in each form
component (TextInput, Textarea, Select, Checkbox, Radio, FormControl),
matching the established Button pattern, so the tokens ride along in the
component modules that are unavoidably included when the components are
used. Remove the now-redundant barrel import.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: afd2ea59-8442-4214-bd4b-ecc92d8987a5

Author: stefankp

.changeset/fix-esm-control-color-tokens.md

@@ -0,0 +1,7 @@
+---
+'@primer/react-brand': patch
+---
+
+Fixed missing form-control color tokens in the ESM build. `TextInput`, `Textarea`, `Select`, `Checkbox`, `Radio`, and `FormControl` now bundle the `--brand-control-*` color tokens directly, so their borders and boxes render correctly for consumers that import from `@primer/react-brand/esm` without also loading the global `@primer/react-brand/lib/css/main.css` stylesheet.
+
+Previously these tokens only reached CSS through a shared side-effect import in the forms barrel (`forms/index.ts`), which the ESM build drops. On ESM-only pages this left `var(--brand-control-*)` undefined, collapsing control borders (and rendering checkboxes and radios invisible). This affected the `0.70.0` and `0.71.0` releases; consumers using `@primer/react-brand/esm` should upgrade to this release.

packages/react/src/forms/Checkbox/Checkbox.tsx

@@ -6,6 +6,7 @@ import type {BaseProps} from '../../component-helpers'
 import type {FormValidationStatus} from '../form-types'
 import useLayoutEffect from '../../hooks/useIsomorphicLayoutEffect'
 
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'
 import styles from './Checkbox.module.css'
 import {useProvidedRefOrCreate} from '../../hooks/useRef'
 

packages/react/src/forms/FormControl/FormControl.tsx

@@ -13,6 +13,7 @@ import {Textarea} from '../Textarea'
 import {Radio} from '../Radio'
 import {Text} from '../../Text'
 
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'
 import styles from './FormControl.module.css'
 
 export type FormControlProps = BaseProps<HTMLElement> & {

packages/react/src/forms/Radio/Radio.tsx

@@ -5,6 +5,7 @@ import {useProvidedRefOrCreate} from '../../hooks/useRef'
 
 import type {BaseProps} from '../../component-helpers'
 
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'
 import styles from './Radio.module.css'
 
 export type RadioProps = {

packages/react/src/forms/Select/Select.tsx

@@ -4,6 +4,7 @@ import {clsx} from 'clsx'
 import type {BaseProps} from '../../component-helpers'
 import type {FormInputSizes, FormValidationStatus} from '../form-types'
 
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'
 import styles from './Select.module.css'
 
 export type SelectProps = {

packages/react/src/forms/TextInput/TextInput.tsx

@@ -6,6 +6,7 @@ import type {BaseProps} from '../../component-helpers'
 import type {FormInputSizes, FormValidationStatus} from '../form-types'
 import {Text} from '../../Text'
 
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'
 import styles from './TextInput.module.css'
 import type {Icon} from '@primer/octicons-react'
 

packages/react/src/forms/Textarea/Textarea.tsx

@@ -4,6 +4,7 @@ import {clsx} from 'clsx'
 import type {BaseProps} from '../../component-helpers'
 import type {FormInputSizes, FormValidationStatus} from '../form-types'
 
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'
 import styles from './Textarea.module.css'
 
 export const DEFAULT_TEXTAREA_ROWS = 7

packages/react/src/forms/index.ts

@@ -1,8 +1,3 @@
-/**
- * Shared form (control) design tokens
- */
-import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'
-
 export * from './Checkbox'
 export * from './Textarea'
 export * from './TextInput'