Text Area Semantic Tokens Update

Author: etudie

change/@fluentui-react-textarea-348f9b49-d704-4a66-9a74-3955ff6fcdc0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix: TextArea changes",
+  "packageName": "@fluentui/react-textarea",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButtonStyles.styles.ts

@@ -18,7 +18,7 @@ const useRootStyles = makeStyles({
     height: 'auto',
 
     [`& .${compoundButtonClassNames.secondaryContent}`]: {
-      color: semanticTokens.foregroundCtrlNeutralSecondaryRest,
+      color: semanticTokens._foregroundCtrlNeutralSecondaryRest2,
     },
 
     ':hover': {

packages/react-components/react-textarea/library/src/components/Textarea/useTextareaStyles.styles.ts

@@ -56,7 +56,7 @@ const useRootStyles = makeStyles({
       // 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: `${semanticTokens._cornerCtrlRestTextAreaThick} solid ${semanticTokens.ctrlInputBottomLineStrokeRest}`,
+      borderBottom: `${semanticTokens._cornerCtrlRestTextAreaThick} solid ${semanticTokens.ctrlInputBottomLineStrokePressed}`,
       clipPath: `inset(calc(100% - ${semanticTokens._cornerCtrlRestTextAreaThick}) 0 0 0)`,
 
       // Animation for focus OUT
@@ -119,8 +119,8 @@ const useRootStyles = makeStyles({
   outline: {
     backgroundColor: semanticTokens._ctrlInputBackgroundRestLighter,
     border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokeRest}`,
-    borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeSelected,
-  },
+    borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeRest,
+    },
   outlineInteractive: {
     ':hover': {
       border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokeHover}`,
@@ -129,12 +129,12 @@ const useRootStyles = makeStyles({
 
     ':active': {
       border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokePressed}`,
-      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed, // TODO
-    },
+      borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeSelected,
+  },
 
     ':focus-within': {
       border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.ctrlInputStrokePressed}`,
-      borderBottomColor: semanticTokens.ctrlInputBottomLineStrokeSelected,
+      borderBottomColor: semanticTokens.ctrlInputBottomLineStrokePressed,
     },
   },
 
@@ -160,13 +160,13 @@ const useTextareaStyles = makeStyles({
     height: '100%',
 
     '::placeholder': {
-      color: tokens.colorNeutralForeground4, // TODO
+      color: semanticTokens._foregroundCtrlNeutralSecondaryRest4,
       opacity: 1,
     },
 
     '::selection': {
       color: tokens.colorNeutralForegroundInverted,
-      backgroundColor: tokens.colorNeutralBackgroundInverted, // TODO
+      backgroundColor: tokens.colorNeutralBackgroundInverted,
     },
 
     outlineStyle: 'none', // disable default browser outline
@@ -184,19 +184,19 @@ const useTextareaStyles = makeStyles({
   // affected by changing the padding of the root.
   small: {
     minHeight: '40px',
-    padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`, // TODO
+    padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,
     maxHeight: '200px',
     ...typographyStyles.caption1,
   },
   medium: {
     minHeight: '52px',
-    padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`, // TODO
+    padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,
     maxHeight: '260px',
     ...typographyStyles.body1,
   },
   large: {
     minHeight: '64px',
-    padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`, // TODO
+    padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,
     maxHeight: '320px',
     ...typographyStyles.body2,
   },

packages/semantic-tokens/etc/semantic-tokens.api.md

@@ -1658,25 +1658,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, var(--colorCompoundBrandStrokePressed)))";
+export const ctrlInputBottomLineStrokePressed = "var(--smtc-ctrl-input-bottom-line-stroke-pressed, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorCompoundBrandStroke)))";
 
 // @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, var(--colorCompoundBrandStroke)))";
+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(--colorNeutralStrokeAccessiblePressed)))";
 
 // @public (undocumented)
 export const ctrlInputBottomLineStrokeSelectedRaw = "--smtc-ctrl-input-bottom-line-stroke-selected";
@@ -1718,7 +1718,7 @@ 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";
@@ -1730,7 +1730,7 @@ export const ctrlInputStrokePressed = "var(--smtc-ctrl-input-stroke-pressed, var
 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";
@@ -2966,7 +2966,13 @@ export const foregroundCtrlNeutralSecondaryPressed = "var(--smtc-foreground-ctrl
 export const foregroundCtrlNeutralSecondaryPressedRaw = "--smtc-foreground-ctrl-neutral-secondary-pressed";
 
 // @public (undocumented)
-export const foregroundCtrlNeutralSecondaryRest = "var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground2))";
+export const foregroundCtrlNeutralSecondaryRest = "var(--smtc-foreground-ctrl-neutral-secondary-rest)";
+
+// @public
+export const _foregroundCtrlNeutralSecondaryRest2 = "var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground2))";
+
+// @public
+export const _foregroundCtrlNeutralSecondaryRest4 = "var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground4))";
 
 // @public (undocumented)
 export const foregroundCtrlNeutralSecondaryRestRaw = "--smtc-foreground-ctrl-neutral-secondary-rest";

packages/semantic-tokens/src/components/input/tokens.ts

@@ -15,8 +15,12 @@ import {
 } from '../../control/variables';
 import {
   colorPaletteRedBorder2,
+  colorNeutralStroke1,
+  colorNeutralStrokeAccessible,
+  colorNeutralStrokeAccessibleHover,
   colorCompoundBrandStroke,
-  colorCompoundBrandStrokePressed,
+  colorNeutralStrokeAccessiblePressed,
+  colorNeutralStroke1Hover,
   colorNeutralStroke1Pressed,
 } from '../../legacy/tokens';
 import { statusDangerStrokeRaw } from '../../optional/variables';
@@ -57,7 +61,7 @@ export const ctrlInputBackgroundPressed = `var(${ctrlInputBackgroundPressedRaw},
 export const ctrlInputBackgroundDisabled = `var(${ctrlInputBackgroundDisabledRaw}, var(${backgroundCtrlNeutralDisabledRaw}))`;
 export const ctrlInputBackgroundSelected = `var(${ctrlInputBackgroundSelectedRaw}, var(${backgroundCtrlNeutralRestRaw}))`;
 export const ctrlInputBackgroundError = `var(${ctrlInputBackgroundErrorRaw}, var(${backgroundCtrlNeutralRestRaw}, ${colorPaletteRedBorder2}))`;
-export const ctrlInputStrokeRest = `var(${ctrlInputStrokeRestRaw}, var(${strokeCtrlOnOutlineRestRaw}))`;
+export const ctrlInputStrokeRest = `var(${ctrlInputStrokeRestRaw}, var(${strokeCtrlOnOutlineRestRaw}, ${colorNeutralStroke1}))`;
 export const ctrlInputStrokeWidthRest = `var(${ctrlInputStrokeWidthRestRaw}, var(${strokeWidthDefaultRaw}))`;
 export const ctrlInputStrokeWidthHover = `var(${ctrlInputStrokeWidthHoverRaw}, var(${strokeWidthDefaultRaw}))`;
 export const ctrlInputStrokeWidthPressed = `var(${ctrlInputStrokeWidthPressedRaw}, var(${strokeWidthDefaultRaw}))`;
@@ -68,13 +72,13 @@ export const ctrlInputTextSelectionForeground = `var(${ctrlInputTextSelectionFor
 export const ctrlInputBottomLineStrokeWidthHover = `var(${ctrlInputBottomLineStrokeWidthHoverRaw}, var(${strokeWidthDefaultRaw}))`;
 export const ctrlInputBottomLineStrokeWidthPressed = `var(${ctrlInputBottomLineStrokeWidthPressedRaw}, var(${ctrlInputBottomLineStrokeWidthSelectedRaw}))`;
 export const ctrlInputBottomLineStrokeWidthSelected = `var(${ctrlInputBottomLineStrokeWidthSelectedRaw})`;
-export const ctrlInputBottomLineStrokeRest = `var(${ctrlInputBottomLineStrokeRestRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorCompoundBrandStroke}))`;
-export const ctrlInputBottomLineStrokeHover = `var(${ctrlInputBottomLineStrokeHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`;
-export const ctrlInputBottomLineStrokePressed = `var(${ctrlInputBottomLineStrokePressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorCompoundBrandStrokePressed}))`;
+export const ctrlInputBottomLineStrokeRest = `var(${ctrlInputBottomLineStrokeRestRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralStrokeAccessible}))`;
+export const ctrlInputBottomLineStrokeHover = `var(${ctrlInputBottomLineStrokeHoverRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralStrokeAccessibleHover}))`;
+export const ctrlInputBottomLineStrokePressed = `var(${ctrlInputBottomLineStrokePressedRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorCompoundBrandStroke}))`;
 export const ctrlInputBottomLineStrokeDisabled = `var(${ctrlInputBottomLineStrokeDisabledRaw}, unset)`;
-export const ctrlInputBottomLineStrokeSelected = `var(${ctrlInputBottomLineStrokeSelectedRaw}, var(${backgroundCtrlBrandRestRaw}))`;
+export const ctrlInputBottomLineStrokeSelected = `var(${ctrlInputBottomLineStrokeSelectedRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorNeutralStrokeAccessiblePressed}))`;
 export const ctrlInputBottomLineStrokeError = `var(${ctrlInputBottomLineStrokeErrorRaw}, unset)`;
-export const ctrlInputStrokeHover = `var(${ctrlInputStrokeHoverRaw}, var(${strokeCtrlOnOutlineHoverRaw}))`;
+export const ctrlInputStrokeHover = `var(${ctrlInputStrokeHoverRaw}, var(${strokeCtrlOnOutlineHoverRaw}, ${colorNeutralStroke1Hover}))`;
 export const ctrlInputStrokePressed = `var(${ctrlInputStrokePressedRaw}, var(${strokeCtrlOnOutlinePressedRaw}, ${colorNeutralStroke1Pressed}))`;
 export const ctrlInputStrokeDisabled = `var(${ctrlInputStrokeDisabledRaw}, var(${strokeCtrlOnOutlineDisabledRaw}))`;
 export const ctrlInputStrokeSelected = `var(${ctrlInputStrokeSelectedRaw}, var(${strokeCtrlOnOutlineRestRaw}))`;

packages/semantic-tokens/src/control/tokens.ts

@@ -47,7 +47,6 @@ import {
   borderRadiusMedium,
   colorNeutralForeground1,
   colorNeutralForegroundDisabled,
-  colorNeutralForeground2,
   colorNeutralForegroundOnBrand,
   colorPaletteRedBackground3,
   colorPaletteRedForeground3,
@@ -396,7 +395,7 @@ export const cornerCtrlLgRest = `var(${cornerCtrlLgRestRaw}, ${borderRadiusMediu
 export const cornerImageInCard = `var(${cornerImageInCardRaw})`;
 export const foregroundCtrlNeutralPrimaryRest = `var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForeground1})`;
 export const foregroundCtrlNeutralPrimaryDisabled = `var(${foregroundCtrlNeutralPrimaryDisabledRaw}, ${colorNeutralForegroundDisabled})`;
-export const foregroundCtrlNeutralSecondaryRest = `var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralForeground2})`;
+export const foregroundCtrlNeutralSecondaryRest = `var(${foregroundCtrlNeutralSecondaryRestRaw})`;
 export const foregroundCtrlNeutralSecondaryDisabled = `var(${foregroundCtrlNeutralSecondaryDisabledRaw}, ${colorNeutralForegroundDisabled})`;
 export const foregroundCtrlBrandRest = `var(${foregroundCtrlBrandRestRaw})`;
 export const foregroundCtrlBrandHover = `var(${foregroundCtrlBrandHoverRaw})`;

packages/semantic-tokens/src/fluentLegacyVariants.ts

@@ -89,5 +89,12 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = {
     f2Token: 'colorNeutralBackground1',
     originalToken: 'ctrlInputBackgroundRest',
   },
-
+  _foregroundCtrlNeutralSecondaryRest2:{
+    f2Token: 'colorNeutralForeground2',
+    originalToken: 'foregroundCtrlNeutralSecondaryRest',
+  },
+  _foregroundCtrlNeutralSecondaryRest4:{
+    f2Token: 'colorNeutralForeground4',
+    originalToken: 'foregroundCtrlNeutralSecondaryRest',
+  }
 };

packages/semantic-tokens/src/fluentOverrides.ts

@@ -45,9 +45,13 @@ export const fluentOverrides: FluentOverrides = {
   ctrlFocusOuterStroke: { f2Token: 'colorTransparentStroke' },
   ctrlFocusOuterStrokeWidth: { f2Token: 'strokeWidthThick' },
   ctrlInputBackgroundError: { f2Token: 'colorPaletteRedBorder2' },
-  ctrlInputBottomLineStrokePressed: { f2Token: 'colorCompoundBrandStrokePressed' },
-  ctrlInputBottomLineStrokeRest: { f2Token: 'colorCompoundBrandStroke' },
+  ctrlInputBottomLineStrokeHover: { f2Token: 'colorNeutralStrokeAccessibleHover' },
+  ctrlInputBottomLineStrokePressed: { f2Token: 'colorCompoundBrandStroke' },
+  ctrlInputBottomLineStrokeRest: { f2Token: 'colorNeutralStrokeAccessible' },
+  ctrlInputBottomLineStrokeSelected: { f2Token: 'colorNeutralStrokeAccessiblePressed' },
+  ctrlInputStrokeHover: { f2Token: 'colorNeutralStroke1Hover' },
   ctrlInputStrokePressed: { f2Token: 'colorNeutralStroke1Pressed' },
+  ctrlInputStrokeRest: { f2Token: 'colorNeutralStroke1' },
   ctrlLinkForegroundBrandHover: { f2Token: 'colorBrandForegroundLinkHover' },
   ctrlLinkForegroundBrandPressed: { f2Token: 'colorBrandForegroundLinkPressed' },
   ctrlLinkForegroundBrandRest: { f2Token: 'colorBrandForegroundLink' },
@@ -77,7 +81,6 @@ export const fluentOverrides: FluentOverrides = {
   foregroundCtrlNeutralSecondaryDisabled: { f2Token: 'colorNeutralForegroundDisabled' },
   foregroundCtrlNeutralSecondaryHover: { f2Token: 'colorNeutralForeground2Hover' },
   foregroundCtrlNeutralSecondaryPressed: { f2Token: 'colorNeutralForeground2Pressed' },
-  foregroundCtrlNeutralSecondaryRest: { f2Token: 'colorNeutralForeground2' },
   foregroundCtrlOnBrandHover: { f2Token: 'colorNeutralForegroundOnBrand' },
   foregroundCtrlOnBrandPressed: { f2Token: 'colorNeutralForegroundOnBrand' },
   foregroundCtrlOnBrandRest: { f2Token: 'colorNeutralForegroundOnBrand' },

packages/semantic-tokens/src/index.ts

@@ -1798,8 +1798,10 @@ export {
   _ctrlAvatarPresenceBadgeStrokeWidthLg,
   _ctrlAvatarPresenceBadgeStrokeWidthSm,
   _ctrlButtonGapInsideDefault,
+  _ctrlDividerForegroundSubtle,
   _ctrlInputBackgroundRestDarker,
   _ctrlInputBackgroundRestLighter,
-  _ctrlDividerForegroundSubtle,
+  _foregroundCtrlNeutralSecondaryRest2,
+  _foregroundCtrlNeutralSecondaryRest4,
 } from './legacyVariant/tokens';
 export { kumoSemanticTokens } from './themes/kumoTheme';

packages/semantic-tokens/src/legacy/tokens.ts

@@ -110,20 +110,40 @@ export const colorTransparentStroke = 'var(--colorTransparentStroke)';
  */
 export const colorPaletteRedBorder2 = 'var(--colorPaletteRedBorder2)';
 /**
- * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandStrokePressed | `colorCompoundBrandStrokePressed`} design token.
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAccessibleHover | `colorNeutralStrokeAccessibleHover`} design token.
  * @public
  */
-export const colorCompoundBrandStrokePressed = 'var(--colorCompoundBrandStrokePressed)';
+export const colorNeutralStrokeAccessibleHover = 'var(--colorNeutralStrokeAccessibleHover)';
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandStroke | `colorCompoundBrandStroke`} design token.
  * @public
  */
 export const colorCompoundBrandStroke = 'var(--colorCompoundBrandStroke)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAccessible | `colorNeutralStrokeAccessible`} design token.
+ * @public
+ */
+export const colorNeutralStrokeAccessible = 'var(--colorNeutralStrokeAccessible)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeAccessiblePressed | `colorNeutralStrokeAccessiblePressed`} design token.
+ * @public
+ */
+export const colorNeutralStrokeAccessiblePressed = 'var(--colorNeutralStrokeAccessiblePressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1Hover | `colorNeutralStroke1Hover`} design token.
+ * @public
+ */
+export const colorNeutralStroke1Hover = 'var(--colorNeutralStroke1Hover)';
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1Pressed | `colorNeutralStroke1Pressed`} design token.
  * @public
  */
 export const colorNeutralStroke1Pressed = 'var(--colorNeutralStroke1Pressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1 | `colorNeutralStroke1`} design token.
+ * @public
+ */
+export const colorNeutralStroke1 = 'var(--colorNeutralStroke1)';
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundLinkHover | `colorBrandForegroundLinkHover`} design token.
  * @public
@@ -249,26 +269,11 @@ export const colorPaletteDarkOrangeBackground3 = 'var(--colorPaletteDarkOrangeBa
  * @public
  */
 export const colorNeutralStrokeOnBrand = 'var(--colorNeutralStrokeOnBrand)';
-/**
- * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1 | `colorNeutralStroke1`} design token.
- * @public
- */
-export const colorNeutralStroke1 = 'var(--colorNeutralStroke1)';
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeDisabled | `colorNeutralStrokeDisabled`} design token.
  * @public
  */
 export const colorNeutralStrokeDisabled = 'var(--colorNeutralStrokeDisabled)';
-/**
- * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1Hover | `colorNeutralStroke1Hover`} design token.
- * @public
- */
-export const colorNeutralStroke1Hover = 'var(--colorNeutralStroke1Hover)';
-/**
- * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke1Pressed | `colorNeutralStroke1Pressed`} design token.
- * @public
- */
-export const colorNeutralStroke1Pressed = 'var(--colorNeutralStroke1Pressed)';
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke1 | `colorBrandStroke1`} design token.
  * @public
@@ -424,3 +429,8 @@ export const borderRadiusXLarge = 'var(--borderRadiusXLarge)';
  * @public
  */
 export const colorNeutralBackground3 = 'var(--colorNeutralBackground3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground4 | `colorNeutralForeground4`} design token.
+ * @public
+ */
+export const colorNeutralForeground4 = 'var(--colorNeutralForeground4)';