Fix missing form-control color tokens in the ESM build (#1417)

* 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

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

Co-authored-by: Rez <13340707+rezrah@users.noreply.github.com>

---------

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

Author: 3 people

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

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Fixed missing styles for ESM form controls, where the dependent design tokens were missing . Affects `TextInput`, `Textarea`, `Select`, `Checkbox`, `Radio`, and `FormControl`.

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'