Skip to content

Extended Tokens: Text area #34692

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: extended-tokens
Choose a base branch
from
Open

Extended Tokens: Text area #34692

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eb8817b
Text Area Semantic Tokens
etudie Jun 10, 2025
e094dc3
Fix up style sheet and camel casing
Mitch-At-Work Jun 10, 2025
a09dc7d
Text Area Semantic Tokens Update
etudie Jun 20, 2025
1b135bf
Update styles to not use as many variant fallbacks, add missing varia…
Mitch-At-Work Jun 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-textarea-348f9b49-d704-4a66-9a74-3955ff6fcdc0.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Fix: TextArea changes",
"packageName": "@fluentui/react-textarea",
"email": "[email protected]",
"dependentChangeType": "patch"
}
111 changes: 67 additions & 44 deletions ...act-components/react-textarea/library/src/components/Textarea/useTextareaStyles.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import { tokens } from '@fluentui/react-theme';
import { SlotClassNames } from '@fluentui/react-utilities';
import type { TextareaSlots, TextareaState } from './Textarea.types';
import * as semanticTokens from '@fluentui/semantic-tokens';

export const textareaClassNames: SlotClassNames<TextareaSlots> = {
root: 'fui-Textarea',
textarea: 'fui-Textarea__textarea',
};

// Maintaining the correct corner radius:
// Use the whole border-radius as the height and only put radii on the bottom corners.
// (Otherwise the radius would be automatically reduced to fit available space.)
// max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.
const inputBottomFocusBorderStroke = `max(${semanticTokens.ctrlInputBottomLineStrokeWidthSelected}, ${semanticTokens.cornerCtrlRest})`;

/**
* Styles for the root(wrapper) slot
*/
Expand All @@ -17,15 +24,19 @@ const useRootStyles = makeStyles({
boxSizing: 'border-box',
position: 'relative',
// Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.
padding: `0 0 ${tokens.strokeWidthThick} 0`,
padding: `0 0 ${semanticTokens.ctrlInputBottomLineStrokeWidthSelected} 0`,
margin: '0',
borderRadius: tokens.borderRadiusMedium,
borderRadius: semanticTokens.cornerCtrlRest,
verticalAlign: 'top',
backgroundColor: semanticTokens.ctrlInputBackgroundRest,
':focus-within': {
backgroundColor: semanticTokens.ctrlInputBackgroundSelected,
},
},

disabled: {
backgroundColor: tokens.colorTransparentBackground,
border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,
backgroundColor: semanticTokens.ctrlInputBackgroundDisabled,
border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.strokeCtrlOnNeutralDisabled}`,

'@media (forced-colors: active)': {
...shorthands.borderColor('GrayText'),
Expand All @@ -43,20 +54,15 @@ const useRootStyles = makeStyles({
bottom: '-1px',
right: '-1px',

// Maintaining the correct corner radius:
// Use the whole border-radius as the height and only put radii on the bottom corners.
// (Otherwise the radius would be automatically reduced to fit available space.)
// max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.
height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,
borderBottomLeftRadius: tokens.borderRadiusMedium,
borderBottomRightRadius: tokens.borderRadiusMedium,
height: inputBottomFocusBorderStroke,
borderBottomLeftRadius: semanticTokens.cornerCtrlRest,
borderBottomRightRadius: semanticTokens.cornerCtrlRest,

// Flat 2px border:
// By default borderBottom will cause little "horns" on the ends. The clipPath trims them off.
// (This could be done without trimming using `background: linear-gradient(...)`, but using
// borderBottom makes it easier for people to override the color if needed.)
borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,
clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,
borderBottom: `${semanticTokens.ctrlInputBottomLineStrokeWidthSelected} solid ${semanticTokens.ctrlInputBottomLineStrokeSelected}`,
clipPath: `inset(calc(100% - ${semanticTokens.ctrlInputBottomLineStrokeWidthSelected}) 0 0 0)`,

// Animation for focus OUT
transform: 'scaleX(0)',
Expand All @@ -83,63 +89,77 @@ const useRootStyles = makeStyles({
},
':focus-within:active::after': {
// This is if the user clicks the field again while it's already focused
borderBottomColor: tokens.colorCompoundBrandStrokePressed,
borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeSelected,
},
':focus-within': {
outlineWidth: tokens.strokeWidthThick,
outlineWidth: semanticTokens.ctrlFocusOuterStrokeWidth,
outlineStyle: 'solid',
outlineColor: 'transparent',
outlineColor: semanticTokens.nullColor,
},
},

filled: {
border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlFocusOuterStroke}`,
':hover,:focus-within': {
...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),
...shorthands.borderColor(semanticTokens._ctrlFocusOuterStrokeInteractive),
},
},
'filled-darker': {
backgroundColor: tokens.colorNeutralBackground3,
backgroundColor: semanticTokens._ctrlInputBackgroundRestDarker,
':focus-within': {
backgroundColor: semanticTokens._ctrlInputBackgroundRestDarker,
},
},
'filled-lighter': {
backgroundColor: tokens.colorNeutralBackground1,
backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter,
':focus-within': {
backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter,
},
},
'filled-darker-shadow': {
backgroundColor: tokens.colorNeutralBackground3,
border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,
backgroundColor: semanticTokens._ctrlInputBackgroundRestDarker,
border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlFocusInnerStroke}`,
boxShadow: tokens.shadow2,
':focus-within': {
backgroundColor: semanticTokens._ctrlInputBackgroundRestDarker,
},
},
'filled-lighter-shadow': {
backgroundColor: tokens.colorNeutralBackground1,
border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,
backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter,
border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens._ctrlFocusOuterStrokeInteractive}`,
boxShadow: tokens.shadow2,
':focus-within': {
backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter,
},
},

outline: {
backgroundColor: tokens.colorNeutralBackground1,
border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
borderBottomColor: tokens.colorNeutralStrokeAccessible,
border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokeRest}`,
borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeRest,
},
outlineInteractive: {
':hover': {
border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,
borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,
border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokeHover}`,
borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeHover,
':focus-within': {
borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeSelected,
},
},

':active': {
border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,
borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,
border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokePressed}`,
borderBottomColor: semanticTokens.ctrlInputBottomLineStrokePressed,
},

':focus-within': {
border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,
borderBottomColor: tokens.colorCompoundBrandStroke,
border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokeSelected}`,
borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeSelected,
},
},

invalid: {
':not(:focus-within),:hover:not(:focus-within)': {
...shorthands.borderColor(tokens.colorPaletteRedBorder2),
...shorthands.borderColor(semanticTokens.ctrlInputBackgroundError),
},
},
});
Expand All @@ -153,13 +173,13 @@ const useTextareaStyles = makeStyles({
margin: '0',
backgroundColor: 'transparent',
boxSizing: 'border-box',
color: tokens.colorNeutralForeground1,
color: semanticTokens.foregroundContentNeutralPrimary,
flexGrow: 1,
fontFamily: tokens.fontFamilyBase,
fontFamily: semanticTokens.textStyleDefaultRegularFontFamily,
height: '100%',

'::placeholder': {
color: tokens.colorNeutralForeground4,
color: semanticTokens._ctrlInputNeutralForegroundPlaceholder,
opacity: 1,
},

Expand All @@ -172,10 +192,10 @@ const useTextareaStyles = makeStyles({
},

disabled: {
color: tokens.colorNeutralForegroundDisabled,
color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled,
cursor: 'not-allowed',
'::placeholder': {
color: tokens.colorNeutralForegroundDisabled,
color: semanticTokens.foregroundCtrlNeutralPrimaryDisabled,
},
},

Expand All @@ -185,19 +205,22 @@ const useTextareaStyles = makeStyles({
minHeight: '40px',
padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,
maxHeight: '200px',
...typographyStyles.caption1,
fontSize: semanticTokens.textGlobalCaption1FontSize,
lineHeight: semanticTokens.textGlobalCaption1LineHeight,
},
medium: {
minHeight: '52px',
padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,
maxHeight: '260px',
...typographyStyles.body1,
fontSize: semanticTokens.textGlobalBody3FontSize,
lineHeight: semanticTokens.textGlobalBody3LineHeight,
},
large: {
minHeight: '64px',
padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,
maxHeight: '320px',
...typographyStyles.body2,
fontSize: semanticTokens.textGlobalBody2FontSize,
lineHeight: semanticTokens.textGlobalBody2LineHeight,
},
});

Expand Down
38 changes: 25 additions & 13 deletions packages/semantic-tokens/etc/semantic-tokens.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1585,6 +1585,9 @@ export const ctrlFocusInnerStrokeWidthRaw = "--smtc-ctrl-focus-inner-stroke-widt
// @public (undocumented)
export const ctrlFocusOuterStroke = "var(--smtc-ctrl-focus-outer-stroke, var(--smtc-background-ctrl-brand-rest, var(--colorTransparentStroke)))";

// @public
export const _ctrlFocusOuterStrokeInteractive = "var(--smtc-ctrl-focus-outer-stroke, var(--smtc-background-ctrl-brand-rest, var(--colorTransparentStrokeInteractive)))";

// @public (undocumented)
export const ctrlFocusOuterStrokeRaw = "--smtc-ctrl-focus-outer-stroke";

Expand All @@ -1595,13 +1598,13 @@ export const ctrlFocusOuterStrokeWidth = "var(--smtc-ctrl-focus-outer-stroke-wid
export const ctrlFocusOuterStrokeWidthRaw = "--smtc-ctrl-focus-outer-stroke-width";

// @public (undocumented)
export const ctrlInputBackgroundDisabled = "var(--smtc-ctrl-input-background-disabled, var(--smtc-background-ctrl-neutral-disabled))";
export const ctrlInputBackgroundDisabled = "var(--smtc-ctrl-input-background-disabled, var(--smtc-background-ctrl-neutral-disabled, var(--colorNeutralBackgroundDisabled)))";

// @public (undocumented)
export const ctrlInputBackgroundDisabledRaw = "--smtc-ctrl-input-background-disabled";

// @public (undocumented)
export const ctrlInputBackgroundError = "var(--smtc-ctrl-input-background-error, var(--smtc-background-ctrl-neutral-rest))";
export const ctrlInputBackgroundError = "var(--smtc-ctrl-input-background-error, var(--smtc-background-ctrl-neutral-rest, var(--colorPaletteRedBorder2)))";

// @public (undocumented)
export const ctrlInputBackgroundErrorRaw = "--smtc-ctrl-input-background-error";
Expand All @@ -1619,13 +1622,19 @@ export const ctrlInputBackgroundPressed = "var(--smtc-ctrl-input-background-pres
export const ctrlInputBackgroundPressedRaw = "--smtc-ctrl-input-background-pressed";

// @public (undocumented)
export const ctrlInputBackgroundRest = "var(--smtc-ctrl-input-background-rest, var(--smtc-background-ctrl-neutral-rest))";
export const ctrlInputBackgroundRest = "var(--smtc-ctrl-input-background-rest, var(--smtc-background-ctrl-neutral-rest, var(--colorNeutralBackground1)))";

// @public
export const _ctrlInputBackgroundRestDarker = "var(--smtc-ctrl-input-background-rest, var(--smtc-background-ctrl-neutral-rest, var(--colorNeutralBackground3)))";

// @public
export const _ctrlInputBackgroundRestLighter = "var(--smtc-ctrl-input-background-rest, var(--smtc-background-ctrl-neutral-rest, var(--colorNeutralBackground1)))";

// @public (undocumented)
export const ctrlInputBackgroundRestRaw = "--smtc-ctrl-input-background-rest";

// @public (undocumented)
export const ctrlInputBackgroundSelected = "var(--smtc-ctrl-input-background-selected, var(--smtc-background-ctrl-neutral-rest))";
export const ctrlInputBackgroundSelected = "var(--smtc-ctrl-input-background-selected, var(--smtc-background-ctrl-neutral-rest, var(--colorNeutralBackground1)))";

// @public (undocumented)
export const ctrlInputBackgroundSelectedRaw = "--smtc-ctrl-input-background-selected";
Expand All @@ -1643,25 +1652,25 @@ export const ctrlInputBottomLineStrokeError = "var(--smtc-ctrl-input-bottom-line
export const ctrlInputBottomLineStrokeErrorRaw = "--smtc-ctrl-input-bottom-line-stroke-error";

// @public (undocumented)
export const ctrlInputBottomLineStrokeHover = "var(--smtc-ctrl-input-bottom-line-stroke-hover, var(--smtc-foreground-ctrl-neutral-secondary-rest))";
export const ctrlInputBottomLineStrokeHover = "var(--smtc-ctrl-input-bottom-line-stroke-hover, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralStrokeAccessibleHover)))";

// @public (undocumented)
export const ctrlInputBottomLineStrokeHoverRaw = "--smtc-ctrl-input-bottom-line-stroke-hover";

// @public (undocumented)
export const ctrlInputBottomLineStrokePressed = "var(--smtc-ctrl-input-bottom-line-stroke-pressed, var(--smtc-foreground-ctrl-neutral-secondary-rest))";
export const ctrlInputBottomLineStrokePressed = "var(--smtc-ctrl-input-bottom-line-stroke-pressed, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralStrokeAccessiblePressed)))";

// @public (undocumented)
export const ctrlInputBottomLineStrokePressedRaw = "--smtc-ctrl-input-bottom-line-stroke-pressed";

// @public (undocumented)
export const ctrlInputBottomLineStrokeRest = "var(--smtc-ctrl-input-bottom-line-stroke-rest, var(--smtc-foreground-ctrl-neutral-secondary-rest))";
export const ctrlInputBottomLineStrokeRest = "var(--smtc-ctrl-input-bottom-line-stroke-rest, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralStrokeAccessible)))";

// @public (undocumented)
export const ctrlInputBottomLineStrokeRestRaw = "--smtc-ctrl-input-bottom-line-stroke-rest";

// @public (undocumented)
export const ctrlInputBottomLineStrokeSelected = "var(--smtc-ctrl-input-bottom-line-stroke-selected, var(--smtc-background-ctrl-brand-rest))";
export const ctrlInputBottomLineStrokeSelected = "var(--smtc-ctrl-input-bottom-line-stroke-selected, var(--smtc-background-ctrl-brand-rest, var(--colorCompoundBrandStroke)))";

// @public (undocumented)
export const ctrlInputBottomLineStrokeSelectedRaw = "--smtc-ctrl-input-bottom-line-stroke-selected";
Expand All @@ -1685,11 +1694,14 @@ export const ctrlInputBottomLineStrokeWidthRest = "var(--smtc-ctrl-input-bottom-
export const ctrlInputBottomLineStrokeWidthRestRaw = "--smtc-ctrl-input-bottom-line-stroke-width-rest";

// @public (undocumented)
export const ctrlInputBottomLineStrokeWidthSelected = "var(--smtc-ctrl-input-bottom-line-stroke-width-selected)";
export const ctrlInputBottomLineStrokeWidthSelected = "var(--smtc-ctrl-input-bottom-line-stroke-width-selected, var(--strokeWidthThick))";

// @public (undocumented)
export const ctrlInputBottomLineStrokeWidthSelectedRaw = "--smtc-ctrl-input-bottom-line-stroke-width-selected";

// @public
export const _ctrlInputNeutralForegroundPlaceholder = "var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground4))";

// @public (undocumented)
export const ctrlInputStrokeDisabled = "var(--smtc-ctrl-input-stroke-disabled, var(--smtc-stroke-ctrl-on-outline-disabled))";

Expand All @@ -1703,25 +1715,25 @@ export const ctrlInputStrokeError = "var(--smtc-ctrl-input-stroke-error, var(--s
export const ctrlInputStrokeErrorRaw = "--smtc-ctrl-input-stroke-error";

// @public (undocumented)
export const ctrlInputStrokeHover = "var(--smtc-ctrl-input-stroke-hover, var(--smtc-stroke-ctrl-on-outline-hover))";
export const ctrlInputStrokeHover = "var(--smtc-ctrl-input-stroke-hover, var(--smtc-stroke-ctrl-on-outline-hover, var(--colorNeutralStroke1Hover)))";

// @public (undocumented)
export const ctrlInputStrokeHoverRaw = "--smtc-ctrl-input-stroke-hover";

// @public (undocumented)
export const ctrlInputStrokePressed = "var(--smtc-ctrl-input-stroke-pressed, var(--smtc-stroke-ctrl-on-outline-pressed))";
export const ctrlInputStrokePressed = "var(--smtc-ctrl-input-stroke-pressed, var(--smtc-stroke-ctrl-on-outline-pressed, var(--colorNeutralStroke1Pressed)))";

// @public (undocumented)
export const ctrlInputStrokePressedRaw = "--smtc-ctrl-input-stroke-pressed";

// @public (undocumented)
export const ctrlInputStrokeRest = "var(--smtc-ctrl-input-stroke-rest, var(--smtc-stroke-ctrl-on-outline-rest))";
export const ctrlInputStrokeRest = "var(--smtc-ctrl-input-stroke-rest, var(--smtc-stroke-ctrl-on-outline-rest, var(--colorNeutralStroke1)))";

// @public (undocumented)
export const ctrlInputStrokeRestRaw = "--smtc-ctrl-input-stroke-rest";

// @public (undocumented)
export const ctrlInputStrokeSelected = "var(--smtc-ctrl-input-stroke-selected, var(--smtc-stroke-ctrl-on-outline-rest))";
export const ctrlInputStrokeSelected = "var(--smtc-ctrl-input-stroke-selected, var(--smtc-stroke-ctrl-on-outline-rest, var(--colorNeutralStroke1)))";

// @public (undocumented)
export const ctrlInputStrokeSelectedRaw = "--smtc-ctrl-input-stroke-selected";
Expand Down
Loading
Loading