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 cfc67cf4e90419..af60d81c1f5a34 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 @@ -4,6 +4,31 @@ ```ts +import { ButtonState } from '@fluentui/react-button'; +import { CompoundButtonState } from '@fluentui/react-button'; +import { FluentProviderCustomStyleHooks } from '@fluentui/react-provider'; +import { MenuButtonState } from '@fluentui/react-button'; +import { SplitButtonState } from '@fluentui/react-button'; +import { ToggleButtonState } from '@fluentui/react-button'; + +// @public (undocumented) +export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks; + +// @public (undocumented) +export const useSemanticButtonStyles: (_state: unknown) => ButtonState; + +// @public (undocumented) +export const useSemanticCompoundButtonStyles: (_state: unknown) => CompoundButtonState; + +// @public (undocumented) +export const useSemanticMenuButtonStyles: (_state: unknown) => MenuButtonState; + +// @public (undocumented) +export const useSemanticSplitButtonStyles: (_state: unknown) => SplitButtonState; + +// @public (undocumented) +export const useSemanticToggleButtonStyles: (_state: unknown) => ToggleButtonState; + // (No @packageDocumentation comment for this package) ``` diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/index.ts new file mode 100644 index 00000000000000..bf8519b4370574 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/index.ts @@ -0,0 +1,5 @@ +export { useSemanticButtonStyles } from './useSemanticButtonStyles.styles'; +export { useSemanticToggleButtonStyles } from './useSemanticToggleButtonStyles.styles'; +export { useSemanticSplitButtonStyles } from './useSemanticSplitButtonStyles.styles'; +export { useSemanticMenuButtonStyles } from './useSemanticMenuButtonStyles.styles'; +export { useSemanticCompoundButtonStyles } from './useSemanticCompoundButtonStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticButtonStyles.styles.ts new file mode 100644 index 00000000000000..41e0f6d04a374f --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticButtonStyles.styles.ts @@ -0,0 +1,835 @@ +'use client'; + +import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import { tokens } from '@fluentui/react-theme'; +import { shorthands, makeStyles, makeResetStyles, mergeClasses } from '@griffel/react'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { buttonClassNames, type ButtonState } from '@fluentui/react-button'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const iconSpacingVar = '--fui-Button__icon--spacing'; + +const buttonSpacingTopSmallWithIcon = `max(1px, calc(${semanticTokens.groupButtonSmallPaddingTop} - 2px))`; +const buttonSpacingBottomSmallWithIcon = `max(1px, calc(${semanticTokens.groupButtonSmallPaddingBottom} - 2px))`; +const buttonSpacingLargeBottomWithIcon = `max(0px, calc(${semanticTokens.groupButtonLargePaddingBottom} - 1px))`; +const buttonSpacingLargeTopWithIcon = `max(0px, calc(${semanticTokens.groupButtonLargePaddingTop} - 1px))`; + +const paddingSmHorizontalNoIcon = `calc(${semanticTokens.groupButtonSmallPaddingHorizontal} + ${semanticTokens.groupButtonMediumTextPaddingHorizontal})`; +const paddingHorizontalNoIcon = `calc(${semanticTokens.groupButtonMediumPaddingHorizontal} + ${semanticTokens.groupButtonMediumTextPaddingHorizontal})`; +const paddingLgHorizontalNoIcon = `calc(${semanticTokens.groupButtonLargePaddingHorizontal} + ${semanticTokens.groupButtonMediumTextPaddingHorizontal})`; + +/* Firefox has box shadow sizing issue at some zoom levels + * this will ensure the inset boxShadow is always uniform + * without affecting other browser platforms + */ +const boxShadowStrokeWidthThinMoz = `calc(${semanticTokens.groupFocusInnerStrokewidth} + 0.25px)`; + +const useRootBaseClassName = makeResetStyles({ + alignItems: 'center', + boxSizing: 'border-box', + display: 'inline-flex', + justifyContent: 'center', + textDecorationLine: 'none', + verticalAlign: 'middle', + + margin: 0, + overflow: 'hidden', + + backgroundColor: semanticTokens.groupButtonNeutralBackground, + color: semanticTokens.groupButtonNeutralTextForeground, + border: `${semanticTokens.groupButtonStrokewidth} solid ${semanticTokens.groupButtonNeutralStroke}`, + borderRadius: semanticTokens.groupButtonMediumCorner, + + fontFamily: semanticTokens.groupButtonTextFontfamily, + outlineStyle: 'none', + + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonNeutralIconForeground, + }, + + ':hover': { + backgroundColor: semanticTokens.groupButtonNeutralBackgroundHover, + borderColor: semanticTokens.groupButtonNeutralStrokeHover, + color: semanticTokens.groupButtonNeutralTextForegroundHover, + cursor: 'pointer', + borderRadius: semanticTokens.groupButtonMediumCornerHover, + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonNeutralIconForegroundHover, + }, + }, + + ':hover:active': { + backgroundColor: semanticTokens.groupButtonNeutralBackgroundPressed, + borderColor: semanticTokens.groupButtonNeutralStrokePressed, + color: semanticTokens.groupButtonNeutralTextForegroundPressed, + borderRadius: semanticTokens.groupButtonMediumCornerPressed, + outlineStyle: 'none', + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonNeutralIconForegroundPressed, + }, + }, + + padding: `${semanticTokens.groupButtonMediumPaddingTop} ${paddingHorizontalNoIcon} ${semanticTokens.groupButtonMediumPaddingBottom} ${paddingHorizontalNoIcon}`, + minWidth: semanticTokens.groupButtonMediumMinwidth, + minHeight: semanticTokens.groupButtonMediumMinheight, + + fontSize: semanticTokens.groupButtonMediumTextFontsize, + fontWeight: semanticTokens.groupButtonMediumTextFontweight, + lineHeight: semanticTokens.groupButtonMediumTextLineheight, + + // Transition styles + // TODO: Motion semantic tokens are still in definition phase, refactor these later + transitionDuration: tokens.durationFaster, + transitionProperty: 'background, border, color', + transitionTimingFunction: tokens.curveEasyEase, + + '@media screen and (prefers-reduced-motion: reduce)': { + transitionDuration: '0.01ms', + }, + + // High contrast styles + + '@media (forced-colors: active)': { + ':focus': { + borderColor: 'ButtonText', + }, + + ':hover': { + backgroundColor: 'HighlightText', + borderColor: 'Highlight', + color: 'Highlight', + forcedColorAdjust: 'none', + }, + + ':hover:active': { + backgroundColor: 'HighlightText', + borderColor: 'Highlight', + color: 'Highlight', + forcedColorAdjust: 'none', + }, + }, + + // Focus styles + ...createCustomFocusIndicatorStyle({ + borderColor: semanticTokens.groupFocusInnerStroke, + borderRadius: semanticTokens.groupButtonMediumCorner, + borderWidth: '1px', + outline: `${semanticTokens.groupFocusOuterStrokewidth} solid ${semanticTokens.groupFocusOuterStroke}`, + boxShadow: `0 0 0 ${semanticTokens.groupFocusInnerStrokewidth} ${semanticTokens.groupFocusInnerStroke} + inset + `, + zIndex: 1, + }), + + // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642) + '@supports (-moz-appearance:button)': { + ...createCustomFocusIndicatorStyle({ + boxShadow: `0 0 0 ${boxShadowStrokeWidthThinMoz} ${semanticTokens.groupFocusInnerStroke} + inset + `, + }), + }, +}); + +const useIconBaseClassName = makeResetStyles({ + alignItems: 'center', + display: 'inline-flex', + justifyContent: 'center', + + fontSize: semanticTokens.groupButtonMediumIconSize, + height: semanticTokens.groupButtonMediumIconSize, + width: semanticTokens.groupButtonMediumIconSize, + + [iconSpacingVar]: `calc(${semanticTokens.groupButtonMediumGap} + ${semanticTokens.groupButtonMediumTextPaddingHorizontal})`, +}); + +const useRootStyles = makeStyles({ + // Appearance variations + outline: { + backgroundColor: semanticTokens.groupButtonOutlineBackground, + border: `${semanticTokens.groupButtonStrokewidth} solid ${semanticTokens.groupButtonOutlineStroke}`, + color: semanticTokens.groupButtonOutlineTextForeground, + + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonOutlineIconForeground, + }, + + ':hover': { + backgroundColor: semanticTokens.groupButtonOutlineBackgroundHover, + border: `${semanticTokens.groupButtonStrokewidth} solid ${semanticTokens.groupButtonOutlineStrokeHover}`, + color: semanticTokens.groupButtonOutlineTextForegroundHover, + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonOutlineIconForegroundHover, + }, + }, + + ':hover:active': { + backgroundColor: semanticTokens.groupButtonOutlineBackgroundPressed, + border: `${semanticTokens.groupButtonStrokewidth} solid ${semanticTokens.groupButtonOutlineStrokePressed}`, + color: semanticTokens.groupButtonOutlineTextForegroundPressed, + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonOutlineIconForegroundPressed, + }, + }, + }, + + primary: { + backgroundColor: semanticTokens.groupButtonPrimaryBackground, + ...shorthands.borderColor(semanticTokens.groupButtonPrimaryStroke), + color: semanticTokens.groupButtonPrimaryTextForeground, + boxShadow: semanticTokens.groupButtonPrimaryShadow, + + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonPrimaryIconForegroundPressed, + }, + + ':hover': { + backgroundColor: semanticTokens.groupButtonPrimaryBackgroundHover, + ...shorthands.borderColor(semanticTokens.groupButtonPrimaryStrokeHover), + color: semanticTokens.groupButtonPrimaryTextForegroundHover, + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonPrimaryIconForegroundHover, + }, + }, + + ':hover:active': { + backgroundColor: semanticTokens.groupButtonPrimaryBackgroundPressed, + ...shorthands.borderColor(semanticTokens.groupButtonPrimaryStrokePressed), + color: semanticTokens.groupButtonPrimaryTextForegroundPressed, + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonPrimaryIconForegroundPressed, + }, + }, + + '@media (forced-colors: active)': { + backgroundColor: 'Highlight', + ...shorthands.borderColor('HighlightText'), + color: 'HighlightText', + forcedColorAdjust: 'none', + + ':hover': { + backgroundColor: 'HighlightText', + ...shorthands.borderColor('Highlight'), + color: 'Highlight', + }, + + ':hover:active': { + backgroundColor: 'HighlightText', + ...shorthands.borderColor('Highlight'), + color: 'Highlight', + }, + }, + }, + secondary: { + boxShadow: semanticTokens.groupButtonNeutralShadow, + /* Other than shadow, the secondary styles are exactly the same as the base styles. */ + }, + subtle: { + backgroundColor: semanticTokens.groupButtonSubtleBackground, + ...shorthands.borderColor(semanticTokens.groupButtonSubtleStroke), + color: semanticTokens.groupButtonSubtleTextForeground, + + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonSubtleIconForeground, + }, + + ':hover': { + backgroundColor: semanticTokens.groupButtonSubtleBackgroundHover, + ...shorthands.borderColor(semanticTokens.groupButtonSubtleStrokeHover), + color: semanticTokens.groupButtonSubtleTextForegroundHover, + [`& .${iconFilledClassName}`]: { + display: 'inline', + }, + [`& .${iconRegularClassName}`]: { + display: 'none', + }, + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonSubtleIconForegroundHover, + }, + }, + + ':hover:active': { + backgroundColor: semanticTokens.groupButtonSubtleBackgroundPressed, + ...shorthands.borderColor(semanticTokens.groupButtonSubtleStrokePressed), + color: semanticTokens.groupButtonSubtleTextForegroundPressed, + [`& .${iconFilledClassName}`]: { + display: 'inline', + }, + [`& .${iconRegularClassName}`]: { + display: 'none', + }, + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonSubtleIconForegroundPressed, + }, + }, + + '@media (forced-colors: active)': { + ':hover': { + color: 'Highlight', + + [`& .${buttonClassNames.icon}`]: { + color: 'Highlight', + }, + }, + ':hover:active': { + color: 'Highlight', + + [`& .${buttonClassNames.icon}`]: { + color: 'Highlight', + }, + }, + }, + }, + transparent: { + backgroundColor: semanticTokens.groupButtonTransparentBackground, + ...shorthands.borderColor(semanticTokens.groupButtonTransparentStroke), + color: semanticTokens.groupButtonTransparentTextForeground, + + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonTransparentIconForeground, + }, + + ':hover': { + backgroundColor: semanticTokens.groupButtonTransparentBackgroundHover, + ...shorthands.borderColor(semanticTokens.groupButtonTransparentStrokeHover), + color: semanticTokens.groupButtonTransparentTextForegroundHover, + [`& .${iconFilledClassName}`]: { + display: 'inline', + }, + [`& .${iconRegularClassName}`]: { + display: 'none', + }, + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonTransparentIconForegroundHover, + }, + }, + + ':hover:active': { + backgroundColor: semanticTokens.groupButtonTransparentBackgroundPressed, + ...shorthands.borderColor(semanticTokens.groupButtonTransparentStrokePressed), + color: semanticTokens.groupButtonTransparentTextForegroundPressed, + [`& .${iconFilledClassName}`]: { + display: 'inline', + }, + [`& .${iconRegularClassName}`]: { + display: 'none', + }, + + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonTransparentIconForegroundPressed, + }, + }, + + '@media (forced-colors: active)': { + ':hover': { + backgroundColor: semanticTokens.groupButtonTransparentBackground, + color: 'Highlight', + }, + ':hover:active': { + backgroundColor: semanticTokens.groupButtonTransparentBackground, + color: 'Highlight', + }, + }, + }, + + // Shape variations + circular: { + borderRadius: semanticTokens.cornerCircular, + ':hover': { borderRadius: semanticTokens.cornerCircular }, + ':hover:active': { borderRadius: semanticTokens.cornerCircular }, + }, + rounded: { + /* The borderRadius rounded styles are handled in the size variations */ + }, + square: { + borderRadius: semanticTokens.cornerSquare, + ':hover': { borderRadius: semanticTokens.cornerSquare }, + ':hover:active': { borderRadius: semanticTokens.cornerSquare }, + }, + + // Size variations + small: { + minWidth: semanticTokens.groupButtonSmallMinwidth, + minHeight: semanticTokens.groupButtonSmallMinheight, + padding: `${semanticTokens.groupButtonSmallPaddingTop} ${paddingSmHorizontalNoIcon} ${semanticTokens.groupButtonSmallPaddingBottom} ${paddingSmHorizontalNoIcon}`, //3px + borderRadius: semanticTokens.groupButtonSmallCorner, + ':hover': { + borderRadius: semanticTokens.groupButtonSmallCornerHover, + }, + ':hover:active': { + borderRadius: semanticTokens.groupButtonSmallCornerPressed, + }, + + fontSize: semanticTokens.groupButtonSmallTextFontsize, + fontWeight: semanticTokens.groupButtonSmallTextFontweight, + lineHeight: semanticTokens.groupButtonSmallTextLineheight, + }, + smallWithIcon: { + paddingBottom: buttonSpacingBottomSmallWithIcon, + paddingTop: buttonSpacingTopSmallWithIcon, + }, + smallWithIconBefore: { + paddingRight: paddingSmHorizontalNoIcon, + paddingLeft: semanticTokens.groupButtonSmallPaddingHorizontal, + }, + smallWithIconAfter: { + paddingRight: semanticTokens.groupButtonSmallPaddingHorizontal, + paddingLeft: paddingSmHorizontalNoIcon, + }, + medium: { + /* defined in base styles */ + }, + mediumWithIconBefore: { + paddingRight: paddingHorizontalNoIcon, + paddingLeft: semanticTokens.groupButtonMediumPaddingHorizontal, + }, + mediumWithIconAfter: { + paddingRight: semanticTokens.groupButtonMediumPaddingHorizontal, + paddingLeft: paddingHorizontalNoIcon, + }, + large: { + minWidth: semanticTokens.groupButtonLargeMinwidth, + minHeight: semanticTokens.groupButtonLargeMinheight, + padding: `${semanticTokens.groupButtonLargePaddingTop} ${paddingLgHorizontalNoIcon} ${semanticTokens.groupButtonLargePaddingBottom} ${paddingLgHorizontalNoIcon}`, + borderRadius: semanticTokens.groupButtonLargeCorner, + ':hover': { + borderRadius: semanticTokens.groupButtonLargeCornerHover, + }, + ':hover:active': { + borderRadius: semanticTokens.groupButtonLargeCornerPressed, + }, + + fontSize: semanticTokens.groupButtonLargeTextFontsize, + fontWeight: semanticTokens.groupButtonLargeTextFontweight, + lineHeight: semanticTokens.groupButtonLargeTextLineheight, + }, + largeWithIcon: { + paddingBottom: buttonSpacingLargeBottomWithIcon, + paddingTop: buttonSpacingLargeTopWithIcon, + }, + largeWithIconBefore: { + paddingRight: paddingLgHorizontalNoIcon, + paddingLeft: semanticTokens.groupButtonLargePaddingHorizontal, + }, + largeWithIconAfter: { + paddingRight: semanticTokens.groupButtonLargePaddingHorizontal, + paddingLeft: paddingLgHorizontalNoIcon, + }, +}); + +const useRootDisabledStyles = makeStyles({ + // Base styles + base: { + backgroundColor: semanticTokens.groupButtonNeutralBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonNeutralStrokeDisabled), + color: semanticTokens.groupButtonNeutralTextForegroundDisabled, + borderRadius: semanticTokens.groupButtonMediumCornerDisabled, + cursor: 'not-allowed', + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonNeutralIconForegroundDisabled, + }, + + ':hover': { + backgroundColor: semanticTokens.groupButtonNeutralBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonNeutralStrokeDisabled), + color: semanticTokens.groupButtonNeutralTextForegroundDisabled, + borderRadius: semanticTokens.groupButtonMediumCornerDisabled, + + cursor: 'not-allowed', + + [`& .${iconFilledClassName}`]: { + display: 'none', + }, + [`& .${iconRegularClassName}`]: { + display: 'inline', + }, + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonNeutralIconForegroundDisabled, + }, + }, + + ':hover:active': { + backgroundColor: semanticTokens.groupButtonNeutralBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonNeutralStrokeDisabled), + color: semanticTokens.groupButtonNeutralTextForegroundDisabled, + borderRadius: semanticTokens.groupButtonMediumCornerDisabled, + + cursor: 'not-allowed', + + [`& .${iconFilledClassName}`]: { + display: 'none', + }, + [`& .${iconRegularClassName}`]: { + display: 'inline', + }, + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonNeutralIconForegroundDisabled, + }, + }, + }, + + // High contrast styles + highContrast: { + '@media (forced-colors: active)': { + backgroundColor: 'ButtonFace', + ...shorthands.borderColor('GrayText'), + color: 'GrayText', + + [`& .${buttonClassNames.icon}`]: { + color: 'GrayText', + }, + + ':focus': { + ...shorthands.borderColor('GrayText'), + }, + + ':hover': { + backgroundColor: 'ButtonFace', + ...shorthands.borderColor('GrayText'), + color: 'GrayText', + + [`& .${buttonClassNames.icon}`]: { + color: 'GrayText', + }, + }, + + ':hover:active': { + backgroundColor: 'ButtonFace', + ...shorthands.borderColor('GrayText'), + color: 'GrayText', + + [`& .${buttonClassNames.icon}`]: { + color: 'GrayText', + }, + }, + }, + }, + + // Appearance variations + outline: { + backgroundColor: semanticTokens.groupButtonOutlineBackgroundDisabled, + color: semanticTokens.groupButtonOutlineTextForegroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonOutlineStrokeDisabled), + + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonOutlineIconForegroundDisabled, + }, + ':hover': { + backgroundColor: semanticTokens.groupButtonOutlineBackgroundDisabled, + ...shorthands.borderWidth(semanticTokens.groupButtonOutlineStrokewidthHover), + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonOutlineIconForegroundDisabled, + }, + }, + + ':hover:active': { + backgroundColor: semanticTokens.groupButtonOutlineBackgroundDisabled, + ...shorthands.borderWidth(semanticTokens.groupButtonOutlineStrokewidthPressed), + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonOutlineIconForegroundDisabled, + }, + }, + }, + primary: { + backgroundColor: semanticTokens.groupButtonPrimaryBackgroundDisabled, + color: semanticTokens.groupButtonPrimaryTextForegroundDisabled, + boxShadow: semanticTokens.groupButtonPrimaryShadowDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonPrimaryStrokeDisabled), + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonPrimaryIconForegroundDisabled, + }, + + ':hover': { + ...shorthands.borderColor(semanticTokens.groupButtonPrimaryStrokeDisabled), + }, + + ':hover:active': { + ...shorthands.borderColor(semanticTokens.groupButtonPrimaryStrokeDisabled), + }, + }, + secondary: { + color: semanticTokens.groupButtonNeutralTextForegroundDisabled, + boxShadow: semanticTokens.groupButtonNeutralShadowDisabled, + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonNeutralIconForegroundDisabled, + }, + }, + subtle: { + backgroundColor: semanticTokens.groupButtonSubtleBackgroundDisabled, + color: semanticTokens.groupButtonSubtleTextForegroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonSubtleStrokeDisabled), + + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonSubtleIconForegroundDisabled, + }, + ':hover': { + backgroundColor: semanticTokens.groupButtonSubtleBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonSubtleStrokeDisabled), + }, + + ':hover:active': { + backgroundColor: semanticTokens.groupButtonSubtleBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonSubtleStrokeDisabled), + }, + }, + transparent: { + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonTransparentIconForegroundDisabled, + }, + color: semanticTokens.groupButtonTransparentTextForegroundDisabled, + backgroundColor: semanticTokens.groupButtonTransparentBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonTransparentStrokeDisabled), + + ':hover': { + backgroundColor: semanticTokens.groupButtonTransparentBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonTransparentStrokeDisabled), + }, + + ':hover:active': { + backgroundColor: semanticTokens.groupButtonTransparentBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonTransparentStrokeDisabled), + }, + }, + small: { + borderRadius: semanticTokens.groupButtonSmallCornerDisabled, + ':hover': { + borderRadius: semanticTokens.groupButtonSmallCornerDisabled, + }, + ':hover:active': { + borderRadius: semanticTokens.groupButtonSmallCornerDisabled, + }, + }, + medium: { + // Defined in base styles + }, + large: { + borderRadius: semanticTokens.groupButtonLargeCornerDisabled, + ':hover': { + borderRadius: semanticTokens.groupButtonLargeCornerDisabled, + }, + ':hover:active': { + borderRadius: semanticTokens.groupButtonLargeCornerDisabled, + }, + }, +}); + +const useRootFocusStyles = makeStyles({ + // Shape variations + circular: createCustomFocusIndicatorStyle({ borderRadius: semanticTokens.cornerCircular }), + rounded: { + /* The rounded styles are exactly the same as the base styles. */ + }, + square: createCustomFocusIndicatorStyle({ borderRadius: semanticTokens.cornerSquare }), + // Primary styles + primary: { + ...createCustomFocusIndicatorStyle({ + ...shorthands.borderColor(semanticTokens.groupFocusInnerStroke), + boxShadow: `${semanticTokens.groupButtonPrimaryShadow}, ${tokens.shadow2}, 0 0 0 ${semanticTokens.groupFocusInnerStrokewidth} ${semanticTokens.groupFocusInnerStroke} inset, 0 0 0 ${semanticTokens.groupFocusOuterStrokewidth} ${semanticTokens.groupFocusOnbrandStroke} inset`, + ':hover': { + boxShadow: `${semanticTokens.groupButtonPrimaryShadow}, ${tokens.shadow2}, 0 0 0 ${semanticTokens.groupFocusOuterStrokewidth} ${semanticTokens.groupFocusInnerStroke} inset`, + ...shorthands.borderColor(semanticTokens.groupFocusOnbrandStrokeHover), + }, + }), + + // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642) + '@supports (-moz-appearance:button)': { + ...createCustomFocusIndicatorStyle({ + // TODO: Replace shadow2 with semantic shadow + boxShadow: `${semanticTokens.groupButtonPrimaryShadow}, ${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${semanticTokens.groupFocusInnerStroke} inset, 0 0 0 ${semanticTokens.groupFocusOuterStrokewidth} ${semanticTokens.groupFocusOnbrandStroke} inset`, + ':hover': { + boxShadow: `${semanticTokens.groupButtonPrimaryShadow}, ${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${semanticTokens.groupFocusOnbrandStrokeHover} inset`, + }, + }), + }, + }, + primaryDisabled: { + ...createCustomFocusIndicatorStyle({ + ...shorthands.borderColor(semanticTokens.groupFocusInnerStroke), + boxShadow: `${semanticTokens.groupButtonPrimaryShadowDisabled}, ${tokens.shadow2}, 0 0 0 ${semanticTokens.groupFocusInnerStrokewidth} ${semanticTokens.groupFocusInnerStroke} inset, 0 0 0 ${semanticTokens.groupFocusOuterStrokewidth} ${semanticTokens.groupFocusOnbrandStroke} inset`, + ':hover': { + boxShadow: `${semanticTokens.groupButtonPrimaryShadowDisabled}, ${tokens.shadow2}, 0 0 0 ${semanticTokens.groupFocusOuterStrokewidth} ${semanticTokens.groupFocusInnerStroke} inset`, + ...shorthands.borderColor(semanticTokens.groupFocusOnbrandStrokeHover), + }, + }), + + // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642) + '@supports (-moz-appearance:button)': { + ...createCustomFocusIndicatorStyle({ + // TODO: Replace shadow2 with semantic shadow + boxShadow: `${semanticTokens.groupButtonPrimaryShadowDisabled}, ${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${semanticTokens.groupFocusInnerStroke} inset, 0 0 0 ${semanticTokens.groupFocusOuterStrokewidth} ${semanticTokens.groupFocusOnbrandStroke} inset`, + ':hover': { + boxShadow: `${semanticTokens.groupButtonPrimaryShadowDisabled}, ${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${semanticTokens.groupFocusOnbrandStrokeHover} inset`, + }, + }), + }, + }, + secondary: { + ...createCustomFocusIndicatorStyle({ + ...shorthands.borderColor(semanticTokens.groupFocusInnerStroke), + borderRadius: semanticTokens.groupButtonMediumCorner, + ...shorthands.borderWidth('1px'), + outline: `${semanticTokens.groupFocusOuterStrokewidth} solid ${semanticTokens.groupFocusOuterStroke}`, + boxShadow: `${semanticTokens.groupButtonNeutralShadow}, 0 0 0 ${semanticTokens.groupFocusInnerStrokewidth} ${semanticTokens.groupFocusInnerStroke} + inset + `, + zIndex: 1, + }), + + // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642) + '@supports (-moz-appearance:button)': { + ...createCustomFocusIndicatorStyle({ + boxShadow: `${semanticTokens.groupButtonNeutralShadow}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${semanticTokens.groupFocusInnerStroke} + inset + `, + }), + }, + }, + secondaryDisabled: { + ...createCustomFocusIndicatorStyle({ + ...shorthands.borderColor(semanticTokens.groupFocusInnerStroke), + borderRadius: semanticTokens.groupButtonMediumCorner, + ...shorthands.borderWidth('1px'), + outline: `${semanticTokens.groupFocusOuterStrokewidth} solid ${semanticTokens.groupFocusOuterStroke}`, + boxShadow: `${semanticTokens.groupButtonNeutralShadowDisabled}, 0 0 0 ${semanticTokens.groupFocusInnerStrokewidth} ${semanticTokens.groupFocusInnerStroke} + inset + `, + zIndex: 1, + }), + + // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642) + '@supports (-moz-appearance:button)': { + ...createCustomFocusIndicatorStyle({ + boxShadow: `${semanticTokens.groupButtonNeutralShadowDisabled}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${semanticTokens.groupFocusInnerStroke} + inset + `, + }), + }, + }, + // Size variations + small: createCustomFocusIndicatorStyle({ + borderRadius: `calc(${semanticTokens.groupButtonSmallCorner} - ${semanticTokens.groupFocusOuterStrokewidth})`, + }), + medium: { + /* defined in base styles */ + }, + large: createCustomFocusIndicatorStyle({ + borderRadius: `calc(${semanticTokens.groupButtonLargeCorner} + ${semanticTokens.groupFocusOuterStrokewidth})`, + }), +}); + +const useRootIconOnlyStyles = makeStyles({ + // Size variations + small: { + padding: `${semanticTokens.groupButtonSmallIcononlyPadding}`, + minWidth: '24px', + maxWidth: 'unset', + }, + medium: { + padding: `${semanticTokens.groupButtonMediumIcononlyPadding}`, + minWidth: '32px', + maxWidth: 'unset', + }, + large: { + padding: `${semanticTokens.groupButtonLargeIcononlyPadding}`, + minWidth: '40px', + maxWidth: 'unset', + }, +}); + +const useIconStyles = makeStyles({ + // Size variations + small: { + fontSize: semanticTokens.groupButtonSmallIconSize, + height: semanticTokens.groupButtonSmallIconSize, + width: semanticTokens.groupButtonSmallIconSize, + + [iconSpacingVar]: `calc(${semanticTokens.groupButtonSmallGap} + ${semanticTokens.groupButtonSmallTextPaddingHorizontal})`, + }, + medium: { + /* defined in base styles */ + }, + large: { + fontSize: semanticTokens.groupButtonLargeIconSize, + height: semanticTokens.groupButtonLargeIconSize, + width: semanticTokens.groupButtonLargeIconSize, + //spacingHorizontalSNudge + [iconSpacingVar]: `calc(${semanticTokens.groupButtonLargeGap} + ${semanticTokens.groupButtonLargeTextPaddingHorizontal})`, + }, + + // Icon position variations + before: { + marginRight: `var(${iconSpacingVar})`, + }, + after: { + marginLeft: `var(${iconSpacingVar})`, + }, +}); + +export const useSemanticButtonStyles = (_state: unknown): ButtonState => { + 'use no memo'; + + const state = _state as ButtonState; + + const rootBaseClassName = useRootBaseClassName(); + const iconBaseClassName = useIconBaseClassName(); + + const rootStyles = useRootStyles(); + const rootDisabledStyles = useRootDisabledStyles(); + const rootFocusStyles = useRootFocusStyles(); + const rootIconOnlyStyles = useRootIconOnlyStyles(); + const iconStyles = useIconStyles(); + + const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state; + + state.root.className = mergeClasses( + state.root.className, + buttonClassNames.root, + rootBaseClassName, + + appearance && rootStyles[appearance], + + rootStyles[size], + icon && size === 'medium' && iconPosition === 'after' && rootStyles.mediumWithIconAfter, + icon && size === 'medium' && iconPosition === 'before' && rootStyles.mediumWithIconBefore, + icon && size === 'small' && rootStyles.smallWithIcon, + icon && size === 'small' && iconPosition === 'after' && rootStyles.smallWithIconAfter, + icon && size === 'small' && iconPosition === 'before' && rootStyles.smallWithIconBefore, + icon && size === 'large' && rootStyles.largeWithIcon, + icon && size === 'large' && iconPosition === 'after' && rootStyles.largeWithIconAfter, + icon && size === 'large' && iconPosition === 'before' && rootStyles.largeWithIconBefore, + rootStyles[shape], + + // Disabled styles + (disabled || disabledFocusable) && rootDisabledStyles.base, + (disabled || disabledFocusable) && rootDisabledStyles[size], + (disabled || disabledFocusable) && rootDisabledStyles.highContrast, + appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], + + // Focus styles + appearance === 'primary' && rootFocusStyles.primary, + appearance === 'secondary' && rootFocusStyles.secondary, + (disabled || disabledFocusable) && appearance === 'primary' && rootFocusStyles.primaryDisabled, + (disabled || disabledFocusable) && appearance === 'secondary' && rootFocusStyles.secondaryDisabled, + rootFocusStyles[size], + rootFocusStyles[shape], + + // Icon-only styles + iconOnly && rootIconOnlyStyles[size], + + getSlotClassNameProp_unstable(state.root), + ); + + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + buttonClassNames.icon, + iconBaseClassName, + !!state.root.children && iconStyles[iconPosition], + iconStyles[size], + getSlotClassNameProp_unstable(state.icon), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticCompoundButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticCompoundButtonStyles.styles.ts new file mode 100644 index 00000000000000..a4f830a7e3f816 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticCompoundButtonStyles.styles.ts @@ -0,0 +1,409 @@ +'use client'; + +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { mergeClasses, makeStyles } from '@griffel/react'; +import { useSemanticButtonStyles } from './useSemanticButtonStyles.styles'; +import { compoundButtonClassNames, type CompoundButtonState } from '@fluentui/react-button'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const iconSpacingVar = '--fui-Button__icon--spacing'; +const useRootStyles = makeStyles({ + // Base styles + base: { + height: 'auto', + + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonNeutralTextSecondaryForeground, + }, + + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonNeutralTextSecondaryForegroundHover, + }, + }, + + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonNeutralTextSecondaryForegroundPressed, + }, + }, + }, + + // High contrast styles + highContrast: { + '@media (forced-colors: active)': { + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: 'Highlight', + }, + }, + + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: 'Highlight', + }, + }, + }, + }, + + // Appearance variations + outline: { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonOutlineTextSecondaryForeground, + }, + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonOutlineTextSecondaryForegroundHover, + }, + }, + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonOutlineTextSecondaryForegroundPressed, + }, + }, + }, + primary: { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonPrimaryTextSecondaryForeground, + }, + + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonPrimaryTextSecondaryForegroundHover, + }, + }, + + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonPrimaryTextSecondaryForegroundPressed, + }, + }, + + '@media (forced-colors: active)': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: 'HighlightText', + }, + }, + }, + secondary: { + /* The secondary styles are exactly the same as the base styles. */ + }, + subtle: { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonSubtleTextSecondaryForeground, + }, + + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonSubtleTextSecondaryForegroundHover, + }, + }, + + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonSubtleTextSecondaryForegroundPressed, + }, + }, + + '@media (forced-colors: active)': { + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: 'Canvas', + }, + }, + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: 'Canvas', + }, + }, + }, + }, + transparent: { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonTransparentTextSecondaryForeground, + }, + + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonTransparentTextSecondaryForegroundHover, + }, + }, + + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonTransparentTextSecondaryForegroundPressed, + }, + }, + }, + + // Size variations + small: { + padding: `${semanticTokens.ctrlCompoundbuttonSmallPaddingTop} + ${semanticTokens.ctrlCompoundbuttonSmallPaddingHorizontal} + ${semanticTokens.ctrlCompoundbuttonSmallPaddingBottom} + ${semanticTokens.ctrlCompoundbuttonSmallPaddingHorizontal}`, + + // Small compound button uses medium text styles + fontSize: semanticTokens.groupButtonMediumTextFontsize, + lineHeight: semanticTokens.groupButtonMediumTextLineheight, + }, + medium: { + padding: `${semanticTokens.ctrlCompoundbuttonMediumPaddingTop} + ${semanticTokens.ctrlCompoundbuttonMediumPaddingHorizontal} + ${semanticTokens.ctrlCompoundbuttonMediumPaddingBottom} + ${semanticTokens.ctrlCompoundbuttonMediumPaddingHorizontal}`, + + fontSize: semanticTokens.groupButtonMediumTextFontsize, + lineHeight: semanticTokens.groupButtonMediumTextLineheight, + }, + large: { + padding: `${semanticTokens.ctrlCompoundbuttonLargePaddingTop} + ${semanticTokens.ctrlCompoundbuttonLargePaddingHorizontal} + ${semanticTokens.ctrlCompoundbuttonLargePaddingBottom} + ${semanticTokens.ctrlCompoundbuttonLargePaddingHorizontal}`, + + fontSize: semanticTokens.groupButtonLargeTextFontsize, + lineHeight: semanticTokens.groupButtonLargeTextLineheight, + }, + + // Disabled high contrast styles + disabledHighContrast: { + '@media (forced-colors: active)': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: 'GrayText', + }, + + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: 'GrayText', + }, + }, + + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: 'GrayText', + }, + }, + }, + }, +}); + +const useDisabledStyles = makeStyles({ + base: { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonNeutralTextSecondaryForegroundDisabled, + }, + + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonNeutralTextSecondaryForegroundDisabled, + }, + }, + + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonNeutralTextSecondaryForegroundDisabled, + }, + }, + }, + secondary: { + // Covered in base + }, + outline: { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonOutlineTextSecondaryForegroundDisabled, + }, + + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonOutlineTextSecondaryForegroundDisabled, + }, + }, + + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonOutlineTextSecondaryForegroundDisabled, + }, + }, + }, + transparent: { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonTransparentTextSecondaryForegroundDisabled, + }, + + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonTransparentTextSecondaryForegroundDisabled, + }, + }, + + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonTransparentTextSecondaryForegroundDisabled, + }, + }, + }, + primary: { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonPrimaryTextSecondaryForegroundDisabled, + }, + + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonPrimaryTextSecondaryForegroundDisabled, + }, + }, + + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonPrimaryTextSecondaryForegroundDisabled, + }, + }, + }, + subtle: { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonSubtleTextSecondaryForegroundDisabled, + }, + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonSubtleTextSecondaryForegroundDisabled, + }, + }, + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: semanticTokens.groupButtonSubtleTextSecondaryForegroundDisabled, + }, + }, + }, +}); + +const useRootIconOnlyStyles = makeStyles({ + // Size variations + small: { + padding: semanticTokens.ctrlCompoundbuttonSmallIcononlyPadding, + + maxWidth: 'unset', + minWidth: '48px', + }, + medium: { + padding: semanticTokens.ctrlCompoundbuttonMediumIcononlyPadding, + + maxWidth: 'unset', + minWidth: '52px', + }, + large: { + padding: semanticTokens.ctrlCompoundbuttonLargeIcononlyPadding, + + maxWidth: 'unset', + minWidth: '56px', + }, +}); + +const useIconStyles = makeStyles({ + // Base styles + base: { + fontSize: semanticTokens.ctrlCompoundbuttonIconSize, + height: semanticTokens.ctrlCompoundbuttonIconSize, + width: semanticTokens.ctrlCompoundbuttonIconSize, + [iconSpacingVar]: semanticTokens.ctrlCompoundbuttonGap, + }, +}); + +const useContentContainerStyles = makeStyles({ + // Base styles + base: { + display: 'flex', + flexDirection: 'column', + textAlign: 'left', + }, +}); + +const useSecondaryContentStyles = makeStyles({ + // Base styles + base: { + fontSize: semanticTokens.groupButtonMediumTextSecondaryFontsize, + lineHeight: semanticTokens.groupButtonMediumTextSecondaryLineheight, + fontWeight: semanticTokens.groupButtonMediumTextSecondaryFontweight, + }, + + // Size variations + small: { + fontSize: semanticTokens.groupButtonSmallTextSecondaryFontsize, + lineHeight: semanticTokens.groupButtonSmallTextSecondaryLineheight, + fontWeight: semanticTokens.groupButtonSmallTextSecondaryFontweight, + }, + medium: { + // Covered by base + }, + large: { + fontSize: semanticTokens.groupButtonLargeTextSecondaryFontsize, + lineHeight: semanticTokens.groupButtonLargeTextSecondaryLineheight, + fontWeight: semanticTokens.groupButtonLargeTextSecondaryFontweight, + }, +}); + +export const useSemanticCompoundButtonStyles = (_state: unknown): CompoundButtonState => { + 'use no memo'; + + const state = _state as CompoundButtonState; + + const rootStyles = useRootStyles(); + const disabledStyles = useDisabledStyles(); + const rootIconOnlyStyles = useRootIconOnlyStyles(); + const iconStyles = useIconStyles(); + const contentContainerStyles = useContentContainerStyles(); + const secondaryContentStyles = useSecondaryContentStyles(); + + const { appearance, disabled, disabledFocusable, iconOnly, size } = state; + + useSemanticButtonStyles(state); + + state.root.className = mergeClasses( + state.root.className, + compoundButtonClassNames.root, + + // Root styles + rootStyles.base, + rootStyles.highContrast, + appearance && rootStyles[appearance], + rootStyles[size], + + // Disabled styles + (disabled || disabledFocusable) && disabledStyles.base, + (disabled || disabledFocusable) && disabledStyles[appearance], + (disabled || disabledFocusable) && rootStyles.disabledHighContrast, + + // Icon-only styles + iconOnly && rootIconOnlyStyles[size], + + getSlotClassNameProp_unstable(state.root), + ); + + state.contentContainer.className = mergeClasses( + state.contentContainer.className, + compoundButtonClassNames.contentContainer, + contentContainerStyles.base, + getSlotClassNameProp_unstable(state.contentContainer), + ); + + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + compoundButtonClassNames.icon, + iconStyles.base, + getSlotClassNameProp_unstable(state.icon), + ); + } + + if (state.secondaryContent) { + state.secondaryContent.className = mergeClasses( + state.secondaryContent.className, + compoundButtonClassNames.secondaryContent, + secondaryContentStyles.base, + secondaryContentStyles[size], + getSlotClassNameProp_unstable(state.secondaryContent), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticMenuButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticMenuButtonStyles.styles.ts new file mode 100644 index 00000000000000..c504b5006fe85c --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticMenuButtonStyles.styles.ts @@ -0,0 +1,157 @@ +'use client'; + +import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons'; +import { mergeClasses, makeStyles, shorthands } from '@griffel/react'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { menuButtonClassNames, type MenuButtonState } from '@fluentui/react-button'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { useSemanticButtonStyles } from './useSemanticButtonStyles.styles'; + +const useRootExpandedStyles = makeStyles({ + base: { + [`& .${iconFilledClassName}`]: { + display: 'inline', + }, + [`& .${iconRegularClassName}`]: { + display: 'none', + }, + }, + + // Appearance variations + outline: { + ...shorthands.borderColor(semanticTokens.groupButtonOutlineStrokeSelected), + ...shorthands.borderWidth(semanticTokens.groupButtonOutlineStrokewidthSelected), + color: semanticTokens.groupButtonOutlineTextForegroundSelected, + + // Ensure state is retained over base hover + ':hover': { + ...shorthands.borderColor(semanticTokens.groupButtonOutlineStrokeSelected), + ...shorthands.borderWidth(semanticTokens.groupButtonOutlineStrokewidthSelected), + color: semanticTokens.groupButtonOutlineTextForegroundSelected, + }, + + // Ensure state is retained over base hover active + ':hover:active': { + ...shorthands.borderColor(semanticTokens.groupButtonOutlineStrokeSelected), + ...shorthands.borderWidth(semanticTokens.groupButtonOutlineStrokewidthSelected), + color: semanticTokens.groupButtonOutlineTextForegroundSelected, + }, + }, + primary: { + backgroundColor: semanticTokens.groupButtonPrimaryBackgroundSelected, + }, + secondary: { + backgroundColor: semanticTokens.groupButtonNeutralBackgroundSelected, + ...shorthands.borderColor(semanticTokens.groupButtonNeutralStrokeSelected), + color: semanticTokens.groupButtonNeutralTextForegroundSelected, + }, + subtle: { + backgroundColor: semanticTokens.groupButtonSubtleBackgroundSelected, + color: semanticTokens.groupButtonSubtleTextForegroundSelected, + }, + transparent: { + backgroundColor: semanticTokens.groupButtonTransparentBackgroundSelected, + color: semanticTokens.groupButtonTransparentTextForegroundSelected, + }, +}); + +const useIconExpandedStyles = makeStyles({ + // Appearance variations + outline: { + color: semanticTokens.groupButtonNeutralIconForegroundSelected, + }, + primary: { + /* The primary styles are exactly the same as the base styles. */ + }, + secondary: { + color: semanticTokens.groupButtonNeutralIconForegroundSelected, + }, + subtle: { + color: semanticTokens.groupButtonSubtleIconForegroundSelected, + }, + transparent: { + color: semanticTokens.groupButtonTransparentIconForegroundSelected, + }, + highContrast: { + // High contrast styles + '@media (forced-colors: active)': { + ':hover': { + color: 'Highlight', + }, + }, + }, +}); + +const useMenuIconStyles = makeStyles({ + base: { + lineHeight: 0, + }, + + // Size appearance + small: { + fontSize: semanticTokens.groupButtonSmallTextFontsize, + height: semanticTokens.groupButtonSmallTextFontsize, + lineHeight: semanticTokens.groupButtonSmallTextLineheight, + width: semanticTokens.groupButtonSmallTextFontsize, + }, + medium: { + // Medium uses small font size for icon + fontSize: semanticTokens.groupButtonSmallTextFontsize, + height: semanticTokens.groupButtonSmallTextFontsize, + lineHeight: semanticTokens.groupButtonSmallTextLineheight, + width: semanticTokens.groupButtonSmallTextFontsize, + }, + large: { + fontSize: semanticTokens.groupButtonLargeTextFontsize, + height: semanticTokens.groupButtonLargeTextFontsize, + lineHeight: semanticTokens.groupButtonLargeTextLineheight, + width: semanticTokens.groupButtonLargeTextFontsize, + }, + + // Not-icon only + notIconOnly: { + marginLeft: semanticTokens.groupButtonSmallGap, + }, +}); + +export const useSemanticMenuButtonStyles = (_state: unknown): MenuButtonState => { + 'use no memo'; + + const state = _state as MenuButtonState; + + const rootExpandedStyles = useRootExpandedStyles(); + const iconExpandedStyles = useIconExpandedStyles(); + const menuIconStyles = useMenuIconStyles(); + + useSemanticButtonStyles({ ...state, iconPosition: 'before' }); + + state.root.className = mergeClasses( + state.root.className, + menuButtonClassNames.root, + state.root['aria-expanded'] && rootExpandedStyles.base, + state.root['aria-expanded'] && rootExpandedStyles[state.appearance], + getSlotClassNameProp_unstable(state.root), + ); + + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + menuButtonClassNames.icon, + state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, + getSlotClassNameProp_unstable(state.icon), + ); + } + + if (state.menuIcon) { + state.menuIcon.className = mergeClasses( + state.menuIcon.className, + menuButtonClassNames.menuIcon, + menuIconStyles.base, + menuIconStyles[state.size], + !state.iconOnly && menuIconStyles.notIconOnly, + getSlotClassNameProp_unstable(state.menuIcon), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticSplitButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticSplitButtonStyles.styles.ts new file mode 100644 index 00000000000000..dc6e06c4dc588f --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticSplitButtonStyles.styles.ts @@ -0,0 +1,249 @@ +'use client'; + +import { makeStyles, mergeClasses } from '@griffel/react'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { splitButtonClassNames, type SplitButtonState } from '@fluentui/react-button'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +// WCAG minimum target size for pointer targets that are immediately adjacent to other targets: +// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum +const MIN_TARGET_SIZE = '24px'; + +const useFocusStyles = makeStyles({ + primaryActionButton: createCustomFocusIndicatorStyle({ + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + }), + + menuButton: createCustomFocusIndicatorStyle({ + borderLeftWidth: 0, + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }), +}); + +const useRootStyles = makeStyles({ + // Base styles + base: { + display: 'inline-flex', + justifyContent: 'stretch', + position: 'relative', + verticalAlign: 'middle', + + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + borderRightWidth: semanticTokens.groupButtonDividerStrokewidth, + borderRightColor: semanticTokens.groupButtonNeutralDividerStroke, + ':hover': { + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + borderRightWidth: semanticTokens.groupButtonDividerStrokewidth, + borderRightColor: semanticTokens.groupButtonNeutralDividerStroke, + }, + ':hover:active': { + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + borderRightWidth: semanticTokens.groupButtonDividerStrokewidth, + borderRightColor: semanticTokens.groupButtonNeutralDividerStroke, + }, + }, + + [`& .${splitButtonClassNames.menuButton}`]: { + borderLeftWidth: 0, + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + minWidth: MIN_TARGET_SIZE, + ':hover': { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }, + ':hover:active': { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }, + }, + }, + + // Appearance variations + outline: { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.groupButtonOutlineDividerStroke, + }, + + ':hover': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.groupButtonOutlineDividerStroke, + }, + + [`& .${splitButtonClassNames.menuButton}`]: { borderLeftWidth: 0 }, + }, + + ':hover:active': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.groupButtonOutlineDividerStroke, + }, + [`& .${splitButtonClassNames.menuButton}`]: { borderLeftWidth: 0 }, + }, + }, + primary: { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.groupButtonPrimaryDividerStroke, + }, + + ':hover': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.groupButtonPrimaryDividerStroke, + }, + }, + + ':hover:active': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.groupButtonPrimaryDividerStroke, + }, + }, + + '@media (forced-colors: active)': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: 'HighlightText', + }, + + ':hover': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: 'Highlight', + }, + }, + + ':hover:active': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: 'Highlight', + }, + }, + }, + }, + secondary: { + /* The secondary styles are exactly the same as the base styles. */ + }, + subtle: { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.groupButtonSubtleDividerStroke, + }, + + ':hover': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.groupButtonSubtleDividerStroke, + }, + }, + + ':hover:active': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.groupButtonSubtleDividerStroke, + }, + }, + }, + transparent: { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.groupButtonTransparentDividerStroke, + }, + + ':hover': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.groupButtonTransparentDividerStroke, + }, + }, + + ':hover:active': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.groupButtonTransparentDividerStroke, + }, + }, + }, + + // Shape variations + circular: {}, + rounded: {}, + square: {}, + + // Disabled styles + disabled: { + // Disabled divider shares neutral state in all appearances + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.groupButtonNeutralStrokeDisabled, + }, + + ':hover': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.groupButtonNeutralStrokeDisabled, + }, + }, + + ':hover:active': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: semanticTokens.groupButtonNeutralStrokeDisabled, + }, + }, + }, + + // Disabled high contrast styles + disabledHighContrast: { + '@media (forced-colors: active)': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: 'GrayText', + }, + + ':hover': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: 'GrayText', + }, + }, + + ':hover:active': { + [`& .${splitButtonClassNames.primaryActionButton}`]: { + borderRightColor: 'GrayText', + }, + }, + }, + }, +}); + +export const useSemanticSplitButtonStyles = (_state: unknown): SplitButtonState => { + 'use no memo'; + + const state = _state as SplitButtonState; + + const rootStyles = useRootStyles(); + const focusStyles = useFocusStyles(); + + const { appearance, disabled, disabledFocusable } = state; + + state.root.className = mergeClasses( + state.root.className, + splitButtonClassNames.root, + rootStyles.base, + appearance && rootStyles[appearance], + (disabled || disabledFocusable) && rootStyles.disabled, + (disabled || disabledFocusable) && rootStyles.disabledHighContrast, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.menuButton) { + state.menuButton.className = mergeClasses( + state.menuButton.className, + splitButtonClassNames.menuButton, + focusStyles.menuButton, + getSlotClassNameProp_unstable(state.menuButton), + ); + } + + if (state.primaryActionButton) { + state.primaryActionButton.className = mergeClasses( + state.primaryActionButton.className, + splitButtonClassNames.primaryActionButton, + focusStyles.primaryActionButton, + getSlotClassNameProp_unstable(state.primaryActionButton), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticToggleButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticToggleButtonStyles.styles.ts new file mode 100644 index 00000000000000..83f501820465b2 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Button/useSemanticToggleButtonStyles.styles.ts @@ -0,0 +1,335 @@ +'use client'; + +import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import { shorthands, mergeClasses, makeStyles } from '@griffel/react'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { buttonClassNames, type ToggleButtonState, toggleButtonClassNames } from '@fluentui/react-button'; +import { useSemanticButtonStyles } from './useSemanticButtonStyles.styles'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useRootCheckedStyles = makeStyles({ + // Base styles + base: { + backgroundColor: semanticTokens.groupButtonNeutralBackgroundSelected, + ...shorthands.borderColor(semanticTokens.groupButtonNeutralStrokeSelected), + color: semanticTokens.groupButtonNeutralTextForegroundSelected, + ...shorthands.borderWidth(semanticTokens.groupButtonStrokewidth), + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonNeutralIconForegroundSelected, + }, + + [`& .${iconFilledClassName}`]: { + display: 'inline', + }, + [`& .${iconRegularClassName}`]: { + display: 'none', + }, + + ':hover': { + backgroundColor: semanticTokens.groupButtonNeutralBackgroundHoverSelected, + ...shorthands.borderColor(semanticTokens.groupButtonNeutralStrokeHoverSelected), + color: semanticTokens.groupButtonNeutralTextForegroundHover, + }, + + ':hover:active': { + backgroundColor: semanticTokens.groupButtonNeutralBackgroundPressedSelected, + ...shorthands.borderColor(semanticTokens.groupButtonNeutralStrokePressedSelected), + color: semanticTokens.groupButtonNeutralTextForegroundPressed, + }, + }, + + // High contrast styles + highContrast: { + '@media (forced-colors: active)': { + backgroundColor: 'Highlight', + ...shorthands.borderColor('Highlight'), + color: 'HighlightText', + forcedColorAdjust: 'none', + + ':hover': { + backgroundColor: 'HighlightText', + ...shorthands.borderColor('Highlight'), + color: 'Highlight', + }, + + ':hover:active': { + backgroundColor: 'HighlightText', + ...shorthands.borderColor('Highlight'), + color: 'Highlight', + }, + + ':focus': { + border: '1px solid HighlightText', + outlineColor: 'Highlight', + }, + }, + }, + // Appearance variations + outline: { + backgroundColor: semanticTokens.groupButtonOutlineBackgroundSelected, + color: semanticTokens.groupButtonOutlineTextForegroundSelected, + ...shorthands.borderColor(semanticTokens.groupButtonOutlineStrokeSelected), + ...shorthands.borderWidth(semanticTokens.groupButtonOutlineStrokewidthSelected), + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonOutlineIconForegroundSelected, + }, + + ':hover': { + backgroundColor: semanticTokens.groupButtonOutlineBackgroundHoverSelected, + ...shorthands.borderColor(semanticTokens.groupButtonOutlineStrokeHoverSelected), + ...shorthands.borderWidth(semanticTokens.groupButtonOutlineStrokewidthSelected), + }, + + ':hover:active': { + backgroundColor: semanticTokens.groupButtonOutlineBackgroundPressedSelected, + ...shorthands.borderColor(semanticTokens.groupButtonOutlineStrokePressedSelected), + ...shorthands.borderWidth(semanticTokens.groupButtonOutlineStrokewidthSelected), + }, + + ...createCustomFocusIndicatorStyle({ + ...shorthands.borderColor(semanticTokens.groupButtonOutlineStrokeSelected), + }), + }, + primary: { + backgroundColor: semanticTokens.groupButtonPrimaryBackgroundSelected, + ...shorthands.borderColor(semanticTokens.groupButtonPrimaryStrokeSelected), + color: semanticTokens.groupButtonPrimaryTextForegroundSelected, + boxShadow: semanticTokens.groupButtonPrimaryShadowSelected, + + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonPrimaryIconForegroundSelected, + }, + + ':hover': { + backgroundColor: semanticTokens.groupButtonPrimaryBackgroundHoverSelected, + ...shorthands.borderColor(semanticTokens.groupButtonPrimaryStrokeHoverSelected), + color: semanticTokens.groupButtonPrimaryTextForegroundSelected, + }, + + ':hover:active': { + backgroundColor: semanticTokens.groupButtonPrimaryBackgroundPressedSelected, + ...shorthands.borderColor(semanticTokens.groupButtonPrimaryStrokePressedSelected), + color: semanticTokens.groupButtonPrimaryTextForegroundSelected, + }, + }, + secondary: { + boxShadow: semanticTokens.groupButtonNeutralShadowSelected, + /* The secondary styles are exactly the same as the base styles. */ + }, + subtle: { + backgroundColor: semanticTokens.groupButtonSubtleBackgroundSelected, + ...shorthands.borderColor(semanticTokens.groupButtonSubtleStrokeSelected), + color: semanticTokens.groupButtonSubtleTextForegroundSelected, + + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonSubtleIconForegroundSelected, + }, + + ':hover': { + backgroundColor: semanticTokens.groupButtonSubtleBackgroundHoverSelected, + ...shorthands.borderColor(semanticTokens.groupButtonSubtleStrokeHoverSelected), + color: semanticTokens.groupButtonSubtleTextForegroundHover, + }, + + ':hover:active': { + backgroundColor: semanticTokens.groupButtonSubtleBackgroundPressedSelected, + ...shorthands.borderColor(semanticTokens.groupButtonSubtleStrokePressedSelected), + color: semanticTokens.groupButtonSubtleTextForegroundPressed, + }, + }, + transparent: { + backgroundColor: semanticTokens.groupButtonTransparentBackgroundSelected, + ...shorthands.borderColor(semanticTokens.groupButtonTransparentStrokeSelected), + color: semanticTokens.groupButtonTransparentTextForegroundSelected, + [`& .${buttonClassNames.icon}`]: { + color: semanticTokens.groupButtonTransparentIconForegroundSelected, + }, + + ':hover': { + backgroundColor: semanticTokens.groupButtonTransparentBackgroundHoverSelected, + ...shorthands.borderColor(semanticTokens.groupButtonTransparentStrokeHoverSelected), + color: semanticTokens.groupButtonTransparentTextForegroundHover, + }, + + ':hover:active': { + backgroundColor: semanticTokens.groupButtonTransparentBackgroundPressedSelected, + ...shorthands.borderColor(semanticTokens.groupButtonTransparentStrokePressedSelected), + color: semanticTokens.groupButtonTransparentTextForegroundPressed, + }, + }, +}); + +const useRootDisabledStyles = makeStyles({ + // Base styles + base: { + backgroundColor: semanticTokens.groupButtonNeutralBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonNeutralStrokeDisabled), + color: semanticTokens.groupButtonNeutralTextForegroundDisabled, + + ':hover': { + backgroundColor: semanticTokens.groupButtonNeutralBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonNeutralStrokeDisabled), + color: semanticTokens.groupButtonNeutralTextForegroundDisabled, + }, + + ':hover:active': { + backgroundColor: semanticTokens.groupButtonNeutralBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonNeutralStrokeDisabled), + color: semanticTokens.groupButtonNeutralTextForegroundDisabled, + }, + }, + + // Appearance variations + outline: { + backgroundColor: semanticTokens.groupButtonOutlineBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonOutlineStrokeDisabled), + color: semanticTokens.groupButtonOutlineTextForegroundDisabled, + + ':hover': { + backgroundColor: semanticTokens.groupButtonOutlineBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonOutlineStrokeDisabled), + color: semanticTokens.groupButtonOutlineTextForegroundDisabled, + }, + + ':hover:active': { + backgroundColor: semanticTokens.groupButtonOutlineBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonOutlineStrokeDisabled), + color: semanticTokens.groupButtonOutlineTextForegroundDisabled, + }, + }, + primary: { + backgroundColor: semanticTokens.groupButtonPrimaryBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonPrimaryStrokeDisabled), + color: semanticTokens.groupButtonPrimaryTextForegroundDisabled, + + ':hover': { + backgroundColor: semanticTokens.groupButtonPrimaryBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonPrimaryStrokeDisabled), + color: semanticTokens.groupButtonPrimaryTextForegroundDisabled, + }, + + ':hover:active': { + backgroundColor: semanticTokens.groupButtonPrimaryBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonPrimaryStrokeDisabled), + color: semanticTokens.groupButtonPrimaryTextForegroundDisabled, + }, + }, + secondary: { + /* The secondary styles are exactly the same as the base styles. */ + }, + subtle: { + backgroundColor: semanticTokens.groupButtonSubtleBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonSubtleStrokeDisabled), + color: semanticTokens.groupButtonSubtleTextForegroundDisabled, + + ':hover': { + backgroundColor: semanticTokens.groupButtonSubtleBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonSubtleStrokeDisabled), + color: semanticTokens.groupButtonSubtleTextForegroundDisabled, + }, + + ':hover:active': { + backgroundColor: semanticTokens.groupButtonSubtleBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonSubtleStrokeDisabled), + color: semanticTokens.groupButtonSubtleTextForegroundDisabled, + }, + }, + transparent: { + backgroundColor: semanticTokens.groupButtonTransparentBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonTransparentStrokeDisabled), + color: semanticTokens.groupButtonTransparentTextForegroundDisabled, + + ':hover': { + backgroundColor: semanticTokens.groupButtonTransparentBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonTransparentStrokeDisabled), + color: semanticTokens.groupButtonTransparentTextForegroundDisabled, + }, + + ':hover:active': { + backgroundColor: semanticTokens.groupButtonTransparentBackgroundDisabled, + ...shorthands.borderColor(semanticTokens.groupButtonTransparentStrokeDisabled), + color: semanticTokens.groupButtonTransparentTextForegroundDisabled, + }, + }, +}); + +const useIconCheckedStyles = makeStyles({ + // High contrast styles + highContrast: { + '@media (forced-colors: active)': { + forcedColorAdjust: 'auto', + }, + }, +}); + +const usePrimaryHighContrastStyles = makeStyles({ + // Do not use primary variant high contrast styles for toggle buttons + // otherwise there isn't enough difference between on/off states + base: { + '@media (forced-colors: active)': { + backgroundColor: 'ButtonFace', + ...shorthands.borderColor('ButtonBorder'), + color: 'ButtonText', + forcedColorAdjust: 'auto', + }, + }, + + disabled: { + '@media (forced-colors: active)': { + ...shorthands.borderColor('GrayText'), + color: 'GrayText', + + ':focus': { + ...shorthands.borderColor('GrayText'), + }, + }, + }, +}); + +export const useSemanticToggleButtonStyles = (_state: unknown): ToggleButtonState => { + 'use no memo'; + + const state = _state as ToggleButtonState; + + const rootCheckedStyles = useRootCheckedStyles(); + const rootDisabledStyles = useRootDisabledStyles(); + const iconCheckedStyles = useIconCheckedStyles(); + const primaryHighContrastStyles = usePrimaryHighContrastStyles(); + + const { appearance, checked, disabled, disabledFocusable } = state; + + // Apply base styles + useSemanticButtonStyles(state); + + state.root.className = mergeClasses( + state.root.className, + toggleButtonClassNames.root, + + // Primary high contrast styles + appearance === 'primary' && primaryHighContrastStyles.base, + appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, + + // Checked styles + checked && rootCheckedStyles.base, + checked && rootCheckedStyles.highContrast, + appearance && checked && rootCheckedStyles[appearance], + + // Disabled styles + (disabled || disabledFocusable) && rootDisabledStyles.base, + appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], + + getSlotClassNameProp_unstable(state.root), + ); + + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + toggleButtonClassNames.icon, + iconCheckedStyles.highContrast, + getSlotClassNameProp_unstable(state.icon), + ); + } + + 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 new file mode 100644 index 00000000000000..d0308d27a24381 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -0,0 +1,18 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +import { FluentProviderCustomStyleHooks } from '@fluentui/react-provider'; +import { + useSemanticButtonStyles, + useSemanticCompoundButtonStyles, + useSemanticMenuButtonStyles, + useSemanticSplitButtonStyles, + useSemanticToggleButtonStyles, +} from './Button'; + +export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { + // Button styles + useButtonStyles_unstable: useSemanticButtonStyles, + useToggleButtonStyles_unstable: useSemanticToggleButtonStyles, + useSplitButtonStyles_unstable: useSemanticSplitButtonStyles, + useMenuButtonStyles_unstable: useSemanticMenuButtonStyles, + useCompoundButtonStyles_unstable: useSemanticCompoundButtonStyles, +}; 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 cb0ff5c3b541f6..9ea1b272de7154 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 @@ -1 +1,8 @@ -export {}; +export { SEMANTIC_STYLE_HOOKS } from './component-styles//semanticStyleHooks'; +export { + useSemanticButtonStyles, + useSemanticCompoundButtonStyles, + useSemanticMenuButtonStyles, + useSemanticSplitButtonStyles, + useSemanticToggleButtonStyles, +} from './component-styles//Button'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index abbd875f220e17..783f4f3c2f886c 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -4,6 +4,864 @@ ```ts +// @public (undocumented) +export const cornerCircular = "var(--smtc-corner-circular, var(--borderRadiusCircular))"; + +// @public (undocumented) +export const cornerSquare = "var(--smtc-corner-square, var(--borderRadiusNone))"; + +// @public (undocumented) +export const ctrlCompoundbuttonGap = "var(--smtc-ctrl-compoundbutton-gap, var(--spacingHorizontalM))"; + +// @public (undocumented) +export const ctrlCompoundbuttonIconSize = "var(--smtc-ctrl-compoundbutton-icon-size, 40px)"; + +// @public (undocumented) +export const ctrlCompoundbuttonLargeIcononlyPadding = "var(--smtc-ctrl-compoundbutton-large-icononly-padding, var(--spacingHorizontalS))"; + +// @public (undocumented) +export const ctrlCompoundbuttonLargeMinheight = "var(--smtc-ctrl-compoundbutton-large-minheight)"; + +// @public (undocumented) +export const ctrlCompoundbuttonLargeMinwidth = "var(--smtc-ctrl-compoundbutton-large-minwidth)"; + +// @public (undocumented) +export const ctrlCompoundbuttonLargePaddingBottom = "var(--smtc-ctrl-compoundbutton-large-padding-bottom, var(--spacingHorizontalXL))"; + +// @public (undocumented) +export const ctrlCompoundbuttonLargePaddingHorizontal = "var(--smtc-ctrl-compoundbutton-large-padding-horizontal, var(--spacingHorizontalL))"; + +// @public (undocumented) +export const ctrlCompoundbuttonLargePaddingTop = "var(--smtc-ctrl-compoundbutton-large-padding-top, 18px)"; + +// @public (undocumented) +export const ctrlCompoundbuttonMediumIcononlyPadding = "var(--smtc-ctrl-compoundbutton-medium-icononly-padding, var(--spacingHorizontalSNudge))"; + +// @public (undocumented) +export const ctrlCompoundbuttonMediumMinheight = "var(--smtc-ctrl-compoundbutton-medium-minheight)"; + +// @public (undocumented) +export const ctrlCompoundbuttonMediumMinwidth = "var(--smtc-ctrl-compoundbutton-medium-minwidth)"; + +// @public (undocumented) +export const ctrlCompoundbuttonMediumPaddingBottom = "var(--smtc-ctrl-compoundbutton-medium-padding-bottom, var(--spacingHorizontalL))"; + +// @public (undocumented) +export const ctrlCompoundbuttonMediumPaddingHorizontal = "var(--smtc-ctrl-compoundbutton-medium-padding-horizontal, var(--spacingHorizontalM))"; + +// @public (undocumented) +export const ctrlCompoundbuttonMediumPaddingTop = "var(--smtc-ctrl-compoundbutton-medium-padding-top, 14px)"; + +// @public (undocumented) +export const ctrlCompoundbuttonSmallIcononlyPadding = "var(--smtc-ctrl-compoundbutton-small-icononly-padding, var(--spacingHorizontalXS))"; + +// @public (undocumented) +export const ctrlCompoundbuttonSmallMinheight = "var(--smtc-ctrl-compoundbutton-small-minheight)"; + +// @public (undocumented) +export const ctrlCompoundbuttonSmallMinwidth = "var(--smtc-ctrl-compoundbutton-small-minwidth)"; + +// @public (undocumented) +export const ctrlCompoundbuttonSmallPaddingBottom = "var(--smtc-ctrl-compoundbutton-small-padding-bottom, var(--spacingHorizontalMNudge))"; + +// @public (undocumented) +export const ctrlCompoundbuttonSmallPaddingHorizontal = "var(--smtc-ctrl-compoundbutton-small-padding-horizontal, var(--spacingHorizontalS))"; + +// @public (undocumented) +export const ctrlCompoundbuttonSmallPaddingTop = "var(--smtc-ctrl-compoundbutton-small-padding-top, var(--spacingHorizontalS))"; + +// @public (undocumented) +export const groupButtonDividerMarginVertical = "var(--smtc-group-button-divider-margin-vertical, 0px)"; + +// @public (undocumented) +export const groupButtonDividerStrokewidth = "var(--smtc-group-button-divider-strokewidth, var(--strokeWidthThin))"; + +// @public (undocumented) +export const groupButtonLargeChevronSize = "var(--smtc-group-button-large-chevron-size)"; + +// @public (undocumented) +export const groupButtonLargeCorner = "var(--smtc-group-button-large-corner, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonLargeCornerDisabled = "var(--smtc-group-button-large-corner-disabled, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonLargeCornerHover = "var(--smtc-group-button-large-corner-hover, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonLargeCornerHoverSelected = "var(--smtc-group-button-large-corner-hover-selected, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonLargeCornerPressed = "var(--smtc-group-button-large-corner-pressed, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonLargeCornerPressedSelected = "var(--smtc-group-button-large-corner-pressed-selected, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonLargeCornerSelected = "var(--smtc-group-button-large-corner-selected, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonLargeGap = "var(--smtc-group-button-large-gap, var(--spacingHorizontalSNudge))"; + +// @public (undocumented) +export const groupButtonLargeIcononlyPadding = "var(--smtc-group-button-large-icononly-padding, 7px)"; + +// @public (undocumented) +export const groupButtonLargeIconSize = "var(--smtc-group-button-large-icon-size, 24px)"; + +// @public (undocumented) +export const groupButtonLargeMinheight = "var(--smtc-group-button-large-minheight)"; + +// @public (undocumented) +export const groupButtonLargeMinwidth = "var(--smtc-group-button-large-minwidth, 96px)"; + +// @public (undocumented) +export const groupButtonLargePaddingBottom = "var(--smtc-group-button-large-padding-bottom, var(--spacingVerticalS))"; + +// @public (undocumented) +export const groupButtonLargePaddingHorizontal = "var(--smtc-group-button-large-padding-horizontal, var(--spacingHorizontalL))"; + +// @public (undocumented) +export const groupButtonLargePaddingTop = "var(--smtc-group-button-large-padding-top, var(--spacingVerticalS))"; + +// @public (undocumented) +export const groupButtonLargeTextFontsize = "var(--smtc-group-button-large-text-fontsize, var(--fontSizeBase400))"; + +// @public (undocumented) +export const groupButtonLargeTextFontweight = "var(--smtc-group-button-large-text-fontweight, var(--fontWeightSemibold))"; + +// @public (undocumented) +export const groupButtonLargeTextFontweightSelected = "var(--smtc-group-button-large-text-fontweight-selected)"; + +// @public (undocumented) +export const groupButtonLargeTextLineheight = "var(--smtc-group-button-large-text-lineheight, var(--lineHeightBase400))"; + +// @public (undocumented) +export const groupButtonLargeTextPaddingHorizontal = "var(--smtc-group-button-large-text-padding-horizontal, 0px)"; + +// @public (undocumented) +export const groupButtonLargeTextSecondaryFontsize = "var(--smtc-group-button-large-text-secondary-fontsize, var(--fontSizeBase300))"; + +// @public (undocumented) +export const groupButtonLargeTextSecondaryFontweight = "var(--smtc-group-button-large-text-secondary-fontweight, var(--fontWeightRegular))"; + +// @public (undocumented) +export const groupButtonLargeTextSecondaryLineheight = "var(--smtc-group-button-large-text-secondary-lineheight, 100%)"; + +// @public (undocumented) +export const groupButtonMediumChevronSize = "var(--smtc-group-button-medium-chevron-size)"; + +// @public (undocumented) +export const groupButtonMediumCorner = "var(--smtc-group-button-medium-corner, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonMediumCornerDisabled = "var(--smtc-group-button-medium-corner-disabled, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonMediumCornerHover = "var(--smtc-group-button-medium-corner-hover, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonMediumCornerHoverSelected = "var(--smtc-group-button-medium-corner-hover-selected, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonMediumCornerPressed = "var(--smtc-group-button-medium-corner-pressed, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonMediumCornerPressedSelected = "var(--smtc-group-button-medium-corner-pressed-selected, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonMediumCornerSelected = "var(--smtc-group-button-medium-corner-selected, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonMediumGap = "var(--smtc-group-button-medium-gap, var(--spacingHorizontalSNudge))"; + +// @public (undocumented) +export const groupButtonMediumIcononlyPadding = "var(--smtc-group-button-medium-icononly-padding, 5px)"; + +// @public (undocumented) +export const groupButtonMediumIconSize = "var(--smtc-group-button-medium-icon-size, 20px)"; + +// @public (undocumented) +export const groupButtonMediumMinheight = "var(--smtc-group-button-medium-minheight)"; + +// @public (undocumented) +export const groupButtonMediumMinwidth = "var(--smtc-group-button-medium-minwidth, 96px)"; + +// @public (undocumented) +export const groupButtonMediumPaddingBottom = "var(--smtc-group-button-medium-padding-bottom, 5px)"; + +// @public (undocumented) +export const groupButtonMediumPaddingHorizontal = "var(--smtc-group-button-medium-padding-horizontal, var(--spacingHorizontalM))"; + +// @public (undocumented) +export const groupButtonMediumPaddingTop = "var(--smtc-group-button-medium-padding-top, 5px)"; + +// @public (undocumented) +export const groupButtonMediumTextFontsize = "var(--smtc-group-button-medium-text-fontsize, var(--fontSizeBase300))"; + +// @public (undocumented) +export const groupButtonMediumTextFontweight = "var(--smtc-group-button-medium-text-fontweight, var(--fontWeightSemibold))"; + +// @public (undocumented) +export const groupButtonMediumTextFontweightSelected = "var(--smtc-group-button-medium-text-fontweight-selected)"; + +// @public (undocumented) +export const groupButtonMediumTextLineheight = "var(--smtc-group-button-medium-text-lineheight, var(--lineHeightBase300))"; + +// @public (undocumented) +export const groupButtonMediumTextPaddingHorizontal = "var(--smtc-group-button-medium-text-padding-horizontal, 0px)"; + +// @public (undocumented) +export const groupButtonMediumTextSecondaryFontsize = "var(--smtc-group-button-medium-text-secondary-fontsize, var(--fontSizeBase200))"; + +// @public (undocumented) +export const groupButtonMediumTextSecondaryFontweight = "var(--smtc-group-button-medium-text-secondary-fontweight, var(--fontWeightRegular))"; + +// @public (undocumented) +export const groupButtonMediumTextSecondaryLineheight = "var(--smtc-group-button-medium-text-secondary-lineheight, 100%)"; + +// @public (undocumented) +export const groupButtonNeutralBackground = "var(--smtc-group-button-neutral-background, var(--colorNeutralBackground1))"; + +// @public (undocumented) +export const groupButtonNeutralBackgroundDisabled = "var(--smtc-group-button-neutral-background-disabled, var(--colorNeutralBackgroundDisabled))"; + +// @public (undocumented) +export const groupButtonNeutralBackgroundHover = "var(--smtc-group-button-neutral-background-hover, var(--colorNeutralBackground1Hover))"; + +// @public (undocumented) +export const groupButtonNeutralBackgroundHoverSelected = "var(--smtc-group-button-neutral-background-hover-selected, var(--colorNeutralBackground1Hover))"; + +// @public (undocumented) +export const groupButtonNeutralBackgroundPressed = "var(--smtc-group-button-neutral-background-pressed, var(--colorNeutralBackground1Pressed))"; + +// @public (undocumented) +export const groupButtonNeutralBackgroundPressedSelected = "var(--smtc-group-button-neutral-background-pressed-selected, var(--colorNeutralBackground1Pressed))"; + +// @public (undocumented) +export const groupButtonNeutralBackgroundSelected = "var(--smtc-group-button-neutral-background-selected, var(--colorNeutralBackground1Selected))"; + +// @public (undocumented) +export const groupButtonNeutralChevronForeground = "var(--smtc-group-button-neutral-chevron-foreground)"; + +// @public (undocumented) +export const groupButtonNeutralChevronForegroundDisabled = "var(--smtc-group-button-neutral-chevron-foreground-disabled)"; + +// @public (undocumented) +export const groupButtonNeutralChevronForegroundHover = "var(--smtc-group-button-neutral-chevron-foreground-hover)"; + +// @public (undocumented) +export const groupButtonNeutralChevronForegroundPressed = "var(--smtc-group-button-neutral-chevron-foreground-pressed)"; + +// @public (undocumented) +export const groupButtonNeutralChevronForegroundSelected = "var(--smtc-group-button-neutral-chevron-foreground-selected)"; + +// @public (undocumented) +export const groupButtonNeutralDividerStroke = "var(--smtc-group-button-neutral-divider-stroke, var(--colorNeutralStroke1))"; + +// @public (undocumented) +export const groupButtonNeutralIconForeground = "var(--smtc-group-button-neutral-icon-foreground, var(--colorNeutralForeground1))"; + +// @public (undocumented) +export const groupButtonNeutralIconForegroundDisabled = "var(--smtc-group-button-neutral-icon-foreground-disabled, var(--colorNeutralForegroundDisabled))"; + +// @public (undocumented) +export const groupButtonNeutralIconForegroundHover = "var(--smtc-group-button-neutral-icon-foreground-hover, var(--colorNeutralForeground1Hover))"; + +// @public (undocumented) +export const groupButtonNeutralIconForegroundPressed = "var(--smtc-group-button-neutral-icon-foreground-pressed, var(--colorNeutralForeground1Pressed))"; + +// @public (undocumented) +export const groupButtonNeutralIconForegroundSelected = "var(--smtc-group-button-neutral-icon-foreground-selected, var(--colorNeutralForeground1Selected))"; + +// @public (undocumented) +export const groupButtonNeutralShadow = "var(--smtc-group-button-neutral-shadow, 0 0 0 transparent)"; + +// @public (undocumented) +export const groupButtonNeutralShadowDisabled = "var(--smtc-group-button-neutral-shadow-disabled, 0 0 0 transparent)"; + +// @public (undocumented) +export const groupButtonNeutralShadowDisabledSelected = "var(--smtc-group-button-neutral-shadow-disabled-selected)"; + +// @public (undocumented) +export const groupButtonNeutralShadowSelected = "var(--smtc-group-button-neutral-shadow-selected, 0 0 0 transparent)"; + +// @public (undocumented) +export const groupButtonNeutralStroke = "var(--smtc-group-button-neutral-stroke, var(--colorNeutralStroke1))"; + +// @public (undocumented) +export const groupButtonNeutralStrokeDisabled = "var(--smtc-group-button-neutral-stroke-disabled, var(--colorNeutralStrokeDisabled))"; + +// @public (undocumented) +export const groupButtonNeutralStrokeHover = "var(--smtc-group-button-neutral-stroke-hover, var(--colorNeutralStroke1Hover))"; + +// @public (undocumented) +export const groupButtonNeutralStrokeHoverSelected = "var(--smtc-group-button-neutral-stroke-hover-selected, var(--colorNeutralStroke1Hover))"; + +// @public (undocumented) +export const groupButtonNeutralStrokePressed = "var(--smtc-group-button-neutral-stroke-pressed, var(--colorNeutralStroke1Pressed))"; + +// @public (undocumented) +export const groupButtonNeutralStrokePressedSelected = "var(--smtc-group-button-neutral-stroke-pressed-selected, var(--colorNeutralStroke1Pressed))"; + +// @public (undocumented) +export const groupButtonNeutralStrokeSelected = "var(--smtc-group-button-neutral-stroke-selected, var(--colorNeutralStroke1Selected))"; + +// @public (undocumented) +export const groupButtonNeutralTextForeground = "var(--smtc-group-button-neutral-text-foreground, var(--colorNeutralForeground1))"; + +// @public (undocumented) +export const groupButtonNeutralTextForegroundDisabled = "var(--smtc-group-button-neutral-text-foreground-disabled, var(--colorNeutralForegroundDisabled))"; + +// @public (undocumented) +export const groupButtonNeutralTextForegroundHover = "var(--smtc-group-button-neutral-text-foreground-hover, var(--colorNeutralForeground1Hover))"; + +// @public (undocumented) +export const groupButtonNeutralTextForegroundPressed = "var(--smtc-group-button-neutral-text-foreground-pressed, var(--colorNeutralForeground1Pressed))"; + +// @public (undocumented) +export const groupButtonNeutralTextForegroundSelected = "var(--smtc-group-button-neutral-text-foreground-selected, var(--colorNeutralForeground1Selected))"; + +// @public (undocumented) +export const groupButtonNeutralTextSecondaryForeground = "var(--smtc-group-button-neutral-text-secondary-foreground, var(--colorNeutralForeground2))"; + +// @public (undocumented) +export const groupButtonNeutralTextSecondaryForegroundDisabled = "var(--smtc-group-button-neutral-text-secondary-foreground-disabled, var(--colorNeutralForegroundDisabled))"; + +// @public (undocumented) +export const groupButtonNeutralTextSecondaryForegroundHover = "var(--smtc-group-button-neutral-text-secondary-foreground-hover, var(--colorNeutralForeground2Hover))"; + +// @public (undocumented) +export const groupButtonNeutralTextSecondaryForegroundPressed = "var(--smtc-group-button-neutral-text-secondary-foreground-pressed, var(--colorNeutralForeground2Pressed))"; + +// @public (undocumented) +export const groupButtonOutlineBackground = "var(--smtc-group-button-outline-background, var(--colorTransparentBackground))"; + +// @public (undocumented) +export const groupButtonOutlineBackgroundDisabled = "var(--smtc-group-button-outline-background-disabled, var(--colorTransparentBackground))"; + +// @public (undocumented) +export const groupButtonOutlineBackgroundHover = "var(--smtc-group-button-outline-background-hover, var(--colorTransparentBackgroundHover))"; + +// @public (undocumented) +export const groupButtonOutlineBackgroundHoverSelected = "var(--smtc-group-button-outline-background-hover-selected, var(--colorTransparentBackgroundHover))"; + +// @public (undocumented) +export const groupButtonOutlineBackgroundPressed = "var(--smtc-group-button-outline-background-pressed, var(--colorTransparentBackgroundPressed))"; + +// @public (undocumented) +export const groupButtonOutlineBackgroundPressedSelected = "var(--smtc-group-button-outline-background-pressed-selected, var(--colorTransparentBackgroundPressed))"; + +// @public (undocumented) +export const groupButtonOutlineBackgroundSelected = "var(--smtc-group-button-outline-background-selected, var(--colorTransparentBackgroundSelected))"; + +// @public (undocumented) +export const groupButtonOutlineChevronForeground = "var(--smtc-group-button-outline-chevron-foreground)"; + +// @public (undocumented) +export const groupButtonOutlineChevronForegroundDisabled = "var(--smtc-group-button-outline-chevron-foreground-disabled)"; + +// @public (undocumented) +export const groupButtonOutlineChevronForegroundHover = "var(--smtc-group-button-outline-chevron-foreground-hover)"; + +// @public (undocumented) +export const groupButtonOutlineChevronForegroundPressed = "var(--smtc-group-button-outline-chevron-foreground-pressed)"; + +// @public (undocumented) +export const groupButtonOutlineChevronForegroundSelected = "var(--smtc-group-button-outline-chevron-foreground-selected)"; + +// @public (undocumented) +export const groupButtonOutlineDividerStroke = "var(--smtc-group-button-outline-divider-stroke, var(--colorNeutralStroke1))"; + +// @public (undocumented) +export const groupButtonOutlineIconForeground = "var(--smtc-group-button-outline-icon-foreground, var(--colorNeutralForeground1))"; + +// @public (undocumented) +export const groupButtonOutlineIconForegroundDisabled = "var(--smtc-group-button-outline-icon-foreground-disabled, var(--colorNeutralForegroundDisabled))"; + +// @public (undocumented) +export const groupButtonOutlineIconForegroundHover = "var(--smtc-group-button-outline-icon-foreground-hover, var(--colorNeutralForeground1Hover))"; + +// @public (undocumented) +export const groupButtonOutlineIconForegroundPressed = "var(--smtc-group-button-outline-icon-foreground-pressed, var(--colorNeutralForeground1Pressed))"; + +// @public (undocumented) +export const groupButtonOutlineIconForegroundSelected = "var(--smtc-group-button-outline-icon-foreground-selected, var(--colorNeutralForeground1Selected))"; + +// @public (undocumented) +export const groupButtonOutlineStroke = "var(--smtc-group-button-outline-stroke, var(--colorNeutralStroke1))"; + +// @public (undocumented) +export const groupButtonOutlineStrokeDisabled = "var(--smtc-group-button-outline-stroke-disabled, var(--colorNeutralStrokeDisabled))"; + +// @public (undocumented) +export const groupButtonOutlineStrokeHover = "var(--smtc-group-button-outline-stroke-hover, var(--colorNeutralStroke1Hover))"; + +// @public (undocumented) +export const groupButtonOutlineStrokeHoverSelected = "var(--smtc-group-button-outline-stroke-hover-selected, var(--colorNeutralStroke1Selected))"; + +// @public (undocumented) +export const groupButtonOutlineStrokePressed = "var(--smtc-group-button-outline-stroke-pressed, var(--colorNeutralStroke1Pressed))"; + +// @public (undocumented) +export const groupButtonOutlineStrokePressedSelected = "var(--smtc-group-button-outline-stroke-pressed-selected, var(--colorNeutralStroke1Selected))"; + +// @public (undocumented) +export const groupButtonOutlineStrokeSelected = "var(--smtc-group-button-outline-stroke-selected, var(--colorNeutralStroke1))"; + +// @public (undocumented) +export const groupButtonOutlineStrokewidth = "var(--smtc-group-button-outline-strokewidth)"; + +// @public (undocumented) +export const groupButtonOutlineStrokewidthHover = "var(--smtc-group-button-outline-strokewidth-hover, var(--strokeWidthThin))"; + +// @public (undocumented) +export const groupButtonOutlineStrokewidthPressed = "var(--smtc-group-button-outline-strokewidth-pressed, var(--strokeWidthThin))"; + +// @public (undocumented) +export const groupButtonOutlineStrokewidthSelected = "var(--smtc-group-button-outline-strokewidth-selected, var(--strokeWidthThicker))"; + +// @public (undocumented) +export const groupButtonOutlineTextForeground = "var(--smtc-group-button-outline-text-foreground, var(--colorNeutralForeground1))"; + +// @public (undocumented) +export const groupButtonOutlineTextForegroundDisabled = "var(--smtc-group-button-outline-text-foreground-disabled, var(--colorNeutralForegroundDisabled))"; + +// @public (undocumented) +export const groupButtonOutlineTextForegroundHover = "var(--smtc-group-button-outline-text-foreground-hover, var(--colorNeutralForeground1Hover))"; + +// @public (undocumented) +export const groupButtonOutlineTextForegroundPressed = "var(--smtc-group-button-outline-text-foreground-pressed, var(--colorNeutralForeground1Pressed))"; + +// @public (undocumented) +export const groupButtonOutlineTextForegroundSelected = "var(--smtc-group-button-outline-text-foreground-selected, var(--colorNeutralForeground1Selected))"; + +// @public (undocumented) +export const groupButtonOutlineTextSecondaryForeground = "var(--smtc-group-button-outline-text-secondary-foreground, var(--colorNeutralForeground2))"; + +// @public (undocumented) +export const groupButtonOutlineTextSecondaryForegroundDisabled = "var(--smtc-group-button-outline-text-secondary-foreground-disabled, var(--colorNeutralForegroundDisabled))"; + +// @public (undocumented) +export const groupButtonOutlineTextSecondaryForegroundHover = "var(--smtc-group-button-outline-text-secondary-foreground-hover, var(--colorNeutralForeground2Hover))"; + +// @public (undocumented) +export const groupButtonOutlineTextSecondaryForegroundPressed = "var(--smtc-group-button-outline-text-secondary-foreground-pressed, var(--colorNeutralForeground2Pressed))"; + +// @public (undocumented) +export const groupButtonPrimaryBackground = "var(--smtc-group-button-primary-background, var(--colorBrandBackground))"; + +// @public (undocumented) +export const groupButtonPrimaryBackgroundDisabled = "var(--smtc-group-button-primary-background-disabled, var(--colorNeutralBackgroundDisabled))"; + +// @public (undocumented) +export const groupButtonPrimaryBackgroundHover = "var(--smtc-group-button-primary-background-hover, var(--colorBrandBackgroundHover))"; + +// @public (undocumented) +export const groupButtonPrimaryBackgroundHoverSelected = "var(--smtc-group-button-primary-background-hover-selected, var(--colorBrandBackgroundHover))"; + +// @public (undocumented) +export const groupButtonPrimaryBackgroundPressed = "var(--smtc-group-button-primary-background-pressed, var(--colorBrandBackgroundPressed))"; + +// @public (undocumented) +export const groupButtonPrimaryBackgroundPressedSelected = "var(--smtc-group-button-primary-background-pressed-selected, var(--colorBrandBackgroundPressed))"; + +// @public (undocumented) +export const groupButtonPrimaryBackgroundSelected = "var(--smtc-group-button-primary-background-selected, var(--colorBrandBackgroundSelected))"; + +// @public (undocumented) +export const groupButtonPrimaryChevronForeground = "var(--smtc-group-button-primary-chevron-foreground)"; + +// @public (undocumented) +export const groupButtonPrimaryChevronForegroundDisabled = "var(--smtc-group-button-primary-chevron-foreground-disabled)"; + +// @public (undocumented) +export const groupButtonPrimaryChevronForegroundHover = "var(--smtc-group-button-primary-chevron-foreground-hover)"; + +// @public (undocumented) +export const groupButtonPrimaryChevronForegroundPressed = "var(--smtc-group-button-primary-chevron-foreground-pressed)"; + +// @public (undocumented) +export const groupButtonPrimaryChevronForegroundSelected = "var(--smtc-group-button-primary-chevron-foreground-selected)"; + +// @public (undocumented) +export const groupButtonPrimaryDividerStroke = "var(--smtc-group-button-primary-divider-stroke, var(--colorNeutralStrokeOnBrand))"; + +// @public (undocumented) +export const groupButtonPrimaryIconForeground = "var(--smtc-group-button-primary-icon-foreground, var(--colorNeutralForegroundOnBrand))"; + +// @public (undocumented) +export const groupButtonPrimaryIconForegroundDisabled = "var(--smtc-group-button-primary-icon-foreground-disabled, var(--colorNeutralForegroundDisabled))"; + +// @public (undocumented) +export const groupButtonPrimaryIconForegroundHover = "var(--smtc-group-button-primary-icon-foreground-hover, var(--colorNeutralForegroundOnBrand))"; + +// @public (undocumented) +export const groupButtonPrimaryIconForegroundPressed = "var(--smtc-group-button-primary-icon-foreground-pressed, var(--colorNeutralForegroundOnBrand))"; + +// @public (undocumented) +export const groupButtonPrimaryIconForegroundSelected = "var(--smtc-group-button-primary-icon-foreground-selected, var(--colorNeutralForegroundOnBrand))"; + +// @public (undocumented) +export const groupButtonPrimaryShadow = "var(--smtc-group-button-primary-shadow, 0 0 0 transparent)"; + +// @public (undocumented) +export const groupButtonPrimaryShadowDisabled = "var(--smtc-group-button-primary-shadow-disabled, 0 0 0 transparent)"; + +// @public (undocumented) +export const groupButtonPrimaryShadowDisabledSelected = "var(--smtc-group-button-primary-shadow-disabled-selected)"; + +// @public (undocumented) +export const groupButtonPrimaryShadowSelected = "var(--smtc-group-button-primary-shadow-selected, 0 0 0 transparent)"; + +// @public (undocumented) +export const groupButtonPrimaryStroke = "var(--smtc-group-button-primary-stroke, transparent)"; + +// @public (undocumented) +export const groupButtonPrimaryStrokeDisabled = "var(--smtc-group-button-primary-stroke-disabled, transparent)"; + +// @public (undocumented) +export const groupButtonPrimaryStrokeHover = "var(--smtc-group-button-primary-stroke-hover, transparent)"; + +// @public (undocumented) +export const groupButtonPrimaryStrokeHoverSelected = "var(--smtc-group-button-primary-stroke-hover-selected, transparent)"; + +// @public (undocumented) +export const groupButtonPrimaryStrokePressed = "var(--smtc-group-button-primary-stroke-pressed, transparent)"; + +// @public (undocumented) +export const groupButtonPrimaryStrokePressedSelected = "var(--smtc-group-button-primary-stroke-pressed-selected, transparent)"; + +// @public (undocumented) +export const groupButtonPrimaryStrokeSelected = "var(--smtc-group-button-primary-stroke-selected, transparent)"; + +// @public (undocumented) +export const groupButtonPrimaryTextForeground = "var(--smtc-group-button-primary-text-foreground, var(--colorNeutralForegroundOnBrand))"; + +// @public (undocumented) +export const groupButtonPrimaryTextForegroundDisabled = "var(--smtc-group-button-primary-text-foreground-disabled, var(--colorNeutralForegroundDisabled))"; + +// @public (undocumented) +export const groupButtonPrimaryTextForegroundHover = "var(--smtc-group-button-primary-text-foreground-hover, var(--colorNeutralForegroundOnBrand))"; + +// @public (undocumented) +export const groupButtonPrimaryTextForegroundPressed = "var(--smtc-group-button-primary-text-foreground-pressed, var(--colorNeutralForegroundOnBrand))"; + +// @public (undocumented) +export const groupButtonPrimaryTextForegroundSelected = "var(--smtc-group-button-primary-text-foreground-selected, var(--colorNeutralForegroundOnBrand))"; + +// @public (undocumented) +export const groupButtonPrimaryTextSecondaryForeground = "var(--smtc-group-button-primary-text-secondary-foreground, var(--colorNeutralForegroundOnBrand))"; + +// @public (undocumented) +export const groupButtonPrimaryTextSecondaryForegroundDisabled = "var(--smtc-group-button-primary-text-secondary-foreground-disabled, var(--colorNeutralForegroundDisabled))"; + +// @public (undocumented) +export const groupButtonPrimaryTextSecondaryForegroundHover = "var(--smtc-group-button-primary-text-secondary-foreground-hover, var(--colorNeutralForegroundOnBrand))"; + +// @public (undocumented) +export const groupButtonPrimaryTextSecondaryForegroundPressed = "var(--smtc-group-button-primary-text-secondary-foreground-pressed, var(--colorNeutralForegroundOnBrand))"; + +// @public (undocumented) +export const groupButtonSmallChevronSize = "var(--smtc-group-button-small-chevron-size)"; + +// @public (undocumented) +export const groupButtonSmallCorner = "var(--smtc-group-button-small-corner, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonSmallCornerDisabled = "var(--smtc-group-button-small-corner-disabled, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonSmallCornerHover = "var(--smtc-group-button-small-corner-hover, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonSmallCornerHoverSelected = "var(--smtc-group-button-small-corner-hover-selected, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonSmallCornerPressed = "var(--smtc-group-button-small-corner-pressed, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonSmallCornerPressedSelected = "var(--smtc-group-button-small-corner-pressed-selected, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonSmallCornerSelected = "var(--smtc-group-button-small-corner-selected, var(--borderRadiusMedium))"; + +// @public (undocumented) +export const groupButtonSmallGap = "var(--smtc-group-button-small-gap, var(--spacingHorizontalXS))"; + +// @public (undocumented) +export const groupButtonSmallIcononlyPadding = "var(--smtc-group-button-small-icononly-padding, 1px)"; + +// @public (undocumented) +export const groupButtonSmallIconSize = "var(--smtc-group-button-small-icon-size, 20px)"; + +// @public (undocumented) +export const groupButtonSmallMinheight = "var(--smtc-group-button-small-minheight)"; + +// @public (undocumented) +export const groupButtonSmallMinwidth = "var(--smtc-group-button-small-minwidth, 64px)"; + +// @public (undocumented) +export const groupButtonSmallPaddingBottom = "var(--smtc-group-button-small-padding-bottom, 3px)"; + +// @public (undocumented) +export const groupButtonSmallPaddingHorizontal = "var(--smtc-group-button-small-padding-horizontal, var(--spacingHorizontalS))"; + +// @public (undocumented) +export const groupButtonSmallPaddingTop = "var(--smtc-group-button-small-padding-top, 3px)"; + +// @public (undocumented) +export const groupButtonSmallTextFontsize = "var(--smtc-group-button-small-text-fontsize, var(--fontSizeBase200))"; + +// @public (undocumented) +export const groupButtonSmallTextFontweight = "var(--smtc-group-button-small-text-fontweight, var(--fontWeightRegular))"; + +// @public (undocumented) +export const groupButtonSmallTextFontweightSelected = "var(--smtc-group-button-small-text-fontweight-selected)"; + +// @public (undocumented) +export const groupButtonSmallTextLineheight = "var(--smtc-group-button-small-text-lineheight, var(--lineHeightBase200))"; + +// @public (undocumented) +export const groupButtonSmallTextPaddingHorizontal = "var(--smtc-group-button-small-text-padding-horizontal, 0px)"; + +// @public (undocumented) +export const groupButtonSmallTextSecondaryFontsize = "var(--smtc-group-button-small-text-secondary-fontsize, var(--fontSizeBase200))"; + +// @public (undocumented) +export const groupButtonSmallTextSecondaryFontweight = "var(--smtc-group-button-small-text-secondary-fontweight, var(--fontWeightRegular))"; + +// @public (undocumented) +export const groupButtonSmallTextSecondaryLineheight = "var(--smtc-group-button-small-text-secondary-lineheight, 100%)"; + +// @public (undocumented) +export const groupButtonStrokewidth = "var(--smtc-group-button-strokewidth, var(--strokeWidthThin))"; + +// @public (undocumented) +export const groupButtonSubtleBackground = "var(--smtc-group-button-subtle-background, var(--colorSubtleBackground))"; + +// @public (undocumented) +export const groupButtonSubtleBackgroundDisabled = "var(--smtc-group-button-subtle-background-disabled, var(--colorTransparentBackground))"; + +// @public (undocumented) +export const groupButtonSubtleBackgroundHover = "var(--smtc-group-button-subtle-background-hover, var(--colorSubtleBackgroundHover))"; + +// @public (undocumented) +export const groupButtonSubtleBackgroundHoverSelected = "var(--smtc-group-button-subtle-background-hover-selected, var(--colorSubtleBackgroundHover))"; + +// @public (undocumented) +export const groupButtonSubtleBackgroundPressed = "var(--smtc-group-button-subtle-background-pressed, var(--colorSubtleBackgroundPressed))"; + +// @public (undocumented) +export const groupButtonSubtleBackgroundPressedSelected = "var(--smtc-group-button-subtle-background-pressed-selected, var(--colorSubtleBackgroundPressed))"; + +// @public (undocumented) +export const groupButtonSubtleBackgroundSelected = "var(--smtc-group-button-subtle-background-selected, var(--colorSubtleBackgroundSelected))"; + +// @public (undocumented) +export const groupButtonSubtleChevronForeground = "var(--smtc-group-button-subtle-chevron-foreground)"; + +// @public (undocumented) +export const groupButtonSubtleChevronForegroundDisabled = "var(--smtc-group-button-subtle-chevron-foreground-disabled)"; + +// @public (undocumented) +export const groupButtonSubtleChevronForegroundHover = "var(--smtc-group-button-subtle-chevron-foreground-hover)"; + +// @public (undocumented) +export const groupButtonSubtleChevronForegroundPressed = "var(--smtc-group-button-subtle-chevron-foreground-pressed)"; + +// @public (undocumented) +export const groupButtonSubtleChevronForegroundSelected = "var(--smtc-group-button-subtle-chevron-foreground-selected)"; + +// @public (undocumented) +export const groupButtonSubtleDividerStroke = "var(--smtc-group-button-subtle-divider-stroke, transparent)"; + +// @public (undocumented) +export const groupButtonSubtleIconForeground = "var(--smtc-group-button-subtle-icon-foreground, var(--colorNeutralForeground2))"; + +// @public (undocumented) +export const groupButtonSubtleIconForegroundDisabled = "var(--smtc-group-button-subtle-icon-foreground-disabled, var(--colorNeutralForegroundDisabled))"; + +// @public (undocumented) +export const groupButtonSubtleIconForegroundHover = "var(--smtc-group-button-subtle-icon-foreground-hover, var(--colorNeutralForeground2BrandHover))"; + +// @public (undocumented) +export const groupButtonSubtleIconForegroundPressed = "var(--smtc-group-button-subtle-icon-foreground-pressed, var(--colorNeutralForeground2BrandPressed))"; + +// @public (undocumented) +export const groupButtonSubtleIconForegroundSelected = "var(--smtc-group-button-subtle-icon-foreground-selected, var(--colorNeutralForeground2BrandSelected))"; + +// @public (undocumented) +export const groupButtonSubtleStroke = "var(--smtc-group-button-subtle-stroke, transparent)"; + +// @public (undocumented) +export const groupButtonSubtleStrokeDisabled = "var(--smtc-group-button-subtle-stroke-disabled, transparent)"; + +// @public (undocumented) +export const groupButtonSubtleStrokeHover = "var(--smtc-group-button-subtle-stroke-hover, transparent)"; + +// @public (undocumented) +export const groupButtonSubtleStrokeHoverSelected = "var(--smtc-group-button-subtle-stroke-hover-selected, transparent)"; + +// @public (undocumented) +export const groupButtonSubtleStrokePressed = "var(--smtc-group-button-subtle-stroke-pressed, transparent)"; + +// @public (undocumented) +export const groupButtonSubtleStrokePressedSelected = "var(--smtc-group-button-subtle-stroke-pressed-selected, transparent)"; + +// @public (undocumented) +export const groupButtonSubtleStrokeSelected = "var(--smtc-group-button-subtle-stroke-selected, transparent)"; + +// @public (undocumented) +export const groupButtonSubtleTextForeground = "var(--smtc-group-button-subtle-text-foreground, var(--colorNeutralForeground2))"; + +// @public (undocumented) +export const groupButtonSubtleTextForegroundDisabled = "var(--smtc-group-button-subtle-text-foreground-disabled, var(--colorNeutralForegroundDisabled))"; + +// @public (undocumented) +export const groupButtonSubtleTextForegroundHover = "var(--smtc-group-button-subtle-text-foreground-hover, var(--colorNeutralForeground2Hover))"; + +// @public (undocumented) +export const groupButtonSubtleTextForegroundPressed = "var(--smtc-group-button-subtle-text-foreground-pressed, var(--colorNeutralForeground2Pressed))"; + +// @public (undocumented) +export const groupButtonSubtleTextForegroundSelected = "var(--smtc-group-button-subtle-text-foreground-selected, var(--colorNeutralForeground2Selected))"; + +// @public (undocumented) +export const groupButtonSubtleTextSecondaryForeground = "var(--smtc-group-button-subtle-text-secondary-foreground, var(--colorNeutralForeground2))"; + +// @public (undocumented) +export const groupButtonSubtleTextSecondaryForegroundDisabled = "var(--smtc-group-button-subtle-text-secondary-foreground-disabled, var(--colorNeutralForegroundDisabled))"; + +// @public (undocumented) +export const groupButtonSubtleTextSecondaryForegroundHover = "var(--smtc-group-button-subtle-text-secondary-foreground-hover, var(--colorNeutralForeground2Hover))"; + +// @public (undocumented) +export const groupButtonSubtleTextSecondaryForegroundPressed = "var(--smtc-group-button-subtle-text-secondary-foreground-pressed, var(--colorNeutralForeground2Pressed))"; + +// @public (undocumented) +export const groupButtonTextFontfamily = "var(--smtc-group-button-text-fontfamily, var(--fontFamilyBase))"; + +// @public (undocumented) +export const groupButtonTransparentBackground = "var(--smtc-group-button-transparent-background, var(--colorTransparentBackground))"; + +// @public (undocumented) +export const groupButtonTransparentBackgroundDisabled = "var(--smtc-group-button-transparent-background-disabled, var(--colorTransparentBackground))"; + +// @public (undocumented) +export const groupButtonTransparentBackgroundHover = "var(--smtc-group-button-transparent-background-hover, var(--colorTransparentBackgroundHover))"; + +// @public (undocumented) +export const groupButtonTransparentBackgroundHoverSelected = "var(--smtc-group-button-transparent-background-hover-selected, var(--colorTransparentBackgroundHover))"; + +// @public (undocumented) +export const groupButtonTransparentBackgroundPressed = "var(--smtc-group-button-transparent-background-pressed, var(--colorTransparentBackgroundPressed))"; + +// @public (undocumented) +export const groupButtonTransparentBackgroundPressedSelected = "var(--smtc-group-button-transparent-background-pressed-selected, var(--colorTransparentBackgroundPressed))"; + +// @public (undocumented) +export const groupButtonTransparentBackgroundSelected = "var(--smtc-group-button-transparent-background-selected, var(--colorTransparentBackgroundSelected))"; + +// @public (undocumented) +export const groupButtonTransparentChevronForeground = "var(--smtc-group-button-transparent-chevron-foreground)"; + +// @public (undocumented) +export const groupButtonTransparentChevronForegroundDisabled = "var(--smtc-group-button-transparent-chevron-foreground-disabled)"; + +// @public (undocumented) +export const groupButtonTransparentChevronForegroundHover = "var(--smtc-group-button-transparent-chevron-foreground-hover)"; + +// @public (undocumented) +export const groupButtonTransparentChevronForegroundPressed = "var(--smtc-group-button-transparent-chevron-foreground-pressed)"; + +// @public (undocumented) +export const groupButtonTransparentChevronForegroundSelected = "var(--smtc-group-button-transparent-chevron-foreground-selected)"; + +// @public (undocumented) +export const groupButtonTransparentDividerStroke = "var(--smtc-group-button-transparent-divider-stroke, transparent)"; + +// @public (undocumented) +export const groupButtonTransparentIconForeground = "var(--smtc-group-button-transparent-icon-foreground, var(--colorNeutralForeground2))"; + +// @public (undocumented) +export const groupButtonTransparentIconForegroundDisabled = "var(--smtc-group-button-transparent-icon-foreground-disabled, var(--colorNeutralForegroundDisabled))"; + +// @public (undocumented) +export const groupButtonTransparentIconForegroundHover = "var(--smtc-group-button-transparent-icon-foreground-hover, var(--colorNeutralForeground2BrandHover))"; + +// @public (undocumented) +export const groupButtonTransparentIconForegroundPressed = "var(--smtc-group-button-transparent-icon-foreground-pressed, var(--colorNeutralForeground2BrandPressed))"; + +// @public (undocumented) +export const groupButtonTransparentIconForegroundSelected = "var(--smtc-group-button-transparent-icon-foreground-selected, var(--colorNeutralForeground2BrandSelected))"; + +// @public (undocumented) +export const groupButtonTransparentStroke = "var(--smtc-group-button-transparent-stroke, transparent)"; + +// @public (undocumented) +export const groupButtonTransparentStrokeDisabled = "var(--smtc-group-button-transparent-stroke-disabled, transparent)"; + +// @public (undocumented) +export const groupButtonTransparentStrokeHover = "var(--smtc-group-button-transparent-stroke-hover, transparent)"; + +// @public (undocumented) +export const groupButtonTransparentStrokeHoverSelected = "var(--smtc-group-button-transparent-stroke-hover-selected, transparent)"; + +// @public (undocumented) +export const groupButtonTransparentStrokePressed = "var(--smtc-group-button-transparent-stroke-pressed, transparent)"; + +// @public (undocumented) +export const groupButtonTransparentStrokePressedSelected = "var(--smtc-group-button-transparent-stroke-pressed-selected, transparent)"; + +// @public (undocumented) +export const groupButtonTransparentStrokeSelected = "var(--smtc-group-button-transparent-stroke-selected, transparent)"; + +// @public (undocumented) +export const groupButtonTransparentTextForeground = "var(--smtc-group-button-transparent-text-foreground, var(--colorNeutralForeground2))"; + +// @public (undocumented) +export const groupButtonTransparentTextForegroundDisabled = "var(--smtc-group-button-transparent-text-foreground-disabled, var(--colorNeutralForegroundDisabled))"; + +// @public (undocumented) +export const groupButtonTransparentTextForegroundHover = "var(--smtc-group-button-transparent-text-foreground-hover, var(--colorNeutralForeground2BrandHover))"; + +// @public (undocumented) +export const groupButtonTransparentTextForegroundPressed = "var(--smtc-group-button-transparent-text-foreground-pressed, var(--colorNeutralForeground2BrandPressed))"; + +// @public (undocumented) +export const groupButtonTransparentTextForegroundSelected = "var(--smtc-group-button-transparent-text-foreground-selected, var(--colorNeutralForeground2BrandSelected))"; + +// @public (undocumented) +export const groupButtonTransparentTextSecondaryForeground = "var(--smtc-group-button-transparent-text-secondary-foreground, var(--colorNeutralForeground2))"; + +// @public (undocumented) +export const groupButtonTransparentTextSecondaryForegroundDisabled = "var(--smtc-group-button-transparent-text-secondary-foreground-disabled, var(--colorNeutralForegroundDisabled))"; + +// @public (undocumented) +export const groupButtonTransparentTextSecondaryForegroundHover = "var(--smtc-group-button-transparent-text-secondary-foreground-hover, var(--colorNeutralForeground2BrandHover))"; + +// @public (undocumented) +export const groupButtonTransparentTextSecondaryForegroundPressed = "var(--smtc-group-button-transparent-text-secondary-foreground-pressed, var(--colorNeutralForeground2BrandPressed))"; + +// @public (undocumented) +export const groupFocusInnerStroke = "var(--smtc-group-focus-inner-stroke, var(--colorStrokeFocus2))"; + +// @public (undocumented) +export const groupFocusInnerStrokewidth = "var(--smtc-group-focus-inner-strokewidth, var(--strokeWidthThin))"; + +// @public (undocumented) +export const groupFocusOnbrandStroke = "var(--smtc-group-focus-onbrand-stroke, var(--colorNeutralForegroundOnBrand))"; + +// @public (undocumented) +export const groupFocusOnbrandStrokeHover = "var(--smtc-group-focus-onbrand-stroke-hover, var(--colorStrokeFocus2))"; + +// @public (undocumented) +export const groupFocusOuterStroke = "var(--smtc-group-focus-outer-stroke, var(--colorTransparentStroke))"; + +// @public (undocumented) +export const groupFocusOuterStrokewidth = "var(--smtc-group-focus-outer-strokewidth, var(--strokeWidthThick))"; + // (No @packageDocumentation comment for this package) ``` diff --git a/packages/semantic-tokens/scripts/definitions/application/focus.ts b/packages/semantic-tokens/scripts/definitions/application/focus.ts new file mode 100644 index 00000000000000..4f6b782a628d53 --- /dev/null +++ b/packages/semantic-tokens/scripts/definitions/application/focus.ts @@ -0,0 +1,11 @@ +import { GroupPart } from '../groups.types'; // Adjust the import path as needed + +// Group focus tokens +export const focusGroup: GroupPart = { + variants: ['outer', 'inner'], + variantProperties: ['stroke', 'strokewidth'], + exceptions: [ + // onBrand is a special case where the focus stroke color is different + { variants: ['onbrand'], states: ['', 'hover'], variantStateProperties: ['stroke'] }, + ], +}; diff --git a/packages/semantic-tokens/scripts/definitions/components/button.ts b/packages/semantic-tokens/scripts/definitions/components/button.ts new file mode 100644 index 00000000000000..a414de7a6c8608 --- /dev/null +++ b/packages/semantic-tokens/scripts/definitions/components/button.ts @@ -0,0 +1,88 @@ +import { GroupPart } from '../groups.types'; + +// Compound button control tokens +export const compoundButtonGroup: GroupPart = { + coreProperties: ['icon.size', 'gap'], + scales: ['small', 'medium', 'large'], + scaleProperties: ['padding.horizontal', 'padding.top', 'padding.bottom', 'minwidth', 'minheight'], + parts: { + icononly: { + scaleProperties: ['padding'], + scales: ['small', 'medium', 'large'], + }, + }, +}; + +// Group button tokens +export const buttonGroup: GroupPart = { + coreProperties: ['strokewidth'], + variants: ['neutral', 'primary', 'outline', 'subtle', 'transparent'], + variantProperties: [], + variantStateProperties: ['background', 'stroke'], + scales: ['small', 'medium', 'large'], + scaleProperties: ['padding.horizontal', 'padding.top', 'padding.bottom', 'gap', 'minwidth', 'minheight'], + scaleStateProperties: ['corner'], + states: ['', 'hover', 'pressed', 'selected', 'hover.selected', 'pressed.selected', 'disabled'], + components: ['button'], + exceptions: [ + { + // Outline buttons may modify strokeWidth based on state, as it is their main visual element + variants: ['outline'], + states: ['', 'hover', 'pressed', 'selected'], + variantStateProperties: ['strokewidth'], + }, + { + // Shadow is only available on primary/neutral variant buttons + states: ['', 'disabled', 'selected', 'disabled.selected'], + variants: ['neutral', 'primary'], + variantStateProperties: ['shadow'], + }, + ], + parts: { + icononly: { + scaleProperties: ['padding'], + scales: ['small', 'medium', 'large'], + }, + icon: { + states: ['', 'hover', 'pressed', 'disabled', 'selected'], + scales: ['small', 'medium', 'large'], + scaleProperties: ['size'], + variants: ['neutral', 'primary', 'outline', 'subtle', 'transparent'], + variantStateProperties: ['foreground'], + }, + divider: { + coreProperties: ['strokewidth', 'margin.vertical'], + variants: ['neutral', 'primary', 'outline', 'subtle', 'transparent'], + variantProperties: ['stroke'], + }, + chevron: { + variants: ['neutral', 'primary', 'outline', 'subtle', 'transparent'], + states: ['', 'hover', 'pressed', 'selected', 'disabled'], + variantStateProperties: ['foreground'], + scales: ['small', 'medium', 'large'], + scaleProperties: ['size'], + }, + text: { + coreProperties: ['fontfamily'], + scales: ['small', 'medium', 'large'], + states: ['', 'hover', 'pressed', 'disabled', 'selected'], + variants: ['neutral', 'primary', 'outline', 'subtle', 'transparent'], + variantStateProperties: ['foreground'], + scaleProperties: ['padding.horizontal', 'fontsize', 'lineheight', 'fontweight'], + exceptions: [ + { + scales: ['small', 'medium', 'large'], + states: ['selected'], + scaleStateProperties: ['fontweight'], + }, + ], + }, + 'text.secondary': { + scales: ['small', 'medium', 'large'], + states: ['', 'hover', 'pressed', 'disabled'], + variants: ['neutral', 'primary', 'outline', 'subtle', 'transparent'], + variantStateProperties: ['foreground'], + scaleProperties: ['fontsize', 'lineheight', 'fontweight'], + }, + }, +}; diff --git a/packages/semantic-tokens/scripts/definitions/controlFallbacks.ts b/packages/semantic-tokens/scripts/definitions/controlFallbacks.ts new file mode 100644 index 00000000000000..0c04d2a4a6fa63 --- /dev/null +++ b/packages/semantic-tokens/scripts/definitions/controlFallbacks.ts @@ -0,0 +1,6 @@ +import { compoundButtonFallbacks } from './fallbacks/button'; +import { GroupFallbacks } from './fallbacks/fallbacks.types'; + +export const controlFallbacks: GroupFallbacks = { + compoundbutton: compoundButtonFallbacks, +}; diff --git a/packages/semantic-tokens/scripts/definitions/controls.ts b/packages/semantic-tokens/scripts/definitions/controls.ts new file mode 100644 index 00000000000000..a02c10dea1428b --- /dev/null +++ b/packages/semantic-tokens/scripts/definitions/controls.ts @@ -0,0 +1,13 @@ +// Make control tokens for compound button that cover: +// iconSize +// scale padding +// gap +// minWidth +// minHeight + +import { compoundButtonGroup } from './components/button'; +import { Groups } from './groups.types'; + +export const controls: Groups = { + compoundbutton: compoundButtonGroup, +}; diff --git a/packages/semantic-tokens/scripts/definitions/fallbacks/button.ts b/packages/semantic-tokens/scripts/definitions/fallbacks/button.ts new file mode 100644 index 00000000000000..75244f8d0379ab --- /dev/null +++ b/packages/semantic-tokens/scripts/definitions/fallbacks/button.ts @@ -0,0 +1,733 @@ +import { tokens } from '@fluentui/tokens'; +import { GroupFallback } from './fallbacks.types'; + +export const compoundButtonFallbacks: GroupFallback = { + ctrlCompoundbuttonIconSize: { + fluent: '40px', + }, + ctrlCompoundbuttonGap: { + fluent: tokens.spacingHorizontalM, + }, + ctrlCompoundbuttonSmallIcononlyPadding: { + fluent: tokens.spacingHorizontalXS, + }, + ctrlCompoundbuttonMediumIcononlyPadding: { + fluent: tokens.spacingHorizontalSNudge, + }, + ctrlCompoundbuttonLargeIcononlyPadding: { + fluent: tokens.spacingHorizontalS, + }, + ctrlCompoundbuttonSmallPaddingHorizontal: { + fluent: tokens.spacingHorizontalS, + }, + ctrlCompoundbuttonSmallPaddingTop: { + fluent: tokens.spacingHorizontalS, + }, + ctrlCompoundbuttonSmallPaddingBottom: { + fluent: tokens.spacingHorizontalMNudge, + }, + ctrlCompoundbuttonMediumPaddingHorizontal: { + fluent: tokens.spacingHorizontalM, + }, + ctrlCompoundbuttonMediumPaddingTop: { + fluent: '14px', + }, + ctrlCompoundbuttonMediumPaddingBottom: { + fluent: tokens.spacingHorizontalL, + }, + ctrlCompoundbuttonLargePaddingHorizontal: { + fluent: tokens.spacingHorizontalL, + }, + ctrlCompoundbuttonLargePaddingTop: { + fluent: '18px', + }, + ctrlCompoundbuttonLargePaddingBottom: { + fluent: tokens.spacingHorizontalXL, + }, +}; + +export const buttonFallbacks: GroupFallback = { + groupButtonTextFontfamily: { + fluent: tokens.fontFamilyBase, + }, + groupButtonNeutralBackground: { + fluent: tokens.colorNeutralBackground1, + }, + groupButtonNeutralBackgroundHover: { + fluent: tokens.colorNeutralBackground1Hover, + }, + groupButtonNeutralBackgroundPressed: { + fluent: tokens.colorNeutralBackground1Pressed, + }, + groupButtonNeutralBackgroundSelected: { + fluent: tokens.colorNeutralBackground1Selected, + }, + groupButtonNeutralBackgroundHoverSelected: { + fluent: tokens.colorNeutralBackground1Hover, + }, + groupButtonNeutralBackgroundPressedSelected: { + fluent: tokens.colorNeutralBackground1Pressed, + }, + groupButtonNeutralBackgroundDisabled: { + fluent: tokens.colorNeutralBackgroundDisabled, + }, + groupButtonPrimaryBackground: { + fluent: tokens.colorBrandBackground, + }, + groupButtonPrimaryBackgroundHover: { + fluent: tokens.colorBrandBackgroundHover, + }, + groupButtonPrimaryBackgroundPressed: { + fluent: tokens.colorBrandBackgroundPressed, + }, + groupButtonPrimaryBackgroundSelected: { + fluent: tokens.colorBrandBackgroundSelected, + }, + groupButtonPrimaryBackgroundHoverSelected: { + fluent: tokens.colorBrandBackgroundHover, + }, + groupButtonPrimaryBackgroundPressedSelected: { + fluent: tokens.colorBrandBackgroundPressed, + }, + groupButtonPrimaryBackgroundDisabled: { + fluent: tokens.colorNeutralBackgroundDisabled, + }, + groupButtonOutlineBackground: { + fluent: tokens.colorTransparentBackground, + }, + groupButtonOutlineBackgroundHover: { + fluent: tokens.colorTransparentBackgroundHover, + }, + groupButtonOutlineBackgroundPressed: { + fluent: tokens.colorTransparentBackgroundPressed, + }, + groupButtonOutlineBackgroundSelected: { + fluent: tokens.colorTransparentBackgroundSelected, + }, + groupButtonOutlineBackgroundHoverSelected: { + fluent: tokens.colorTransparentBackgroundHover, + }, + groupButtonOutlineBackgroundPressedSelected: { + fluent: tokens.colorTransparentBackgroundPressed, + }, + groupButtonOutlineBackgroundDisabled: { + fluent: tokens.colorTransparentBackground, + }, + groupButtonSubtleBackground: { + fluent: tokens.colorSubtleBackground, + }, + groupButtonSubtleBackgroundHover: { + fluent: tokens.colorSubtleBackgroundHover, + }, + groupButtonSubtleBackgroundPressed: { + fluent: tokens.colorSubtleBackgroundPressed, + }, + groupButtonSubtleBackgroundSelected: { + fluent: tokens.colorSubtleBackgroundSelected, + }, + groupButtonSubtleBackgroundHoverSelected: { + fluent: tokens.colorSubtleBackgroundHover, + }, + groupButtonSubtleBackgroundPressedSelected: { + fluent: tokens.colorSubtleBackgroundPressed, + }, + groupButtonSubtleBackgroundDisabled: { + fluent: tokens.colorTransparentBackground, + }, + groupButtonTransparentBackground: { + fluent: tokens.colorTransparentBackground, + }, + groupButtonTransparentBackgroundHover: { + fluent: tokens.colorTransparentBackgroundHover, + }, + groupButtonTransparentBackgroundPressed: { + fluent: tokens.colorTransparentBackgroundPressed, + }, + groupButtonTransparentBackgroundSelected: { + fluent: tokens.colorTransparentBackgroundSelected, + }, + groupButtonTransparentBackgroundHoverSelected: { + fluent: tokens.colorTransparentBackgroundHover, + }, + groupButtonTransparentBackgroundPressedSelected: { + fluent: tokens.colorTransparentBackgroundPressed, + }, + groupButtonTransparentBackgroundDisabled: { + fluent: tokens.colorTransparentBackground, + }, + groupButtonNeutralStroke: { + fluent: tokens.colorNeutralStroke1, + }, + groupButtonNeutralStrokeHover: { + fluent: tokens.colorNeutralStroke1Hover, + }, + groupButtonNeutralStrokePressed: { + fluent: tokens.colorNeutralStroke1Pressed, + }, + groupButtonNeutralStrokeSelected: { + fluent: tokens.colorNeutralStroke1Selected, + }, + groupButtonNeutralStrokeHoverSelected: { + fluent: tokens.colorNeutralStroke1Hover, + }, + groupButtonNeutralStrokePressedSelected: { + fluent: tokens.colorNeutralStroke1Pressed, + }, + groupButtonNeutralStrokeDisabled: { + fluent: tokens.colorNeutralStrokeDisabled, + }, + groupButtonPrimaryStroke: { + fluent: 'transparent', + }, + groupButtonPrimaryStrokeHover: { + fluent: 'transparent', + }, + groupButtonPrimaryStrokePressed: { + fluent: 'transparent', + }, + groupButtonPrimaryStrokeSelected: { + fluent: 'transparent', + }, + groupButtonPrimaryStrokeHoverSelected: { + fluent: 'transparent', + }, + groupButtonPrimaryStrokePressedSelected: { + fluent: 'transparent', + }, + groupButtonPrimaryStrokeDisabled: { + fluent: 'transparent', + }, + groupButtonOutlineStroke: { + fluent: tokens.colorNeutralStroke1, + }, + groupButtonOutlineStrokeHover: { + fluent: tokens.colorNeutralStroke1Hover, + }, + groupButtonOutlineStrokePressed: { + fluent: tokens.colorNeutralStroke1Pressed, + }, + groupButtonOutlineStrokeSelected: { + fluent: tokens.colorNeutralStroke1, + }, + groupButtonOutlineStrokeHoverSelected: { + fluent: tokens.colorNeutralStroke1Selected, + }, + groupButtonOutlineStrokePressedSelected: { + fluent: tokens.colorNeutralStroke1Selected, + }, + groupButtonOutlineStrokeDisabled: { + fluent: tokens.colorNeutralStrokeDisabled, + }, + groupButtonSubtleStroke: { + fluent: 'transparent', + }, + groupButtonSubtleStrokeHover: { + fluent: 'transparent', + }, + groupButtonSubtleStrokePressed: { + fluent: 'transparent', + }, + groupButtonSubtleStrokeSelected: { + fluent: 'transparent', + }, + groupButtonSubtleStrokeHoverSelected: { + fluent: 'transparent', + }, + groupButtonSubtleStrokePressedSelected: { + fluent: 'transparent', + }, + groupButtonSubtleStrokeDisabled: { + fluent: 'transparent', + }, + groupButtonTransparentStroke: { + fluent: 'transparent', + }, + groupButtonTransparentStrokeHover: { + fluent: 'transparent', + }, + groupButtonTransparentStrokePressed: { + fluent: 'transparent', + }, + groupButtonTransparentStrokeSelected: { + fluent: 'transparent', + }, + groupButtonTransparentStrokeHoverSelected: { + fluent: 'transparent', + }, + groupButtonTransparentStrokePressedSelected: { + fluent: 'transparent', + }, + groupButtonTransparentStrokeDisabled: { + fluent: 'transparent', + }, + groupButtonSmallTextFontsize: { + fluent: tokens.fontSizeBase200, + }, + groupButtonSmallTextLineheight: { + fluent: tokens.lineHeightBase200, + }, + groupButtonSmallPaddingHorizontal: { + fluent: tokens.spacingHorizontalS, + }, + groupButtonSmallPaddingTop: { + fluent: '3px', + }, + groupButtonSmallPaddingBottom: { + fluent: '3px', + }, + groupButtonMediumTextPaddingHorizontal: { fluent: '0px' }, + groupButtonLargeTextPaddingHorizontal: { fluent: '0px' }, + groupButtonSmallTextPaddingHorizontal: { fluent: '0px' }, + groupButtonSmallGap: { + fluent: tokens.spacingHorizontalXS, + }, + groupButtonSmallCorner: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonSmallCornerHover: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonSmallCornerPressed: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonSmallCornerDisabled: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonSmallCornerHoverSelected: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonSmallCornerPressedSelected: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonSmallCornerSelected: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonSmallMinwidth: { + fluent: '64px', + }, + groupButtonStrokewidth: { + fluent: tokens.strokeWidthThin, + }, + groupButtonSmallTextFontweight: { + fluent: tokens.fontWeightRegular, + }, + groupButtonMediumTextFontsize: { + fluent: tokens.fontSizeBase300, + }, + groupButtonMediumTextLineheight: { + fluent: tokens.lineHeightBase300, + }, + groupButtonMediumPaddingHorizontal: { + fluent: tokens.spacingHorizontalM, + }, + groupButtonMediumPaddingTop: { + fluent: '5px', + }, + groupButtonMediumPaddingBottom: { + fluent: '5px', + }, + groupButtonMediumGap: { + fluent: tokens.spacingHorizontalSNudge, + }, + groupButtonMediumCorner: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonMediumCornerPressed: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonMediumCornerPressedSelected: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonMediumCornerHover: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonMediumCornerHoverSelected: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonMediumCornerDisabled: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonMediumCornerSelected: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonMediumMinwidth: { + fluent: '96px', + }, + groupButtonMediumTextFontweight: { + fluent: tokens.fontWeightSemibold, + }, + groupButtonLargeTextFontsize: { + fluent: tokens.fontSizeBase400, + }, + groupButtonLargeTextLineheight: { + fluent: tokens.lineHeightBase400, + }, + groupButtonLargePaddingHorizontal: { + fluent: tokens.spacingHorizontalL, + }, + groupButtonLargePaddingTop: { + fluent: tokens.spacingVerticalS, + }, + groupButtonLargePaddingBottom: { + fluent: tokens.spacingVerticalS, + }, + groupButtonLargeGap: { + fluent: tokens.spacingHorizontalSNudge, + }, + groupButtonLargeCorner: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonLargeCornerHover: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonLargeCornerHoverSelected: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonLargeCornerPressed: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonLargeCornerPressedSelected: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonLargeCornerSelected: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonLargeCornerDisabled: { + fluent: tokens.borderRadiusMedium, + }, + groupButtonLargeMinwidth: { + fluent: '96px', + }, + groupButtonLargeTextFontweight: { + fluent: tokens.fontWeightSemibold, + }, + groupButtonSmallIconSize: { + fluent: '20px', + }, + groupButtonMediumIconSize: { + fluent: '20px', + }, + groupButtonLargeIconSize: { + fluent: '24px', + }, + groupButtonNeutralTextForeground: { + fluent: tokens.colorNeutralForeground1, + }, + groupButtonNeutralTextForegroundHover: { + fluent: tokens.colorNeutralForeground1Hover, + }, + groupButtonNeutralTextForegroundPressed: { + fluent: tokens.colorNeutralForeground1Pressed, + }, + groupButtonNeutralTextForegroundSelected: { + fluent: tokens.colorNeutralForeground1Selected, + }, + groupButtonNeutralTextForegroundDisabled: { + fluent: tokens.colorNeutralForegroundDisabled, + }, + groupButtonPrimaryTextForeground: { + fluent: tokens.colorNeutralForegroundOnBrand, + }, + groupButtonPrimaryTextForegroundHover: { + fluent: tokens.colorNeutralForegroundOnBrand, + }, + groupButtonPrimaryTextForegroundPressed: { + fluent: tokens.colorNeutralForegroundOnBrand, + }, + groupButtonPrimaryTextForegroundSelected: { + fluent: tokens.colorNeutralForegroundOnBrand, + }, + groupButtonPrimaryTextForegroundDisabled: { + fluent: tokens.colorNeutralForegroundDisabled, + }, + groupButtonOutlineTextForeground: { + fluent: tokens.colorNeutralForeground1, + }, + groupButtonOutlineTextForegroundHover: { + fluent: tokens.colorNeutralForeground1Hover, + }, + groupButtonOutlineTextForegroundPressed: { + fluent: tokens.colorNeutralForeground1Pressed, + }, + groupButtonOutlineTextForegroundSelected: { + fluent: tokens.colorNeutralForeground1Selected, + }, + groupButtonOutlineTextForegroundDisabled: { + fluent: tokens.colorNeutralForegroundDisabled, + }, + groupButtonSubtleTextForeground: { + fluent: tokens.colorNeutralForeground2, + }, + groupButtonSubtleTextForegroundHover: { + fluent: tokens.colorNeutralForeground2Hover, + }, + groupButtonSubtleTextForegroundPressed: { + fluent: tokens.colorNeutralForeground2Pressed, + }, + groupButtonSubtleTextForegroundSelected: { + fluent: tokens.colorNeutralForeground2Selected, + }, + groupButtonSubtleTextForegroundDisabled: { + fluent: tokens.colorNeutralForegroundDisabled, + }, + groupButtonTransparentTextForeground: { + fluent: tokens.colorNeutralForeground2, + }, + groupButtonTransparentTextForegroundHover: { + fluent: tokens.colorNeutralForeground2BrandHover, + }, + groupButtonTransparentTextForegroundPressed: { + fluent: tokens.colorNeutralForeground2BrandPressed, + }, + groupButtonTransparentTextForegroundSelected: { + fluent: tokens.colorNeutralForeground2BrandSelected, + }, + groupButtonTransparentTextForegroundDisabled: { + fluent: tokens.colorNeutralForegroundDisabled, + }, + groupButtonNeutralTextSecondaryForeground: { + fluent: tokens.colorNeutralForeground2, + }, + groupButtonNeutralTextSecondaryForegroundHover: { + fluent: tokens.colorNeutralForeground2Hover, + }, + groupButtonNeutralTextSecondaryForegroundPressed: { + fluent: tokens.colorNeutralForeground2Pressed, + }, + groupButtonSmallTextSecondaryFontsize: { + fluent: tokens.fontSizeBase200, + }, + groupButtonSmallTextSecondaryLineheight: { + fluent: '100%', + }, + groupButtonSmallTextSecondaryFontweight: { + fluent: tokens.fontWeightRegular, + }, + groupButtonMediumTextSecondaryFontsize: { + fluent: tokens.fontSizeBase200, + }, + groupButtonMediumTextSecondaryLineheight: { + fluent: '100%', + }, + groupButtonMediumTextSecondaryFontweight: { + fluent: tokens.fontWeightRegular, + }, + groupButtonLargeTextSecondaryFontsize: { + fluent: tokens.fontSizeBase300, + }, + groupButtonLargeTextSecondaryLineheight: { + fluent: '100%', + }, + groupButtonLargeTextSecondaryFontweight: { + fluent: tokens.fontWeightRegular, + }, + groupButtonNeutralTextSecondaryForegroundDisabled: { + fluent: tokens.colorNeutralForegroundDisabled, + }, + groupButtonPrimaryTextSecondaryForeground: { + fluent: tokens.colorNeutralForegroundOnBrand, + }, + groupButtonPrimaryTextSecondaryForegroundHover: { + fluent: tokens.colorNeutralForegroundOnBrand, + }, + groupButtonPrimaryTextSecondaryForegroundPressed: { + fluent: tokens.colorNeutralForegroundOnBrand, + }, + groupButtonPrimaryTextSecondaryForegroundSelected: { + fluent: null, + }, + groupButtonPrimaryTextSecondaryForegroundHoverSelected: { + fluent: null, + }, + groupButtonPrimaryTextSecondaryForegroundPressedSelected: { + fluent: null, + }, + groupButtonPrimaryTextSecondaryForegroundDisabled: { + fluent: tokens.colorNeutralForegroundDisabled, + }, + groupButtonOutlineTextSecondaryForeground: { + fluent: tokens.colorNeutralForeground2, + }, + groupButtonOutlineTextSecondaryForegroundHover: { + fluent: tokens.colorNeutralForeground2Hover, + }, + groupButtonOutlineTextSecondaryForegroundPressed: { + fluent: tokens.colorNeutralForeground2Pressed, + }, + groupButtonOutlineTextSecondaryForegroundSelected: { + fluent: null, + }, + groupButtonOutlineTextSecondaryForegroundHoverSelected: { + fluent: null, + }, + groupButtonOutlineTextSecondaryForegroundPressedSelected: { + fluent: null, + }, + groupButtonOutlineTextSecondaryForegroundDisabled: { + fluent: tokens.colorNeutralForegroundDisabled, + }, + groupButtonSubtleTextSecondaryForeground: { + fluent: tokens.colorNeutralForeground2, + }, + groupButtonSubtleTextSecondaryForegroundHover: { + fluent: tokens.colorNeutralForeground2Hover, + }, + groupButtonSubtleTextSecondaryForegroundPressed: { + fluent: tokens.colorNeutralForeground2Pressed, + }, + groupButtonSubtleTextSecondaryForegroundSelected: { + fluent: null, + }, + groupButtonSubtleTextSecondaryForegroundHoverSelected: { + fluent: null, + }, + groupButtonSubtleTextSecondaryForegroundPressedSelected: { + fluent: null, + }, + groupButtonSubtleTextSecondaryForegroundDisabled: { + fluent: tokens.colorNeutralForegroundDisabled, + }, + groupButtonTransparentTextSecondaryForeground: { + fluent: tokens.colorNeutralForeground2, + }, + groupButtonTransparentTextSecondaryForegroundHover: { + fluent: tokens.colorNeutralForeground2BrandHover, + }, + groupButtonTransparentTextSecondaryForegroundPressed: { + fluent: tokens.colorNeutralForeground2BrandPressed, + }, + groupButtonTransparentTextSecondaryForegroundSelected: { + fluent: null, + }, + groupButtonTransparentTextSecondaryForegroundHoverSelected: { + fluent: null, + }, + groupButtonTransparentTextSecondaryForegroundPressedSelected: { + fluent: null, + }, + groupButtonTransparentTextSecondaryForegroundDisabled: { + fluent: tokens.colorNeutralForegroundDisabled, + }, + groupButtonNeutralIconForeground: { + fluent: tokens.colorNeutralForeground1, + }, + groupButtonNeutralIconForegroundHover: { + fluent: tokens.colorNeutralForeground1Hover, + }, + groupButtonNeutralIconForegroundPressed: { + fluent: tokens.colorNeutralForeground1Pressed, + }, + groupButtonNeutralIconForegroundDisabled: { + fluent: tokens.colorNeutralForegroundDisabled, + }, + groupButtonPrimaryIconForeground: { + fluent: tokens.colorNeutralForegroundOnBrand, + }, + groupButtonPrimaryIconForegroundHover: { + fluent: tokens.colorNeutralForegroundOnBrand, + }, + groupButtonPrimaryIconForegroundPressed: { + fluent: tokens.colorNeutralForegroundOnBrand, + }, + groupButtonPrimaryIconForegroundDisabled: { + fluent: tokens.colorNeutralForegroundDisabled, + }, + groupButtonOutlineIconForeground: { + fluent: tokens.colorNeutralForeground1, + }, + groupButtonOutlineIconForegroundHover: { + fluent: tokens.colorNeutralForeground1Hover, + }, + groupButtonOutlineIconForegroundPressed: { + fluent: tokens.colorNeutralForeground1Pressed, + }, + groupButtonOutlineIconForegroundDisabled: { + fluent: tokens.colorNeutralForegroundDisabled, + }, + groupButtonSubtleIconForeground: { fluent: tokens.colorNeutralForeground2 }, + groupButtonSubtleIconForegroundHover: { fluent: tokens.colorNeutralForeground2BrandHover }, + groupButtonSubtleIconForegroundPressed: { fluent: tokens.colorNeutralForeground2BrandPressed }, + groupButtonSubtleIconForegroundDisabled: { fluent: tokens.colorNeutralForegroundDisabled }, + groupButtonTransparentIconForeground: { fluent: tokens.colorNeutralForeground2 }, + groupButtonTransparentIconForegroundHover: { fluent: tokens.colorNeutralForeground2BrandHover }, + groupButtonTransparentIconForegroundPressed: { fluent: tokens.colorNeutralForeground2BrandPressed }, + groupButtonTransparentIconForegroundDisabled: { fluent: tokens.colorNeutralForegroundDisabled }, + groupButtonOutlineStrokewidthHover: { + fluent: tokens.strokeWidthThin, + }, + groupButtonOutlineStrokewidthPressed: { + fluent: tokens.strokeWidthThin, + }, + groupButtonOutlineStrokewidthSelected: { + fluent: tokens.strokeWidthThicker, + }, + groupButtonSmallIcononlyPadding: { + fluent: '1px', + }, + groupButtonMediumIcononlyPadding: { + fluent: '5px', + }, + groupButtonLargeIcononlyPadding: { + fluent: '7px', + }, + groupButtonSubtleIconForegroundSelected: { + fluent: tokens.colorNeutralForeground2BrandSelected, + }, + groupButtonPrimaryIconForegroundSelected: { + fluent: tokens.colorNeutralForegroundOnBrand, + }, + groupButtonOutlineIconForegroundSelected: { + fluent: tokens.colorNeutralForeground1Selected, + }, + groupButtonNeutralIconForegroundSelected: { + fluent: tokens.colorNeutralForeground1Selected, + }, + groupButtonTransparentIconForegroundSelected: { + fluent: tokens.colorNeutralForeground2BrandSelected, + }, + groupButtonNeutralDividerStroke: { + fluent: tokens.colorNeutralStroke1, + }, + groupButtonDividerStrokewidth: { + fluent: tokens.strokeWidthThin, + }, + groupButtonOutlineDividerStroke: { + fluent: tokens.colorNeutralStroke1, + }, + groupButtonPrimaryDividerStroke: { + fluent: tokens.colorNeutralStrokeOnBrand, + }, + groupButtonSubtleDividerStroke: { + fluent: 'transparent', + }, + groupButtonTransparentDividerStroke: { + fluent: 'transparent', + }, + groupButtonDividerMarginVertical: { + fluent: '0px', + }, + groupButtonPrimaryShadow: { + // Shadow needs to be null-populated to work with combinations for focus + fluent: '0 0 0 transparent', + }, + groupButtonNeutralShadow: { + // Shadow needs to be null-populated to work with combinations for focus + fluent: '0 0 0 transparent', + }, + groupButtonPrimaryShadowDisabled: { + // Shadow needs to be null-populated to work with combinations for focus + fluent: '0 0 0 transparent', + }, + groupButtonNeutralShadowDisabled: { + // Shadow needs to be null-populated to work with combinations for focus + fluent: '0 0 0 transparent', + }, + groupButtonPrimaryShadowSelected: { + // Shadow needs to be null-populated to work with combinations for focus + fluent: '0 0 0 transparent', + }, + groupButtonNeutralShadowSelected: { + // Shadow needs to be null-populated to work with combinations for focus + fluent: '0 0 0 transparent', + }, +}; diff --git a/packages/semantic-tokens/scripts/definitions/fallbacks/fallbacks.types.ts b/packages/semantic-tokens/scripts/definitions/fallbacks/fallbacks.types.ts new file mode 100644 index 00000000000000..228729403146c3 --- /dev/null +++ b/packages/semantic-tokens/scripts/definitions/fallbacks/fallbacks.types.ts @@ -0,0 +1,11 @@ +export type GroupFallbacks = { + [key: string]: GroupFallback; +}; + +export type GroupFallback = { + [key: string]: { + fluent?: string | null; + generic?: string | null; + primitive?: string | null; + }; +}; diff --git a/packages/semantic-tokens/scripts/definitions/fallbacks/focus.ts b/packages/semantic-tokens/scripts/definitions/fallbacks/focus.ts new file mode 100644 index 00000000000000..49d05c5a9e4766 --- /dev/null +++ b/packages/semantic-tokens/scripts/definitions/fallbacks/focus.ts @@ -0,0 +1,23 @@ +import { tokens } from '@fluentui/tokens'; +import { GroupFallback } from './fallbacks.types'; + +export const focusFallbacks: GroupFallback = { + groupFocusOuterStroke: { + fluent: tokens.colorTransparentStroke, + }, + groupFocusInnerStroke: { + fluent: tokens.colorStrokeFocus2, + }, + groupFocusOnbrandStrokeHover: { + fluent: tokens.colorStrokeFocus2, + }, + groupFocusOnbrandStroke: { + fluent: tokens.colorNeutralForegroundOnBrand, + }, + groupFocusOuterStrokewidth: { + fluent: tokens.strokeWidthThick, + }, + groupFocusInnerStrokewidth: { + fluent: tokens.strokeWidthThin, + }, +}; diff --git a/packages/semantic-tokens/scripts/definitions/genericFallbacks.ts b/packages/semantic-tokens/scripts/definitions/genericFallbacks.ts new file mode 100644 index 00000000000000..4cdf0542a77c0e --- /dev/null +++ b/packages/semantic-tokens/scripts/definitions/genericFallbacks.ts @@ -0,0 +1,17 @@ +import { tokens } from '@fluentui/tokens'; + +export type GenericFallbacks = { + [key: string]: { + fluent?: string; + primitive?: string; + }; +}; + +export const genericFallbacks: GenericFallbacks = { + cornerCircular: { + fluent: tokens.borderRadiusCircular, + }, + cornerSquare: { + fluent: tokens.borderRadiusNone, + }, +}; diff --git a/packages/semantic-tokens/scripts/definitions/generics.ts b/packages/semantic-tokens/scripts/definitions/generics.ts new file mode 100644 index 00000000000000..2c89a61ef41515 --- /dev/null +++ b/packages/semantic-tokens/scripts/definitions/generics.ts @@ -0,0 +1,28 @@ +// Each group of components will have these properties at default +// These properties have NO states and NO variants +export const coreProperties = ['fontfamily']; + +// Each variant of a component will have these properties at default +// States will be appended here, i.e. rest, hover, pressed, disabled +export const variantStateProperties = ['background', 'foreground']; + +// Scales affect different properties than variants +// These properties will be appended to the scale, i.e. small, medium, large +export const scaleProperties = ['fontsize', 'lineheight', 'padding', 'gap', 'corner', 'size', 'strokewidth']; + +// Properties are generic tokens +export type GenericTypes = { + [key: string]: { + type: 'color' | 'dimension' | 'weight' | 'string'; + variants: string[]; + states?: string[]; + styles?: string[]; + }; +}; + +export const generics: GenericTypes = { + corner: { + type: 'dimension', + variants: ['circular', 'square'], + }, +}; diff --git a/packages/semantic-tokens/scripts/definitions/groupFallbacks.ts b/packages/semantic-tokens/scripts/definitions/groupFallbacks.ts new file mode 100644 index 00000000000000..5136310d5da48f --- /dev/null +++ b/packages/semantic-tokens/scripts/definitions/groupFallbacks.ts @@ -0,0 +1,8 @@ +import { buttonFallbacks } from './fallbacks/button'; +import { focusFallbacks } from './fallbacks/focus'; +import { GroupFallbacks } from './fallbacks/fallbacks.types'; + +export const groupFallbacks: GroupFallbacks = { + focus: focusFallbacks, + button: buttonFallbacks, +}; diff --git a/packages/semantic-tokens/scripts/definitions/groups.ts b/packages/semantic-tokens/scripts/definitions/groups.ts new file mode 100644 index 00000000000000..9546f46b5f530e --- /dev/null +++ b/packages/semantic-tokens/scripts/definitions/groups.ts @@ -0,0 +1,10 @@ +import { focusGroup } from './application/focus'; +import { buttonGroup } from './components/button'; +import { Groups } from './groups.types'; + +export const groups: Groups = { + // Application + focus: focusGroup, + // Components + button: buttonGroup, +}; diff --git a/packages/semantic-tokens/scripts/definitions/groups.types.ts b/packages/semantic-tokens/scripts/definitions/groups.types.ts new file mode 100644 index 00000000000000..876a234a267442 --- /dev/null +++ b/packages/semantic-tokens/scripts/definitions/groups.types.ts @@ -0,0 +1,18 @@ +// Definitions of component groups, their properties, variants, states, scales, and parts +export interface GroupPart { + coreProperties?: string[]; + variantStateProperties?: string[]; + variantProperties?: string[]; + scales?: string[]; + scaleStateProperties?: string[]; + scaleProperties?: string[]; + variants?: string[]; + states?: string[]; + parts?: { [key: string]: GroupPart }; + exceptions?: GroupPart[]; + components?: string[]; +} + +export interface Groups { + [key: string]: GroupPart; +} diff --git a/packages/semantic-tokens/scripts/definitions/primitives.ts b/packages/semantic-tokens/scripts/definitions/primitives.ts new file mode 100644 index 00000000000000..45312b6d4cfdaa --- /dev/null +++ b/packages/semantic-tokens/scripts/definitions/primitives.ts @@ -0,0 +1,18 @@ +export const primitiveStyles = ['loud', 'tint', 'subtle', 'transparent']; +export const states = ['rest', 'hover', 'pressed']; + +export type PrimitiveTypes = { + [key: string]: { + type: 'color' | 'dimension' | 'weight'; + states: string[]; + styles: string[]; + }; +}; + +export const primitives: PrimitiveTypes = { + brand: { + styles: primitiveStyles, + states: [...states, 'selected'], + type: 'color', + }, +}; diff --git a/packages/semantic-tokens/scripts/generateLibraryOutput.ts b/packages/semantic-tokens/scripts/generateLibraryOutput.ts new file mode 100644 index 00000000000000..a90c9987108686 --- /dev/null +++ b/packages/semantic-tokens/scripts/generateLibraryOutput.ts @@ -0,0 +1,184 @@ +import { generateControlTokens, generateGenericTokens, generateGroupTokens } from './generateTokens'; +import fs from 'fs'; +import path from 'node:path'; +import { groupFallbacks } from './definitions/groupFallbacks'; +import { genericFallbacks } from './definitions/genericFallbacks'; +import { controlFallbacks } from './definitions/controlFallbacks'; + +function dotToCamelCase(str: string): string { + return str + .split('.') // Split the string by dots + .map( + (word, index) => + index === 0 + ? word // Keep the first word lowercase + : word.charAt(0).toUpperCase() + word.slice(1), // Capitalize the first letter of subsequent words + ) + .join(''); // Join the words back together +} + +function dotToCSSVarName(str: string): string { + return ( + '--smtc-' + + str + .split('.') // Split the string by dots + .join('-') // Join the words back together + ); +} + +function generateLibraryOutput() { + // let primitiveTokens = generatePrimitiveTokens(); + let genericTokens = generateGenericTokens(); + let groupTokens = generateGroupTokens(); + let controlTokens = generateControlTokens(); + + // let primitiveTokenList = ''; + // let primitiveIndexExport = 'export {\n'; + // for (const token of primitiveTokens) { + // const tokenName = '_' + dotToCamelCase(token.name); + // const cssVarName = dotToCSSVarName(token.name); + // const exportToken = `export const ${tokenName} = 'var(${cssVarName})';`; + // primitiveTokenList += `${exportToken}\n`; + // primitiveIndexExport += `${tokenName},\n`; + // } + // primitiveIndexExport += `} from './primitives/tokens';\n`; + + // const primitiveListPath = path.resolve(__dirname, `../src/primitives/tokens.ts`); + // // Write the JSON string to a file + // fs.writeFile(primitiveListPath, primitiveTokenList, err => { + // if (err) { + // console.error('Error writing to file:', err); + // } else { + // console.log('JSON data successfully written to tokens.json'); + // } + // }); + + let genericTokenList = ''; + let genericIndexExport = 'export {\n'; + // To do: Generate primitive fallbacks for generic tokens + for (const token of genericTokens) { + const tokenName = dotToCamelCase(token.name); + const cssVarName = dotToCSSVarName(token.name); + const fluentFallback = genericFallbacks[tokenName]?.fluent; + const exportToken = `export const ${tokenName} = 'var(${cssVarName}, ${fluentFallback})';`; + genericTokenList += `${exportToken}\n`; + genericIndexExport += `${tokenName},\n`; + } + genericIndexExport += `} from './generics/tokens';\n`; + + const genericListPath = path.resolve(__dirname, `../src/generics/tokens.ts`); + // Write the JSON string to a file + fs.writeFile(genericListPath, genericTokenList, err => { + if (err) { + console.error('Error writing to file:', err); + } else { + console.log('JSON data successfully written to tokens.json'); + } + }); + + const groupTokenList: { [key: string]: string } = {}; + const groupExportList: { [key: string]: string } = {}; + for (const token of groupTokens) { + const tokenGroup = token.group || 'ungrouped'; + const groupName = tokenGroup.split('.')[0]; + if (!groupTokenList[groupName]) { + groupTokenList[groupName] = ''; + } + + if (!groupExportList[groupName]) { + groupExportList[groupName] = 'export {\n'; + } + + const tokenName = dotToCamelCase(token.name); + const cssVarName = dotToCSSVarName(token.name); + const fluentFallback = groupFallbacks[tokenGroup][tokenName]?.fluent; + + let exportToken = `export const ${tokenName} = 'var(${cssVarName})';`; + if (fluentFallback) { + exportToken = `export const ${tokenName} = 'var(${cssVarName}, ${fluentFallback})';`; + } + + groupTokenList[groupName] += `${exportToken}\n`; + groupExportList[groupName] += `${tokenName},\n`; + } + + for (const groupName of Object.keys(groupTokenList)) { + const tokens = groupTokenList[groupName]; + const groupListPath = path.resolve(__dirname, `../src/groups/${groupName}/tokens.ts`); + groupExportList[groupName] += `} from './groups/${groupName}/tokens';\n`; + //Create directory if it doesn't exist + const dir = path.dirname(groupListPath); + if (!fs.existsSync(dir)) { + fs.mkdirSync(dir, { recursive: true }); + } + + // Write the JSON string to a file + fs.writeFile(groupListPath, tokens, err => { + if (err) { + console.error('Error writing to file:', err); + } else { + console.log('JSON data successfully written to tokens.json'); + } + }); + } + + // Control tokens + const controlTokenList: { [key: string]: string } = {}; + const controlExportList: { [key: string]: string } = {}; + for (const token of controlTokens) { + const tokenGroup = token.group || 'ungrouped'; + const groupName = tokenGroup.split('.')[0]; + if (!controlTokenList[groupName]) { + controlTokenList[groupName] = ''; + } + + if (!controlExportList[groupName]) { + controlExportList[groupName] = 'export {\n'; + } + + const tokenName = dotToCamelCase(token.name); + const cssVarName = dotToCSSVarName(token.name); + const fluentFallback = controlFallbacks[tokenGroup]?.[tokenName]?.fluent; + let exportToken = `export const ${tokenName} = 'var(${cssVarName})';`; + if (fluentFallback) { + exportToken = `export const ${tokenName} = 'var(${cssVarName}, ${fluentFallback})';`; + } + + controlTokenList[groupName] += `${exportToken}\n`; + controlExportList[groupName] += `${tokenName},\n`; + } + + for (const groupName of Object.keys(controlTokenList)) { + const tokens = controlTokenList[groupName]; + const controlListPath = path.resolve(__dirname, `../src/controls/${groupName}/tokens.ts`); + controlExportList[groupName] += `} from './controls/${groupName}/tokens';\n`; + //Create directory if it doesn't exist + const dir = path.dirname(controlListPath); + if (!fs.existsSync(dir)) { + fs.mkdirSync(dir, { recursive: true }); + } + + // Write the JSON string to a file + fs.writeFile(controlListPath, tokens, err => { + if (err) { + console.error('Error writing to file:', err); + } else { + console.log('JSON data successfully written to tokens.json'); + } + }); + } + + // Write the JSON string to a file + const indexPath = path.resolve(__dirname, `../src/index.ts`); + const allExports = + genericIndexExport + Object.values(groupExportList).join('\n') + Object.values(controlExportList).join('\n'); + fs.writeFile(indexPath, allExports, err => { + if (err) { + console.error('Error writing to file:', err); + } else { + console.log('JSON data successfully written to tokens.json'); + } + }); +} + +generateLibraryOutput(); diff --git a/packages/semantic-tokens/scripts/generateTokenJSON.ts b/packages/semantic-tokens/scripts/generateTokenJSON.ts new file mode 100644 index 00000000000000..70624a96eef893 --- /dev/null +++ b/packages/semantic-tokens/scripts/generateTokenJSON.ts @@ -0,0 +1,38 @@ +import { + generatePrimitiveTokens, + generateGenericTokens, + generateGroupTokens, + generateControlTokens, +} from './generateTokens'; +import fs from 'fs'; +import path from 'node:path'; + +// Function to generate tokens and write to a JSON file +export function generateTokenJSON() { + let primitiveTokens = generatePrimitiveTokens(); + let genericTokens = generateGenericTokens(); + let groupTokens = generateGroupTokens(); + let controlTokens = generateControlTokens(); + + const results = { + primitives: primitiveTokens, + generics: genericTokens, + components: groupTokens, + controls: controlTokens, + }; + + // Convert the JSON object to a string + const jsonData = JSON.stringify(results, null, 2); // Pretty print with 2 spaces + + const dirPath = path.resolve(__dirname, `./tokens.json`); + // Write the JSON string to a file + fs.writeFile(dirPath, jsonData, err => { + if (err) { + console.error('Error writing to file:', err); + } else { + console.log('JSON data successfully written to tokens.json'); + } + }); +} + +generateTokenJSON(); diff --git a/packages/semantic-tokens/scripts/generateTokens.ts b/packages/semantic-tokens/scripts/generateTokens.ts new file mode 100644 index 00000000000000..ce3935c9e4428e --- /dev/null +++ b/packages/semantic-tokens/scripts/generateTokens.ts @@ -0,0 +1,325 @@ +import { generics } from './definitions/generics'; +import { primitives } from './definitions/primitives'; +import { groups } from './definitions/groups'; +import { GroupPart } from './definitions/groups.types'; +import { controls } from './definitions/controls'; + +const joiner = '.'; + +export interface Token { + name: string; + figmaAlias: string; + type?: string; + property?: string; + group?: string; + state?: string; + variant?: string; +} + +// These help us map the property to a type, and eventual value classification +const propertyTypes = { + background: 'color', + foreground: 'color', + stroke: 'color', + fontsize: 'dimension', + lineheight: 'dimension', + padding: 'dimension', + gap: 'dimension', + shadow: 'shadow', + corner: 'dimension', + size: 'dimension', + divider: 'color', + color: 'color', + strokewidth: 'dimension', + fontfamily: 'string', + weight: 'weight', +}; + +const generateGenericTokenName = ({ + variant, + scale, + partName, + property, + state, +}: { + collectionName?: string; + groupName?: string; + variant?: string; + scale?: string; + partName?: string; + property?: string; + state?: string; +}) => { + return [property, variant, state].filter(Boolean).join(joiner); +}; + +const generateGroupTokenName = ({ + collectionName, + groupName, + variant, + scale, + partName, + property, + state, +}: { + collectionName?: string; + groupName?: string; + variant?: string; + scale?: string; + partName?: string; + property?: string; + state?: string; +}) => { + return [collectionName, groupName, variant, scale, partName, property, state].filter(Boolean).join(joiner); +}; + +// We use a different format for figma interfaces, optimized for use/searchability +const generateFigmaName = ({ + collectionName, + groupName, + variant, + scale, + partName, + property, + state, +}: { + collectionName?: string; + groupName?: string; + variant?: string; + scale?: string; + partName?: string; + property?: string; + state?: string; +}) => { + if (state === '') { + state = 'rest'; + } + return [property, collectionName, groupName, variant, scale, partName, state].filter(Boolean).join(joiner); +}; + +export function generatePrimitiveTokens() { + let result = []; + + for (const prim of Object.keys(primitives)) { + for (const style of primitives[prim].styles) { + for (const state of primitives[prim].states) { + let tokenParts = [prim, style, state]; + + result.push({ + name: tokenParts.filter(Boolean).join(joiner), + type: primitives[prim].type || 'color', + property: null, + }); + } + } + } + return result; +} + +export function generateGenericTokens() { + let result: Array = []; + + for (const property of Object.keys(generics)) { + for (const variant of generics[property].variants) { + const states = generics[property].states || ['']; + for (const state of states) { + const propertyToken = { + name: generateGenericTokenName({ property, variant, state }), + // Figma alias is the same on generic tokens (property first) + figmaAlias: generateGenericTokenName({ property, variant, state }), + type: generics[property].type || 'dimension', + property, + variant, + state, + }; + + result.push(propertyToken); + } + } + } + return result; +} + +export function generateComponentGroupTokens( + collectionName: string, + groupName: string, + group: GroupPart, + partName?: string, +) { + let result: Array = []; + const groupCoreGroupProperties = group.coreProperties || []; + for (const property of groupCoreGroupProperties) { + let type = propertyTypes[property as keyof typeof propertyTypes] || 'dimension'; + + const groupToken = { + name: generateGroupTokenName({ collectionName, groupName, partName, property }), + figmaAlias: generateFigmaName({ collectionName, groupName, partName, property }), + type, + property: property, + group: groupName, + }; + + if (!result.find(r => r.name === groupToken.name)) { + result.push(groupToken); + } + } + + // For each group, generate property tokens for each variant and scale + const groupVariantStateProperties = group.variantStateProperties || []; + for (const property of groupVariantStateProperties) { + const groupVariants = group.variants || []; + for (let variant of groupVariants) { + const groupStates = group.states || ['rest']; + for (let state of groupStates) { + let type = propertyTypes[property as keyof typeof propertyTypes] || 'dimension'; + + const groupToken = { + name: generateGroupTokenName({ collectionName, groupName, variant, partName, property, state }), + figmaAlias: generateFigmaName({ collectionName, groupName, variant, partName, property, state }), + type, + property: property, + group: groupName, + }; + + if (!result.find(r => r.name === groupToken.name)) { + result.push(groupToken); + } + } + } + } + + // Add variant properties that don't have states + const groupVariantProperties = group.variantProperties || []; + for (const property of groupVariantProperties) { + const groupVariants = group.variants || []; + for (let variant of groupVariants) { + let type = propertyTypes[property as keyof typeof propertyTypes] || 'dimension'; + + const groupToken = { + name: generateGroupTokenName({ collectionName, groupName, variant, partName, property }), + figmaAlias: generateFigmaName({ collectionName, groupName, variant, partName, property }), + type, + property: property, + group: groupName, + }; + + if (!result.find(r => r.name === groupToken.name)) { + result.push(groupToken); + } + } + } + + // Add tokens for scale properties + const groupScales = group.scales || ['default']; + for (const scale of groupScales) { + const groupScaleProperties = group.scaleProperties || []; + for (const property of groupScaleProperties) { + let type = propertyTypes[property as keyof typeof propertyTypes] || 'dimension'; + + const groupScaleToken = { + name: generateGroupTokenName({ collectionName, groupName, scale, partName, property }), + figmaAlias: generateFigmaName({ collectionName, groupName, scale, partName, property }), + type, + property, + group: groupName, + scale, + }; + + if (!result.find(r => r.name === groupScaleToken.name)) { + result.push(groupScaleToken); + } + } + } + + // For each group, generate property tokens for each state and scale + const groupScaleStateProperties = group.scaleStateProperties || []; + for (const property of groupScaleStateProperties) { + const groupScales = group.scales || []; + for (let scale of groupScales) { + const groupStates = group.states || ['rest']; + for (let state of groupStates) { + let type = propertyTypes[property as keyof typeof propertyTypes] || 'dimension'; + + const groupToken = { + name: generateGroupTokenName({ collectionName, groupName, scale, partName, property, state }), + figmaAlias: generateFigmaName({ collectionName, groupName, scale, partName, property, state }), + type, + property: property, + group: groupName, + }; + + if (!result.find(r => r.name === groupToken.name)) { + result.push(groupToken); + } + } + } + } + + return result; +} + +export function generateGroupTokens() { + let result: Token[] = []; + + // For each group, generate core property tokens + for (const group of Object.keys(groups)) { + const groupTokens = generateComponentGroupTokens('group', group, groups[group]); + result = result.concat(groupTokens); + + if (groups[group].exceptions) { + groups[group].exceptions.forEach(exception => { + const exceptionTokens = generateComponentGroupTokens('group', group, exception); + result = result.concat(exceptionTokens); + }); + } + + // Handle any parts of the group (generated in a similar way to groups) + const groupParts = groups[group].parts || {}; + for (const part of Object.keys(groupParts)) { + const partTokens = generateComponentGroupTokens('group', `${group}`, groupParts[part], part); + result = result.concat(partTokens); + + if (groupParts[part].exceptions) { + groupParts[part].exceptions.forEach(exception => { + const exceptionTokens = generateComponentGroupTokens('group', group, exception, part); + result = result.concat(exceptionTokens); + }); + } + } + } + + return result; +} + +export function generateControlTokens() { + let result: Token[] = []; + + // For each control group, generate core property tokens + for (const group of Object.keys(controls)) { + const groupTokens = generateComponentGroupTokens('ctrl', group, controls[group]); + result = result.concat(groupTokens); + + if (controls[group].exceptions) { + controls[group].exceptions.forEach(exception => { + const exceptionTokens = generateComponentGroupTokens('ctrl', group, exception); + result = result.concat(exceptionTokens); + }); + } + + // Handle any parts of the group (generated in a similar way to groups) + const groupParts = controls[group].parts || {}; + for (const part of Object.keys(groupParts)) { + const partTokens = generateComponentGroupTokens('ctrl', `${group}`, groupParts[part], part); + result = result.concat(partTokens); + + if (groupParts[part].exceptions) { + groupParts[part].exceptions.forEach(exception => { + const exceptionTokens = generateComponentGroupTokens('ctrl', group, exception, part); + result = result.concat(exceptionTokens); + }); + } + } + } + + return result; +} diff --git a/packages/semantic-tokens/scripts/tokens.json b/packages/semantic-tokens/scripts/tokens.json new file mode 100644 index 00000000000000..79e2d1a0979392 --- /dev/null +++ b/packages/semantic-tokens/scripts/tokens.json @@ -0,0 +1,2166 @@ +{ + "primitives": [ + { + "name": "brand.loud.rest", + "type": "color", + "property": null + }, + { + "name": "brand.loud.hover", + "type": "color", + "property": null + }, + { + "name": "brand.loud.pressed", + "type": "color", + "property": null + }, + { + "name": "brand.loud.selected", + "type": "color", + "property": null + }, + { + "name": "brand.tint.rest", + "type": "color", + "property": null + }, + { + "name": "brand.tint.hover", + "type": "color", + "property": null + }, + { + "name": "brand.tint.pressed", + "type": "color", + "property": null + }, + { + "name": "brand.tint.selected", + "type": "color", + "property": null + }, + { + "name": "brand.subtle.rest", + "type": "color", + "property": null + }, + { + "name": "brand.subtle.hover", + "type": "color", + "property": null + }, + { + "name": "brand.subtle.pressed", + "type": "color", + "property": null + }, + { + "name": "brand.subtle.selected", + "type": "color", + "property": null + }, + { + "name": "brand.transparent.rest", + "type": "color", + "property": null + }, + { + "name": "brand.transparent.hover", + "type": "color", + "property": null + }, + { + "name": "brand.transparent.pressed", + "type": "color", + "property": null + }, + { + "name": "brand.transparent.selected", + "type": "color", + "property": null + } + ], + "generics": [ + { + "name": "outer.focus.stroke", + "figmaAlias": "focus.stroke.outer.rest", + "type": "color", + "property": "focus.stroke", + "variant": "outer", + "state": "" + }, + { + "name": "inner.focus.stroke", + "figmaAlias": "focus.stroke.inner.rest", + "type": "color", + "property": "focus.stroke", + "variant": "inner", + "state": "" + }, + { + "name": "onbrand.hover.focus.stroke", + "figmaAlias": "focus.stroke.onbrand.hover.rest", + "type": "color", + "property": "focus.stroke", + "variant": "onbrand.hover", + "state": "" + }, + { + "name": "onbrand.focus.stroke", + "figmaAlias": "focus.stroke.onbrand.rest", + "type": "color", + "property": "focus.stroke", + "variant": "onbrand", + "state": "" + }, + { + "name": "outer.focus.strokewidth", + "figmaAlias": "focus.strokewidth.outer.rest", + "type": "dimension", + "property": "focus.strokewidth", + "variant": "outer", + "state": "" + }, + { + "name": "inner.focus.strokewidth", + "figmaAlias": "focus.strokewidth.inner.rest", + "type": "dimension", + "property": "focus.strokewidth", + "variant": "inner", + "state": "" + }, + { + "name": "circular.corner", + "figmaAlias": "corner.circular.rest", + "type": "dimension", + "property": "corner", + "variant": "circular", + "state": "" + }, + { + "name": "square.corner", + "figmaAlias": "corner.square.rest", + "type": "dimension", + "property": "corner", + "variant": "square", + "state": "" + } + ], + "components": [ + { + "name": "group.button.strokewidth", + "figmaAlias": "strokewidth.group.button", + "type": "dimension", + "property": "strokewidth", + "group": "button" + }, + { + "name": "group.button.neutral.background", + "figmaAlias": "background.group.button.neutral.rest", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.neutral.background.hover", + "figmaAlias": "background.group.button.neutral.hover", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.neutral.background.pressed", + "figmaAlias": "background.group.button.neutral.pressed", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.neutral.background.selected", + "figmaAlias": "background.group.button.neutral.selected", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.neutral.background.hover.selected", + "figmaAlias": "background.group.button.neutral.hover.selected", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.neutral.background.pressed.selected", + "figmaAlias": "background.group.button.neutral.pressed.selected", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.neutral.background.disabled", + "figmaAlias": "background.group.button.neutral.disabled", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.primary.background", + "figmaAlias": "background.group.button.primary.rest", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.primary.background.hover", + "figmaAlias": "background.group.button.primary.hover", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.primary.background.pressed", + "figmaAlias": "background.group.button.primary.pressed", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.primary.background.selected", + "figmaAlias": "background.group.button.primary.selected", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.primary.background.hover.selected", + "figmaAlias": "background.group.button.primary.hover.selected", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.primary.background.pressed.selected", + "figmaAlias": "background.group.button.primary.pressed.selected", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.primary.background.disabled", + "figmaAlias": "background.group.button.primary.disabled", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.outline.background", + "figmaAlias": "background.group.button.outline.rest", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.outline.background.hover", + "figmaAlias": "background.group.button.outline.hover", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.outline.background.pressed", + "figmaAlias": "background.group.button.outline.pressed", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.outline.background.selected", + "figmaAlias": "background.group.button.outline.selected", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.outline.background.hover.selected", + "figmaAlias": "background.group.button.outline.hover.selected", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.outline.background.pressed.selected", + "figmaAlias": "background.group.button.outline.pressed.selected", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.outline.background.disabled", + "figmaAlias": "background.group.button.outline.disabled", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.subtle.background", + "figmaAlias": "background.group.button.subtle.rest", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.subtle.background.hover", + "figmaAlias": "background.group.button.subtle.hover", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.subtle.background.pressed", + "figmaAlias": "background.group.button.subtle.pressed", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.subtle.background.selected", + "figmaAlias": "background.group.button.subtle.selected", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.subtle.background.hover.selected", + "figmaAlias": "background.group.button.subtle.hover.selected", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.subtle.background.pressed.selected", + "figmaAlias": "background.group.button.subtle.pressed.selected", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.subtle.background.disabled", + "figmaAlias": "background.group.button.subtle.disabled", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.transparent.background", + "figmaAlias": "background.group.button.transparent.rest", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.transparent.background.hover", + "figmaAlias": "background.group.button.transparent.hover", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.transparent.background.pressed", + "figmaAlias": "background.group.button.transparent.pressed", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.transparent.background.selected", + "figmaAlias": "background.group.button.transparent.selected", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.transparent.background.hover.selected", + "figmaAlias": "background.group.button.transparent.hover.selected", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.transparent.background.pressed.selected", + "figmaAlias": "background.group.button.transparent.pressed.selected", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.transparent.background.disabled", + "figmaAlias": "background.group.button.transparent.disabled", + "type": "color", + "property": "background", + "group": "button" + }, + { + "name": "group.button.neutral.stroke", + "figmaAlias": "stroke.group.button.neutral.rest", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.neutral.stroke.hover", + "figmaAlias": "stroke.group.button.neutral.hover", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.neutral.stroke.pressed", + "figmaAlias": "stroke.group.button.neutral.pressed", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.neutral.stroke.selected", + "figmaAlias": "stroke.group.button.neutral.selected", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.neutral.stroke.hover.selected", + "figmaAlias": "stroke.group.button.neutral.hover.selected", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.neutral.stroke.pressed.selected", + "figmaAlias": "stroke.group.button.neutral.pressed.selected", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.neutral.stroke.disabled", + "figmaAlias": "stroke.group.button.neutral.disabled", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.primary.stroke", + "figmaAlias": "stroke.group.button.primary.rest", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.primary.stroke.hover", + "figmaAlias": "stroke.group.button.primary.hover", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.primary.stroke.pressed", + "figmaAlias": "stroke.group.button.primary.pressed", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.primary.stroke.selected", + "figmaAlias": "stroke.group.button.primary.selected", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.primary.stroke.hover.selected", + "figmaAlias": "stroke.group.button.primary.hover.selected", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.primary.stroke.pressed.selected", + "figmaAlias": "stroke.group.button.primary.pressed.selected", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.primary.stroke.disabled", + "figmaAlias": "stroke.group.button.primary.disabled", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.outline.stroke", + "figmaAlias": "stroke.group.button.outline.rest", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.outline.stroke.hover", + "figmaAlias": "stroke.group.button.outline.hover", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.outline.stroke.pressed", + "figmaAlias": "stroke.group.button.outline.pressed", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.outline.stroke.selected", + "figmaAlias": "stroke.group.button.outline.selected", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.outline.stroke.hover.selected", + "figmaAlias": "stroke.group.button.outline.hover.selected", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.outline.stroke.pressed.selected", + "figmaAlias": "stroke.group.button.outline.pressed.selected", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.outline.stroke.disabled", + "figmaAlias": "stroke.group.button.outline.disabled", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.subtle.stroke", + "figmaAlias": "stroke.group.button.subtle.rest", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.subtle.stroke.hover", + "figmaAlias": "stroke.group.button.subtle.hover", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.subtle.stroke.pressed", + "figmaAlias": "stroke.group.button.subtle.pressed", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.subtle.stroke.selected", + "figmaAlias": "stroke.group.button.subtle.selected", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.subtle.stroke.hover.selected", + "figmaAlias": "stroke.group.button.subtle.hover.selected", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.subtle.stroke.pressed.selected", + "figmaAlias": "stroke.group.button.subtle.pressed.selected", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.subtle.stroke.disabled", + "figmaAlias": "stroke.group.button.subtle.disabled", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.transparent.stroke", + "figmaAlias": "stroke.group.button.transparent.rest", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.transparent.stroke.hover", + "figmaAlias": "stroke.group.button.transparent.hover", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.transparent.stroke.pressed", + "figmaAlias": "stroke.group.button.transparent.pressed", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.transparent.stroke.selected", + "figmaAlias": "stroke.group.button.transparent.selected", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.transparent.stroke.hover.selected", + "figmaAlias": "stroke.group.button.transparent.hover.selected", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.transparent.stroke.pressed.selected", + "figmaAlias": "stroke.group.button.transparent.pressed.selected", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.transparent.stroke.disabled", + "figmaAlias": "stroke.group.button.transparent.disabled", + "type": "color", + "property": "stroke", + "group": "button" + }, + { + "name": "group.button.small.padding.horizontal", + "figmaAlias": "padding.horizontal.group.button.small", + "type": "dimension", + "property": "padding.horizontal", + "group": "button", + "scale": "small" + }, + { + "name": "group.button.small.padding.top", + "figmaAlias": "padding.top.group.button.small", + "type": "dimension", + "property": "padding.top", + "group": "button", + "scale": "small" + }, + { + "name": "group.button.small.padding.bottom", + "figmaAlias": "padding.bottom.group.button.small", + "type": "dimension", + "property": "padding.bottom", + "group": "button", + "scale": "small" + }, + { + "name": "group.button.small.gap", + "figmaAlias": "gap.group.button.small", + "type": "dimension", + "property": "gap", + "group": "button", + "scale": "small" + }, + { + "name": "group.button.small.minwidth", + "figmaAlias": "minwidth.group.button.small", + "type": "dimension", + "property": "minwidth", + "group": "button", + "scale": "small" + }, + { + "name": "group.button.small.minheight", + "figmaAlias": "minheight.group.button.small", + "type": "dimension", + "property": "minheight", + "group": "button", + "scale": "small" + }, + { + "name": "group.button.medium.padding.horizontal", + "figmaAlias": "padding.horizontal.group.button.medium", + "type": "dimension", + "property": "padding.horizontal", + "group": "button", + "scale": "medium" + }, + { + "name": "group.button.medium.padding.top", + "figmaAlias": "padding.top.group.button.medium", + "type": "dimension", + "property": "padding.top", + "group": "button", + "scale": "medium" + }, + { + "name": "group.button.medium.padding.bottom", + "figmaAlias": "padding.bottom.group.button.medium", + "type": "dimension", + "property": "padding.bottom", + "group": "button", + "scale": "medium" + }, + { + "name": "group.button.medium.gap", + "figmaAlias": "gap.group.button.medium", + "type": "dimension", + "property": "gap", + "group": "button", + "scale": "medium" + }, + { + "name": "group.button.medium.minwidth", + "figmaAlias": "minwidth.group.button.medium", + "type": "dimension", + "property": "minwidth", + "group": "button", + "scale": "medium" + }, + { + "name": "group.button.medium.minheight", + "figmaAlias": "minheight.group.button.medium", + "type": "dimension", + "property": "minheight", + "group": "button", + "scale": "medium" + }, + { + "name": "group.button.large.padding.horizontal", + "figmaAlias": "padding.horizontal.group.button.large", + "type": "dimension", + "property": "padding.horizontal", + "group": "button", + "scale": "large" + }, + { + "name": "group.button.large.padding.top", + "figmaAlias": "padding.top.group.button.large", + "type": "dimension", + "property": "padding.top", + "group": "button", + "scale": "large" + }, + { + "name": "group.button.large.padding.bottom", + "figmaAlias": "padding.bottom.group.button.large", + "type": "dimension", + "property": "padding.bottom", + "group": "button", + "scale": "large" + }, + { + "name": "group.button.large.gap", + "figmaAlias": "gap.group.button.large", + "type": "dimension", + "property": "gap", + "group": "button", + "scale": "large" + }, + { + "name": "group.button.large.minwidth", + "figmaAlias": "minwidth.group.button.large", + "type": "dimension", + "property": "minwidth", + "group": "button", + "scale": "large" + }, + { + "name": "group.button.large.minheight", + "figmaAlias": "minheight.group.button.large", + "type": "dimension", + "property": "minheight", + "group": "button", + "scale": "large" + }, + { + "name": "group.button.small.corner", + "figmaAlias": "corner.group.button.small.rest", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.small.corner.hover", + "figmaAlias": "corner.group.button.small.hover", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.small.corner.pressed", + "figmaAlias": "corner.group.button.small.pressed", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.small.corner.selected", + "figmaAlias": "corner.group.button.small.selected", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.small.corner.hover.selected", + "figmaAlias": "corner.group.button.small.hover.selected", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.small.corner.pressed.selected", + "figmaAlias": "corner.group.button.small.pressed.selected", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.small.corner.disabled", + "figmaAlias": "corner.group.button.small.disabled", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.medium.corner", + "figmaAlias": "corner.group.button.medium.rest", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.medium.corner.hover", + "figmaAlias": "corner.group.button.medium.hover", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.medium.corner.pressed", + "figmaAlias": "corner.group.button.medium.pressed", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.medium.corner.selected", + "figmaAlias": "corner.group.button.medium.selected", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.medium.corner.hover.selected", + "figmaAlias": "corner.group.button.medium.hover.selected", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.medium.corner.pressed.selected", + "figmaAlias": "corner.group.button.medium.pressed.selected", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.medium.corner.disabled", + "figmaAlias": "corner.group.button.medium.disabled", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.large.corner", + "figmaAlias": "corner.group.button.large.rest", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.large.corner.hover", + "figmaAlias": "corner.group.button.large.hover", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.large.corner.pressed", + "figmaAlias": "corner.group.button.large.pressed", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.large.corner.selected", + "figmaAlias": "corner.group.button.large.selected", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.large.corner.hover.selected", + "figmaAlias": "corner.group.button.large.hover.selected", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.large.corner.pressed.selected", + "figmaAlias": "corner.group.button.large.pressed.selected", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.large.corner.disabled", + "figmaAlias": "corner.group.button.large.disabled", + "type": "dimension", + "property": "corner", + "group": "button" + }, + { + "name": "group.button.outline.strokewidth", + "figmaAlias": "strokewidth.group.button.outline.rest", + "type": "dimension", + "property": "strokewidth", + "group": "button" + }, + { + "name": "group.button.outline.strokewidth.hover", + "figmaAlias": "strokewidth.group.button.outline.hover", + "type": "dimension", + "property": "strokewidth", + "group": "button" + }, + { + "name": "group.button.outline.strokewidth.pressed", + "figmaAlias": "strokewidth.group.button.outline.pressed", + "type": "dimension", + "property": "strokewidth", + "group": "button" + }, + { + "name": "group.button.outline.strokewidth.selected", + "figmaAlias": "strokewidth.group.button.outline.selected", + "type": "dimension", + "property": "strokewidth", + "group": "button" + }, + { + "name": "group.button.neutral.shadow", + "figmaAlias": "shadow.group.button.neutral.rest", + "type": "shadow", + "property": "shadow", + "group": "button" + }, + { + "name": "group.button.neutral.shadow.disabled", + "figmaAlias": "shadow.group.button.neutral.disabled", + "type": "shadow", + "property": "shadow", + "group": "button" + }, + { + "name": "group.button.neutral.shadow.selected", + "figmaAlias": "shadow.group.button.neutral.selected", + "type": "shadow", + "property": "shadow", + "group": "button" + }, + { + "name": "group.button.neutral.shadow.disabled.selected", + "figmaAlias": "shadow.group.button.neutral.disabled.selected", + "type": "shadow", + "property": "shadow", + "group": "button" + }, + { + "name": "group.button.primary.shadow", + "figmaAlias": "shadow.group.button.primary.rest", + "type": "shadow", + "property": "shadow", + "group": "button" + }, + { + "name": "group.button.primary.shadow.disabled", + "figmaAlias": "shadow.group.button.primary.disabled", + "type": "shadow", + "property": "shadow", + "group": "button" + }, + { + "name": "group.button.primary.shadow.selected", + "figmaAlias": "shadow.group.button.primary.selected", + "type": "shadow", + "property": "shadow", + "group": "button" + }, + { + "name": "group.button.primary.shadow.disabled.selected", + "figmaAlias": "shadow.group.button.primary.disabled.selected", + "type": "shadow", + "property": "shadow", + "group": "button" + }, + { + "name": "group.button.small.icononly.padding", + "figmaAlias": "padding.group.button.small.icononly", + "type": "dimension", + "property": "padding", + "group": "button", + "scale": "small" + }, + { + "name": "group.button.medium.icononly.padding", + "figmaAlias": "padding.group.button.medium.icononly", + "type": "dimension", + "property": "padding", + "group": "button", + "scale": "medium" + }, + { + "name": "group.button.large.icononly.padding", + "figmaAlias": "padding.group.button.large.icononly", + "type": "dimension", + "property": "padding", + "group": "button", + "scale": "large" + }, + { + "name": "group.button.neutral.icon.foreground", + "figmaAlias": "foreground.group.button.neutral.icon.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.neutral.icon.foreground.hover", + "figmaAlias": "foreground.group.button.neutral.icon.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.neutral.icon.foreground.pressed", + "figmaAlias": "foreground.group.button.neutral.icon.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.neutral.icon.foreground.disabled", + "figmaAlias": "foreground.group.button.neutral.icon.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.neutral.icon.foreground.selected", + "figmaAlias": "foreground.group.button.neutral.icon.selected", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.icon.foreground", + "figmaAlias": "foreground.group.button.primary.icon.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.icon.foreground.hover", + "figmaAlias": "foreground.group.button.primary.icon.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.icon.foreground.pressed", + "figmaAlias": "foreground.group.button.primary.icon.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.icon.foreground.disabled", + "figmaAlias": "foreground.group.button.primary.icon.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.icon.foreground.selected", + "figmaAlias": "foreground.group.button.primary.icon.selected", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.icon.foreground", + "figmaAlias": "foreground.group.button.outline.icon.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.icon.foreground.hover", + "figmaAlias": "foreground.group.button.outline.icon.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.icon.foreground.pressed", + "figmaAlias": "foreground.group.button.outline.icon.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.icon.foreground.disabled", + "figmaAlias": "foreground.group.button.outline.icon.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.icon.foreground.selected", + "figmaAlias": "foreground.group.button.outline.icon.selected", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.icon.foreground", + "figmaAlias": "foreground.group.button.subtle.icon.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.icon.foreground.hover", + "figmaAlias": "foreground.group.button.subtle.icon.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.icon.foreground.pressed", + "figmaAlias": "foreground.group.button.subtle.icon.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.icon.foreground.disabled", + "figmaAlias": "foreground.group.button.subtle.icon.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.icon.foreground.selected", + "figmaAlias": "foreground.group.button.subtle.icon.selected", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.icon.foreground", + "figmaAlias": "foreground.group.button.transparent.icon.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.icon.foreground.hover", + "figmaAlias": "foreground.group.button.transparent.icon.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.icon.foreground.pressed", + "figmaAlias": "foreground.group.button.transparent.icon.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.icon.foreground.disabled", + "figmaAlias": "foreground.group.button.transparent.icon.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.icon.foreground.selected", + "figmaAlias": "foreground.group.button.transparent.icon.selected", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.small.icon.size", + "figmaAlias": "size.group.button.small.icon", + "type": "dimension", + "property": "size", + "group": "button", + "scale": "small" + }, + { + "name": "group.button.medium.icon.size", + "figmaAlias": "size.group.button.medium.icon", + "type": "dimension", + "property": "size", + "group": "button", + "scale": "medium" + }, + { + "name": "group.button.large.icon.size", + "figmaAlias": "size.group.button.large.icon", + "type": "dimension", + "property": "size", + "group": "button", + "scale": "large" + }, + { + "name": "group.button.divider.strokewidth", + "figmaAlias": "strokewidth.group.button.divider", + "type": "dimension", + "property": "strokewidth", + "group": "button" + }, + { + "name": "group.button.divider.margin.vertical", + "figmaAlias": "margin.vertical.group.button.divider", + "type": "dimension", + "property": "margin.vertical", + "group": "button" + }, + { + "name": "group.button.neutral.divider.foreground", + "figmaAlias": "foreground.group.button.neutral.divider", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.divider.foreground", + "figmaAlias": "foreground.group.button.primary.divider", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.divider.foreground", + "figmaAlias": "foreground.group.button.outline.divider", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.divider.foreground", + "figmaAlias": "foreground.group.button.subtle.divider", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.divider.foreground", + "figmaAlias": "foreground.group.button.transparent.divider", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.neutral.chevron.foreground", + "figmaAlias": "foreground.group.button.neutral.chevron.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.neutral.chevron.foreground.hover", + "figmaAlias": "foreground.group.button.neutral.chevron.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.neutral.chevron.foreground.pressed", + "figmaAlias": "foreground.group.button.neutral.chevron.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.neutral.chevron.foreground.selected", + "figmaAlias": "foreground.group.button.neutral.chevron.selected", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.neutral.chevron.foreground.disabled", + "figmaAlias": "foreground.group.button.neutral.chevron.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.chevron.foreground", + "figmaAlias": "foreground.group.button.primary.chevron.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.chevron.foreground.hover", + "figmaAlias": "foreground.group.button.primary.chevron.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.chevron.foreground.pressed", + "figmaAlias": "foreground.group.button.primary.chevron.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.chevron.foreground.selected", + "figmaAlias": "foreground.group.button.primary.chevron.selected", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.chevron.foreground.disabled", + "figmaAlias": "foreground.group.button.primary.chevron.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.chevron.foreground", + "figmaAlias": "foreground.group.button.outline.chevron.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.chevron.foreground.hover", + "figmaAlias": "foreground.group.button.outline.chevron.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.chevron.foreground.pressed", + "figmaAlias": "foreground.group.button.outline.chevron.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.chevron.foreground.selected", + "figmaAlias": "foreground.group.button.outline.chevron.selected", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.chevron.foreground.disabled", + "figmaAlias": "foreground.group.button.outline.chevron.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.chevron.foreground", + "figmaAlias": "foreground.group.button.subtle.chevron.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.chevron.foreground.hover", + "figmaAlias": "foreground.group.button.subtle.chevron.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.chevron.foreground.pressed", + "figmaAlias": "foreground.group.button.subtle.chevron.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.chevron.foreground.selected", + "figmaAlias": "foreground.group.button.subtle.chevron.selected", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.chevron.foreground.disabled", + "figmaAlias": "foreground.group.button.subtle.chevron.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.chevron.foreground", + "figmaAlias": "foreground.group.button.transparent.chevron.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.chevron.foreground.hover", + "figmaAlias": "foreground.group.button.transparent.chevron.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.chevron.foreground.pressed", + "figmaAlias": "foreground.group.button.transparent.chevron.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.chevron.foreground.selected", + "figmaAlias": "foreground.group.button.transparent.chevron.selected", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.chevron.foreground.disabled", + "figmaAlias": "foreground.group.button.transparent.chevron.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.small.chevron.size", + "figmaAlias": "size.group.button.small.chevron", + "type": "dimension", + "property": "size", + "group": "button", + "scale": "small" + }, + { + "name": "group.button.medium.chevron.size", + "figmaAlias": "size.group.button.medium.chevron", + "type": "dimension", + "property": "size", + "group": "button", + "scale": "medium" + }, + { + "name": "group.button.large.chevron.size", + "figmaAlias": "size.group.button.large.chevron", + "type": "dimension", + "property": "size", + "group": "button", + "scale": "large" + }, + { + "name": "group.button.text.fontfamily", + "figmaAlias": "fontfamily.group.button.text", + "type": "string", + "property": "fontfamily", + "group": "button" + }, + { + "name": "group.button.neutral.text.foreground", + "figmaAlias": "foreground.group.button.neutral.text.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.neutral.text.foreground.hover", + "figmaAlias": "foreground.group.button.neutral.text.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.neutral.text.foreground.pressed", + "figmaAlias": "foreground.group.button.neutral.text.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.neutral.text.foreground.disabled", + "figmaAlias": "foreground.group.button.neutral.text.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.neutral.text.foreground.selected", + "figmaAlias": "foreground.group.button.neutral.text.selected", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.text.foreground", + "figmaAlias": "foreground.group.button.primary.text.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.text.foreground.hover", + "figmaAlias": "foreground.group.button.primary.text.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.text.foreground.pressed", + "figmaAlias": "foreground.group.button.primary.text.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.text.foreground.disabled", + "figmaAlias": "foreground.group.button.primary.text.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.text.foreground.selected", + "figmaAlias": "foreground.group.button.primary.text.selected", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.text.foreground", + "figmaAlias": "foreground.group.button.outline.text.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.text.foreground.hover", + "figmaAlias": "foreground.group.button.outline.text.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.text.foreground.pressed", + "figmaAlias": "foreground.group.button.outline.text.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.text.foreground.disabled", + "figmaAlias": "foreground.group.button.outline.text.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.text.foreground.selected", + "figmaAlias": "foreground.group.button.outline.text.selected", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.text.foreground", + "figmaAlias": "foreground.group.button.subtle.text.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.text.foreground.hover", + "figmaAlias": "foreground.group.button.subtle.text.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.text.foreground.pressed", + "figmaAlias": "foreground.group.button.subtle.text.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.text.foreground.disabled", + "figmaAlias": "foreground.group.button.subtle.text.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.text.foreground.selected", + "figmaAlias": "foreground.group.button.subtle.text.selected", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.text.foreground", + "figmaAlias": "foreground.group.button.transparent.text.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.text.foreground.hover", + "figmaAlias": "foreground.group.button.transparent.text.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.text.foreground.pressed", + "figmaAlias": "foreground.group.button.transparent.text.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.text.foreground.disabled", + "figmaAlias": "foreground.group.button.transparent.text.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.text.foreground.selected", + "figmaAlias": "foreground.group.button.transparent.text.selected", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.small.text.padding.horizontal", + "figmaAlias": "padding.horizontal.group.button.small.text", + "type": "dimension", + "property": "padding.horizontal", + "group": "button", + "scale": "small" + }, + { + "name": "group.button.small.text.fontsize", + "figmaAlias": "fontsize.group.button.small.text", + "type": "dimension", + "property": "fontsize", + "group": "button", + "scale": "small" + }, + { + "name": "group.button.small.text.lineheight", + "figmaAlias": "lineheight.group.button.small.text", + "type": "dimension", + "property": "lineheight", + "group": "button", + "scale": "small" + }, + { + "name": "group.button.small.text.fontweight", + "figmaAlias": "fontweight.group.button.small.text", + "type": "dimension", + "property": "fontweight", + "group": "button", + "scale": "small" + }, + { + "name": "group.button.medium.text.padding.horizontal", + "figmaAlias": "padding.horizontal.group.button.medium.text", + "type": "dimension", + "property": "padding.horizontal", + "group": "button", + "scale": "medium" + }, + { + "name": "group.button.medium.text.fontsize", + "figmaAlias": "fontsize.group.button.medium.text", + "type": "dimension", + "property": "fontsize", + "group": "button", + "scale": "medium" + }, + { + "name": "group.button.medium.text.lineheight", + "figmaAlias": "lineheight.group.button.medium.text", + "type": "dimension", + "property": "lineheight", + "group": "button", + "scale": "medium" + }, + { + "name": "group.button.medium.text.fontweight", + "figmaAlias": "fontweight.group.button.medium.text", + "type": "dimension", + "property": "fontweight", + "group": "button", + "scale": "medium" + }, + { + "name": "group.button.large.text.padding.horizontal", + "figmaAlias": "padding.horizontal.group.button.large.text", + "type": "dimension", + "property": "padding.horizontal", + "group": "button", + "scale": "large" + }, + { + "name": "group.button.large.text.fontsize", + "figmaAlias": "fontsize.group.button.large.text", + "type": "dimension", + "property": "fontsize", + "group": "button", + "scale": "large" + }, + { + "name": "group.button.large.text.lineheight", + "figmaAlias": "lineheight.group.button.large.text", + "type": "dimension", + "property": "lineheight", + "group": "button", + "scale": "large" + }, + { + "name": "group.button.large.text.fontweight", + "figmaAlias": "fontweight.group.button.large.text", + "type": "dimension", + "property": "fontweight", + "group": "button", + "scale": "large" + }, + { + "name": "group.button.small.text.fontweight.selected", + "figmaAlias": "fontweight.group.button.small.text.selected", + "type": "dimension", + "property": "fontweight", + "group": "button" + }, + { + "name": "group.button.medium.text.fontweight.selected", + "figmaAlias": "fontweight.group.button.medium.text.selected", + "type": "dimension", + "property": "fontweight", + "group": "button" + }, + { + "name": "group.button.large.text.fontweight.selected", + "figmaAlias": "fontweight.group.button.large.text.selected", + "type": "dimension", + "property": "fontweight", + "group": "button" + }, + { + "name": "group.button.neutral.text.secondary.foreground", + "figmaAlias": "foreground.group.button.neutral.text.secondary.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.neutral.text.secondary.foreground.hover", + "figmaAlias": "foreground.group.button.neutral.text.secondary.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.neutral.text.secondary.foreground.pressed", + "figmaAlias": "foreground.group.button.neutral.text.secondary.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.neutral.text.secondary.foreground.disabled", + "figmaAlias": "foreground.group.button.neutral.text.secondary.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.text.secondary.foreground", + "figmaAlias": "foreground.group.button.primary.text.secondary.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.text.secondary.foreground.hover", + "figmaAlias": "foreground.group.button.primary.text.secondary.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.text.secondary.foreground.pressed", + "figmaAlias": "foreground.group.button.primary.text.secondary.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.primary.text.secondary.foreground.disabled", + "figmaAlias": "foreground.group.button.primary.text.secondary.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.text.secondary.foreground", + "figmaAlias": "foreground.group.button.outline.text.secondary.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.text.secondary.foreground.hover", + "figmaAlias": "foreground.group.button.outline.text.secondary.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.text.secondary.foreground.pressed", + "figmaAlias": "foreground.group.button.outline.text.secondary.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.outline.text.secondary.foreground.disabled", + "figmaAlias": "foreground.group.button.outline.text.secondary.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.text.secondary.foreground", + "figmaAlias": "foreground.group.button.subtle.text.secondary.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.text.secondary.foreground.hover", + "figmaAlias": "foreground.group.button.subtle.text.secondary.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.text.secondary.foreground.pressed", + "figmaAlias": "foreground.group.button.subtle.text.secondary.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.subtle.text.secondary.foreground.disabled", + "figmaAlias": "foreground.group.button.subtle.text.secondary.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.text.secondary.foreground", + "figmaAlias": "foreground.group.button.transparent.text.secondary.rest", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.text.secondary.foreground.hover", + "figmaAlias": "foreground.group.button.transparent.text.secondary.hover", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.text.secondary.foreground.pressed", + "figmaAlias": "foreground.group.button.transparent.text.secondary.pressed", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.transparent.text.secondary.foreground.disabled", + "figmaAlias": "foreground.group.button.transparent.text.secondary.disabled", + "type": "color", + "property": "foreground", + "group": "button" + }, + { + "name": "group.button.small.text.secondary.fontsize", + "figmaAlias": "fontsize.group.button.small.text.secondary", + "type": "dimension", + "property": "fontsize", + "group": "button", + "scale": "small" + }, + { + "name": "group.button.small.text.secondary.lineheight", + "figmaAlias": "lineheight.group.button.small.text.secondary", + "type": "dimension", + "property": "lineheight", + "group": "button", + "scale": "small" + }, + { + "name": "group.button.small.text.secondary.fontweight", + "figmaAlias": "fontweight.group.button.small.text.secondary", + "type": "dimension", + "property": "fontweight", + "group": "button", + "scale": "small" + }, + { + "name": "group.button.medium.text.secondary.fontsize", + "figmaAlias": "fontsize.group.button.medium.text.secondary", + "type": "dimension", + "property": "fontsize", + "group": "button", + "scale": "medium" + }, + { + "name": "group.button.medium.text.secondary.lineheight", + "figmaAlias": "lineheight.group.button.medium.text.secondary", + "type": "dimension", + "property": "lineheight", + "group": "button", + "scale": "medium" + }, + { + "name": "group.button.medium.text.secondary.fontweight", + "figmaAlias": "fontweight.group.button.medium.text.secondary", + "type": "dimension", + "property": "fontweight", + "group": "button", + "scale": "medium" + }, + { + "name": "group.button.large.text.secondary.fontsize", + "figmaAlias": "fontsize.group.button.large.text.secondary", + "type": "dimension", + "property": "fontsize", + "group": "button", + "scale": "large" + }, + { + "name": "group.button.large.text.secondary.lineheight", + "figmaAlias": "lineheight.group.button.large.text.secondary", + "type": "dimension", + "property": "lineheight", + "group": "button", + "scale": "large" + }, + { + "name": "group.button.large.text.secondary.fontweight", + "figmaAlias": "fontweight.group.button.large.text.secondary", + "type": "dimension", + "property": "fontweight", + "group": "button", + "scale": "large" + } + ], + "controls": [ + { + "name": "ctrl.compoundbutton.icon.size", + "figmaAlias": "icon.size.ctrl.compoundbutton", + "type": "dimension", + "property": "icon.size", + "group": "compoundbutton" + }, + { + "name": "ctrl.compoundbutton.gap", + "figmaAlias": "gap.ctrl.compoundbutton", + "type": "dimension", + "property": "gap", + "group": "compoundbutton" + }, + { + "name": "ctrl.compoundbutton.small.padding.horizontal", + "figmaAlias": "padding.horizontal.ctrl.compoundbutton.small", + "type": "dimension", + "property": "padding.horizontal", + "group": "compoundbutton", + "scale": "small" + }, + { + "name": "ctrl.compoundbutton.small.padding.top", + "figmaAlias": "padding.top.ctrl.compoundbutton.small", + "type": "dimension", + "property": "padding.top", + "group": "compoundbutton", + "scale": "small" + }, + { + "name": "ctrl.compoundbutton.small.padding.bottom", + "figmaAlias": "padding.bottom.ctrl.compoundbutton.small", + "type": "dimension", + "property": "padding.bottom", + "group": "compoundbutton", + "scale": "small" + }, + { + "name": "ctrl.compoundbutton.small.minwidth", + "figmaAlias": "minwidth.ctrl.compoundbutton.small", + "type": "dimension", + "property": "minwidth", + "group": "compoundbutton", + "scale": "small" + }, + { + "name": "ctrl.compoundbutton.small.minheight", + "figmaAlias": "minheight.ctrl.compoundbutton.small", + "type": "dimension", + "property": "minheight", + "group": "compoundbutton", + "scale": "small" + }, + { + "name": "ctrl.compoundbutton.medium.padding.horizontal", + "figmaAlias": "padding.horizontal.ctrl.compoundbutton.medium", + "type": "dimension", + "property": "padding.horizontal", + "group": "compoundbutton", + "scale": "medium" + }, + { + "name": "ctrl.compoundbutton.medium.padding.top", + "figmaAlias": "padding.top.ctrl.compoundbutton.medium", + "type": "dimension", + "property": "padding.top", + "group": "compoundbutton", + "scale": "medium" + }, + { + "name": "ctrl.compoundbutton.medium.padding.bottom", + "figmaAlias": "padding.bottom.ctrl.compoundbutton.medium", + "type": "dimension", + "property": "padding.bottom", + "group": "compoundbutton", + "scale": "medium" + }, + { + "name": "ctrl.compoundbutton.medium.minwidth", + "figmaAlias": "minwidth.ctrl.compoundbutton.medium", + "type": "dimension", + "property": "minwidth", + "group": "compoundbutton", + "scale": "medium" + }, + { + "name": "ctrl.compoundbutton.medium.minheight", + "figmaAlias": "minheight.ctrl.compoundbutton.medium", + "type": "dimension", + "property": "minheight", + "group": "compoundbutton", + "scale": "medium" + }, + { + "name": "ctrl.compoundbutton.large.padding.horizontal", + "figmaAlias": "padding.horizontal.ctrl.compoundbutton.large", + "type": "dimension", + "property": "padding.horizontal", + "group": "compoundbutton", + "scale": "large" + }, + { + "name": "ctrl.compoundbutton.large.padding.top", + "figmaAlias": "padding.top.ctrl.compoundbutton.large", + "type": "dimension", + "property": "padding.top", + "group": "compoundbutton", + "scale": "large" + }, + { + "name": "ctrl.compoundbutton.large.padding.bottom", + "figmaAlias": "padding.bottom.ctrl.compoundbutton.large", + "type": "dimension", + "property": "padding.bottom", + "group": "compoundbutton", + "scale": "large" + }, + { + "name": "ctrl.compoundbutton.large.minwidth", + "figmaAlias": "minwidth.ctrl.compoundbutton.large", + "type": "dimension", + "property": "minwidth", + "group": "compoundbutton", + "scale": "large" + }, + { + "name": "ctrl.compoundbutton.large.minheight", + "figmaAlias": "minheight.ctrl.compoundbutton.large", + "type": "dimension", + "property": "minheight", + "group": "compoundbutton", + "scale": "large" + }, + { + "name": "ctrl.compoundbutton.small.icononly.padding", + "figmaAlias": "padding.ctrl.compoundbutton.small.icononly", + "type": "dimension", + "property": "padding", + "group": "compoundbutton", + "scale": "small" + }, + { + "name": "ctrl.compoundbutton.medium.icononly.padding", + "figmaAlias": "padding.ctrl.compoundbutton.medium.icononly", + "type": "dimension", + "property": "padding", + "group": "compoundbutton", + "scale": "medium" + }, + { + "name": "ctrl.compoundbutton.large.icononly.padding", + "figmaAlias": "padding.ctrl.compoundbutton.large.icononly", + "type": "dimension", + "property": "padding", + "group": "compoundbutton", + "scale": "large" + } + ] +} diff --git a/packages/semantic-tokens/src/controls/compoundbutton/tokens.ts b/packages/semantic-tokens/src/controls/compoundbutton/tokens.ts new file mode 100644 index 00000000000000..55e65bb253565f --- /dev/null +++ b/packages/semantic-tokens/src/controls/compoundbutton/tokens.ts @@ -0,0 +1,30 @@ +export const ctrlCompoundbuttonIconSize = 'var(--smtc-ctrl-compoundbutton-icon-size, 40px)'; +export const ctrlCompoundbuttonGap = 'var(--smtc-ctrl-compoundbutton-gap, var(--spacingHorizontalM))'; +export const ctrlCompoundbuttonSmallPaddingHorizontal = + 'var(--smtc-ctrl-compoundbutton-small-padding-horizontal, var(--spacingHorizontalS))'; +export const ctrlCompoundbuttonSmallPaddingTop = + 'var(--smtc-ctrl-compoundbutton-small-padding-top, var(--spacingHorizontalS))'; +export const ctrlCompoundbuttonSmallPaddingBottom = + 'var(--smtc-ctrl-compoundbutton-small-padding-bottom, var(--spacingHorizontalMNudge))'; +export const ctrlCompoundbuttonSmallMinwidth = 'var(--smtc-ctrl-compoundbutton-small-minwidth)'; +export const ctrlCompoundbuttonSmallMinheight = 'var(--smtc-ctrl-compoundbutton-small-minheight)'; +export const ctrlCompoundbuttonMediumPaddingHorizontal = + 'var(--smtc-ctrl-compoundbutton-medium-padding-horizontal, var(--spacingHorizontalM))'; +export const ctrlCompoundbuttonMediumPaddingTop = 'var(--smtc-ctrl-compoundbutton-medium-padding-top, 14px)'; +export const ctrlCompoundbuttonMediumPaddingBottom = + 'var(--smtc-ctrl-compoundbutton-medium-padding-bottom, var(--spacingHorizontalL))'; +export const ctrlCompoundbuttonMediumMinwidth = 'var(--smtc-ctrl-compoundbutton-medium-minwidth)'; +export const ctrlCompoundbuttonMediumMinheight = 'var(--smtc-ctrl-compoundbutton-medium-minheight)'; +export const ctrlCompoundbuttonLargePaddingHorizontal = + 'var(--smtc-ctrl-compoundbutton-large-padding-horizontal, var(--spacingHorizontalL))'; +export const ctrlCompoundbuttonLargePaddingTop = 'var(--smtc-ctrl-compoundbutton-large-padding-top, 18px)'; +export const ctrlCompoundbuttonLargePaddingBottom = + 'var(--smtc-ctrl-compoundbutton-large-padding-bottom, var(--spacingHorizontalXL))'; +export const ctrlCompoundbuttonLargeMinwidth = 'var(--smtc-ctrl-compoundbutton-large-minwidth)'; +export const ctrlCompoundbuttonLargeMinheight = 'var(--smtc-ctrl-compoundbutton-large-minheight)'; +export const ctrlCompoundbuttonSmallIcononlyPadding = + 'var(--smtc-ctrl-compoundbutton-small-icononly-padding, var(--spacingHorizontalXS))'; +export const ctrlCompoundbuttonMediumIcononlyPadding = + 'var(--smtc-ctrl-compoundbutton-medium-icononly-padding, var(--spacingHorizontalSNudge))'; +export const ctrlCompoundbuttonLargeIcononlyPadding = + 'var(--smtc-ctrl-compoundbutton-large-icononly-padding, var(--spacingHorizontalS))'; diff --git a/packages/semantic-tokens/src/generics/tokens.ts b/packages/semantic-tokens/src/generics/tokens.ts new file mode 100644 index 00000000000000..7fd5a942dd5746 --- /dev/null +++ b/packages/semantic-tokens/src/generics/tokens.ts @@ -0,0 +1,2 @@ +export const cornerCircular = 'var(--smtc-corner-circular, var(--borderRadiusCircular))'; +export const cornerSquare = 'var(--smtc-corner-square, var(--borderRadiusNone))'; diff --git a/packages/semantic-tokens/src/groups/button/tokens.ts b/packages/semantic-tokens/src/groups/button/tokens.ts new file mode 100644 index 00000000000000..170c1cd345bb1c --- /dev/null +++ b/packages/semantic-tokens/src/groups/button/tokens.ts @@ -0,0 +1,424 @@ +export const groupButtonStrokewidth = 'var(--smtc-group-button-strokewidth, var(--strokeWidthThin))'; +export const groupButtonNeutralBackground = + 'var(--smtc-group-button-neutral-background, var(--colorNeutralBackground1))'; +export const groupButtonNeutralBackgroundHover = + 'var(--smtc-group-button-neutral-background-hover, var(--colorNeutralBackground1Hover))'; +export const groupButtonNeutralBackgroundPressed = + 'var(--smtc-group-button-neutral-background-pressed, var(--colorNeutralBackground1Pressed))'; +export const groupButtonNeutralBackgroundSelected = + 'var(--smtc-group-button-neutral-background-selected, var(--colorNeutralBackground1Selected))'; +export const groupButtonNeutralBackgroundHoverSelected = + 'var(--smtc-group-button-neutral-background-hover-selected, var(--colorNeutralBackground1Hover))'; +export const groupButtonNeutralBackgroundPressedSelected = + 'var(--smtc-group-button-neutral-background-pressed-selected, var(--colorNeutralBackground1Pressed))'; +export const groupButtonNeutralBackgroundDisabled = + 'var(--smtc-group-button-neutral-background-disabled, var(--colorNeutralBackgroundDisabled))'; +export const groupButtonPrimaryBackground = 'var(--smtc-group-button-primary-background, var(--colorBrandBackground))'; +export const groupButtonPrimaryBackgroundHover = + 'var(--smtc-group-button-primary-background-hover, var(--colorBrandBackgroundHover))'; +export const groupButtonPrimaryBackgroundPressed = + 'var(--smtc-group-button-primary-background-pressed, var(--colorBrandBackgroundPressed))'; +export const groupButtonPrimaryBackgroundSelected = + 'var(--smtc-group-button-primary-background-selected, var(--colorBrandBackgroundSelected))'; +export const groupButtonPrimaryBackgroundHoverSelected = + 'var(--smtc-group-button-primary-background-hover-selected, var(--colorBrandBackgroundHover))'; +export const groupButtonPrimaryBackgroundPressedSelected = + 'var(--smtc-group-button-primary-background-pressed-selected, var(--colorBrandBackgroundPressed))'; +export const groupButtonPrimaryBackgroundDisabled = + 'var(--smtc-group-button-primary-background-disabled, var(--colorNeutralBackgroundDisabled))'; +export const groupButtonOutlineBackground = + 'var(--smtc-group-button-outline-background, var(--colorTransparentBackground))'; +export const groupButtonOutlineBackgroundHover = + 'var(--smtc-group-button-outline-background-hover, var(--colorTransparentBackgroundHover))'; +export const groupButtonOutlineBackgroundPressed = + 'var(--smtc-group-button-outline-background-pressed, var(--colorTransparentBackgroundPressed))'; +export const groupButtonOutlineBackgroundSelected = + 'var(--smtc-group-button-outline-background-selected, var(--colorTransparentBackgroundSelected))'; +export const groupButtonOutlineBackgroundHoverSelected = + 'var(--smtc-group-button-outline-background-hover-selected, var(--colorTransparentBackgroundHover))'; +export const groupButtonOutlineBackgroundPressedSelected = + 'var(--smtc-group-button-outline-background-pressed-selected, var(--colorTransparentBackgroundPressed))'; +export const groupButtonOutlineBackgroundDisabled = + 'var(--smtc-group-button-outline-background-disabled, var(--colorTransparentBackground))'; +export const groupButtonSubtleBackground = 'var(--smtc-group-button-subtle-background, var(--colorSubtleBackground))'; +export const groupButtonSubtleBackgroundHover = + 'var(--smtc-group-button-subtle-background-hover, var(--colorSubtleBackgroundHover))'; +export const groupButtonSubtleBackgroundPressed = + 'var(--smtc-group-button-subtle-background-pressed, var(--colorSubtleBackgroundPressed))'; +export const groupButtonSubtleBackgroundSelected = + 'var(--smtc-group-button-subtle-background-selected, var(--colorSubtleBackgroundSelected))'; +export const groupButtonSubtleBackgroundHoverSelected = + 'var(--smtc-group-button-subtle-background-hover-selected, var(--colorSubtleBackgroundHover))'; +export const groupButtonSubtleBackgroundPressedSelected = + 'var(--smtc-group-button-subtle-background-pressed-selected, var(--colorSubtleBackgroundPressed))'; +export const groupButtonSubtleBackgroundDisabled = + 'var(--smtc-group-button-subtle-background-disabled, var(--colorTransparentBackground))'; +export const groupButtonTransparentBackground = + 'var(--smtc-group-button-transparent-background, var(--colorTransparentBackground))'; +export const groupButtonTransparentBackgroundHover = + 'var(--smtc-group-button-transparent-background-hover, var(--colorTransparentBackgroundHover))'; +export const groupButtonTransparentBackgroundPressed = + 'var(--smtc-group-button-transparent-background-pressed, var(--colorTransparentBackgroundPressed))'; +export const groupButtonTransparentBackgroundSelected = + 'var(--smtc-group-button-transparent-background-selected, var(--colorTransparentBackgroundSelected))'; +export const groupButtonTransparentBackgroundHoverSelected = + 'var(--smtc-group-button-transparent-background-hover-selected, var(--colorTransparentBackgroundHover))'; +export const groupButtonTransparentBackgroundPressedSelected = + 'var(--smtc-group-button-transparent-background-pressed-selected, var(--colorTransparentBackgroundPressed))'; +export const groupButtonTransparentBackgroundDisabled = + 'var(--smtc-group-button-transparent-background-disabled, var(--colorTransparentBackground))'; +export const groupButtonNeutralStroke = 'var(--smtc-group-button-neutral-stroke, var(--colorNeutralStroke1))'; +export const groupButtonNeutralStrokeHover = + 'var(--smtc-group-button-neutral-stroke-hover, var(--colorNeutralStroke1Hover))'; +export const groupButtonNeutralStrokePressed = + 'var(--smtc-group-button-neutral-stroke-pressed, var(--colorNeutralStroke1Pressed))'; +export const groupButtonNeutralStrokeSelected = + 'var(--smtc-group-button-neutral-stroke-selected, var(--colorNeutralStroke1Selected))'; +export const groupButtonNeutralStrokeHoverSelected = + 'var(--smtc-group-button-neutral-stroke-hover-selected, var(--colorNeutralStroke1Hover))'; +export const groupButtonNeutralStrokePressedSelected = + 'var(--smtc-group-button-neutral-stroke-pressed-selected, var(--colorNeutralStroke1Pressed))'; +export const groupButtonNeutralStrokeDisabled = + 'var(--smtc-group-button-neutral-stroke-disabled, var(--colorNeutralStrokeDisabled))'; +export const groupButtonPrimaryStroke = 'var(--smtc-group-button-primary-stroke, transparent)'; +export const groupButtonPrimaryStrokeHover = 'var(--smtc-group-button-primary-stroke-hover, transparent)'; +export const groupButtonPrimaryStrokePressed = 'var(--smtc-group-button-primary-stroke-pressed, transparent)'; +export const groupButtonPrimaryStrokeSelected = 'var(--smtc-group-button-primary-stroke-selected, transparent)'; +export const groupButtonPrimaryStrokeHoverSelected = + 'var(--smtc-group-button-primary-stroke-hover-selected, transparent)'; +export const groupButtonPrimaryStrokePressedSelected = + 'var(--smtc-group-button-primary-stroke-pressed-selected, transparent)'; +export const groupButtonPrimaryStrokeDisabled = 'var(--smtc-group-button-primary-stroke-disabled, transparent)'; +export const groupButtonOutlineStroke = 'var(--smtc-group-button-outline-stroke, var(--colorNeutralStroke1))'; +export const groupButtonOutlineStrokeHover = + 'var(--smtc-group-button-outline-stroke-hover, var(--colorNeutralStroke1Hover))'; +export const groupButtonOutlineStrokePressed = + 'var(--smtc-group-button-outline-stroke-pressed, var(--colorNeutralStroke1Pressed))'; +export const groupButtonOutlineStrokeSelected = + 'var(--smtc-group-button-outline-stroke-selected, var(--colorNeutralStroke1))'; +export const groupButtonOutlineStrokeHoverSelected = + 'var(--smtc-group-button-outline-stroke-hover-selected, var(--colorNeutralStroke1Selected))'; +export const groupButtonOutlineStrokePressedSelected = + 'var(--smtc-group-button-outline-stroke-pressed-selected, var(--colorNeutralStroke1Selected))'; +export const groupButtonOutlineStrokeDisabled = + 'var(--smtc-group-button-outline-stroke-disabled, var(--colorNeutralStrokeDisabled))'; +export const groupButtonSubtleStroke = 'var(--smtc-group-button-subtle-stroke, transparent)'; +export const groupButtonSubtleStrokeHover = 'var(--smtc-group-button-subtle-stroke-hover, transparent)'; +export const groupButtonSubtleStrokePressed = 'var(--smtc-group-button-subtle-stroke-pressed, transparent)'; +export const groupButtonSubtleStrokeSelected = 'var(--smtc-group-button-subtle-stroke-selected, transparent)'; +export const groupButtonSubtleStrokeHoverSelected = + 'var(--smtc-group-button-subtle-stroke-hover-selected, transparent)'; +export const groupButtonSubtleStrokePressedSelected = + 'var(--smtc-group-button-subtle-stroke-pressed-selected, transparent)'; +export const groupButtonSubtleStrokeDisabled = 'var(--smtc-group-button-subtle-stroke-disabled, transparent)'; +export const groupButtonTransparentStroke = 'var(--smtc-group-button-transparent-stroke, transparent)'; +export const groupButtonTransparentStrokeHover = 'var(--smtc-group-button-transparent-stroke-hover, transparent)'; +export const groupButtonTransparentStrokePressed = 'var(--smtc-group-button-transparent-stroke-pressed, transparent)'; +export const groupButtonTransparentStrokeSelected = 'var(--smtc-group-button-transparent-stroke-selected, transparent)'; +export const groupButtonTransparentStrokeHoverSelected = + 'var(--smtc-group-button-transparent-stroke-hover-selected, transparent)'; +export const groupButtonTransparentStrokePressedSelected = + 'var(--smtc-group-button-transparent-stroke-pressed-selected, transparent)'; +export const groupButtonTransparentStrokeDisabled = 'var(--smtc-group-button-transparent-stroke-disabled, transparent)'; +export const groupButtonSmallPaddingHorizontal = + 'var(--smtc-group-button-small-padding-horizontal, var(--spacingHorizontalS))'; +export const groupButtonSmallPaddingTop = 'var(--smtc-group-button-small-padding-top, 3px)'; +export const groupButtonSmallPaddingBottom = 'var(--smtc-group-button-small-padding-bottom, 3px)'; +export const groupButtonSmallGap = 'var(--smtc-group-button-small-gap, var(--spacingHorizontalXS))'; +export const groupButtonSmallMinwidth = 'var(--smtc-group-button-small-minwidth, 64px)'; +export const groupButtonSmallMinheight = 'var(--smtc-group-button-small-minheight)'; +export const groupButtonMediumPaddingHorizontal = + 'var(--smtc-group-button-medium-padding-horizontal, var(--spacingHorizontalM))'; +export const groupButtonMediumPaddingTop = 'var(--smtc-group-button-medium-padding-top, 5px)'; +export const groupButtonMediumPaddingBottom = 'var(--smtc-group-button-medium-padding-bottom, 5px)'; +export const groupButtonMediumGap = 'var(--smtc-group-button-medium-gap, var(--spacingHorizontalSNudge))'; +export const groupButtonMediumMinwidth = 'var(--smtc-group-button-medium-minwidth, 96px)'; +export const groupButtonMediumMinheight = 'var(--smtc-group-button-medium-minheight)'; +export const groupButtonLargePaddingHorizontal = + 'var(--smtc-group-button-large-padding-horizontal, var(--spacingHorizontalL))'; +export const groupButtonLargePaddingTop = 'var(--smtc-group-button-large-padding-top, var(--spacingVerticalS))'; +export const groupButtonLargePaddingBottom = 'var(--smtc-group-button-large-padding-bottom, var(--spacingVerticalS))'; +export const groupButtonLargeGap = 'var(--smtc-group-button-large-gap, var(--spacingHorizontalSNudge))'; +export const groupButtonLargeMinwidth = 'var(--smtc-group-button-large-minwidth, 96px)'; +export const groupButtonLargeMinheight = 'var(--smtc-group-button-large-minheight)'; +export const groupButtonSmallCorner = 'var(--smtc-group-button-small-corner, var(--borderRadiusMedium))'; +export const groupButtonSmallCornerHover = 'var(--smtc-group-button-small-corner-hover, var(--borderRadiusMedium))'; +export const groupButtonSmallCornerPressed = 'var(--smtc-group-button-small-corner-pressed, var(--borderRadiusMedium))'; +export const groupButtonSmallCornerSelected = + 'var(--smtc-group-button-small-corner-selected, var(--borderRadiusMedium))'; +export const groupButtonSmallCornerHoverSelected = + 'var(--smtc-group-button-small-corner-hover-selected, var(--borderRadiusMedium))'; +export const groupButtonSmallCornerPressedSelected = + 'var(--smtc-group-button-small-corner-pressed-selected, var(--borderRadiusMedium))'; +export const groupButtonSmallCornerDisabled = + 'var(--smtc-group-button-small-corner-disabled, var(--borderRadiusMedium))'; +export const groupButtonMediumCorner = 'var(--smtc-group-button-medium-corner, var(--borderRadiusMedium))'; +export const groupButtonMediumCornerHover = 'var(--smtc-group-button-medium-corner-hover, var(--borderRadiusMedium))'; +export const groupButtonMediumCornerPressed = + 'var(--smtc-group-button-medium-corner-pressed, var(--borderRadiusMedium))'; +export const groupButtonMediumCornerSelected = + 'var(--smtc-group-button-medium-corner-selected, var(--borderRadiusMedium))'; +export const groupButtonMediumCornerHoverSelected = + 'var(--smtc-group-button-medium-corner-hover-selected, var(--borderRadiusMedium))'; +export const groupButtonMediumCornerPressedSelected = + 'var(--smtc-group-button-medium-corner-pressed-selected, var(--borderRadiusMedium))'; +export const groupButtonMediumCornerDisabled = + 'var(--smtc-group-button-medium-corner-disabled, var(--borderRadiusMedium))'; +export const groupButtonLargeCorner = 'var(--smtc-group-button-large-corner, var(--borderRadiusMedium))'; +export const groupButtonLargeCornerHover = 'var(--smtc-group-button-large-corner-hover, var(--borderRadiusMedium))'; +export const groupButtonLargeCornerPressed = 'var(--smtc-group-button-large-corner-pressed, var(--borderRadiusMedium))'; +export const groupButtonLargeCornerSelected = + 'var(--smtc-group-button-large-corner-selected, var(--borderRadiusMedium))'; +export const groupButtonLargeCornerHoverSelected = + 'var(--smtc-group-button-large-corner-hover-selected, var(--borderRadiusMedium))'; +export const groupButtonLargeCornerPressedSelected = + 'var(--smtc-group-button-large-corner-pressed-selected, var(--borderRadiusMedium))'; +export const groupButtonLargeCornerDisabled = + 'var(--smtc-group-button-large-corner-disabled, var(--borderRadiusMedium))'; +export const groupButtonOutlineStrokewidth = 'var(--smtc-group-button-outline-strokewidth)'; +export const groupButtonOutlineStrokewidthHover = + 'var(--smtc-group-button-outline-strokewidth-hover, var(--strokeWidthThin))'; +export const groupButtonOutlineStrokewidthPressed = + 'var(--smtc-group-button-outline-strokewidth-pressed, var(--strokeWidthThin))'; +export const groupButtonOutlineStrokewidthSelected = + 'var(--smtc-group-button-outline-strokewidth-selected, var(--strokeWidthThicker))'; +export const groupButtonNeutralShadow = 'var(--smtc-group-button-neutral-shadow, 0 0 0 transparent)'; +export const groupButtonNeutralShadowDisabled = 'var(--smtc-group-button-neutral-shadow-disabled, 0 0 0 transparent)'; +export const groupButtonNeutralShadowSelected = 'var(--smtc-group-button-neutral-shadow-selected, 0 0 0 transparent)'; +export const groupButtonNeutralShadowDisabledSelected = 'var(--smtc-group-button-neutral-shadow-disabled-selected)'; +export const groupButtonPrimaryShadow = 'var(--smtc-group-button-primary-shadow, 0 0 0 transparent)'; +export const groupButtonPrimaryShadowDisabled = 'var(--smtc-group-button-primary-shadow-disabled, 0 0 0 transparent)'; +export const groupButtonPrimaryShadowSelected = 'var(--smtc-group-button-primary-shadow-selected, 0 0 0 transparent)'; +export const groupButtonPrimaryShadowDisabledSelected = 'var(--smtc-group-button-primary-shadow-disabled-selected)'; +export const groupButtonSmallIcononlyPadding = 'var(--smtc-group-button-small-icononly-padding, 1px)'; +export const groupButtonMediumIcononlyPadding = 'var(--smtc-group-button-medium-icononly-padding, 5px)'; +export const groupButtonLargeIcononlyPadding = 'var(--smtc-group-button-large-icononly-padding, 7px)'; +export const groupButtonNeutralIconForeground = + 'var(--smtc-group-button-neutral-icon-foreground, var(--colorNeutralForeground1))'; +export const groupButtonNeutralIconForegroundHover = + 'var(--smtc-group-button-neutral-icon-foreground-hover, var(--colorNeutralForeground1Hover))'; +export const groupButtonNeutralIconForegroundPressed = + 'var(--smtc-group-button-neutral-icon-foreground-pressed, var(--colorNeutralForeground1Pressed))'; +export const groupButtonNeutralIconForegroundDisabled = + 'var(--smtc-group-button-neutral-icon-foreground-disabled, var(--colorNeutralForegroundDisabled))'; +export const groupButtonNeutralIconForegroundSelected = + 'var(--smtc-group-button-neutral-icon-foreground-selected, var(--colorNeutralForeground1Selected))'; +export const groupButtonPrimaryIconForeground = + 'var(--smtc-group-button-primary-icon-foreground, var(--colorNeutralForegroundOnBrand))'; +export const groupButtonPrimaryIconForegroundHover = + 'var(--smtc-group-button-primary-icon-foreground-hover, var(--colorNeutralForegroundOnBrand))'; +export const groupButtonPrimaryIconForegroundPressed = + 'var(--smtc-group-button-primary-icon-foreground-pressed, var(--colorNeutralForegroundOnBrand))'; +export const groupButtonPrimaryIconForegroundDisabled = + 'var(--smtc-group-button-primary-icon-foreground-disabled, var(--colorNeutralForegroundDisabled))'; +export const groupButtonPrimaryIconForegroundSelected = + 'var(--smtc-group-button-primary-icon-foreground-selected, var(--colorNeutralForegroundOnBrand))'; +export const groupButtonOutlineIconForeground = + 'var(--smtc-group-button-outline-icon-foreground, var(--colorNeutralForeground1))'; +export const groupButtonOutlineIconForegroundHover = + 'var(--smtc-group-button-outline-icon-foreground-hover, var(--colorNeutralForeground1Hover))'; +export const groupButtonOutlineIconForegroundPressed = + 'var(--smtc-group-button-outline-icon-foreground-pressed, var(--colorNeutralForeground1Pressed))'; +export const groupButtonOutlineIconForegroundDisabled = + 'var(--smtc-group-button-outline-icon-foreground-disabled, var(--colorNeutralForegroundDisabled))'; +export const groupButtonOutlineIconForegroundSelected = + 'var(--smtc-group-button-outline-icon-foreground-selected, var(--colorNeutralForeground1Selected))'; +export const groupButtonSubtleIconForeground = + 'var(--smtc-group-button-subtle-icon-foreground, var(--colorNeutralForeground2))'; +export const groupButtonSubtleIconForegroundHover = + 'var(--smtc-group-button-subtle-icon-foreground-hover, var(--colorNeutralForeground2BrandHover))'; +export const groupButtonSubtleIconForegroundPressed = + 'var(--smtc-group-button-subtle-icon-foreground-pressed, var(--colorNeutralForeground2BrandPressed))'; +export const groupButtonSubtleIconForegroundDisabled = + 'var(--smtc-group-button-subtle-icon-foreground-disabled, var(--colorNeutralForegroundDisabled))'; +export const groupButtonSubtleIconForegroundSelected = + 'var(--smtc-group-button-subtle-icon-foreground-selected, var(--colorNeutralForeground2BrandSelected))'; +export const groupButtonTransparentIconForeground = + 'var(--smtc-group-button-transparent-icon-foreground, var(--colorNeutralForeground2))'; +export const groupButtonTransparentIconForegroundHover = + 'var(--smtc-group-button-transparent-icon-foreground-hover, var(--colorNeutralForeground2BrandHover))'; +export const groupButtonTransparentIconForegroundPressed = + 'var(--smtc-group-button-transparent-icon-foreground-pressed, var(--colorNeutralForeground2BrandPressed))'; +export const groupButtonTransparentIconForegroundDisabled = + 'var(--smtc-group-button-transparent-icon-foreground-disabled, var(--colorNeutralForegroundDisabled))'; +export const groupButtonTransparentIconForegroundSelected = + 'var(--smtc-group-button-transparent-icon-foreground-selected, var(--colorNeutralForeground2BrandSelected))'; +export const groupButtonSmallIconSize = 'var(--smtc-group-button-small-icon-size, 20px)'; +export const groupButtonMediumIconSize = 'var(--smtc-group-button-medium-icon-size, 20px)'; +export const groupButtonLargeIconSize = 'var(--smtc-group-button-large-icon-size, 24px)'; +export const groupButtonDividerStrokewidth = 'var(--smtc-group-button-divider-strokewidth, var(--strokeWidthThin))'; +export const groupButtonDividerMarginVertical = 'var(--smtc-group-button-divider-margin-vertical, 0px)'; +export const groupButtonNeutralDividerStroke = + 'var(--smtc-group-button-neutral-divider-stroke, var(--colorNeutralStroke1))'; +export const groupButtonPrimaryDividerStroke = + 'var(--smtc-group-button-primary-divider-stroke, var(--colorNeutralStrokeOnBrand))'; +export const groupButtonOutlineDividerStroke = + 'var(--smtc-group-button-outline-divider-stroke, var(--colorNeutralStroke1))'; +export const groupButtonSubtleDividerStroke = 'var(--smtc-group-button-subtle-divider-stroke, transparent)'; +export const groupButtonTransparentDividerStroke = 'var(--smtc-group-button-transparent-divider-stroke, transparent)'; +export const groupButtonNeutralChevronForeground = 'var(--smtc-group-button-neutral-chevron-foreground)'; +export const groupButtonNeutralChevronForegroundHover = 'var(--smtc-group-button-neutral-chevron-foreground-hover)'; +export const groupButtonNeutralChevronForegroundPressed = 'var(--smtc-group-button-neutral-chevron-foreground-pressed)'; +export const groupButtonNeutralChevronForegroundSelected = + 'var(--smtc-group-button-neutral-chevron-foreground-selected)'; +export const groupButtonNeutralChevronForegroundDisabled = + 'var(--smtc-group-button-neutral-chevron-foreground-disabled)'; +export const groupButtonPrimaryChevronForeground = 'var(--smtc-group-button-primary-chevron-foreground)'; +export const groupButtonPrimaryChevronForegroundHover = 'var(--smtc-group-button-primary-chevron-foreground-hover)'; +export const groupButtonPrimaryChevronForegroundPressed = 'var(--smtc-group-button-primary-chevron-foreground-pressed)'; +export const groupButtonPrimaryChevronForegroundSelected = + 'var(--smtc-group-button-primary-chevron-foreground-selected)'; +export const groupButtonPrimaryChevronForegroundDisabled = + 'var(--smtc-group-button-primary-chevron-foreground-disabled)'; +export const groupButtonOutlineChevronForeground = 'var(--smtc-group-button-outline-chevron-foreground)'; +export const groupButtonOutlineChevronForegroundHover = 'var(--smtc-group-button-outline-chevron-foreground-hover)'; +export const groupButtonOutlineChevronForegroundPressed = 'var(--smtc-group-button-outline-chevron-foreground-pressed)'; +export const groupButtonOutlineChevronForegroundSelected = + 'var(--smtc-group-button-outline-chevron-foreground-selected)'; +export const groupButtonOutlineChevronForegroundDisabled = + 'var(--smtc-group-button-outline-chevron-foreground-disabled)'; +export const groupButtonSubtleChevronForeground = 'var(--smtc-group-button-subtle-chevron-foreground)'; +export const groupButtonSubtleChevronForegroundHover = 'var(--smtc-group-button-subtle-chevron-foreground-hover)'; +export const groupButtonSubtleChevronForegroundPressed = 'var(--smtc-group-button-subtle-chevron-foreground-pressed)'; +export const groupButtonSubtleChevronForegroundSelected = 'var(--smtc-group-button-subtle-chevron-foreground-selected)'; +export const groupButtonSubtleChevronForegroundDisabled = 'var(--smtc-group-button-subtle-chevron-foreground-disabled)'; +export const groupButtonTransparentChevronForeground = 'var(--smtc-group-button-transparent-chevron-foreground)'; +export const groupButtonTransparentChevronForegroundHover = + 'var(--smtc-group-button-transparent-chevron-foreground-hover)'; +export const groupButtonTransparentChevronForegroundPressed = + 'var(--smtc-group-button-transparent-chevron-foreground-pressed)'; +export const groupButtonTransparentChevronForegroundSelected = + 'var(--smtc-group-button-transparent-chevron-foreground-selected)'; +export const groupButtonTransparentChevronForegroundDisabled = + 'var(--smtc-group-button-transparent-chevron-foreground-disabled)'; +export const groupButtonSmallChevronSize = 'var(--smtc-group-button-small-chevron-size)'; +export const groupButtonMediumChevronSize = 'var(--smtc-group-button-medium-chevron-size)'; +export const groupButtonLargeChevronSize = 'var(--smtc-group-button-large-chevron-size)'; +export const groupButtonTextFontfamily = 'var(--smtc-group-button-text-fontfamily, var(--fontFamilyBase))'; +export const groupButtonNeutralTextForeground = + 'var(--smtc-group-button-neutral-text-foreground, var(--colorNeutralForeground1))'; +export const groupButtonNeutralTextForegroundHover = + 'var(--smtc-group-button-neutral-text-foreground-hover, var(--colorNeutralForeground1Hover))'; +export const groupButtonNeutralTextForegroundPressed = + 'var(--smtc-group-button-neutral-text-foreground-pressed, var(--colorNeutralForeground1Pressed))'; +export const groupButtonNeutralTextForegroundDisabled = + 'var(--smtc-group-button-neutral-text-foreground-disabled, var(--colorNeutralForegroundDisabled))'; +export const groupButtonNeutralTextForegroundSelected = + 'var(--smtc-group-button-neutral-text-foreground-selected, var(--colorNeutralForeground1Selected))'; +export const groupButtonPrimaryTextForeground = + 'var(--smtc-group-button-primary-text-foreground, var(--colorNeutralForegroundOnBrand))'; +export const groupButtonPrimaryTextForegroundHover = + 'var(--smtc-group-button-primary-text-foreground-hover, var(--colorNeutralForegroundOnBrand))'; +export const groupButtonPrimaryTextForegroundPressed = + 'var(--smtc-group-button-primary-text-foreground-pressed, var(--colorNeutralForegroundOnBrand))'; +export const groupButtonPrimaryTextForegroundDisabled = + 'var(--smtc-group-button-primary-text-foreground-disabled, var(--colorNeutralForegroundDisabled))'; +export const groupButtonPrimaryTextForegroundSelected = + 'var(--smtc-group-button-primary-text-foreground-selected, var(--colorNeutralForegroundOnBrand))'; +export const groupButtonOutlineTextForeground = + 'var(--smtc-group-button-outline-text-foreground, var(--colorNeutralForeground1))'; +export const groupButtonOutlineTextForegroundHover = + 'var(--smtc-group-button-outline-text-foreground-hover, var(--colorNeutralForeground1Hover))'; +export const groupButtonOutlineTextForegroundPressed = + 'var(--smtc-group-button-outline-text-foreground-pressed, var(--colorNeutralForeground1Pressed))'; +export const groupButtonOutlineTextForegroundDisabled = + 'var(--smtc-group-button-outline-text-foreground-disabled, var(--colorNeutralForegroundDisabled))'; +export const groupButtonOutlineTextForegroundSelected = + 'var(--smtc-group-button-outline-text-foreground-selected, var(--colorNeutralForeground1Selected))'; +export const groupButtonSubtleTextForeground = + 'var(--smtc-group-button-subtle-text-foreground, var(--colorNeutralForeground2))'; +export const groupButtonSubtleTextForegroundHover = + 'var(--smtc-group-button-subtle-text-foreground-hover, var(--colorNeutralForeground2Hover))'; +export const groupButtonSubtleTextForegroundPressed = + 'var(--smtc-group-button-subtle-text-foreground-pressed, var(--colorNeutralForeground2Pressed))'; +export const groupButtonSubtleTextForegroundDisabled = + 'var(--smtc-group-button-subtle-text-foreground-disabled, var(--colorNeutralForegroundDisabled))'; +export const groupButtonSubtleTextForegroundSelected = + 'var(--smtc-group-button-subtle-text-foreground-selected, var(--colorNeutralForeground2Selected))'; +export const groupButtonTransparentTextForeground = + 'var(--smtc-group-button-transparent-text-foreground, var(--colorNeutralForeground2))'; +export const groupButtonTransparentTextForegroundHover = + 'var(--smtc-group-button-transparent-text-foreground-hover, var(--colorNeutralForeground2BrandHover))'; +export const groupButtonTransparentTextForegroundPressed = + 'var(--smtc-group-button-transparent-text-foreground-pressed, var(--colorNeutralForeground2BrandPressed))'; +export const groupButtonTransparentTextForegroundDisabled = + 'var(--smtc-group-button-transparent-text-foreground-disabled, var(--colorNeutralForegroundDisabled))'; +export const groupButtonTransparentTextForegroundSelected = + 'var(--smtc-group-button-transparent-text-foreground-selected, var(--colorNeutralForeground2BrandSelected))'; +export const groupButtonSmallTextPaddingHorizontal = 'var(--smtc-group-button-small-text-padding-horizontal, 0px)'; +export const groupButtonSmallTextFontsize = 'var(--smtc-group-button-small-text-fontsize, var(--fontSizeBase200))'; +export const groupButtonSmallTextLineheight = + 'var(--smtc-group-button-small-text-lineheight, var(--lineHeightBase200))'; +export const groupButtonSmallTextFontweight = + 'var(--smtc-group-button-small-text-fontweight, var(--fontWeightRegular))'; +export const groupButtonMediumTextPaddingHorizontal = 'var(--smtc-group-button-medium-text-padding-horizontal, 0px)'; +export const groupButtonMediumTextFontsize = 'var(--smtc-group-button-medium-text-fontsize, var(--fontSizeBase300))'; +export const groupButtonMediumTextLineheight = + 'var(--smtc-group-button-medium-text-lineheight, var(--lineHeightBase300))'; +export const groupButtonMediumTextFontweight = + 'var(--smtc-group-button-medium-text-fontweight, var(--fontWeightSemibold))'; +export const groupButtonLargeTextPaddingHorizontal = 'var(--smtc-group-button-large-text-padding-horizontal, 0px)'; +export const groupButtonLargeTextFontsize = 'var(--smtc-group-button-large-text-fontsize, var(--fontSizeBase400))'; +export const groupButtonLargeTextLineheight = + 'var(--smtc-group-button-large-text-lineheight, var(--lineHeightBase400))'; +export const groupButtonLargeTextFontweight = + 'var(--smtc-group-button-large-text-fontweight, var(--fontWeightSemibold))'; +export const groupButtonSmallTextFontweightSelected = 'var(--smtc-group-button-small-text-fontweight-selected)'; +export const groupButtonMediumTextFontweightSelected = 'var(--smtc-group-button-medium-text-fontweight-selected)'; +export const groupButtonLargeTextFontweightSelected = 'var(--smtc-group-button-large-text-fontweight-selected)'; +export const groupButtonNeutralTextSecondaryForeground = + 'var(--smtc-group-button-neutral-text-secondary-foreground, var(--colorNeutralForeground2))'; +export const groupButtonNeutralTextSecondaryForegroundHover = + 'var(--smtc-group-button-neutral-text-secondary-foreground-hover, var(--colorNeutralForeground2Hover))'; +export const groupButtonNeutralTextSecondaryForegroundPressed = + 'var(--smtc-group-button-neutral-text-secondary-foreground-pressed, var(--colorNeutralForeground2Pressed))'; +export const groupButtonNeutralTextSecondaryForegroundDisabled = + 'var(--smtc-group-button-neutral-text-secondary-foreground-disabled, var(--colorNeutralForegroundDisabled))'; +export const groupButtonPrimaryTextSecondaryForeground = + 'var(--smtc-group-button-primary-text-secondary-foreground, var(--colorNeutralForegroundOnBrand))'; +export const groupButtonPrimaryTextSecondaryForegroundHover = + 'var(--smtc-group-button-primary-text-secondary-foreground-hover, var(--colorNeutralForegroundOnBrand))'; +export const groupButtonPrimaryTextSecondaryForegroundPressed = + 'var(--smtc-group-button-primary-text-secondary-foreground-pressed, var(--colorNeutralForegroundOnBrand))'; +export const groupButtonPrimaryTextSecondaryForegroundDisabled = + 'var(--smtc-group-button-primary-text-secondary-foreground-disabled, var(--colorNeutralForegroundDisabled))'; +export const groupButtonOutlineTextSecondaryForeground = + 'var(--smtc-group-button-outline-text-secondary-foreground, var(--colorNeutralForeground2))'; +export const groupButtonOutlineTextSecondaryForegroundHover = + 'var(--smtc-group-button-outline-text-secondary-foreground-hover, var(--colorNeutralForeground2Hover))'; +export const groupButtonOutlineTextSecondaryForegroundPressed = + 'var(--smtc-group-button-outline-text-secondary-foreground-pressed, var(--colorNeutralForeground2Pressed))'; +export const groupButtonOutlineTextSecondaryForegroundDisabled = + 'var(--smtc-group-button-outline-text-secondary-foreground-disabled, var(--colorNeutralForegroundDisabled))'; +export const groupButtonSubtleTextSecondaryForeground = + 'var(--smtc-group-button-subtle-text-secondary-foreground, var(--colorNeutralForeground2))'; +export const groupButtonSubtleTextSecondaryForegroundHover = + 'var(--smtc-group-button-subtle-text-secondary-foreground-hover, var(--colorNeutralForeground2Hover))'; +export const groupButtonSubtleTextSecondaryForegroundPressed = + 'var(--smtc-group-button-subtle-text-secondary-foreground-pressed, var(--colorNeutralForeground2Pressed))'; +export const groupButtonSubtleTextSecondaryForegroundDisabled = + 'var(--smtc-group-button-subtle-text-secondary-foreground-disabled, var(--colorNeutralForegroundDisabled))'; +export const groupButtonTransparentTextSecondaryForeground = + 'var(--smtc-group-button-transparent-text-secondary-foreground, var(--colorNeutralForeground2))'; +export const groupButtonTransparentTextSecondaryForegroundHover = + 'var(--smtc-group-button-transparent-text-secondary-foreground-hover, var(--colorNeutralForeground2BrandHover))'; +export const groupButtonTransparentTextSecondaryForegroundPressed = + 'var(--smtc-group-button-transparent-text-secondary-foreground-pressed, var(--colorNeutralForeground2BrandPressed))'; +export const groupButtonTransparentTextSecondaryForegroundDisabled = + 'var(--smtc-group-button-transparent-text-secondary-foreground-disabled, var(--colorNeutralForegroundDisabled))'; +export const groupButtonSmallTextSecondaryFontsize = + 'var(--smtc-group-button-small-text-secondary-fontsize, var(--fontSizeBase200))'; +export const groupButtonSmallTextSecondaryLineheight = 'var(--smtc-group-button-small-text-secondary-lineheight, 100%)'; +export const groupButtonSmallTextSecondaryFontweight = + 'var(--smtc-group-button-small-text-secondary-fontweight, var(--fontWeightRegular))'; +export const groupButtonMediumTextSecondaryFontsize = + 'var(--smtc-group-button-medium-text-secondary-fontsize, var(--fontSizeBase200))'; +export const groupButtonMediumTextSecondaryLineheight = + 'var(--smtc-group-button-medium-text-secondary-lineheight, 100%)'; +export const groupButtonMediumTextSecondaryFontweight = + 'var(--smtc-group-button-medium-text-secondary-fontweight, var(--fontWeightRegular))'; +export const groupButtonLargeTextSecondaryFontsize = + 'var(--smtc-group-button-large-text-secondary-fontsize, var(--fontSizeBase300))'; +export const groupButtonLargeTextSecondaryLineheight = 'var(--smtc-group-button-large-text-secondary-lineheight, 100%)'; +export const groupButtonLargeTextSecondaryFontweight = + 'var(--smtc-group-button-large-text-secondary-fontweight, var(--fontWeightRegular))'; diff --git a/packages/semantic-tokens/src/groups/focus/tokens.ts b/packages/semantic-tokens/src/groups/focus/tokens.ts new file mode 100644 index 00000000000000..62c8885c80ed66 --- /dev/null +++ b/packages/semantic-tokens/src/groups/focus/tokens.ts @@ -0,0 +1,6 @@ +export const groupFocusOuterStroke = 'var(--smtc-group-focus-outer-stroke, var(--colorTransparentStroke))'; +export const groupFocusInnerStroke = 'var(--smtc-group-focus-inner-stroke, var(--colorStrokeFocus2))'; +export const groupFocusOuterStrokewidth = 'var(--smtc-group-focus-outer-strokewidth, var(--strokeWidthThick))'; +export const groupFocusInnerStrokewidth = 'var(--smtc-group-focus-inner-strokewidth, var(--strokeWidthThin))'; +export const groupFocusOnbrandStroke = 'var(--smtc-group-focus-onbrand-stroke, var(--colorNeutralForegroundOnBrand))'; +export const groupFocusOnbrandStrokeHover = 'var(--smtc-group-focus-onbrand-stroke-hover, var(--colorStrokeFocus2))'; diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index cb0ff5c3b541f6..93eca1989c00da 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1 +1,292 @@ -export {}; +export { cornerCircular, cornerSquare } from './generics/tokens'; +export { + groupFocusOuterStroke, + groupFocusInnerStroke, + groupFocusOuterStrokewidth, + groupFocusInnerStrokewidth, + groupFocusOnbrandStroke, + groupFocusOnbrandStrokeHover, +} from './groups/focus/tokens'; + +export { + groupButtonStrokewidth, + groupButtonNeutralBackground, + groupButtonNeutralBackgroundHover, + groupButtonNeutralBackgroundPressed, + groupButtonNeutralBackgroundSelected, + groupButtonNeutralBackgroundHoverSelected, + groupButtonNeutralBackgroundPressedSelected, + groupButtonNeutralBackgroundDisabled, + groupButtonPrimaryBackground, + groupButtonPrimaryBackgroundHover, + groupButtonPrimaryBackgroundPressed, + groupButtonPrimaryBackgroundSelected, + groupButtonPrimaryBackgroundHoverSelected, + groupButtonPrimaryBackgroundPressedSelected, + groupButtonPrimaryBackgroundDisabled, + groupButtonOutlineBackground, + groupButtonOutlineBackgroundHover, + groupButtonOutlineBackgroundPressed, + groupButtonOutlineBackgroundSelected, + groupButtonOutlineBackgroundHoverSelected, + groupButtonOutlineBackgroundPressedSelected, + groupButtonOutlineBackgroundDisabled, + groupButtonSubtleBackground, + groupButtonSubtleBackgroundHover, + groupButtonSubtleBackgroundPressed, + groupButtonSubtleBackgroundSelected, + groupButtonSubtleBackgroundHoverSelected, + groupButtonSubtleBackgroundPressedSelected, + groupButtonSubtleBackgroundDisabled, + groupButtonTransparentBackground, + groupButtonTransparentBackgroundHover, + groupButtonTransparentBackgroundPressed, + groupButtonTransparentBackgroundSelected, + groupButtonTransparentBackgroundHoverSelected, + groupButtonTransparentBackgroundPressedSelected, + groupButtonTransparentBackgroundDisabled, + groupButtonNeutralStroke, + groupButtonNeutralStrokeHover, + groupButtonNeutralStrokePressed, + groupButtonNeutralStrokeSelected, + groupButtonNeutralStrokeHoverSelected, + groupButtonNeutralStrokePressedSelected, + groupButtonNeutralStrokeDisabled, + groupButtonPrimaryStroke, + groupButtonPrimaryStrokeHover, + groupButtonPrimaryStrokePressed, + groupButtonPrimaryStrokeSelected, + groupButtonPrimaryStrokeHoverSelected, + groupButtonPrimaryStrokePressedSelected, + groupButtonPrimaryStrokeDisabled, + groupButtonOutlineStroke, + groupButtonOutlineStrokeHover, + groupButtonOutlineStrokePressed, + groupButtonOutlineStrokeSelected, + groupButtonOutlineStrokeHoverSelected, + groupButtonOutlineStrokePressedSelected, + groupButtonOutlineStrokeDisabled, + groupButtonSubtleStroke, + groupButtonSubtleStrokeHover, + groupButtonSubtleStrokePressed, + groupButtonSubtleStrokeSelected, + groupButtonSubtleStrokeHoverSelected, + groupButtonSubtleStrokePressedSelected, + groupButtonSubtleStrokeDisabled, + groupButtonTransparentStroke, + groupButtonTransparentStrokeHover, + groupButtonTransparentStrokePressed, + groupButtonTransparentStrokeSelected, + groupButtonTransparentStrokeHoverSelected, + groupButtonTransparentStrokePressedSelected, + groupButtonTransparentStrokeDisabled, + groupButtonSmallPaddingHorizontal, + groupButtonSmallPaddingTop, + groupButtonSmallPaddingBottom, + groupButtonSmallGap, + groupButtonSmallMinwidth, + groupButtonSmallMinheight, + groupButtonMediumPaddingHorizontal, + groupButtonMediumPaddingTop, + groupButtonMediumPaddingBottom, + groupButtonMediumGap, + groupButtonMediumMinwidth, + groupButtonMediumMinheight, + groupButtonLargePaddingHorizontal, + groupButtonLargePaddingTop, + groupButtonLargePaddingBottom, + groupButtonLargeGap, + groupButtonLargeMinwidth, + groupButtonLargeMinheight, + groupButtonSmallCorner, + groupButtonSmallCornerHover, + groupButtonSmallCornerPressed, + groupButtonSmallCornerSelected, + groupButtonSmallCornerHoverSelected, + groupButtonSmallCornerPressedSelected, + groupButtonSmallCornerDisabled, + groupButtonMediumCorner, + groupButtonMediumCornerHover, + groupButtonMediumCornerPressed, + groupButtonMediumCornerSelected, + groupButtonMediumCornerHoverSelected, + groupButtonMediumCornerPressedSelected, + groupButtonMediumCornerDisabled, + groupButtonLargeCorner, + groupButtonLargeCornerHover, + groupButtonLargeCornerPressed, + groupButtonLargeCornerSelected, + groupButtonLargeCornerHoverSelected, + groupButtonLargeCornerPressedSelected, + groupButtonLargeCornerDisabled, + groupButtonOutlineStrokewidth, + groupButtonOutlineStrokewidthHover, + groupButtonOutlineStrokewidthPressed, + groupButtonOutlineStrokewidthSelected, + groupButtonNeutralShadow, + groupButtonNeutralShadowDisabled, + groupButtonNeutralShadowSelected, + groupButtonNeutralShadowDisabledSelected, + groupButtonPrimaryShadow, + groupButtonPrimaryShadowDisabled, + groupButtonPrimaryShadowSelected, + groupButtonPrimaryShadowDisabledSelected, + groupButtonSmallIcononlyPadding, + groupButtonMediumIcononlyPadding, + groupButtonLargeIcononlyPadding, + groupButtonNeutralIconForeground, + groupButtonNeutralIconForegroundHover, + groupButtonNeutralIconForegroundPressed, + groupButtonNeutralIconForegroundDisabled, + groupButtonNeutralIconForegroundSelected, + groupButtonPrimaryIconForeground, + groupButtonPrimaryIconForegroundHover, + groupButtonPrimaryIconForegroundPressed, + groupButtonPrimaryIconForegroundDisabled, + groupButtonPrimaryIconForegroundSelected, + groupButtonOutlineIconForeground, + groupButtonOutlineIconForegroundHover, + groupButtonOutlineIconForegroundPressed, + groupButtonOutlineIconForegroundDisabled, + groupButtonOutlineIconForegroundSelected, + groupButtonSubtleIconForeground, + groupButtonSubtleIconForegroundHover, + groupButtonSubtleIconForegroundPressed, + groupButtonSubtleIconForegroundDisabled, + groupButtonSubtleIconForegroundSelected, + groupButtonTransparentIconForeground, + groupButtonTransparentIconForegroundHover, + groupButtonTransparentIconForegroundPressed, + groupButtonTransparentIconForegroundDisabled, + groupButtonTransparentIconForegroundSelected, + groupButtonSmallIconSize, + groupButtonMediumIconSize, + groupButtonLargeIconSize, + groupButtonDividerStrokewidth, + groupButtonDividerMarginVertical, + groupButtonNeutralDividerStroke, + groupButtonPrimaryDividerStroke, + groupButtonOutlineDividerStroke, + groupButtonSubtleDividerStroke, + groupButtonTransparentDividerStroke, + groupButtonNeutralChevronForeground, + groupButtonNeutralChevronForegroundHover, + groupButtonNeutralChevronForegroundPressed, + groupButtonNeutralChevronForegroundSelected, + groupButtonNeutralChevronForegroundDisabled, + groupButtonPrimaryChevronForeground, + groupButtonPrimaryChevronForegroundHover, + groupButtonPrimaryChevronForegroundPressed, + groupButtonPrimaryChevronForegroundSelected, + groupButtonPrimaryChevronForegroundDisabled, + groupButtonOutlineChevronForeground, + groupButtonOutlineChevronForegroundHover, + groupButtonOutlineChevronForegroundPressed, + groupButtonOutlineChevronForegroundSelected, + groupButtonOutlineChevronForegroundDisabled, + groupButtonSubtleChevronForeground, + groupButtonSubtleChevronForegroundHover, + groupButtonSubtleChevronForegroundPressed, + groupButtonSubtleChevronForegroundSelected, + groupButtonSubtleChevronForegroundDisabled, + groupButtonTransparentChevronForeground, + groupButtonTransparentChevronForegroundHover, + groupButtonTransparentChevronForegroundPressed, + groupButtonTransparentChevronForegroundSelected, + groupButtonTransparentChevronForegroundDisabled, + groupButtonSmallChevronSize, + groupButtonMediumChevronSize, + groupButtonLargeChevronSize, + groupButtonTextFontfamily, + groupButtonNeutralTextForeground, + groupButtonNeutralTextForegroundHover, + groupButtonNeutralTextForegroundPressed, + groupButtonNeutralTextForegroundDisabled, + groupButtonNeutralTextForegroundSelected, + groupButtonPrimaryTextForeground, + groupButtonPrimaryTextForegroundHover, + groupButtonPrimaryTextForegroundPressed, + groupButtonPrimaryTextForegroundDisabled, + groupButtonPrimaryTextForegroundSelected, + groupButtonOutlineTextForeground, + groupButtonOutlineTextForegroundHover, + groupButtonOutlineTextForegroundPressed, + groupButtonOutlineTextForegroundDisabled, + groupButtonOutlineTextForegroundSelected, + groupButtonSubtleTextForeground, + groupButtonSubtleTextForegroundHover, + groupButtonSubtleTextForegroundPressed, + groupButtonSubtleTextForegroundDisabled, + groupButtonSubtleTextForegroundSelected, + groupButtonTransparentTextForeground, + groupButtonTransparentTextForegroundHover, + groupButtonTransparentTextForegroundPressed, + groupButtonTransparentTextForegroundDisabled, + groupButtonTransparentTextForegroundSelected, + groupButtonSmallTextPaddingHorizontal, + groupButtonSmallTextFontsize, + groupButtonSmallTextLineheight, + groupButtonSmallTextFontweight, + groupButtonMediumTextPaddingHorizontal, + groupButtonMediumTextFontsize, + groupButtonMediumTextLineheight, + groupButtonMediumTextFontweight, + groupButtonLargeTextPaddingHorizontal, + groupButtonLargeTextFontsize, + groupButtonLargeTextLineheight, + groupButtonLargeTextFontweight, + groupButtonSmallTextFontweightSelected, + groupButtonMediumTextFontweightSelected, + groupButtonLargeTextFontweightSelected, + groupButtonNeutralTextSecondaryForeground, + groupButtonNeutralTextSecondaryForegroundHover, + groupButtonNeutralTextSecondaryForegroundPressed, + groupButtonNeutralTextSecondaryForegroundDisabled, + groupButtonPrimaryTextSecondaryForeground, + groupButtonPrimaryTextSecondaryForegroundHover, + groupButtonPrimaryTextSecondaryForegroundPressed, + groupButtonPrimaryTextSecondaryForegroundDisabled, + groupButtonOutlineTextSecondaryForeground, + groupButtonOutlineTextSecondaryForegroundHover, + groupButtonOutlineTextSecondaryForegroundPressed, + groupButtonOutlineTextSecondaryForegroundDisabled, + groupButtonSubtleTextSecondaryForeground, + groupButtonSubtleTextSecondaryForegroundHover, + groupButtonSubtleTextSecondaryForegroundPressed, + groupButtonSubtleTextSecondaryForegroundDisabled, + groupButtonTransparentTextSecondaryForeground, + groupButtonTransparentTextSecondaryForegroundHover, + groupButtonTransparentTextSecondaryForegroundPressed, + groupButtonTransparentTextSecondaryForegroundDisabled, + groupButtonSmallTextSecondaryFontsize, + groupButtonSmallTextSecondaryLineheight, + groupButtonSmallTextSecondaryFontweight, + groupButtonMediumTextSecondaryFontsize, + groupButtonMediumTextSecondaryLineheight, + groupButtonMediumTextSecondaryFontweight, + groupButtonLargeTextSecondaryFontsize, + groupButtonLargeTextSecondaryLineheight, + groupButtonLargeTextSecondaryFontweight, +} from './groups/button/tokens'; +export { + ctrlCompoundbuttonIconSize, + ctrlCompoundbuttonGap, + ctrlCompoundbuttonSmallPaddingHorizontal, + ctrlCompoundbuttonSmallPaddingTop, + ctrlCompoundbuttonSmallPaddingBottom, + ctrlCompoundbuttonSmallMinwidth, + ctrlCompoundbuttonSmallMinheight, + ctrlCompoundbuttonMediumPaddingHorizontal, + ctrlCompoundbuttonMediumPaddingTop, + ctrlCompoundbuttonMediumPaddingBottom, + ctrlCompoundbuttonMediumMinwidth, + ctrlCompoundbuttonMediumMinheight, + ctrlCompoundbuttonLargePaddingHorizontal, + ctrlCompoundbuttonLargePaddingTop, + ctrlCompoundbuttonLargePaddingBottom, + ctrlCompoundbuttonLargeMinwidth, + ctrlCompoundbuttonLargeMinheight, + ctrlCompoundbuttonSmallIcononlyPadding, + ctrlCompoundbuttonMediumIcononlyPadding, + ctrlCompoundbuttonLargeIcononlyPadding, +} from './controls/compoundbutton/tokens'; diff --git a/packages/semantic-tokens/src/primitives/tokens.ts b/packages/semantic-tokens/src/primitives/tokens.ts new file mode 100644 index 00000000000000..23c7d86ee85d00 --- /dev/null +++ b/packages/semantic-tokens/src/primitives/tokens.ts @@ -0,0 +1,66 @@ +export const _brandLoudRest = 'var(--smtc-brand-loud-rest)'; +export const _brandLoudHover = 'var(--smtc-brand-loud-hover)'; +export const _brandLoudPressed = 'var(--smtc-brand-loud-pressed)'; +export const _brandLoudSelected = 'var(--smtc-brand-loud-selected)'; +export const _brandTintRest = 'var(--smtc-brand-tint-rest)'; +export const _brandTintHover = 'var(--smtc-brand-tint-hover)'; +export const _brandTintPressed = 'var(--smtc-brand-tint-pressed)'; +export const _brandTintSelected = 'var(--smtc-brand-tint-selected)'; +export const _brandSubtleRest = 'var(--smtc-brand-subtle-rest)'; +export const _brandSubtleHover = 'var(--smtc-brand-subtle-hover)'; +export const _brandSubtlePressed = 'var(--smtc-brand-subtle-pressed)'; +export const _brandSubtleSelected = 'var(--smtc-brand-subtle-selected)'; +export const _brandTransparentRest = 'var(--smtc-brand-transparent-rest)'; +export const _brandTransparentHover = 'var(--smtc-brand-transparent-hover)'; +export const _brandTransparentPressed = 'var(--smtc-brand-transparent-pressed)'; +export const _brandTransparentSelected = 'var(--smtc-brand-transparent-selected)'; +export const _neutralLoudRest = 'var(--smtc-neutral-loud-rest)'; +export const _neutralLoudHover = 'var(--smtc-neutral-loud-hover)'; +export const _neutralLoudPressed = 'var(--smtc-neutral-loud-pressed)'; +export const _neutralLoudSelected = 'var(--smtc-neutral-loud-selected)'; +export const _neutralTintRest = 'var(--smtc-neutral-tint-rest)'; +export const _neutralTintHover = 'var(--smtc-neutral-tint-hover)'; +export const _neutralTintPressed = 'var(--smtc-neutral-tint-pressed)'; +export const _neutralTintSelected = 'var(--smtc-neutral-tint-selected)'; +export const _neutralSubtleRest = 'var(--smtc-neutral-subtle-rest)'; +export const _neutralSubtleHover = 'var(--smtc-neutral-subtle-hover)'; +export const _neutralSubtlePressed = 'var(--smtc-neutral-subtle-pressed)'; +export const _neutralSubtleSelected = 'var(--smtc-neutral-subtle-selected)'; +export const _neutralTransparentRest = 'var(--smtc-neutral-transparent-rest)'; +export const _neutralTransparentHover = 'var(--smtc-neutral-transparent-hover)'; +export const _neutralTransparentPressed = 'var(--smtc-neutral-transparent-pressed)'; +export const _neutralTransparentSelected = 'var(--smtc-neutral-transparent-selected)'; +export const _statusLoudRest = 'var(--smtc-status-loud-rest)'; +export const _statusLoudHover = 'var(--smtc-status-loud-hover)'; +export const _statusLoudPressed = 'var(--smtc-status-loud-pressed)'; +export const _statusLoudSelected = 'var(--smtc-status-loud-selected)'; +export const _statusTintRest = 'var(--smtc-status-tint-rest)'; +export const _statusTintHover = 'var(--smtc-status-tint-hover)'; +export const _statusTintPressed = 'var(--smtc-status-tint-pressed)'; +export const _statusTintSelected = 'var(--smtc-status-tint-selected)'; +export const _statusSubtleRest = 'var(--smtc-status-subtle-rest)'; +export const _statusSubtleHover = 'var(--smtc-status-subtle-hover)'; +export const _statusSubtlePressed = 'var(--smtc-status-subtle-pressed)'; +export const _statusSubtleSelected = 'var(--smtc-status-subtle-selected)'; +export const _statusTransparentRest = 'var(--smtc-status-transparent-rest)'; +export const _statusTransparentHover = 'var(--smtc-status-transparent-hover)'; +export const _statusTransparentPressed = 'var(--smtc-status-transparent-pressed)'; +export const _statusTransparentSelected = 'var(--smtc-status-transparent-selected)'; +export const _fontsizeSmall = 'var(--smtc-fontsize-small)'; +export const _fontsizeMedium = 'var(--smtc-fontsize-medium)'; +export const _fontsizeLarge = 'var(--smtc-fontsize-large)'; +export const _fontweightThin = 'var(--smtc-fontweight-thin)'; +export const _fontweightRegular = 'var(--smtc-fontweight-regular)'; +export const _fontweightBold = 'var(--smtc-fontweight-bold)'; +export const _lineheightSmall = 'var(--smtc-lineheight-small)'; +export const _lineheightMedium = 'var(--smtc-lineheight-medium)'; +export const _lineheightLarge = 'var(--smtc-lineheight-large)'; +export const _paddingSmall = 'var(--smtc-padding-small)'; +export const _paddingMedium = 'var(--smtc-padding-medium)'; +export const _paddingLarge = 'var(--smtc-padding-large)'; +export const _gapSmall = 'var(--smtc-gap-small)'; +export const _gapMedium = 'var(--smtc-gap-medium)'; +export const _gapLarge = 'var(--smtc-gap-large)'; +export const _sizeSmall = 'var(--smtc-size-small)'; +export const _sizeMedium = 'var(--smtc-size-medium)'; +export const _sizeLarge = 'var(--smtc-size-large)'; diff --git a/packages/semantic-tokens/utils/chopLastCamelCasePart.test.ts b/packages/semantic-tokens/utils/chopLastCamelCasePart.test.ts new file mode 100644 index 00000000000000..a06e224128fa06 --- /dev/null +++ b/packages/semantic-tokens/utils/chopLastCamelCasePart.test.ts @@ -0,0 +1,21 @@ +import { chopLastCamelCasePart } from './chopLastCamelCasePart'; + +describe('chopLastCamelCasePart', () => { + it('Handles removing last camel case (full word)', () => { + expect(chopLastCamelCasePart('testFunction')).toMatch('test'); + }); + it('Handles removing last camel case (singular letter)', () => { + expect(chopLastCamelCasePart('shadowWindowInactiveKeyX')).toMatch('shadowWindowInactiveKey'); + }); + it('All lowercase gets deleted', () => { + expect(chopLastCamelCasePart('test')).toMatch(''); + }); + + it('Handles single letter camel case piece', () => { + // Ensure that pieces are parsed when single-letter camel case part is used + expect(chopLastCamelCasePart('ctrlComposerInputShadowXOffset')).toMatch('ctrlComposerInputShadowX'); + expect(chopLastCamelCasePart(chopLastCamelCasePart('ctrlComposerInputShadowXOffset'))).toMatch( + 'ctrlComposerInputShadow', + ); + }); +}); diff --git a/packages/semantic-tokens/utils/chopLastCamelCasePart.ts b/packages/semantic-tokens/utils/chopLastCamelCasePart.ts new file mode 100644 index 00000000000000..4e0ad5a4b0ba7c --- /dev/null +++ b/packages/semantic-tokens/utils/chopLastCamelCasePart.ts @@ -0,0 +1,6 @@ +export const chopLastCamelCasePart = (str: string): string => { + // Handle all camel case including multiple capital letters (i.e. ctrlComposerInputShadowXOffset -> ctrlComposerInputShadowX) + const matches = str.match(/([A-Z]+(?=[A-Z][a-z])|[A-Z]?[a-z]+|[A-Z]+)/g); + if (!matches || matches.length <= 1) return str; + return matches.slice(0, -1).join(''); +}; diff --git a/packages/semantic-tokens/utils/cleanFstTokenName.test.ts b/packages/semantic-tokens/utils/cleanFstTokenName.test.ts new file mode 100644 index 00000000000000..fa7b6c7dd4704c --- /dev/null +++ b/packages/semantic-tokens/utils/cleanFstTokenName.test.ts @@ -0,0 +1,22 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +import { cleanFstTokenName } from './cleanFstTokenName'; + +describe('cleanFstTokenName', () => { + it('Cleans tokens with brackets', () => { + expect(cleanFstTokenName('primary/(solid)/(test)/(double test)')).toMatch('primary/solid/test/doubletest'); + expect(cleanFstTokenName('background/layer/primary(solid)')).toMatch('background/layer/primary/solid'); + expect(cleanFstTokenName('shadow/card/rest/(key)/(x)/test')).toMatch('shadow/card/rest/key/x/test'); + expect(cleanFstTokenName('CTRL/fab/shadow/rest/(key)')).toMatch('CTRL/fab/shadow/rest/key'); + }); + + it('Cleans tokens with dashes', () => { + expect(cleanFstTokenName('padding/ctrl/horizontal-default')).toMatch('padding/ctrl/horizontal/default'); + expect(cleanFstTokenName('test1-test2-test3')).toMatch('test1/test2/test3'); + }); + + it('Cleans tokens with a combination', () => { + expect(cleanFstTokenName('test/test1-test2(test3 test)/(test4)/test5')).toMatch( + 'test/test1/test2/test3test/test4/test5', + ); + }); +}); diff --git a/packages/semantic-tokens/utils/cleanFstTokenName.ts b/packages/semantic-tokens/utils/cleanFstTokenName.ts new file mode 100644 index 00000000000000..62ffb99ef6cd88 --- /dev/null +++ b/packages/semantic-tokens/utils/cleanFstTokenName.ts @@ -0,0 +1,8 @@ +/** + * cleanFstTokenName is used to convert token names into a directory style format + * It normalizes spaces, brackets, and dashes into slashes + * running 'toCamelCase' on the output will result in the token's name + */ +export const cleanFstTokenName = (originalTokenName: string) => { + return originalTokenName.replace(/\s+|\)/g, '').replace(/\/?\(|-+/g, '/'); +}; diff --git a/packages/semantic-tokens/utils/escapeInlineToken.test.ts b/packages/semantic-tokens/utils/escapeInlineToken.test.ts new file mode 100644 index 00000000000000..ff584899b24ae2 --- /dev/null +++ b/packages/semantic-tokens/utils/escapeInlineToken.test.ts @@ -0,0 +1,7 @@ +import { escapeInlineToken } from './escapeInlineToken'; + +describe('escapeInlineToken', () => { + it('Handles a variable replacement string as pure text', () => { + expect(escapeInlineToken('textGlobalDisplay1FontsizeRaw')).toMatch('${textGlobalDisplay1FontsizeRaw}'); + }); +}); diff --git a/packages/semantic-tokens/utils/escapeInlineToken.ts b/packages/semantic-tokens/utils/escapeInlineToken.ts new file mode 100644 index 00000000000000..9c1c22711346ea --- /dev/null +++ b/packages/semantic-tokens/utils/escapeInlineToken.ts @@ -0,0 +1,3 @@ +export const escapeInlineToken = (token: string) => { + return `\$\{${token}\}`; +}; diff --git a/packages/semantic-tokens/utils/index.ts b/packages/semantic-tokens/utils/index.ts index cb0ff5c3b541f6..bdc4efe8c90299 100644 --- a/packages/semantic-tokens/utils/index.ts +++ b/packages/semantic-tokens/utils/index.ts @@ -1 +1,5 @@ -export {}; +export { chopLastCamelCasePart } from './chopLastCamelCasePart'; +export { toCamelCase } from './toCamelCase'; +export { removeLastDelimiter } from './removeLastDelimiter'; +export { escapeInlineToken } from './escapeInlineToken'; +export { cleanFstTokenName } from './cleanFstTokenName'; diff --git a/packages/semantic-tokens/utils/removeLastDelimiter.test.ts b/packages/semantic-tokens/utils/removeLastDelimiter.test.ts new file mode 100644 index 00000000000000..2aad6312927ad1 --- /dev/null +++ b/packages/semantic-tokens/utils/removeLastDelimiter.test.ts @@ -0,0 +1,14 @@ +import { removeLastDelimiter } from './removeLastDelimiter'; + +describe('removeLastDelimiter', () => { + it('Removing the last delimiter works with file path', () => { + const testDirPath = '/test/test2/test3'; + const testFilePath = '/test/test2/test3' + '/testFile.ts'; + + // We use path.sep as it is platform dependent + expect(removeLastDelimiter(testFilePath, '/')).toMatch(testDirPath); + }); + it('Works with dashes for CSSVars', () => { + expect(removeLastDelimiter('--smtc-shadow-card-rest-key-x', '-')).toMatch('--smtc-shadow-card-rest-key'); + }); +}); diff --git a/packages/semantic-tokens/utils/removeLastDelimiter.ts b/packages/semantic-tokens/utils/removeLastDelimiter.ts new file mode 100644 index 00000000000000..55748910189563 --- /dev/null +++ b/packages/semantic-tokens/utils/removeLastDelimiter.ts @@ -0,0 +1,8 @@ +export const removeLastDelimiter = (str: string, delimiter: string) => { + const lastIndex = str.lastIndexOf(delimiter); + if (lastIndex === -1) { + // Delimiter not found + return str; + } + return str.substring(0, lastIndex); +}; diff --git a/packages/semantic-tokens/utils/toCamelCase.test.ts b/packages/semantic-tokens/utils/toCamelCase.test.ts new file mode 100644 index 00000000000000..efda9fb113798a --- /dev/null +++ b/packages/semantic-tokens/utils/toCamelCase.test.ts @@ -0,0 +1,17 @@ +import { toCamelCase } from './toCamelCase'; + +describe('toCamelCase', () => { + it('Splits and camel cases strings separated by forward slash', () => { + expect(toCamelCase('test1/test2/test3')).toMatch('test1Test2Test3'); + }); + + it('Handles camelCasing that already exists', () => { + expect(toCamelCase('iconTheme/ctrl/default/rest')).toMatch('iconThemeCtrlDefaultRest'); + expect(toCamelCase('text/style/default/display/fontFamily')).toMatch('textStyleDefaultDisplayFontFamily'); + }); + + it('Handles specific unique variants', () => { + expect(toCamelCase('CTRL/avatar/background')).toMatch('ctrlAvatarBackground'); + expect(toCamelCase('STATUS/brand/background')).toMatch('statusBrandBackground'); + }); +}); diff --git a/packages/semantic-tokens/utils/toCamelCase.ts b/packages/semantic-tokens/utils/toCamelCase.ts new file mode 100644 index 00000000000000..dfc900c4e76921 --- /dev/null +++ b/packages/semantic-tokens/utils/toCamelCase.ts @@ -0,0 +1,17 @@ +export const toCamelCase = (str: string) => { + return str + .split('/') + .map((word: string, index: number) => { + // If it is the first word make sure to lowercase all the chars. + if (index === 0) { + if (word === 'CTRL' || word === 'STATUS' || word === 'NULL') { + // Special cases where we need to convert to lower case + return word.toLowerCase(); + } + return word; + } + // If it is not the first word only upper case the first char and lowercase the rest. + return word.charAt(0).toUpperCase() + word.slice(1); + }) + .join(''); +};