diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index 93b1584b5f320c..0e24b38bc112ac 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -23,6 +23,7 @@ import { DividerState } from '@fluentui/react-divider'; import type { DrawerBodyState } from '@fluentui/react-drawer'; import { DrawerFooterState } from '@fluentui/react-drawer'; import { DrawerHeaderState } from '@fluentui/react-drawer'; +import { FieldState } from '@fluentui/react-field'; import { FlatTreeState } from '@fluentui/react-tree'; import { FluentProviderCustomStyleHooks } from '@fluentui/react-provider'; import { ImageState } from '@fluentui/react-image'; @@ -120,6 +121,9 @@ export const useSemanticDrawerFooterStyles: (_state: unknown) => DrawerFooterSta // @public export const useSemanticDrawerHeaderStyles: (_state: unknown) => DrawerHeaderState; +// @public +export const useSemanticFieldStyles: (_state: unknown) => FieldState; + // @public (undocumented) export const useSemanticFlatTreeStyles: (_state: unknown) => FlatTreeState; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 5f7cd17b29ca75..1249d332ab8ef4 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -33,6 +33,7 @@ "@fluentui/react-dialog": "^9.12.8", "@fluentui/react-divider": "^9.2.86", "@fluentui/react-drawer": "^9.7.8", + "@fluentui/react-field": "^9.2.6", "@fluentui/react-icons": "^2.0.245", "@fluentui/react-image": "^9.1.84", "@fluentui/react-jsx-runtime": "^9.0.54", diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Field/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Field/index.ts new file mode 100644 index 00000000000000..67b452f56ac58f --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Field/index.ts @@ -0,0 +1 @@ +export { useSemanticFieldStyles } from './useSemanticFieldStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Field/useSemanticFieldStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Field/useSemanticFieldStyles.styles.ts new file mode 100644 index 00000000000000..ec57da32ecfe3c --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Field/useSemanticFieldStyles.styles.ts @@ -0,0 +1,179 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { type FieldState, fieldClassNames } from '@fluentui/react-field'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +// Size of the icon in the validation message +const iconSize = '12px'; + +/** + * Styles for the root slot + */ +const useRootStyles = makeStyles({ + base: { + display: 'grid', + }, + + // In horizontal layout, the field is a grid with the label taking up the entire first column. + // The last row is slack space in case the label is taller than the rest of the content. + horizontal: { + gridTemplateColumns: '33% 1fr', + gridTemplateRows: 'auto auto auto 1fr', + }, + + // In horizontal layout without a label, replace the label's column with padding. + // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned. + horizontalNoLabel: { + paddingLeft: '33%', + gridTemplateColumns: '1fr', + }, +}); + +const useLabelStyles = makeStyles({ + vertical: { + paddingTop: semanticTokens._ctrlFieldPaddingCtrlTextTop, + paddingBottom: semanticTokens._ctrlFieldPaddingCtrlTextBottom, + marginBottom: semanticTokens.gapBetweenContentXSmall, + }, + + verticalLarge: { + paddingTop: semanticTokens._ctrlFieldPaddingCtrlLgTextTop, + paddingBottom: semanticTokens._ctrlFieldPaddingCtrlLgTextBottom, + marginBottom: semanticTokens._ctrlFieldGapBetweenContentXSmall, + }, + + horizontal: { + paddingTop: semanticTokens._ctrlFieldPaddingCtrlTextTopHorizontal, + paddingBottom: semanticTokens._ctrlFieldPaddingCtrlTextBottomHorizontal, + marginRight: semanticTokens._ctrlFieldPaddingCtrlTextSide, + gridRowStart: '1', + gridRowEnd: '-1', + }, + + horizontalSmall: { + paddingTop: semanticTokens._ctrlFieldPaddingCtrlSmTextTop, + paddingBottom: semanticTokens._ctrlFieldPaddingCtrlSmTextBottom, + }, + + horizontalLarge: { + // To align the label text with the Input text, it should be centered within the 40px height of the Input. + // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token. + paddingTop: semanticTokens._ctrlFieldPaddingCtrlLgTextTopHorizontal, + paddingBottom: semanticTokens._ctrlFieldPaddingCtrlLgTextBottomHorizontal, + }, +}); + +const useSecondaryTextBaseClassName = makeResetStyles({ + marginTop: semanticTokens.gapBetweenContentXSmall, + color: semanticTokens._ctrlFieldForegroundCtrlNeutralSecondaryRest, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + fontSize: semanticTokens.textRampMetadataFontSize, + lineHeight: semanticTokens.textRampMetadataLineHeight, +}); + +const useSecondaryTextStyles = makeStyles({ + error: { + color: semanticTokens._ctrlFieldStatusDangerTintForeground, + }, + + withIcon: { + // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon. + paddingLeft: `calc(${iconSize} + ${semanticTokens.gapBetweenTextSmall})`, + }, +}); + +const useValidationMessageIconBaseClassName = makeResetStyles({ + display: 'inline-block', + fontSize: iconSize, + // Negative left margin puts the icon in the gutter of the validation message div's withIcon style. + marginLeft: `calc(-${iconSize} - ${semanticTokens.gapBetweenTextSmall})`, + marginRight: semanticTokens.gapBetweenTextSmall, + // Line height of 0 prevents the verticalAlign from affecting the line height of the text. + lineHeight: '0', + // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding). + verticalAlign: '-1px', +}); + +const useValidationMessageIconStyles = makeStyles({ + error: { + color: semanticTokens._ctrlFieldStatusDangerTintForeground, + }, + warning: { + color: semanticTokens._ctrlFieldStatusWarningTintForeground, + }, + success: { + color: semanticTokens._ctrlFieldStatusSuccessTintForeground, + }, +}); + +/** + * Apply styling to the Field slots based on the state + */ +export const useSemanticFieldStyles = (_state: unknown): FieldState => { + 'use no memo'; + + const state = _state as FieldState; + const { validationState, size } = state; + const horizontal = state.orientation === 'horizontal'; + + const rootStyles = useRootStyles(); + state.root.className = mergeClasses( + state.root.className, + fieldClassNames.root, + rootStyles.base, + horizontal && rootStyles.horizontal, + horizontal && !state.label && rootStyles.horizontalNoLabel, + getSlotClassNameProp_unstable(state.root), + ); + + const labelStyles = useLabelStyles(); + if (state.label) { + state.label.className = mergeClasses( + state.label.className, + fieldClassNames.label, + horizontal && labelStyles.horizontal, + horizontal && size === 'small' && labelStyles.horizontalSmall, + horizontal && size === 'large' && labelStyles.horizontalLarge, + !horizontal && labelStyles.vertical, + !horizontal && size === 'large' && labelStyles.verticalLarge, + getSlotClassNameProp_unstable(state.label), + ); + } + + const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName(); + const validationMessageIconStyles = useValidationMessageIconStyles(); + if (state.validationMessageIcon) { + state.validationMessageIcon.className = mergeClasses( + state.validationMessageIcon.className, + fieldClassNames.validationMessageIcon, + validationMessageIconBaseClassName, + validationState !== 'none' && validationMessageIconStyles[validationState], + getSlotClassNameProp_unstable(state.validationMessageIcon), + ); + } + + const secondaryTextBaseClassName = useSecondaryTextBaseClassName(); + const secondaryTextStyles = useSecondaryTextStyles(); + if (state.validationMessage) { + state.validationMessage.className = mergeClasses( + state.validationMessage.className, + fieldClassNames.validationMessage, + secondaryTextBaseClassName, + validationState === 'error' && secondaryTextStyles.error, + !!state.validationMessageIcon && secondaryTextStyles.withIcon, + getSlotClassNameProp_unstable(state.validationMessage), + ); + } + + if (state.hint) { + state.hint.className = mergeClasses( + state.hint.className, + fieldClassNames.hint, + secondaryTextBaseClassName, + getSlotClassNameProp_unstable(state.hint), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 4b30db2d3703cb..0befde24f0bdb5 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -18,6 +18,7 @@ import { useSemanticDrawerHeaderStyles, useSemanticOverlayDrawerSurfaceStyles, } from './Drawer'; +import { useSemanticFieldStyles } from './Field'; import { useSemanticLabelStyles } from './Label'; import { useSemanticLinkStyles } from './Link'; import { useSemanticProgressBarStyles } from './ProgressBar/useSemanticProgressBarStyles.styles'; @@ -91,6 +92,8 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useDrawerFooterStyles_unstable: useSemanticDrawerFooterStyles, useDrawerHeaderStyles_unstable: useSemanticDrawerHeaderStyles, useOverlayDrawerSurfaceStyles_unstable: useSemanticOverlayDrawerSurfaceStyles, + //Field styles + useFieldStyles_unstable: useSemanticFieldStyles, // Label styles useLabelStyles_unstable: useSemanticLabelStyles, // Link styles diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index 5ff086e7f30d1e..db38c7f5298145 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -17,6 +17,7 @@ export { useSemanticDrawerHeaderStyles, useSemanticOverlayDrawerSurfaceStyles, } from './component-styles/Drawer'; +export { useSemanticFieldStyles } from './component-styles/Field'; export { useSemanticLabelStyles } from './component-styles/Label'; export { useSemanticLinkStyles } from './component-styles/Link'; export { useSemanticProgressBarStyles } from './component-styles/ProgressBar/useSemanticProgressBarStyles.styles'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 5dfa27c0a93fab..7505e6ecf5b83a 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -1711,6 +1711,54 @@ export const ctrlFabShadowRest = "var(--smtc-ctrl-fab-shadow-rest)"; // @public (undocumented) export const ctrlFabShadowRestRaw = "--smtc-ctrl-fab-shadow-rest"; +// @public +export const _ctrlFieldForegroundCtrlNeutralSecondaryRest = "var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground3))"; + +// @public +export const _ctrlFieldGapBetweenContentXSmall = "var(--smtc-gap-between-content-x-small, var(--spacingVerticalXS))"; + +// @public +export const _ctrlFieldPaddingCtrlLgTextBottom = "var(--smtc-padding-ctrl-lg-text-bottom, var(--smtc-padding-ctrl-lg-text-top, 1px))"; + +// @public +export const _ctrlFieldPaddingCtrlLgTextBottomHorizontal = "var(--smtc-padding-ctrl-lg-text-bottom, var(--smtc-padding-ctrl-lg-text-top, 9px))"; + +// @public +export const _ctrlFieldPaddingCtrlLgTextTop = "var(--smtc-padding-ctrl-lg-text-top, 1px)"; + +// @public +export const _ctrlFieldPaddingCtrlLgTextTopHorizontal = "var(--smtc-padding-ctrl-lg-text-top, 9px)"; + +// @public +export const _ctrlFieldPaddingCtrlSmTextBottom = "var(--smtc-padding-ctrl-sm-text-bottom, var(--smtc-padding-ctrl-sm-text-top, var(--spacingVerticalXS)))"; + +// @public +export const _ctrlFieldPaddingCtrlSmTextTop = "var(--smtc-padding-ctrl-sm-text-top, var(--spacingVerticalXS))"; + +// @public +export const _ctrlFieldPaddingCtrlTextBottom = "var(--smtc-padding-ctrl-text-bottom, var(--smtc-padding-ctrl-text-top, var(--spacingVerticalXXS)))"; + +// @public +export const _ctrlFieldPaddingCtrlTextBottomHorizontal = "var(--smtc-padding-ctrl-text-bottom, var(--smtc-padding-ctrl-text-top, var(--spacingVerticalSNudge)))"; + +// @public +export const _ctrlFieldPaddingCtrlTextSide = "var(--smtc-padding-ctrl-text-side, var(--spacingHorizontalM))"; + +// @public +export const _ctrlFieldPaddingCtrlTextTop = "var(--smtc-padding-ctrl-text-top, var(--spacingVerticalXXS))"; + +// @public +export const _ctrlFieldPaddingCtrlTextTopHorizontal = "var(--smtc-padding-ctrl-text-top, var(--spacingVerticalSNudge))"; + +// @public +export const _ctrlFieldStatusDangerTintForeground = "var(--smtc-status-danger-tint-foreground, var(--colorPaletteRedForeground1))"; + +// @public +export const _ctrlFieldStatusSuccessTintForeground = "var(--smtc-status-success-tint-foreground, var(--colorPaletteGreenForeground1))"; + +// @public +export const _ctrlFieldStatusWarningTintForeground = "var(--smtc-status-warning-tint-foreground, var(--colorPaletteDarkOrangeForeground1))"; + // @public (undocumented) export const ctrlFocusInnerStroke = "var(--smtc-ctrl-focus-inner-stroke, var(--colorStrokeFocus2))"; @@ -3545,7 +3593,7 @@ export const gapBetweenContentXLarge = "var(--smtc-gap-between-content-x-large)" export const gapBetweenContentXLargeRaw = "--smtc-gap-between-content-x-large"; // @public (undocumented) -export const gapBetweenContentXSmall = "var(--smtc-gap-between-content-x-small)"; +export const gapBetweenContentXSmall = "var(--smtc-gap-between-content-x-small, var(--spacingVerticalXXS))"; // @public (undocumented) export const gapBetweenContentXSmallRaw = "--smtc-gap-between-content-x-small"; @@ -3611,7 +3659,7 @@ export const gapBetweenTextLarge = "var(--smtc-gap-between-text-large, var(--smt export const gapBetweenTextLargeRaw = "--smtc-gap-between-text-large"; // @public (undocumented) -export const gapBetweenTextSmall = "var(--smtc-gap-between-text-small, var(--smtc-gap-between-content-xx-small))"; +export const gapBetweenTextSmall = "var(--smtc-gap-between-text-small, var(--smtc-gap-between-content-xx-small, var(--spacingHorizontalXS)))"; // @public (undocumented) export const gapBetweenTextSmallRaw = "--smtc-gap-between-text-small"; @@ -5695,7 +5743,7 @@ export const textRampMetadataFontSize = "var(--smtc-text-ramp-metadata-font-size export const textRampMetadataFontSizeRaw = "--smtc-text-ramp-metadata-font-size"; // @public (undocumented) -export const textRampMetadataLineHeight = "var(--smtc-text-ramp-metadata-line-height, var(--smtc-text-global-caption1-line-height))"; +export const textRampMetadataLineHeight = "var(--smtc-text-ramp-metadata-line-height, var(--smtc-text-global-caption1-line-height, var(--lineHeightBase200)))"; // @public (undocumented) export const textRampMetadataLineHeightRaw = "--smtc-text-ramp-metadata-line-height"; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index cf14e5ef5a2f31..e8e04aec7513fb 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -29,6 +29,7 @@ import { spacingHorizontalXXL, spacingHorizontalS, spacingHorizontalL, + spacingVerticalXXS, spacingHorizontalXS, spacingHorizontalSNudge, borderRadiusCircular, @@ -343,7 +344,7 @@ export const paddingCtrlLgTextTop = `var(${paddingCtrlLgTextTopRaw})`; export const paddingCtrlLgToNestedControl = `var(${paddingCtrlLgToNestedControlRaw})`; export const gapBetweenContentNone = `var(${gapBetweenContentNoneRaw})`; export const gapBetweenContentXxSmall = `var(${gapBetweenContentXxSmallRaw})`; -export const gapBetweenContentXSmall = `var(${gapBetweenContentXSmallRaw})`; +export const gapBetweenContentXSmall = `var(${gapBetweenContentXSmallRaw}, ${spacingVerticalXXS})`; export const gapBetweenContentSmall = `var(${gapBetweenContentSmallRaw}, 8px)`; export const gapBetweenCtrlDefault = `var(${gapBetweenCtrlDefaultRaw}, 8px)`; export const gapBetweenContentMedium = `var(${gapBetweenContentMediumRaw})`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index d2a42c777fe2b5..fd0c2d2021d8dc 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -259,6 +259,70 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'colorNeutralForeground3', originalToken: 'foregroundCtrlHintDefault', }, + _ctrlFieldForegroundCtrlNeutralSecondaryRest: { + f2Token: 'colorNeutralForeground3', + originalToken: 'foregroundCtrlNeutralSecondaryRest', + }, + _ctrlFieldGapBetweenContentXSmall: { + f2Token: 'spacingVerticalXS', + originalToken: 'gapBetweenContentXSmall', + }, + _ctrlFieldPaddingCtrlLgTextBottom: { + originalToken: 'paddingCtrlLgTextBottom', + rawValue: '1px', + }, + _ctrlFieldPaddingCtrlLgTextBottomHorizontal: { + originalToken: 'paddingCtrlLgTextBottom', + rawValue: '9px', + }, + _ctrlFieldPaddingCtrlLgTextTop: { + originalToken: 'paddingCtrlLgTextTop', + rawValue: '1px', + }, + _ctrlFieldPaddingCtrlLgTextTopHorizontal: { + originalToken: 'paddingCtrlLgTextTop', + rawValue: '9px', + }, + _ctrlFieldPaddingCtrlSmTextBottom: { + f2Token: 'spacingVerticalXS', + originalToken: 'paddingCtrlSmTextBottom', + }, + _ctrlFieldPaddingCtrlSmTextTop: { + f2Token: 'spacingVerticalXS', + originalToken: 'paddingCtrlSmTextTop', + }, + _ctrlFieldPaddingCtrlTextBottom: { + f2Token: 'spacingVerticalXXS', + originalToken: 'paddingCtrlTextBottom', + }, + _ctrlFieldPaddingCtrlTextBottomHorizontal: { + f2Token: 'spacingVerticalSNudge', + originalToken: 'paddingCtrlTextBottom', + }, + _ctrlFieldPaddingCtrlTextSide: { + f2Token: 'spacingHorizontalM', + originalToken: 'paddingCtrlTextSide', + }, + _ctrlFieldPaddingCtrlTextTop: { + f2Token: 'spacingVerticalXXS', + originalToken: 'paddingCtrlTextTop', + }, + _ctrlFieldPaddingCtrlTextTopHorizontal: { + f2Token: 'spacingVerticalSNudge', + originalToken: 'paddingCtrlTextTop', + }, + _ctrlFieldStatusDangerTintForeground: { + f2Token: 'colorPaletteRedForeground1', + originalToken: 'statusDangerTintForeground', + }, + _ctrlFieldStatusSuccessTintForeground: { + f2Token: 'colorPaletteGreenForeground1', + originalToken: 'statusSuccessTintForeground', + }, + _ctrlFieldStatusWarningTintForeground: { + f2Token: 'colorPaletteDarkOrangeForeground1', + originalToken: 'statusWarningTintForeground', + }, _ctrlFocusOuterStrokeInteractive: { f2Token: 'colorTransparentStrokeInteractive', originalToken: 'ctrlFocusOuterStroke', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 69831da9f4b9b1..bf490553975cef 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -191,8 +191,10 @@ export const fluentOverrides: FluentOverrides = { foregroundCtrlOnTransparentPressed: { f2Token: 'colorNeutralForeground2BrandPressed' }, foregroundCtrlOnTransparentRest: { f2Token: 'colorNeutralForeground2' }, gapBetweenContentSmall: { rawValue: '8px' }, + gapBetweenContentXSmall: { f2Token: 'spacingVerticalXXS' }, gapBetweenCtrlDefault: { rawValue: '8px' }, gapBetweenListItem: { f2Token: 'spacingVerticalXXS' }, + gapBetweenTextSmall: { f2Token: 'spacingHorizontalXS' }, gapInsideCtrlDefault: { f2Token: 'spacingHorizontalS' }, gapInsideCtrlLgDefault: { f2Token: 'spacingHorizontalSNudge' }, gapInsideCtrlLgToLabel: { f2Token: 'spacingHorizontalS' }, @@ -331,6 +333,7 @@ export const fluentOverrides: FluentOverrides = { textRampLgLegalFontSize: { f2Token: 'fontSizeBase200' }, // React-badge uses the same as medium font size for large textRampLgLegalLineHeight: { f2Token: 'lineHeightBase200' }, // React-badge uses the same as medium line height for large textRampMetadataFontSize: { f2Token: 'fontSizeBase200' }, // should be fontSizeBase100 per Menu design + textRampMetadataLineHeight: { f2Token: 'lineHeightBase200' }, textRampReadingBodyFontSize: { f2Token: 'fontSizeBase300' }, textRampReadingBodyLineHeight: { f2Token: 'lineHeightBase300' }, textRampSectionHeaderFontSize: { f2Token: 'fontSizeBase500' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index f118e1534a81f2..ed715f95c91871 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1843,6 +1843,20 @@ export { _ctrlCheckboxIndicatorColorMixedPressed, _ctrlDialogGapBetweenContentMedium, _ctrlDividerForegroundSubtle, + _ctrlFieldForegroundCtrlNeutralSecondaryRest, + _ctrlFieldGapBetweenContentXSmall, + _ctrlFieldPaddingCtrlLgTextBottom, + _ctrlFieldPaddingCtrlLgTextBottomHorizontal, + _ctrlFieldPaddingCtrlLgTextTop, + _ctrlFieldPaddingCtrlLgTextTopHorizontal, + _ctrlFieldPaddingCtrlSmTextBottom, + _ctrlFieldPaddingCtrlSmTextTop, + _ctrlFieldPaddingCtrlTextBottom, + _ctrlFieldPaddingCtrlTextBottomHorizontal, + _ctrlFieldPaddingCtrlTextSide, + _ctrlFieldPaddingCtrlTextTop, + _ctrlFieldPaddingCtrlTextTopHorizontal, + _ctrlFieldStatusDangerTintForeground, _ctrlFocusOuterStrokeInteractive, _ctrlInputBackgroundRestDarker, _ctrlInputBackgroundRestLighter, @@ -1942,5 +1956,7 @@ export { _ctrlTreePaddingTextTop, _nullBackgroundColorHover, _nullBackgroundColorPressed, + _ctrlFieldStatusSuccessTintForeground, + _ctrlFieldStatusWarningTintForeground, } from './legacyVariant/tokens'; export { kumoSemanticTokens } from './themes/kumoTheme'; diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index 1e6712199c7199..9d17720544bf50 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -675,15 +675,20 @@ export const colorCompoundBrandStrokeHover = 'var(--colorCompoundBrandStrokeHove */ export const colorCompoundBrandStrokePressed = 'var(--colorCompoundBrandStrokePressed)'; /** - * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground4 | `colorNeutralForeground4`} design token. + * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXS | `spacingVerticalXS`} design token. * @public */ -export const colorNeutralForeground4 = 'var(--colorNeutralForeground4)'; +export const spacingVerticalXS = 'var(--spacingVerticalXS)'; /** * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalSNudge | `spacingVerticalSNudge`} design token. * @public */ export const spacingVerticalSNudge = 'var(--spacingVerticalSNudge)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground4 | `colorNeutralForeground4`} design token. + * @public + */ +export const colorNeutralForeground4 = 'var(--colorNeutralForeground4)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground3Hover | `colorNeutralForeground3Hover`} design token. * @public @@ -714,11 +719,6 @@ export const colorStatusDangerForeground1 = 'var(--colorStatusDangerForeground1) * @public */ export const spacingVerticalMNudge = 'var(--spacingVerticalMNudge)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXS | `spacingVerticalXS`} design token. - * @public - */ -export const spacingVerticalXS = 'var(--spacingVerticalXS)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke2Contrast | `colorBrandStroke2Contrast`} design token. * @public @@ -739,3 +739,8 @@ export const colorTransparentBackgroundHover = 'var(--colorTransparentBackground * @public */ export const colorTransparentBackgroundPressed = 'var(--colorTransparentBackgroundPressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteDarkOrangeForeground1 | `colorPaletteDarkOrangeForeground1`} design token. + * @public + */ +export const colorPaletteDarkOrangeForeground1 = 'var(--colorPaletteDarkOrangeForeground1)'; diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 5d3ca589d7b82a..d14f0dc8b24c51 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -50,8 +50,11 @@ import { backgroundCtrlBrandHoverRaw, backgroundCtrlBrandPressedRaw, gapBetweenContentMediumRaw, - backgroundCtrlNeutralRestRaw, foregroundCtrlNeutralSecondaryRestRaw, + gapBetweenContentXSmallRaw, + paddingCtrlLgTextTopRaw, + paddingCtrlSmTextTopRaw, + backgroundCtrlNeutralRestRaw, backgroundCtrlSubtleHoverRaw, backgroundCtrlSubtlePressedRaw, paddingCtrlHorizontalDefaultRaw, @@ -115,22 +118,23 @@ import { colorCompoundBrandForeground1, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, + spacingVerticalXS, + spacingVerticalXXS, + spacingVerticalSNudge, + spacingHorizontalM, colorTransparentStrokeInteractive, colorNeutralBackground3, colorNeutralForeground4, - spacingVerticalSNudge, fontSizeBase200, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, shadow16, spacingVerticalM, colorStatusDangerForeground1, - spacingHorizontalM, spacingVerticalS, spacingVerticalMNudge, lineHeightBase300, colorNeutralForegroundDisabled, - spacingVerticalXS, colorBrandStroke2Contrast, colorBrandStroke1, fontSizeBase400, @@ -140,9 +144,9 @@ import { colorNeutralForeground2Hover, colorNeutralForeground2Pressed, spacingHorizontalMNudge, - spacingVerticalXXS, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, + colorPaletteDarkOrangeForeground1, } from '../legacy/tokens'; import { backgroundCtrlSubtleRestRaw, @@ -167,6 +171,8 @@ import { backgroundCtrlActiveBrandRestRaw, backgroundCtrlActiveBrandHoverRaw, backgroundCtrlActiveBrandPressedRaw, + paddingCtrlLgTextBottomRaw, + paddingCtrlSmTextBottomRaw, foregroundCtrlOnSubtleHoverRaw, foregroundCtrlNeutralPrimaryHoverRaw, foregroundCtrlOnSubtlePressedRaw, @@ -618,6 +624,104 @@ export const _ctrlDialogGapBetweenContentMedium = `var(${gapBetweenContentMedium * please use foregroundCtrlHintDefault instead. */ export const _ctrlDividerForegroundSubtle = `var(${foregroundCtrlHintDefaultRaw}, var(${nullColorRaw}, ${colorNeutralForeground3}))`; +/** + * This is a legacy variant for foregroundCtrlNeutralSecondaryRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundCtrlNeutralSecondaryRest instead. + */ +export const _ctrlFieldForegroundCtrlNeutralSecondaryRest = `var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralForeground3})`; +/** + * This is a legacy variant for gapBetweenContentXSmall to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use gapBetweenContentXSmall instead. + */ +export const _ctrlFieldGapBetweenContentXSmall = `var(${gapBetweenContentXSmallRaw}, ${spacingVerticalXS})`; +/** + * This is a legacy variant for paddingCtrlLgTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlLgTextBottom instead. + */ +export const _ctrlFieldPaddingCtrlLgTextBottom = `var(${paddingCtrlLgTextBottomRaw}, var(${paddingCtrlLgTextTopRaw}, 1px))`; +/** + * This is a legacy variant for paddingCtrlLgTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlLgTextBottom instead. + */ +export const _ctrlFieldPaddingCtrlLgTextBottomHorizontal = `var(${paddingCtrlLgTextBottomRaw}, var(${paddingCtrlLgTextTopRaw}, 9px))`; +/** + * This is a legacy variant for paddingCtrlLgTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlLgTextTop instead. + */ +export const _ctrlFieldPaddingCtrlLgTextTop = `var(${paddingCtrlLgTextTopRaw}, 1px)`; +/** + * This is a legacy variant for paddingCtrlLgTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlLgTextTop instead. + */ +export const _ctrlFieldPaddingCtrlLgTextTopHorizontal = `var(${paddingCtrlLgTextTopRaw}, 9px)`; +/** + * This is a legacy variant for paddingCtrlSmTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlSmTextBottom instead. + */ +export const _ctrlFieldPaddingCtrlSmTextBottom = `var(${paddingCtrlSmTextBottomRaw}, var(${paddingCtrlSmTextTopRaw}, ${spacingVerticalXS}))`; +/** + * This is a legacy variant for paddingCtrlSmTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlSmTextTop instead. + */ +export const _ctrlFieldPaddingCtrlSmTextTop = `var(${paddingCtrlSmTextTopRaw}, ${spacingVerticalXS})`; +/** + * This is a legacy variant for paddingCtrlTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextBottom instead. + */ +export const _ctrlFieldPaddingCtrlTextBottom = `var(${paddingCtrlTextBottomRaw}, var(${paddingCtrlTextTopRaw}, ${spacingVerticalXXS}))`; +/** + * This is a legacy variant for paddingCtrlTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextBottom instead. + */ +export const _ctrlFieldPaddingCtrlTextBottomHorizontal = `var(${paddingCtrlTextBottomRaw}, var(${paddingCtrlTextTopRaw}, ${spacingVerticalSNudge}))`; +/** + * This is a legacy variant for paddingCtrlTextSide to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextSide instead. + */ +export const _ctrlFieldPaddingCtrlTextSide = `var(${paddingCtrlTextSideRaw}, ${spacingHorizontalM})`; +/** + * This is a legacy variant for paddingCtrlTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextTop instead. + */ +export const _ctrlFieldPaddingCtrlTextTop = `var(${paddingCtrlTextTopRaw}, ${spacingVerticalXXS})`; +/** + * This is a legacy variant for paddingCtrlTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextTop instead. + */ +export const _ctrlFieldPaddingCtrlTextTopHorizontal = `var(${paddingCtrlTextTopRaw}, ${spacingVerticalSNudge})`; +/** + * This is a legacy variant for statusDangerTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusDangerTintForeground instead. + */ +export const _ctrlFieldStatusDangerTintForeground = `var(${statusDangerTintForegroundRaw}, ${colorPaletteRedForeground1})`; /** * This is a legacy variant for ctrlFocusOuterStroke to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. @@ -1311,3 +1415,17 @@ export const _nullBackgroundColorHover = `var(${nullColorRaw}, ${colorTransparen * please use nullColor instead. */ export const _nullBackgroundColorPressed = `var(${nullColorRaw}, ${colorTransparentBackgroundPressed})`; +/** + * This is a legacy variant for statusSuccessTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusSuccessTintForeground instead. + */ +export const _ctrlFieldStatusSuccessTintForeground = `var(${statusSuccessTintForegroundRaw}, ${colorPaletteGreenForeground1})`; +/** + * This is a legacy variant for statusWarningTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusWarningTintForeground instead. + */ +export const _ctrlFieldStatusWarningTintForeground = `var(${statusWarningTintForegroundRaw}, ${colorPaletteDarkOrangeForeground1})`; diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index c3127444097cc8..33bf954821c14b 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -93,6 +93,7 @@ import { lineHeightBase100, fontSizeBase400, fontWeightSemibold, + spacingHorizontalXS, spacingVerticalXXS, strokeWidthThin, strokeWidthThicker, @@ -445,7 +446,7 @@ export const textRampItemHeaderLineHeight = `var(${textRampItemHeaderLineHeightR export const textRampItemBodyFontSize = `var(${textRampItemBodyFontSizeRaw}, var(${textGlobalBody3FontSizeRaw}, ${fontSizeBase300}))`; export const textRampItemBodyLineHeight = `var(${textRampItemBodyLineHeightRaw}, var(${textGlobalBody3LineHeightRaw}, ${lineHeightBase300}))`; export const textRampMetadataFontSize = `var(${textRampMetadataFontSizeRaw}, var(${textGlobalCaption1FontSizeRaw}, ${fontSizeBase200}))`; -export const textRampMetadataLineHeight = `var(${textRampMetadataLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}))`; +export const textRampMetadataLineHeight = `var(${textRampMetadataLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}, ${lineHeightBase200}))`; export const textRampLegalFontSize = `var(${textRampLegalFontSizeRaw}, var(${textGlobalCaption2FontSizeRaw}, ${fontSizeBase200}))`; export const textRampLegalLineHeight = `var(${textRampLegalLineHeightRaw}, var(${textGlobalCaption2LineHeightRaw}, ${lineHeightBase200}))`; export const textRampSmPageHeaderFontSize = `var(${textRampSmPageHeaderFontSizeRaw}, var(${textGlobalSubtitle1FontSizeRaw}))`; @@ -491,7 +492,7 @@ export const paddingCtrlTextBottom = `var(${paddingCtrlTextBottomRaw}, var(${pad export const paddingCtrlSmTextBottom = `var(${paddingCtrlSmTextBottomRaw}, var(${paddingCtrlSmTextTopRaw}))`; export const paddingCtrlLgTextBottom = `var(${paddingCtrlLgTextBottomRaw}, var(${paddingCtrlLgTextTopRaw}))`; export const gapBetweenCtrlNested = `var(${gapBetweenCtrlNestedRaw}, var(${paddingCtrlToNestedControlRaw}))`; -export const gapBetweenTextSmall = `var(${gapBetweenTextSmallRaw}, var(${gapBetweenContentXxSmallRaw}))`; +export const gapBetweenTextSmall = `var(${gapBetweenTextSmallRaw}, var(${gapBetweenContentXxSmallRaw}, ${spacingHorizontalXS}))`; export const gapBetweenCtrlLgNested = `var(${gapBetweenCtrlLgNestedRaw}, var(${paddingCtrlLgToNestedControlRaw}))`; export const gapBetweenTextLarge = `var(${gapBetweenTextLargeRaw}, var(${gapBetweenContentXSmallRaw}))`; export const gapBetweenCtrlSmNested = `var(${gapBetweenCtrlSmNestedRaw}, var(${paddingCtrlSmToNestedControlRaw}))`;